modern-canvas 0.7.13 → 0.7.15

package/dist/index.mjs

@@ -1740,7 +1740,7 @@ class Matrix3 extends Matrix {
   constructor(array) {
     super(3, 3, array);
   }
-  invert() {
+  affineInvert() {
     const [
       n11,
       n21,
@@ -1757,7 +1757,17 @@ class Matrix3 extends Matrix {
     const t13 = n23 * n12 - n22 * n13;
     const det = n11 * t11 + n21 * t12 + n31 * t13;
     if (det === 0) {
-      return this.set([0, 0, 0, 0, 0, 0, 0, 0, 0]);
+      return this.set([
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+      ]);
     }
     const detInv = 1 / det;
     return this.set([
@@ -1950,8 +1960,8 @@ class Rect2 {
           position.set(arg.position);
           size.set(arg.size);
         } else {
-          const xx = arg.map((p) => p[0]);
-          const yy = arg.map((p) => p[1]);
+          const xx = arg.map((p) => p.x);
+          const yy = arg.map((p) => p.y);
           const minX = Math.min(...xx);
           const maxX = Math.max(...xx);
           const minY = Math.min(...yy);
@@ -2149,13 +2159,6 @@ class Transform2D extends Matrix3 {
     ]);
     return this;
   }
-  applyToPoint(x, y) {
-    const { a, c, tx, b, d, ty } = this.toObject();
-    return [
-      a * x + c * y + tx,
-      b * x + d * y + ty
-    ];
-  }
   decompose(pivot = { x: 0, y: 0 }, output = {
     position: { x: 0, y: 0 },
     scale: { x: 0, y: 0 },
@@ -2180,8 +2183,27 @@ class Transform2D extends Matrix3 {
     output.position.y = ty + (pivot.x * b + pivot.y * d);
     return output;
   }
-  inverse() {
-    return this.clone().invert();
+  apply(pos, newPos) {
+    newPos = newPos || new Vector2();
+    const { a, c, tx, b, d, ty } = this.toObject();
+    const x = pos.x;
+    const y = pos.y;
+    newPos.x = a * x + c * y + tx;
+    newPos.y = b * x + d * y + ty;
+    return newPos;
+  }
+  affineInverse() {
+    return this.clone().affineInvert();
+  }
+  applyAffineInverse(pos, newPos) {
+    newPos = newPos || new Vector2();
+    const { a, b, c, d, tx, ty } = this.toObject();
+    const id = 1 / (a * d + c * -b);
+    const x = pos.x;
+    const y = pos.y;
+    newPos.x = d * id * x + -c * id * y + (ty * c - tx * d) * id;
+    newPos.y = a * id * y + -b * id * x + (-ty * a + tx * b) * id;
+    return newPos;
   }
   isIdentity() {
     const { a, b, c, d, tx, ty } = this.toObject();
@@ -2552,7 +2574,7 @@ attribute vec4 aBackgroundColor;
 attribute vec4 aDisableWrapMode;
 
 uniform mat3 projectionMatrix;
-uniform mat3 worldTransformMatrix;
+uniform mat3 viewMatrix;
 uniform vec4 modulate;
 
 varying float vTextureId;
@@ -2568,7 +2590,7 @@ void main(void) {
     0.0, 0.0, 1.0
   );
   vTextureId = aTextureId;
-  mat3 modelViewProjectionMatrix = projectionMatrix * worldTransformMatrix * modelMatrix;
+  mat3 modelViewProjectionMatrix = projectionMatrix * viewMatrix * modelMatrix;
   gl_Position = vec4((modelViewProjectionMatrix * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
   vUv = aUv;
   vModulate = aModulate * modulate;
@@ -3299,7 +3321,7 @@ class WebGLProgramModule extends WebGLModule {
   boundProgram = null;
   uniforms = {
     projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
-    worldTransformMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
+    viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
   };
   create(options) {
     const program = this.gl.createProgram();
@@ -3503,7 +3525,7 @@ ${gl.getShaderInfoLog(shader)}`);
     this.boundProgram = null;
     this.uniforms = {
       projectionMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1],
-      worldTransformMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
+      viewMatrix: [1, 0, 0, 0, 1, 0, 0, 0, 1]
     };
   }
   free() {
@@ -3597,8 +3619,8 @@ class WebGLScissorModule extends WebGLModule {
   use() {
     const renderer = this._renderer;
     const { pixelRatio, mask, viewport, screen, gl, program } = renderer;
-    const { worldTransformMatrix } = program.uniforms;
-    const rect = transformRectToAABB(worldTransformMatrix, mask.last.mask);
+    const { viewMatrix } = program.uniforms;
+    const rect = transformRectToAABB(viewMatrix, mask.last.mask);
     const { x, y, width, height } = rect;
     let scissorY;
     if (viewport.boundViewport) {
@@ -5630,7 +5652,7 @@ class CanvasContext extends Path2D {
   }
   buildUvs(start, vertices, uvs, texture, uvTransform) {
     if (texture) {
-      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.applyToPoint(x, y) : uvTransform;
+      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.apply({ x, y }).toArray() : uvTransform;
       const w = texture.width;
       const h = texture.height;
       for (let len = vertices.length, i = start; i < len; i += 2) {
@@ -6652,7 +6674,7 @@ let Viewport = class extends Node {
   render(renderer, next) {
     const oldViewport = this._tree?.getCurrentViewport();
     renderer.program.uniforms.projectionMatrix = this.projection.toArray(true);
-    renderer.program.uniforms.worldTransformMatrix = this.canvasTransform.toArray(true);
+    renderer.program.uniforms.viewMatrix = this.canvasTransform.toArray(true);
     this.activate(renderer);
     renderer.clear();
     super.render(renderer, next);
@@ -6667,6 +6689,12 @@ let Viewport = class extends Node {
   getRect() {
     return new Rect2(this.x, this.y, this.width, this.height);
   }
+  toCanvasGlobal(screenPos, newPos) {
+    return this.canvasTransform.applyAffineInverse(screenPos, newPos);
+  }
+  toCanvasScreen(globalPos, newPos) {
+    return this.canvasTransform.apply(globalPos, newPos);
+  }
 };
 __decorateClass$P([
   property({ fallback: 0 })
@@ -7203,35 +7231,28 @@ let Node2D = class extends CanvasItem {
   getTransformOrigin() {
     return new Vector2(0, 0);
   }
-  getTransform(cb) {
+  updateTransform(cb) {
     const origin = this.getTransformOrigin();
-    const transform = new Transform2D();
-    transform.translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
+    const transform = this.transform.identity().translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
     cb?.(transform);
     transform.translate(this.position.x, this.position.y).translate(origin.x, origin.y);
-    return transform;
-  }
-  updateTransform() {
-    this.transform.copy(this.getTransform());
   }
   updateGlobalTransform() {
     this.updateTransform();
     const parent = this.getParent();
     if (parent?.globalTransform) {
-      this._parentTransformDirtyId = parent.globalTransform.dirtyId;
-      this.globalPosition.set(
-        parent.globalPosition.x + this.position.x,
-        parent.globalPosition.y + this.position.y
-      );
-      this.globalScale.set(
-        parent.globalScale.x * this.scale.x,
-        parent.globalScale.y * this.scale.y
-      );
-      this.globalSkew.set(
-        parent.globalSkew.x * this.skew.x,
-        parent.globalSkew.y * this.skew.y
-      );
-      this.globalRotation = parent.globalRotation + this.rotation;
+      const {
+        globalPosition,
+        globalScale,
+        globalSkew,
+        globalTransform,
+        globalRotation
+      } = parent;
+      this._parentTransformDirtyId = globalTransform.dirtyId;
+      this.globalPosition.set(globalPosition.x + this.position.x, globalPosition.y + this.position.y);
+      this.globalScale.set(globalScale.x * this.scale.x, globalScale.y * this.scale.y);
+      this.globalSkew.set(globalSkew.x * this.skew.x, globalSkew.y * this.skew.y);
+      this.globalRotation = globalRotation + this.rotation;
       parent.globalTransform.multiply(this.transform, this.globalTransform);
     } else {
       this.globalPosition.copy(this.position);
@@ -7279,6 +7300,12 @@ let Node2D = class extends CanvasItem {
       this.requestRelayout();
     }
   }
+  toLocal(globalPos, newPos) {
+    return this.globalTransform.applyAffineInverse(globalPos, newPos);
+  }
+  toGlobal(localPos, newPos) {
+    return this.globalTransform.apply(localPos, newPos);
+  }
 };
 __decorateClass$J([
   property({ protected: true, fallback: 0 })
@@ -7397,6 +7424,18 @@ let Camera2D = class extends Node2D {
     viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
     this.emit("updateCanvasTransform");
   }
+  toGlobal(screenPos, newPos) {
+    const viewport = this.getViewport();
+    if (!viewport)
+      throw new Error("Failed to toGlobal, viewport is empty");
+    return viewport.toCanvasGlobal(screenPos, newPos);
+  }
+  toScreen(globalPos, newPos) {
+    const viewport = this.getViewport();
+    if (!viewport)
+      throw new Error("Failed to toScreen, viewport is empty");
+    return viewport.toCanvasScreen(globalPos, newPos);
+  }
 };
 __decorateClass$I([
   property({ protected: true, fallback: false })
@@ -9757,7 +9796,10 @@ class BaseElement2DText extends CoreObject {
         break;
     }
   }
-  _updateText() {
+  setContent(content) {
+    this.content = normalizeTextContent(content);
+  }
+  measure() {
     this.base.style = {
       justifyContent: "center",
       alignItems: "center",
@@ -9765,12 +9807,6 @@ class BaseElement2DText extends CoreObject {
       ...this.parent.style.toJSON()
     };
     this.base.requestUpdate();
-  }
-  setContent(content) {
-    this.content = normalizeTextContent(content);
-  }
-  measure() {
-    this._updateText();
     return this.base.measure();
   }
   updateMeasure() {
@@ -10001,9 +10037,9 @@ let BaseElement2D = class extends Node2D {
     const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
     return new Vector2(originX * width, originY * height);
   }
-  getTransform(cb) {
+  updateTransform(cb) {
     const { width, height } = this.size;
-    return super.getTransform((transform) => {
+    super.updateTransform((transform) => {
       parseCSSTransform(this.style.transform ?? "", width, height, transform);
       cb?.(transform);
     });
@@ -10022,37 +10058,35 @@ let BaseElement2D = class extends Node2D {
     const x2 = x1 + width;
     const y2 = y1 + height;
     return [
-      [x1, y1],
-      [x1, y2],
-      [x2, y1],
-      [x2, y2]
+      { x: x1, y: y1 },
+      { x: x1, y: y2 },
+      { x: x2, y: y1 },
+      { x: x2, y: y2 }
     ];
   }
   getAabb() {
     return new Rect2(
       this._getPointArray().map((p) => {
-        return this.transform.applyToPoint(p[0], p[1]);
+        return this.transform.apply(p);
       })
     );
   }
   getGlobalAabb() {
     return new Rect2(
       this._getPointArray().map((p) => {
-        return this.globalTransform.applyToPoint(p[0], p[1]);
+        return this.globalTransform.apply(p);
       })
     );
   }
   getObb() {
     const origin = this.getTransformOrigin();
-    const _origin = this.transform.applyToPoint(origin.x, origin.y);
-    const offset = [_origin[0] - origin.x, _origin[1] - origin.y];
+    const _origin = this.transform.apply(origin).sub(origin);
     return {
       rect: new Rect2(
         this._getPointArray().map((p) => {
-          return [
-            p[0] + offset[0],
-            p[1] + offset[1]
-          ];
+          p.x += _origin.x;
+          p.y += _origin.y;
+          return p;
         })
       ),
       rotation: this.rotation
@@ -10060,15 +10094,13 @@ let BaseElement2D = class extends Node2D {
   }
   getGlobalObb() {
     const origin = this.getTransformOrigin();
-    const _origin = this.globalTransform.applyToPoint(origin.x, origin.y);
-    const offset = [_origin[0] - origin.x, _origin[1] - origin.y];
+    const _origin = this.globalTransform.apply(origin).sub(origin);
     return {
       rect: new Rect2(
         this._getPointArray().map((p) => {
-          return [
-            p[0] + offset[0],
-            p[1] + offset[1]
-          ];
+          p.x += _origin.x;
+          p.y += _origin.y;
+          return p;
         })
       ),
       rotation: this.globalRotation
@@ -10086,12 +10118,12 @@ let BaseElement2D = class extends Node2D {
   // override isVisibleInTree(): boolean {
   //   if (this._tree) {
   //     const root = this._tree.root
-  //     const camera = root.canvasTransform.inverse()
+  //     const camera = root.worldTransform.inverse()
   //     const { x, y, width, height } = root
-  //     const p1 = camera.applyToPoint(x, y)
-  //     const p2 = camera.applyToPoint(x + width, y)
-  //     const p3 = camera.applyToPoint(x + width, y + height)
-  //     const p4 = camera.applyToPoint(x, y + height)
+  //     const p1 = camera.apply(x, y)
+  //     const p2 = camera.apply(x + width, y)
+  //     const p3 = camera.apply(x + width, y + height)
+  //     const p4 = camera.apply(x, y + height)
   //     const pts = [p1, p2, p3, p4]
   //     const xs = pts.map(p => p[0])
   //     const ys = pts.map(p => p[1])
@@ -10181,9 +10213,9 @@ let BaseElement2D = class extends Node2D {
     }
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
-  _pointerInput(point, key) {
+  _positionInput(localPos, key) {
     const { width, height } = this.size;
-    return point.x >= 0 && point.x < width && point.y >= 0 && point.y < height;
+    return localPos.x >= 0 && localPos.x < width && localPos.y >= 0 && localPos.y < height;
   }
   _input(event, key) {
     switch (key) {
@@ -10191,14 +10223,15 @@ let BaseElement2D = class extends Node2D {
       case "pointermove":
       case "pointerup": {
         if (this.canPointerEvents()) {
-          let { screenX, screenY } = event;
+          const { screenX, screenY } = event;
           if (screenX && screenY) {
+            const pos = new Vector2(screenX, screenY);
             const viewport = this.getViewport();
             if (viewport) {
-              [screenX, screenY] = viewport.canvasTransform.inverse().applyToPoint(screenX, screenY);
+              viewport.toCanvasGlobal(pos, pos);
             }
-            [screenX, screenY] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
-            if (this._pointerInput({ x: screenX, y: screenY }, key)) {
+            this.toLocal(pos, pos);
+            if (this._positionInput(pos, key)) {
               if (!event.target) {
                 event.target = this;
               }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",