modern-path2d 0.2.2 → 0.2.4
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 +137 -65
- package/dist/index.d.cts +7 -1
- package/dist/index.d.mts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +134 -66
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -795,46 +795,77 @@ function parsePathDataArgs(input, flags, stride = 0) {
|
|
|
795
795
|
return result;
|
|
796
796
|
}
|
|
797
797
|
|
|
798
|
-
function commandToData(cmd) {
|
|
799
|
-
switch (cmd.type) {
|
|
800
|
-
case "m":
|
|
801
|
-
case "M":
|
|
802
|
-
return `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
803
|
-
case "h":
|
|
804
|
-
case "H":
|
|
805
|
-
return `${cmd.type} ${cmd.x}`;
|
|
806
|
-
case "v":
|
|
807
|
-
case "V":
|
|
808
|
-
return `${cmd.type} ${cmd.y}`;
|
|
809
|
-
case "l":
|
|
810
|
-
case "L":
|
|
811
|
-
return `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
812
|
-
case "c":
|
|
813
|
-
case "C":
|
|
814
|
-
return `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
815
|
-
case "s":
|
|
816
|
-
case "S":
|
|
817
|
-
return `${cmd.type} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
818
|
-
case "q":
|
|
819
|
-
case "Q":
|
|
820
|
-
return `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
|
|
821
|
-
case "t":
|
|
822
|
-
case "T":
|
|
823
|
-
return `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
824
|
-
case "a":
|
|
825
|
-
case "A":
|
|
826
|
-
return `${cmd.type} ${cmd.rx} ${cmd.ry} ${cmd.angle} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
|
|
827
|
-
case "z":
|
|
828
|
-
case "Z":
|
|
829
|
-
return cmd.type;
|
|
830
|
-
default:
|
|
831
|
-
return "";
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
798
|
function pathCommandsToPathData(commands) {
|
|
799
|
+
const first = { x: 0, y: 0 };
|
|
800
|
+
const prev = { x: 0, y: 0 };
|
|
835
801
|
let data = "";
|
|
836
802
|
for (let i = 0, len = commands.length; i < len; i++) {
|
|
837
|
-
|
|
803
|
+
const cmd = commands[i];
|
|
804
|
+
switch (cmd.type) {
|
|
805
|
+
case "m":
|
|
806
|
+
case "M":
|
|
807
|
+
if (cmd.x === prev.x && cmd.y === prev.y) {
|
|
808
|
+
continue;
|
|
809
|
+
}
|
|
810
|
+
data += `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
811
|
+
prev.x = cmd.x;
|
|
812
|
+
prev.y = cmd.y;
|
|
813
|
+
first.x = cmd.x;
|
|
814
|
+
first.y = cmd.y;
|
|
815
|
+
break;
|
|
816
|
+
case "h":
|
|
817
|
+
case "H":
|
|
818
|
+
data += `${cmd.type} ${cmd.x}`;
|
|
819
|
+
prev.x = cmd.x;
|
|
820
|
+
break;
|
|
821
|
+
case "v":
|
|
822
|
+
case "V":
|
|
823
|
+
data += `${cmd.type} ${cmd.y}`;
|
|
824
|
+
prev.y = cmd.y;
|
|
825
|
+
break;
|
|
826
|
+
case "l":
|
|
827
|
+
case "L":
|
|
828
|
+
data += `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
829
|
+
prev.x = cmd.x;
|
|
830
|
+
prev.y = cmd.y;
|
|
831
|
+
break;
|
|
832
|
+
case "c":
|
|
833
|
+
case "C":
|
|
834
|
+
data += `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
835
|
+
prev.x = cmd.x;
|
|
836
|
+
prev.y = cmd.y;
|
|
837
|
+
break;
|
|
838
|
+
case "s":
|
|
839
|
+
case "S":
|
|
840
|
+
data += `${cmd.type} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
841
|
+
prev.x = cmd.x;
|
|
842
|
+
prev.y = cmd.y;
|
|
843
|
+
break;
|
|
844
|
+
case "q":
|
|
845
|
+
case "Q":
|
|
846
|
+
data += `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
|
|
847
|
+
prev.x = cmd.x;
|
|
848
|
+
prev.y = cmd.y;
|
|
849
|
+
break;
|
|
850
|
+
case "t":
|
|
851
|
+
case "T":
|
|
852
|
+
data += `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
853
|
+
prev.x = cmd.x;
|
|
854
|
+
prev.y = cmd.y;
|
|
855
|
+
break;
|
|
856
|
+
case "a":
|
|
857
|
+
case "A":
|
|
858
|
+
data += `${cmd.type} ${cmd.rx} ${cmd.ry} ${cmd.angle} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
|
|
859
|
+
prev.x = cmd.x;
|
|
860
|
+
prev.y = cmd.y;
|
|
861
|
+
break;
|
|
862
|
+
case "z":
|
|
863
|
+
case "Z":
|
|
864
|
+
data += cmd.type;
|
|
865
|
+
prev.x = first.x;
|
|
866
|
+
prev.y = first.y;
|
|
867
|
+
break;
|
|
868
|
+
}
|
|
838
869
|
}
|
|
839
870
|
return data;
|
|
840
871
|
}
|
|
@@ -2818,13 +2849,15 @@ function parseCSSStylesheet(node, stylesheets) {
|
|
|
2818
2849
|
if (stylesheet.type !== 1)
|
|
2819
2850
|
continue;
|
|
2820
2851
|
const selectorList = stylesheet.selectorText.split(/,/g).filter(Boolean).map((i2) => i2.trim());
|
|
2852
|
+
const definitions = {};
|
|
2853
|
+
for (let len = stylesheet.style.length, i2 = 0; i2 < len; i2++) {
|
|
2854
|
+
const name = stylesheet.style.item(i2);
|
|
2855
|
+
definitions[name] = stylesheet.style.getPropertyValue(name);
|
|
2856
|
+
}
|
|
2821
2857
|
for (let j = 0; j < selectorList.length; j++) {
|
|
2822
|
-
const definitions = Object.fromEntries(
|
|
2823
|
-
Object.entries(stylesheet.style).filter(([, v]) => v !== "")
|
|
2824
|
-
);
|
|
2825
2858
|
stylesheets[selectorList[j]] = Object.assign(
|
|
2826
2859
|
stylesheets[selectorList[j]] || {},
|
|
2827
|
-
definitions
|
|
2860
|
+
{ ...definitions }
|
|
2828
2861
|
);
|
|
2829
2862
|
}
|
|
2830
2863
|
}
|
|
@@ -2963,20 +2996,22 @@ function parseStyle(node, style, stylesheets) {
|
|
|
2963
2996
|
if (node.hasAttribute("id")) {
|
|
2964
2997
|
stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
|
|
2965
2998
|
}
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
}
|
|
2999
|
+
for (let len = node.style.length, i = 0; i < len; i++) {
|
|
3000
|
+
const name = node.style.item(i);
|
|
3001
|
+
const value = node.style.getPropertyValue(name);
|
|
3002
|
+
style[name] = value;
|
|
3003
|
+
stylesheetStyles[name] = value;
|
|
3004
|
+
}
|
|
3005
|
+
function addStyle(svgName, jsName, adjustFunction = copy) {
|
|
2974
3006
|
if (node.hasAttribute(svgName))
|
|
2975
3007
|
style[jsName] = adjustFunction(node.getAttribute(svgName));
|
|
2976
3008
|
if (stylesheetStyles[svgName])
|
|
2977
3009
|
style[jsName] = adjustFunction(stylesheetStyles[svgName]);
|
|
2978
|
-
|
|
2979
|
-
|
|
3010
|
+
}
|
|
3011
|
+
function copy(v) {
|
|
3012
|
+
if (v.startsWith("url"))
|
|
3013
|
+
console.warn("url access in attributes is not implemented.");
|
|
3014
|
+
return v;
|
|
2980
3015
|
}
|
|
2981
3016
|
function clamp(v) {
|
|
2982
3017
|
return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
|
|
@@ -3003,61 +3038,61 @@ function parseStyle(node, style, stylesheets) {
|
|
|
3003
3038
|
return style;
|
|
3004
3039
|
}
|
|
3005
3040
|
|
|
3006
|
-
function parseNode(node, style, paths = []) {
|
|
3041
|
+
function parseNode(node, style, paths = [], stylesheets = {}) {
|
|
3007
3042
|
if (node.nodeType !== 1)
|
|
3008
3043
|
return paths;
|
|
3009
3044
|
let isDefsNode = false;
|
|
3010
3045
|
let path = null;
|
|
3011
|
-
|
|
3046
|
+
let _style = { ...style };
|
|
3012
3047
|
switch (node.nodeName) {
|
|
3013
3048
|
case "svg":
|
|
3014
|
-
|
|
3049
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3015
3050
|
break;
|
|
3016
3051
|
case "style":
|
|
3017
3052
|
parseCSSStylesheet(node, stylesheets);
|
|
3018
3053
|
break;
|
|
3019
3054
|
case "g":
|
|
3020
|
-
|
|
3055
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3021
3056
|
break;
|
|
3022
3057
|
case "path":
|
|
3023
|
-
|
|
3058
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3024
3059
|
if (node.hasAttribute("d"))
|
|
3025
3060
|
path = parsePathNode(node);
|
|
3026
3061
|
break;
|
|
3027
3062
|
case "rect":
|
|
3028
|
-
|
|
3063
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3029
3064
|
path = parseRectNode(node);
|
|
3030
3065
|
break;
|
|
3031
3066
|
case "polygon":
|
|
3032
|
-
|
|
3067
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3033
3068
|
path = parsePolygonNode(node);
|
|
3034
3069
|
break;
|
|
3035
3070
|
case "polyline":
|
|
3036
|
-
|
|
3071
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3037
3072
|
path = parsePolylineNode(node);
|
|
3038
3073
|
break;
|
|
3039
3074
|
case "circle":
|
|
3040
|
-
|
|
3075
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3041
3076
|
path = parseCircleNode(node);
|
|
3042
3077
|
break;
|
|
3043
3078
|
case "ellipse":
|
|
3044
|
-
|
|
3079
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3045
3080
|
path = parseEllipseNode(node);
|
|
3046
3081
|
break;
|
|
3047
3082
|
case "line":
|
|
3048
|
-
|
|
3083
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3049
3084
|
path = parseLineNode(node);
|
|
3050
3085
|
break;
|
|
3051
3086
|
case "defs":
|
|
3052
3087
|
isDefsNode = true;
|
|
3053
3088
|
break;
|
|
3054
3089
|
case "use": {
|
|
3055
|
-
|
|
3090
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3056
3091
|
const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || "";
|
|
3057
3092
|
const usedNodeId = href.substring(1);
|
|
3058
3093
|
const usedNode = node.viewportElement?.getElementById(usedNodeId);
|
|
3059
3094
|
if (usedNode) {
|
|
3060
|
-
parseNode(usedNode,
|
|
3095
|
+
parseNode(usedNode, _style, paths, stylesheets);
|
|
3061
3096
|
} else {
|
|
3062
3097
|
console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
|
|
3063
3098
|
}
|
|
@@ -3067,6 +3102,10 @@ function parseNode(node, style, paths = []) {
|
|
|
3067
3102
|
console.warn(node);
|
|
3068
3103
|
break;
|
|
3069
3104
|
}
|
|
3105
|
+
if (_style.display === "none") {
|
|
3106
|
+
return paths;
|
|
3107
|
+
}
|
|
3108
|
+
Object.assign(style, _style);
|
|
3070
3109
|
const currentTransform = new Matrix3();
|
|
3071
3110
|
const transformStack = [];
|
|
3072
3111
|
const transform = getNodeTransform(node, currentTransform, transformStack);
|
|
@@ -3080,7 +3119,7 @@ function parseNode(node, style, paths = []) {
|
|
|
3080
3119
|
const node2 = childNodes[i];
|
|
3081
3120
|
if (isDefsNode && node2.nodeName !== "style" && node2.nodeName !== "defs")
|
|
3082
3121
|
continue;
|
|
3083
|
-
parseNode(node2, style, paths);
|
|
3122
|
+
parseNode(node2, style, paths, stylesheets);
|
|
3084
3123
|
}
|
|
3085
3124
|
if (transform) {
|
|
3086
3125
|
transformStack.pop();
|
|
@@ -3129,6 +3168,35 @@ function getPathsBoundingBox(paths, withStyle = true) {
|
|
|
3129
3168
|
paths.forEach((path) => path.getMinMax(min, max, withStyle));
|
|
3130
3169
|
return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
|
|
3131
3170
|
}
|
|
3171
|
+
function pathsToSvgString(paths) {
|
|
3172
|
+
const { x, y, width, height } = getPathsBoundingBox(paths);
|
|
3173
|
+
const content = paths.map((path) => path.toSvgPathString()).join("");
|
|
3174
|
+
return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${content}</svg>`;
|
|
3175
|
+
}
|
|
3176
|
+
function pathsToSvgUrl(paths) {
|
|
3177
|
+
return `data:image/svg+xml;base64,${btoa(pathsToSvgString(paths))}`;
|
|
3178
|
+
}
|
|
3179
|
+
function pathsToSvg(paths) {
|
|
3180
|
+
return new DOMParser().parseFromString(pathsToSvgString(paths), "image/svg+xml").documentElement;
|
|
3181
|
+
}
|
|
3182
|
+
function pathsToCanvas(paths, options = {}) {
|
|
3183
|
+
const { pixelRatio = 2, ...style } = options;
|
|
3184
|
+
const { left, top, width, height } = getPathsBoundingBox(paths);
|
|
3185
|
+
const canvas = document.createElement("canvas");
|
|
3186
|
+
canvas.width = width * pixelRatio;
|
|
3187
|
+
canvas.height = height * pixelRatio;
|
|
3188
|
+
canvas.style.width = `${width}px`;
|
|
3189
|
+
canvas.style.height = `${height}px`;
|
|
3190
|
+
const ctx = canvas.getContext("2d");
|
|
3191
|
+
if (ctx) {
|
|
3192
|
+
ctx.scale(pixelRatio, pixelRatio);
|
|
3193
|
+
ctx.translate(-left, -top);
|
|
3194
|
+
paths.forEach((path) => {
|
|
3195
|
+
path.drawTo(ctx, style);
|
|
3196
|
+
});
|
|
3197
|
+
}
|
|
3198
|
+
return canvas;
|
|
3199
|
+
}
|
|
3132
3200
|
|
|
3133
3201
|
exports.BoundingBox = BoundingBox;
|
|
3134
3202
|
exports.CircleCurve = CircleCurve;
|
|
@@ -3153,4 +3221,8 @@ exports.parseSvg = parseSvg;
|
|
|
3153
3221
|
exports.parseSvgToDom = parseSvgToDom;
|
|
3154
3222
|
exports.pathCommandsToPathData = pathCommandsToPathData;
|
|
3155
3223
|
exports.pathDataToPathCommands = pathDataToPathCommands;
|
|
3224
|
+
exports.pathsToCanvas = pathsToCanvas;
|
|
3225
|
+
exports.pathsToSvg = pathsToSvg;
|
|
3226
|
+
exports.pathsToSvgString = pathsToSvgString;
|
|
3227
|
+
exports.pathsToSvgUrl = pathsToSvgUrl;
|
|
3156
3228
|
exports.setCanvasContext = setCanvasContext;
|
package/dist/index.d.cts
CHANGED
|
@@ -484,5 +484,11 @@ declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
|
|
|
484
484
|
declare function parseSvg(svg: string | SVGElement): Path2D[];
|
|
485
485
|
|
|
486
486
|
declare function getPathsBoundingBox(paths: Path2D[], withStyle?: boolean): BoundingBox | undefined;
|
|
487
|
+
declare function pathsToSvgString(paths: Path2D[]): string;
|
|
488
|
+
declare function pathsToSvgUrl(paths: Path2D[]): string;
|
|
489
|
+
declare function pathsToSvg(paths: Path2D[]): SVGElement;
|
|
490
|
+
declare function pathsToCanvas(paths: Path2D[], options?: Partial<PathStyle & {
|
|
491
|
+
pixelRatio: number;
|
|
492
|
+
}>): HTMLCanvasElement;
|
|
487
493
|
|
|
488
|
-
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, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
|
494
|
+
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, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, pathsToCanvas, pathsToSvg, pathsToSvgString, pathsToSvgUrl, setCanvasContext };
|
package/dist/index.d.mts
CHANGED
|
@@ -484,5 +484,11 @@ declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
|
|
|
484
484
|
declare function parseSvg(svg: string | SVGElement): Path2D[];
|
|
485
485
|
|
|
486
486
|
declare function getPathsBoundingBox(paths: Path2D[], withStyle?: boolean): BoundingBox | undefined;
|
|
487
|
+
declare function pathsToSvgString(paths: Path2D[]): string;
|
|
488
|
+
declare function pathsToSvgUrl(paths: Path2D[]): string;
|
|
489
|
+
declare function pathsToSvg(paths: Path2D[]): SVGElement;
|
|
490
|
+
declare function pathsToCanvas(paths: Path2D[], options?: Partial<PathStyle & {
|
|
491
|
+
pixelRatio: number;
|
|
492
|
+
}>): HTMLCanvasElement;
|
|
487
493
|
|
|
488
|
-
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, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
|
494
|
+
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, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, pathsToCanvas, pathsToSvg, pathsToSvgString, pathsToSvgUrl, setCanvasContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -484,5 +484,11 @@ declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
|
|
|
484
484
|
declare function parseSvg(svg: string | SVGElement): Path2D[];
|
|
485
485
|
|
|
486
486
|
declare function getPathsBoundingBox(paths: Path2D[], withStyle?: boolean): BoundingBox | undefined;
|
|
487
|
+
declare function pathsToSvgString(paths: Path2D[]): string;
|
|
488
|
+
declare function pathsToSvgUrl(paths: Path2D[]): string;
|
|
489
|
+
declare function pathsToSvg(paths: Path2D[]): SVGElement;
|
|
490
|
+
declare function pathsToCanvas(paths: Path2D[], options?: Partial<PathStyle & {
|
|
491
|
+
pixelRatio: number;
|
|
492
|
+
}>): HTMLCanvasElement;
|
|
487
493
|
|
|
488
|
-
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, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
|
494
|
+
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, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, pathsToCanvas, pathsToSvg, pathsToSvgString, pathsToSvgUrl, setCanvasContext };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(d,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(d=typeof globalThis<"u"?globalThis:d||self,C(d.modernPath2d={}))})(this,function(d){"use strict";var ee=Object.defineProperty;var se=(d,C,q)=>C in d?ee(d,C,{enumerable:!0,configurable:!0,writable:!0,value:q}):d[C]=q;var T=(d,C,q)=>se(d,typeof C!="symbol"?C+"":C,q);const C={arcs:"bevel",bevel:"bevel",miter:"miter","miter-clip":"miter",round:"round"};function q(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:a=[],strokeDashoffset:h=0,shadowOffsetX:l=0,shadowOffsetY:y=0,shadowBlur:g=0,shadowColor:p="rgba(0, 0, 0, 0)"}=e;r.fillStyle=t,r.strokeStyle=s,r.lineWidth=n,r.lineCap=o,r.lineJoin=C[i],r.miterLimit=c,r.setLineDash(a),r.lineDashOffset=h,r.shadowOffsetX=l,r.shadowOffsetY=y,r.shadowBlur=g,r.shadowColor=p}class u{constructor(e=0,t=0){this.x=e,this.y=t}static get MAX(){return new u(1/0,1/0)}static get MIN(){return new u(-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}multiply(e){return this.x*=e.x,this.y*=e.y,this}divide(e){return this.x/=e.x,this.y/=e.y,this}dot(e){return this.x*e.x+this.y*e.y}cross(e){return this.x*e.y-this.y*e.x}rotate(e,t={x:0,y:0}){const s=-e/180*Math.PI,n=this.x-t.x,o=-(this.y-t.y),i=Math.sin(s),c=Math.cos(s);return this.set(t.x+(n*c-o*i),t.y-(n*i+o*c)),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}lengthSquared(){return this.x*this.x+this.y*this.y}length(){return Math.sqrt(this.lengthSquared())}scale(e,t=e,s={x:0,y:0}){const n=e<0?s.x-this.x+s.x:this.x,o=t<0?s.y-this.y+s.y:this.y;return this.x=n*Math.abs(e),this.y=o*Math.abs(t),this}skew(e,t=0,s={x:0,y:0}){const n=this.x-s.x,o=this.y-s.y;return this.x=s.x+(n+Math.tan(e)*o),this.y=s.y+(o+Math.tan(t)*n),this}min(...e){return this.x=Math.min(this.x,...e.map(t=>t.x)),this.y=Math.min(this.y,...e.map(t=>t.y)),this}max(...e){return this.x=Math.max(this.x,...e.map(t=>t.x)),this.y=Math.max(this.y,...e.map(t=>t.y)),this}normalize(){return this.scale(1/(this.length()||1))}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}multiplyVectors(e,t){return this.x=e.x*t.x,this.y=e.y*t.y,this}divideVectors(e,t){return this.x=e.x/t.x,this.y=e.y/t.y,this}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 u(this.x,this.y)}}class L{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){if(e.length===0)return new L;if(e.length===1)return e[0].clone();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 L(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 u((this.left+this.right)/2,(this.top+this.bottom)/2)}clone(){return new L(this.left,this.top,this.width,this.height)}toArray(){return[this.left,this.top,this.width,this.height]}}class v{constructor(e=1,t=0,s=0,n=0,o=1,i=0,c=0,a=0,h=1){T(this,"elements",[]);this.set(e,t,s,n,o,i,c,a,h)}set(e,t,s,n,o,i,c,a,h){const l=this.elements;return l[0]=e,l[1]=n,l[2]=c,l[3]=t,l[4]=o,l[5]=a,l[6]=s,l[7]=i,l[8]=h,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],a=s[6],h=s[1],l=s[4],y=s[7],g=s[2],p=s[5],f=s[8],x=n[0],M=n[3],w=n[6],$=n[1],b=n[4],S=n[7],N=n[2],z=n[5],D=n[8];return o[0]=i*x+c*$+a*N,o[3]=i*M+c*b+a*z,o[6]=i*w+c*S+a*D,o[1]=h*x+l*$+y*N,o[4]=h*M+l*b+y*z,o[7]=h*w+l*S+y*D,o[2]=g*x+p*$+f*N,o[5]=g*M+p*b+f*z,o[8]=g*w+p*S+f*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],a=e[6],h=e[7],l=e[8],y=l*i-c*h,g=c*a-l*o,p=h*o-i*a,f=t*y+s*g+n*p;if(f===0)return this.set(0,0,0,0,0,0,0,0,0);const x=1/f;return e[0]=y*x,e[1]=(n*h-l*s)*x,e[2]=(c*s-n*i)*x,e[3]=g*x,e[4]=(l*t-n*a)*x,e[5]=(n*o-c*t)*x,e[6]=p*x,e[7]=(s*a-h*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 v;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 a=(i.x-c.x)/2,h=(i.y-c.y)/2,l=Math.cos(s)*a+Math.sin(s)*h,y=-Math.sin(s)*a+Math.cos(s)*h;let g=e*e,p=t*t;const f=l*l,x=y*y,M=f/g+x/p;if(M>1){const wt=Math.sqrt(M);e=wt*e,t=wt*t,g=e*e,p=t*t}const w=g*x+p*f,$=(g*p-w)/w;let b=Math.sqrt(Math.max(0,$));n===o&&(b=-b);const S=b*e*y/t,N=-b*t*l/e,z=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,(l-S)/e,(y-N)/t),j=Z((l-S)/e,(y-N)/t,(-l-S)/e,(-y-N)/t)%(Math.PI*2);r.ellipse(z,D,e,t,s,U,U+j,o===1)}function O(r,e){return r-(e-r)}function Y(r,e){const t=new u,s=new u;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),a=O(t.y,s.y);s.x=c,s.y=a,i.type==="t"?(e.quadraticCurveTo(c,a,t.x+i.x,t.y+i.y),t.add(i)):(e.quadraticCurveTo(c,a,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,a=!0,h="",l="";const y=[];function g(M,w,$){const b=new SyntaxError(`Unexpected character "${M}" at index ${w}.`);throw b.partial=$,b}function p(){h!==""&&(l===""?y.push(Number(h)):y.push(Number(h)*10**Number(l))),h="",l=""}let f;const x=r.length;for(let M=0;M<x;M++){if(f=r[M],Array.isArray(e)&&e.includes(y.length%t)&&P.FLAGS.test(f)){c=1,h=f,p();continue}if(c===0){if(P.WHITESPACE.test(f))continue;if(P.DIGIT.test(f)||P.SIGN.test(f)){c=1,h=f;continue}if(P.POINT.test(f)){c=2,h=f;continue}P.COMMA.test(f)&&(a&&g(f,M,y),a=!0)}if(c===1){if(P.DIGIT.test(f)){h+=f;continue}if(P.POINT.test(f)){h+=f,c=2;continue}if(P.EXP.test(f)){c=3;continue}P.SIGN.test(f)&&h.length===1&&P.SIGN.test(h[0])&&g(f,M,y)}if(c===2){if(P.DIGIT.test(f)){h+=f;continue}if(P.EXP.test(f)){c=3;continue}P.POINT.test(f)&&h[h.length-1]==="."&&g(f,M,y)}if(c===3){if(P.DIGIT.test(f)){l+=f;continue}if(P.SIGN.test(f)){if(l===""){l+=f;continue}l.length===1&&P.SIGN.test(l)&&g(f,M,y)}}P.WHITESPACE.test(f)?(p(),c=0,a=!1):P.COMMA.test(f)?(p(),c=0,a=!0):P.SIGN.test(f)?(p(),c=1,h=f):P.POINT.test(f)?(p(),c=2,h=f):g(f,M,y)}return p(),y}function Tt(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+=`${Tt(r[t])} `;return e}const Ct=/[a-df-z][^a-df-z]*/gi;function G(r){const e=[],t=r.match(Ct);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 a;switch(i){case"m":case"M":a=A(c);for(let h=0,l=a.length;h<l;h+=2)h===0?e.push({type:i,x:a[h],y:a[h+1]}):e.push({type:i==="m"?"l":"L",x:a[h],y:a[h+1]});break;case"h":case"H":a=A(c);for(let h=0,l=a.length;h<l;h++)e.push({type:i,x:a[h]});break;case"v":case"V":a=A(c);for(let h=0,l=a.length;h<l;h++)e.push({type:i,y:a[h]});break;case"l":case"L":a=A(c);for(let h=0,l=a.length;h<l;h+=2)e.push({type:i,x:a[h],y:a[h+1]});break;case"c":case"C":a=A(c);for(let h=0,l=a.length;h<l;h+=6)e.push({type:i,x1:a[h],y1:a[h+1],x2:a[h+2],y2:a[h+3],x:a[h+4],y:a[h+5]});break;case"s":case"S":a=A(c);for(let h=0,l=a.length;h<l;h+=4)e.push({type:i,x2:a[h],y2:a[h+1],x:a[h+2],y:a[h+3]});break;case"q":case"Q":a=A(c);for(let h=0,l=a.length;h<l;h+=4)e.push({type:i,x1:a[h],y1:a[h+1],x:a[h+2],y:a[h+3]});break;case"t":case"T":a=A(c);for(let h=0,l=a.length;h<l;h+=2)e.push({type:i,x:a[h],y:a[h+1]});break;case"a":case"A":a=A(c,[3,4],7);for(let h=0,l=a.length;h<l;h+=7)e.push({type:i,rx:a[h],ry:a[h+1],angle:a[h+2],largeArcFlag:a[h+3],sweepFlag:a[h+4],x:a[h+5],y:a[h+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)}isClockwise(){const e=this.getPoint(1),t=this.getPoint(.5),s=this.getPoint(1);return(t.x-e.x)*(s.y-t.y)-(t.y-e.y)*(s.x-t.x)<0}getPointAt(e,t=new u){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}forEachControlPoints(e){return this.getControlPoints().forEach(e),this}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,a=o-1,h;for(;c<=a;)if(n=Math.floor(c+(a-c)/2),h=s[n]-i,h<0)c=n+1;else if(h>0)a=n-1;else{a=n;break}if(n=a,s[n]===i)return n/(o-1);const l=s[n],g=s[n+1]-l,p=(i-l)/g;return(n+p)/(o-1)}getTangent(e,t=new u){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)}getNormal(e,t=new u){return this.getTangent(e,t),t.set(-t.y,t.x).normalize()}getNormalAt(e,t){return this.getNormal(this.getUToTMapping(e),t)}getTForPoint(e,t=.001){let s=0,n=1,o=(s+n)/2;for(;n-s>t;){o=(s+n)/2;const i=this.getPoint(o);if(i.distanceTo(e)<t)return o;i.x<e.x?s=o:n=o}return o}matrix(e){return this.forEachControlPoints(t=>t.applyMatrix3(e)),this}getMinMax(e=u.MAX,t=u.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 L(e.x,e.y,t.x-e.x,t.y-e.y)}toCommands(){return this.getPoints().map((e,t)=>t===0?{type:"M",x:e.x,y:e.y}:{type:"L",x:e.x,y:e.y})}toData(){return K(this.toCommands())}drawTo(e){return this.toCommands().forEach(t=>{switch(t.type){case"M":e.moveTo(t.x,t.y);break;case"L":e.lineTo(t.x,t.y);break}}),this}copy(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}clone(){return new this.constructor().copy(this)}}class _ 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().scale(t))}getTangent(e,t=new u){const{x:s,y:n}=this.getNormal(e);return t.set(-n,s)}getNormal(e,t=new u){const{start:s,end:n}=this,o=e*(n-s)+s-.5*Math.PI;return t.set(Math.cos(o),Math.sin(o))}getControlPoints(){return[this.center]}getMinMax(e=u.MAX,t=u.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,a=r*c;return(2*t-2*s+o+i)*a+(-3*t+3*s-2*o-i)*c+o*r+t}function bt(r,e){const t=1-r;return t*t*e}function vt(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)+vt(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 u,t=new u,s=new u,n=new u){super(),this.start=e,this.startControl=t,this.endControl=s,this.end=n}getPoint(e,t=new u){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))}getControlPoints(){return[this.start,this.startControl,this.endControl,this.end]}_solveQuadratic(e,t,s){const n=t*t-4*e*s;if(n<0)return[];const o=Math.sqrt(n),i=(-t+o)/(2*e),c=(-t-o)/(2*e);return[i,c].filter(a=>a>=0&&a<=1)}getMinMax(e=u.MAX,t=u.MIN){const s=this.start,n=this.startControl,o=this.endControl,i=this.end,c=this._solveQuadratic(3*(n.x-s.x),6*(o.x-n.x),3*(i.x-o.x)),a=this._solveQuadratic(3*(n.y-s.y),6*(o.y-n.y),3*(i.y-o.y)),h=[0,1,...c,...a];return((y,g)=>{for(const p of y)for(let f=0;f<=g;f++){const x=f/g-.5,M=Math.min(1,Math.max(0,p+x)),w=this.getPoint(M);e.x=Math.min(e.x,w.x),e.y=Math.min(e.y,w.y),t.x=Math.max(t.x,w.x),t.y=Math.max(t.y,w.y)}})(h,10),{min:e,max:t}}toCommands(){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{start:t,startControl:s,endControl:n,end:o}=this;return e.lineTo(t.x,t.y),e.bezierCurveTo(s.x,s.y,n.x,n.y,o.x,o.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 Et=new v,rt=new v,it=new v,F=new u;class ot extends k{constructor(e=new u,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}isClockwise(){return this.clockwise}getPoint(e,t=new u){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),a=this.center.y+this.radiusY*Math.sin(i);if(this.rotation!==0){const h=Math.cos(this.rotation),l=Math.sin(this.rotation),y=c-this.center.x,g=a-this.center.y;c=y*h-g*l+this.center.x,a=y*l+g*h+this.center.y}return t.set(c,a)}toCommands(){const{center:e,radiusX:t,radiusY:s,startAngle:n,endAngle:o,clockwise:i,rotation:c}=this,{x:a,y:h}=e,l=a+t*Math.cos(n)*Math.cos(c)-s*Math.sin(n)*Math.sin(c),y=h+t*Math.cos(n)*Math.sin(c)+s*Math.sin(n)*Math.cos(c),g=Math.abs(n-o),p=g>Math.PI?1:0,f=i?1:0,x=c*180/Math.PI;if(g>=2*Math.PI){const M=n+Math.PI,w=a+t*Math.cos(M)*Math.cos(c)-s*Math.sin(M)*Math.sin(c),$=h+t*Math.cos(M)*Math.sin(c)+s*Math.sin(M)*Math.cos(c);return[{type:"M",x:l,y},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:0,sweepFlag:f,x:w,y:$},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:0,sweepFlag:f,x:l,y}]}else{const M=a+t*Math.cos(o)*Math.cos(c)-s*Math.sin(o)*Math.sin(c),w=h+t*Math.cos(o)*Math.sin(c)+s*Math.sin(o)*Math.cos(c);return[{type:"M",x:l,y},{type:"A",rx:t,ry:s,angle:x,largeArcFlag:p,sweepFlag:f,x:M,y:w}]}}drawTo(e){const{center:t,radiusX:s,radiusY:n,rotation:o,startAngle:i,endAngle:c,clockwise:a}=this;return e.ellipse(t.x,t.y,s,n,o,i,c,!a),this}matrix(e){return F.set(this.center.x,this.center.y),F.applyMatrix3(e),this.center.x=F.x,this.center.y=F.y,qt(e)?$t(this,e):Lt(this,e),this}getControlPoints(){return[this.center]}getMinMax(e=u.MAX,t=u.MIN){const{center:s,radiusX:n,radiusY:o,rotation:i}=this,{x:c,y:a}=s,h=Math.cos(i),l=Math.sin(i),y=Math.sqrt(n*n*h*h+o*o*l*l),g=Math.sqrt(n*n*l*l+o*o*h*h);return e.x=Math.min(e.x,c-y),e.y=Math.min(e.y,a-g),t.x=Math.max(t.x,c+y),t.y=Math.max(t.y,a+g),{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 $t(r,e){const t=r.radiusX,s=r.radiusY,n=Math.cos(r.rotation),o=Math.sin(r.rotation),i=new u(t*n,t*o),c=new u(-s*o,s*n),a=i.applyMatrix3(e),h=c.applyMatrix3(e),l=Et.set(a.x,h.x,0,a.y,h.y,0,0,0,1),y=rt.copy(l).invert(),f=it.copy(y).transpose().multiply(y).elements,x=zt(f[0],f[1],f[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(l),z=D=>{const{x:U,y:j}=new u(Math.cos(D),Math.sin(D)).applyMatrix3(N);return Math.atan2(j,U)};r.startAngle=z(r.startAngle),r.endAngle=z(r.endAngle),ht(e)&&(r.clockwise=!r.clockwise)}}function Lt(r,e){const t=at(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,ht(e)&&(r.startAngle*=-1,r.endAngle*=-1,r.clockwise=!r.clockwise)}function ht(r){const e=r.elements;return e[0]*e[4]-e[1]*e[3]<0}function qt(r){const e=r.elements,t=e[0]*e[3]+e[1]*e[4];if(t===0)return!1;const s=at(r),n=ct(r);return Math.abs(t/(s*n))>Number.EPSILON}function at(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 a=r+t,h=r-t,l=Math.sqrt(h*h+4*e*e);return a>0?(s=.5*(a+l),c=1/s,n=r*c*t-e*c*e):a<0?n=.5*(a-l):(s=.5*l,n=-.5*l),h>0?o=h+l:o=h-l,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),h>0&&(c=o,o=-i,i=c),{rt1:s,rt2:n,cs:o,sn:i}}class X extends k{constructor(e=new u,t=new u){super(),this.start=e,this.end=t}getPoint(e,t=new u){return e===1?t.copy(this.end):t.copy(this.end).sub(this.start).scale(e).add(this.start),t}getPointAt(e,t=new u){return this.getPoint(e,t)}getTangent(e,t=new u){return t.subVectors(this.end,this.start).normalize()}getTangentAt(e,t=new u){return this.getTangent(e,t)}getControlPoints(){return[this.start,this.end]}getMinMax(e=u.MAX,t=u.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}}toCommands(){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{start:t,end:s}=this;return e.lineTo(t.x,t.y),e.lineTo(s.x,s.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.end.copy(e.end),this}}class Dt 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 u(t+.5*this.size,s-.5*this.size),o=new u(t-.5*this.size,s-.5*this.size),i=new u(t,s+.5*this.size),c=new _(n,Math.SQRT1_2*this.size,-.25*Math.PI,.75*Math.PI),a=new _(o,Math.SQRT1_2*this.size,-.75*Math.PI,.25*Math.PI),h=new _(i,.5*Math.SQRT1_2*this.size,.75*Math.PI,1.25*Math.PI),l=new u(t,s+this.size),y=new u(t+this.size,s),g=new u().lerpVectors(y,l,.75),p=new u(t-this.size,s),f=new u().lerpVectors(p,l,.75),x=new X(y,g),M=new X(f,p);return this.curves=[c,x,h,M,a],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,s){return this.getCurve(t).getTangent(this.curveT,s)}getNormal(t,s){return this.getCurve(t).getNormal(this.curveT,s)}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}toCommands(){return this.curves.flatMap(t=>t.toCommands())}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 u(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)}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}toCommands(){return this.curves.flatMap(t=>t.toCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class lt extends k{constructor(e=new u,t=new u,s=new u){super(),this.start=e,this.control=t,this.end=s}getPoint(e,t=new u){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}getControlPoints(){return[this.start,this.control,this.end]}getMinMax(e=u.MAX,t=u.MIN){const{start:s,control:n,end:o}=this,i=.5*(s.x+n.x),c=.5*(s.y+n.y),a=.5*(s.x+o.x),h=.5*(s.y+o.y);return e.x=Math.min(e.x,s.x,o.x,i,a),e.y=Math.min(e.y,s.y,o.y,c,h),t.x=Math.max(t.x,s.x,o.x,i,a),t.y=Math.max(t.y,s.y,o.y,c,h),{min:e,max:t}}toCommands(){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{start:t,control:s,end:n}=this;return e.lineTo(t.x,t.y),e.quadraticCurveTo(s.x,s.y,n.x,n.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 ut 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 u(t-n,s-o),new u(t+n,s-o),new u(t+n,s+o),new u(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)}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}toCommands(){return this.curves.flatMap(t=>t.toCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class yt extends k{constructor(e=[]){super(),this.points=e}getPoint(e,t=new u){const{points:s}=this,n=(s.length-1)*e,o=Math.floor(n),i=n-o,c=s[o===0?o:o-1],a=s[o],h=s[o>s.length-2?s.length-1:o+1],l=s[o>s.length-3?s.length-1:o+2];return t.set(tt(i,c.x,a.x,h.x,l.x),tt(i,c.y,a.y,h.y,l.y)),t}getControlPoints(){return this.points}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 u);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 u){const n=t*this.getLength(),o=this.getCurveLengths();let i=0;for(;i<o.length;){if(o[i]>=n){const c=o[i]-n,a=this.curves[i],h=a.getLength();return a.getPointAt(h===0?0:1-c/h,s)}i++}return s}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}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=[],n=this.curves;let o;for(let i=0,c=n.length;i<c;i++){const h=n[i].getPoints(t);for(let l=0;l<h.length;l++){const y=h[l];o!=null&&o.equals(y)||(s.push(y),o=y)}}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.clone(),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.currentPoint.equals({x:t,y:s})||this.curves.push(new X(this.currentPoint.clone(),new u(t,s))),this._setCurrentPoint({x:t,y:s}),this}bezierCurveTo(t,s,n,o,i,c){return this.currentPoint.equals({x:i,y:c})||this.curves.push(new nt(this.currentPoint.clone(),new u(t,s),new u(n,o),new u(i,c))),this._setCurrentPoint({x:i,y:c}),this}quadraticCurveTo(t,s,n,o){return this.currentPoint.equals({x:n,y:o})||this.curves.push(new lt(this.currentPoint.clone(),new u(t,s),new u(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 a=this.currentPoint;return this.arc(t+a.x,s+a.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,a,h=!0){const l=new ot(new u(t,s),n,o,i,c,a,!h);if(this.curves.length>0){const y=l.getPoint(0);y.equals(this.currentPoint)||this.lineTo(y.x,y.y)}return this.curves.push(l),this._setCurrentPoint(l.getPoint(1)),this}relativeEllipse(t,s,n,o,i,c,a,h){const l=this.currentPoint;return this.ellipse(t+l.x,s+l.y,n,o,i,c,a,h),this}rect(t,s,n,o){return this.curves.push(new ut(new u(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}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(n=>n.getMinMax(t,s)),{min:t,max:s}}getBoundingBox(){const{min:t,max:s}=this.getMinMax();return new L(t.x,t.y,s.x-t.x,s.y-t.y)}toCommands(){return this.curves.flatMap(t=>t.toCommands())}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()}function Rt(r,e,t,s){const n=e.clone().sub(r),o=s.clone().sub(t),i=t.clone().sub(r),c=n.cross(o);if(c===0)return new u((r.x+t.x)/2,(r.y+t.y)/2);const a=i.cross(o)/c;return Math.abs(a)>1?new u((r.x+t.x)/2,(r.y+t.y)/2):new u(r.x+a*n.x,r.y+a*n.y)}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,a){return this.currentPath.ellipse(e,t,s,n,o,i,c,a),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}getControlPoints(){return this.paths.flatMap(e=>e.getControlPoints())}getCurves(){return this.paths.flatMap(e=>e.curves)}scale(e,t=e,s={x:0,y:0}){return this.getControlPoints().forEach(n=>{n.scale(e,t,s)}),this}skew(e,t=0,s={x:0,y:0}){return this.getControlPoints().forEach(n=>{n.skew(e,t,s)}),this}rotate(e,t={x:0,y:0}){return this.getControlPoints().forEach(s=>{s.rotate(e,t)}),this}bold(e){if(e===0)return this;const t=this.getCurves(),s=[],n=[],o=[];t.forEach((c,a)=>{const h=c.getControlPoints(),l=c.isClockwise();o[a]=h,n[a]=l;const y=h[0],g=h[h.length-1]??y;s.push({start:l?g:y,end:l?y:g,index:a})});const i=[];return s.forEach((c,a)=>{i[a]=[],s.forEach((h,l)=>{l!==a&&h.start.equals(c.end)&&i[a].push(h.index)})}),t.forEach((c,a)=>{const h=n[a];o[a].forEach(y=>{const g=c.getTForPoint(y),p=c.getNormal(g).scale(h?e:-e);y.add(p)})}),i.forEach((c,a)=>{const h=o[a];c.forEach(l=>{const y=o[l],g=Rt(h[h.length-1],h[h.length-2]??h[h.length-1],y[0],y[1]??y[0]);g&&(h[h.length-1].copy(g),y[0].copy(g))})}),this}matrix(e){return this.getCurves().forEach(t=>t.matrix(e)),this}getMinMax(e=u.MAX,t=u.MIN,s=!0){const n=this.strokeWidth;return this.getCurves().forEach(o=>{if(o.getMinMax(e,t),s&&n>1){const i=n/2,c=o.isClockwise(),a=[];for(let h=0;h<=1;h+=1/o.arcLengthDivisions){const l=o.getPoint(h),y=o.getNormal(h),g=y.clone().scale(c?i:-i),p=y.clone().scale(c?-i:i);a.push(l.clone().add(g),l.clone().add(p),l.clone().add({x:i,y:0}),l.clone().add({x:-i,y:0}),l.clone().add({x:0,y:i}),l.clone().add({x:0,y:-i}),l.clone().add({x:i,y:i}),l.clone().add({x:-i,y:-i}))}e.min(...a),t.max(...a)}}),{min:e,max:t}}getBoundingBox(e=!0){const{min:t,max:s}=this.getMinMax(void 0,void 0,e);return new L(t.x,t.y,s.x-t.x,s.y-t.y)}drawTo(e,t={}){t={...this.style,...t};const{fill:s="#000",stroke:n="none"}=t;return e.beginPath(),e.save(),q(e,t),this.paths.forEach(o=>{o.drawTo(e)}),s!=="none"&&e.fill(),n!=="none"&&e.stroke(),e.restore(),this}drawControlPointsTo(e,t={}){t={...this.style,...t};const{fill:s="#000",stroke:n="none"}=t;return e.beginPath(),e.save(),q(e,t),this.getControlPoints().forEach(o=>{e.moveTo(o.x,o.y),e.arc(o.x,o.y,4,0,Math.PI*2)}),s!=="none"&&e.fill(),n!=="none"&&e.stroke(),e.restore(),this}toCommands(){return this.paths.flatMap(e=>e.toCommands())}toData(){return this.paths.map(e=>e.toData()).join(" ")}toSvgPathString(){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.toData()}" style="${s}"></path>`}toSvgString(){const{x:e,y:t,width:s,height:n}=this.getBoundingBox(),o=this.toSvgPathString();return`<svg viewBox="${e} ${t} ${s} ${n}" width="${s}px" height="${n}px" xmlns="http://www.w3.org/2000/svg">${o}</svg>`}toSvgUrl(){return`data:image/svg+xml;base64,${btoa(this.toSvgString())}`}toSvg(){return new DOMParser().parseFromString(this.toSvgString(),"image/svg+xml").documentElement}toCanvas(e={}){const{pixelRatio:t=2,...s}=e,{left:n,top:o,width:i,height:c}=this.getBoundingBox(),a=document.createElement("canvas");a.width=i*t,a.height=c*t,a.style.width=`${i}px`,a.style.height=`${c}px`;const h=a.getContext("2d");return h&&(h.scale(t,t),h.translate(-n,-o),this.drawTo(h,s)),a}copy(e){return this.currentPath=e.currentPath.clone(),this.paths=e.paths.map(t=>t.clone()),this.style={...e.style},this}clone(){return new this.constructor().copy(this)}}const Q="px",gt=90,ft=["mm","cm","in","pt","pc","px"],V={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=V.in[Q]/gt:(t=V[e][Q],t<0&&(t=V[e].in*gt)),t*Number.parseFloat(r)}const _t=new v,B=new v,pt=new v,dt=new v;function Ft(r,e,t){if(!(r.hasAttribute("transform")||r.nodeName==="use"&&(r.hasAttribute("x")||r.hasAttribute("y"))))return null;const s=Bt(r);return t.length>0&&s.premultiply(t[t.length-1]),e.copy(s),t.push(s),s}function Bt(r){const e=new v,t=_t;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 a=o.slice(0,i),h=A(o.slice(i+1));switch(t.identity(),a){case"translate":if(h.length>=1){const l=h[0];let y=0;h.length>=2&&(y=h[1]),t.translate(l,y)}break;case"rotate":if(h.length>=1){let l=0,y=0,g=0;l=h[0]*Math.PI/180,h.length>=3&&(y=h[1],g=h[2]),B.makeTranslation(-y,-g),pt.makeRotation(l),dt.multiplyMatrices(pt,B),B.makeTranslation(y,g),t.multiplyMatrices(B,dt)}break;case"scale":h.length>=1&&t.scale(h[0],h[1]??h[0]);break;case"skewX":h.length===1&&t.set(1,Math.tan(h[0]*Math.PI/180),0,0,1,0,0,0,1);break;case"skewY":h.length===1&&t.set(1,0,0,Math.tan(h[0]*Math.PI/180),1,0,0,0,1);break;case"matrix":h.length===6&&t.set(h[0],h[2],h[4],h[1],h[3],h[5],0,0,1);break}}e.premultiply(t)}}return e}function Ut(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 Wt(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 Yt(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 Gt(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 Qt(r){const e=new I,t=r.getAttribute("d");return!t||t==="none"?null:(e.addData(t),e)}const Vt=/([+-]?(?:\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(Vt,(n,o,i)=>{const c=m(o),a=m(i);return t===0?e.moveTo(c,a):e.lineTo(c,a),t++,n}),e.currentPath.autoClose=!0,e}const jt=/([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;function Zt(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),a=m(i);return t===0?e.moveTo(c,a):e.lineTo(c,a),t++,n}),e.currentPath.autoClose=!1,e}function Jt(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,a=new I;return a.moveTo(e+s,t),a.lineTo(e+o-s,t),(s!==0||n!==0)&&a.bezierCurveTo(e+o-s*c,t,e+o,t+n*c,e+o,t+n),a.lineTo(e+o,t+i-n),(s!==0||n!==0)&&a.bezierCurveTo(e+o,t+i-n*c,e+o-s*c,t+i,e+o-s,t+i),a.lineTo(e+s,t+i),(s!==0||n!==0)&&a.bezierCurveTo(e+s*c,t+i,e,t+i-n*c,e,t+i-n),a.lineTo(e,t+n),(s!==0||n!==0)&&a.bezierCurveTo(e,t+n*c,e+s*c,t,e+s,t),a}function E(r,e,t){e=Object.assign({},e);let s={};if(r.hasAttribute("class")){const a=r.getAttribute("class").split(/\s/).filter(Boolean).map(h=>h.trim());for(let h=0;h<a.length;h++)s=Object.assign(s,t[`.${a[h]}`])}r.hasAttribute("id")&&(s=Object.assign(s,t[`#${r.getAttribute("id")}`]));function n(a,h,l){l===void 0&&(l=function(g){return g.startsWith("url")&&console.warn("url access in attributes is not implemented."),g}),r.hasAttribute(a)&&(e[h]=l(r.getAttribute(a))),s[a]&&(e[h]=l(s[a])),r.style&&r.style[a]!==""&&(e[h]=l(r.style[a]))}function o(a){return Math.max(0,Math.min(1,m(a)))}function i(a){return Math.max(0,m(a))}function c(a){return a.split(" ").filter(h=>h!=="").map(h=>m(h))}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 H(r,e,t=[]){var l;if(r.nodeType!==1)return t;let s=!1,n=null;const o={};switch(r.nodeName){case"svg":e=E(r,e,o);break;case"style":Wt(r,o);break;case"g":e=E(r,e,o);break;case"path":e=E(r,e,o),r.hasAttribute("d")&&(n=Qt(r));break;case"rect":e=E(r,e,o),n=Jt(r);break;case"polygon":e=E(r,e,o),n=Ht(r);break;case"polyline":e=E(r,e,o),n=Zt(r);break;case"circle":e=E(r,e,o),n=Ut(r);break;case"ellipse":e=E(r,e,o),n=Yt(r);break;case"line":e=E(r,e,o),n=Gt(r);break;case"defs":s=!0;break;case"use":{e=E(r,e,o);const g=(r.getAttributeNS("http://www.w3.org/1999/xlink","href")||"").substring(1),p=(l=r.viewportElement)==null?void 0:l.getElementById(g);p?H(p,e,t):console.warn(`'use node' references non-existent node id: ${g}`);break}default:console.warn(r);break}const i=new v,c=[],a=Ft(r,i,c);n&&(n.matrix(i),t.push(n),n.style=e);const h=r.childNodes;for(let y=0,g=h.length;y<g;y++){const p=h[y];s&&p.nodeName!=="style"&&p.nodeName!=="defs"||H(p,e,t)}return a&&(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 Kt(r){return H(Pt(r),{})}function te(r,e=!0){if(!r.length)return;const t=u.MAX,s=u.MIN;return r.forEach(n=>n.getMinMax(t,s,e)),new L(t.x,t.y,s.x-t.x,s.y-t.y)}d.BoundingBox=L,d.CircleCurve=_,d.CubicBezierCurve=nt,d.Curve=k,d.CurvePath=R,d.EllipseCurve=ot,d.HeartCurve=Dt,d.LineCurve=X,d.Matrix3=v,d.Path2D=I,d.PloygonCurve=Xt,d.QuadraticBezierCurve=lt,d.RectangularCurve=ut,d.SplineCurve=yt,d.Vector2=u,d.addPathCommandsToPath2D=Y,d.getPathsBoundingBox=te,d.parseArcCommand=J,d.parsePathDataArgs=A,d.parseSvg=Kt,d.parseSvgToDom=Pt,d.pathCommandsToPathData=K,d.pathDataToPathCommands=G,d.setCanvasContext=q,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(p,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(p=typeof globalThis<"u"?globalThis:p||self,C(p.modernPath2d={}))})(this,function(p){"use strict";var re=Object.defineProperty;var ie=(p,C,q)=>C in p?re(p,C,{enumerable:!0,configurable:!0,writable:!0,value:q}):p[C]=q;var T=(p,C,q)=>ie(p,typeof C!="symbol"?C+"":C,q);const C={arcs:"bevel",bevel:"bevel",miter:"miter","miter-clip":"miter",round:"round"};function q(o,e){const{fill:t="#000",stroke:s="none",strokeWidth:r=s==="none"?0:1,strokeLinecap:i="round",strokeLinejoin:n="miter",strokeMiterlimit:c=0,strokeDasharray:h=[],strokeDashoffset:a=0,shadowOffsetX:l=0,shadowOffsetY:y=0,shadowBlur:f=0,shadowColor:d="rgba(0, 0, 0, 0)"}=e;o.fillStyle=t,o.strokeStyle=s,o.lineWidth=r,o.lineCap=i,o.lineJoin=C[n],o.miterLimit=c,o.setLineDash(h),o.lineDashOffset=a,o.shadowOffsetX=l,o.shadowOffsetY=y,o.shadowBlur=f,o.shadowColor=d}class u{constructor(e=0,t=0){this.x=e,this.y=t}static get MAX(){return new u(1/0,1/0)}static get MIN(){return new u(-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}multiply(e){return this.x*=e.x,this.y*=e.y,this}divide(e){return this.x/=e.x,this.y/=e.y,this}dot(e){return this.x*e.x+this.y*e.y}cross(e){return this.x*e.y-this.y*e.x}rotate(e,t={x:0,y:0}){const s=-e/180*Math.PI,r=this.x-t.x,i=-(this.y-t.y),n=Math.sin(s),c=Math.cos(s);return this.set(t.x+(r*c-i*n),t.y-(r*n+i*c)),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}lengthSquared(){return this.x*this.x+this.y*this.y}length(){return Math.sqrt(this.lengthSquared())}scale(e,t=e,s={x:0,y:0}){const r=e<0?s.x-this.x+s.x:this.x,i=t<0?s.y-this.y+s.y:this.y;return this.x=r*Math.abs(e),this.y=i*Math.abs(t),this}skew(e,t=0,s={x:0,y:0}){const r=this.x-s.x,i=this.y-s.y;return this.x=s.x+(r+Math.tan(e)*i),this.y=s.y+(i+Math.tan(t)*r),this}min(...e){return this.x=Math.min(this.x,...e.map(t=>t.x)),this.y=Math.min(this.y,...e.map(t=>t.y)),this}max(...e){return this.x=Math.max(this.x,...e.map(t=>t.x)),this.y=Math.max(this.y,...e.map(t=>t.y)),this}normalize(){return this.scale(1/(this.length()||1))}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}multiplyVectors(e,t){return this.x=e.x*t.x,this.y=e.y*t.y,this}divideVectors(e,t){return this.x=e.x/t.x,this.y=e.y/t.y,this}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,r=e.elements;return this.x=r[0]*t+r[3]*s+r[6],this.y=r[1]*t+r[4]*s+r[7],this}copy(e){return this.x=e.x,this.y=e.y,this}clone(){return new u(this.x,this.y)}}class L{constructor(e=0,t=0,s=0,r=0){this.left=e,this.top=t,this.width=s,this.height=r}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){if(e.length===0)return new L;if(e.length===1)return e[0].clone();const t=e[0],s=e.slice(1).reduce((r,i)=>(r.left=Math.min(r.left,i.left),r.top=Math.min(r.top,i.top),r.right=Math.max(r.right,i.right),r.bottom=Math.max(r.bottom,i.bottom),r),{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 L(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 u((this.left+this.right)/2,(this.top+this.bottom)/2)}clone(){return new L(this.left,this.top,this.width,this.height)}toArray(){return[this.left,this.top,this.width,this.height]}}class b{constructor(e=1,t=0,s=0,r=0,i=1,n=0,c=0,h=0,a=1){T(this,"elements",[]);this.set(e,t,s,r,i,n,c,h,a)}set(e,t,s,r,i,n,c,h,a){const l=this.elements;return l[0]=e,l[1]=r,l[2]=c,l[3]=t,l[4]=i,l[5]=h,l[6]=s,l[7]=n,l[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,r=t.elements,i=this.elements,n=s[0],c=s[3],h=s[6],a=s[1],l=s[4],y=s[7],f=s[2],d=s[5],g=s[8],x=r[0],m=r[3],w=r[6],E=r[1],v=r[4],S=r[7],N=r[2],z=r[5],D=r[8];return i[0]=n*x+c*E+h*N,i[3]=n*m+c*v+h*z,i[6]=n*w+c*S+h*D,i[1]=a*x+l*E+y*N,i[4]=a*m+l*v+y*z,i[7]=a*w+l*S+y*D,i[2]=f*x+d*E+g*N,i[5]=f*m+d*v+g*z,i[8]=f*w+d*S+g*D,this}invert(){const e=this.elements,t=e[0],s=e[1],r=e[2],i=e[3],n=e[4],c=e[5],h=e[6],a=e[7],l=e[8],y=l*n-c*a,f=c*h-l*i,d=a*i-n*h,g=t*y+s*f+r*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]=(r*a-l*s)*x,e[2]=(c*s-r*n)*x,e[3]=f*x,e[4]=(l*t-r*h)*x,e[5]=(r*i-c*t)*x,e[6]=d*x,e[7]=(s*h-a*t)*x,e[8]=(n*t-s*i)*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 b;function K(o,e,t,s){const r=o*t+e*s,i=Math.sqrt(o*o+e*e)*Math.sqrt(t*t+s*s);let n=Math.acos(Math.max(-1,Math.min(1,r/i)));return o*s-e*t<0&&(n=-n),n}function tt(o,e,t,s,r,i,n,c){if(e===0||t===0){o.lineTo(c.x,c.y);return}s=s*Math.PI/180,e=Math.abs(e),t=Math.abs(t);const h=(n.x-c.x)/2,a=(n.y-c.y)/2,l=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=l*l,x=y*y,m=g/f+x/d;if(m>1){const Ct=Math.sqrt(m);e=Ct*e,t=Ct*t,f=e*e,d=t*t}const w=f*x+d*g,E=(f*d-w)/w;let v=Math.sqrt(Math.max(0,E));r===i&&(v=-v);const S=v*e*y/t,N=-v*t*l/e,z=Math.cos(s)*S-Math.sin(s)*N+(n.x+c.x)/2,D=Math.sin(s)*S+Math.cos(s)*N+(n.y+c.y)/2,U=K(1,0,(l-S)/e,(y-N)/t),J=K((l-S)/e,(y-N)/t,(-l-S)/e,(-y-N)/t)%(Math.PI*2);o.ellipse(z,D,e,t,s,U,U+J,i===1)}function O(o,e){return o-(e-o)}function Y(o,e){const t=new u,s=new u;for(let r=0,i=o.length;r<i;r++){const n=o[r];if(n.type==="m"||n.type==="M")n.type==="m"?t.add(n):t.copy(n),e.moveTo(t.x,t.y),s.copy(t);else if(n.type==="h"||n.type==="H")n.type==="h"?t.x+=n.x:t.x=n.x,e.lineTo(t.x,t.y),s.copy(t);else if(n.type==="v"||n.type==="V")n.type==="v"?t.y+=n.y:t.y=n.y,e.lineTo(t.x,t.y),s.copy(t);else if(n.type==="l"||n.type==="L")n.type==="l"?t.add(n):t.copy(n),e.lineTo(t.x,t.y),s.copy(t);else if(n.type==="c"||n.type==="C")n.type==="c"?(e.bezierCurveTo(t.x+n.x1,t.y+n.y1,t.x+n.x2,t.y+n.y2,t.x+n.x,t.y+n.y),s.x=t.x+n.x2,s.y=t.y+n.y2,t.add(n)):(e.bezierCurveTo(n.x1,n.y1,n.x2,n.y2,n.x,n.y),s.x=n.x2,s.y=n.y2,t.copy(n));else if(n.type==="s"||n.type==="S")n.type==="s"?(e.bezierCurveTo(O(t.x,s.x),O(t.y,s.y),t.x+n.x2,t.y+n.y2,t.x+n.x,t.y+n.y),s.x=t.x+n.x2,s.y=t.y+n.y2,t.add(n)):(e.bezierCurveTo(O(t.x,s.x),O(t.y,s.y),n.x2,n.y2,n.x,n.y),s.x=n.x2,s.y=n.y2,t.copy(n));else if(n.type==="q"||n.type==="Q")n.type==="q"?(e.quadraticCurveTo(t.x+n.x1,t.y+n.y1,t.x+n.x,t.y+n.y),s.x=t.x+n.x1,s.y=t.y+n.y1,t.add(n)):(e.quadraticCurveTo(n.x1,n.y1,n.x,n.y),s.x=n.x1,s.y=n.y1,t.copy(n));else if(n.type==="t"||n.type==="T"){const c=O(t.x,s.x),h=O(t.y,s.y);s.x=c,s.y=h,n.type==="t"?(e.quadraticCurveTo(c,h,t.x+n.x,t.y+n.y),t.add(n)):(e.quadraticCurveTo(c,h,n.x,n.y),t.copy(n))}else if(n.type==="a"||n.type==="A"){const c=t.clone();if(n.type==="a"){if(n.x===0&&n.y===0)continue;t.add(n)}else{if(t.equals(n))continue;t.copy(n)}s.copy(t),tt(e,n.rx,n.ry,n.angle,n.largeArcFlag,n.sweepFlag,c,t)}else n.type==="z"||n.type==="Z"?(e.startPoint&&t.copy(e.startPoint),e.closePath()):console.warn("Unsupported commands",n)}}const P={SEPARATOR:/[ \t\r\n,.\-+]/,WHITESPACE:/[ \t\r\n]/,DIGIT:/\d/,SIGN:/[-+]/,POINT:/\./,COMMA:/,/,EXP:/e/i,FLAGS:/[01]/};function A(o,e,t=0){let c=0,h=!0,a="",l="";const y=[];function f(m,w,E){const v=new SyntaxError(`Unexpected character "${m}" at index ${w}.`);throw v.partial=E,v}function d(){a!==""&&(l===""?y.push(Number(a)):y.push(Number(a)*10**Number(l))),a="",l=""}let g;const x=o.length;for(let m=0;m<x;m++){if(g=o[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)){l+=g;continue}if(P.SIGN.test(g)){if(l===""){l+=g;continue}l.length===1&&P.SIGN.test(l)&&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 et(o){const e={x:0,y:0},t={x:0,y:0};let s="";for(let r=0,i=o.length;r<i;r++){const n=o[r];switch(n.type){case"m":case"M":if(n.x===t.x&&n.y===t.y)continue;s+=`${n.type} ${n.x} ${n.y}`,t.x=n.x,t.y=n.y,e.x=n.x,e.y=n.y;break;case"h":case"H":s+=`${n.type} ${n.x}`,t.x=n.x;break;case"v":case"V":s+=`${n.type} ${n.y}`,t.y=n.y;break;case"l":case"L":s+=`${n.type} ${n.x} ${n.y}`,t.x=n.x,t.y=n.y;break;case"c":case"C":s+=`${n.type} ${n.x1} ${n.y1} ${n.x2} ${n.y2} ${n.x} ${n.y}`,t.x=n.x,t.y=n.y;break;case"s":case"S":s+=`${n.type} ${n.x2} ${n.y2} ${n.x} ${n.y}`,t.x=n.x,t.y=n.y;break;case"q":case"Q":s+=`${n.type} ${n.x1} ${n.y1} ${n.x} ${n.y}`,t.x=n.x,t.y=n.y;break;case"t":case"T":s+=`${n.type} ${n.x} ${n.y}`,t.x=n.x,t.y=n.y;break;case"a":case"A":s+=`${n.type} ${n.rx} ${n.ry} ${n.angle} ${n.largeArcFlag} ${n.sweepFlag} ${n.x} ${n.y}`,t.x=n.x,t.y=n.y;break;case"z":case"Z":s+=n.type,t.x=e.x,t.y=e.y;break}}return s}const vt=/[a-df-z][^a-df-z]*/gi;function G(o){const e=[],t=o.match(vt);if(!t)return e;for(let s=0,r=t.length;s<r;s++){const i=t[s],n=i.charAt(0),c=i.slice(1).trim();let h;switch(n){case"m":case"M":h=A(c);for(let a=0,l=h.length;a<l;a+=2)a===0?e.push({type:n,x:h[a],y:h[a+1]}):e.push({type:n==="m"?"l":"L",x:h[a],y:h[a+1]});break;case"h":case"H":h=A(c);for(let a=0,l=h.length;a<l;a++)e.push({type:n,x:h[a]});break;case"v":case"V":h=A(c);for(let a=0,l=h.length;a<l;a++)e.push({type:n,y:h[a]});break;case"l":case"L":h=A(c);for(let a=0,l=h.length;a<l;a+=2)e.push({type:n,x:h[a],y:h[a+1]});break;case"c":case"C":h=A(c);for(let a=0,l=h.length;a<l;a+=6)e.push({type:n,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,l=h.length;a<l;a+=4)e.push({type:n,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,l=h.length;a<l;a+=4)e.push({type:n,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,l=h.length;a<l;a+=2)e.push({type:n,x:h[a],y:h[a+1]});break;case"a":case"A":h=A(c,[3,4],7);for(let a=0,l=h.length;a<l;a+=7)e.push({type:n,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:n});break;default:console.warn(i)}}return e}class k{constructor(){T(this,"arcLengthDivisions",200);T(this,"_cacheArcLengths");T(this,"_needsUpdate",!1)}isClockwise(){const e=this.getPoint(1),t=this.getPoint(.5),s=this.getPoint(1);return(t.x-e.x)*(s.y-t.y)-(t.y-e.y)*(s.x-t.x)<0}getPointAt(e,t=new u){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}forEachControlPoints(e){return this.getControlPoints().forEach(e),this}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,r=this.getPoint(0),i=0;t.push(0);for(let n=1;n<=e;n++)s=this.getPoint(n/e),i+=s.distanceTo(r),t.push(i),r=s;return this._cacheArcLengths=t,t}updateArcLengths(){this._needsUpdate=!0,this.getLengths()}getUToTMapping(e,t){const s=this.getLengths();let r=0;const i=s.length;let n;t?n=t:n=e*s[i-1];let c=0,h=i-1,a;for(;c<=h;)if(r=Math.floor(c+(h-c)/2),a=s[r]-n,a<0)c=r+1;else if(a>0)h=r-1;else{h=r;break}if(r=h,s[r]===n)return r/(i-1);const l=s[r],f=s[r+1]-l,d=(n-l)/f;return(r+d)/(i-1)}getTangent(e,t=new u){const r=Math.max(0,e-1e-4),i=Math.min(1,e+1e-4);return t.copy(this.getPoint(i).sub(this.getPoint(r)).normalize())}getTangentAt(e,t){return this.getTangent(this.getUToTMapping(e),t)}getNormal(e,t=new u){return this.getTangent(e,t),t.set(-t.y,t.x).normalize()}getNormalAt(e,t){return this.getNormal(this.getUToTMapping(e),t)}getTForPoint(e,t=.001){let s=0,r=1,i=(s+r)/2;for(;r-s>t;){i=(s+r)/2;const n=this.getPoint(i);if(n.distanceTo(e)<t)return i;n.x<e.x?s=i:r=i}return i}matrix(e){return this.forEachControlPoints(t=>t.applyMatrix3(e)),this}getMinMax(e=u.MAX,t=u.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 L(e.x,e.y,t.x-e.x,t.y-e.y)}toCommands(){return this.getPoints().map((e,t)=>t===0?{type:"M",x:e.x,y:e.y}:{type:"L",x:e.x,y:e.y})}toData(){return et(this.toCommands())}drawTo(e){return this.toCommands().forEach(t=>{switch(t.type){case"M":e.moveTo(t.x,t.y);break;case"L":e.lineTo(t.x,t.y);break}}),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,r=Math.PI*2){super(),this.center=e,this.radius=t,this.start=s,this.end=r}getPoint(e){const{radius:t,center:s}=this;return s.clone().add(this.getNormal(e).clone().scale(t))}getTangent(e,t=new u){const{x:s,y:r}=this.getNormal(e);return t.set(-r,s)}getNormal(e,t=new u){const{start:s,end:r}=this,i=e*(r-s)+s-.5*Math.PI;return t.set(Math.cos(i),Math.sin(i))}getControlPoints(){return[this.center]}getMinMax(e=u.MAX,t=u.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 st(o,e,t,s,r){const i=(s-e)*.5,n=(r-t)*.5,c=o*o,h=o*c;return(2*t-2*s+i+n)*h+(-3*t+3*s-2*i-n)*c+i*o+t}function bt(o,e){const t=1-o;return t*t*e}function At(o,e){return 2*(1-o)*o*e}function kt(o,e){return o*o*e}function nt(o,e,t,s){return bt(o,e)+At(o,t)+kt(o,s)}function It(o,e){const t=1-o;return t*t*t*e}function St(o,e){const t=1-o;return 3*t*t*o*e}function Nt(o,e){return 3*(1-o)*o*o*e}function $t(o,e){return o*o*o*e}function rt(o,e,t,s,r){return It(o,e)+St(o,t)+Nt(o,s)+$t(o,r)}class it extends k{constructor(e=new u,t=new u,s=new u,r=new u){super(),this.start=e,this.startControl=t,this.endControl=s,this.end=r}getPoint(e,t=new u){const{start:s,startControl:r,endControl:i,end:n}=this;return t.set(rt(e,s.x,r.x,i.x,n.x),rt(e,s.y,r.y,i.y,n.y))}getControlPoints(){return[this.start,this.startControl,this.endControl,this.end]}_solveQuadratic(e,t,s){const r=t*t-4*e*s;if(r<0)return[];const i=Math.sqrt(r),n=(-t+i)/(2*e),c=(-t-i)/(2*e);return[n,c].filter(h=>h>=0&&h<=1)}getMinMax(e=u.MAX,t=u.MIN){const s=this.start,r=this.startControl,i=this.endControl,n=this.end,c=this._solveQuadratic(3*(r.x-s.x),6*(i.x-r.x),3*(n.x-i.x)),h=this._solveQuadratic(3*(r.y-s.y),6*(i.y-r.y),3*(n.y-i.y)),a=[0,1,...c,...h];return((y,f)=>{for(const d of y)for(let g=0;g<=f;g++){const x=g/f-.5,m=Math.min(1,Math.max(0,d+x)),w=this.getPoint(m);e.x=Math.min(e.x,w.x),e.y=Math.min(e.y,w.y),t.x=Math.max(t.x,w.x),t.y=Math.max(t.y,w.y)}})(a,10),{min:e,max:t}}toCommands(){const{start:e,startControl:t,endControl:s,end:r}=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:r.x,y:r.y}]}drawTo(e){const{start:t,startControl:s,endControl:r,end:i}=this;return e.lineTo(t.x,t.y),e.bezierCurveTo(s.x,s.y,r.x,r.y,i.x,i.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 Et=new b,ot=new b,at=new b,_=new u;class ht extends k{constructor(e=new u,t=1,s=1,r=0,i=0,n=Math.PI*2,c=!1){super(),this.center=e,this.radiusX=t,this.radiusY=s,this.rotation=r,this.startAngle=i,this.endAngle=n,this.clockwise=c}isClockwise(){return this.clockwise}getPoint(e,t=new u){const s=Math.PI*2;let r=this.endAngle-this.startAngle;const i=Math.abs(r)<Number.EPSILON;for(;r<0;)r+=s;for(;r>s;)r-=s;r<Number.EPSILON&&(i?r=0:r=s),this.clockwise&&!i&&(r===s?r=-s:r=r-s);const n=this.startAngle+e*r;let c=this.center.x+this.radiusX*Math.cos(n),h=this.center.y+this.radiusY*Math.sin(n);if(this.rotation!==0){const a=Math.cos(this.rotation),l=Math.sin(this.rotation),y=c-this.center.x,f=h-this.center.y;c=y*a-f*l+this.center.x,h=y*l+f*a+this.center.y}return t.set(c,h)}toCommands(){const{center:e,radiusX:t,radiusY:s,startAngle:r,endAngle:i,clockwise:n,rotation:c}=this,{x:h,y:a}=e,l=h+t*Math.cos(r)*Math.cos(c)-s*Math.sin(r)*Math.sin(c),y=a+t*Math.cos(r)*Math.sin(c)+s*Math.sin(r)*Math.cos(c),f=Math.abs(r-i),d=f>Math.PI?1:0,g=n?1:0,x=c*180/Math.PI;if(f>=2*Math.PI){const m=r+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:l,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:l,y}]}else{const m=h+t*Math.cos(i)*Math.cos(c)-s*Math.sin(i)*Math.sin(c),w=a+t*Math.cos(i)*Math.sin(c)+s*Math.sin(i)*Math.cos(c);return[{type:"M",x:l,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:r,rotation:i,startAngle:n,endAngle:c,clockwise:h}=this;return e.ellipse(t.x,t.y,s,r,i,n,c,!h),this}matrix(e){return _.set(this.center.x,this.center.y),_.applyMatrix3(e),this.center.x=_.x,this.center.y=_.y,zt(e)?Lt(this,e):qt(this,e),this}getControlPoints(){return[this.center]}getMinMax(e=u.MAX,t=u.MIN){const{center:s,radiusX:r,radiusY:i,rotation:n}=this,{x:c,y:h}=s,a=Math.cos(n),l=Math.sin(n),y=Math.sqrt(r*r*a*a+i*i*l*l),f=Math.sqrt(r*r*l*l+i*i*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 Lt(o,e){const t=o.radiusX,s=o.radiusY,r=Math.cos(o.rotation),i=Math.sin(o.rotation),n=new u(t*r,t*i),c=new u(-s*i,s*r),h=n.applyMatrix3(e),a=c.applyMatrix3(e),l=Et.set(h.x,a.x,0,h.y,a.y,0,0,0,1),y=ot.copy(l).invert(),g=at.copy(y).transpose().multiply(y).elements,x=Dt(g[0],g[1],g[4]),m=Math.sqrt(x.rt1),w=Math.sqrt(x.rt2);if(o.radiusX=1/m,o.radiusY=1/w,o.rotation=Math.atan2(x.sn,x.cs),!((o.endAngle-o.startAngle)%(2*Math.PI)<Number.EPSILON)){const v=ot.set(m,0,0,0,w,0,0,0,1),S=at.set(x.cs,x.sn,0,-x.sn,x.cs,0,0,0,1),N=v.multiply(S).multiply(l),z=D=>{const{x:U,y:J}=new u(Math.cos(D),Math.sin(D)).applyMatrix3(N);return Math.atan2(J,U)};o.startAngle=z(o.startAngle),o.endAngle=z(o.endAngle),ct(e)&&(o.clockwise=!o.clockwise)}}function qt(o,e){const t=lt(e),s=ut(e);o.radiusX*=t,o.radiusY*=s;const r=t>Number.EPSILON?Math.atan2(e.elements[1],e.elements[0]):Math.atan2(-e.elements[3],e.elements[4]);o.rotation+=r,ct(e)&&(o.startAngle*=-1,o.endAngle*=-1,o.clockwise=!o.clockwise)}function ct(o){const e=o.elements;return e[0]*e[4]-e[1]*e[3]<0}function zt(o){const e=o.elements,t=e[0]*e[3]+e[1]*e[4];if(t===0)return!1;const s=lt(o),r=ut(o);return Math.abs(t/(s*r))>Number.EPSILON}function lt(o){const e=o.elements;return Math.sqrt(e[0]*e[0]+e[1]*e[1])}function ut(o){const e=o.elements;return Math.sqrt(e[3]*e[3]+e[4]*e[4])}function Dt(o,e,t){let s,r,i,n,c;const h=o+t,a=o-t,l=Math.sqrt(a*a+4*e*e);return h>0?(s=.5*(h+l),c=1/s,r=o*c*t-e*c*e):h<0?r=.5*(h-l):(s=.5*l,r=-.5*l),a>0?i=a+l:i=a-l,Math.abs(i)>2*Math.abs(e)?(c=-2*e/i,n=1/Math.sqrt(1+c*c),i=c*n):Math.abs(e)===0?(i=1,n=0):(c=-.5*i/e,i=1/Math.sqrt(1+c*c),n=c*i),a>0&&(c=i,i=-n,n=c),{rt1:s,rt2:r,cs:i,sn:n}}class X extends k{constructor(e=new u,t=new u){super(),this.start=e,this.end=t}getPoint(e,t=new u){return e===1?t.copy(this.end):t.copy(this.end).sub(this.start).scale(e).add(this.start),t}getPointAt(e,t=new u){return this.getPoint(e,t)}getTangent(e,t=new u){return t.subVectors(this.end,this.start).normalize()}getTangentAt(e,t=new u){return this.getTangent(e,t)}getControlPoints(){return[this.start,this.end]}getMinMax(e=u.MAX,t=u.MIN){const{start:s,end:r}=this;return e.x=Math.min(e.x,s.x,r.x),e.y=Math.min(e.y,s.y,r.y),t.x=Math.max(t.x,s.x,r.x),t.y=Math.max(t.y,s.y,r.y),{min:e,max:t}}toCommands(){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{start:t,end:s}=this;return e.lineTo(t.x,t.y),e.lineTo(s.x,s.y),this}copy(e){return super.copy(e),this.start.copy(e.start),this.end.copy(e.end),this}}class Xt extends k{constructor(t,s,r=0,i=1){super();T(this,"curveT",0);this.center=t,this.size=s,this.start=r,this.end=i,this.update()}update(){const{x:t,y:s}=this.center,r=new u(t+.5*this.size,s-.5*this.size),i=new u(t-.5*this.size,s-.5*this.size),n=new u(t,s+.5*this.size),c=new F(r,Math.SQRT1_2*this.size,-.25*Math.PI,.75*Math.PI),h=new F(i,Math.SQRT1_2*this.size,-.75*Math.PI,.25*Math.PI),a=new F(n,.5*Math.SQRT1_2*this.size,.75*Math.PI,1.25*Math.PI),l=new u(t,s+this.size),y=new u(t+this.size,s),f=new u().lerpVectors(y,l,.75),d=new u(t-this.size,s),g=new u().lerpVectors(d,l,.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 r;const i=.5*Math.PI;return s<i?(r=0,this.curveT=s/i):s<i+.75?(r=1,this.curveT=(s-i)/.75):s<5*Math.PI/8+.75?(r=2,this.curveT=(s-i-.75)/(Math.PI/8)):s<5*Math.PI/8+1.5?(r=3,this.curveT=(s-5*Math.PI/8-.75)/.75):(r=4,this.curveT=(s-5*Math.PI/8-1.5)/i),this.curves[r]}getTangent(t,s){return this.getCurve(t).getTangent(this.curveT,s)}getNormal(t,s){return this.getCurve(t).getNormal(this.curveT,s)}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(r=>r.getMinMax(t,s)),{min:t,max:s}}toCommands(){return this.curves.flatMap(t=>t.toCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class Ot extends k{constructor(t,s=0,r=0,i=0,n=1){super();T(this,"curves",[]);T(this,"curveT",0);T(this,"points",[]);this.center=t,this.radius=s,this.number=r,this.start=i,this.end=n,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 u(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 r=s*this.number,i=Math.floor(r);return this.curveT=r-i,this.curves[i]}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)}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(r=>r.getMinMax(t,s)),{min:t,max:s}}toCommands(){return this.curves.flatMap(t=>t.toCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class yt extends k{constructor(e=new u,t=new u,s=new u){super(),this.start=e,this.control=t,this.end=s}getPoint(e,t=new u){const{start:s,control:r,end:i}=this;return t.set(nt(e,s.x,r.x,i.x),nt(e,s.y,r.y,i.y)),t}getControlPoints(){return[this.start,this.control,this.end]}getMinMax(e=u.MAX,t=u.MIN){const{start:s,control:r,end:i}=this,n=.5*(s.x+r.x),c=.5*(s.y+r.y),h=.5*(s.x+i.x),a=.5*(s.y+i.y);return e.x=Math.min(e.x,s.x,i.x,n,h),e.y=Math.min(e.y,s.y,i.y,c,a),t.x=Math.max(t.x,s.x,i.x,n,h),t.y=Math.max(t.y,s.y,i.y,c,a),{min:e,max:t}}toCommands(){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{start:t,control:s,end:r}=this;return e.lineTo(t.x,t.y),e.quadraticCurveTo(s.x,s.y,r.x,r.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 gt extends k{constructor(t,s,r=1,i=0,n=1){super();T(this,"curves",[]);T(this,"curveT",0);this.center=t,this.rx=s,this.aspectRatio=r,this.start=i,this.end=n,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,r=this.rx,i=this.rx/this.aspectRatio,n=[new u(t-r,s-i),new u(t+r,s-i),new u(t+r,s+i),new u(t-r,s+i)];for(let c=0;c<4;c++)this.curves.push(new X(n[c].clone(),n[(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 r;return s<this.aspectRatio?(r=0,this.curveT=s/this.aspectRatio):s<this.aspectRatio+1?(r=1,this.curveT=(s-this.aspectRatio)/1):s<2*this.aspectRatio+1?(r=2,this.curveT=(s-this.aspectRatio-1)/this.aspectRatio):(r=3,this.curveT=(s-2*this.aspectRatio-1)/1),this.curves[r]}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)}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(r=>r.getMinMax(t,s)),{min:t,max:s}}toCommands(){return this.curves.flatMap(t=>t.toCommands())}drawTo(t){return this.curves.forEach(s=>s.drawTo(t)),this}}class ft extends k{constructor(e=[]){super(),this.points=e}getPoint(e,t=new u){const{points:s}=this,r=(s.length-1)*e,i=Math.floor(r),n=r-i,c=s[i===0?i:i-1],h=s[i],a=s[i>s.length-2?s.length-1:i+1],l=s[i>s.length-3?s.length-1:i+2];return t.set(st(n,c.x,h.x,a.x,l.x),st(n,c.y,h.y,a.y,l.y)),t}getControlPoints(){return this.points}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 u);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,r=t.length;s<r;s++){const{x:i,y:n}=t[s];this.lineTo(i,n)}return this}addCommands(t){return Y(t,this),this}addData(t){return this.addCommands(G(t)),this}getPoint(t,s=new u){const r=t*this.getLength(),i=this.getCurveLengths();let n=0;for(;n<i.length;){if(i[n]>=r){const c=i[n]-r,h=this.curves[n],a=h.getLength();return h.getPointAt(a===0?0:1-c/a,s)}n++}return s}getControlPoints(){return this.curves.flatMap(t=>t.getControlPoints())}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 r=0,i=this.curves.length;r<i;r++)s+=this.curves[r].getLength(),t.push(s);return this._cacheLengths=t,t}getSpacedPoints(t=40){const s=[];for(let r=0;r<=t;r++)s.push(this.getPoint(r/t));return this.autoClose&&s.push(s[0]),s}getPoints(t=12){const s=[],r=this.curves;let i;for(let n=0,c=r.length;n<c;n++){const a=r[n].getPoints(t);for(let l=0;l<a.length;l++){const y=a[l];i!=null&&i.equals(y)||(s.push(y),i=y)}}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.clone(),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.currentPoint.equals({x:t,y:s})||this.curves.push(new X(this.currentPoint.clone(),new u(t,s))),this._setCurrentPoint({x:t,y:s}),this}bezierCurveTo(t,s,r,i,n,c){return this.currentPoint.equals({x:n,y:c})||this.curves.push(new it(this.currentPoint.clone(),new u(t,s),new u(r,i),new u(n,c))),this._setCurrentPoint({x:n,y:c}),this}quadraticCurveTo(t,s,r,i){return this.currentPoint.equals({x:r,y:i})||this.curves.push(new yt(this.currentPoint.clone(),new u(t,s),new u(r,i))),this._setCurrentPoint({x:r,y:i}),this}arc(t,s,r,i,n,c){return this.ellipse(t,s,r,r,0,i,n,c),this}relativeArc(t,s,r,i,n,c){const h=this.currentPoint;return this.arc(t+h.x,s+h.y,r,i,n,c),this}arcTo(t,s,r,i,n){return console.warn("Method arcTo not supported yet"),this}ellipse(t,s,r,i,n,c,h,a=!0){const l=new ht(new u(t,s),r,i,n,c,h,!a);if(this.curves.length>0){const y=l.getPoint(0);y.equals(this.currentPoint)||this.lineTo(y.x,y.y)}return this.curves.push(l),this._setCurrentPoint(l.getPoint(1)),this}relativeEllipse(t,s,r,i,n,c,h,a){const l=this.currentPoint;return this.ellipse(t+l.x,s+l.y,r,i,n,c,h,a),this}rect(t,s,r,i){return this.curves.push(new gt(new u(t+r/2,s+i/2),r/2,r/i)),this._setCurrentPoint({x:t,y:s}),this}splineThru(t){return this.curves.push(new ft([this.currentPoint.clone()].concat(t))),this._setCurrentPoint(t[t.length-1]),this}getMinMax(t=u.MAX,s=u.MIN){return this.curves.forEach(r=>r.getMinMax(t,s)),{min:t,max:s}}getBoundingBox(){const{min:t,max:s}=this.getMinMax();return new L(t.x,t.y,s.x-t.x,s.y-t.y)}toCommands(){return this.curves.flatMap(t=>t.toCommands())}drawTo(t){var r;const s=(r=this.curves[0])==null?void 0:r.getPoint(0);return s&&t.moveTo(s.x,s.y),this.curves.forEach(i=>i.drawTo(t)),this.autoClose&&t.closePath(),this}copy(t){super.copy(t),this.curves=[];for(let s=0,r=t.curves.length;s<r;s++)this.curves.push(t.curves[s].clone());return this.autoClose=t.autoClose,this.currentPoint.copy(t.currentPoint),this}}function Rt(o){return o.replace(/[^a-z0-9]/gi,"-").replace(/\B([A-Z])/g,"-$1").toLowerCase()}function Ft(o,e,t,s){const r=e.clone().sub(o),i=s.clone().sub(t),n=t.clone().sub(o),c=r.cross(i);if(c===0)return new u((o.x+t.x)/2,(o.y+t.y)/2);const h=n.cross(i)/c;return Math.abs(h)>1?new u((o.x+t.x)/2,(o.y+t.y)/2):new u(o.x+h*r.x,o.y+h*r.y)}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:r}=this.currentPath;return s.equals({x:e,y:t})||(r.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,r,i,n){return this.currentPath.bezierCurveTo(e,t,s,r,i,n),this}quadraticCurveTo(e,t,s,r){return this.currentPath.quadraticCurveTo(e,t,s,r),this}arc(e,t,s,r,i,n){return this.currentPath.arc(e,t,s,r,i,n),this}arcTo(e,t,s,r,i){return this.currentPath.arcTo(e,t,s,r,i),this}ellipse(e,t,s,r,i,n,c,h){return this.currentPath.ellipse(e,t,s,r,i,n,c,h),this}rect(e,t,s,r){return this.currentPath.rect(e,t,s,r),this}addCommands(e){return Y(e,this),this}addData(e){return this.addCommands(G(e)),this}splineThru(e){return this.currentPath.splineThru(e),this}getControlPoints(){return this.paths.flatMap(e=>e.getControlPoints())}getCurves(){return this.paths.flatMap(e=>e.curves)}scale(e,t=e,s={x:0,y:0}){return this.getControlPoints().forEach(r=>{r.scale(e,t,s)}),this}skew(e,t=0,s={x:0,y:0}){return this.getControlPoints().forEach(r=>{r.skew(e,t,s)}),this}rotate(e,t={x:0,y:0}){return this.getControlPoints().forEach(s=>{s.rotate(e,t)}),this}bold(e){if(e===0)return this;const t=this.getCurves(),s=[],r=[],i=[];t.forEach((c,h)=>{const a=c.getControlPoints(),l=c.isClockwise();i[h]=a,r[h]=l;const y=a[0],f=a[a.length-1]??y;s.push({start:l?f:y,end:l?y:f,index:h})});const n=[];return s.forEach((c,h)=>{n[h]=[],s.forEach((a,l)=>{l!==h&&a.start.equals(c.end)&&n[h].push(a.index)})}),t.forEach((c,h)=>{const a=r[h];i[h].forEach(y=>{const f=c.getTForPoint(y),d=c.getNormal(f).scale(a?e:-e);y.add(d)})}),n.forEach((c,h)=>{const a=i[h];c.forEach(l=>{const y=i[l],f=Ft(a[a.length-1],a[a.length-2]??a[a.length-1],y[0],y[1]??y[0]);f&&(a[a.length-1].copy(f),y[0].copy(f))})}),this}matrix(e){return this.getCurves().forEach(t=>t.matrix(e)),this}getMinMax(e=u.MAX,t=u.MIN,s=!0){const r=this.strokeWidth;return this.getCurves().forEach(i=>{if(i.getMinMax(e,t),s&&r>1){const n=r/2,c=i.isClockwise(),h=[];for(let a=0;a<=1;a+=1/i.arcLengthDivisions){const l=i.getPoint(a),y=i.getNormal(a),f=y.clone().scale(c?n:-n),d=y.clone().scale(c?-n:n);h.push(l.clone().add(f),l.clone().add(d),l.clone().add({x:n,y:0}),l.clone().add({x:-n,y:0}),l.clone().add({x:0,y:n}),l.clone().add({x:0,y:-n}),l.clone().add({x:n,y:n}),l.clone().add({x:-n,y:-n}))}e.min(...h),t.max(...h)}}),{min:e,max:t}}getBoundingBox(e=!0){const{min:t,max:s}=this.getMinMax(void 0,void 0,e);return new L(t.x,t.y,s.x-t.x,s.y-t.y)}drawTo(e,t={}){t={...this.style,...t};const{fill:s="#000",stroke:r="none"}=t;return e.beginPath(),e.save(),q(e,t),this.paths.forEach(i=>{i.drawTo(e)}),s!=="none"&&e.fill(),r!=="none"&&e.stroke(),e.restore(),this}drawControlPointsTo(e,t={}){t={...this.style,...t};const{fill:s="#000",stroke:r="none"}=t;return e.beginPath(),e.save(),q(e,t),this.getControlPoints().forEach(i=>{e.moveTo(i.x,i.y),e.arc(i.x,i.y,4,0,Math.PI*2)}),s!=="none"&&e.fill(),r!=="none"&&e.stroke(),e.restore(),this}toCommands(){return this.paths.flatMap(e=>e.toCommands())}toData(){return this.paths.map(e=>e.toData()).join(" ")}toSvgPathString(){const e={...this.style,fill:this.style.fill??"#000",stroke:this.style.stroke??"none"},t={};for(const r in e)e[r]!==void 0&&(t[Rt(r)]=e[r]);Object.assign(t,{"stroke-width":`${this.strokeWidth}px`});let s="";for(const r in t)t[r]!==void 0&&(s+=`${r}:${t[r]};`);return`<path d="${this.toData()}" style="${s}"></path>`}toSvgString(){const{x:e,y:t,width:s,height:r}=this.getBoundingBox(),i=this.toSvgPathString();return`<svg viewBox="${e} ${t} ${s} ${r}" width="${s}px" height="${r}px" xmlns="http://www.w3.org/2000/svg">${i}</svg>`}toSvgUrl(){return`data:image/svg+xml;base64,${btoa(this.toSvgString())}`}toSvg(){return new DOMParser().parseFromString(this.toSvgString(),"image/svg+xml").documentElement}toCanvas(e={}){const{pixelRatio:t=2,...s}=e,{left:r,top:i,width:n,height:c}=this.getBoundingBox(),h=document.createElement("canvas");h.width=n*t,h.height=c*t,h.style.width=`${n}px`,h.style.height=`${c}px`;const a=h.getContext("2d");return a&&(a.scale(t,t),a.translate(-r,-i),this.drawTo(a,s)),h}copy(e){return this.currentPath=e.currentPath.clone(),this.paths=e.paths.map(t=>t.clone()),this.style={...e.style},this}clone(){return new this.constructor().copy(this)}}const Q="px",pt=90,dt=["mm","cm","in","pt","pc","px"],V={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(o){let e="px";if(typeof o=="string"||o instanceof String)for(let s=0,r=dt.length;s<r;s++){const i=dt[s];if(o.endsWith(i)){e=i,o=o.substring(0,o.length-i.length);break}}let t;return e==="px"&&Q!=="px"?t=V.in[Q]/pt:(t=V[e][Q],t<0&&(t=V[e].in*pt)),t*Number.parseFloat(o)}const _t=new b,B=new b,xt=new b,mt=new b;function Bt(o,e,t){if(!(o.hasAttribute("transform")||o.nodeName==="use"&&(o.hasAttribute("x")||o.hasAttribute("y"))))return null;const s=Ut(o);return t.length>0&&s.premultiply(t[t.length-1]),e.copy(s),t.push(s),s}function Ut(o){const e=new b,t=_t;if(o.nodeName==="use"&&(o.hasAttribute("x")||o.hasAttribute("y"))&&e.translate(M(o.getAttribute("x")),M(o.getAttribute("y"))),o.hasAttribute("transform")){const s=o.getAttribute("transform").split(")");for(let r=s.length-1;r>=0;r--){const i=s[r].trim();if(i==="")continue;const n=i.indexOf("("),c=i.length;if(n>0&&n<c){const h=i.slice(0,n),a=A(i.slice(n+1));switch(t.identity(),h){case"translate":if(a.length>=1){const l=a[0];let y=0;a.length>=2&&(y=a[1]),t.translate(l,y)}break;case"rotate":if(a.length>=1){let l=0,y=0,f=0;l=a[0]*Math.PI/180,a.length>=3&&(y=a[1],f=a[2]),B.makeTranslation(-y,-f),xt.makeRotation(l),mt.multiplyMatrices(xt,B),B.makeTranslation(y,f),t.multiplyMatrices(B,mt)}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 Wt(o){return new I().addPath(new R().arc(M(o.getAttribute("cx")||0),M(o.getAttribute("cy")||0),M(o.getAttribute("r")||0),0,Math.PI*2))}function Yt(o,e){if(!(!o.sheet||!o.sheet.cssRules||!o.sheet.cssRules.length))for(let t=0;t<o.sheet.cssRules.length;t++){const s=o.sheet.cssRules[t];if(s.type!==1)continue;const r=s.selectorText.split(/,/g).filter(Boolean).map(n=>n.trim()),i={};for(let n=s.style.length,c=0;c<n;c++){const h=s.style.item(c);i[h]=s.style.getPropertyValue(h)}for(let n=0;n<r.length;n++)e[r[n]]=Object.assign(e[r[n]]||{},{...i})}}function Gt(o){return new I().addPath(new R().ellipse(M(o.getAttribute("cx")||0),M(o.getAttribute("cy")||0),M(o.getAttribute("rx")||0),M(o.getAttribute("ry")||0),0,0,Math.PI*2))}function Qt(o){return new I().moveTo(M(o.getAttribute("x1")||0),M(o.getAttribute("y1")||0)).lineTo(M(o.getAttribute("x2")||0),M(o.getAttribute("y2")||0))}function Vt(o){const e=new I,t=o.getAttribute("d");return!t||t==="none"?null:(e.addData(t),e)}const jt=/([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;function Ht(o){var s;const e=new I;let t=0;return(s=o.getAttribute("points"))==null||s.replace(jt,(r,i,n)=>{const c=M(i),h=M(n);return t===0?e.moveTo(c,h):e.lineTo(c,h),t++,r}),e.currentPath.autoClose=!0,e}const Zt=/([+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?)(?:,|\s)([+-]?\d*\.?\d+(?:e[+-]?\d+)?)/g;function Jt(o){var s;const e=new I;let t=0;return(s=o.getAttribute("points"))==null||s.replace(Zt,(r,i,n)=>{const c=M(i),h=M(n);return t===0?e.moveTo(c,h):e.lineTo(c,h),t++,r}),e.currentPath.autoClose=!1,e}function Kt(o){const e=M(o.getAttribute("x")||0),t=M(o.getAttribute("y")||0),s=M(o.getAttribute("rx")||o.getAttribute("ry")||0),r=M(o.getAttribute("ry")||o.getAttribute("rx")||0),i=M(o.getAttribute("width")),n=M(o.getAttribute("height")),c=1-.551915024494,h=new I;return h.moveTo(e+s,t),h.lineTo(e+i-s,t),(s!==0||r!==0)&&h.bezierCurveTo(e+i-s*c,t,e+i,t+r*c,e+i,t+r),h.lineTo(e+i,t+n-r),(s!==0||r!==0)&&h.bezierCurveTo(e+i,t+n-r*c,e+i-s*c,t+n,e+i-s,t+n),h.lineTo(e+s,t+n),(s!==0||r!==0)&&h.bezierCurveTo(e+s*c,t+n,e,t+n-r*c,e,t+n-r),h.lineTo(e,t+r),(s!==0||r!==0)&&h.bezierCurveTo(e,t+r*c,e+s*c,t,e+s,t),h}function $(o,e,t){e=Object.assign({},e);let s={};if(o.hasAttribute("class")){const a=o.getAttribute("class").split(/\s/).filter(Boolean).map(l=>l.trim());for(let l=0;l<a.length;l++)s=Object.assign(s,t[`.${a[l]}`])}o.hasAttribute("id")&&(s=Object.assign(s,t[`#${o.getAttribute("id")}`]));for(let a=o.style.length,l=0;l<a;l++){const y=o.style.item(l),f=o.style.getPropertyValue(y);e[y]=f,s[y]=f}function r(a,l,y=i){o.hasAttribute(a)&&(e[l]=y(o.getAttribute(a))),s[a]&&(e[l]=y(s[a]))}function i(a){return a.startsWith("url")&&console.warn("url access in attributes is not implemented."),a}function n(a){return Math.max(0,Math.min(1,M(a)))}function c(a){return Math.max(0,M(a))}function h(a){return a.split(" ").filter(l=>l!=="").map(l=>M(l))}return r("fill","fill"),r("fill-opacity","fillOpacity",n),r("fill-rule","fillRule"),r("opacity","opacity",n),r("stroke","stroke"),r("stroke-opacity","strokeOpacity",n),r("stroke-width","strokeWidth",c),r("stroke-linecap","strokeLinecap"),r("stroke-linejoin","strokeLinejoin"),r("stroke-miterlimit","strokeMiterlimit",c),r("stroke-dasharray","strokeDasharray",h),r("stroke-dashoffset","strokeDashoffset",M),r("visibility","visibility"),e}function j(o,e,t=[],s={}){var y;if(o.nodeType!==1)return t;let r=!1,i=null,n={...e};switch(o.nodeName){case"svg":n=$(o,n,s);break;case"style":Yt(o,s);break;case"g":n=$(o,n,s);break;case"path":n=$(o,n,s),o.hasAttribute("d")&&(i=Vt(o));break;case"rect":n=$(o,n,s),i=Kt(o);break;case"polygon":n=$(o,n,s),i=Ht(o);break;case"polyline":n=$(o,n,s),i=Jt(o);break;case"circle":n=$(o,n,s),i=Wt(o);break;case"ellipse":n=$(o,n,s),i=Gt(o);break;case"line":n=$(o,n,s),i=Qt(o);break;case"defs":r=!0;break;case"use":{n=$(o,n,s);const d=(o.getAttributeNS("http://www.w3.org/1999/xlink","href")||"").substring(1),g=(y=o.viewportElement)==null?void 0:y.getElementById(d);g?j(g,n,t,s):console.warn(`'use node' references non-existent node id: ${d}`);break}default:console.warn(o);break}if(n.display==="none")return t;Object.assign(e,n);const c=new b,h=[],a=Bt(o,c,h);i&&(i.matrix(c),t.push(i),i.style=e);const l=o.childNodes;for(let f=0,d=l.length;f<d;f++){const g=l[f];r&&g.nodeName!=="style"&&g.nodeName!=="defs"||j(g,e,t,s)}return a&&(h.pop(),h.length>0?c.copy(h[h.length-1]):c.identity()),t}const Mt="data:image/svg+xml;",Pt=`${Mt}base64,`,wt=`${Mt}charset=utf8,`;function Tt(o){if(typeof o=="string"){let e;return o.startsWith(Pt)?(o=o.substring(Pt.length,o.length),e=atob(o)):o.startsWith(wt)?(o=o.substring(wt.length,o.length),e=decodeURIComponent(o)):e=o,new DOMParser().parseFromString(e,"image/svg+xml").documentElement}else return o}function te(o){return j(Tt(o),{})}function H(o,e=!0){if(!o.length)return;const t=u.MAX,s=u.MIN;return o.forEach(r=>r.getMinMax(t,s,e)),new L(t.x,t.y,s.x-t.x,s.y-t.y)}function Z(o){const{x:e,y:t,width:s,height:r}=H(o),i=o.map(n=>n.toSvgPathString()).join("");return`<svg viewBox="${e} ${t} ${s} ${r}" width="${s}px" height="${r}px" xmlns="http://www.w3.org/2000/svg">${i}</svg>`}function ee(o){return`data:image/svg+xml;base64,${btoa(Z(o))}`}function se(o){return new DOMParser().parseFromString(Z(o),"image/svg+xml").documentElement}function ne(o,e={}){const{pixelRatio:t=2,...s}=e,{left:r,top:i,width:n,height:c}=H(o),h=document.createElement("canvas");h.width=n*t,h.height=c*t,h.style.width=`${n}px`,h.style.height=`${c}px`;const a=h.getContext("2d");return a&&(a.scale(t,t),a.translate(-r,-i),o.forEach(l=>{l.drawTo(a,s)})),h}p.BoundingBox=L,p.CircleCurve=F,p.CubicBezierCurve=it,p.Curve=k,p.CurvePath=R,p.EllipseCurve=ht,p.HeartCurve=Xt,p.LineCurve=X,p.Matrix3=b,p.Path2D=I,p.PloygonCurve=Ot,p.QuadraticBezierCurve=yt,p.RectangularCurve=gt,p.SplineCurve=ft,p.Vector2=u,p.addPathCommandsToPath2D=Y,p.getPathsBoundingBox=H,p.parseArcCommand=tt,p.parsePathDataArgs=A,p.parseSvg=te,p.parseSvgToDom=Tt,p.pathCommandsToPathData=et,p.pathDataToPathCommands=G,p.pathsToCanvas=ne,p.pathsToSvg=se,p.pathsToSvgString=Z,p.pathsToSvgUrl=ee,p.setCanvasContext=q,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
package/dist/index.mjs
CHANGED
|
@@ -793,46 +793,77 @@ function parsePathDataArgs(input, flags, stride = 0) {
|
|
|
793
793
|
return result;
|
|
794
794
|
}
|
|
795
795
|
|
|
796
|
-
function commandToData(cmd) {
|
|
797
|
-
switch (cmd.type) {
|
|
798
|
-
case "m":
|
|
799
|
-
case "M":
|
|
800
|
-
return `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
801
|
-
case "h":
|
|
802
|
-
case "H":
|
|
803
|
-
return `${cmd.type} ${cmd.x}`;
|
|
804
|
-
case "v":
|
|
805
|
-
case "V":
|
|
806
|
-
return `${cmd.type} ${cmd.y}`;
|
|
807
|
-
case "l":
|
|
808
|
-
case "L":
|
|
809
|
-
return `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
810
|
-
case "c":
|
|
811
|
-
case "C":
|
|
812
|
-
return `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
813
|
-
case "s":
|
|
814
|
-
case "S":
|
|
815
|
-
return `${cmd.type} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
816
|
-
case "q":
|
|
817
|
-
case "Q":
|
|
818
|
-
return `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
|
|
819
|
-
case "t":
|
|
820
|
-
case "T":
|
|
821
|
-
return `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
822
|
-
case "a":
|
|
823
|
-
case "A":
|
|
824
|
-
return `${cmd.type} ${cmd.rx} ${cmd.ry} ${cmd.angle} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
|
|
825
|
-
case "z":
|
|
826
|
-
case "Z":
|
|
827
|
-
return cmd.type;
|
|
828
|
-
default:
|
|
829
|
-
return "";
|
|
830
|
-
}
|
|
831
|
-
}
|
|
832
796
|
function pathCommandsToPathData(commands) {
|
|
797
|
+
const first = { x: 0, y: 0 };
|
|
798
|
+
const prev = { x: 0, y: 0 };
|
|
833
799
|
let data = "";
|
|
834
800
|
for (let i = 0, len = commands.length; i < len; i++) {
|
|
835
|
-
|
|
801
|
+
const cmd = commands[i];
|
|
802
|
+
switch (cmd.type) {
|
|
803
|
+
case "m":
|
|
804
|
+
case "M":
|
|
805
|
+
if (cmd.x === prev.x && cmd.y === prev.y) {
|
|
806
|
+
continue;
|
|
807
|
+
}
|
|
808
|
+
data += `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
809
|
+
prev.x = cmd.x;
|
|
810
|
+
prev.y = cmd.y;
|
|
811
|
+
first.x = cmd.x;
|
|
812
|
+
first.y = cmd.y;
|
|
813
|
+
break;
|
|
814
|
+
case "h":
|
|
815
|
+
case "H":
|
|
816
|
+
data += `${cmd.type} ${cmd.x}`;
|
|
817
|
+
prev.x = cmd.x;
|
|
818
|
+
break;
|
|
819
|
+
case "v":
|
|
820
|
+
case "V":
|
|
821
|
+
data += `${cmd.type} ${cmd.y}`;
|
|
822
|
+
prev.y = cmd.y;
|
|
823
|
+
break;
|
|
824
|
+
case "l":
|
|
825
|
+
case "L":
|
|
826
|
+
data += `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
827
|
+
prev.x = cmd.x;
|
|
828
|
+
prev.y = cmd.y;
|
|
829
|
+
break;
|
|
830
|
+
case "c":
|
|
831
|
+
case "C":
|
|
832
|
+
data += `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
833
|
+
prev.x = cmd.x;
|
|
834
|
+
prev.y = cmd.y;
|
|
835
|
+
break;
|
|
836
|
+
case "s":
|
|
837
|
+
case "S":
|
|
838
|
+
data += `${cmd.type} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
|
|
839
|
+
prev.x = cmd.x;
|
|
840
|
+
prev.y = cmd.y;
|
|
841
|
+
break;
|
|
842
|
+
case "q":
|
|
843
|
+
case "Q":
|
|
844
|
+
data += `${cmd.type} ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
|
|
845
|
+
prev.x = cmd.x;
|
|
846
|
+
prev.y = cmd.y;
|
|
847
|
+
break;
|
|
848
|
+
case "t":
|
|
849
|
+
case "T":
|
|
850
|
+
data += `${cmd.type} ${cmd.x} ${cmd.y}`;
|
|
851
|
+
prev.x = cmd.x;
|
|
852
|
+
prev.y = cmd.y;
|
|
853
|
+
break;
|
|
854
|
+
case "a":
|
|
855
|
+
case "A":
|
|
856
|
+
data += `${cmd.type} ${cmd.rx} ${cmd.ry} ${cmd.angle} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
|
|
857
|
+
prev.x = cmd.x;
|
|
858
|
+
prev.y = cmd.y;
|
|
859
|
+
break;
|
|
860
|
+
case "z":
|
|
861
|
+
case "Z":
|
|
862
|
+
data += cmd.type;
|
|
863
|
+
prev.x = first.x;
|
|
864
|
+
prev.y = first.y;
|
|
865
|
+
break;
|
|
866
|
+
}
|
|
836
867
|
}
|
|
837
868
|
return data;
|
|
838
869
|
}
|
|
@@ -2816,13 +2847,15 @@ function parseCSSStylesheet(node, stylesheets) {
|
|
|
2816
2847
|
if (stylesheet.type !== 1)
|
|
2817
2848
|
continue;
|
|
2818
2849
|
const selectorList = stylesheet.selectorText.split(/,/g).filter(Boolean).map((i2) => i2.trim());
|
|
2850
|
+
const definitions = {};
|
|
2851
|
+
for (let len = stylesheet.style.length, i2 = 0; i2 < len; i2++) {
|
|
2852
|
+
const name = stylesheet.style.item(i2);
|
|
2853
|
+
definitions[name] = stylesheet.style.getPropertyValue(name);
|
|
2854
|
+
}
|
|
2819
2855
|
for (let j = 0; j < selectorList.length; j++) {
|
|
2820
|
-
const definitions = Object.fromEntries(
|
|
2821
|
-
Object.entries(stylesheet.style).filter(([, v]) => v !== "")
|
|
2822
|
-
);
|
|
2823
2856
|
stylesheets[selectorList[j]] = Object.assign(
|
|
2824
2857
|
stylesheets[selectorList[j]] || {},
|
|
2825
|
-
definitions
|
|
2858
|
+
{ ...definitions }
|
|
2826
2859
|
);
|
|
2827
2860
|
}
|
|
2828
2861
|
}
|
|
@@ -2961,20 +2994,22 @@ function parseStyle(node, style, stylesheets) {
|
|
|
2961
2994
|
if (node.hasAttribute("id")) {
|
|
2962
2995
|
stylesheetStyles = Object.assign(stylesheetStyles, stylesheets[`#${node.getAttribute("id")}`]);
|
|
2963
2996
|
}
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
}
|
|
2997
|
+
for (let len = node.style.length, i = 0; i < len; i++) {
|
|
2998
|
+
const name = node.style.item(i);
|
|
2999
|
+
const value = node.style.getPropertyValue(name);
|
|
3000
|
+
style[name] = value;
|
|
3001
|
+
stylesheetStyles[name] = value;
|
|
3002
|
+
}
|
|
3003
|
+
function addStyle(svgName, jsName, adjustFunction = copy) {
|
|
2972
3004
|
if (node.hasAttribute(svgName))
|
|
2973
3005
|
style[jsName] = adjustFunction(node.getAttribute(svgName));
|
|
2974
3006
|
if (stylesheetStyles[svgName])
|
|
2975
3007
|
style[jsName] = adjustFunction(stylesheetStyles[svgName]);
|
|
2976
|
-
|
|
2977
|
-
|
|
3008
|
+
}
|
|
3009
|
+
function copy(v) {
|
|
3010
|
+
if (v.startsWith("url"))
|
|
3011
|
+
console.warn("url access in attributes is not implemented.");
|
|
3012
|
+
return v;
|
|
2978
3013
|
}
|
|
2979
3014
|
function clamp(v) {
|
|
2980
3015
|
return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
|
|
@@ -3001,61 +3036,61 @@ function parseStyle(node, style, stylesheets) {
|
|
|
3001
3036
|
return style;
|
|
3002
3037
|
}
|
|
3003
3038
|
|
|
3004
|
-
function parseNode(node, style, paths = []) {
|
|
3039
|
+
function parseNode(node, style, paths = [], stylesheets = {}) {
|
|
3005
3040
|
if (node.nodeType !== 1)
|
|
3006
3041
|
return paths;
|
|
3007
3042
|
let isDefsNode = false;
|
|
3008
3043
|
let path = null;
|
|
3009
|
-
|
|
3044
|
+
let _style = { ...style };
|
|
3010
3045
|
switch (node.nodeName) {
|
|
3011
3046
|
case "svg":
|
|
3012
|
-
|
|
3047
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3013
3048
|
break;
|
|
3014
3049
|
case "style":
|
|
3015
3050
|
parseCSSStylesheet(node, stylesheets);
|
|
3016
3051
|
break;
|
|
3017
3052
|
case "g":
|
|
3018
|
-
|
|
3053
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3019
3054
|
break;
|
|
3020
3055
|
case "path":
|
|
3021
|
-
|
|
3056
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3022
3057
|
if (node.hasAttribute("d"))
|
|
3023
3058
|
path = parsePathNode(node);
|
|
3024
3059
|
break;
|
|
3025
3060
|
case "rect":
|
|
3026
|
-
|
|
3061
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3027
3062
|
path = parseRectNode(node);
|
|
3028
3063
|
break;
|
|
3029
3064
|
case "polygon":
|
|
3030
|
-
|
|
3065
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3031
3066
|
path = parsePolygonNode(node);
|
|
3032
3067
|
break;
|
|
3033
3068
|
case "polyline":
|
|
3034
|
-
|
|
3069
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3035
3070
|
path = parsePolylineNode(node);
|
|
3036
3071
|
break;
|
|
3037
3072
|
case "circle":
|
|
3038
|
-
|
|
3073
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3039
3074
|
path = parseCircleNode(node);
|
|
3040
3075
|
break;
|
|
3041
3076
|
case "ellipse":
|
|
3042
|
-
|
|
3077
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3043
3078
|
path = parseEllipseNode(node);
|
|
3044
3079
|
break;
|
|
3045
3080
|
case "line":
|
|
3046
|
-
|
|
3081
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3047
3082
|
path = parseLineNode(node);
|
|
3048
3083
|
break;
|
|
3049
3084
|
case "defs":
|
|
3050
3085
|
isDefsNode = true;
|
|
3051
3086
|
break;
|
|
3052
3087
|
case "use": {
|
|
3053
|
-
|
|
3088
|
+
_style = parseStyle(node, _style, stylesheets);
|
|
3054
3089
|
const href = node.getAttributeNS("http://www.w3.org/1999/xlink", "href") || "";
|
|
3055
3090
|
const usedNodeId = href.substring(1);
|
|
3056
3091
|
const usedNode = node.viewportElement?.getElementById(usedNodeId);
|
|
3057
3092
|
if (usedNode) {
|
|
3058
|
-
parseNode(usedNode,
|
|
3093
|
+
parseNode(usedNode, _style, paths, stylesheets);
|
|
3059
3094
|
} else {
|
|
3060
3095
|
console.warn(`'use node' references non-existent node id: ${usedNodeId}`);
|
|
3061
3096
|
}
|
|
@@ -3065,6 +3100,10 @@ function parseNode(node, style, paths = []) {
|
|
|
3065
3100
|
console.warn(node);
|
|
3066
3101
|
break;
|
|
3067
3102
|
}
|
|
3103
|
+
if (_style.display === "none") {
|
|
3104
|
+
return paths;
|
|
3105
|
+
}
|
|
3106
|
+
Object.assign(style, _style);
|
|
3068
3107
|
const currentTransform = new Matrix3();
|
|
3069
3108
|
const transformStack = [];
|
|
3070
3109
|
const transform = getNodeTransform(node, currentTransform, transformStack);
|
|
@@ -3078,7 +3117,7 @@ function parseNode(node, style, paths = []) {
|
|
|
3078
3117
|
const node2 = childNodes[i];
|
|
3079
3118
|
if (isDefsNode && node2.nodeName !== "style" && node2.nodeName !== "defs")
|
|
3080
3119
|
continue;
|
|
3081
|
-
parseNode(node2, style, paths);
|
|
3120
|
+
parseNode(node2, style, paths, stylesheets);
|
|
3082
3121
|
}
|
|
3083
3122
|
if (transform) {
|
|
3084
3123
|
transformStack.pop();
|
|
@@ -3127,5 +3166,34 @@ function getPathsBoundingBox(paths, withStyle = true) {
|
|
|
3127
3166
|
paths.forEach((path) => path.getMinMax(min, max, withStyle));
|
|
3128
3167
|
return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
|
|
3129
3168
|
}
|
|
3169
|
+
function pathsToSvgString(paths) {
|
|
3170
|
+
const { x, y, width, height } = getPathsBoundingBox(paths);
|
|
3171
|
+
const content = paths.map((path) => path.toSvgPathString()).join("");
|
|
3172
|
+
return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${content}</svg>`;
|
|
3173
|
+
}
|
|
3174
|
+
function pathsToSvgUrl(paths) {
|
|
3175
|
+
return `data:image/svg+xml;base64,${btoa(pathsToSvgString(paths))}`;
|
|
3176
|
+
}
|
|
3177
|
+
function pathsToSvg(paths) {
|
|
3178
|
+
return new DOMParser().parseFromString(pathsToSvgString(paths), "image/svg+xml").documentElement;
|
|
3179
|
+
}
|
|
3180
|
+
function pathsToCanvas(paths, options = {}) {
|
|
3181
|
+
const { pixelRatio = 2, ...style } = options;
|
|
3182
|
+
const { left, top, width, height } = getPathsBoundingBox(paths);
|
|
3183
|
+
const canvas = document.createElement("canvas");
|
|
3184
|
+
canvas.width = width * pixelRatio;
|
|
3185
|
+
canvas.height = height * pixelRatio;
|
|
3186
|
+
canvas.style.width = `${width}px`;
|
|
3187
|
+
canvas.style.height = `${height}px`;
|
|
3188
|
+
const ctx = canvas.getContext("2d");
|
|
3189
|
+
if (ctx) {
|
|
3190
|
+
ctx.scale(pixelRatio, pixelRatio);
|
|
3191
|
+
ctx.translate(-left, -top);
|
|
3192
|
+
paths.forEach((path) => {
|
|
3193
|
+
path.drawTo(ctx, style);
|
|
3194
|
+
});
|
|
3195
|
+
}
|
|
3196
|
+
return canvas;
|
|
3197
|
+
}
|
|
3130
3198
|
|
|
3131
|
-
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, addPathCommandsToPath2D, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContext };
|
|
3199
|
+
export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, addPathCommandsToPath2D, getPathsBoundingBox, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, pathsToCanvas, pathsToSvg, pathsToSvgString, pathsToSvgUrl, setCanvasContext };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "modern-path2d",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.4",
|
|
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",
|