Skip to content

Commit 433dcef

Browse files
SethFalcoSethFalco
authored
refactor(convertPaths): clean up plugin (#1913)
1 parent f238d6a commit 433dcef

File tree

1 file changed

+36
-89
lines changed

1 file changed

+36
-89
lines changed

‎plugins/convertPathData.js

+36-89
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,15 @@ exports.name = 'convertPathData';
1515
exports.description =
1616
'optimizes path data: writes in shorter form, applies transformations';
1717

18-
/**
19-
* @type {(data: number[]) => number[]}
20-
*/
18+
/** @type {(data: number[]) => number[]} */
2119
let roundData;
22-
/**
23-
* @type {number | false}
24-
*/
20+
/** @type {number | false} */
2521
let precision;
26-
/**
27-
* @type {number}
28-
*/
22+
/** @type {number} */
2923
let error;
30-
/**
31-
* @type {number}
32-
*/
24+
/** @type {number} */
3325
let arcThreshold;
34-
/**
35-
* @type {number}
36-
*/
26+
/** @type {number} */
3727
let arcTolerance;
3828

3929
/**
@@ -393,16 +383,17 @@ function filters(
393383
params,
394384
{ isSafeToUseZ, maybeHasStrokeAndLinecap, hasMarkerMid },
395385
) {
396-
var stringify = data2Path.bind(null, params),
397-
relSubpoint = [0, 0],
398-
pathBase = [0, 0],
399-
prev = {};
386+
const stringify = data2Path.bind(null, params);
387+
const relSubpoint = [0, 0];
388+
const pathBase = [0, 0];
389+
/** @type {any} */
390+
let prev = {};
400391
/** @type {Point | undefined} */
401-
let qControlPoint;
392+
let prevQControlPoint;
402393

403394
path = path.filter(function (item, index, path) {
404-
const qPoint = qControlPoint;
405-
qControlPoint = undefined;
395+
const qControlPoint = prevQControlPoint;
396+
prevQControlPoint = undefined;
406397

407398
let command = item.command;
408399
let data = item.args;
@@ -415,9 +406,8 @@ function filters(
415406
if (command === 's') {
416407
sdata = [0, 0].concat(data);
417408

418-
// @ts-ignore
419-
var pdata = prev.args,
420-
n = pdata.length;
409+
const pdata = prev.args;
410+
const n = pdata.length;
421411

422412
// (-x, -y) of the prev tangent point relative to the current point
423413
sdata[0] = pdata[n - 2] - pdata[n - 4];
@@ -464,24 +454,18 @@ function filters(
464454
nextLonghand;
465455

466456
if (
467-
// @ts-ignore
468457
(prev.command == 'c' &&
469-
// @ts-ignore
470458
isConvex(prev.args) &&
471-
// @ts-ignore
472459
isArcPrev(prev.args, circle)) ||
473-
// @ts-ignore
474460
(prev.command == 'a' && prev.sdata && isArcPrev(prev.sdata, circle))
475461
) {
476-
// @ts-ignore
477462
arcCurves.unshift(prev);
478463
// @ts-ignore
479464
arc.base = prev.base;
480465
// @ts-ignore
481466
arc.args[5] = arc.coords[0] - arc.base[0];
482467
// @ts-ignore
483468
arc.args[6] = arc.coords[1] - arc.base[1];
484-
// @ts-ignore
485469
var prevData = prev.command == 'a' ? prev.sdata : prev.args;
486470
var prevAngle = findArcAngle(prevData, {
487471
center: [
@@ -498,7 +482,7 @@ function filters(
498482
// check if next curves are fitting the arc
499483
for (
500484
var j = index;
501-
(next = path[++j]) && ~'cs'.indexOf(next.command);
485+
(next = path[++j]) && 'cs'.includes(next.command);
502486

503487
) {
504488
var nextData = next.args;
@@ -574,7 +558,6 @@ function filters(
574558
relSubpoint[0] += prevArc.args[5] - prev.args[prev.args.length - 2];
575559
// @ts-ignore
576560
relSubpoint[1] += prevArc.args[6] - prev.args[prev.args.length - 1];
577-
// @ts-ignore
578561
prev.command = 'a';
579562
// @ts-ignore
580563
prev.args = prevArc.args;
@@ -588,11 +571,7 @@ function filters(
588571
item.sdata = sdata.slice(); // preserve curve data for future checks
589572
} else if (arcCurves.length - 1 - hasPrev > 0) {
590573
// filter out consumed next items
591-
path.splice.apply(
592-
path,
593-
// @ts-ignore
594-
[index + 1, arcCurves.length - 1 - hasPrev].concat(output),
595-
);
574+
path.splice(index + 1, arcCurves.length - 1 - hasPrev, ...output);
596575
}
597576
if (!arc) return false;
598577
command = 'a';
@@ -679,9 +658,7 @@ function filters(
679658
data = data.slice(-2);
680659
} else if (
681660
command === 't' &&
682-
// @ts-ignore
683661
prev.command !== 'q' &&
684-
// @ts-ignore
685662
prev.command !== 't'
686663
) {
687664
command = 'l';
@@ -716,39 +693,29 @@ function filters(
716693
params.collapseRepeated &&
717694
hasMarkerMid === false &&
718695
(command === 'm' || command === 'h' || command === 'v') &&
719-
// @ts-ignore
720696
prev.command &&
721-
// @ts-ignore
722697
command == prev.command.toLowerCase() &&
723698
((command != 'h' && command != 'v') ||
724-
// @ts-ignore
725699
prev.args[0] >= 0 == data[0] >= 0)
726700
) {
727-
// @ts-ignore
728701
prev.args[0] += data[0];
729702
if (command != 'h' && command != 'v') {
730-
// @ts-ignore
731703
prev.args[1] += data[1];
732704
}
733705
// @ts-ignore
734706
prev.coords = item.coords;
735-
// @ts-ignore
736707
path[index] = prev;
737708
return false;
738709
}
739710

740711
// convert curves into smooth shorthands
741-
// @ts-ignore
742712
if (params.curveSmoothShorthands && prev.command) {
743713
// curveto
744714
if (command === 'c') {
745715
// c + c → c + s
746716
if (
747-
// @ts-ignore
748717
prev.command === 'c' &&
749-
// @ts-ignore
750718
Math.abs(data[0] - -(prev.args[2] - prev.args[4])) < error &&
751-
// @ts-ignore
752719
Math.abs(data[1] - -(prev.args[3] - prev.args[5])) < error
753720
) {
754721
command = 's';
@@ -757,11 +724,8 @@ function filters(
757724

758725
// s + c → s + s
759726
else if (
760-
// @ts-ignore
761727
prev.command === 's' &&
762-
// @ts-ignore
763728
Math.abs(data[0] - -(prev.args[0] - prev.args[2])) < error &&
764-
// @ts-ignore
765729
Math.abs(data[1] - -(prev.args[1] - prev.args[3])) < error
766730
) {
767731
command = 's';
@@ -770,9 +734,7 @@ function filters(
770734

771735
// [^cs] + c → [^cs] + s
772736
else if (
773-
// @ts-ignore
774737
prev.command !== 'c' &&
775-
// @ts-ignore
776738
prev.command !== 's' &&
777739
Math.abs(data[0]) < error &&
778740
Math.abs(data[1]) < error
@@ -786,24 +748,22 @@ function filters(
786748
else if (command === 'q') {
787749
// q + q → q + t
788750
if (
789-
// @ts-ignore
790751
prev.command === 'q' &&
791-
// @ts-ignore
792752
Math.abs(data[0] - (prev.args[2] - prev.args[0])) < error &&
793-
// @ts-ignore
794753
Math.abs(data[1] - (prev.args[3] - prev.args[1])) < error
795754
) {
796755
command = 't';
797756
data = data.slice(2);
798757
}
799758

800759
// t + q → t + t
801-
else if (
802-
// @ts-ignore
803-
prev.command === 't'
804-
) {
805-
// @ts-ignore
806-
const predictedControlPoint = reflectPoint(qPoint, item.base);
760+
else if (prev.command === 't') {
761+
const predictedControlPoint = reflectPoint(
762+
// @ts-ignore
763+
qControlPoint,
764+
// @ts-ignore
765+
item.base,
766+
);
807767
const realControlPoint = [
808768
// @ts-ignore
809769
data[0] + item.base[0],
@@ -837,14 +797,12 @@ function filters(
837797
return i === 0;
838798
})
839799
) {
840-
// @ts-ignore
841800
path[index] = prev;
842801
return false;
843802
}
844803

845804
// a 25,25 -30 0,1 0,0
846805
if (command === 'a' && data[5] === 0 && data[6] === 0) {
847-
// @ts-ignore
848806
path[index] = prev;
849807
return false;
850808
}
@@ -874,7 +832,6 @@ function filters(
874832
// z resets coordinates
875833
relSubpoint[0] = pathBase[0];
876834
relSubpoint[1] = pathBase[1];
877-
// @ts-ignore
878835
if (prev.command === 'Z' || prev.command === 'z') return false;
879836
}
880837
if (
@@ -890,14 +847,14 @@ function filters(
890847

891848
if (command === 'q') {
892849
// @ts-ignore
893-
qControlPoint = [data[0] + item.base[0], data[1] + item.base[1]];
850+
prevQControlPoint = [data[0] + item.base[0], data[1] + item.base[1]];
894851
} else if (command === 't') {
895-
if (qPoint) {
852+
if (qControlPoint) {
896853
// @ts-ignore
897-
qControlPoint = reflectPoint(qPoint, item.base);
854+
prevQControlPoint = reflectPoint(qControlPoint, item.base);
898855
} else {
899856
// @ts-ignore
900-
qControlPoint = item.coords;
857+
prevQControlPoint = item.coords;
901858
}
902859
}
903860
prev = item;
@@ -971,8 +928,9 @@ function convertToMixed(path, params) {
971928
prev.command.charCodeAt(0) > 96 &&
972929
absoluteDataStr.length == relativeDataStr.length - 1 &&
973930
(data[0] < 0 ||
974-
// @ts-ignore
975-
(/^0\./.test(data[0]) && prev.args[prev.args.length - 1] % 1))
931+
(Math.floor(data[0]) === 0 &&
932+
!Number.isInteger(data[0]) &&
933+
prev.args[prev.args.length - 1] % 1))
976934
))
977935
) {
978936
// @ts-ignore
@@ -981,7 +939,6 @@ function convertToMixed(path, params) {
981939
}
982940

983941
prev = item;
984-
985942
return true;
986943
});
987944

@@ -1098,7 +1055,6 @@ function round(data) {
10981055
*
10991056
* @type {(data: number[]) => boolean}
11001057
*/
1101-
11021058
function isCurveStraightLine(data) {
11031059
// Get line equation a·x + b·y + c = 0 coefficients a, b (c = 0) by start and end points.
11041060
var i = data.length - 2,
@@ -1125,7 +1081,6 @@ function isCurveStraightLine(data) {
11251081
*/
11261082
function calculateSagitta(data) {
11271083
if (data[3] === 1) return undefined;
1128-
11291084
const [rx, ry] = data;
11301085
if (Math.abs(rx - ry) > error) return undefined;
11311086
const chord = Math.sqrt(data[5] ** 2 + data[6] ** 2);
@@ -1138,7 +1093,6 @@ function calculateSagitta(data) {
11381093
*
11391094
* @type {(item: PathDataItem, data: number[]) => PathDataItem}
11401095
*/
1141-
11421096
function makeLonghand(item, data) {
11431097
switch (item.command) {
11441098
case 's':
@@ -1160,20 +1114,19 @@ function makeLonghand(item, data) {
11601114
*
11611115
* @type {(point1: Point, point2: Point) => number}
11621116
*/
1163-
11641117
function getDistance(point1, point2) {
1165-
return Math.hypot(point1[0] - point2[0], point1[1] - point2[1]);
1118+
return Math.sqrt((point1[0] - point2[0]) ** 2 + (point1[1] - point2[1]) ** 2);
11661119
}
11671120

11681121
/**
1169-
* Reflects point across another point
1122+
* Reflects point across another point.
11701123
*
1171-
* @param {Point} input
1124+
* @param {Point} controlPoint
11721125
* @param {Point} base
11731126
* @returns {Point}
11741127
*/
1175-
function reflectPoint(input, base) {
1176-
return [2 * base[0] - input[0], 2 * base[1] - input[1]];
1128+
function reflectPoint(controlPoint, base) {
1129+
return [2 * base[0] - controlPoint[0], 2 * base[1] - controlPoint[1]];
11771130
}
11781131

11791132
/**
@@ -1183,7 +1136,6 @@ function reflectPoint(input, base) {
11831136
*
11841137
* @type {(curve: number[], t: number) => Point}
11851138
*/
1186-
11871139
function getCubicBezierPoint(curve, t) {
11881140
var sqrT = t * t,
11891141
cubT = sqrT * t,
@@ -1201,7 +1153,6 @@ function getCubicBezierPoint(curve, t) {
12011153
*
12021154
* @type {(curve: number[]) => undefined | Circle}
12031155
*/
1204-
12051156
function findCircle(curve) {
12061157
var midPoint = getCubicBezierPoint(curve, 1 / 2),
12071158
m1 = [midPoint[0] / 2, midPoint[1] / 2],
@@ -1242,7 +1193,6 @@ function findCircle(curve) {
12421193
*
12431194
* @type {(curve: number[], circle: Circle) => boolean}
12441195
*/
1245-
12461196
function isArc(curve, circle) {
12471197
var tolerance = Math.min(
12481198
arcThreshold * error,
@@ -1264,7 +1214,6 @@ function isArc(curve, circle) {
12641214
*
12651215
* @type {(curve: number[], circle: Circle) => boolean}
12661216
*/
1267-
12681217
function isArcPrev(curve, circle) {
12691218
return isArc(curve, {
12701219
center: [circle.center[0] + curve[4], circle.center[1] + curve[5]],
@@ -1277,7 +1226,6 @@ function isArcPrev(curve, circle) {
12771226
12781227
* @type {(curve: number[], relCircle: Circle) => number}
12791228
*/
1280-
12811229
function findArcAngle(curve, relCircle) {
12821230
var x1 = -relCircle.center[0],
12831231
y1 = -relCircle.center[1],
@@ -1294,7 +1242,6 @@ function findArcAngle(curve, relCircle) {
12941242
*
12951243
* @type {(params: InternalParams, pathData: PathDataItem[]) => string}
12961244
*/
1297-
12981245
function data2Path(params, pathData) {
12991246
return pathData.reduce(function (pathString, item) {
13001247
var strData = '';

0 commit comments

Comments
 (0)