modern-canvas 0.7.14 → 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,
@@ -2192,10 +2192,10 @@ class Transform2D extends Matrix3 {
     newPos.y = b * x + d * y + ty;
     return newPos;
   }
-  inverse() {
-    return this.clone().invert();
+  affineInverse() {
+    return this.clone().affineInvert();
   }
-  applyInverse(pos, newPos) {
+  applyAffineInverse(pos, newPos) {
     newPos = newPos || new Vector2();
     const { a, b, c, d, tx, ty } = this.toObject();
     const id = 1 / (a * d + c * -b);
@@ -2574,7 +2574,7 @@ attribute vec4 aBackgroundColor;
 attribute vec4 aDisableWrapMode;
 
 uniform mat3 projectionMatrix;
-uniform mat3 worldTransformMatrix;
+uniform mat3 viewMatrix;
 uniform vec4 modulate;
 
 varying float vTextureId;
@@ -2590,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;
@@ -3321,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();
@@ -3525,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() {
@@ -3619,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) {
@@ -6559,7 +6559,7 @@ let Viewport = class extends Node {
     this.projection.flipY(flipY);
   }
   projection = new Projection2D();
-  worldTransform = new Transform2D();
+  canvasTransform = new Transform2D();
   _framebufferIndex = 0;
   _framebuffers = [
     { texture: new ViewportTexture(), needsUpload: false },
@@ -6674,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.worldTransform.toArray(true);
+    renderer.program.uniforms.viewMatrix = this.canvasTransform.toArray(true);
     this.activate(renderer);
     renderer.clear();
     super.render(renderer, next);
@@ -6689,11 +6689,11 @@ let Viewport = class extends Node {
   getRect() {
     return new Rect2(this.x, this.y, this.width, this.height);
   }
-  toGlobal(worldPos, newPos) {
-    return this.worldTransform.applyInverse(worldPos, newPos);
+  toCanvasGlobal(screenPos, newPos) {
+    return this.canvasTransform.applyAffineInverse(screenPos, newPos);
   }
-  toWorld(globalPos, newPos) {
-    return this.worldTransform.apply(globalPos, newPos);
+  toCanvasScreen(globalPos, newPos) {
+    return this.canvasTransform.apply(globalPos, newPos);
   }
 };
 __decorateClass$P([
@@ -7231,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);
@@ -7308,7 +7301,7 @@ let Node2D = class extends CanvasItem {
     }
   }
   toLocal(globalPos, newPos) {
-    return this.globalTransform.applyInverse(globalPos, newPos);
+    return this.globalTransform.applyAffineInverse(globalPos, newPos);
   }
   toGlobal(localPos, newPos) {
     return this.globalTransform.apply(localPos, newPos);
@@ -7335,7 +7328,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
   return result;
 };
 let Camera2D = class extends Node2D {
-  zoom = new Vector2(1, 1).on("update", () => this.updateWorldTransform());
+  zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
   maxZoom = new Vector2(6, 6);
   minZoom = new Vector2(0.1, 0.1);
   _screenOffset = { x: 0, y: 0 };
@@ -7422,14 +7415,26 @@ let Camera2D = class extends Node2D {
   }
   updateTransform() {
     super.updateTransform();
-    this.updateWorldTransform();
+    this.updateCanvasTransform();
   }
-  updateWorldTransform() {
+  updateCanvasTransform() {
     const viewport = this.getViewport();
     if (!viewport)
       return;
-    viewport.worldTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
-    this.emit("updateWorldTransform");
+    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([
@@ -10032,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);
     });
@@ -10223,7 +10228,7 @@ let BaseElement2D = class extends Node2D {
             const pos = new Vector2(screenX, screenY);
             const viewport = this.getViewport();
             if (viewport) {
-              viewport.toGlobal(pos, pos);
+              viewport.toCanvasGlobal(pos, pos);
             }
             this.toLocal(pos, pos);
             if (this._positionInput(pos, key)) {

package/package.json

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