modern-path2d 0.1.11 → 0.1.14
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/dist/index.cjs +29 -23
- package/dist/index.d.cts +109 -103
- package/dist/index.d.mts +109 -103
- package/dist/index.d.ts +109 -103
- package/dist/index.js +1 -1
- package/dist/index.mjs +29 -23
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -7,7 +7,7 @@ const lineJoinMap = {
|
|
|
7
7
|
"miter-clip": "miter",
|
|
8
8
|
"round": "round"
|
|
9
9
|
};
|
|
10
|
-
function
|
|
10
|
+
function setCanvasContext(ctx, style) {
|
|
11
11
|
const {
|
|
12
12
|
fill = "#000",
|
|
13
13
|
stroke = "none",
|
|
@@ -16,16 +16,24 @@ function setCanvasContextByPath(ctx, path) {
|
|
|
16
16
|
strokeLinejoin = "miter",
|
|
17
17
|
strokeMiterlimit = 0,
|
|
18
18
|
strokeDasharray,
|
|
19
|
-
strokeDashoffset = 0
|
|
20
|
-
|
|
19
|
+
strokeDashoffset = 0,
|
|
20
|
+
shadowOffsetX = 0,
|
|
21
|
+
shadowOffsetY = 0,
|
|
22
|
+
shadowBlur = 0,
|
|
23
|
+
shadowColor = "rgba(0, 0, 0, 0)"
|
|
24
|
+
} = style;
|
|
21
25
|
ctx.fillStyle = fill;
|
|
22
26
|
ctx.strokeStyle = stroke;
|
|
23
27
|
ctx.lineWidth = strokeWidth;
|
|
24
28
|
ctx.lineCap = strokeLinecap;
|
|
25
29
|
ctx.lineJoin = lineJoinMap[strokeLinejoin];
|
|
26
30
|
ctx.miterLimit = strokeMiterlimit;
|
|
27
|
-
ctx.lineDashOffset = strokeDashoffset;
|
|
28
31
|
strokeDasharray && ctx.setLineDash(strokeDasharray);
|
|
32
|
+
ctx.lineDashOffset = strokeDashoffset;
|
|
33
|
+
ctx.shadowOffsetX = shadowOffsetX;
|
|
34
|
+
ctx.shadowOffsetY = shadowOffsetY;
|
|
35
|
+
ctx.shadowBlur = shadowBlur;
|
|
36
|
+
ctx.shadowColor = shadowColor;
|
|
29
37
|
}
|
|
30
38
|
|
|
31
39
|
class Vector2 {
|
|
@@ -2225,21 +2233,20 @@ class Path2D {
|
|
|
2225
2233
|
this.forEachCurve((curve) => curve.transform(matrix));
|
|
2226
2234
|
return this;
|
|
2227
2235
|
}
|
|
2228
|
-
getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
|
|
2236
|
+
getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
|
|
2229
2237
|
this.forEachCurve((curve) => curve.getMinMax(min, max));
|
|
2238
|
+
if (withStyle) {
|
|
2239
|
+
const strokeWidth = this.strokeWidth / 2;
|
|
2240
|
+
min.x -= strokeWidth;
|
|
2241
|
+
min.y -= strokeWidth;
|
|
2242
|
+
max.x += strokeWidth;
|
|
2243
|
+
max.y += strokeWidth;
|
|
2244
|
+
}
|
|
2230
2245
|
return { min, max };
|
|
2231
2246
|
}
|
|
2232
|
-
getBoundingBox(
|
|
2233
|
-
const { min, max } = this.getMinMax();
|
|
2234
|
-
|
|
2235
|
-
if (withStrokeWidth) {
|
|
2236
|
-
const strokeWidth = this.strokeWidth;
|
|
2237
|
-
bbox.left -= strokeWidth / 2;
|
|
2238
|
-
bbox.top -= strokeWidth / 2;
|
|
2239
|
-
bbox.width += strokeWidth;
|
|
2240
|
-
bbox.height += strokeWidth;
|
|
2241
|
-
}
|
|
2242
|
-
return bbox;
|
|
2247
|
+
getBoundingBox(withStyle = true) {
|
|
2248
|
+
const { min, max } = this.getMinMax(void 0, void 0, withStyle);
|
|
2249
|
+
return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
|
|
2243
2250
|
}
|
|
2244
2251
|
getCommands() {
|
|
2245
2252
|
return this.paths.flatMap((path) => path.getCommands());
|
|
@@ -2278,12 +2285,11 @@ class Path2D {
|
|
|
2278
2285
|
getSvgDataUri() {
|
|
2279
2286
|
return `data:image/svg+xml;base64,${btoa(this.getSvgXml())}`;
|
|
2280
2287
|
}
|
|
2281
|
-
drawTo(ctx) {
|
|
2282
|
-
const {
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
}
|
|
2286
|
-
setCanvasContextByPath(ctx, this);
|
|
2288
|
+
drawTo(ctx, withStyle = true) {
|
|
2289
|
+
const { fill = "#000", stroke = "none" } = this.style;
|
|
2290
|
+
if (withStyle) {
|
|
2291
|
+
setCanvasContext(ctx, this.style);
|
|
2292
|
+
}
|
|
2287
2293
|
this.paths.forEach((path) => {
|
|
2288
2294
|
path.drawTo(ctx);
|
|
2289
2295
|
});
|
|
@@ -2865,4 +2871,4 @@ exports.parseSvg = parseSvg;
|
|
|
2865
2871
|
exports.parseSvgToDom = parseSvgToDom;
|
|
2866
2872
|
exports.pathCommandsToPathData = pathCommandsToPathData;
|
|
2867
2873
|
exports.pathDataToPathCommands = pathDataToPathCommands;
|
|
2868
|
-
exports.
|
|
2874
|
+
exports.setCanvasContext = setCanvasContext;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,3 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
3
|
+
*/
|
|
4
|
+
type PathCommand = {
|
|
5
|
+
type: 'm' | 'M';
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
} | {
|
|
9
|
+
type: 'h' | 'H';
|
|
10
|
+
x: number;
|
|
11
|
+
} | {
|
|
12
|
+
type: 'v' | 'V';
|
|
13
|
+
y: number;
|
|
14
|
+
} | {
|
|
15
|
+
type: 'l' | 'L';
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
} | {
|
|
19
|
+
type: 'c' | 'C';
|
|
20
|
+
x1: number;
|
|
21
|
+
y1: number;
|
|
22
|
+
x2: number;
|
|
23
|
+
y2: number;
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
} | {
|
|
27
|
+
type: 's' | 'S';
|
|
28
|
+
x2: number;
|
|
29
|
+
y2: number;
|
|
30
|
+
x: number;
|
|
31
|
+
y: number;
|
|
32
|
+
} | {
|
|
33
|
+
type: 'q' | 'Q';
|
|
34
|
+
x1: number;
|
|
35
|
+
y1: number;
|
|
36
|
+
x: number;
|
|
37
|
+
y: number;
|
|
38
|
+
} | {
|
|
39
|
+
type: 't' | 'T';
|
|
40
|
+
x: number;
|
|
41
|
+
y: number;
|
|
42
|
+
} | {
|
|
43
|
+
type: 'a' | 'A';
|
|
44
|
+
rx: number;
|
|
45
|
+
ry: number;
|
|
46
|
+
angle: number;
|
|
47
|
+
largeArcFlag: number;
|
|
48
|
+
sweepFlag: number;
|
|
49
|
+
x: number;
|
|
50
|
+
y: number;
|
|
51
|
+
} | {
|
|
52
|
+
type: 'z' | 'Z';
|
|
53
|
+
};
|
|
54
|
+
type FillRule = 'nonzero' | 'evenodd';
|
|
55
|
+
type StrokeLinecap = 'butt' | 'round' | 'square';
|
|
56
|
+
type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
|
|
57
|
+
interface PathDrawStyle {
|
|
58
|
+
fill: string | CanvasGradient | CanvasPattern;
|
|
59
|
+
stroke: string | CanvasGradient | CanvasPattern;
|
|
60
|
+
shadowColor: string;
|
|
61
|
+
shadowOffsetX: number;
|
|
62
|
+
shadowOffsetY: number;
|
|
63
|
+
shadowBlur: number;
|
|
64
|
+
}
|
|
65
|
+
interface PathStyle extends PathDrawStyle {
|
|
66
|
+
[key: string]: any;
|
|
67
|
+
fillOpacity: number;
|
|
68
|
+
fillRule: FillRule;
|
|
69
|
+
opacity: number;
|
|
70
|
+
strokeOpacity: number;
|
|
71
|
+
strokeWidth: number;
|
|
72
|
+
strokeLinecap: StrokeLinecap;
|
|
73
|
+
strokeLinejoin: StrokeLinejoin;
|
|
74
|
+
strokeMiterlimit: number;
|
|
75
|
+
strokeDasharray: number[];
|
|
76
|
+
strokeDashoffset: number;
|
|
77
|
+
visibility: string;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<PathStyle>): void;
|
|
81
|
+
|
|
1
82
|
declare class Matrix3 {
|
|
2
83
|
elements: number[];
|
|
3
84
|
constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
|
|
@@ -65,103 +146,6 @@ declare class BoundingBox {
|
|
|
65
146
|
toArray(): [number, number, number, number];
|
|
66
147
|
}
|
|
67
148
|
|
|
68
|
-
/**
|
|
69
|
-
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
70
|
-
*/
|
|
71
|
-
type PathCommand = {
|
|
72
|
-
type: 'm' | 'M';
|
|
73
|
-
x: number;
|
|
74
|
-
y: number;
|
|
75
|
-
} | {
|
|
76
|
-
type: 'h' | 'H';
|
|
77
|
-
x: number;
|
|
78
|
-
} | {
|
|
79
|
-
type: 'v' | 'V';
|
|
80
|
-
y: number;
|
|
81
|
-
} | {
|
|
82
|
-
type: 'l' | 'L';
|
|
83
|
-
x: number;
|
|
84
|
-
y: number;
|
|
85
|
-
} | {
|
|
86
|
-
type: 'c' | 'C';
|
|
87
|
-
x1: number;
|
|
88
|
-
y1: number;
|
|
89
|
-
x2: number;
|
|
90
|
-
y2: number;
|
|
91
|
-
x: number;
|
|
92
|
-
y: number;
|
|
93
|
-
} | {
|
|
94
|
-
type: 's' | 'S';
|
|
95
|
-
x2: number;
|
|
96
|
-
y2: number;
|
|
97
|
-
x: number;
|
|
98
|
-
y: number;
|
|
99
|
-
} | {
|
|
100
|
-
type: 'q' | 'Q';
|
|
101
|
-
x1: number;
|
|
102
|
-
y1: number;
|
|
103
|
-
x: number;
|
|
104
|
-
y: number;
|
|
105
|
-
} | {
|
|
106
|
-
type: 't' | 'T';
|
|
107
|
-
x: number;
|
|
108
|
-
y: number;
|
|
109
|
-
} | {
|
|
110
|
-
type: 'a' | 'A';
|
|
111
|
-
rx: number;
|
|
112
|
-
ry: number;
|
|
113
|
-
angle: number;
|
|
114
|
-
largeArcFlag: number;
|
|
115
|
-
sweepFlag: number;
|
|
116
|
-
x: number;
|
|
117
|
-
y: number;
|
|
118
|
-
} | {
|
|
119
|
-
type: 'z' | 'Z';
|
|
120
|
-
};
|
|
121
|
-
type FillRule = 'nonzero' | 'evenodd';
|
|
122
|
-
type StrokeLinecap = 'butt' | 'round' | 'square';
|
|
123
|
-
type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
|
|
124
|
-
interface PathStyle {
|
|
125
|
-
[key: string]: any;
|
|
126
|
-
fill?: string;
|
|
127
|
-
fillOpacity?: number;
|
|
128
|
-
fillRule?: FillRule;
|
|
129
|
-
opacity?: number;
|
|
130
|
-
stroke?: string;
|
|
131
|
-
strokeOpacity?: number;
|
|
132
|
-
strokeWidth?: number;
|
|
133
|
-
strokeLinecap?: StrokeLinecap;
|
|
134
|
-
strokeLinejoin?: StrokeLinejoin;
|
|
135
|
-
strokeMiterlimit?: number;
|
|
136
|
-
strokeDasharray?: number[];
|
|
137
|
-
strokeDashoffset?: number;
|
|
138
|
-
visibility?: string;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
143
|
-
*/
|
|
144
|
-
declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
148
|
-
* https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
|
|
149
|
-
* From
|
|
150
|
-
* rx ry x-axis-rotation large-arc-flag sweep-flag x y
|
|
151
|
-
* To
|
|
152
|
-
* aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
|
|
153
|
-
*/
|
|
154
|
-
declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* from https://github.com/ppvg/svg-numbers (MIT License)
|
|
158
|
-
*/
|
|
159
|
-
declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
|
|
160
|
-
|
|
161
|
-
declare function pathCommandsToPathData(commands: PathCommand[]): string;
|
|
162
|
-
|
|
163
|
-
declare function pathDataToPathCommands(d: string): PathCommand[];
|
|
164
|
-
|
|
165
149
|
declare abstract class Curve {
|
|
166
150
|
arcLengthDivisions: number;
|
|
167
151
|
protected _cacheArcLengths?: number[];
|
|
@@ -416,7 +400,7 @@ declare class CurvePath extends Curve {
|
|
|
416
400
|
declare class Path2D {
|
|
417
401
|
currentPath: CurvePath;
|
|
418
402
|
paths: CurvePath[];
|
|
419
|
-
style: PathStyle
|
|
403
|
+
style: Partial<PathStyle>;
|
|
420
404
|
get startPoint(): Vector2 | undefined;
|
|
421
405
|
get currentPoint(): Vector2 | undefined;
|
|
422
406
|
get strokeWidth(): number;
|
|
@@ -437,26 +421,48 @@ declare class Path2D {
|
|
|
437
421
|
forEachCurve(cb: (curve: Curve) => void): this;
|
|
438
422
|
transformPoint(cb: (point: Vector2) => void): this;
|
|
439
423
|
transform(matrix: Matrix3): this;
|
|
440
|
-
getMinMax(min?: Vector2, max?: Vector2): {
|
|
424
|
+
getMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
|
|
441
425
|
min: Vector2;
|
|
442
426
|
max: Vector2;
|
|
443
427
|
};
|
|
444
|
-
getBoundingBox(
|
|
428
|
+
getBoundingBox(withStyle?: boolean): BoundingBox;
|
|
445
429
|
getCommands(): PathCommand[];
|
|
446
430
|
getData(): string;
|
|
447
431
|
getSvgPathXml(): string;
|
|
448
432
|
getSvgXml(): string;
|
|
449
433
|
getSvgDataUri(): string;
|
|
450
|
-
drawTo(ctx: CanvasRenderingContext2D): void;
|
|
434
|
+
drawTo(ctx: CanvasRenderingContext2D, withStyle?: boolean): void;
|
|
451
435
|
copy(source: Path2D): this;
|
|
452
436
|
toSvg(): SVGElement;
|
|
453
437
|
toCanvas(pixelRatio?: number): HTMLCanvasElement;
|
|
454
438
|
clone(): this;
|
|
455
439
|
}
|
|
456
440
|
|
|
457
|
-
|
|
441
|
+
/**
|
|
442
|
+
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
443
|
+
*/
|
|
444
|
+
declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
448
|
+
* https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
|
|
449
|
+
* From
|
|
450
|
+
* rx ry x-axis-rotation large-arc-flag sweep-flag x y
|
|
451
|
+
* To
|
|
452
|
+
* aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
|
|
453
|
+
*/
|
|
454
|
+
declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
|
|
455
|
+
|
|
456
|
+
/**
|
|
457
|
+
* from https://github.com/ppvg/svg-numbers (MIT License)
|
|
458
|
+
*/
|
|
459
|
+
declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
|
|
460
|
+
|
|
461
|
+
declare function pathCommandsToPathData(commands: PathCommand[]): string;
|
|
462
|
+
|
|
463
|
+
declare function pathDataToPathCommands(d: string): PathCommand[];
|
|
458
464
|
|
|
459
465
|
declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
|
|
460
466
|
declare function parseSvg(svg: string | SVGElement): Path2D[];
|
|
461
467
|
|
|
462
|
-
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands,
|
|
468
|
+
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathDrawStyle, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,3 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
3
|
+
*/
|
|
4
|
+
type PathCommand = {
|
|
5
|
+
type: 'm' | 'M';
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
} | {
|
|
9
|
+
type: 'h' | 'H';
|
|
10
|
+
x: number;
|
|
11
|
+
} | {
|
|
12
|
+
type: 'v' | 'V';
|
|
13
|
+
y: number;
|
|
14
|
+
} | {
|
|
15
|
+
type: 'l' | 'L';
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
} | {
|
|
19
|
+
type: 'c' | 'C';
|
|
20
|
+
x1: number;
|
|
21
|
+
y1: number;
|
|
22
|
+
x2: number;
|
|
23
|
+
y2: number;
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
} | {
|
|
27
|
+
type: 's' | 'S';
|
|
28
|
+
x2: number;
|
|
29
|
+
y2: number;
|
|
30
|
+
x: number;
|
|
31
|
+
y: number;
|
|
32
|
+
} | {
|
|
33
|
+
type: 'q' | 'Q';
|
|
34
|
+
x1: number;
|
|
35
|
+
y1: number;
|
|
36
|
+
x: number;
|
|
37
|
+
y: number;
|
|
38
|
+
} | {
|
|
39
|
+
type: 't' | 'T';
|
|
40
|
+
x: number;
|
|
41
|
+
y: number;
|
|
42
|
+
} | {
|
|
43
|
+
type: 'a' | 'A';
|
|
44
|
+
rx: number;
|
|
45
|
+
ry: number;
|
|
46
|
+
angle: number;
|
|
47
|
+
largeArcFlag: number;
|
|
48
|
+
sweepFlag: number;
|
|
49
|
+
x: number;
|
|
50
|
+
y: number;
|
|
51
|
+
} | {
|
|
52
|
+
type: 'z' | 'Z';
|
|
53
|
+
};
|
|
54
|
+
type FillRule = 'nonzero' | 'evenodd';
|
|
55
|
+
type StrokeLinecap = 'butt' | 'round' | 'square';
|
|
56
|
+
type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
|
|
57
|
+
interface PathDrawStyle {
|
|
58
|
+
fill: string | CanvasGradient | CanvasPattern;
|
|
59
|
+
stroke: string | CanvasGradient | CanvasPattern;
|
|
60
|
+
shadowColor: string;
|
|
61
|
+
shadowOffsetX: number;
|
|
62
|
+
shadowOffsetY: number;
|
|
63
|
+
shadowBlur: number;
|
|
64
|
+
}
|
|
65
|
+
interface PathStyle extends PathDrawStyle {
|
|
66
|
+
[key: string]: any;
|
|
67
|
+
fillOpacity: number;
|
|
68
|
+
fillRule: FillRule;
|
|
69
|
+
opacity: number;
|
|
70
|
+
strokeOpacity: number;
|
|
71
|
+
strokeWidth: number;
|
|
72
|
+
strokeLinecap: StrokeLinecap;
|
|
73
|
+
strokeLinejoin: StrokeLinejoin;
|
|
74
|
+
strokeMiterlimit: number;
|
|
75
|
+
strokeDasharray: number[];
|
|
76
|
+
strokeDashoffset: number;
|
|
77
|
+
visibility: string;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<PathStyle>): void;
|
|
81
|
+
|
|
1
82
|
declare class Matrix3 {
|
|
2
83
|
elements: number[];
|
|
3
84
|
constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
|
|
@@ -65,103 +146,6 @@ declare class BoundingBox {
|
|
|
65
146
|
toArray(): [number, number, number, number];
|
|
66
147
|
}
|
|
67
148
|
|
|
68
|
-
/**
|
|
69
|
-
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
70
|
-
*/
|
|
71
|
-
type PathCommand = {
|
|
72
|
-
type: 'm' | 'M';
|
|
73
|
-
x: number;
|
|
74
|
-
y: number;
|
|
75
|
-
} | {
|
|
76
|
-
type: 'h' | 'H';
|
|
77
|
-
x: number;
|
|
78
|
-
} | {
|
|
79
|
-
type: 'v' | 'V';
|
|
80
|
-
y: number;
|
|
81
|
-
} | {
|
|
82
|
-
type: 'l' | 'L';
|
|
83
|
-
x: number;
|
|
84
|
-
y: number;
|
|
85
|
-
} | {
|
|
86
|
-
type: 'c' | 'C';
|
|
87
|
-
x1: number;
|
|
88
|
-
y1: number;
|
|
89
|
-
x2: number;
|
|
90
|
-
y2: number;
|
|
91
|
-
x: number;
|
|
92
|
-
y: number;
|
|
93
|
-
} | {
|
|
94
|
-
type: 's' | 'S';
|
|
95
|
-
x2: number;
|
|
96
|
-
y2: number;
|
|
97
|
-
x: number;
|
|
98
|
-
y: number;
|
|
99
|
-
} | {
|
|
100
|
-
type: 'q' | 'Q';
|
|
101
|
-
x1: number;
|
|
102
|
-
y1: number;
|
|
103
|
-
x: number;
|
|
104
|
-
y: number;
|
|
105
|
-
} | {
|
|
106
|
-
type: 't' | 'T';
|
|
107
|
-
x: number;
|
|
108
|
-
y: number;
|
|
109
|
-
} | {
|
|
110
|
-
type: 'a' | 'A';
|
|
111
|
-
rx: number;
|
|
112
|
-
ry: number;
|
|
113
|
-
angle: number;
|
|
114
|
-
largeArcFlag: number;
|
|
115
|
-
sweepFlag: number;
|
|
116
|
-
x: number;
|
|
117
|
-
y: number;
|
|
118
|
-
} | {
|
|
119
|
-
type: 'z' | 'Z';
|
|
120
|
-
};
|
|
121
|
-
type FillRule = 'nonzero' | 'evenodd';
|
|
122
|
-
type StrokeLinecap = 'butt' | 'round' | 'square';
|
|
123
|
-
type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
|
|
124
|
-
interface PathStyle {
|
|
125
|
-
[key: string]: any;
|
|
126
|
-
fill?: string;
|
|
127
|
-
fillOpacity?: number;
|
|
128
|
-
fillRule?: FillRule;
|
|
129
|
-
opacity?: number;
|
|
130
|
-
stroke?: string;
|
|
131
|
-
strokeOpacity?: number;
|
|
132
|
-
strokeWidth?: number;
|
|
133
|
-
strokeLinecap?: StrokeLinecap;
|
|
134
|
-
strokeLinejoin?: StrokeLinejoin;
|
|
135
|
-
strokeMiterlimit?: number;
|
|
136
|
-
strokeDasharray?: number[];
|
|
137
|
-
strokeDashoffset?: number;
|
|
138
|
-
visibility?: string;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
143
|
-
*/
|
|
144
|
-
declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
148
|
-
* https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
|
|
149
|
-
* From
|
|
150
|
-
* rx ry x-axis-rotation large-arc-flag sweep-flag x y
|
|
151
|
-
* To
|
|
152
|
-
* aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
|
|
153
|
-
*/
|
|
154
|
-
declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* from https://github.com/ppvg/svg-numbers (MIT License)
|
|
158
|
-
*/
|
|
159
|
-
declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
|
|
160
|
-
|
|
161
|
-
declare function pathCommandsToPathData(commands: PathCommand[]): string;
|
|
162
|
-
|
|
163
|
-
declare function pathDataToPathCommands(d: string): PathCommand[];
|
|
164
|
-
|
|
165
149
|
declare abstract class Curve {
|
|
166
150
|
arcLengthDivisions: number;
|
|
167
151
|
protected _cacheArcLengths?: number[];
|
|
@@ -416,7 +400,7 @@ declare class CurvePath extends Curve {
|
|
|
416
400
|
declare class Path2D {
|
|
417
401
|
currentPath: CurvePath;
|
|
418
402
|
paths: CurvePath[];
|
|
419
|
-
style: PathStyle
|
|
403
|
+
style: Partial<PathStyle>;
|
|
420
404
|
get startPoint(): Vector2 | undefined;
|
|
421
405
|
get currentPoint(): Vector2 | undefined;
|
|
422
406
|
get strokeWidth(): number;
|
|
@@ -437,26 +421,48 @@ declare class Path2D {
|
|
|
437
421
|
forEachCurve(cb: (curve: Curve) => void): this;
|
|
438
422
|
transformPoint(cb: (point: Vector2) => void): this;
|
|
439
423
|
transform(matrix: Matrix3): this;
|
|
440
|
-
getMinMax(min?: Vector2, max?: Vector2): {
|
|
424
|
+
getMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
|
|
441
425
|
min: Vector2;
|
|
442
426
|
max: Vector2;
|
|
443
427
|
};
|
|
444
|
-
getBoundingBox(
|
|
428
|
+
getBoundingBox(withStyle?: boolean): BoundingBox;
|
|
445
429
|
getCommands(): PathCommand[];
|
|
446
430
|
getData(): string;
|
|
447
431
|
getSvgPathXml(): string;
|
|
448
432
|
getSvgXml(): string;
|
|
449
433
|
getSvgDataUri(): string;
|
|
450
|
-
drawTo(ctx: CanvasRenderingContext2D): void;
|
|
434
|
+
drawTo(ctx: CanvasRenderingContext2D, withStyle?: boolean): void;
|
|
451
435
|
copy(source: Path2D): this;
|
|
452
436
|
toSvg(): SVGElement;
|
|
453
437
|
toCanvas(pixelRatio?: number): HTMLCanvasElement;
|
|
454
438
|
clone(): this;
|
|
455
439
|
}
|
|
456
440
|
|
|
457
|
-
|
|
441
|
+
/**
|
|
442
|
+
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
443
|
+
*/
|
|
444
|
+
declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
448
|
+
* https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
|
|
449
|
+
* From
|
|
450
|
+
* rx ry x-axis-rotation large-arc-flag sweep-flag x y
|
|
451
|
+
* To
|
|
452
|
+
* aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
|
|
453
|
+
*/
|
|
454
|
+
declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
|
|
455
|
+
|
|
456
|
+
/**
|
|
457
|
+
* from https://github.com/ppvg/svg-numbers (MIT License)
|
|
458
|
+
*/
|
|
459
|
+
declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
|
|
460
|
+
|
|
461
|
+
declare function pathCommandsToPathData(commands: PathCommand[]): string;
|
|
462
|
+
|
|
463
|
+
declare function pathDataToPathCommands(d: string): PathCommand[];
|
|
458
464
|
|
|
459
465
|
declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
|
|
460
466
|
declare function parseSvg(svg: string | SVGElement): Path2D[];
|
|
461
467
|
|
|
462
|
-
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands,
|
|
468
|
+
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathDrawStyle, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
3
|
+
*/
|
|
4
|
+
type PathCommand = {
|
|
5
|
+
type: 'm' | 'M';
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
} | {
|
|
9
|
+
type: 'h' | 'H';
|
|
10
|
+
x: number;
|
|
11
|
+
} | {
|
|
12
|
+
type: 'v' | 'V';
|
|
13
|
+
y: number;
|
|
14
|
+
} | {
|
|
15
|
+
type: 'l' | 'L';
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
} | {
|
|
19
|
+
type: 'c' | 'C';
|
|
20
|
+
x1: number;
|
|
21
|
+
y1: number;
|
|
22
|
+
x2: number;
|
|
23
|
+
y2: number;
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
} | {
|
|
27
|
+
type: 's' | 'S';
|
|
28
|
+
x2: number;
|
|
29
|
+
y2: number;
|
|
30
|
+
x: number;
|
|
31
|
+
y: number;
|
|
32
|
+
} | {
|
|
33
|
+
type: 'q' | 'Q';
|
|
34
|
+
x1: number;
|
|
35
|
+
y1: number;
|
|
36
|
+
x: number;
|
|
37
|
+
y: number;
|
|
38
|
+
} | {
|
|
39
|
+
type: 't' | 'T';
|
|
40
|
+
x: number;
|
|
41
|
+
y: number;
|
|
42
|
+
} | {
|
|
43
|
+
type: 'a' | 'A';
|
|
44
|
+
rx: number;
|
|
45
|
+
ry: number;
|
|
46
|
+
angle: number;
|
|
47
|
+
largeArcFlag: number;
|
|
48
|
+
sweepFlag: number;
|
|
49
|
+
x: number;
|
|
50
|
+
y: number;
|
|
51
|
+
} | {
|
|
52
|
+
type: 'z' | 'Z';
|
|
53
|
+
};
|
|
54
|
+
type FillRule = 'nonzero' | 'evenodd';
|
|
55
|
+
type StrokeLinecap = 'butt' | 'round' | 'square';
|
|
56
|
+
type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
|
|
57
|
+
interface PathDrawStyle {
|
|
58
|
+
fill: string | CanvasGradient | CanvasPattern;
|
|
59
|
+
stroke: string | CanvasGradient | CanvasPattern;
|
|
60
|
+
shadowColor: string;
|
|
61
|
+
shadowOffsetX: number;
|
|
62
|
+
shadowOffsetY: number;
|
|
63
|
+
shadowBlur: number;
|
|
64
|
+
}
|
|
65
|
+
interface PathStyle extends PathDrawStyle {
|
|
66
|
+
[key: string]: any;
|
|
67
|
+
fillOpacity: number;
|
|
68
|
+
fillRule: FillRule;
|
|
69
|
+
opacity: number;
|
|
70
|
+
strokeOpacity: number;
|
|
71
|
+
strokeWidth: number;
|
|
72
|
+
strokeLinecap: StrokeLinecap;
|
|
73
|
+
strokeLinejoin: StrokeLinejoin;
|
|
74
|
+
strokeMiterlimit: number;
|
|
75
|
+
strokeDasharray: number[];
|
|
76
|
+
strokeDashoffset: number;
|
|
77
|
+
visibility: string;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function setCanvasContext(ctx: CanvasRenderingContext2D, style: Partial<PathStyle>): void;
|
|
81
|
+
|
|
1
82
|
declare class Matrix3 {
|
|
2
83
|
elements: number[];
|
|
3
84
|
constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
|
|
@@ -65,103 +146,6 @@ declare class BoundingBox {
|
|
|
65
146
|
toArray(): [number, number, number, number];
|
|
66
147
|
}
|
|
67
148
|
|
|
68
|
-
/**
|
|
69
|
-
* @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
|
|
70
|
-
*/
|
|
71
|
-
type PathCommand = {
|
|
72
|
-
type: 'm' | 'M';
|
|
73
|
-
x: number;
|
|
74
|
-
y: number;
|
|
75
|
-
} | {
|
|
76
|
-
type: 'h' | 'H';
|
|
77
|
-
x: number;
|
|
78
|
-
} | {
|
|
79
|
-
type: 'v' | 'V';
|
|
80
|
-
y: number;
|
|
81
|
-
} | {
|
|
82
|
-
type: 'l' | 'L';
|
|
83
|
-
x: number;
|
|
84
|
-
y: number;
|
|
85
|
-
} | {
|
|
86
|
-
type: 'c' | 'C';
|
|
87
|
-
x1: number;
|
|
88
|
-
y1: number;
|
|
89
|
-
x2: number;
|
|
90
|
-
y2: number;
|
|
91
|
-
x: number;
|
|
92
|
-
y: number;
|
|
93
|
-
} | {
|
|
94
|
-
type: 's' | 'S';
|
|
95
|
-
x2: number;
|
|
96
|
-
y2: number;
|
|
97
|
-
x: number;
|
|
98
|
-
y: number;
|
|
99
|
-
} | {
|
|
100
|
-
type: 'q' | 'Q';
|
|
101
|
-
x1: number;
|
|
102
|
-
y1: number;
|
|
103
|
-
x: number;
|
|
104
|
-
y: number;
|
|
105
|
-
} | {
|
|
106
|
-
type: 't' | 'T';
|
|
107
|
-
x: number;
|
|
108
|
-
y: number;
|
|
109
|
-
} | {
|
|
110
|
-
type: 'a' | 'A';
|
|
111
|
-
rx: number;
|
|
112
|
-
ry: number;
|
|
113
|
-
angle: number;
|
|
114
|
-
largeArcFlag: number;
|
|
115
|
-
sweepFlag: number;
|
|
116
|
-
x: number;
|
|
117
|
-
y: number;
|
|
118
|
-
} | {
|
|
119
|
-
type: 'z' | 'Z';
|
|
120
|
-
};
|
|
121
|
-
type FillRule = 'nonzero' | 'evenodd';
|
|
122
|
-
type StrokeLinecap = 'butt' | 'round' | 'square';
|
|
123
|
-
type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
|
|
124
|
-
interface PathStyle {
|
|
125
|
-
[key: string]: any;
|
|
126
|
-
fill?: string;
|
|
127
|
-
fillOpacity?: number;
|
|
128
|
-
fillRule?: FillRule;
|
|
129
|
-
opacity?: number;
|
|
130
|
-
stroke?: string;
|
|
131
|
-
strokeOpacity?: number;
|
|
132
|
-
strokeWidth?: number;
|
|
133
|
-
strokeLinecap?: StrokeLinecap;
|
|
134
|
-
strokeLinejoin?: StrokeLinejoin;
|
|
135
|
-
strokeMiterlimit?: number;
|
|
136
|
-
strokeDasharray?: number[];
|
|
137
|
-
strokeDashoffset?: number;
|
|
138
|
-
visibility?: string;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
143
|
-
*/
|
|
144
|
-
declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
148
|
-
* https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
|
|
149
|
-
* From
|
|
150
|
-
* rx ry x-axis-rotation large-arc-flag sweep-flag x y
|
|
151
|
-
* To
|
|
152
|
-
* aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
|
|
153
|
-
*/
|
|
154
|
-
declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* from https://github.com/ppvg/svg-numbers (MIT License)
|
|
158
|
-
*/
|
|
159
|
-
declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
|
|
160
|
-
|
|
161
|
-
declare function pathCommandsToPathData(commands: PathCommand[]): string;
|
|
162
|
-
|
|
163
|
-
declare function pathDataToPathCommands(d: string): PathCommand[];
|
|
164
|
-
|
|
165
149
|
declare abstract class Curve {
|
|
166
150
|
arcLengthDivisions: number;
|
|
167
151
|
protected _cacheArcLengths?: number[];
|
|
@@ -416,7 +400,7 @@ declare class CurvePath extends Curve {
|
|
|
416
400
|
declare class Path2D {
|
|
417
401
|
currentPath: CurvePath;
|
|
418
402
|
paths: CurvePath[];
|
|
419
|
-
style: PathStyle
|
|
403
|
+
style: Partial<PathStyle>;
|
|
420
404
|
get startPoint(): Vector2 | undefined;
|
|
421
405
|
get currentPoint(): Vector2 | undefined;
|
|
422
406
|
get strokeWidth(): number;
|
|
@@ -437,26 +421,48 @@ declare class Path2D {
|
|
|
437
421
|
forEachCurve(cb: (curve: Curve) => void): this;
|
|
438
422
|
transformPoint(cb: (point: Vector2) => void): this;
|
|
439
423
|
transform(matrix: Matrix3): this;
|
|
440
|
-
getMinMax(min?: Vector2, max?: Vector2): {
|
|
424
|
+
getMinMax(min?: Vector2, max?: Vector2, withStyle?: boolean): {
|
|
441
425
|
min: Vector2;
|
|
442
426
|
max: Vector2;
|
|
443
427
|
};
|
|
444
|
-
getBoundingBox(
|
|
428
|
+
getBoundingBox(withStyle?: boolean): BoundingBox;
|
|
445
429
|
getCommands(): PathCommand[];
|
|
446
430
|
getData(): string;
|
|
447
431
|
getSvgPathXml(): string;
|
|
448
432
|
getSvgXml(): string;
|
|
449
433
|
getSvgDataUri(): string;
|
|
450
|
-
drawTo(ctx: CanvasRenderingContext2D): void;
|
|
434
|
+
drawTo(ctx: CanvasRenderingContext2D, withStyle?: boolean): void;
|
|
451
435
|
copy(source: Path2D): this;
|
|
452
436
|
toSvg(): SVGElement;
|
|
453
437
|
toCanvas(pixelRatio?: number): HTMLCanvasElement;
|
|
454
438
|
clone(): this;
|
|
455
439
|
}
|
|
456
440
|
|
|
457
|
-
|
|
441
|
+
/**
|
|
442
|
+
* @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
|
|
443
|
+
*/
|
|
444
|
+
declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
|
|
448
|
+
* https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
|
|
449
|
+
* From
|
|
450
|
+
* rx ry x-axis-rotation large-arc-flag sweep-flag x y
|
|
451
|
+
* To
|
|
452
|
+
* aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
|
|
453
|
+
*/
|
|
454
|
+
declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
|
|
455
|
+
|
|
456
|
+
/**
|
|
457
|
+
* from https://github.com/ppvg/svg-numbers (MIT License)
|
|
458
|
+
*/
|
|
459
|
+
declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
|
|
460
|
+
|
|
461
|
+
declare function pathCommandsToPathData(commands: PathCommand[]): string;
|
|
462
|
+
|
|
463
|
+
declare function pathDataToPathCommands(d: string): PathCommand[];
|
|
458
464
|
|
|
459
465
|
declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
|
|
460
466
|
declare function parseSvg(svg: string | SVGElement): Path2D[];
|
|
461
467
|
|
|
462
|
-
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands,
|
|
468
|
+
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathDrawStyle, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(p,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(p=typeof globalThis<"u"?globalThis:p||self,v(p.modernPath2d={}))})(this,function(p){"use strict";var Kt=Object.defineProperty;var te=(p,v,z)=>v in p?Kt(p,v,{enumerable:!0,configurable:!0,writable:!0,value:z}):p[v]=z;var T=(p,v,z)=>te(p,typeof v!="symbol"?v+"":v,z);const v={arcs:"bevel",bevel:"bevel",miter:"miter","miter-clip":"miter",round:"round"};function z(r,e){const{fill:t="#000",stroke:s="none",strokeWidth:n=s==="none"?0:1,strokeLinecap:o="round",strokeLinejoin:i="miter",strokeMiterlimit:c=0,strokeDasharray:h,strokeDashoffset:a=0}=e.style;r.fillStyle=t,r.strokeStyle=s,r.lineWidth=n,r.lineCap=o,r.lineJoin=v[i],r.miterLimit=c,r.lineDashOffset=a,h&&r.setLineDash(h)}class l{constructor(e=0,t=0){this.x=e,this.y=t}static get MAX(){return new l(1/0,1/0)}static get MIN(){return new l(-1/0,-1/0)}set(e,t){return this.x=e,this.y=t,this}add(e){return this.x+=e.x,this.y+=e.y,this}sub(e){return this.x-=e.x,this.y-=e.y,this}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,s=this.y-e.y;return t*t+s*s}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}multiplyScalar(e){return this.x*=e,this.y*=e,this}divideScalar(e){return this.multiplyScalar(1/e)}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}normalize(){return this.divideScalar(this.length()||1)}lerpVectors(e,t,s){return this.x=e.x+(t.x-e.x)*s,this.y=e.y+(t.y-e.y)*s,this}equals(e){return this.x===e.x&&this.y===e.y}applyMatrix3(e){const t=this.x,s=this.y,n=e.elements;return this.x=n[0]*t+n[3]*s+n[6],this.y=n[1]*t+n[4]*s+n[7],this}copy(e){return this.x=e.x,this.y=e.y,this}clone(){return new l(this.x,this.y)}}class q{constructor(e=0,t=0,s=0,n=0){this.left=e,this.top=t,this.width=s,this.height=n}get x(){return this.left}set x(e){this.left=e}get y(){return this.top}set y(e){this.top=e}get right(){return this.left+this.width}get bottom(){return this.top+this.height}static from(...e){const t=e[0],s=e.slice(1).reduce((n,o)=>(n.left=Math.min(n.left,o.left),n.top=Math.min(n.top,o.top),n.right=Math.max(n.right,o.right),n.bottom=Math.max(n.bottom,o.bottom),n),{left:(t==null?void 0:t.left)??0,top:(t==null?void 0:t.top)??0,right:(t==null?void 0:t.right)??0,bottom:(t==null?void 0:t.bottom)??0});return new q(s.left,s.top,s.right-s.left,s.bottom-s.top)}translate(e,t){return this.left+=e,this.top+=t,this}getCenterPoint(){return new l((this.left+this.right)/2,(this.top+this.bottom)/2)}clone(){return new q(this.left,this.top,this.width,this.height)}toArray(){return[this.left,this.top,this.width,this.height]}}class C{constructor(e=1,t=0,s=0,n=0,o=1,i=0,c=0,h=0,a=1){T(this,"elements",[]);this.set(e,t,s,n,o,i,c,h,a)}set(e,t,s,n,o,i,c,h,a){const u=this.elements;return u[0]=e,u[1]=n,u[2]=c,u[3]=t,u[4]=o,u[5]=h,u[6]=s,u[7]=i,u[8]=a,this}identity(){return this.set(1,0,0,0,1,0,0,0,1),this}copy(e){const t=this.elements,s=e.elements;return t[0]=s[0],t[1]=s[1],t[2]=s[2],t[3]=s[3],t[4]=s[4],t[5]=s[5],t[6]=s[6],t[7]=s[7],t[8]=s[8],this}multiply(e){return this.multiplyMatrices(this,e)}premultiply(e){return this.multiplyMatrices(e,this)}multiplyMatrices(e,t){const s=e.elements,n=t.elements,o=this.elements,i=s[0],c=s[3],h=s[6],a=s[1],u=s[4],y=s[7],f=s[2],d=s[5],g=s[8],x=n[0],m=n[3],w=n[6],E=n[1],b=n[4],S=n[7],N=n[2],L=n[5],D=n[8];return o[0]=i*x+c*E+h*N,o[3]=i*m+c*b+h*L,o[6]=i*w+c*S+h*D,o[1]=a*x+u*E+y*N,o[4]=a*m+u*b+y*L,o[7]=a*w+u*S+y*D,o[2]=f*x+d*E+g*N,o[5]=f*m+d*b+g*L,o[8]=f*w+d*S+g*D,this}invert(){const e=this.elements,t=e[0],s=e[1],n=e[2],o=e[3],i=e[4],c=e[5],h=e[6],a=e[7],u=e[8],y=u*i-c*a,f=c*h-u*o,d=a*o-i*h,g=t*y+s*f+n*d;if(g===0)return this.set(0,0,0,0,0,0,0,0,0);const x=1/g;return e[0]=y*x,e[1]=(n*a-u*s)*x,e[2]=(c*s-n*i)*x,e[3]=f*x,e[4]=(u*t-n*h)*x,e[5]=(n*o-c*t)*x,e[6]=d*x,e[7]=(s*h-a*t)*x,e[8]=(i*t-s*o)*x,this}transpose(){let e;const t=this.elements;return e=t[1],t[1]=t[3],t[3]=e,e=t[2],t[2]=t[6],t[6]=e,e=t[5],t[5]=t[7],t[7]=e,this}scale(e,t){return this.premultiply(W.makeScale(e,t)),this}rotate(e){return this.premultiply(W.makeRotation(-e)),this}translate(e,t){return this.premultiply(W.makeTranslation(e,t)),this}makeTranslation(e,t){return this.set(1,0,e,0,1,t,0,0,1),this}makeRotation(e){const t=Math.cos(e),s=Math.sin(e);return this.set(t,-s,0,s,t,0,0,0,1),this}makeScale(e,t){return this.set(e,0,0,0,t,0,0,0,1),this}fromArray(e,t=0){for(let s=0;s<9;s++)this.elements[s]=e[s+t];return this}clone(){return new this.constructor().fromArray(this.elements)}}const W=new C;function Z(r,e,t,s){const n=r*t+e*s,o=Math.sqrt(r*r+e*e)*Math.sqrt(t*t+s*s);let i=Math.acos(Math.max(-1,Math.min(1,n/o)));return r*s-e*t<0&&(i=-i),i}function J(r,e,t,s,n,o,i,c){if(e===0||t===0){r.lineTo(c.x,c.y);return}s=s*Math.PI/180,e=Math.abs(e),t=Math.abs(t);const h=(i.x-c.x)/2,a=(i.y-c.y)/2,u=Math.cos(s)*h+Math.sin(s)*a,y=-Math.sin(s)*h+Math.cos(s)*a;let f=e*e,d=t*t;const g=u*u,x=y*y,m=g/f+x/d;if(m>1){const Tt=Math.sqrt(m);e=Tt*e,t=Tt*t,f=e*e,d=t*t}const w=f*x+d*g,E=(f*d-w)/w;let b=Math.sqrt(Math.max(0,E));n===o&&(b=-b);const S=b*e*y/t,N=-b*t*u/e,L=Math.cos(s)*S-Math.sin(s)*N+(i.x+c.x)/2,D=Math.sin(s)*S+Math.cos(s)*N+(i.y+c.y)/2,U=Z(1,0,(u-S)/e,(y-N)/t),V=Z((u-S)/e,(y-N)/t,(-u-S)/e,(-y-N)/t)%(Math.PI*2);r.ellipse(L,D,e,t,s,U,U+V,o===1)}function O(r,e){return r-(e-r)}function Y(r,e){const t=new l,s=new l;for(let n=0,o=r.length;n<o;n++){const i=r[n];if(i.type==="m"||i.type==="M")i.type==="m"?t.add(i):t.copy(i),e.moveTo(t.x,t.y),s.copy(t);else if(i.type==="h"||i.type==="H")i.type==="h"?t.x+=i.x:t.x=i.x,e.lineTo(t.x,t.y),s.copy(t);else if(i.type==="v"||i.type==="V")i.type==="v"?t.y+=i.y:t.y=i.y,e.lineTo(t.x,t.y),s.copy(t);else if(i.type==="l"||i.type==="L")i.type==="l"?t.add(i):t.copy(i),e.lineTo(t.x,t.y),s.copy(t);else if(i.type==="c"||i.type==="C")i.type==="c"?(e.bezierCurveTo(t.x+i.x1,t.y+i.y1,t.x+i.x2,t.y+i.y2,t.x+i.x,t.y+i.y),s.x=t.x+i.x2,s.y=t.y+i.y2,t.add(i)):(e.bezierCurveTo(i.x1,i.y1,i.x2,i.y2,i.x,i.y),s.x=i.x2,s.y=i.y2,t.copy(i));else if(i.type==="s"||i.type==="S")i.type==="s"?(e.bezierCurveTo(O(t.x,s.x),O(t.y,s.y),t.x+i.x2,t.y+i.y2,t.x+i.x,t.y+i.y),s.x=t.x+i.x2,s.y=t.y+i.y2,t.add(i)):(e.bezierCurveTo(O(t.x,s.x),O(t.y,s.y),i.x2,i.y2,i.x,i.y),s.x=i.x2,s.y=i.y2,t.copy(i));else if(i.type==="q"||i.type==="Q")i.type==="q"?(e.quadraticCurveTo(t.x+i.x1,t.y+i.y1,t.x+i.x,t.y+i.y),s.x=t.x+i.x1,s.y=t.y+i.y1,t.add(i)):(e.quadraticCurveTo(i.x1,i.y1,i.x,i.y),s.x=i.x1,s.y=i.y1,t.copy(i));else if(i.type==="t"||i.type==="T"){const c=O(t.x,s.x),h=O(t.y,s.y);s.x=c,s.y=h,i.type==="t"?(e.quadraticCurveTo(c,h,t.x+i.x,t.y+i.y),t.add(i)):(e.quadraticCurveTo(c,h,i.x,i.y),t.copy(i))}else if(i.type==="a"||i.type==="A"){const c=t.clone();if(i.type==="a"){if(i.x===0&&i.y===0)continue;t.add(i)}else{if(t.equals(i))continue;t.copy(i)}s.copy(t),J(e,i.rx,i.ry,i.angle,i.largeArcFlag,i.sweepFlag,c,t)}else i.type==="z"||i.type==="Z"?(e.startPoint&&t.copy(e.startPoint),e.closePath()):console.warn("Unsupported commands",i)}}const P={SEPARATOR:/[ \t\r\n,.\-+]/,WHITESPACE:/[ \t\r\n]/,DIGIT:/\d/,SIGN:/[-+]/,POINT:/\./,COMMA:/,/,EXP:/e/i,FLAGS:/[01]/};function A(r,e,t=0){let c=0,h=!0,a="",u="";const y=[];function f(m,w,E){const b=new SyntaxError(`Unexpected character "${m}" at index ${w}.`);throw b.partial=E,b}function d(){a!==""&&(u===""?y.push(Number(a)):y.push(Number(a)*10**Number(u))),a="",u=""}let g;const x=r.length;for(let m=0;m<x;m++){if(g=r[m],Array.isArray(e)&&e.includes(y.length%t)&&P.FLAGS.test(g)){c=1,a=g,d();continue}if(c===0){if(P.WHITESPACE.test(g))continue;if(P.DIGIT.test(g)||P.SIGN.test(g)){c=1,a=g;continue}if(P.POINT.test(g)){c=2,a=g;continue}P.COMMA.test(g)&&(h&&f(g,m,y),h=!0)}if(c===1){if(P.DIGIT.test(g)){a+=g;continue}if(P.POINT.test(g)){a+=g,c=2;continue}if(P.EXP.test(g)){c=3;continue}P.SIGN.test(g)&&a.length===1&&P.SIGN.test(a[0])&&f(g,m,y)}if(c===2){if(P.DIGIT.test(g)){a+=g;continue}if(P.EXP.test(g)){c=3;continue}P.POINT.test(g)&&a[a.length-1]==="."&&f(g,m,y)}if(c===3){if(P.DIGIT.test(g)){u+=g;continue}if(P.SIGN.test(g)){if(u===""){u+=g;continue}u.length===1&&P.SIGN.test(u)&&f(g,m,y)}}P.WHITESPACE.test(g)?(d(),c=0,h=!1):P.COMMA.test(g)?(d(),c=0,h=!0):P.SIGN.test(g)?(d(),c=1,a=g):P.POINT.test(g)?(d(),c=2,a=g):f(g,m,y)}return d(),y}function wt(r){switch(r.type){case"m":case"M":return`${r.type} ${r.x} ${r.y}`;case"h":case"H":return`${r.type} ${r.x}`;case"v":case"V":return`${r.type} ${r.y}`;case"l":case"L":return`${r.type} ${r.x} ${r.y}`;case"c":case"C":return`${r.type} ${r.x1} ${r.y1} ${r.x2} ${r.y2} ${r.x} ${r.y}`;case"s":case"S":return`${r.type} ${r.x2} ${r.y2} ${r.x} ${r.y}`;case"q":case"Q":return`${r.type} ${r.x1} ${r.y1} ${r.x} ${r.y}`;case"t":case"T":return`${r.type} ${r.x} ${r.y}`;case"a":case"A":return`${r.type} ${r.rx} ${r.ry} ${r.angle} ${r.largeArcFlag} ${r.sweepFlag} ${r.x} ${r.y}`;case"z":case"Z":return r.type;default:return""}}function K(r){let e="";for(let t=0,s=r.length;t<s;t++)e+=`${wt(r[t])} `;return e}const vt=/[a-df-z][^a-df-z]*/gi;function G(r){const e=[],t=r.match(vt);if(!t)return e;for(let s=0,n=t.length;s<n;s++){const o=t[s],i=o.charAt(0),c=o.slice(1).trim();let h;switch(i){case"m":case"M":h=A(c);for(let a=0,u=h.length;a<u;a+=2)a===0?e.push({type:i,x:h[a],y:h[a+1]}):e.push({type:i==="m"?"l":"L",x:h[a],y:h[a+1]});break;case"h":case"H":h=A(c);for(let a=0,u=h.length;a<u;a++)e.push({type:i,x:h[a]});break;case"v":case"V":h=A(c);for(let a=0,u=h.length;a<u;a++)e.push({type:i,y:h[a]});break;case"l":case"L":h=A(c);for(let a=0,u=h.length;a<u;a+=2)e.push({type:i,x:h[a],y:h[a+1]});break;case"c":case"C":h=A(c);for(let a=0,u=h.length;a<u;a+=6)e.push({type:i,x1:h[a],y1:h[a+1],x2:h[a+2],y2:h[a+3],x:h[a+4],y:h[a+5]});break;case"s":case"S":h=A(c);for(let a=0,u=h.length;a<u;a+=4)e.push({type:i,x2:h[a],y2:h[a+1],x:h[a+2],y:h[a+3]});break;case"q":case"Q":h=A(c);for(let a=0,u=h.length;a<u;a+=4)e.push({type:i,x1:h[a],y1:h[a+1],x:h[a+2],y:h[a+3]});break;case"t":case"T":h=A(c);for(let a=0,u=h.length;a<u;a+=2)e.push({type:i,x:h[a],y:h[a+1]});break;case"a":case"A":h=A(c,[3,4],7);for(let a=0,u=h.length;a<u;a+=7)e.push({type:i,rx:h[a],ry:h[a+1],angle:h[a+2],largeArcFlag:h[a+3],sweepFlag:h[a+4],x:h[a+5],y:h[a+6]});break;case"z":case"Z":e.push({type:i});break;default:console.warn(o)}}return e}class k{constructor(){T(this,"arcLengthDivisions",200);T(this,"_cacheArcLengths");T(this,"_needsUpdate",!1)}getPointAt(e,t=new l){return this.getPoint(this.getUtoTmapping(e),t)}getPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPoint(s/e));return t}getSpacedPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPointAt(s/e));return t}getLength(){const e=this.getLengths();return e[e.length-1]}getLengths(e=this.arcLengthDivisions){if(this._cacheArcLengths&&this._cacheArcLengths.length===e+1&&!this._needsUpdate)return this._cacheArcLengths;this._needsUpdate=!1;const t=[];let s,n=this.getPoint(0),o=0;t.push(0);for(let i=1;i<=e;i++)s=this.getPoint(i/e),o+=s.distanceTo(n),t.push(o),n=s;return this._cacheArcLengths=t,t}updateArcLengths(){this._needsUpdate=!0,this.getLengths()}getUtoTmapping(e,t){const s=this.getLengths();let n=0;const o=s.length;let i;t?i=t:i=e*s[o-1];let c=0,h=o-1,a;for(;c<=h;)if(n=Math.floor(c+(h-c)/2),a=s[n]-i,a<0)c=n+1;else if(a>0)h=n-1;else{h=n;break}if(n=h,s[n]===i)return n/(o-1);const u=s[n],f=s[n+1]-u,d=(i-u)/f;return(n+d)/(o-1)}getTangent(e,t=new l){const n=Math.max(0,e-1e-4),o=Math.min(1,e+1e-4);return t.copy(this.getPoint(o).sub(this.getPoint(n)).normalize())}getTangentAt(e,t){return this.getTangent(this.getUtoTmapping(e),t)}transformPoint(e){return this}transform(e){return this.transformPoint(t=>t.applyMatrix3(e)),this}getDivisions(e){return e}getMinMax(e=l.MAX,t=l.MIN){return this.getPoints().forEach(s=>{e.x=Math.min(e.x,s.x),e.y=Math.min(e.y,s.y),t.x=Math.max(t.x,s.x),t.y=Math.max(t.y,s.y)}),{min:e,max:t}}getBoundingBox(){const{min:e,max:t}=this.getMinMax();return new q(e.x,e.y,t.x-e.x,t.y-e.y)}getCommands(){return this.getPoints().map((e,t)=>t===0?{type:"M",x:e.x,y:e.y}:{type:"L",x:e.x,y:e.y})}getData(){return K(this.getCommands())}drawTo(e){return this}copy(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}clone(){return new this.constructor().copy(this)}}class F extends k{constructor(e,t,s=0,n=Math.PI*2){super(),this.center=e,this.radius=t,this.start=s,this.end=n}getPoint(e){const{radius:t,center:s}=this;return s.clone().add(this.getNormal(e).clone().multiplyScalar(t))}getTangent(e){const{x:t,y:s}=this.getNormal(e);return new l(-s,t)}getNormal(e){const{start:t,end:s}=this,n=e*(s-t)+t-.5*Math.PI;return new l(Math.cos(n),Math.sin(n))}transformPoint(e){return e(this.center),this}getMinMax(e=l.MAX,t=l.MIN){return e.x=Math.min(e.x,this.center.x-this.radius),e.y=Math.min(e.y,this.center.y-this.radius),t.x=Math.max(t.x,this.center.x+this.radius),t.y=Math.max(t.y,this.center.y+this.radius),{min:e,max:t}}}function tt(r,e,t,s,n){const o=(s-e)*.5,i=(n-t)*.5,c=r*r,h=r*c;return(2*t-2*s+o+i)*h+(-3*t+3*s-2*o-i)*c+o*r+t}function bt(r,e){const t=1-r;return t*t*e}function Ct(r,e){return 2*(1-r)*r*e}function At(r,e){return r*r*e}function et(r,e,t,s){return bt(r,e)+Ct(r,t)+At(r,s)}function kt(r,e){const t=1-r;return t*t*t*e}function It(r,e){const t=1-r;return 3*t*t*r*e}function St(r,e){return 3*(1-r)*r*r*e}function Nt(r,e){return r*r*r*e}function st(r,e,t,s,n){return kt(r,e)+It(r,t)+St(r,s)+Nt(r,n)}class nt extends k{constructor(e=new l,t=new l,s=new l,n=new l){super(),this.start=e,this.startControl=t,this.endControl=s,this.end=n}getPoint(e,t=new l){const{start:s,startControl:n,endControl:o,end:i}=this;return t.set(st(e,s.x,n.x,o.x,i.x),st(e,s.y,n.y,o.y,i.y)),t}transformPoint(e){return e(this.start),e(this.startControl),e(this.endControl),e(this.end),this}getMinMax(e=l.MAX,t=l.MIN){const{start:s,startControl:n,endControl:o,end:i}=this;return e.x=Math.min(e.x,s.x,n.x,o.x,i.x),e.y=Math.min(e.y,s.y,n.y,o.y,i.y),t.x=Math.max(t.x,s.x,n.x,o.x,i.x),t.y=Math.max(t.y,s.y,n.y,o.y,i.y),{min:e,max:t}}getCommands(){const{start:e,startControl:t,endControl:s,end:n}=this;return[{type:"M",x:e.x,y:e.y},{type:"C",x1:t.x,y1:t.y,x2:s.x,y2:s.y,x:n.x,y:n.y}]}drawTo(e){const{startControl:t,endControl:s,end:n}=this;return e.bezierCurveTo(t.x,t.y,s.x,s.y,n.x,n.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.startControl.copy(e.startControl),this.endControl.copy(e.endControl),this.end.copy(e.end),this}}const $t=new C,rt=new C,it=new C,_=new l;class ot extends k{constructor(e=new l,t=1,s=1,n=0,o=0,i=Math.PI*2,c=!1){super(),this.center=e,this.radiusX=t,this.radiusY=s,this.rotation=n,this.startAngle=o,this.endAngle=i,this.clockwise=c}getPoint(e,t=new l){const s=Math.PI*2;let n=this.endAngle-this.startAngle;const o=Math.abs(n)<Number.EPSILON;for(;n<0;)n+=s;for(;n>s;)n-=s;n<Number.EPSILON&&(o?n=0:n=s),this.clockwise&&!o&&(n===s?n=-s:n=n-s);const i=this.startAngle+e*n;let c=this.center.x+this.radiusX*Math.cos(i),h=this.center.y+this.radiusY*Math.sin(i);if(this.rotation!==0){const a=Math.cos(this.rotation),u=Math.sin(this.rotation),y=c-this.center.x,f=h-this.center.y;c=y*a-f*u+this.center.x,h=y*u+f*a+this.center.y}return t.set(c,h)}getDivisions(e=12){return e*2}getCommands(){const{center:e,radiusX:t,radiusY:s,startAngle:n,endAngle:o,clockwise:i,rotation:c}=this,{x:h,y:a}=e,u=h+t*Math.cos(n)*Math.cos(c)-s*Math.sin(n)*Math.sin(c),y=a+t*Math.cos(n)*Math.sin(c)+s*Math.sin(n)*Math.cos(c),f=Math.abs(n-o),d=f>Math.PI?1:0,g=i?1:0,x=c*180/Math.PI;if(f>=2*Math.PI){const m=n+Math.PI,w=h+t*Math.cos(m)*Math.cos(c)-s*Math.sin(m)*Math.sin(c),E=a+t*Math.cos(m)*Math.sin(c)+s*Math.sin(m)*Math.cos(c);return[{type:"M",x:u,y},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:0,sweepFlag:g,x:w,y:E},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:0,sweepFlag:g,x:u,y}]}else{const m=h+t*Math.cos(o)*Math.cos(c)-s*Math.sin(o)*Math.sin(c),w=a+t*Math.cos(o)*Math.sin(c)+s*Math.sin(o)*Math.cos(c);return[{type:"M",x:u,y},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:d,sweepFlag:g,x:m,y:w}]}}drawTo(e){const{center:t,radiusX:s,radiusY:n,rotation:o,startAngle:i,endAngle:c,clockwise:h}=this;return e.ellipse(t.x,t.y,s,n,o,i,c,!h),this}transform(e){return _.set(this.center.x,this.center.y),_.applyMatrix3(e),this.center.x=_.x,this.center.y=_.y,Dt(e)?Et(this,e):Lt(this,e),this}transformPoint(e){return e(this.center),this}getMinMax(e=l.MAX,t=l.MIN){const{center:s,radiusX:n,radiusY:o,rotation:i}=this,{x:c,y:h}=s,a=Math.cos(i),u=Math.sin(i),y=Math.sqrt(n*n*a*a+o*o*u*u),f=Math.sqrt(n*n*u*u+o*o*a*a);return e.x=Math.min(e.x,c-y),e.y=Math.min(e.y,h-f),t.x=Math.max(t.x,c+y),t.y=Math.max(t.y,h+f),{min:e,max:t}}copy(e){return super.copy(e),this.center.x=e.center.x,this.center.y=e.center.y,this.radiusX=e.radiusX,this.radiusY=e.radiusY,this.startAngle=e.startAngle,this.endAngle=e.endAngle,this.clockwise=e.clockwise,this.rotation=e.rotation,this}}function Et(r,e){const t=r.radiusX,s=r.radiusY,n=Math.cos(r.rotation),o=Math.sin(r.rotation),i=new l(t*n,t*o),c=new l(-s*o,s*n),h=i.applyMatrix3(e),a=c.applyMatrix3(e),u=$t.set(h.x,a.x,0,h.y,a.y,0,0,0,1),y=rt.copy(u).invert(),g=it.copy(y).transpose().multiply(y).elements,x=zt(g[0],g[1],g[4]),m=Math.sqrt(x.rt1),w=Math.sqrt(x.rt2);if(r.radiusX=1/m,r.radiusY=1/w,r.rotation=Math.atan2(x.sn,x.cs),!((r.endAngle-r.startAngle)%(2*Math.PI)<Number.EPSILON)){const b=rt.set(m,0,0,0,w,0,0,0,1),S=it.set(x.cs,x.sn,0,-x.sn,x.cs,0,0,0,1),N=b.multiply(S).multiply(u),L=D=>{const{x:U,y:V}=new l(Math.cos(D),Math.sin(D)).applyMatrix3(N);return Math.atan2(V,U)};r.startAngle=L(r.startAngle),r.endAngle=L(r.endAngle),at(e)&&(r.clockwise=!r.clockwise)}}function Lt(r,e){const t=ht(e),s=ct(e);r.radiusX*=t,r.radiusY*=s;const n=t>Number.EPSILON?Math.atan2(e.elements[1],e.elements[0]):Math.atan2(-e.elements[3],e.elements[4]);r.rotation+=n,at(e)&&(r.startAngle*=-1,r.endAngle*=-1,r.clockwise=!r.clockwise)}function at(r){const e=r.elements;return e[0]*e[4]-e[1]*e[3]<0}function Dt(r){const e=r.elements,t=e[0]*e[3]+e[1]*e[4];if(t===0)return!1;const s=ht(r),n=ct(r);return Math.abs(t/(s*n))>Number.EPSILON}function ht(r){const e=r.elements;return Math.sqrt(e[0]*e[0]+e[1]*e[1])}function ct(r){const e=r.elements;return Math.sqrt(e[3]*e[3]+e[4]*e[4])}function zt(r,e,t){let s,n,o,i,c;const h=r+t,a=r-t,u=Math.sqrt(a*a+4*e*e);return h>0?(s=.5*(h+u),c=1/s,n=r*c*t-e*c*e):h<0?n=.5*(h-u):(s=.5*u,n=-.5*u),a>0?o=a+u:o=a-u,Math.abs(o)>2*Math.abs(e)?(c=-2*e/o,i=1/Math.sqrt(1+c*c),o=c*i):Math.abs(e)===0?(o=1,i=0):(c=-.5*o/e,o=1/Math.sqrt(1+c*c),i=c*o),a>0&&(c=o,o=-i,i=c),{rt1:s,rt2:n,cs:o,sn:i}}class X extends k{constructor(e=new l,t=new l){super(),this.start=e,this.end=t}getPoint(e,t=new l){return e===1?t.copy(this.end):t.copy(this.end).sub(this.start).multiplyScalar(e).add(this.start),t}getPointAt(e,t=new l){return this.getPoint(e,t)}getTangent(e,t=new l){return t.subVectors(this.end,this.start).normalize()}getTangentAt(e,t=new l){return this.getTangent(e,t)}getNormal(e,t=new l){const{x:s,y:n}=this.getPoint(e).sub(this.start);return t.set(n,-s).normalize()}transformPoint(e){return e(this.start),e(this.end),this}getDivisions(){return 1}getMinMax(e=l.MAX,t=l.MIN){const{start:s,end:n}=this;return e.x=Math.min(e.x,s.x,n.x),e.y=Math.min(e.y,s.y,n.y),t.x=Math.max(t.x,s.x,n.x),t.y=Math.max(t.y,s.y,n.y),{min:e,max:t}}getCommands(){const{start:e,end:t}=this;return[{type:"M",x:e.x,y:e.y},{type:"L",x:t.x,y:t.y}]}drawTo(e){const{end:t}=this;return e.lineTo(t.x,t.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.end.copy(e.end),this}}class qt extends k{constructor(t,s,n=0,o=1){super();T(this,"curveT",0);this.center=t,this.size=s,this.start=n,this.end=o,this.update()}update(){const{x:t,y:s}=this.center,n=new l(t+.5*this.size,s-.5*this.size),o=new l(t-.5*this.size,s-.5*this.size),i=new l(t,s+.5*this.size),c=new F(n,Math.SQRT1_2*this.size,-.25*Math.PI,.75*Math.PI),h=new F(o,Math.SQRT1_2*this.size,-.75*Math.PI,.25*Math.PI),a=new F(i,.5*Math.SQRT1_2*this.size,.75*Math.PI,1.25*Math.PI),u=new l(t,s+this.size),y=new l(t+this.size,s),f=new l().lerpVectors(y,u,.75),d=new l(t-this.size,s),g=new l().lerpVectors(d,u,.75),x=new X(y,f),m=new X(g,d);return this.curves=[c,x,a,m,h],this}getPoint(t){return this.getCurve(t).getPoint(this.curveT)}getPointAt(t){return this.getPoint(t)}getCurve(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=9*Math.PI/8+1.5;let n;const o=.5*Math.PI;return s<o?(n=0,this.curveT=s/o):s<o+.75?(n=1,this.curveT=(s-o)/.75):s<5*Math.PI/8+.75?(n=2,this.curveT=(s-o-.75)/(Math.PI/8)):s<5*Math.PI/8+1.5?(n=3,this.curveT=(s-5*Math.PI/8-.75)/.75):(n=4,this.curveT=(s-5*Math.PI/8-1.5)/o),this.curves[n]}getTangent(t){return this.getCurve(t).getTangent(this.curveT)}getNormal(t){return this.getCurve(t).getNormal(this.curveT)}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class Xt extends k{constructor(t,s=0,n=0,o=0,i=1){super();T(this,"curves",[]);T(this,"curveT",0);T(this,"points",[]);this.center=t,this.radius=s,this.number=n,this.start=o,this.end=i,this.update()}update(){for(let t=0;t<this.number;t++){let s=t*2*Math.PI/this.number;s-=.5*Math.PI,this.points.push(new l(this.radius*Math.cos(s),this.radius*Math.sin(s)).add(this.center))}for(let t=0;t<this.number;t++)this.curves.push(new X(this.points[t],this.points[(t+1)%this.number]));return this}getCurve(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1);const n=s*this.number,o=Math.floor(n);return this.curveT=n-o,this.curves[o]}getPoint(t,s){return this.getCurve(t).getPoint(this.curveT,s)}getPointAt(t,s){return this.getPoint(t,s)}getTangent(t,s){return this.getCurve(t).getTangent(this.curveT,s)}getNormal(t,s){return this.getCurve(t).getNormal(this.curveT,s)}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class ut extends k{constructor(e=new l,t=new l,s=new l){super(),this.start=e,this.control=t,this.end=s}getPoint(e,t=new l){const{start:s,control:n,end:o}=this;return t.set(et(e,s.x,n.x,o.x),et(e,s.y,n.y,o.y)),t}transformPoint(e){return e(this.start),e(this.control),e(this.end),this}getMinMax(e=l.MAX,t=l.MIN){const{start:s,control:n,end:o}=this,i=.5*(s.x+n.x),c=.5*(s.y+n.y),h=.5*(s.x+o.x),a=.5*(s.y+o.y);return e.x=Math.min(e.x,s.x,o.x,i,h),e.y=Math.min(e.y,s.y,o.y,c,a),t.x=Math.max(t.x,s.x,o.x,i,h),t.y=Math.max(t.y,s.y,o.y,c,a),{min:e,max:t}}getCommands(){const{start:e,control:t,end:s}=this;return[{type:"M",x:e.x,y:e.y},{type:"Q",x1:t.x,y1:t.y,x:s.x,y:s.y}]}drawTo(e){const{control:t,end:s}=this;return e.quadraticCurveTo(t.x,t.y,s.x,s.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.control.copy(e.control),this.end.copy(e.end),this}}class lt extends k{constructor(t,s,n=1,o=0,i=1){super();T(this,"curves",[]);T(this,"curveT",0);this.center=t,this.rx=s,this.aspectRatio=n,this.start=o,this.end=i,this.update()}get x(){return this.center.x-this.rx}get y(){return this.center.y-this.rx/this.aspectRatio}get width(){return this.rx*2}get height(){return this.rx/this.aspectRatio*2}update(){const{x:t,y:s}=this.center,n=this.rx,o=this.rx/this.aspectRatio,i=[new l(t-n,s-o),new l(t+n,s-o),new l(t+n,s+o),new l(t-n,s+o)];for(let c=0;c<4;c++)this.curves.push(new X(i[c].clone(),i[(c+1)%4].clone()));return this}getCurve(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=(1+this.aspectRatio)*2;let n;return s<this.aspectRatio?(n=0,this.curveT=s/this.aspectRatio):s<this.aspectRatio+1?(n=1,this.curveT=(s-this.aspectRatio)/1):s<2*this.aspectRatio+1?(n=2,this.curveT=(s-this.aspectRatio-1)/this.aspectRatio):(n=3,this.curveT=(s-2*this.aspectRatio-1)/1),this.curves[n]}getPoint(t,s){return this.getCurve(t).getPoint(this.curveT,s)}getPointAt(t,s){return this.getPoint(t,s)}getTangent(t,s){return this.getCurve(t).getTangent(this.curveT,s)}getNormal(t,s){return this.getCurve(t).getNormal(this.curveT,s)}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class yt extends k{constructor(e=[]){super(),this.points=e}getDivisions(e=12){return e*this.points.length}getPoint(e,t=new l){const{points:s}=this,n=(s.length-1)*e,o=Math.floor(n),i=n-o,c=s[o===0?o:o-1],h=s[o],a=s[o>s.length-2?s.length-1:o+1],u=s[o>s.length-3?s.length-1:o+2];return t.set(tt(i,c.x,h.x,a.x,u.x),tt(i,c.y,h.y,a.y,u.y)),t}transformPoint(e){return this.points.forEach(t=>e(t)),this}copy(e){super.copy(e),this.points=[];for(let t=0,s=e.points.length;t<s;t++)this.points.push(e.points[t].clone());return this}}class R extends k{constructor(t){super();T(this,"curves",[]);T(this,"startPoint");T(this,"currentPoint",new l);T(this,"autoClose",!1);T(this,"_cacheLengths",[]);t&&this.addPoints(t)}addCurve(t){return this.curves.push(t),this}addPoints(t){this.moveTo(t[0].x,t[0].y);for(let s=1,n=t.length;s<n;s++){const{x:o,y:i}=t[s];this.lineTo(o,i)}return this}addCommands(t){return Y(t,this),this}addData(t){return this.addCommands(G(t)),this}getPoint(t,s=new l){const n=t*this.getLength(),o=this.getCurveLengths();let i=0;for(;i<o.length;){if(o[i]>=n){const c=o[i]-n,h=this.curves[i],a=h.getLength();return h.getPointAt(a===0?0:1-c/a,s)}i++}return s}getLength(){const t=this.getCurveLengths();return t[t.length-1]}updateArcLengths(){super.updateArcLengths(),this._cacheLengths=[],this.getCurveLengths()}getCurveLengths(){if(this._cacheLengths.length===this.curves.length)return this._cacheLengths;const t=[];let s=0;for(let n=0,o=this.curves.length;n<o;n++)s+=this.curves[n].getLength(),t.push(s);return this._cacheLengths=t,t}getSpacedPoints(t=40){const s=[];for(let n=0;n<=t;n++)s.push(this.getPoint(n/t));return this.autoClose&&s.push(s[0]),s}getPoints(t=12){const s=[];let n;for(let o=0,i=this.curves;o<i.length;o++){const c=i[o],h=c.getPoints(c.getDivisions(t));for(let a=0;a<h.length;a++){const u=h[a];n!=null&&n.equals(u)||(s.push(u),n=u)}}return this.autoClose&&s.length>1&&!s[s.length-1].equals(s[0])&&s.push(s[0]),s}_setCurrentPoint(t){return this.currentPoint.copy(t),this.startPoint||(this.startPoint=this.currentPoint.clone()),this}closePath(){const t=this.startPoint;if(t){const s=this.currentPoint;t.equals(s)||(this.curves.push(new X(s,t)),this.currentPoint.copy(t)),this.startPoint=void 0}return this}moveTo(t,s){return this.currentPoint.set(t,s),this.startPoint=this.currentPoint.clone(),this}lineTo(t,s){return this.curves.push(new X(this.currentPoint.clone(),new l(t,s))),this._setCurrentPoint({x:t,y:s}),this}bezierCurveTo(t,s,n,o,i,c){return this.curves.push(new nt(this.currentPoint.clone(),new l(t,s),new l(n,o),new l(i,c))),this._setCurrentPoint({x:i,y:c}),this}quadraticCurveTo(t,s,n,o){return this.curves.push(new ut(this.currentPoint.clone(),new l(t,s),new l(n,o))),this._setCurrentPoint({x:n,y:o}),this}arc(t,s,n,o,i,c){return this.ellipse(t,s,n,n,0,o,i,c),this}relativeArc(t,s,n,o,i,c){const h=this.currentPoint;return this.arc(t+h.x,s+h.y,n,o,i,c),this}arcTo(t,s,n,o,i){return console.warn("Method arcTo not supported yet"),this}ellipse(t,s,n,o,i,c,h,a=!0){const u=new ot(new l(t,s),n,o,i,c,h,!a);if(this.curves.length>0){const y=u.getPoint(0);y.equals(this.currentPoint)||this.lineTo(y.x,y.y)}return this.curves.push(u),this._setCurrentPoint(u.getPoint(1)),this}relativeEllipse(t,s,n,o,i,c,h,a){const u=this.currentPoint;return this.ellipse(t+u.x,s+u.y,n,o,i,c,h,a),this}rect(t,s,n,o){return this.curves.push(new lt(new l(t+n/2,s+o/2),n/2,n/o)),this._setCurrentPoint({x:t,y:s}),this}splineThru(t){return this.curves.push(new yt([this.currentPoint.clone()].concat(t))),this._setCurrentPoint(t[t.length-1]),this}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getBoundingBox(){const{min:t,max:s}=this.getMinMax();return new q(t.x,t.y,s.x-t.x,s.y-t.y)}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){var n;const s=(n=this.curves[0])==null?void 0:n.getPoint(0);return s&&t.moveTo(s.x,s.y),this.curves.forEach(o=>o.drawTo(t)),this.autoClose&&t.closePath(),this}copy(t){super.copy(t),this.curves=[];for(let s=0,n=t.curves.length;s<n;s++)this.curves.push(t.curves[s].clone());return this.autoClose=t.autoClose,this.currentPoint.copy(t.currentPoint),this}}function Ot(r){return r.replace(/[^a-z0-9]/gi,"-").replace(/\B([A-Z])/g,"-$1").toLowerCase()}class I{constructor(e){T(this,"currentPath",new R);T(this,"paths",[this.currentPath]);T(this,"style",{});e&&(e instanceof I?this.addPath(e):Array.isArray(e)?this.addCommands(e):this.addData(e))}get startPoint(){return this.currentPath.startPoint}get currentPoint(){return this.currentPath.currentPoint}get strokeWidth(){return this.style.strokeWidth??((this.style.stroke??"none")==="none"?0:1)}addPath(e){return e instanceof I?this.paths.push(...e.paths.map(t=>t.clone())):this.paths.push(e),this}closePath(){const e=this.startPoint;return e&&(this.currentPath.closePath(),this.currentPath.curves.length>0&&(this.currentPath=new R().moveTo(e.x,e.y),this.paths.push(this.currentPath))),this}moveTo(e,t){const{currentPoint:s,curves:n}=this.currentPath;return s.equals({x:e,y:t})||(n.length?(this.currentPath=new R().moveTo(e,t),this.paths.push(this.currentPath)):this.currentPath.moveTo(e,t)),this}lineTo(e,t){return this.currentPath.lineTo(e,t),this}bezierCurveTo(e,t,s,n,o,i){return this.currentPath.bezierCurveTo(e,t,s,n,o,i),this}quadraticCurveTo(e,t,s,n){return this.currentPath.quadraticCurveTo(e,t,s,n),this}arc(e,t,s,n,o,i){return this.currentPath.arc(e,t,s,n,o,i),this}arcTo(e,t,s,n,o){return this.currentPath.arcTo(e,t,s,n,o),this}ellipse(e,t,s,n,o,i,c,h){return this.currentPath.ellipse(e,t,s,n,o,i,c,h),this}rect(e,t,s,n){return this.currentPath.rect(e,t,s,n),this}addCommands(e){return Y(e,this),this}addData(e){return this.addCommands(G(e)),this}splineThru(e){return this.currentPath.splineThru(e),this}forEachCurve(e){return this.paths.forEach(t=>t.curves.forEach(s=>e(s))),this}transformPoint(e){return this.forEachCurve(t=>t.transformPoint(e)),this}transform(e){return this.forEachCurve(t=>t.transform(e)),this}getMinMax(e=l.MAX,t=l.MIN){return this.forEachCurve(s=>s.getMinMax(e,t)),{min:e,max:t}}getBoundingBox(e=!0){const{min:t,max:s}=this.getMinMax(),n=new q(t.x,t.y,s.x-t.x,s.y-t.y);if(e){const o=this.strokeWidth;n.left-=o/2,n.top-=o/2,n.width+=o,n.height+=o}return n}getCommands(){return this.paths.flatMap(e=>e.getCommands())}getData(){return this.paths.map(e=>e.getData()).join(" ")}getSvgPathXml(){const e={...this.style,fill:this.style.fill??"#000",stroke:this.style.stroke??"none"},t={};for(const n in e)e[n]!==void 0&&(t[Ot(n)]=e[n]);Object.assign(t,{"stroke-width":`${this.strokeWidth}px`});let s="";for(const n in t)t[n]!==void 0&&(s+=`${n}:${t[n]};`);return`<path d="${this.getData()}" style="${s}"></path>`}getSvgXml(){const{x:e,y:t,width:s,height:n}=this.getBoundingBox(),o=this.getSvgPathXml();return`<svg viewBox="${e} ${t} ${s} ${n}" width="${s}px" height="${n}px" xmlns="http://www.w3.org/2000/svg">${o}</svg>`}getSvgDataUri(){return`data:image/svg+xml;base64,${btoa(this.getSvgXml())}`}drawTo(e){const{fill:t="#000",stroke:s="none"}=this.style;z(e,this),this.paths.forEach(n=>{n.drawTo(e)}),t!=="none"&&e.fill(),s!=="none"&&e.stroke()}copy(e){return this.currentPath=e.currentPath.clone(),this.paths=e.paths.map(t=>t.clone()),this.style={...e.style},this}toSvg(){return new DOMParser().parseFromString(this.getSvgXml(),"image/svg+xml").documentElement}toCanvas(e=2){const{left:t,top:s,width:n,height:o}=this.getBoundingBox(),i=document.createElement("canvas");i.width=n*e,i.height=o*e,i.style.width=`${n}px`,i.style.height=`${o}px`;const c=i.getContext("2d");return c&&(c.scale(e,e),c.translate(-t,-s),this.drawTo(c)),i}clone(){return new this.constructor().copy(this)}}const Q="px",gt=90,ft=["mm","cm","in","pt","pc","px"],H={mm:{mm:1,cm:.1,in:1/25.4,pt:72/25.4,pc:6/25.4,px:-1},cm:{mm:10,cm:1,in:1/2.54,pt:72/2.54,pc:6/2.54,px:-1},in:{mm:25.4,cm:2.54,in:1,pt:72,pc:6,px:-1},pt:{mm:25.4/72,cm:2.54/72,in:1/72,pt:1,pc:6/72,px:-1},pc:{mm:25.4/6,cm:2.54/6,in:1/6,pt:72/6,pc:1,px:-1},px:{px:1}};function M(r){let e="px";if(typeof r=="string"||r instanceof String)for(let s=0,n=ft.length;s<n;s++){const o=ft[s];if(r.endsWith(o)){e=o,r=r.substring(0,r.length-o.length);break}}let t;return e==="px"&&Q!=="px"?t=H.in[Q]/gt:(t=H[e][Q],t<0&&(t=H[e].in*gt)),t*Number.parseFloat(r)}const Rt=new C,B=new C,pt=new C,dt=new C;function Ft(r,e,t){if(!(r.hasAttribute("transform")||r.nodeName==="use"&&(r.hasAttribute("x")||r.hasAttribute("y"))))return null;const s=_t(r);return t.length>0&&s.premultiply(t[t.length-1]),e.copy(s),t.push(s),s}function _t(r){const e=new C,t=Rt;if(r.nodeName==="use"&&(r.hasAttribute("x")||r.hasAttribute("y"))&&e.translate(M(r.getAttribute("x")),M(r.getAttribute("y"))),r.hasAttribute("transform")){const s=r.getAttribute("transform").split(")");for(let n=s.length-1;n>=0;n--){const o=s[n].trim();if(o==="")continue;const i=o.indexOf("("),c=o.length;if(i>0&&i<c){const h=o.slice(0,i),a=A(o.slice(i+1));switch(t.identity(),h){case"translate":if(a.length>=1){const u=a[0];let y=0;a.length>=2&&(y=a[1]),t.translate(u,y)}break;case"rotate":if(a.length>=1){let u=0,y=0,f=0;u=a[0]*Math.PI/180,a.length>=3&&(y=a[1],f=a[2]),B.makeTranslation(-y,-f),pt.makeRotation(u),dt.multiplyMatrices(pt,B),B.makeTranslation(y,f),t.multiplyMatrices(B,dt)}break;case"scale":a.length>=1&&t.scale(a[0],a[1]??a[0]);break;case"skewX":a.length===1&&t.set(1,Math.tan(a[0]*Math.PI/180),0,0,1,0,0,0,1);break;case"skewY":a.length===1&&t.set(1,0,0,Math.tan(a[0]*Math.PI/180),1,0,0,0,1);break;case"matrix":a.length===6&&t.set(a[0],a[2],a[4],a[1],a[3],a[5],0,0,1);break}}e.premultiply(t)}}return e}function Bt(r){return new I().addPath(new R().arc(M(r.getAttribute("cx")||0),M(r.getAttribute("cy")||0),M(r.getAttribute("r")||0),0,Math.PI*2))}function Ut(r,e){if(!(!r.sheet||!r.sheet.cssRules||!r.sheet.cssRules.length))for(let t=0;t<r.sheet.cssRules.length;t++){const s=r.sheet.cssRules[t];if(s.type!==1)continue;const n=s.selectorText.split(/,/g).filter(Boolean).map(o=>o.trim());for(let o=0;o<n.length;o++){const i=Object.fromEntries(Object.entries(s.style).filter(([,c])=>c!==""));e[n[o]]=Object.assign(e[n[o]]||{},i)}}}function Wt(r){return new I().addPath(new R().ellipse(M(r.getAttribute("cx")||0),M(r.getAttribute("cy")||0),M(r.getAttribute("rx")||0),M(r.getAttribute("ry")||0),0,0,Math.PI*2))}function Yt(r){return new I().moveTo(M(r.getAttribute("x1")||0),M(r.getAttribute("y1")||0)).lineTo(M(r.getAttribute("x2")||0),M(r.getAttribute("y2")||0))}function Gt(r){const e=new I,t=r.getAttribute("d");return!t||t==="none"?null:(e.addData(t),e)}const Qt=/([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;function Ht(r){var s;const e=new I;let t=0;return(s=r.getAttribute("points"))==null||s.replace(Qt,(n,o,i)=>{const c=M(o),h=M(i);return t===0?e.moveTo(c,h):e.lineTo(c,h),t++,n}),e.currentPath.autoClose=!0,e}const jt=/([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;function Vt(r){var s;const e=new I;let t=0;return(s=r.getAttribute("points"))==null||s.replace(jt,(n,o,i)=>{const c=M(o),h=M(i);return t===0?e.moveTo(c,h):e.lineTo(c,h),t++,n}),e.currentPath.autoClose=!1,e}function Zt(r){const e=M(r.getAttribute("x")||0),t=M(r.getAttribute("y")||0),s=M(r.getAttribute("rx")||r.getAttribute("ry")||0),n=M(r.getAttribute("ry")||r.getAttribute("rx")||0),o=M(r.getAttribute("width")),i=M(r.getAttribute("height")),c=1-.551915024494,h=new I;return h.moveTo(e+s,t),h.lineTo(e+o-s,t),(s!==0||n!==0)&&h.bezierCurveTo(e+o-s*c,t,e+o,t+n*c,e+o,t+n),h.lineTo(e+o,t+i-n),(s!==0||n!==0)&&h.bezierCurveTo(e+o,t+i-n*c,e+o-s*c,t+i,e+o-s,t+i),h.lineTo(e+s,t+i),(s!==0||n!==0)&&h.bezierCurveTo(e+s*c,t+i,e,t+i-n*c,e,t+i-n),h.lineTo(e,t+n),(s!==0||n!==0)&&h.bezierCurveTo(e,t+n*c,e+s*c,t,e+s,t),h}function $(r,e,t){e=Object.assign({},e);let s={};if(r.hasAttribute("class")){const h=r.getAttribute("class").split(/\s/).filter(Boolean).map(a=>a.trim());for(let a=0;a<h.length;a++)s=Object.assign(s,t[`.${h[a]}`])}r.hasAttribute("id")&&(s=Object.assign(s,t[`#${r.getAttribute("id")}`]));function n(h,a,u){u===void 0&&(u=function(f){return f.startsWith("url")&&console.warn("url access in attributes is not implemented."),f}),r.hasAttribute(h)&&(e[a]=u(r.getAttribute(h))),s[h]&&(e[a]=u(s[h])),r.style&&r.style[h]!==""&&(e[a]=u(r.style[h]))}function o(h){return Math.max(0,Math.min(1,M(h)))}function i(h){return Math.max(0,M(h))}function c(h){return h.split(" ").filter(a=>a!=="").map(a=>M(a))}return n("fill","fill"),n("fill-opacity","fillOpacity",o),n("fill-rule","fillRule"),n("opacity","opacity",o),n("stroke","stroke"),n("stroke-opacity","strokeOpacity",o),n("stroke-width","strokeWidth",i),n("stroke-linecap","strokeLinecap"),n("stroke-linejoin","strokeLinejoin"),n("stroke-miterlimit","strokeMiterlimit",i),n("stroke-dasharray","strokeDasharray",c),n("stroke-dashoffset","strokeDashoffset",M),n("visibility","visibility"),e}function j(r,e,t=[]){var u;if(r.nodeType!==1)return t;let s=!1,n=null;const o={};switch(r.nodeName){case"svg":e=$(r,e,o);break;case"style":Ut(r,o);break;case"g":e=$(r,e,o);break;case"path":e=$(r,e,o),r.hasAttribute("d")&&(n=Gt(r));break;case"rect":e=$(r,e,o),n=Zt(r);break;case"polygon":e=$(r,e,o),n=Ht(r);break;case"polyline":e=$(r,e,o),n=Vt(r);break;case"circle":e=$(r,e,o),n=Bt(r);break;case"ellipse":e=$(r,e,o),n=Wt(r);break;case"line":e=$(r,e,o),n=Yt(r);break;case"defs":s=!0;break;case"use":{e=$(r,e,o);const f=(r.getAttributeNS("http://www.w3.org/1999/xlink","href")||"").substring(1),d=(u=r.viewportElement)==null?void 0:u.getElementById(f);d?j(d,e,t):console.warn(`'use node' references non-existent node id: ${f}`);break}default:console.warn(r);break}const i=new C,c=[],h=Ft(r,i,c);n&&(n.transform(i),t.push(n),n.style=e);const a=r.childNodes;for(let y=0,f=a.length;y<f;y++){const d=a[y];s&&d.nodeName!=="style"&&d.nodeName!=="defs"||j(d,e,t)}return h&&(c.pop(),c.length>0?i.copy(c[c.length-1]):i.identity()),t}const xt="data:image/svg+xml;",mt=`${xt}base64,`,Mt=`${xt}charset=utf8,`;function Pt(r){if(typeof r=="string"){let e;return r.startsWith(mt)?(r=r.substring(mt.length,r.length),e=atob(r)):r.startsWith(Mt)?(r=r.substring(Mt.length,r.length),e=decodeURIComponent(r)):e=r,new DOMParser().parseFromString(e,"image/svg+xml").documentElement}else return r}function Jt(r){return j(Pt(r),{})}p.BoundingBox=q,p.CircleCurve=F,p.CubicBezierCurve=nt,p.Curve=k,p.CurvePath=R,p.EllipseCurve=ot,p.HeartCurve=qt,p.LineCurve=X,p.Matrix3=C,p.Path2D=I,p.PloygonCurve=Xt,p.QuadraticBezierCurve=ut,p.RectangularCurve=lt,p.SplineCurve=yt,p.Vector2=l,p.addPathCommandsToPath2D=Y,p.parseArcCommand=J,p.parsePathDataArgs=A,p.parseSvg=Jt,p.parseSvgToDom=Pt,p.pathCommandsToPathData=K,p.pathDataToPathCommands=G,p.setCanvasContextByPath=z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(d,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(d=typeof globalThis<"u"?globalThis:d||self,v(d.modernPath2d={}))})(this,function(d){"use strict";var Kt=Object.defineProperty;var te=(d,v,z)=>v in d?Kt(d,v,{enumerable:!0,configurable:!0,writable:!0,value:z}):d[v]=z;var T=(d,v,z)=>te(d,typeof v!="symbol"?v+"":v,z);const v={arcs:"bevel",bevel:"bevel",miter:"miter","miter-clip":"miter",round:"round"};function z(r,e){const{fill:t="#000",stroke:s="none",strokeWidth:n=s==="none"?0:1,strokeLinecap:o="round",strokeLinejoin:i="miter",strokeMiterlimit:c=0,strokeDasharray:h,strokeDashoffset:a=0,shadowOffsetX:u=0,shadowOffsetY:y=0,shadowBlur:f=0,shadowColor:p="rgba(0, 0, 0, 0)"}=e;r.fillStyle=t,r.strokeStyle=s,r.lineWidth=n,r.lineCap=o,r.lineJoin=v[i],r.miterLimit=c,h&&r.setLineDash(h),r.lineDashOffset=a,r.shadowOffsetX=u,r.shadowOffsetY=y,r.shadowBlur=f,r.shadowColor=p}class l{constructor(e=0,t=0){this.x=e,this.y=t}static get MAX(){return new l(1/0,1/0)}static get MIN(){return new l(-1/0,-1/0)}set(e,t){return this.x=e,this.y=t,this}add(e){return this.x+=e.x,this.y+=e.y,this}sub(e){return this.x-=e.x,this.y-=e.y,this}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,s=this.y-e.y;return t*t+s*s}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}multiplyScalar(e){return this.x*=e,this.y*=e,this}divideScalar(e){return this.multiplyScalar(1/e)}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}normalize(){return this.divideScalar(this.length()||1)}lerpVectors(e,t,s){return this.x=e.x+(t.x-e.x)*s,this.y=e.y+(t.y-e.y)*s,this}equals(e){return this.x===e.x&&this.y===e.y}applyMatrix3(e){const t=this.x,s=this.y,n=e.elements;return this.x=n[0]*t+n[3]*s+n[6],this.y=n[1]*t+n[4]*s+n[7],this}copy(e){return this.x=e.x,this.y=e.y,this}clone(){return new l(this.x,this.y)}}class q{constructor(e=0,t=0,s=0,n=0){this.left=e,this.top=t,this.width=s,this.height=n}get x(){return this.left}set x(e){this.left=e}get y(){return this.top}set y(e){this.top=e}get right(){return this.left+this.width}get bottom(){return this.top+this.height}static from(...e){const t=e[0],s=e.slice(1).reduce((n,o)=>(n.left=Math.min(n.left,o.left),n.top=Math.min(n.top,o.top),n.right=Math.max(n.right,o.right),n.bottom=Math.max(n.bottom,o.bottom),n),{left:(t==null?void 0:t.left)??0,top:(t==null?void 0:t.top)??0,right:(t==null?void 0:t.right)??0,bottom:(t==null?void 0:t.bottom)??0});return new q(s.left,s.top,s.right-s.left,s.bottom-s.top)}translate(e,t){return this.left+=e,this.top+=t,this}getCenterPoint(){return new l((this.left+this.right)/2,(this.top+this.bottom)/2)}clone(){return new q(this.left,this.top,this.width,this.height)}toArray(){return[this.left,this.top,this.width,this.height]}}class C{constructor(e=1,t=0,s=0,n=0,o=1,i=0,c=0,h=0,a=1){T(this,"elements",[]);this.set(e,t,s,n,o,i,c,h,a)}set(e,t,s,n,o,i,c,h,a){const u=this.elements;return u[0]=e,u[1]=n,u[2]=c,u[3]=t,u[4]=o,u[5]=h,u[6]=s,u[7]=i,u[8]=a,this}identity(){return this.set(1,0,0,0,1,0,0,0,1),this}copy(e){const t=this.elements,s=e.elements;return t[0]=s[0],t[1]=s[1],t[2]=s[2],t[3]=s[3],t[4]=s[4],t[5]=s[5],t[6]=s[6],t[7]=s[7],t[8]=s[8],this}multiply(e){return this.multiplyMatrices(this,e)}premultiply(e){return this.multiplyMatrices(e,this)}multiplyMatrices(e,t){const s=e.elements,n=t.elements,o=this.elements,i=s[0],c=s[3],h=s[6],a=s[1],u=s[4],y=s[7],f=s[2],p=s[5],g=s[8],x=n[0],m=n[3],w=n[6],E=n[1],b=n[4],S=n[7],N=n[2],L=n[5],D=n[8];return o[0]=i*x+c*E+h*N,o[3]=i*m+c*b+h*L,o[6]=i*w+c*S+h*D,o[1]=a*x+u*E+y*N,o[4]=a*m+u*b+y*L,o[7]=a*w+u*S+y*D,o[2]=f*x+p*E+g*N,o[5]=f*m+p*b+g*L,o[8]=f*w+p*S+g*D,this}invert(){const e=this.elements,t=e[0],s=e[1],n=e[2],o=e[3],i=e[4],c=e[5],h=e[6],a=e[7],u=e[8],y=u*i-c*a,f=c*h-u*o,p=a*o-i*h,g=t*y+s*f+n*p;if(g===0)return this.set(0,0,0,0,0,0,0,0,0);const x=1/g;return e[0]=y*x,e[1]=(n*a-u*s)*x,e[2]=(c*s-n*i)*x,e[3]=f*x,e[4]=(u*t-n*h)*x,e[5]=(n*o-c*t)*x,e[6]=p*x,e[7]=(s*h-a*t)*x,e[8]=(i*t-s*o)*x,this}transpose(){let e;const t=this.elements;return e=t[1],t[1]=t[3],t[3]=e,e=t[2],t[2]=t[6],t[6]=e,e=t[5],t[5]=t[7],t[7]=e,this}scale(e,t){return this.premultiply(U.makeScale(e,t)),this}rotate(e){return this.premultiply(U.makeRotation(-e)),this}translate(e,t){return this.premultiply(U.makeTranslation(e,t)),this}makeTranslation(e,t){return this.set(1,0,e,0,1,t,0,0,1),this}makeRotation(e){const t=Math.cos(e),s=Math.sin(e);return this.set(t,-s,0,s,t,0,0,0,1),this}makeScale(e,t){return this.set(e,0,0,0,t,0,0,0,1),this}fromArray(e,t=0){for(let s=0;s<9;s++)this.elements[s]=e[s+t];return this}clone(){return new this.constructor().fromArray(this.elements)}}const U=new C;function Z(r,e,t,s){const n=r*t+e*s,o=Math.sqrt(r*r+e*e)*Math.sqrt(t*t+s*s);let i=Math.acos(Math.max(-1,Math.min(1,n/o)));return r*s-e*t<0&&(i=-i),i}function J(r,e,t,s,n,o,i,c){if(e===0||t===0){r.lineTo(c.x,c.y);return}s=s*Math.PI/180,e=Math.abs(e),t=Math.abs(t);const h=(i.x-c.x)/2,a=(i.y-c.y)/2,u=Math.cos(s)*h+Math.sin(s)*a,y=-Math.sin(s)*h+Math.cos(s)*a;let f=e*e,p=t*t;const g=u*u,x=y*y,m=g/f+x/p;if(m>1){const Tt=Math.sqrt(m);e=Tt*e,t=Tt*t,f=e*e,p=t*t}const w=f*x+p*g,E=(f*p-w)/w;let b=Math.sqrt(Math.max(0,E));n===o&&(b=-b);const S=b*e*y/t,N=-b*t*u/e,L=Math.cos(s)*S-Math.sin(s)*N+(i.x+c.x)/2,D=Math.sin(s)*S+Math.cos(s)*N+(i.y+c.y)/2,B=Z(1,0,(u-S)/e,(y-N)/t),V=Z((u-S)/e,(y-N)/t,(-u-S)/e,(-y-N)/t)%(Math.PI*2);r.ellipse(L,D,e,t,s,B,B+V,o===1)}function O(r,e){return r-(e-r)}function W(r,e){const t=new l,s=new l;for(let n=0,o=r.length;n<o;n++){const i=r[n];if(i.type==="m"||i.type==="M")i.type==="m"?t.add(i):t.copy(i),e.moveTo(t.x,t.y),s.copy(t);else if(i.type==="h"||i.type==="H")i.type==="h"?t.x+=i.x:t.x=i.x,e.lineTo(t.x,t.y),s.copy(t);else if(i.type==="v"||i.type==="V")i.type==="v"?t.y+=i.y:t.y=i.y,e.lineTo(t.x,t.y),s.copy(t);else if(i.type==="l"||i.type==="L")i.type==="l"?t.add(i):t.copy(i),e.lineTo(t.x,t.y),s.copy(t);else if(i.type==="c"||i.type==="C")i.type==="c"?(e.bezierCurveTo(t.x+i.x1,t.y+i.y1,t.x+i.x2,t.y+i.y2,t.x+i.x,t.y+i.y),s.x=t.x+i.x2,s.y=t.y+i.y2,t.add(i)):(e.bezierCurveTo(i.x1,i.y1,i.x2,i.y2,i.x,i.y),s.x=i.x2,s.y=i.y2,t.copy(i));else if(i.type==="s"||i.type==="S")i.type==="s"?(e.bezierCurveTo(O(t.x,s.x),O(t.y,s.y),t.x+i.x2,t.y+i.y2,t.x+i.x,t.y+i.y),s.x=t.x+i.x2,s.y=t.y+i.y2,t.add(i)):(e.bezierCurveTo(O(t.x,s.x),O(t.y,s.y),i.x2,i.y2,i.x,i.y),s.x=i.x2,s.y=i.y2,t.copy(i));else if(i.type==="q"||i.type==="Q")i.type==="q"?(e.quadraticCurveTo(t.x+i.x1,t.y+i.y1,t.x+i.x,t.y+i.y),s.x=t.x+i.x1,s.y=t.y+i.y1,t.add(i)):(e.quadraticCurveTo(i.x1,i.y1,i.x,i.y),s.x=i.x1,s.y=i.y1,t.copy(i));else if(i.type==="t"||i.type==="T"){const c=O(t.x,s.x),h=O(t.y,s.y);s.x=c,s.y=h,i.type==="t"?(e.quadraticCurveTo(c,h,t.x+i.x,t.y+i.y),t.add(i)):(e.quadraticCurveTo(c,h,i.x,i.y),t.copy(i))}else if(i.type==="a"||i.type==="A"){const c=t.clone();if(i.type==="a"){if(i.x===0&&i.y===0)continue;t.add(i)}else{if(t.equals(i))continue;t.copy(i)}s.copy(t),J(e,i.rx,i.ry,i.angle,i.largeArcFlag,i.sweepFlag,c,t)}else i.type==="z"||i.type==="Z"?(e.startPoint&&t.copy(e.startPoint),e.closePath()):console.warn("Unsupported commands",i)}}const P={SEPARATOR:/[ \t\r\n,.\-+]/,WHITESPACE:/[ \t\r\n]/,DIGIT:/\d/,SIGN:/[-+]/,POINT:/\./,COMMA:/,/,EXP:/e/i,FLAGS:/[01]/};function A(r,e,t=0){let c=0,h=!0,a="",u="";const y=[];function f(m,w,E){const b=new SyntaxError(`Unexpected character "${m}" at index ${w}.`);throw b.partial=E,b}function p(){a!==""&&(u===""?y.push(Number(a)):y.push(Number(a)*10**Number(u))),a="",u=""}let g;const x=r.length;for(let m=0;m<x;m++){if(g=r[m],Array.isArray(e)&&e.includes(y.length%t)&&P.FLAGS.test(g)){c=1,a=g,p();continue}if(c===0){if(P.WHITESPACE.test(g))continue;if(P.DIGIT.test(g)||P.SIGN.test(g)){c=1,a=g;continue}if(P.POINT.test(g)){c=2,a=g;continue}P.COMMA.test(g)&&(h&&f(g,m,y),h=!0)}if(c===1){if(P.DIGIT.test(g)){a+=g;continue}if(P.POINT.test(g)){a+=g,c=2;continue}if(P.EXP.test(g)){c=3;continue}P.SIGN.test(g)&&a.length===1&&P.SIGN.test(a[0])&&f(g,m,y)}if(c===2){if(P.DIGIT.test(g)){a+=g;continue}if(P.EXP.test(g)){c=3;continue}P.POINT.test(g)&&a[a.length-1]==="."&&f(g,m,y)}if(c===3){if(P.DIGIT.test(g)){u+=g;continue}if(P.SIGN.test(g)){if(u===""){u+=g;continue}u.length===1&&P.SIGN.test(u)&&f(g,m,y)}}P.WHITESPACE.test(g)?(p(),c=0,h=!1):P.COMMA.test(g)?(p(),c=0,h=!0):P.SIGN.test(g)?(p(),c=1,a=g):P.POINT.test(g)?(p(),c=2,a=g):f(g,m,y)}return p(),y}function wt(r){switch(r.type){case"m":case"M":return`${r.type} ${r.x} ${r.y}`;case"h":case"H":return`${r.type} ${r.x}`;case"v":case"V":return`${r.type} ${r.y}`;case"l":case"L":return`${r.type} ${r.x} ${r.y}`;case"c":case"C":return`${r.type} ${r.x1} ${r.y1} ${r.x2} ${r.y2} ${r.x} ${r.y}`;case"s":case"S":return`${r.type} ${r.x2} ${r.y2} ${r.x} ${r.y}`;case"q":case"Q":return`${r.type} ${r.x1} ${r.y1} ${r.x} ${r.y}`;case"t":case"T":return`${r.type} ${r.x} ${r.y}`;case"a":case"A":return`${r.type} ${r.rx} ${r.ry} ${r.angle} ${r.largeArcFlag} ${r.sweepFlag} ${r.x} ${r.y}`;case"z":case"Z":return r.type;default:return""}}function K(r){let e="";for(let t=0,s=r.length;t<s;t++)e+=`${wt(r[t])} `;return e}const vt=/[a-df-z][^a-df-z]*/gi;function G(r){const e=[],t=r.match(vt);if(!t)return e;for(let s=0,n=t.length;s<n;s++){const o=t[s],i=o.charAt(0),c=o.slice(1).trim();let h;switch(i){case"m":case"M":h=A(c);for(let a=0,u=h.length;a<u;a+=2)a===0?e.push({type:i,x:h[a],y:h[a+1]}):e.push({type:i==="m"?"l":"L",x:h[a],y:h[a+1]});break;case"h":case"H":h=A(c);for(let a=0,u=h.length;a<u;a++)e.push({type:i,x:h[a]});break;case"v":case"V":h=A(c);for(let a=0,u=h.length;a<u;a++)e.push({type:i,y:h[a]});break;case"l":case"L":h=A(c);for(let a=0,u=h.length;a<u;a+=2)e.push({type:i,x:h[a],y:h[a+1]});break;case"c":case"C":h=A(c);for(let a=0,u=h.length;a<u;a+=6)e.push({type:i,x1:h[a],y1:h[a+1],x2:h[a+2],y2:h[a+3],x:h[a+4],y:h[a+5]});break;case"s":case"S":h=A(c);for(let a=0,u=h.length;a<u;a+=4)e.push({type:i,x2:h[a],y2:h[a+1],x:h[a+2],y:h[a+3]});break;case"q":case"Q":h=A(c);for(let a=0,u=h.length;a<u;a+=4)e.push({type:i,x1:h[a],y1:h[a+1],x:h[a+2],y:h[a+3]});break;case"t":case"T":h=A(c);for(let a=0,u=h.length;a<u;a+=2)e.push({type:i,x:h[a],y:h[a+1]});break;case"a":case"A":h=A(c,[3,4],7);for(let a=0,u=h.length;a<u;a+=7)e.push({type:i,rx:h[a],ry:h[a+1],angle:h[a+2],largeArcFlag:h[a+3],sweepFlag:h[a+4],x:h[a+5],y:h[a+6]});break;case"z":case"Z":e.push({type:i});break;default:console.warn(o)}}return e}class k{constructor(){T(this,"arcLengthDivisions",200);T(this,"_cacheArcLengths");T(this,"_needsUpdate",!1)}getPointAt(e,t=new l){return this.getPoint(this.getUtoTmapping(e),t)}getPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPoint(s/e));return t}getSpacedPoints(e=5){const t=[];for(let s=0;s<=e;s++)t.push(this.getPointAt(s/e));return t}getLength(){const e=this.getLengths();return e[e.length-1]}getLengths(e=this.arcLengthDivisions){if(this._cacheArcLengths&&this._cacheArcLengths.length===e+1&&!this._needsUpdate)return this._cacheArcLengths;this._needsUpdate=!1;const t=[];let s,n=this.getPoint(0),o=0;t.push(0);for(let i=1;i<=e;i++)s=this.getPoint(i/e),o+=s.distanceTo(n),t.push(o),n=s;return this._cacheArcLengths=t,t}updateArcLengths(){this._needsUpdate=!0,this.getLengths()}getUtoTmapping(e,t){const s=this.getLengths();let n=0;const o=s.length;let i;t?i=t:i=e*s[o-1];let c=0,h=o-1,a;for(;c<=h;)if(n=Math.floor(c+(h-c)/2),a=s[n]-i,a<0)c=n+1;else if(a>0)h=n-1;else{h=n;break}if(n=h,s[n]===i)return n/(o-1);const u=s[n],f=s[n+1]-u,p=(i-u)/f;return(n+p)/(o-1)}getTangent(e,t=new l){const n=Math.max(0,e-1e-4),o=Math.min(1,e+1e-4);return t.copy(this.getPoint(o).sub(this.getPoint(n)).normalize())}getTangentAt(e,t){return this.getTangent(this.getUtoTmapping(e),t)}transformPoint(e){return this}transform(e){return this.transformPoint(t=>t.applyMatrix3(e)),this}getDivisions(e){return e}getMinMax(e=l.MAX,t=l.MIN){return this.getPoints().forEach(s=>{e.x=Math.min(e.x,s.x),e.y=Math.min(e.y,s.y),t.x=Math.max(t.x,s.x),t.y=Math.max(t.y,s.y)}),{min:e,max:t}}getBoundingBox(){const{min:e,max:t}=this.getMinMax();return new q(e.x,e.y,t.x-e.x,t.y-e.y)}getCommands(){return this.getPoints().map((e,t)=>t===0?{type:"M",x:e.x,y:e.y}:{type:"L",x:e.x,y:e.y})}getData(){return K(this.getCommands())}drawTo(e){return this}copy(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}clone(){return new this.constructor().copy(this)}}class F extends k{constructor(e,t,s=0,n=Math.PI*2){super(),this.center=e,this.radius=t,this.start=s,this.end=n}getPoint(e){const{radius:t,center:s}=this;return s.clone().add(this.getNormal(e).clone().multiplyScalar(t))}getTangent(e){const{x:t,y:s}=this.getNormal(e);return new l(-s,t)}getNormal(e){const{start:t,end:s}=this,n=e*(s-t)+t-.5*Math.PI;return new l(Math.cos(n),Math.sin(n))}transformPoint(e){return e(this.center),this}getMinMax(e=l.MAX,t=l.MIN){return e.x=Math.min(e.x,this.center.x-this.radius),e.y=Math.min(e.y,this.center.y-this.radius),t.x=Math.max(t.x,this.center.x+this.radius),t.y=Math.max(t.y,this.center.y+this.radius),{min:e,max:t}}}function tt(r,e,t,s,n){const o=(s-e)*.5,i=(n-t)*.5,c=r*r,h=r*c;return(2*t-2*s+o+i)*h+(-3*t+3*s-2*o-i)*c+o*r+t}function bt(r,e){const t=1-r;return t*t*e}function Ct(r,e){return 2*(1-r)*r*e}function At(r,e){return r*r*e}function et(r,e,t,s){return bt(r,e)+Ct(r,t)+At(r,s)}function kt(r,e){const t=1-r;return t*t*t*e}function It(r,e){const t=1-r;return 3*t*t*r*e}function St(r,e){return 3*(1-r)*r*r*e}function Nt(r,e){return r*r*r*e}function st(r,e,t,s,n){return kt(r,e)+It(r,t)+St(r,s)+Nt(r,n)}class nt extends k{constructor(e=new l,t=new l,s=new l,n=new l){super(),this.start=e,this.startControl=t,this.endControl=s,this.end=n}getPoint(e,t=new l){const{start:s,startControl:n,endControl:o,end:i}=this;return t.set(st(e,s.x,n.x,o.x,i.x),st(e,s.y,n.y,o.y,i.y)),t}transformPoint(e){return e(this.start),e(this.startControl),e(this.endControl),e(this.end),this}getMinMax(e=l.MAX,t=l.MIN){const{start:s,startControl:n,endControl:o,end:i}=this;return e.x=Math.min(e.x,s.x,n.x,o.x,i.x),e.y=Math.min(e.y,s.y,n.y,o.y,i.y),t.x=Math.max(t.x,s.x,n.x,o.x,i.x),t.y=Math.max(t.y,s.y,n.y,o.y,i.y),{min:e,max:t}}getCommands(){const{start:e,startControl:t,endControl:s,end:n}=this;return[{type:"M",x:e.x,y:e.y},{type:"C",x1:t.x,y1:t.y,x2:s.x,y2:s.y,x:n.x,y:n.y}]}drawTo(e){const{startControl:t,endControl:s,end:n}=this;return e.bezierCurveTo(t.x,t.y,s.x,s.y,n.x,n.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.startControl.copy(e.startControl),this.endControl.copy(e.endControl),this.end.copy(e.end),this}}const $t=new C,rt=new C,it=new C,_=new l;class ot extends k{constructor(e=new l,t=1,s=1,n=0,o=0,i=Math.PI*2,c=!1){super(),this.center=e,this.radiusX=t,this.radiusY=s,this.rotation=n,this.startAngle=o,this.endAngle=i,this.clockwise=c}getPoint(e,t=new l){const s=Math.PI*2;let n=this.endAngle-this.startAngle;const o=Math.abs(n)<Number.EPSILON;for(;n<0;)n+=s;for(;n>s;)n-=s;n<Number.EPSILON&&(o?n=0:n=s),this.clockwise&&!o&&(n===s?n=-s:n=n-s);const i=this.startAngle+e*n;let c=this.center.x+this.radiusX*Math.cos(i),h=this.center.y+this.radiusY*Math.sin(i);if(this.rotation!==0){const a=Math.cos(this.rotation),u=Math.sin(this.rotation),y=c-this.center.x,f=h-this.center.y;c=y*a-f*u+this.center.x,h=y*u+f*a+this.center.y}return t.set(c,h)}getDivisions(e=12){return e*2}getCommands(){const{center:e,radiusX:t,radiusY:s,startAngle:n,endAngle:o,clockwise:i,rotation:c}=this,{x:h,y:a}=e,u=h+t*Math.cos(n)*Math.cos(c)-s*Math.sin(n)*Math.sin(c),y=a+t*Math.cos(n)*Math.sin(c)+s*Math.sin(n)*Math.cos(c),f=Math.abs(n-o),p=f>Math.PI?1:0,g=i?1:0,x=c*180/Math.PI;if(f>=2*Math.PI){const m=n+Math.PI,w=h+t*Math.cos(m)*Math.cos(c)-s*Math.sin(m)*Math.sin(c),E=a+t*Math.cos(m)*Math.sin(c)+s*Math.sin(m)*Math.cos(c);return[{type:"M",x:u,y},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:0,sweepFlag:g,x:w,y:E},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:0,sweepFlag:g,x:u,y}]}else{const m=h+t*Math.cos(o)*Math.cos(c)-s*Math.sin(o)*Math.sin(c),w=a+t*Math.cos(o)*Math.sin(c)+s*Math.sin(o)*Math.cos(c);return[{type:"M",x:u,y},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:p,sweepFlag:g,x:m,y:w}]}}drawTo(e){const{center:t,radiusX:s,radiusY:n,rotation:o,startAngle:i,endAngle:c,clockwise:h}=this;return e.ellipse(t.x,t.y,s,n,o,i,c,!h),this}transform(e){return _.set(this.center.x,this.center.y),_.applyMatrix3(e),this.center.x=_.x,this.center.y=_.y,Dt(e)?Et(this,e):Lt(this,e),this}transformPoint(e){return e(this.center),this}getMinMax(e=l.MAX,t=l.MIN){const{center:s,radiusX:n,radiusY:o,rotation:i}=this,{x:c,y:h}=s,a=Math.cos(i),u=Math.sin(i),y=Math.sqrt(n*n*a*a+o*o*u*u),f=Math.sqrt(n*n*u*u+o*o*a*a);return e.x=Math.min(e.x,c-y),e.y=Math.min(e.y,h-f),t.x=Math.max(t.x,c+y),t.y=Math.max(t.y,h+f),{min:e,max:t}}copy(e){return super.copy(e),this.center.x=e.center.x,this.center.y=e.center.y,this.radiusX=e.radiusX,this.radiusY=e.radiusY,this.startAngle=e.startAngle,this.endAngle=e.endAngle,this.clockwise=e.clockwise,this.rotation=e.rotation,this}}function Et(r,e){const t=r.radiusX,s=r.radiusY,n=Math.cos(r.rotation),o=Math.sin(r.rotation),i=new l(t*n,t*o),c=new l(-s*o,s*n),h=i.applyMatrix3(e),a=c.applyMatrix3(e),u=$t.set(h.x,a.x,0,h.y,a.y,0,0,0,1),y=rt.copy(u).invert(),g=it.copy(y).transpose().multiply(y).elements,x=zt(g[0],g[1],g[4]),m=Math.sqrt(x.rt1),w=Math.sqrt(x.rt2);if(r.radiusX=1/m,r.radiusY=1/w,r.rotation=Math.atan2(x.sn,x.cs),!((r.endAngle-r.startAngle)%(2*Math.PI)<Number.EPSILON)){const b=rt.set(m,0,0,0,w,0,0,0,1),S=it.set(x.cs,x.sn,0,-x.sn,x.cs,0,0,0,1),N=b.multiply(S).multiply(u),L=D=>{const{x:B,y:V}=new l(Math.cos(D),Math.sin(D)).applyMatrix3(N);return Math.atan2(V,B)};r.startAngle=L(r.startAngle),r.endAngle=L(r.endAngle),at(e)&&(r.clockwise=!r.clockwise)}}function Lt(r,e){const t=ht(e),s=ct(e);r.radiusX*=t,r.radiusY*=s;const n=t>Number.EPSILON?Math.atan2(e.elements[1],e.elements[0]):Math.atan2(-e.elements[3],e.elements[4]);r.rotation+=n,at(e)&&(r.startAngle*=-1,r.endAngle*=-1,r.clockwise=!r.clockwise)}function at(r){const e=r.elements;return e[0]*e[4]-e[1]*e[3]<0}function Dt(r){const e=r.elements,t=e[0]*e[3]+e[1]*e[4];if(t===0)return!1;const s=ht(r),n=ct(r);return Math.abs(t/(s*n))>Number.EPSILON}function ht(r){const e=r.elements;return Math.sqrt(e[0]*e[0]+e[1]*e[1])}function ct(r){const e=r.elements;return Math.sqrt(e[3]*e[3]+e[4]*e[4])}function zt(r,e,t){let s,n,o,i,c;const h=r+t,a=r-t,u=Math.sqrt(a*a+4*e*e);return h>0?(s=.5*(h+u),c=1/s,n=r*c*t-e*c*e):h<0?n=.5*(h-u):(s=.5*u,n=-.5*u),a>0?o=a+u:o=a-u,Math.abs(o)>2*Math.abs(e)?(c=-2*e/o,i=1/Math.sqrt(1+c*c),o=c*i):Math.abs(e)===0?(o=1,i=0):(c=-.5*o/e,o=1/Math.sqrt(1+c*c),i=c*o),a>0&&(c=o,o=-i,i=c),{rt1:s,rt2:n,cs:o,sn:i}}class X extends k{constructor(e=new l,t=new l){super(),this.start=e,this.end=t}getPoint(e,t=new l){return e===1?t.copy(this.end):t.copy(this.end).sub(this.start).multiplyScalar(e).add(this.start),t}getPointAt(e,t=new l){return this.getPoint(e,t)}getTangent(e,t=new l){return t.subVectors(this.end,this.start).normalize()}getTangentAt(e,t=new l){return this.getTangent(e,t)}getNormal(e,t=new l){const{x:s,y:n}=this.getPoint(e).sub(this.start);return t.set(n,-s).normalize()}transformPoint(e){return e(this.start),e(this.end),this}getDivisions(){return 1}getMinMax(e=l.MAX,t=l.MIN){const{start:s,end:n}=this;return e.x=Math.min(e.x,s.x,n.x),e.y=Math.min(e.y,s.y,n.y),t.x=Math.max(t.x,s.x,n.x),t.y=Math.max(t.y,s.y,n.y),{min:e,max:t}}getCommands(){const{start:e,end:t}=this;return[{type:"M",x:e.x,y:e.y},{type:"L",x:t.x,y:t.y}]}drawTo(e){const{end:t}=this;return e.lineTo(t.x,t.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.end.copy(e.end),this}}class qt extends k{constructor(t,s,n=0,o=1){super();T(this,"curveT",0);this.center=t,this.size=s,this.start=n,this.end=o,this.update()}update(){const{x:t,y:s}=this.center,n=new l(t+.5*this.size,s-.5*this.size),o=new l(t-.5*this.size,s-.5*this.size),i=new l(t,s+.5*this.size),c=new F(n,Math.SQRT1_2*this.size,-.25*Math.PI,.75*Math.PI),h=new F(o,Math.SQRT1_2*this.size,-.75*Math.PI,.25*Math.PI),a=new F(i,.5*Math.SQRT1_2*this.size,.75*Math.PI,1.25*Math.PI),u=new l(t,s+this.size),y=new l(t+this.size,s),f=new l().lerpVectors(y,u,.75),p=new l(t-this.size,s),g=new l().lerpVectors(p,u,.75),x=new X(y,f),m=new X(g,p);return this.curves=[c,x,a,m,h],this}getPoint(t){return this.getCurve(t).getPoint(this.curveT)}getPointAt(t){return this.getPoint(t)}getCurve(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=9*Math.PI/8+1.5;let n;const o=.5*Math.PI;return s<o?(n=0,this.curveT=s/o):s<o+.75?(n=1,this.curveT=(s-o)/.75):s<5*Math.PI/8+.75?(n=2,this.curveT=(s-o-.75)/(Math.PI/8)):s<5*Math.PI/8+1.5?(n=3,this.curveT=(s-5*Math.PI/8-.75)/.75):(n=4,this.curveT=(s-5*Math.PI/8-1.5)/o),this.curves[n]}getTangent(t){return this.getCurve(t).getTangent(this.curveT)}getNormal(t){return this.getCurve(t).getNormal(this.curveT)}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class Xt extends k{constructor(t,s=0,n=0,o=0,i=1){super();T(this,"curves",[]);T(this,"curveT",0);T(this,"points",[]);this.center=t,this.radius=s,this.number=n,this.start=o,this.end=i,this.update()}update(){for(let t=0;t<this.number;t++){let s=t*2*Math.PI/this.number;s-=.5*Math.PI,this.points.push(new l(this.radius*Math.cos(s),this.radius*Math.sin(s)).add(this.center))}for(let t=0;t<this.number;t++)this.curves.push(new X(this.points[t],this.points[(t+1)%this.number]));return this}getCurve(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1);const n=s*this.number,o=Math.floor(n);return this.curveT=n-o,this.curves[o]}getPoint(t,s){return this.getCurve(t).getPoint(this.curveT,s)}getPointAt(t,s){return this.getPoint(t,s)}getTangent(t,s){return this.getCurve(t).getTangent(this.curveT,s)}getNormal(t,s){return this.getCurve(t).getNormal(this.curveT,s)}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class ut extends k{constructor(e=new l,t=new l,s=new l){super(),this.start=e,this.control=t,this.end=s}getPoint(e,t=new l){const{start:s,control:n,end:o}=this;return t.set(et(e,s.x,n.x,o.x),et(e,s.y,n.y,o.y)),t}transformPoint(e){return e(this.start),e(this.control),e(this.end),this}getMinMax(e=l.MAX,t=l.MIN){const{start:s,control:n,end:o}=this,i=.5*(s.x+n.x),c=.5*(s.y+n.y),h=.5*(s.x+o.x),a=.5*(s.y+o.y);return e.x=Math.min(e.x,s.x,o.x,i,h),e.y=Math.min(e.y,s.y,o.y,c,a),t.x=Math.max(t.x,s.x,o.x,i,h),t.y=Math.max(t.y,s.y,o.y,c,a),{min:e,max:t}}getCommands(){const{start:e,control:t,end:s}=this;return[{type:"M",x:e.x,y:e.y},{type:"Q",x1:t.x,y1:t.y,x:s.x,y:s.y}]}drawTo(e){const{control:t,end:s}=this;return e.quadraticCurveTo(t.x,t.y,s.x,s.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.control.copy(e.control),this.end.copy(e.end),this}}class lt extends k{constructor(t,s,n=1,o=0,i=1){super();T(this,"curves",[]);T(this,"curveT",0);this.center=t,this.rx=s,this.aspectRatio=n,this.start=o,this.end=i,this.update()}get x(){return this.center.x-this.rx}get y(){return this.center.y-this.rx/this.aspectRatio}get width(){return this.rx*2}get height(){return this.rx/this.aspectRatio*2}update(){const{x:t,y:s}=this.center,n=this.rx,o=this.rx/this.aspectRatio,i=[new l(t-n,s-o),new l(t+n,s-o),new l(t+n,s+o),new l(t-n,s+o)];for(let c=0;c<4;c++)this.curves.push(new X(i[c].clone(),i[(c+1)%4].clone()));return this}getCurve(t){let s=(t*(this.end-this.start)+this.start)%1;s<0&&(s+=1),s*=(1+this.aspectRatio)*2;let n;return s<this.aspectRatio?(n=0,this.curveT=s/this.aspectRatio):s<this.aspectRatio+1?(n=1,this.curveT=(s-this.aspectRatio)/1):s<2*this.aspectRatio+1?(n=2,this.curveT=(s-this.aspectRatio-1)/this.aspectRatio):(n=3,this.curveT=(s-2*this.aspectRatio-1)/1),this.curves[n]}getPoint(t,s){return this.getCurve(t).getPoint(this.curveT,s)}getPointAt(t,s){return this.getPoint(t,s)}getTangent(t,s){return this.getCurve(t).getTangent(this.curveT,s)}getNormal(t,s){return this.getCurve(t).getNormal(this.curveT,s)}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class yt extends k{constructor(e=[]){super(),this.points=e}getDivisions(e=12){return e*this.points.length}getPoint(e,t=new l){const{points:s}=this,n=(s.length-1)*e,o=Math.floor(n),i=n-o,c=s[o===0?o:o-1],h=s[o],a=s[o>s.length-2?s.length-1:o+1],u=s[o>s.length-3?s.length-1:o+2];return t.set(tt(i,c.x,h.x,a.x,u.x),tt(i,c.y,h.y,a.y,u.y)),t}transformPoint(e){return this.points.forEach(t=>e(t)),this}copy(e){super.copy(e),this.points=[];for(let t=0,s=e.points.length;t<s;t++)this.points.push(e.points[t].clone());return this}}class R extends k{constructor(t){super();T(this,"curves",[]);T(this,"startPoint");T(this,"currentPoint",new l);T(this,"autoClose",!1);T(this,"_cacheLengths",[]);t&&this.addPoints(t)}addCurve(t){return this.curves.push(t),this}addPoints(t){this.moveTo(t[0].x,t[0].y);for(let s=1,n=t.length;s<n;s++){const{x:o,y:i}=t[s];this.lineTo(o,i)}return this}addCommands(t){return W(t,this),this}addData(t){return this.addCommands(G(t)),this}getPoint(t,s=new l){const n=t*this.getLength(),o=this.getCurveLengths();let i=0;for(;i<o.length;){if(o[i]>=n){const c=o[i]-n,h=this.curves[i],a=h.getLength();return h.getPointAt(a===0?0:1-c/a,s)}i++}return s}getLength(){const t=this.getCurveLengths();return t[t.length-1]}updateArcLengths(){super.updateArcLengths(),this._cacheLengths=[],this.getCurveLengths()}getCurveLengths(){if(this._cacheLengths.length===this.curves.length)return this._cacheLengths;const t=[];let s=0;for(let n=0,o=this.curves.length;n<o;n++)s+=this.curves[n].getLength(),t.push(s);return this._cacheLengths=t,t}getSpacedPoints(t=40){const s=[];for(let n=0;n<=t;n++)s.push(this.getPoint(n/t));return this.autoClose&&s.push(s[0]),s}getPoints(t=12){const s=[];let n;for(let o=0,i=this.curves;o<i.length;o++){const c=i[o],h=c.getPoints(c.getDivisions(t));for(let a=0;a<h.length;a++){const u=h[a];n!=null&&n.equals(u)||(s.push(u),n=u)}}return this.autoClose&&s.length>1&&!s[s.length-1].equals(s[0])&&s.push(s[0]),s}_setCurrentPoint(t){return this.currentPoint.copy(t),this.startPoint||(this.startPoint=this.currentPoint.clone()),this}closePath(){const t=this.startPoint;if(t){const s=this.currentPoint;t.equals(s)||(this.curves.push(new X(s,t)),this.currentPoint.copy(t)),this.startPoint=void 0}return this}moveTo(t,s){return this.currentPoint.set(t,s),this.startPoint=this.currentPoint.clone(),this}lineTo(t,s){return this.curves.push(new X(this.currentPoint.clone(),new l(t,s))),this._setCurrentPoint({x:t,y:s}),this}bezierCurveTo(t,s,n,o,i,c){return this.curves.push(new nt(this.currentPoint.clone(),new l(t,s),new l(n,o),new l(i,c))),this._setCurrentPoint({x:i,y:c}),this}quadraticCurveTo(t,s,n,o){return this.curves.push(new ut(this.currentPoint.clone(),new l(t,s),new l(n,o))),this._setCurrentPoint({x:n,y:o}),this}arc(t,s,n,o,i,c){return this.ellipse(t,s,n,n,0,o,i,c),this}relativeArc(t,s,n,o,i,c){const h=this.currentPoint;return this.arc(t+h.x,s+h.y,n,o,i,c),this}arcTo(t,s,n,o,i){return console.warn("Method arcTo not supported yet"),this}ellipse(t,s,n,o,i,c,h,a=!0){const u=new ot(new l(t,s),n,o,i,c,h,!a);if(this.curves.length>0){const y=u.getPoint(0);y.equals(this.currentPoint)||this.lineTo(y.x,y.y)}return this.curves.push(u),this._setCurrentPoint(u.getPoint(1)),this}relativeEllipse(t,s,n,o,i,c,h,a){const u=this.currentPoint;return this.ellipse(t+u.x,s+u.y,n,o,i,c,h,a),this}rect(t,s,n,o){return this.curves.push(new lt(new l(t+n/2,s+o/2),n/2,n/o)),this._setCurrentPoint({x:t,y:s}),this}splineThru(t){return this.curves.push(new yt([this.currentPoint.clone()].concat(t))),this._setCurrentPoint(t[t.length-1]),this}transformPoint(t){return this.curves.forEach(s=>s.transformPoint(t)),this}getMinMax(t=l.MAX,s=l.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getBoundingBox(){const{min:t,max:s}=this.getMinMax();return new q(t.x,t.y,s.x-t.x,s.y-t.y)}getCommands(){return this.curves.flatMap(t=>t.getCommands())}drawTo(t){var n;const s=(n=this.curves[0])==null?void 0:n.getPoint(0);return s&&t.moveTo(s.x,s.y),this.curves.forEach(o=>o.drawTo(t)),this.autoClose&&t.closePath(),this}copy(t){super.copy(t),this.curves=[];for(let s=0,n=t.curves.length;s<n;s++)this.curves.push(t.curves[s].clone());return this.autoClose=t.autoClose,this.currentPoint.copy(t.currentPoint),this}}function Ot(r){return r.replace(/[^a-z0-9]/gi,"-").replace(/\B([A-Z])/g,"-$1").toLowerCase()}class I{constructor(e){T(this,"currentPath",new R);T(this,"paths",[this.currentPath]);T(this,"style",{});e&&(e instanceof I?this.addPath(e):Array.isArray(e)?this.addCommands(e):this.addData(e))}get startPoint(){return this.currentPath.startPoint}get currentPoint(){return this.currentPath.currentPoint}get strokeWidth(){return this.style.strokeWidth??((this.style.stroke??"none")==="none"?0:1)}addPath(e){return e instanceof I?this.paths.push(...e.paths.map(t=>t.clone())):this.paths.push(e),this}closePath(){const e=this.startPoint;return e&&(this.currentPath.closePath(),this.currentPath.curves.length>0&&(this.currentPath=new R().moveTo(e.x,e.y),this.paths.push(this.currentPath))),this}moveTo(e,t){const{currentPoint:s,curves:n}=this.currentPath;return s.equals({x:e,y:t})||(n.length?(this.currentPath=new R().moveTo(e,t),this.paths.push(this.currentPath)):this.currentPath.moveTo(e,t)),this}lineTo(e,t){return this.currentPath.lineTo(e,t),this}bezierCurveTo(e,t,s,n,o,i){return this.currentPath.bezierCurveTo(e,t,s,n,o,i),this}quadraticCurveTo(e,t,s,n){return this.currentPath.quadraticCurveTo(e,t,s,n),this}arc(e,t,s,n,o,i){return this.currentPath.arc(e,t,s,n,o,i),this}arcTo(e,t,s,n,o){return this.currentPath.arcTo(e,t,s,n,o),this}ellipse(e,t,s,n,o,i,c,h){return this.currentPath.ellipse(e,t,s,n,o,i,c,h),this}rect(e,t,s,n){return this.currentPath.rect(e,t,s,n),this}addCommands(e){return W(e,this),this}addData(e){return this.addCommands(G(e)),this}splineThru(e){return this.currentPath.splineThru(e),this}forEachCurve(e){return this.paths.forEach(t=>t.curves.forEach(s=>e(s))),this}transformPoint(e){return this.forEachCurve(t=>t.transformPoint(e)),this}transform(e){return this.forEachCurve(t=>t.transform(e)),this}getMinMax(e=l.MAX,t=l.MIN,s=!0){if(this.forEachCurve(n=>n.getMinMax(e,t)),s){const n=this.strokeWidth/2;e.x-=n,e.y-=n,t.x+=n,t.y+=n}return{min:e,max:t}}getBoundingBox(e=!0){const{min:t,max:s}=this.getMinMax(void 0,void 0,e);return new q(t.x,t.y,s.x-t.x,s.y-t.y)}getCommands(){return this.paths.flatMap(e=>e.getCommands())}getData(){return this.paths.map(e=>e.getData()).join(" ")}getSvgPathXml(){const e={...this.style,fill:this.style.fill??"#000",stroke:this.style.stroke??"none"},t={};for(const n in e)e[n]!==void 0&&(t[Ot(n)]=e[n]);Object.assign(t,{"stroke-width":`${this.strokeWidth}px`});let s="";for(const n in t)t[n]!==void 0&&(s+=`${n}:${t[n]};`);return`<path d="${this.getData()}" style="${s}"></path>`}getSvgXml(){const{x:e,y:t,width:s,height:n}=this.getBoundingBox(),o=this.getSvgPathXml();return`<svg viewBox="${e} ${t} ${s} ${n}" width="${s}px" height="${n}px" xmlns="http://www.w3.org/2000/svg">${o}</svg>`}getSvgDataUri(){return`data:image/svg+xml;base64,${btoa(this.getSvgXml())}`}drawTo(e,t=!0){const{fill:s="#000",stroke:n="none"}=this.style;t&&z(e,this.style),this.paths.forEach(o=>{o.drawTo(e)}),s!=="none"&&e.fill(),n!=="none"&&e.stroke()}copy(e){return this.currentPath=e.currentPath.clone(),this.paths=e.paths.map(t=>t.clone()),this.style={...e.style},this}toSvg(){return new DOMParser().parseFromString(this.getSvgXml(),"image/svg+xml").documentElement}toCanvas(e=2){const{left:t,top:s,width:n,height:o}=this.getBoundingBox(),i=document.createElement("canvas");i.width=n*e,i.height=o*e,i.style.width=`${n}px`,i.style.height=`${o}px`;const c=i.getContext("2d");return c&&(c.scale(e,e),c.translate(-t,-s),this.drawTo(c)),i}clone(){return new this.constructor().copy(this)}}const Q="px",gt=90,ft=["mm","cm","in","pt","pc","px"],H={mm:{mm:1,cm:.1,in:1/25.4,pt:72/25.4,pc:6/25.4,px:-1},cm:{mm:10,cm:1,in:1/2.54,pt:72/2.54,pc:6/2.54,px:-1},in:{mm:25.4,cm:2.54,in:1,pt:72,pc:6,px:-1},pt:{mm:25.4/72,cm:2.54/72,in:1/72,pt:1,pc:6/72,px:-1},pc:{mm:25.4/6,cm:2.54/6,in:1/6,pt:72/6,pc:1,px:-1},px:{px:1}};function M(r){let e="px";if(typeof r=="string"||r instanceof String)for(let s=0,n=ft.length;s<n;s++){const o=ft[s];if(r.endsWith(o)){e=o,r=r.substring(0,r.length-o.length);break}}let t;return e==="px"&&Q!=="px"?t=H.in[Q]/gt:(t=H[e][Q],t<0&&(t=H[e].in*gt)),t*Number.parseFloat(r)}const Rt=new C,Y=new C,pt=new C,dt=new C;function Ft(r,e,t){if(!(r.hasAttribute("transform")||r.nodeName==="use"&&(r.hasAttribute("x")||r.hasAttribute("y"))))return null;const s=_t(r);return t.length>0&&s.premultiply(t[t.length-1]),e.copy(s),t.push(s),s}function _t(r){const e=new C,t=Rt;if(r.nodeName==="use"&&(r.hasAttribute("x")||r.hasAttribute("y"))&&e.translate(M(r.getAttribute("x")),M(r.getAttribute("y"))),r.hasAttribute("transform")){const s=r.getAttribute("transform").split(")");for(let n=s.length-1;n>=0;n--){const o=s[n].trim();if(o==="")continue;const i=o.indexOf("("),c=o.length;if(i>0&&i<c){const h=o.slice(0,i),a=A(o.slice(i+1));switch(t.identity(),h){case"translate":if(a.length>=1){const u=a[0];let y=0;a.length>=2&&(y=a[1]),t.translate(u,y)}break;case"rotate":if(a.length>=1){let u=0,y=0,f=0;u=a[0]*Math.PI/180,a.length>=3&&(y=a[1],f=a[2]),Y.makeTranslation(-y,-f),pt.makeRotation(u),dt.multiplyMatrices(pt,Y),Y.makeTranslation(y,f),t.multiplyMatrices(Y,dt)}break;case"scale":a.length>=1&&t.scale(a[0],a[1]??a[0]);break;case"skewX":a.length===1&&t.set(1,Math.tan(a[0]*Math.PI/180),0,0,1,0,0,0,1);break;case"skewY":a.length===1&&t.set(1,0,0,Math.tan(a[0]*Math.PI/180),1,0,0,0,1);break;case"matrix":a.length===6&&t.set(a[0],a[2],a[4],a[1],a[3],a[5],0,0,1);break}}e.premultiply(t)}}return e}function Yt(r){return new I().addPath(new R().arc(M(r.getAttribute("cx")||0),M(r.getAttribute("cy")||0),M(r.getAttribute("r")||0),0,Math.PI*2))}function Bt(r,e){if(!(!r.sheet||!r.sheet.cssRules||!r.sheet.cssRules.length))for(let t=0;t<r.sheet.cssRules.length;t++){const s=r.sheet.cssRules[t];if(s.type!==1)continue;const n=s.selectorText.split(/,/g).filter(Boolean).map(o=>o.trim());for(let o=0;o<n.length;o++){const i=Object.fromEntries(Object.entries(s.style).filter(([,c])=>c!==""));e[n[o]]=Object.assign(e[n[o]]||{},i)}}}function Ut(r){return new I().addPath(new R().ellipse(M(r.getAttribute("cx")||0),M(r.getAttribute("cy")||0),M(r.getAttribute("rx")||0),M(r.getAttribute("ry")||0),0,0,Math.PI*2))}function Wt(r){return new I().moveTo(M(r.getAttribute("x1")||0),M(r.getAttribute("y1")||0)).lineTo(M(r.getAttribute("x2")||0),M(r.getAttribute("y2")||0))}function Gt(r){const e=new I,t=r.getAttribute("d");return!t||t==="none"?null:(e.addData(t),e)}const Qt=/([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;function Ht(r){var s;const e=new I;let t=0;return(s=r.getAttribute("points"))==null||s.replace(Qt,(n,o,i)=>{const c=M(o),h=M(i);return t===0?e.moveTo(c,h):e.lineTo(c,h),t++,n}),e.currentPath.autoClose=!0,e}const jt=/([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;function Vt(r){var s;const e=new I;let t=0;return(s=r.getAttribute("points"))==null||s.replace(jt,(n,o,i)=>{const c=M(o),h=M(i);return t===0?e.moveTo(c,h):e.lineTo(c,h),t++,n}),e.currentPath.autoClose=!1,e}function Zt(r){const e=M(r.getAttribute("x")||0),t=M(r.getAttribute("y")||0),s=M(r.getAttribute("rx")||r.getAttribute("ry")||0),n=M(r.getAttribute("ry")||r.getAttribute("rx")||0),o=M(r.getAttribute("width")),i=M(r.getAttribute("height")),c=1-.551915024494,h=new I;return h.moveTo(e+s,t),h.lineTo(e+o-s,t),(s!==0||n!==0)&&h.bezierCurveTo(e+o-s*c,t,e+o,t+n*c,e+o,t+n),h.lineTo(e+o,t+i-n),(s!==0||n!==0)&&h.bezierCurveTo(e+o,t+i-n*c,e+o-s*c,t+i,e+o-s,t+i),h.lineTo(e+s,t+i),(s!==0||n!==0)&&h.bezierCurveTo(e+s*c,t+i,e,t+i-n*c,e,t+i-n),h.lineTo(e,t+n),(s!==0||n!==0)&&h.bezierCurveTo(e,t+n*c,e+s*c,t,e+s,t),h}function $(r,e,t){e=Object.assign({},e);let s={};if(r.hasAttribute("class")){const h=r.getAttribute("class").split(/\s/).filter(Boolean).map(a=>a.trim());for(let a=0;a<h.length;a++)s=Object.assign(s,t[`.${h[a]}`])}r.hasAttribute("id")&&(s=Object.assign(s,t[`#${r.getAttribute("id")}`]));function n(h,a,u){u===void 0&&(u=function(f){return f.startsWith("url")&&console.warn("url access in attributes is not implemented."),f}),r.hasAttribute(h)&&(e[a]=u(r.getAttribute(h))),s[h]&&(e[a]=u(s[h])),r.style&&r.style[h]!==""&&(e[a]=u(r.style[h]))}function o(h){return Math.max(0,Math.min(1,M(h)))}function i(h){return Math.max(0,M(h))}function c(h){return h.split(" ").filter(a=>a!=="").map(a=>M(a))}return n("fill","fill"),n("fill-opacity","fillOpacity",o),n("fill-rule","fillRule"),n("opacity","opacity",o),n("stroke","stroke"),n("stroke-opacity","strokeOpacity",o),n("stroke-width","strokeWidth",i),n("stroke-linecap","strokeLinecap"),n("stroke-linejoin","strokeLinejoin"),n("stroke-miterlimit","strokeMiterlimit",i),n("stroke-dasharray","strokeDasharray",c),n("stroke-dashoffset","strokeDashoffset",M),n("visibility","visibility"),e}function j(r,e,t=[]){var u;if(r.nodeType!==1)return t;let s=!1,n=null;const o={};switch(r.nodeName){case"svg":e=$(r,e,o);break;case"style":Bt(r,o);break;case"g":e=$(r,e,o);break;case"path":e=$(r,e,o),r.hasAttribute("d")&&(n=Gt(r));break;case"rect":e=$(r,e,o),n=Zt(r);break;case"polygon":e=$(r,e,o),n=Ht(r);break;case"polyline":e=$(r,e,o),n=Vt(r);break;case"circle":e=$(r,e,o),n=Yt(r);break;case"ellipse":e=$(r,e,o),n=Ut(r);break;case"line":e=$(r,e,o),n=Wt(r);break;case"defs":s=!0;break;case"use":{e=$(r,e,o);const f=(r.getAttributeNS("http://www.w3.org/1999/xlink","href")||"").substring(1),p=(u=r.viewportElement)==null?void 0:u.getElementById(f);p?j(p,e,t):console.warn(`'use node' references non-existent node id: ${f}`);break}default:console.warn(r);break}const i=new C,c=[],h=Ft(r,i,c);n&&(n.transform(i),t.push(n),n.style=e);const a=r.childNodes;for(let y=0,f=a.length;y<f;y++){const p=a[y];s&&p.nodeName!=="style"&&p.nodeName!=="defs"||j(p,e,t)}return h&&(c.pop(),c.length>0?i.copy(c[c.length-1]):i.identity()),t}const xt="data:image/svg+xml;",mt=`${xt}base64,`,Mt=`${xt}charset=utf8,`;function Pt(r){if(typeof r=="string"){let e;return r.startsWith(mt)?(r=r.substring(mt.length,r.length),e=atob(r)):r.startsWith(Mt)?(r=r.substring(Mt.length,r.length),e=decodeURIComponent(r)):e=r,new DOMParser().parseFromString(e,"image/svg+xml").documentElement}else return r}function Jt(r){return j(Pt(r),{})}d.BoundingBox=q,d.CircleCurve=F,d.CubicBezierCurve=nt,d.Curve=k,d.CurvePath=R,d.EllipseCurve=ot,d.HeartCurve=qt,d.LineCurve=X,d.Matrix3=C,d.Path2D=I,d.PloygonCurve=Xt,d.QuadraticBezierCurve=ut,d.RectangularCurve=lt,d.SplineCurve=yt,d.Vector2=l,d.addPathCommandsToPath2D=W,d.parseArcCommand=J,d.parsePathDataArgs=A,d.parseSvg=Jt,d.parseSvgToDom=Pt,d.pathCommandsToPathData=K,d.pathDataToPathCommands=G,d.setCanvasContext=z,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/dist/index.mjs
CHANGED
|
@@ -5,7 +5,7 @@ const lineJoinMap = {
|
|
|
5
5
|
"miter-clip": "miter",
|
|
6
6
|
"round": "round"
|
|
7
7
|
};
|
|
8
|
-
function
|
|
8
|
+
function setCanvasContext(ctx, style) {
|
|
9
9
|
const {
|
|
10
10
|
fill = "#000",
|
|
11
11
|
stroke = "none",
|
|
@@ -14,16 +14,24 @@ function setCanvasContextByPath(ctx, path) {
|
|
|
14
14
|
strokeLinejoin = "miter",
|
|
15
15
|
strokeMiterlimit = 0,
|
|
16
16
|
strokeDasharray,
|
|
17
|
-
strokeDashoffset = 0
|
|
18
|
-
|
|
17
|
+
strokeDashoffset = 0,
|
|
18
|
+
shadowOffsetX = 0,
|
|
19
|
+
shadowOffsetY = 0,
|
|
20
|
+
shadowBlur = 0,
|
|
21
|
+
shadowColor = "rgba(0, 0, 0, 0)"
|
|
22
|
+
} = style;
|
|
19
23
|
ctx.fillStyle = fill;
|
|
20
24
|
ctx.strokeStyle = stroke;
|
|
21
25
|
ctx.lineWidth = strokeWidth;
|
|
22
26
|
ctx.lineCap = strokeLinecap;
|
|
23
27
|
ctx.lineJoin = lineJoinMap[strokeLinejoin];
|
|
24
28
|
ctx.miterLimit = strokeMiterlimit;
|
|
25
|
-
ctx.lineDashOffset = strokeDashoffset;
|
|
26
29
|
strokeDasharray && ctx.setLineDash(strokeDasharray);
|
|
30
|
+
ctx.lineDashOffset = strokeDashoffset;
|
|
31
|
+
ctx.shadowOffsetX = shadowOffsetX;
|
|
32
|
+
ctx.shadowOffsetY = shadowOffsetY;
|
|
33
|
+
ctx.shadowBlur = shadowBlur;
|
|
34
|
+
ctx.shadowColor = shadowColor;
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
class Vector2 {
|
|
@@ -2223,21 +2231,20 @@ class Path2D {
|
|
|
2223
2231
|
this.forEachCurve((curve) => curve.transform(matrix));
|
|
2224
2232
|
return this;
|
|
2225
2233
|
}
|
|
2226
|
-
getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
|
|
2234
|
+
getMinMax(min = Vector2.MAX, max = Vector2.MIN, withStyle = true) {
|
|
2227
2235
|
this.forEachCurve((curve) => curve.getMinMax(min, max));
|
|
2236
|
+
if (withStyle) {
|
|
2237
|
+
const strokeWidth = this.strokeWidth / 2;
|
|
2238
|
+
min.x -= strokeWidth;
|
|
2239
|
+
min.y -= strokeWidth;
|
|
2240
|
+
max.x += strokeWidth;
|
|
2241
|
+
max.y += strokeWidth;
|
|
2242
|
+
}
|
|
2228
2243
|
return { min, max };
|
|
2229
2244
|
}
|
|
2230
|
-
getBoundingBox(
|
|
2231
|
-
const { min, max } = this.getMinMax();
|
|
2232
|
-
|
|
2233
|
-
if (withStrokeWidth) {
|
|
2234
|
-
const strokeWidth = this.strokeWidth;
|
|
2235
|
-
bbox.left -= strokeWidth / 2;
|
|
2236
|
-
bbox.top -= strokeWidth / 2;
|
|
2237
|
-
bbox.width += strokeWidth;
|
|
2238
|
-
bbox.height += strokeWidth;
|
|
2239
|
-
}
|
|
2240
|
-
return bbox;
|
|
2245
|
+
getBoundingBox(withStyle = true) {
|
|
2246
|
+
const { min, max } = this.getMinMax(void 0, void 0, withStyle);
|
|
2247
|
+
return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
|
|
2241
2248
|
}
|
|
2242
2249
|
getCommands() {
|
|
2243
2250
|
return this.paths.flatMap((path) => path.getCommands());
|
|
@@ -2276,12 +2283,11 @@ class Path2D {
|
|
|
2276
2283
|
getSvgDataUri() {
|
|
2277
2284
|
return `data:image/svg+xml;base64,${btoa(this.getSvgXml())}`;
|
|
2278
2285
|
}
|
|
2279
|
-
drawTo(ctx) {
|
|
2280
|
-
const {
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
}
|
|
2284
|
-
setCanvasContextByPath(ctx, this);
|
|
2286
|
+
drawTo(ctx, withStyle = true) {
|
|
2287
|
+
const { fill = "#000", stroke = "none" } = this.style;
|
|
2288
|
+
if (withStyle) {
|
|
2289
|
+
setCanvasContext(ctx, this.style);
|
|
2290
|
+
}
|
|
2285
2291
|
this.paths.forEach((path) => {
|
|
2286
2292
|
path.drawTo(ctx);
|
|
2287
2293
|
});
|
|
@@ -2841,4 +2847,4 @@ function parseSvg(svg) {
|
|
|
2841
2847
|
return parseNode(parseSvgToDom(svg), {});
|
|
2842
2848
|
}
|
|
2843
2849
|
|
|
2844
|
-
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands,
|
|
2850
|
+
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "modern-path2d",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.14",
|
|
5
5
|
"packageManager": "pnpm@9.9.0",
|
|
6
6
|
"description": "A modern Path2D library, fully compatible with Web Path2D, with additional support for path animation, path deformation, path playback, etc.",
|
|
7
7
|
"author": "wxm",
|