svg-path-commander 2.0.9 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.cjs +1 -0
- package/README.md +4 -4
- package/dist/svg-path-commander.cjs +1 -1
- package/dist/svg-path-commander.cjs.map +1 -1
- package/dist/svg-path-commander.d.ts +156 -39
- package/dist/svg-path-commander.js +1 -1
- package/dist/svg-path-commander.js.map +1 -1
- package/dist/svg-path-commander.mjs +869 -705
- package/dist/svg-path-commander.mjs.map +1 -1
- package/package.json +22 -24
- package/src/convert/pathToAbsolute.ts +1 -1
- package/src/convert/pathToCurve.ts +1 -1
- package/src/convert/pathToRelative.ts +1 -1
- package/src/index.ts +30 -26
- package/src/interface.ts +32 -32
- package/src/math/arcTools.ts +217 -0
- package/src/math/bezier.ts +261 -0
- package/src/math/cubicTools.ts +81 -0
- package/src/math/lineTools.ts +52 -0
- package/src/math/quadTools.ts +79 -0
- package/src/parser/isMoveCommand.ts +17 -0
- package/src/parser/parsePathString.ts +1 -1
- package/src/parser/scanSegment.ts +12 -3
- package/src/process/normalizePath.ts +1 -1
- package/src/process/replaceArc.ts +52 -0
- package/src/process/splitPath.ts +1 -1
- package/src/process/transformPath.ts +14 -34
- package/src/types.ts +5 -0
- package/src/util/distanceEpsilon.ts +3 -0
- package/src/util/getClosestPoint.ts +1 -1
- package/src/util/getPathBBox.ts +4 -3
- package/src/util/getPointAtLength.ts +3 -3
- package/src/util/getPropertiesAtLength.ts +2 -1
- package/src/util/getPropertiesAtPoint.ts +4 -1
- package/src/util/getTotalLength.ts +2 -2
- package/src/util/isPointInStroke.ts +2 -1
- package/src/util/pathFactory.ts +130 -0
- package/src/util/shapeToPathArray.ts +8 -4
- package/test/class.test.ts +501 -0
- package/test/fixtures/getMarkup.ts +17 -0
- package/{cypress → test}/fixtures/shapes.js +18 -18
- package/{cypress → test}/fixtures/simpleShapes.js +6 -6
- package/test/static.test.ts +304 -0
- package/tsconfig.json +9 -4
- package/{vite.config.ts → vite.config.mts} +10 -1
- package/vitest.config-ui.mts +26 -0
- package/vitest.config.mts +26 -0
- package/cypress/e2e/svg-path-commander.spec.ts +0 -868
- package/cypress/plugins/esbuild-istanbul.ts +0 -50
- package/cypress/plugins/tsCompile.ts +0 -34
- package/cypress/support/commands.ts +0 -37
- package/cypress/support/e2e.ts +0 -21
- package/cypress/test.html +0 -36
- package/src/util/pathLengthFactory.ts +0 -114
- package/src/util/segmentArcFactory.ts +0 -219
- package/src/util/segmentCubicFactory.ts +0 -114
- package/src/util/segmentLineFactory.ts +0 -45
- package/src/util/segmentQuadFactory.ts +0 -109
- /package/{cypress/fixtures/shapeObjects.js → test/fixtures/shapeObjects.ts} +0 -0
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import midPoint from '../math/midPoint';
|
|
2
|
-
import distanceSquareRoot from '../math/distanceSquareRoot';
|
|
3
|
-
import type { LengthFactory } from '../interface';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Returns a {x,y} point at a given length, the total length and
|
|
7
|
-
* the minimum and maximum {x,y} coordinates of a line (L,V,H,Z) segment.
|
|
8
|
-
*
|
|
9
|
-
* @param x1 the starting point X
|
|
10
|
-
* @param y1 the starting point Y
|
|
11
|
-
* @param x2 the ending point X
|
|
12
|
-
* @param y2 the ending point Y
|
|
13
|
-
* @param distance the distance to point
|
|
14
|
-
* @returns the segment length, point, min & max
|
|
15
|
-
*/
|
|
16
|
-
const segmentLineFactory = (x1: number, y1: number, x2: number, y2: number, distance?: number): LengthFactory => {
|
|
17
|
-
const length = distanceSquareRoot([x1, y1], [x2, y2]);
|
|
18
|
-
let point = { x: 0, y: 0 };
|
|
19
|
-
|
|
20
|
-
/* istanbul ignore else */
|
|
21
|
-
if (typeof distance === 'number') {
|
|
22
|
-
if (distance <= 0) {
|
|
23
|
-
point = { x: x1, y: y1 };
|
|
24
|
-
} else if (distance >= length) {
|
|
25
|
-
point = { x: x2, y: y2 };
|
|
26
|
-
} else {
|
|
27
|
-
const [x, y] = midPoint([x1, y1], [x2, y2], distance / length);
|
|
28
|
-
point = { x, y };
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return {
|
|
33
|
-
length,
|
|
34
|
-
point,
|
|
35
|
-
min: {
|
|
36
|
-
x: Math.min(x1, x2),
|
|
37
|
-
y: Math.min(y1, y2),
|
|
38
|
-
},
|
|
39
|
-
max: {
|
|
40
|
-
x: Math.max(x1, x2),
|
|
41
|
-
y: Math.max(y1, y2),
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
export default segmentLineFactory;
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import { LengthFactory } from 'src/interface';
|
|
2
|
-
import distanceSquareRoot from '../math/distanceSquareRoot';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Returns the {x,y} coordinates of a point at a
|
|
6
|
-
* given length of a quadratic-bezier segment.
|
|
7
|
-
*
|
|
8
|
-
* @see https://github.com/substack/point-at-length
|
|
9
|
-
*
|
|
10
|
-
* @param x1 the starting point X
|
|
11
|
-
* @param y1 the starting point Y
|
|
12
|
-
* @param cx the control point X
|
|
13
|
-
* @param cy the control point Y
|
|
14
|
-
* @param x2 the ending point X
|
|
15
|
-
* @param y2 the ending point Y
|
|
16
|
-
* @param t a [0-1] ratio
|
|
17
|
-
* @returns the requested {x,y} coordinates
|
|
18
|
-
*/
|
|
19
|
-
const getPointAtQuadSegmentLength = (
|
|
20
|
-
x1: number,
|
|
21
|
-
y1: number,
|
|
22
|
-
cx: number,
|
|
23
|
-
cy: number,
|
|
24
|
-
x2: number,
|
|
25
|
-
y2: number,
|
|
26
|
-
t: number,
|
|
27
|
-
): { x: number; y: number } => {
|
|
28
|
-
const t1 = 1 - t;
|
|
29
|
-
return {
|
|
30
|
-
x: t1 ** 2 * x1 + 2 * t1 * t * cx + t ** 2 * x2,
|
|
31
|
-
y: t1 ** 2 * y1 + 2 * t1 * t * cy + t ** 2 * y2,
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Returns a {x,y} point at a given length, the total length and
|
|
37
|
-
* the minimum and maximum {x,y} coordinates of a Q (quadratic-bezier) segment.
|
|
38
|
-
*
|
|
39
|
-
* @param x1 the starting point X
|
|
40
|
-
* @param y1 the starting point Y
|
|
41
|
-
* @param qx the control point X
|
|
42
|
-
* @param qy the control point Y
|
|
43
|
-
* @param x2 the ending point X
|
|
44
|
-
* @param y2 the ending point Y
|
|
45
|
-
* @param distance the distance to point
|
|
46
|
-
* @returns the segment length, point, min & max
|
|
47
|
-
*/
|
|
48
|
-
const segmentQuadFactory = (
|
|
49
|
-
x1: number,
|
|
50
|
-
y1: number,
|
|
51
|
-
qx: number,
|
|
52
|
-
qy: number,
|
|
53
|
-
x2: number,
|
|
54
|
-
y2: number,
|
|
55
|
-
distance?: number,
|
|
56
|
-
): LengthFactory => {
|
|
57
|
-
const distanceIsNumber = typeof distance === 'number';
|
|
58
|
-
let x = x1;
|
|
59
|
-
let y = y1;
|
|
60
|
-
let LENGTH = 0;
|
|
61
|
-
let prev = [x, y, LENGTH];
|
|
62
|
-
let cur = [x, y] as [number, number];
|
|
63
|
-
let t = 0;
|
|
64
|
-
let POINT = { x: 0, y: 0 };
|
|
65
|
-
let POINTS = [{ x, y }];
|
|
66
|
-
|
|
67
|
-
if (distanceIsNumber && distance <= 0) {
|
|
68
|
-
POINT = { x, y };
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const sampleSize = 300;
|
|
72
|
-
for (let j = 0; j <= sampleSize; j += 1) {
|
|
73
|
-
t = j / sampleSize;
|
|
74
|
-
|
|
75
|
-
({ x, y } = getPointAtQuadSegmentLength(x1, y1, qx, qy, x2, y2, t));
|
|
76
|
-
POINTS = [...POINTS, { x, y }];
|
|
77
|
-
LENGTH += distanceSquareRoot(cur, [x, y]);
|
|
78
|
-
cur = [x, y];
|
|
79
|
-
|
|
80
|
-
if (distanceIsNumber && LENGTH > distance && distance > prev[2]) {
|
|
81
|
-
const dv = (LENGTH - distance) / (LENGTH - prev[2]);
|
|
82
|
-
|
|
83
|
-
POINT = {
|
|
84
|
-
x: cur[0] * (1 - dv) + prev[0] * dv,
|
|
85
|
-
y: cur[1] * (1 - dv) + prev[1] * dv,
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
prev = [x, y, LENGTH];
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/* istanbul ignore else */
|
|
92
|
-
if (distanceIsNumber && distance >= LENGTH) {
|
|
93
|
-
POINT = { x: x2, y: y2 };
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
return {
|
|
97
|
-
length: LENGTH,
|
|
98
|
-
point: POINT,
|
|
99
|
-
min: {
|
|
100
|
-
x: Math.min(...POINTS.map(n => n.x)),
|
|
101
|
-
y: Math.min(...POINTS.map(n => n.y)),
|
|
102
|
-
},
|
|
103
|
-
max: {
|
|
104
|
-
x: Math.max(...POINTS.map(n => n.x)),
|
|
105
|
-
y: Math.max(...POINTS.map(n => n.y)),
|
|
106
|
-
},
|
|
107
|
-
};
|
|
108
|
-
};
|
|
109
|
-
export default segmentQuadFactory;
|
|
File without changes
|