modern-path2d 0.0.5 → 0.1.1

package/dist/index.d.mts

@@ -1,37 +1,23 @@
-type PathCommand = {
-    type: 'M';
-    x: number;
-    y: number;
-} | {
-    type: 'L';
-    x: number;
-    y: number;
-} | {
-    type: 'C';
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    x: number;
-    y: number;
-} | {
-    type: 'Q';
-    x1: number;
-    y1: number;
-    x: number;
-    y: number;
-} | {
-    type: 'A';
-    rx: number;
-    ry: number;
-    xAxisRotation: number;
-    largeArcFlag: number;
-    sweepFlag: number;
-    x: number;
-    y: number;
-} | {
-    type: 'Z';
-};
+declare class Matrix3 {
+    elements: number[];
+    constructor(n11?: number, n12?: number, n13?: number, n21?: number, n22?: number, n23?: number, n31?: number, n32?: number, n33?: number);
+    set(n11: number, n12: number, n13: number, n21: number, n22: number, n23: number, n31: number, n32: number, n33: number): this;
+    identity(): this;
+    copy(m: Matrix3): this;
+    multiply(m: Matrix3): this;
+    premultiply(m: Matrix3): this;
+    multiplyMatrices(a: Matrix3, b: Matrix3): this;
+    invert(): this;
+    transpose(): this;
+    scale(sx: number, sy: number): this;
+    rotate(theta: number): this;
+    translate(tx: number, ty: number): this;
+    makeTranslation(x: number, y: number): this;
+    makeRotation(theta: number): this;
+    makeScale(x: number, y: number): this;
+    fromArray(array: number[], offset?: number): this;
+    clone(): Matrix3;
+}
 
 declare class Point2D {
     x: number;
@@ -51,36 +37,11 @@ declare class Point2D {
     normalize(): this;
     lerpVectors(v1: Point2D, v2: Point2D, alpha: number): this;
     equals(point: Point2D): boolean;
+    applyMatrix3(matrix3: Matrix3): this;
     copy(point: Point2D): this;
     clone(): Point2D;
 }
 
-declare abstract class Curve {
-    arcLengthDivisions: number;
-    protected _cacheArcLengths?: number[];
-    protected _needsUpdate: boolean;
-    abstract getPoint(t: number, output?: Point2D): Point2D;
-    abstract getCommands(): PathCommand[];
-    abstract drawTo(ctx: CanvasRenderingContext2D): void;
-    getMinMax(min?: Point2D, max?: Point2D): {
-        min: Point2D;
-        max: Point2D;
-    };
-    getDivisions(divisions: number): number;
-    getPointAt(u: number, output?: Point2D): Point2D;
-    getPoints(divisions?: number): Point2D[];
-    getSpacedPoints(divisions?: number): Point2D[];
-    getLength(): number;
-    getLengths(divisions?: number): number[];
-    updateArcLengths(): void;
-    getUtoTmapping(u: number, distance?: number): number;
-    getTangent(t: number, output?: Point2D): Point2D;
-    getTangentAt(u: number, output?: Point2D): Point2D;
-    getData(): string;
-    clone(): this;
-    copy(source: Curve): this;
-}
-
 declare class CurvePath extends Curve {
     curves: Curve[];
     currentPoint: Point2D;
@@ -104,32 +65,164 @@ declare class CurvePath extends Curve {
     splineThru(points: Point2D[]): this;
     arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
     absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
-    ellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    absellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
+    absellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
     getCommands(): PathCommand[];
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    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;
+    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: Point2D[]): this;
+    forEachCurve(cb: (curve: Curve) => void): this;
+    transform(matrix: Matrix3): this;
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
+    getBoundingBox(): {
+        x: number;
+        y: number;
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    getCommands(): PathCommand[];
+    getData(): string;
+    getSvgString(): string;
+    getSvgDataUri(): string;
+    drawTo(ctx: CanvasRenderingContext2D): void;
+    strokeTo(ctx: CanvasRenderingContext2D): void;
+    fillTo(ctx: CanvasRenderingContext2D): void;
+    copy(source: Path2D): this;
+    clone(): Path2D;
+}
+
+/**
+ * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
+ */
+type PathCommand = {
+    type: 'm' | 'M';
+    x: number;
+    y: number;
+} | {
+    type: 'h' | 'H';
+    x: number;
+} | {
+    type: 'v' | 'V';
+    y: number;
+} | {
+    type: 'l' | 'L';
+    x: number;
+    y: number;
+} | {
+    type: 'c' | 'C';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    x: number;
+    y: number;
+} | {
+    type: 's' | 'S';
+    x2: number;
+    y2: number;
+    x: number;
+    y: number;
+} | {
+    type: 'q' | 'Q';
+    x1: number;
+    y1: number;
+    x: number;
+    y: number;
+} | {
+    type: 't' | 'T';
+    x: number;
+    y: number;
+} | {
+    type: 'a' | 'A';
+    rx: number;
+    ry: number;
+    angle: number;
+    largeArcFlag: number;
+    sweepFlag: number;
+    x: number;
+    y: number;
+} | {
+    type: 'z' | 'Z';
+};
+
+declare abstract class Curve {
+    arcLengthDivisions: number;
+    protected _cacheArcLengths?: number[];
+    protected _needsUpdate: boolean;
+    abstract getPoint(t: number, output?: Point2D): Point2D;
+    getPointAt(u: number, output?: Point2D): Point2D;
+    getPoints(divisions?: number): Point2D[];
+    getSpacedPoints(divisions?: number): Point2D[];
+    getLength(): number;
+    getLengths(divisions?: number): number[];
+    updateArcLengths(): void;
+    getUtoTmapping(u: number, distance?: number): number;
+    getTangent(t: number, output?: Point2D): Point2D;
+    getTangentAt(u: number, output?: Point2D): Point2D;
+    /** overrideable */
+    transform(matrix: Matrix3): this;
+    /** overrideable */
+    getDivisions(divisions: number): number;
+    /** overrideable */
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
+    /** overrideable */
+    getCommands(): PathCommand[];
+    getData(): string;
+    /** overrideable */
+    drawTo(ctx: CanvasRenderingContext2D): this;
+    copy(source: Curve): this;
+    clone(): this;
+}
+
 declare class CircleCurve extends Curve {
     center: Point2D;
     radius: number;
     start: number;
     end: number;
     constructor(center: Point2D, radius: number, start?: number, end?: number);
+    getPoint(t: number): Point2D;
+    getTangent(t: number): Point2D;
+    getNormal(t: number): Point2D;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    getPoint(t: number): Point2D;
-    getTangent(t: number): Point2D;
-    getNormal(t: number): Point2D;
-    getCommands(): PathCommand[];
-    drawTo(_ctx: CanvasRenderingContext2D): void;
 }
 
 declare class CubicBezierCurve extends Curve {
@@ -139,29 +232,31 @@ declare class CubicBezierCurve extends Curve {
     v3: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D, v3?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
+    transform(matrix: Matrix3): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
     getCommands(): PathCommand[];
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: CubicBezierCurve): this;
 }
 
 declare class EllipseCurve extends Curve {
     x: number;
     y: number;
-    rx: number;
-    ry: number;
+    radiusX: number;
+    radiusY: number;
     startAngle: number;
     endAngle: number;
     clockwise: boolean;
     rotation: number;
-    constructor(x?: number, y?: number, rx?: number, ry?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
-    getDivisions(divisions?: number): number;
+    constructor(x?: number, y?: number, radiusX?: number, radiusY?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
     getPoint(t: number, output?: Point2D): Point2D;
+    getDivisions(divisions?: number): number;
     getCommands(): PathCommand[];
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    drawTo(ctx: CanvasRenderingContext2D): this;
+    transform(matrix: Matrix3): this;
     copy(source: EllipseCurve): this;
 }
 
@@ -179,24 +274,25 @@ declare class HeartCurve extends Curve {
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
     getCommands(): PathCommand[];
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    drawTo(ctx: CanvasRenderingContext2D): this;
 }
 
 declare class LineCurve extends Curve {
     v1: Point2D;
     v2: Point2D;
     constructor(v1?: Point2D, v2?: Point2D);
-    getDivisions(): number;
     getPoint(t: number, output?: Point2D): Point2D;
     getPointAt(u: number, output?: Point2D): Point2D;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    getCommands(): PathCommand[];
+    transform(matrix: Matrix3): this;
+    getDivisions(): number;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    getCommands(): PathCommand[];
+    drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: LineCurve): this;
 }
 
@@ -221,7 +317,7 @@ declare class PloygonCurve extends Curve {
         min: Point2D;
         max: Point2D;
     };
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    drawTo(ctx: CanvasRenderingContext2D): this;
 }
 
 declare class QuadraticBezierCurve extends Curve {
@@ -230,12 +326,13 @@ declare class QuadraticBezierCurve extends Curve {
     v2: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    getCommands(): PathCommand[];
+    transform(matrix: Matrix3): this;
     getMinMax(min?: Point2D, max?: Point2D): {
         min: Point2D;
         max: Point2D;
     };
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    getCommands(): PathCommand[];
+    drawTo(ctx: CanvasRenderingContext2D): this;
     copy(source: QuadraticBezierCurve): this;
 }
 
@@ -262,7 +359,7 @@ declare class RectangularCurve extends Curve {
         min: Point2D;
         max: Point2D;
     };
-    drawTo(ctx: CanvasRenderingContext2D): void;
+    drawTo(ctx: CanvasRenderingContext2D): this;
 }
 
 declare class SplineCurve extends Curve {
@@ -270,56 +367,9 @@ declare class SplineCurve extends Curve {
     constructor(points?: Point2D[]);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    getCommands(): PathCommand[];
-    drawTo(_ctx: CanvasRenderingContext2D): void;
     copy(source: SplineCurve): this;
 }
 
-/**
- * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
- */
-declare class Path2D {
-    currentPath: CurvePath;
-    paths: CurvePath[];
-    constructor(path?: Path2D | PathCommand[] | string);
-    addPath(path: Path2D): this;
-    addCommands(commands: PathCommand[]): this;
-    addData(data: string): 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;
-    splineThru(points: Point2D[]): this;
-    getMinMax(min?: Point2D, max?: Point2D): {
-        min: Point2D;
-        max: Point2D;
-    };
-    getCommands(): PathCommand[];
-    getData(): string;
-    getBoundingBox(): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    getSvgString(): string;
-    getSvgDataUri(): string;
-    drawTo(ctx: CanvasRenderingContext2D): void;
-    strokeTo(ctx: CanvasRenderingContext2D): void;
-    fillTo(ctx: CanvasRenderingContext2D): void;
-}
-
-/**
- * Bezier Curves formulas obtained from
- * https://en.wikipedia.org/wiki/B%C3%A9zier_curve
- */
-declare function catmullRom(t: number, p0: number, p1: number, p2: number, p3: number): number;
-declare function quadraticBezier(t: number, p0: number, p1: number, p2: number): number;
-declare function cubicBezier(t: number, p0: number, p1: number, p2: number, p3: number): number;
+declare function parseSvg(svg: string | SVGElement): Path2D[];
 
-export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Path2D, type PathCommand, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, catmullRom, cubicBezier, quadraticBezier };
+export { CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, Point2D, QuadraticBezierCurve, RectangularCurve, SplineCurve, parseSvg };