modern-canvas 0.4.16 → 0.4.17

package/dist/index.cjs

@@ -1295,6 +1295,7 @@ class Matrix extends EventEmitter {
     }
   }
   _array = [];
+  dirtyId = 0;
   get length() {
     return this.cols * this.rows;
   }
@@ -1399,6 +1400,7 @@ class Matrix extends EventEmitter {
     return this._operate("*", value, output);
   }
   _onUpdate(_array) {
+    this.dirtyId++;
   }
   toArray(transpose = false) {
     const { cols, rows, _array: array } = this;
@@ -1980,150 +1982,90 @@ class Rect2 {
 }
 
 class Transform2D extends Matrix3 {
-  constructor(autoUpdate = true) {
-    super();
-    this.autoUpdate = autoUpdate;
-  }
-  _cx = 1;
-  _sx = 0;
-  _cy = 0;
-  _sy = 1;
-  _translateX = 0;
-  _translateY = 0;
-  _translateZ = 1;
-  _scaleX = 1;
-  _scaleY = 1;
-  _skewX = 0;
-  _skewY = 0;
-  _rotate = 0;
-  dirtyId = 0;
-  _needsUpdateArray = false;
-  _needsUpdateFields = false;
-  _onUpdate(array) {
-    super._onUpdate(array);
-    this._requestUpdateFields();
-  }
-  _updateSkew() {
-    this._cx = Math.cos(this._rotate + this._skewY);
-    this._sx = Math.sin(this._rotate + this._skewY);
-    this._cy = -Math.sin(this._rotate - this._skewX);
-    this._sy = Math.cos(this._rotate - this._skewX);
-  }
-  _requestUpdateArray() {
-    if (this.autoUpdate) {
-      this._performUpdateArray();
-    } else {
-      this._needsUpdateArray = true;
-    }
-  }
-  _requestUpdateFields() {
-    if (this.autoUpdate) {
-      this._performUpdateFields();
-    } else {
-      this._needsUpdateFields = true;
-    }
-  }
-  _performUpdateArray() {
-    const a = this._cx * this._scaleX;
-    const b = this._sx * this._scaleX;
-    const c = this._cy * this._scaleY;
-    const d = this._sy * this._scaleY;
-    const tx = this._translateX;
-    const ty = this._translateY;
-    const tz = this._translateZ;
-    const array = this._array;
-    this._array = [
-      a,
-      c,
-      tx,
-      b,
-      d,
-      ty,
-      array[6],
-      array[7],
-      tz
-    ];
-    this.dirtyId++;
-  }
-  _performUpdateFields() {
-    const {
-      a,
-      c,
-      tx,
-      b,
-      d,
-      ty,
-      tz
-    } = this.toObject();
-    const skewX = -Math.atan2(-c, d);
-    const skewY = Math.atan2(b, a);
-    const delta = Math.abs(skewX + skewY);
-    if (delta < 1e-5 || Math.abs(PI_2 - delta) < 1e-5) {
-      this._rotate = skewY;
-      this._skewX = this._skewY = 0;
-    } else {
-      this._rotate = 0;
-      this._skewX = skewX;
-      this._skewY = skewY;
-    }
-    this._scaleX = Math.sqrt(a * a + b * b);
-    this._scaleY = Math.sqrt(c * c + d * d);
-    this._translateX = tx;
-    this._translateY = ty;
-    this._translateZ = tz;
-    this.dirtyId++;
-  }
-  skew(x, y) {
-    this._skewX = x;
-    this._skewY = y;
-    this._updateSkew();
-    this._requestUpdateArray();
-    return this;
+  static _t2d = /* @__PURE__ */ new Transform2D();
+  premultiply(t2d) {
+    return t2d.multiply(this, this);
   }
   skewX(x) {
-    return this.skew(x, this._skewY);
+    return this.skew(x, 1);
   }
   skewY(y) {
-    return this.skew(this._skewX, y);
+    return this.skew(1, y);
   }
-  translate(x, y, z = 1) {
-    this._translateX = x;
-    this._translateY = y;
-    this._translateZ = z;
-    this._requestUpdateArray();
+  skew(x, y) {
+    return this.premultiply(Transform2D._t2d.makeSkew(x, y));
+  }
+  makeSkew(x, y) {
+    const cx = Math.cos(y);
+    const sx = Math.sin(y);
+    const cy = -Math.sin(-x);
+    const sy = Math.cos(-x);
+    this.set([
+      cx,
+      cy,
+      0,
+      sx,
+      sy,
+      0,
+      0,
+      0,
+      1
+    ]);
     return this;
   }
   translateX(x) {
-    return this.translate(x, this._translateY);
+    return this.translate(x, 0);
   }
   translateY(y) {
-    return this.translate(this._translateX, y);
+    return this.translate(0, y);
   }
   translateZ(z) {
-    return this.translate(this._translateX, this._translateY, z);
+    return this.translate(0, 0, z);
   }
   translate3d(x, y, z) {
     return this.translate(x, y, z);
   }
-  scale(x, y, _z = 1) {
-    this._scaleX = x;
-    this._scaleY = y;
-    this._requestUpdateArray();
+  translate(x, y, z = 0) {
+    return this.premultiply(Transform2D._t2d.makeTranslation(x, y, z));
+  }
+  makeTranslation(x, y, _z = 0) {
+    this.set([
+      1,
+      0,
+      x,
+      0,
+      1,
+      y,
+      0,
+      0,
+      1
+    ]);
     return this;
   }
   scaleX(x) {
-    return this.scale(x, this._scaleY);
+    return this.scale(x, 1);
   }
   scaleY(y) {
-    return this.scale(this._scaleX, y);
+    return this.scale(1, y);
   }
-  scale3d(x, y, z) {
+  scale3d(x, y, z = 1) {
     return this.scale(x, y, z);
   }
-  rotate(rad) {
-    this._rotate = rad;
-    this._updateSkew();
-    this._requestUpdateArray();
+  scale(x, y, z = 1) {
+    return this.premultiply(Transform2D._t2d.makeScale(x, y, z));
+  }
+  makeScale(x, y, z = 1) {
+    this.set([
+      x,
+      0,
+      0,
+      0,
+      y,
+      0,
+      0,
+      0,
+      z
+    ]);
     return this;
   }
   rotateX(x) {
@@ -2135,6 +2077,9 @@ class Transform2D extends Matrix3 {
   rotateZ(z) {
     return this.rotate(z);
   }
+  rotate(rad) {
+    return this.premultiply(Transform2D._t2d.makeRotation(rad));
+  }
   rotate3d(x, y, z, rad) {
     const [rx, ry, rz] = this._rotate3d(x, y, z, rad);
     rx && this.rotateX(rx);
@@ -2168,6 +2113,22 @@ class Transform2D extends Matrix3 {
       return [rotateX, rotateY, rotateZ];
     }
   }
+  makeRotation(theta) {
+    const c = Math.cos(theta);
+    const s = Math.sin(theta);
+    this.set([
+      c,
+      -s,
+      0,
+      s,
+      c,
+      0,
+      0,
+      0,
+      1
+    ]);
+    return this;
+  }
   applyToPoint(x, y) {
     const { a, c, tx, b, d, ty } = this.toObject();
     return [
@@ -2178,20 +2139,6 @@ class Transform2D extends Matrix3 {
   inverse() {
     return this.clone().invert();
   }
-  update() {
-    let updated = false;
-    if (this._needsUpdateArray) {
-      this._needsUpdateArray = false;
-      this._performUpdateArray();
-      updated = true;
-    }
-    if (this._needsUpdateFields) {
-      this._needsUpdateFields = false;
-      this._performUpdateFields();
-      updated = true;
-    }
-    return updated;
-  }
   isIdentity() {
     const { a, b, c, d, tx, ty } = this.toObject();
     return a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0;
@@ -4389,58 +4336,56 @@ function parseCSSFilter(filter) {
   return m;
 }
 
-function parseCSSTransform(transform, width, height) {
-  const t2d = new Transform2D(false);
+function parseCSSTransform(transform, width, height, output = new Transform2D()) {
   transform = !transform || transform === "none" ? "" : transform;
   parseCssFunctions(transform, { width, height }).forEach(({ name, args }) => {
     const values = args.map((arg) => arg.normalizedIntValue);
-    const _temp = new Transform2D();
     switch (name) {
       case "translate":
-        _temp.translate(values[0] * width, (values[1] ?? values[0]) * height);
+        output.translate(values[0] * width, (values[1] ?? values[0]) * height);
         break;
       case "translateX":
-        _temp.translateX(values[0] * width);
+        output.translateX(values[0] * width);
         break;
       case "translateY":
-        _temp.translateY(values[0] * height);
+        output.translateY(values[0] * height);
         break;
       case "translateZ":
-        _temp.translateZ(values[0]);
+        output.translateZ(values[0]);
         break;
       case "translate3d":
-        _temp.translate3d(
+        output.translate3d(
           values[0] * width,
           (values[1] ?? values[0]) * height,
           values[2] ?? values[1] ?? values[0]
         );
         break;
       case "scale":
-        _temp.scale(values[0], values[1] ?? values[0]);
+        output.scale(values[0], values[1] ?? values[0]);
         break;
       case "scaleX":
-        _temp.scaleX(values[0]);
+        output.scaleX(values[0]);
         break;
       case "scaleY":
-        _temp.scaleY(values[0]);
+        output.scaleY(values[0]);
         break;
       case "scale3d":
-        _temp.scale3d(values[0], values[1] ?? values[0], values[2] ?? values[1] ?? values[0]);
+        output.scale3d(values[0], values[1] ?? values[0], values[2] ?? values[1] ?? values[0]);
         break;
       case "rotate":
-        _temp.rotate(values[0] * PI_2);
+        output.rotate(values[0] * PI_2);
         break;
       case "rotateX":
-        _temp.rotateX(values[0] * PI_2);
+        output.rotateX(values[0] * PI_2);
         break;
       case "rotateY":
-        _temp.rotateY(values[0] * PI_2);
+        output.rotateY(values[0] * PI_2);
         break;
       case "rotateZ":
-        _temp.rotateZ(values[0] * PI_2);
+        output.rotateZ(values[0] * PI_2);
         break;
       case "rotate3d":
-        _temp.rotate3d(
+        output.rotate3d(
           values[0] * PI_2,
           (values[1] ?? values[0]) * PI_2,
           (values[2] ?? values[1] ?? values[0]) * PI_2,
@@ -4448,22 +4393,20 @@ function parseCSSTransform(transform, width, height) {
         );
         break;
       case "skew":
-        _temp.skew(values[0], values[0] ?? values[1]);
+        output.skew(values[0], values[0] ?? values[1]);
         break;
       case "skewX":
-        _temp.skewX(values[0]);
+        output.skewX(values[0]);
         break;
       case "skewY":
-        _temp.skewY(values[0]);
+        output.skewY(values[0]);
         break;
       case "matrix":
-        _temp.set(values);
+        output.set(values);
         break;
     }
-    t2d.multiply(_temp);
   });
-  t2d.update();
-  return t2d;
+  return output;
 }
 
 function parseCSSTransformOrigin(transformOrigin) {
@@ -8689,7 +8632,7 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
   rotation = 0;
   scale = new Vector2(1, 1);
   skew = new Vector2();
-  transform = new Transform2D(false);
+  transform = new Transform2D();
   globalPosition = new Vector2();
   globalRotation = 0;
   globalScale = new Vector2();
@@ -8701,7 +8644,7 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     this.setProperties(properties).append(nodes);
   }
   _updateTransform() {
-    this.transform.identity().scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).translate(this.position.x, this.position.y).rotate(this.rotation).update();
+    this.transform.identity().scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation).translate(this.position.x, this.position.y);
   }
   _updateGlobalTransform() {
     const parent = this.getParent();
@@ -8904,17 +8847,13 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     this.requestRedraw();
   }
   _updateTransform() {
-    super._updateTransform();
     const { width, height } = this.size;
-    const cssTransform = parseCSSTransform(this.style.transform, width, height);
-    cssTransform.multiply(this.transform, this.transform);
-    const t3dT2dArr = this.transform.toArray();
     const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
     const offsetX = originX * width;
     const offsetY = originY * height;
-    t3dT2dArr[2] += t3dT2dArr[0] * -offsetX + t3dT2dArr[1] * -offsetY + offsetX;
-    t3dT2dArr[5] += t3dT2dArr[3] * -offsetX + t3dT2dArr[4] * -offsetY + offsetY;
-    this.transform.set(t3dT2dArr);
+    this.transform.identity().translate(-offsetX, -offsetY).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
+    parseCSSTransform(this.style.transform, width, height, this.transform);
+    this.transform.translate(offsetX + this.position.x, offsetY + this.position.y);
   }
   _updateGlobalTransform() {
     super._updateGlobalTransform();

package/dist/index.d.cts

@@ -356,6 +356,7 @@ declare abstract class Matrix extends EventEmitter {
     readonly rows: number;
     readonly cols: number;
     protected _array: number[];
+    dirtyId: number;
     get length(): number;
     constructor(rows: number, cols: number, array?: number[]);
     protected _operate(operator: string, target: MatrixLike | Vector, output?: MatrixOperateOutput): any;
@@ -509,51 +510,33 @@ interface Transform2DObject {
  * | 0 | 0 | 1 |
  */
 declare class Transform2D extends Matrix3 {
-    autoUpdate: boolean;
-    protected _cx: number;
-    protected _sx: number;
-    protected _cy: number;
-    protected _sy: number;
-    protected _translateX: number;
-    protected _translateY: number;
-    protected _translateZ: number;
-    protected _scaleX: number;
-    protected _scaleY: number;
-    protected _skewX: number;
-    protected _skewY: number;
-    protected _rotate: number;
-    dirtyId: number;
-    protected _needsUpdateArray: boolean;
-    protected _needsUpdateFields: boolean;
-    constructor(autoUpdate?: boolean);
-    protected _onUpdate(array: number[]): void;
-    protected _updateSkew(): void;
-    protected _requestUpdateArray(): void;
-    protected _requestUpdateFields(): void;
-    protected _performUpdateArray(): void;
-    protected _performUpdateFields(): void;
-    skew(x: number, y: number): this;
+    private static _t2d;
+    premultiply(t2d: Transform2D): this;
     skewX(x: number): this;
     skewY(y: number): this;
-    translate(x: number, y: number, z?: number): this;
+    skew(x: number, y: number): this;
+    makeSkew(x: number, y: number): this;
     translateX(x: number): this;
     translateY(y: number): this;
     translateZ(z: number): this;
     translate3d(x: number, y: number, z: number): this;
-    scale(x: number, y: number, _z?: number): this;
+    translate(x: number, y: number, z?: number): this;
+    makeTranslation(x: number, y: number, _z?: number): this;
     scaleX(x: number): this;
     scaleY(y: number): this;
-    scale3d(x: number, y: number, z: number): this;
-    rotate(rad: number): this;
+    scale3d(x: number, y: number, z?: number): this;
+    scale(x: number, y: number, z?: number): this;
+    makeScale(x: number, y: number, z?: number): this;
     rotateX(x: number): this;
     rotateY(y: number): this;
     rotateZ(z: number): this;
+    rotate(rad: number): this;
     rotate3d(x: number, y: number, z: number, rad: number): this;
     protected _rotateToScale(rad: number): number;
     protected _rotate3d(x: number, y: number, z: number, rad: number): number[];
+    makeRotation(theta: number): this;
     applyToPoint(x: number, y: number): number[];
     inverse(): this;
-    update(): boolean;
     isIdentity(): boolean;
     toObject(): Transform2DObject;
 }
@@ -2915,7 +2898,7 @@ type CSSFilterKey = 'hue-rotate' | 'saturate' | 'brightness' | 'contrast' | 'inv
 type CSSFilters = Record<CSSFilterKey, number>;
 declare function parseCSSFilter(filter: string): ColorMatrix;
 
-declare function parseCSSTransform(transform: string, width: number, height: number): Transform2D;
+declare function parseCSSTransform(transform: string, width: number, height: number, output?: Transform2D): Transform2D;
 
 declare function parseCSSTransformOrigin(transformOrigin: string): number[];
 

package/dist/index.d.mts

@@ -356,6 +356,7 @@ declare abstract class Matrix extends EventEmitter {
     readonly rows: number;
     readonly cols: number;
     protected _array: number[];
+    dirtyId: number;
     get length(): number;
     constructor(rows: number, cols: number, array?: number[]);
     protected _operate(operator: string, target: MatrixLike | Vector, output?: MatrixOperateOutput): any;
@@ -509,51 +510,33 @@ interface Transform2DObject {
  * | 0 | 0 | 1 |
  */
 declare class Transform2D extends Matrix3 {
-    autoUpdate: boolean;
-    protected _cx: number;
-    protected _sx: number;
-    protected _cy: number;
-    protected _sy: number;
-    protected _translateX: number;
-    protected _translateY: number;
-    protected _translateZ: number;
-    protected _scaleX: number;
-    protected _scaleY: number;
-    protected _skewX: number;
-    protected _skewY: number;
-    protected _rotate: number;
-    dirtyId: number;
-    protected _needsUpdateArray: boolean;
-    protected _needsUpdateFields: boolean;
-    constructor(autoUpdate?: boolean);
-    protected _onUpdate(array: number[]): void;
-    protected _updateSkew(): void;
-    protected _requestUpdateArray(): void;
-    protected _requestUpdateFields(): void;
-    protected _performUpdateArray(): void;
-    protected _performUpdateFields(): void;
-    skew(x: number, y: number): this;
+    private static _t2d;
+    premultiply(t2d: Transform2D): this;
     skewX(x: number): this;
     skewY(y: number): this;
-    translate(x: number, y: number, z?: number): this;
+    skew(x: number, y: number): this;
+    makeSkew(x: number, y: number): this;
     translateX(x: number): this;
     translateY(y: number): this;
     translateZ(z: number): this;
     translate3d(x: number, y: number, z: number): this;
-    scale(x: number, y: number, _z?: number): this;
+    translate(x: number, y: number, z?: number): this;
+    makeTranslation(x: number, y: number, _z?: number): this;
     scaleX(x: number): this;
     scaleY(y: number): this;
-    scale3d(x: number, y: number, z: number): this;
-    rotate(rad: number): this;
+    scale3d(x: number, y: number, z?: number): this;
+    scale(x: number, y: number, z?: number): this;
+    makeScale(x: number, y: number, z?: number): this;
     rotateX(x: number): this;
     rotateY(y: number): this;
     rotateZ(z: number): this;
+    rotate(rad: number): this;
     rotate3d(x: number, y: number, z: number, rad: number): this;
     protected _rotateToScale(rad: number): number;
     protected _rotate3d(x: number, y: number, z: number, rad: number): number[];
+    makeRotation(theta: number): this;
     applyToPoint(x: number, y: number): number[];
     inverse(): this;
-    update(): boolean;
     isIdentity(): boolean;
     toObject(): Transform2DObject;
 }
@@ -2915,7 +2898,7 @@ type CSSFilterKey = 'hue-rotate' | 'saturate' | 'brightness' | 'contrast' | 'inv
 type CSSFilters = Record<CSSFilterKey, number>;
 declare function parseCSSFilter(filter: string): ColorMatrix;
 
-declare function parseCSSTransform(transform: string, width: number, height: number): Transform2D;
+declare function parseCSSTransform(transform: string, width: number, height: number, output?: Transform2D): Transform2D;
 
 declare function parseCSSTransformOrigin(transformOrigin: string): number[];
 

package/dist/index.d.ts

@@ -356,6 +356,7 @@ declare abstract class Matrix extends EventEmitter {
     readonly rows: number;
     readonly cols: number;
     protected _array: number[];
+    dirtyId: number;
     get length(): number;
     constructor(rows: number, cols: number, array?: number[]);
     protected _operate(operator: string, target: MatrixLike | Vector, output?: MatrixOperateOutput): any;
@@ -509,51 +510,33 @@ interface Transform2DObject {
  * | 0 | 0 | 1 |
  */
 declare class Transform2D extends Matrix3 {
-    autoUpdate: boolean;
-    protected _cx: number;
-    protected _sx: number;
-    protected _cy: number;
-    protected _sy: number;
-    protected _translateX: number;
-    protected _translateY: number;
-    protected _translateZ: number;
-    protected _scaleX: number;
-    protected _scaleY: number;
-    protected _skewX: number;
-    protected _skewY: number;
-    protected _rotate: number;
-    dirtyId: number;
-    protected _needsUpdateArray: boolean;
-    protected _needsUpdateFields: boolean;
-    constructor(autoUpdate?: boolean);
-    protected _onUpdate(array: number[]): void;
-    protected _updateSkew(): void;
-    protected _requestUpdateArray(): void;
-    protected _requestUpdateFields(): void;
-    protected _performUpdateArray(): void;
-    protected _performUpdateFields(): void;
-    skew(x: number, y: number): this;
+    private static _t2d;
+    premultiply(t2d: Transform2D): this;
     skewX(x: number): this;
     skewY(y: number): this;
-    translate(x: number, y: number, z?: number): this;
+    skew(x: number, y: number): this;
+    makeSkew(x: number, y: number): this;
     translateX(x: number): this;
     translateY(y: number): this;
     translateZ(z: number): this;
     translate3d(x: number, y: number, z: number): this;
-    scale(x: number, y: number, _z?: number): this;
+    translate(x: number, y: number, z?: number): this;
+    makeTranslation(x: number, y: number, _z?: number): this;
     scaleX(x: number): this;
     scaleY(y: number): this;
-    scale3d(x: number, y: number, z: number): this;
-    rotate(rad: number): this;
+    scale3d(x: number, y: number, z?: number): this;
+    scale(x: number, y: number, z?: number): this;
+    makeScale(x: number, y: number, z?: number): this;
     rotateX(x: number): this;
     rotateY(y: number): this;
     rotateZ(z: number): this;
+    rotate(rad: number): this;
     rotate3d(x: number, y: number, z: number, rad: number): this;
     protected _rotateToScale(rad: number): number;
     protected _rotate3d(x: number, y: number, z: number, rad: number): number[];
+    makeRotation(theta: number): this;
     applyToPoint(x: number, y: number): number[];
     inverse(): this;
-    update(): boolean;
     isIdentity(): boolean;
     toObject(): Transform2DObject;
 }
@@ -2915,7 +2898,7 @@ type CSSFilterKey = 'hue-rotate' | 'saturate' | 'brightness' | 'contrast' | 'inv
 type CSSFilters = Record<CSSFilterKey, number>;
 declare function parseCSSFilter(filter: string): ColorMatrix;
 
-declare function parseCSSTransform(transform: string, width: number, height: number): Transform2D;
+declare function parseCSSTransform(transform: string, width: number, height: number, output?: Transform2D): Transform2D;
 
 declare function parseCSSTransformOrigin(transformOrigin: string): number[];