toosoon-utils 4.1.9 → 4.2.1

package/lib/extras/paths/PathContext.js

@@ -1,13 +1,7 @@
 import { EPSILON, PI } from '../../constants';
-import { arc, distance, ellipse, isCoincident, isCollinear, line } from '../../geometry';
-import LineCurve from '../curves/LineCurve';
-import PolylineCurve from '../curves/PolylineCurve';
-import QuadraticBezierCurve from '../curves/QuadraticBezierCurve';
-import CubicBezierCurve from '../curves/CubicBezierCurve';
-import CatmullRomCurve from '../curves/CatmullRomCurve';
-import SplineCurve from '../curves/SplineCurve';
-import EllipseCurve from '../curves/EllipseCurve';
-import ArcCurve from '../curves/ArcCurve';
+import { angle, distance, toDegrees } from '../../geometry';
+import { LineCurve, PolylineCurve, QuadraticBezierCurve, CubicBezierCurve, CatmullRomCurve, SplineCurve, EllipseCurve, ArcCurve } from '../curves';
+import { Vector2 } from '../geometry';
 import Path from './Path';
 /**
  * Utility class for manipulating connected curves providing methods similar to the 2D Canvas API
@@ -15,47 +9,53 @@ import Path from './Path';
  * @exports
  * @class PathContext
  * @extends Path
+ * @implements CanvasRenderingContext2D
  */
 export default class PathContext extends Path {
     /**
-     * Path current offset
+     * Path current position
      */
-    currentPosition = [NaN, NaN];
+    currentPosition = new Vector2(NaN, NaN);
     /**
-     * Create a path from the given list of points
+     * Path current transformation matrix
+     */
+    currentTransform = new DOMMatrix();
+    _transformStack = [];
+    /**
+     * Create a path from a given list of points
      *
-     * @param {Point[]} points Array of points defining the path
-     * @param {Point[]} type   Type of curve used for creating the path
+     * @param {Point2[]} points Array of points defining the path
      * @return {this}
      */
-    setFromPoints(points, type) {
+    setFromPoints(points) {
         this.moveTo(...points[0]);
-        if (type === 'polyline')
-            return this.polylineTo(points);
-        if (type === 'spline')
-            return this.splineTo(points);
         for (let i = 1, l = points.length; i < l; i++) {
             this.lineTo(...points[i]);
         }
         return this;
     }
     /**
-     * Begin the path
-     * Reset `currentPosition`
+     * Begin this path
+     *
+     * @return {this}
      */
     beginPath() {
         this._setCurrentPosition(NaN, NaN);
+        return this;
     }
     /**
-     * Draw a line from the ending position to the beginning position of the path
-     * Add an instance of {@link LineCurve} to the path
+     * Draw a line from the ending position to the beginning position of this path
+     * Add an instance of {@link LineCurve} to this path
+     *
+     * @return {this}
      */
     closePath() {
-        const startPoint = this.curves[0]?.getPoint(0);
-        const endPoint = this.curves[this.curves.length - 1]?.getPoint(1);
-        if (!isCoincident(...startPoint, ...endPoint))
-            this.add(new LineCurve(...endPoint, ...startPoint));
-        this._setCurrentPosition(...endPoint);
+        const startPoint = this.subpaths[0]?.getPoint(0);
+        const endPoint = this.subpaths[this.subpaths.length - 1]?.getPoint(1);
+        if (!startPoint.equals(endPoint)) {
+            const curve = new LineCurve(endPoint.x, endPoint.y, startPoint.x, startPoint.y);
+            this.add(curve);
+        }
         return this;
     }
     /**
@@ -66,91 +66,46 @@ export default class PathContext extends Path {
      * @return {this}
      */
     moveTo(x, y) {
-        this._setCurrentPosition(x, y);
+        const [tX, tY] = this._transformPoint([x, y]);
+        this._setCurrentPosition(tX, tY);
         return this;
     }
     /**
      * Draw a line from the current position to the position specified by `x` and `y`
-     * Add an instance of {@link LineCurve} to the path
+     * Add an instance of {@link LineCurve} to this path
      *
      * @param {number} x X-axis coordinate of the point
      * @param {number} y Y-axis coordinate of the point
      * @return {this}
      */
     lineTo(x, y) {
-        if (this.currentPosition.every(isNaN))
-            return this.moveTo(x, y);
-        const curve = new LineCurve(...this.currentPosition, x, y);
+        const [tX, tY] = this._transformPoint([x, y]);
+        if (!this._hasCurrentPosition())
+            return this._setCurrentPosition(tX, tY);
+        const curve = new LineCurve(this.currentPosition.x, this.currentPosition.y, tX, tY);
         this.add(curve);
-        this._setCurrentPosition(x, y);
+        this._setCurrentPosition(tX, tY);
         return this;
     }
     /**
-     * Draw a Polyline curve from the current position through the given points
-     * Add an instance of {@link PolylineCurve} to the path
+     * Draw a Polyline curve from the current position through given points
+     * Add an instance of {@link PolylineCurve} to this path
      *
-     * @param {Point[]} points Array of points defining the curve
+     * @param {Point2[]} points Array of points defining the curve
      * @returns {this}
      */
     polylineTo(points) {
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(...points[0]);
-        const curve = new PolylineCurve([this.currentPosition].concat(points));
+        const tPoints = this._transformPoints(points);
+        if (!this._hasCurrentPosition())
+            this._setCurrentPosition(...tPoints[0]);
+        const curve = new PolylineCurve([this.currentPosition.toArray()].concat(tPoints));
         this.add(curve);
-        this._setCurrentPosition(...points[points.length - 1]);
-        return this;
-    }
-    /**
-     * Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
-     * Add an instance of {@link ArcCurve} to the path
-     *
-     * @param {number} x1 X-axis coordinate of the first control point
-     * @param {number} y1 Y-axis coordinate of the first control point
-     * @param {number} x2 X-axis coordinate of the second control point
-     * @param {number} y2 Y-axis coordinate of the second control point
-     * @param {number} radius Arc radius (Must be non-negative)
-     * @returns {this}
-     */
-    arcTo(x1, y1, x2, y2, radius) {
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(x1, y1);
-        const x0 = this.currentPosition[0];
-        const y0 = this.currentPosition[1];
-        if (radius < 0) {
-            throw new Error(`IndexSizeError: Failed to execute 'arcTo' on 'PathContext': The radius provided (${radius}) is negative.`);
-        }
-        if (isCoincident(x0, y0, x1, y1)) {
-            return this;
-        }
-        if (isCollinear(x0, y0, x1, y1, x2, y2)) {
-            return this.lineTo(x2, y2);
-        }
-        const l01 = distance(x0, y0, x1, y1);
-        const l21 = distance(x2, y2, x1, y1);
-        const [t1x, t1y] = line(radius / l01, x1, y1, x0, y0);
-        const [t2x, t2y] = line(radius / l21, x1, y1, x2, y2);
-        const v1x = (t1x - x1) / radius;
-        const v1y = (t1y - y1) / radius;
-        const v2x = (t2x - x1) / radius;
-        const v2y = (t2y - y1) / radius;
-        const normalX = v2y - v1y;
-        const normalY = v1x - v2x;
-        const cx = x1 + normalX * radius;
-        const cy = y1 + normalY * radius;
-        const startAngle = Math.atan2(t1y - cy, t1x - cx);
-        const endAngle = Math.atan2(t2y - cy, t2x - cx);
-        let clockwise = endAngle - startAngle > 0;
-        if (clockwise && endAngle - startAngle > PI)
-            clockwise = false;
-        else if (!clockwise && startAngle - endAngle > PI)
-            clockwise = true;
-        this.lineTo(t1x, t1y);
-        this.arc(cx, cy, radius, startAngle, endAngle, !clockwise);
+        this._setCurrentPosition(...tPoints[tPoints.length - 1]);
         return this;
     }
     /**
      * Draw a Quadratic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by `cpx` and `cpy`
-     * Add an instance of {@link QuadraticBezierCurve} to the path
+     * Add an instance of {@link QuadraticBezierCurve} to this path
      *
      * @param {number} cpx X-axis coordinate of the control point
      * @param {number} cpy Y-axis coordinate of the control point
@@ -159,16 +114,18 @@ export default class PathContext extends Path {
      * @return {this}
      */
     quadraticCurveTo(cpx, cpy, x2, y2) {
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(cpx, cpy);
-        const curve = new QuadraticBezierCurve(...this.currentPosition, cpx, cpy, x2, y2);
+        const [tCpx, tCpy] = this._transformPoint([cpx, cpy]);
+        const [tX2, tY2] = this._transformPoint([x2, y2]);
+        if (!this._hasCurrentPosition())
+            this._setCurrentPosition(tCpx, tCpy);
+        const curve = new QuadraticBezierCurve(this.currentPosition.x, this.currentPosition.y, tCpx, tCpy, tX2, tY2);
         this.add(curve);
-        this._setCurrentPosition(x2, y2);
+        this._setCurrentPosition(tX2, tY2);
         return this;
     }
     /**
      * Draw a Cubic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
-     * Add an instance of {@link CubicBezierCurve} to the path
+     * Add an instance of {@link CubicBezierCurve} to this path
      *
      * @param {number} cp1x X-axis coordinate of the first control point
      * @param {number} cp1y Y-axis coordinate of the first control point
@@ -179,16 +136,19 @@ export default class PathContext extends Path {
      * @return {this}
      */
     bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(cp1x, cp1y);
-        const curve = new CubicBezierCurve(...this.currentPosition, cp1x, cp1y, cp2x, cp2y, x2, y2);
+        const [tCp1x, tCp1y] = this._transformPoint([cp1x, cp1y]);
+        const [tCp2x, tCp2y] = this._transformPoint([cp2x, cp2y]);
+        const [tX2, tY2] = this._transformPoint([x2, y2]);
+        if (!this._hasCurrentPosition())
+            this._setCurrentPosition(tCp1x, tCp1y);
+        const curve = new CubicBezierCurve(this.currentPosition.x, this.currentPosition.y, tCp1x, tCp1y, tCp2x, tCp2y, tX2, tY2);
         this.add(curve);
-        this._setCurrentPosition(x2, y2);
+        this._setCurrentPosition(tX2, tY2);
         return this;
     }
     /**
      * Draw a Catmull-Rom curve from the current position to the end point specified by `x` and `y`, using the control points specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
-     * Add an instance of {@link CatmullRomCurve} to the path
+     * Add an instance of {@link CatmullRomCurve} to this path
      *
      * @param {number} cp1x X-axis coordinate of the first control point
      * @param {number} cp1y Y-axis coordinate of the first control point
@@ -199,85 +159,143 @@ export default class PathContext extends Path {
      * @return {this}
      */
     catmullRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(cp1x, cp1y);
-        const curve = new CatmullRomCurve(...this.currentPosition, cp1x, cp1y, cp2x, cp2y, x2, y2);
+        const [tCp1x, tCp1y] = this._transformPoint([cp1x, cp1y]);
+        const [tCp2x, tCp2y] = this._transformPoint([cp2x, cp2y]);
+        const [tX2, tY2] = this._transformPoint([x2, y2]);
+        if (!this._hasCurrentPosition())
+            this._setCurrentPosition(tCp1x, tCp1y);
+        const curve = new CatmullRomCurve(this.currentPosition.x, this.currentPosition.y, tCp1x, tCp1y, tCp2x, tCp2y, tX2, tY2);
         this.add(curve);
-        this._setCurrentPosition(x2, y2);
+        this._setCurrentPosition(tX2, tY2);
         return this;
     }
     /**
-     * Draw a Spline curve from the current position through the given points
-     * Add an instance of {@link SplineCurve} to the path
+     * Draw a Spline curve from the current position through given points
+     * Add an instance of {@link SplineCurve} to this path
      *
-     * @param {Point[]} points Array of points defining the curve
+     * @param {Point2[]} points Array of points defining the curve
      * @return {this}
      */
     splineTo(points) {
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(...points[0]);
-        const curve = new SplineCurve([this.currentPosition].concat(points));
+        const tPoints = this._transformPoints(points);
+        if (!this._hasCurrentPosition())
+            this._setCurrentPosition(...tPoints[0]);
+        const curve = new SplineCurve([this.currentPosition.toArray()].concat(tPoints));
         this.add(curve);
-        this._setCurrentPosition(...points[points.length - 1]);
+        this._setCurrentPosition(...tPoints[tPoints.length - 1]);
         return this;
     }
     /**
      * Draw an Ellispe curve which is centered at (`cx`, `cy`) position
-     * Add an instance of {@link EllipseCurve} to the path
+     * Add an instance of {@link EllipseCurve} to this path
      *
      * @param {number} cx X-axis coordinate of the center of the circle
      * @param {number} cy Y-axis coordinate of the center of the circle
      * @param {number} rx X-radius of the ellipse
      * @param {number} ry Y-radius of the ellipse
-     * @param {number} [rotation] 	Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis
-     * @param {number} [startAngle] Start angle of the arc (in radians)
-     * @param {number} [endAngle]   End angle of the arc (in radians)
+     * @param {number} rotation 	Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis
+     * @param {number} startAngle Start angle of the arc (in radians)
+     * @param {number} endAngle   End angle of the arc (in radians)
      * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
      * @return {this}
      */
     ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise) {
-        const start = ellipse(0, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
-        const end = ellipse(1, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(...start);
-        else if (!isCoincident(...this.currentPosition, ...start))
-            this.lineTo(...start);
-        if (rx <= EPSILON && ry <= EPSILON)
+        const [tCx, tCy, tRx, tRy, tRotation] = this._transformEllipse(cx, cy, rx, ry, rotation);
+        const start = EllipseCurve.interpolate(0, tCx, tCy, tRx, tRy, tRotation, startAngle, endAngle, counterclockwise);
+        const end = EllipseCurve.interpolate(1, tCx, tCy, tRx, tRy, tRotation, startAngle, endAngle, counterclockwise);
+        if (!this._hasCurrentPosition())
+            this._setCurrentPosition(...start);
+        else if (!this.currentPosition.equals(start)) {
+            const curve = new LineCurve(this.currentPosition.x, this.currentPosition.y, ...start);
+            this.add(curve);
+        }
+        if (tRx <= EPSILON && tRy <= EPSILON)
             return this;
-        const curve = new EllipseCurve(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
+        const curve = new EllipseCurve(tCx, tCy, tRx, tRy, tRotation, startAngle, endAngle, counterclockwise);
         this.add(curve);
         this._setCurrentPosition(...end);
         return this;
     }
     /**
      * Draw an Arc curve which is centered at (`cx`, `cy`) position
-     * Add an instance of {@link ArcCurve} to the path
+     * Add an instance of {@link ArcCurve} to this path
      *
      * @param {number} cx X-axis coordinate of the center of the circle
      * @param {number} cy Y-axis coordinate of the center of the circle
      * @param {number} radius Radius of the circle
-     * @param {number} [startAngle] Start angle of the arc (in radians)
-     * @param {number} [endAngle]   End angle of the arc (in radians)
+     * @param {number} startAngle Start angle of the arc (in radians)
+     * @param {number} endAngle   End angle of the arc (in radians)
      * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
      * @return {this}
      */
     arc(cx, cy, radius, startAngle, endAngle, counterclockwise) {
-        const start = arc(0, cx, cy, radius, startAngle, endAngle, counterclockwise);
-        const end = arc(1, cx, cy, radius, startAngle, endAngle, counterclockwise);
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(...start);
-        else if (!isCoincident(...this.currentPosition, ...start))
-            this.lineTo(...start);
-        if (radius <= EPSILON)
+        if (!this._isUniform) {
+            return this.ellipse(cx, cy, radius, radius, 0, startAngle, endAngle, counterclockwise);
+        }
+        const [tCx, tCy, tRadius] = this._transformEllipse(cx, cy, radius, radius, 0);
+        const start = EllipseCurve.interpolate(0, tCx, tCy, tRadius, tRadius, 0, startAngle, endAngle, counterclockwise);
+        const end = EllipseCurve.interpolate(1, tCx, tCy, tRadius, tRadius, 0, startAngle, endAngle, counterclockwise);
+        if (!this._hasCurrentPosition())
+            this._setCurrentPosition(...start);
+        else if (!this.currentPosition.equals(start)) {
+            const curve = new LineCurve(this.currentPosition.x, this.currentPosition.y, ...start);
+            this.add(curve);
+        }
+        if (tRadius <= EPSILON)
             return this;
-        const curve = new ArcCurve(cx, cy, radius, startAngle, endAngle, counterclockwise);
+        const curve = new ArcCurve(tCx, tCy, tRadius, startAngle, endAngle, counterclockwise);
         this.add(curve);
         this._setCurrentPosition(...end);
         return this;
     }
+    /**
+     * Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
+     * Add an instance of {@link ArcCurve} to this path
+     *
+     * @param {number} x1 X-axis coordinate of the first control point
+     * @param {number} y1 Y-axis coordinate of the first control point
+     * @param {number} x2 X-axis coordinate of the second control point
+     * @param {number} y2 Y-axis coordinate of the second control point
+     * @param {number} radius Arc radius (Must be non-negative)
+     * @returns {this}
+     */
+    arcTo(x1, y1, x2, y2, radius) {
+        if (radius < 0) {
+            throw new Error(`IndexSizeError: Failed to execute 'arcTo' on 'PathContext': The radius provided (${radius}) is negative.`);
+        }
+        const [x0, y0] = this._inversePoint(this.currentPosition.toArray());
+        if (Vector2.equals([x0, y0], [x1, y1])) {
+            return this;
+        }
+        if (Vector2.collinear([x0, y0], [x1, y1], [x2, y2]) || radius === 0) {
+            return this.lineTo(x1, y1);
+        }
+        const l01 = distance(x0, y0, x1, y1);
+        const l21 = distance(x2, y2, x1, y1);
+        const [t1x, t1y] = LineCurve.interpolate(radius / l01, x1, y1, x0, y0);
+        const [t2x, t2y] = LineCurve.interpolate(radius / l21, x1, y1, x2, y2);
+        const v1x = (t1x - x1) / radius;
+        const v1y = (t1y - y1) / radius;
+        const v2x = (t2x - x1) / radius;
+        const v2y = (t2y - y1) / radius;
+        const normalX = v2y - v1y;
+        const normalY = v1x - v2x;
+        const cx = x1 + normalX * radius;
+        const cy = y1 + normalY * radius;
+        const startAngle = angle(cx, cy, t1x, t1y);
+        const endAngle = angle(cx, cy, t2x, t2y);
+        let clockwise = endAngle - startAngle > 0;
+        if (clockwise && endAngle - startAngle > PI)
+            clockwise = false;
+        else if (!clockwise && startAngle - endAngle > PI)
+            clockwise = true;
+        this.lineTo(t1x, t1y);
+        this.arc(cx, cy, radius, startAngle, endAngle, !clockwise);
+        return this;
+    }
     /**
      * Draw a rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
-     * Add an instance of {@link PolylineCurve} to the path
+     * Add an instance of {@link PolylineCurve} to this path
      *
      * @param {number} x 		  X-axis coordinate of the rectangle starting point
      * @param {number} y      Y-axis coordinate of the rectangle starting point
@@ -286,22 +304,19 @@ export default class PathContext extends Path {
      * @return {this}
      */
     rect(x, y, width, height) {
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(x, y);
-        else if (!isCoincident(...this.currentPosition, x, y))
-            this.lineTo(x, y);
-        const curve = new PolylineCurve([
+        this.moveTo(x, y);
+        this.polylineTo([
+            [x, y],
             [x + width, y],
             [x + width, y + height],
             [x, y + height],
             [x, y]
         ]);
-        this.add(curve);
-        this._setCurrentPosition(x, y);
         return this;
     }
     /**
      * Draw a rounded rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
+     * Add an instance of {@link Path} to this path
      *
      * @param {number} x 		  X-axis coordinate of the rectangle starting point
      * @param {number} y      Y-axis coordinate of the rectangle starting point
@@ -311,6 +326,7 @@ export default class PathContext extends Path {
      * @return {this}
      */
     roundRect(x, y, width, height, radius) {
+        this.moveTo(x, y);
         let topLeftRadius = typeof radius === 'number' ? radius : radius[0];
         let topRightRadius = typeof radius === 'number' ? radius : radius[1] ?? radius[0];
         let bottomRightRadius = typeof radius === 'number' ? radius : radius[2] ?? topLeftRadius;
@@ -320,52 +336,183 @@ export default class PathContext extends Path {
         topRightRadius = Math.min(topRightRadius, maxRadius);
         bottomRightRadius = Math.min(bottomRightRadius, maxRadius);
         bottomLeftRadius = Math.min(bottomLeftRadius, maxRadius);
-        if (this.currentPosition.every(isNaN))
-            this.moveTo(x + topLeftRadius, y);
-        else if (!isCoincident(...this.currentPosition, x, y))
-            this.lineTo(x + topLeftRadius, y);
+        const curve = new PathContext({ autoClose: true });
+        curve.setTransform(this.getTransform());
+        this.add(curve);
         // Top-Right corner
         if (topRightRadius > 0) {
-            this.lineTo(x + width - topRightRadius, y);
-            this.arcTo(x + width, y, x + width, y + topRightRadius, topRightRadius);
+            curve.lineTo(x + width - topRightRadius, y);
+            curve.arcTo(x + width, y, x + width, y + topRightRadius, topRightRadius);
         }
         else {
-            this.lineTo(x + width, y);
+            curve.lineTo(x + width, y);
         }
         // Bottom-Right corner
         if (bottomRightRadius > 0) {
-            this.lineTo(x + width, y + height - bottomRightRadius);
-            this.arcTo(x + width, y + height, x + width - bottomRightRadius, y + height, bottomRightRadius);
+            curve.lineTo(x + width, y + height - bottomRightRadius);
+            curve.arcTo(x + width, y + height, x + width - bottomRightRadius, y + height, bottomRightRadius);
         }
         else {
-            this.lineTo(x + width, y + height);
+            curve.lineTo(x + width, y + height);
         }
         // Bottom-Left corner
         if (bottomLeftRadius > 0) {
-            this.lineTo(x + bottomLeftRadius, y + height);
-            this.arcTo(x, y + height, x, y + height - bottomLeftRadius, bottomLeftRadius);
+            curve.lineTo(x + bottomLeftRadius, y + height);
+            curve.arcTo(x, y + height, x, y + height - bottomLeftRadius, bottomLeftRadius);
         }
         else {
-            this.lineTo(x, y + height);
+            curve.lineTo(x, y + height);
         }
         // Top-Left corner
         if (topLeftRadius > 0) {
-            this.lineTo(x, y + topLeftRadius);
-            this.arcTo(x, y, x + topLeftRadius, y, topLeftRadius);
+            curve.lineTo(x, y + topLeftRadius);
+            curve.arcTo(x, y, x + topLeftRadius, y, topLeftRadius);
         }
         else {
-            this.lineTo(x, y);
+            curve.lineTo(x, y);
         }
         return this;
     }
-    //   public transform() {}
-    //   public translate(x: number, y: number) {}
-    //   public rotate(angle: number) {}
-    //   public restore() {}
+    _hasCurrentPosition() {
+        return !isNaN(this.currentPosition.x) && !isNaN(this.currentPosition.y);
+    }
     _setCurrentPosition(x, y) {
-        this.currentPosition[0] = x;
-        this.currentPosition[1] = y;
+        this.currentPosition.set(x, y);
+        return this;
+    }
+    setTransform(a, b, c, d, e, f) {
+        if (a instanceof DOMMatrix) {
+            const matrix = a;
+            this.currentTransform = new DOMMatrix([matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f]);
+        }
+        else {
+            this.currentTransform = new DOMMatrix([a, b, c, d, e, f]);
+        }
+    }
+    getTransform() {
+        const { a, b, c, d, e, f } = this.currentTransform;
+        return new DOMMatrix([a, b, c, d, e, f]);
+    }
+    resetTransform() {
+        this.setTransform(1, 0, 0, 1, 0, 0);
+    }
+    transform(a, b, c, d, e, f) {
+        const matrix = new DOMMatrix([a, b, c, d, e, f]);
+        this.currentTransform = this.currentTransform.multiply(matrix);
+    }
+    translate(x, y) {
+        this.currentTransform = this.currentTransform.translate(x, y);
+    }
+    rotate(angle) {
+        this.currentTransform = this.currentTransform.rotate(toDegrees(angle));
+    }
+    scale(x, y) {
+        this.currentTransform = this.currentTransform.scale(x, y);
+    }
+    save() {
+        this._transformStack.push(this.getTransform());
+    }
+    restore() {
+        if (this._transformStack.length > 0) {
+            this.currentTransform = this._transformStack.pop();
+        }
+    }
+    reset() {
+        this.resetTransform();
+        this._transformStack = [];
+    }
+    // ******************************************
+    // Path context transformations
+    // ******************************************
+    _transformPoint(point, matrix = this.currentTransform) {
+        if (this._isIdentity)
+            return point;
+        const { x, y } = matrix.transformPoint({ x: point[0], y: point[1] });
+        return [x, y];
     }
+    _transformPoints(points, matrix) {
+        if (this._isIdentity)
+            return points;
+        return points.map((point) => this._transformPoint(point, matrix));
+    }
+    _transformVector(vector, matrix) {
+        if (this._isIdentity)
+            return vector;
+        const [x0, y0] = this._transformPoint([0, 0], matrix);
+        const [vx, vy] = this._transformPoint(vector, matrix);
+        return [vx - x0, vy - y0];
+    }
+    _transformEllipse(cx, cy, rx, ry, rotation, matrix) {
+        if (this._isIdentity)
+            return [cx, cy, rx, ry, rotation];
+        [cx, cy] = this._transformPoint([cx, cy], matrix);
+        const [rx1, ry1] = this._transformVector([rx, 0], matrix);
+        const [rx2, ry2] = this._transformVector([0, ry], matrix);
+        rx = Math.hypot(rx1, ry1);
+        ry = Math.hypot(rx2, ry2);
+        rotation += angle(0, 0, rx1, ry1);
+        return [cx, cy, rx, ry, rotation];
+    }
+    _inversePoint(point) {
+        return this._transformPoint(point, this.currentTransform.inverse());
+    }
+    get _translateX() {
+        return this.currentTransform.e;
+    }
+    get _translateY() {
+        return this.currentTransform.f;
+    }
+    get _scaleX() {
+        const { a, b } = this.currentTransform;
+        return Math.hypot(a, b);
+    }
+    get _scaleY() {
+        const { c, d } = this.currentTransform;
+        return Math.hypot(c, d);
+    }
+    get _rotation() {
+        const { a, b } = this.currentTransform;
+        return Math.atan2(b, a);
+    }
+    get _skewX() {
+        const { c, d } = this.currentTransform;
+        const cos = Math.cos(this._rotation);
+        const sin = Math.sin(this._rotation);
+        const m11 = c * cos + d * sin;
+        return Math.atan(m11 / this._scaleX);
+    }
+    get _skewY() {
+        const { a, b } = this.currentTransform;
+        const cos = Math.cos(this._rotation);
+        const sin = Math.sin(this._rotation);
+        const m21 = a * sin - b * cos;
+        return Math.atan(m21 / this._scaleY);
+    }
+    get _isTranslated() {
+        return Math.abs(this._translateX) > EPSILON || Math.abs(this._translateY) > EPSILON;
+    }
+    get _isScaled() {
+        return Math.abs(this._scaleX - 1) > EPSILON || Math.abs(this._scaleY - 1) > EPSILON;
+    }
+    get _isRotated() {
+        const { b, c } = this.currentTransform;
+        return Math.abs(b) > EPSILON || Math.abs(c) > EPSILON;
+    }
+    get _isSkewed() {
+        const { a, b, c, d } = this.currentTransform;
+        const angleX = Math.atan2(b, a);
+        const angleY = Math.atan2(-c, d);
+        return Math.abs(angleX - angleY) > EPSILON;
+    }
+    get _isUniform() {
+        return Math.abs(this._scaleX - this._scaleY) <= EPSILON;
+    }
+    get _isIdentity() {
+        return this.currentTransform.isIdentity;
+    }
+    // ******************************************
+    // Canvas 2D interface
+    // ******************************************
     canvas;
     fillStyle;
     strokeStyle;
@@ -373,8 +520,11 @@ export default class PathContext extends Path {
     lineCap;
     lineJoin;
     lineDashOffset;
+    setLineDash;
+    getLineDash;
     fillText;
     strokeText;
+    miterLimit;
     fill;
     stroke;
     clearRect;
@@ -382,6 +532,9 @@ export default class PathContext extends Path {
     strokeRect;
     drawImage;
     clip;
+    filter;
+    globalAlpha;
+    globalCompositeOperation;
     createLinearGradient;
     createRadialGradient;
     createConicGradient;
@@ -402,29 +555,19 @@ export default class PathContext extends Path {
     wordSpacing;
     direction;
     measureText;
-    filter;
-    globalAlpha;
-    globalCompositeOperation;
-    miterLimit;
-    save;
-    restore;
-    reset;
-    transform;
-    translate;
-    rotate;
-    scale;
-    getTransform;
-    setTransform;
-    resetTransform;
-    getLineDash;
-    setLineDash;
-    shadowBlur;
     shadowColor;
+    shadowBlur;
     shadowOffsetX;
     shadowOffsetY;
     drawFocusIfNeeded;
     isPointInPath;
     isPointInStroke;
-    getContextAttributes;
-    isContextLost;
+    getContextAttributes() {
+        return {
+            alpha: false
+        };
+    }
+    isContextLost() {
+        return false;
+    }
 }