modern-path2d 0.1.10 → 0.1.11

package/dist/index.cjs

@@ -1,5 +1,33 @@
 'use strict';
 
+const lineJoinMap = {
+  "arcs": "bevel",
+  "bevel": "bevel",
+  "miter": "miter",
+  "miter-clip": "miter",
+  "round": "round"
+};
+function setCanvasContextByPath(ctx, path) {
+  const {
+    fill = "#000",
+    stroke = "none",
+    strokeWidth = stroke === "none" ? 0 : 1,
+    strokeLinecap = "round",
+    strokeLinejoin = "miter",
+    strokeMiterlimit = 0,
+    strokeDasharray,
+    strokeDashoffset = 0
+  } = path.style;
+  ctx.fillStyle = fill;
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = strokeWidth;
+  ctx.lineCap = strokeLinecap;
+  ctx.lineJoin = lineJoinMap[strokeLinejoin];
+  ctx.miterLimit = strokeMiterlimit;
+  ctx.lineDashOffset = strokeDashoffset;
+  strokeDasharray && ctx.setLineDash(strokeDasharray);
+}
+
 class Vector2 {
   constructor(x = 0, y = 0) {
     this.x = x;
@@ -2080,6 +2108,10 @@ class CurvePath extends Curve {
   }
 }
 
+function toKebabCase(str) {
+  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+}
+
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -2090,7 +2122,7 @@ class Path2D {
   constructor(path) {
     __publicField(this, "currentPath", new CurvePath());
     __publicField(this, "paths", [this.currentPath]);
-    __publicField(this, "userData");
+    __publicField(this, "style", {});
     if (path) {
       if (path instanceof Path2D) {
         this.addPath(path);
@@ -2107,6 +2139,9 @@ class Path2D {
   get currentPoint() {
     return this.currentPath.currentPoint;
   }
+  get strokeWidth() {
+    return this.style.strokeWidth ?? ((this.style.stroke ?? "none") === "none" ? 0 : 1);
+  }
   addPath(path) {
     if (path instanceof Path2D) {
       this.paths.push(...path.paths.map((v) => v.clone()));
@@ -2194,9 +2229,17 @@ class Path2D {
     this.forEachCurve((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
-  getBoundingBox() {
+  getBoundingBox(withStrokeWidth = true) {
     const { min, max } = this.getMinMax();
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+    const bbox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+    if (withStrokeWidth) {
+      const strokeWidth = this.strokeWidth;
+      bbox.left -= strokeWidth / 2;
+      bbox.top -= strokeWidth / 2;
+      bbox.width += strokeWidth;
+      bbox.height += strokeWidth;
+    }
+    return bbox;
   }
   getCommands() {
     return this.paths.flatMap((path) => path.getCommands());
@@ -2204,46 +2247,74 @@ class Path2D {
   getData() {
     return this.paths.map((path) => path.getData()).join(" ");
   }
-  getSvgString() {
+  getSvgPathXml() {
+    const style = {
+      ...this.style,
+      fill: this.style.fill ?? "#000",
+      stroke: this.style.stroke ?? "none"
+    };
+    const cssStyle = {};
+    for (const key in style) {
+      if (style[key] !== void 0) {
+        cssStyle[toKebabCase(key)] = style[key];
+      }
+    }
+    Object.assign(cssStyle, {
+      "stroke-width": `${this.strokeWidth}px`
+    });
+    let cssText = "";
+    for (const key in cssStyle) {
+      if (cssStyle[key] !== void 0) {
+        cssText += `${key}:${cssStyle[key]};`;
+      }
+    }
+    return `<path d="${this.getData()}" style="${cssText}"></path>`;
+  }
+  getSvgXml() {
     const { x, y, width, height } = this.getBoundingBox();
-    const strokeWidth = 1;
-    return `<svg viewBox="${x - strokeWidth} ${y - strokeWidth} ${width + strokeWidth * 2} ${height + strokeWidth * 2}" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" d="${this.getData()}"></path></svg>`;
+    const path = this.getSvgPathXml();
+    return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${path}</svg>`;
   }
   getSvgDataUri() {
-    return `data:image/svg+xml;base64,${btoa(this.getSvgString())}`;
+    return `data:image/svg+xml;base64,${btoa(this.getSvgXml())}`;
   }
   drawTo(ctx) {
+    const {
+      fill = "#000",
+      stroke = "none"
+    } = this.style;
+    setCanvasContextByPath(ctx, this);
     this.paths.forEach((path) => {
       path.drawTo(ctx);
     });
-  }
-  strokeTo(ctx) {
-    this.drawTo(ctx);
-    ctx.stroke();
-  }
-  fillTo(ctx) {
-    this.drawTo(ctx);
-    ctx.fill();
+    if (fill !== "none") {
+      ctx.fill();
+    }
+    if (stroke !== "none") {
+      ctx.stroke();
+    }
   }
   copy(source) {
     this.currentPath = source.currentPath.clone();
     this.paths = source.paths.map((path) => path.clone());
-    this.userData = source.userData;
+    this.style = { ...source.style };
     return this;
   }
-  toCanvas(fill = true) {
-    const canvas = document.createElement("canvas");
+  toSvg() {
+    return new DOMParser().parseFromString(this.getSvgXml(), "image/svg+xml").documentElement;
+  }
+  toCanvas(pixelRatio = 2) {
     const { left, top, width, height } = this.getBoundingBox();
-    canvas.width = width;
-    canvas.height = height;
+    const canvas = document.createElement("canvas");
+    canvas.width = width * pixelRatio;
+    canvas.height = height * pixelRatio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     if (ctx) {
+      ctx.scale(pixelRatio, pixelRatio);
       ctx.translate(-left, -top);
-      if (fill) {
-        this.fillTo(ctx);
-      } else {
-        this.strokeTo(ctx);
-      }
+      this.drawTo(ctx);
     }
     return canvas;
   }
@@ -2636,18 +2707,21 @@ function parseStyle(node, style, stylesheets) {
   function positive(v) {
     return Math.max(0, parseFloatWithUnits(v));
   }
+  function array(v) {
+    return v.split(" ").filter((v2) => v2 !== "").map((v2) => parseFloatWithUnits(v2));
+  }
   addStyle("fill", "fill");
   addStyle("fill-opacity", "fillOpacity", clamp);
   addStyle("fill-rule", "fillRule");
   addStyle("opacity", "opacity", clamp);
   addStyle("stroke", "stroke");
-  addStyle("stroke-dashoffset", "strokeDashoffset");
-  addStyle("stroke-dasharray", "strokeDasharray");
-  addStyle("stroke-linecap", "strokeLineCap");
-  addStyle("stroke-linejoin", "strokeLineJoin");
-  addStyle("stroke-miterlimit", "strokeMiterLimit", positive);
   addStyle("stroke-opacity", "strokeOpacity", clamp);
   addStyle("stroke-width", "strokeWidth", positive);
+  addStyle("stroke-linecap", "strokeLinecap");
+  addStyle("stroke-linejoin", "strokeLinejoin");
+  addStyle("stroke-miterlimit", "strokeMiterlimit", positive);
+  addStyle("stroke-dasharray", "strokeDasharray", array);
+  addStyle("stroke-dashoffset", "strokeDashoffset", parseFloatWithUnits);
   addStyle("visibility", "visibility");
   return style;
 }
@@ -2722,7 +2796,7 @@ function parseNode(node, style, paths = []) {
   if (path) {
     path.transform(currentTransform);
     paths.push(path);
-    path.userData = { node, style };
+    path.style = style;
   }
   const childNodes = node.childNodes;
   for (let i = 0, len = childNodes.length; i < len; i++) {
@@ -2766,15 +2840,7 @@ function parseSvgToDom(svg) {
   }
 }
 function parseSvg(svg) {
-  return parseNode(parseSvgToDom(svg), {
-    fill: "#000",
-    fillOpacity: 1,
-    strokeOpacity: 1,
-    strokeWidth: 1,
-    strokeLineJoin: "miter",
-    strokeLineCap: "butt",
-    strokeMiterLimit: 4
-  });
+  return parseNode(parseSvgToDom(svg), {});
 }
 
 exports.BoundingBox = BoundingBox;
@@ -2792,5 +2858,11 @@ exports.QuadraticBezierCurve = QuadraticBezierCurve;
 exports.RectangularCurve = RectangularCurve;
 exports.SplineCurve = SplineCurve;
 exports.Vector2 = Vector2;
+exports.addPathCommandsToPath2D = addPathCommandsToPath2D;
+exports.parseArcCommand = parseArcCommand;
+exports.parsePathDataArgs = parsePathDataArgs;
 exports.parseSvg = parseSvg;
 exports.parseSvgToDom = parseSvgToDom;
+exports.pathCommandsToPathData = pathCommandsToPathData;
+exports.pathDataToPathCommands = pathDataToPathCommands;
+exports.setCanvasContextByPath = setCanvasContextByPath;

package/dist/index.d.cts

@@ -65,90 +65,6 @@ declare class BoundingBox {
     toArray(): [number, number, number, number];
 }
 
-declare class CurvePath extends Curve {
-    curves: Curve[];
-    startPoint?: Vector2;
-    currentPoint: Vector2;
-    autoClose: boolean;
-    protected _cacheLengths: number[];
-    constructor(points?: Vector2[]);
-    addCurve(curve: Curve): this;
-    addPoints(points: Vector2[]): this;
-    addCommands(commands: PathCommand[]): this;
-    addData(data: string): this;
-    getPoint(t: number, output?: Vector2): Vector2;
-    getLength(): number;
-    updateArcLengths(): void;
-    getCurveLengths(): number[];
-    getSpacedPoints(divisions?: number): Vector2[];
-    getPoints(divisions?: number): Vector2[];
-    protected _setCurrentPoint(point: VectorLike): this;
-    closePath(): this;
-    moveTo(x: number, y: number): this;
-    lineTo(x: number, y: number): this;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    rect(x: number, y: number, w: number, h: number): this;
-    splineThru(points: Vector2[]): this;
-    transformPoint(cb: (point: Vector2) => void): this;
-    getMinMax(min?: Vector2, max?: Vector2): {
-        min: Vector2;
-        max: Vector2;
-    };
-    getBoundingBox(): BoundingBox;
-    getCommands(): PathCommand[];
-    drawTo(ctx: CanvasRenderingContext2D): this;
-    copy(source: CurvePath): this;
-}
-
-/**
- * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
- */
-declare class Path2D<T = any> {
-    currentPath: CurvePath;
-    paths: CurvePath[];
-    userData?: T;
-    get startPoint(): Vector2 | undefined;
-    get currentPoint(): Vector2 | undefined;
-    constructor(path?: Path2D | PathCommand[] | string);
-    addPath(path: Path2D | CurvePath): this;
-    closePath(): this;
-    moveTo(x: number, y: number): this;
-    lineTo(x: number, y: number): this;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    rect(x: number, y: number, w: number, h: number): this;
-    addCommands(commands: PathCommand[]): this;
-    addData(data: string): this;
-    splineThru(points: Vector2[]): this;
-    forEachCurve(cb: (curve: Curve) => void): this;
-    transformPoint(cb: (point: Vector2) => void): this;
-    transform(matrix: Matrix3): this;
-    getMinMax(min?: Vector2, max?: Vector2): {
-        min: Vector2;
-        max: Vector2;
-    };
-    getBoundingBox(): BoundingBox;
-    getCommands(): PathCommand[];
-    getData(): string;
-    getSvgString(): string;
-    getSvgDataUri(): string;
-    drawTo(ctx: CanvasRenderingContext2D): void;
-    strokeTo(ctx: CanvasRenderingContext2D): void;
-    fillTo(ctx: CanvasRenderingContext2D): void;
-    copy(source: Path2D): this;
-    toCanvas(fill?: boolean): HTMLCanvasElement;
-    clone(): this;
-}
-
 /**
  * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
  */
@@ -202,6 +118,49 @@ type PathCommand = {
 } | {
     type: 'z' | 'Z';
 };
+type FillRule = 'nonzero' | 'evenodd';
+type StrokeLinecap = 'butt' | 'round' | 'square';
+type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
+interface PathStyle {
+    [key: string]: any;
+    fill?: string;
+    fillOpacity?: number;
+    fillRule?: FillRule;
+    opacity?: number;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinecap?: StrokeLinecap;
+    strokeLinejoin?: StrokeLinejoin;
+    strokeMiterlimit?: number;
+    strokeDasharray?: number[];
+    strokeDashoffset?: number;
+    visibility?: string;
+}
+
+/**
+ * @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
+ */
+declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
+
+/**
+ * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
+ * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
+ * From
+ * rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ * To
+ * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
+ */
+declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
+
+/**
+ * from https://github.com/ppvg/svg-numbers (MIT License)
+ */
+declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
+
+declare function pathCommandsToPathData(commands: PathCommand[]): string;
+
+declare function pathDataToPathCommands(d: string): PathCommand[];
 
 declare abstract class Curve {
     arcLengthDivisions: number;
@@ -410,7 +369,94 @@ declare class SplineCurve extends Curve {
     copy(source: SplineCurve): this;
 }
 
+declare class CurvePath extends Curve {
+    curves: Curve[];
+    startPoint?: Vector2;
+    currentPoint: Vector2;
+    autoClose: boolean;
+    protected _cacheLengths: number[];
+    constructor(points?: Vector2[]);
+    addCurve(curve: Curve): this;
+    addPoints(points: Vector2[]): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
+    getPoint(t: number, output?: Vector2): Vector2;
+    getLength(): number;
+    updateArcLengths(): void;
+    getCurveLengths(): number[];
+    getSpacedPoints(divisions?: number): Vector2[];
+    getPoints(divisions?: number): Vector2[];
+    protected _setCurrentPoint(point: VectorLike): this;
+    closePath(): this;
+    moveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    rect(x: number, y: number, w: number, h: number): this;
+    splineThru(points: Vector2[]): this;
+    transformPoint(cb: (point: Vector2) => void): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
+    };
+    getBoundingBox(): BoundingBox;
+    getCommands(): PathCommand[];
+    drawTo(ctx: CanvasRenderingContext2D): this;
+    copy(source: CurvePath): this;
+}
+
+/**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
+ */
+declare class Path2D {
+    currentPath: CurvePath;
+    paths: CurvePath[];
+    style: PathStyle;
+    get startPoint(): Vector2 | undefined;
+    get currentPoint(): Vector2 | undefined;
+    get strokeWidth(): number;
+    constructor(path?: Path2D | PathCommand[] | string);
+    addPath(path: Path2D | CurvePath): this;
+    closePath(): this;
+    moveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    rect(x: number, y: number, w: number, h: number): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
+    splineThru(points: Vector2[]): this;
+    forEachCurve(cb: (curve: Curve) => void): this;
+    transformPoint(cb: (point: Vector2) => void): this;
+    transform(matrix: Matrix3): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
+    };
+    getBoundingBox(withStrokeWidth?: boolean): BoundingBox;
+    getCommands(): PathCommand[];
+    getData(): string;
+    getSvgPathXml(): string;
+    getSvgXml(): string;
+    getSvgDataUri(): string;
+    drawTo(ctx: CanvasRenderingContext2D): void;
+    copy(source: Path2D): this;
+    toSvg(): SVGElement;
+    toCanvas(pixelRatio?: number): HTMLCanvasElement;
+    clone(): this;
+}
+
+declare function setCanvasContextByPath(ctx: CanvasRenderingContext2D, path: Path2D): void;
+
 declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
 declare function parseSvg(svg: string | SVGElement): Path2D[];
 
-export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, type VectorLike, parseSvg, parseSvgToDom };
+export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContextByPath };