modern-canvas 0.7.14 → 0.7.15

package/dist/index.cjs

@@ -1746,7 +1746,7 @@ class Matrix3 extends Matrix {
   constructor(array) {
     super(3, 3, array);
   }
-  invert() {
+  affineInvert() {
     const [
       n11,
       n21,
@@ -2198,10 +2198,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);
@@ -2580,7 +2580,7 @@ attribute vec4 aBackgroundColor;
 attribute vec4 aDisableWrapMode;
 
 uniform mat3 projectionMatrix;
-uniform mat3 worldTransformMatrix;
+uniform mat3 viewMatrix;
 uniform vec4 modulate;
 
 varying float vTextureId;
@@ -2596,7 +2596,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;
@@ -3327,7 +3327,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();
@@ -3531,7 +3531,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() {
@@ -3625,8 +3625,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) {
@@ -6565,7 +6565,7 @@ exports.Viewport = class Viewport extends exports.Node {
     this.projection.flipY(flipY);
   }
   projection = new Projection2D();
-  worldTransform = new Transform2D();
+  canvasTransform = new Transform2D();
   _framebufferIndex = 0;
   _framebuffers = [
     { texture: new ViewportTexture(), needsUpload: false },
@@ -6680,7 +6680,7 @@ exports.Viewport = class Viewport extends exports.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);
@@ -6695,11 +6695,11 @@ exports.Viewport = class Viewport extends exports.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([
@@ -7237,35 +7237,28 @@ exports.Node2D = class Node2D extends exports.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);
@@ -7314,7 +7307,7 @@ exports.Node2D = class Node2D extends exports.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);
@@ -7341,7 +7334,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
   return result;
 };
 exports.Camera2D = class Camera2D extends exports.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 };
@@ -7428,14 +7421,26 @@ exports.Camera2D = class Camera2D extends exports.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([
@@ -10038,9 +10043,9 @@ exports.BaseElement2D = class BaseElement2D extends exports.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);
     });
@@ -10229,7 +10234,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.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/dist/index.d.cts

@@ -444,7 +444,7 @@ declare class Matrix2 extends Matrix {
  */
 declare class Matrix3 extends Matrix {
     constructor(array?: number[]);
-    invert(): this;
+    affineInvert(): this;
 }
 
 declare class Projection2D extends Matrix3 {
@@ -583,8 +583,8 @@ declare class Transform2D extends Matrix3 {
         y: number;
     }, output?: TransformableObject): TransformableObject;
     apply<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
-    inverse(): this;
-    applyInverse<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
+    affineInverse(): this;
+    applyAffineInverse<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
     isIdentity(): boolean;
     toObject(): TransformObject;
 }
@@ -1105,7 +1105,7 @@ declare class WebGLProgramModule extends WebGLModule {
     boundProgram: WebGLProgram | null;
     uniforms: {
         projectionMatrix: number[];
-        worldTransformMatrix: number[];
+        viewMatrix: number[];
     };
     create(options?: WebGLProgramOptions): WebGLProgram;
     getMeta(program: WebGLProgram): WebGLProgramMeta;
@@ -1532,7 +1532,7 @@ interface Viewport {
 declare class Viewport extends Node implements Rectangulable {
     flipY: boolean;
     readonly projection: Projection2D;
-    readonly worldTransform: Transform2D;
+    readonly canvasTransform: Transform2D;
     protected _framebufferIndex: number;
     protected _framebuffers: ViewportFramebuffer[];
     x: number;
@@ -1557,8 +1557,8 @@ declare class Viewport extends Node implements Rectangulable {
     activateWithCopy(renderer: WebGLRenderer, target: Viewport): void;
     render(renderer: WebGLRenderer, next?: () => void): void;
     getRect(): Rect2;
-    toGlobal<P extends Vector2Data = Vector2>(worldPos: Vector2Data, newPos?: P): P;
-    toWorld<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
+    toCanvasGlobal<P extends Vector2Data = Vector2>(screenPos: Vector2Data, newPos?: P): P;
+    toCanvasScreen<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
 }
 
 interface RenderCall {
@@ -1948,8 +1948,7 @@ declare class Node2D extends CanvasItem {
     constructor(properties?: Partial<Node2DProperties>, nodes?: Node[]);
     protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     getTransformOrigin(): Vector2;
-    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
-    updateTransform(): void;
+    updateTransform(cb?: (transform: Transform2D) => void): void;
     updateGlobalTransform(): void;
     protected _transformVertices(vertices: Float32Array, vertTransform?: VertTransform): Float32Array;
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
@@ -1961,7 +1960,7 @@ declare class Node2D extends CanvasItem {
 interface Camera2DProperties extends Node2DProperties {
 }
 interface Camera2DEventMap extends Node2DEventMap {
-    updateWorldTransform: () => void;
+    updateCanvasTransform: () => void;
 }
 interface Camera2D {
     on: (<K extends keyof Camera2DEventMap>(type: K, listener: Camera2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
@@ -1985,7 +1984,9 @@ declare class Camera2D extends Node2D {
     protected _input(event: InputEvent, key: InputEventKey): void;
     protected _onWheel(e: WheelInputEvent): void;
     updateTransform(): void;
-    updateWorldTransform(): void;
+    updateCanvasTransform(): void;
+    toGlobal<P extends Vector2Data = Vector2>(screenPos: Vector2Data, newPos?: P): P;
+    toScreen<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
 }
 
 interface BaseElement2DFill extends NormalizedFill {
@@ -2156,7 +2157,7 @@ declare class BaseElement2D extends Node2D implements Rectangulable {
     protected _updateStyleProperty(key: string, value: any, _oldValue: any, _declaration?: PropertyDeclaration): void;
     protected _updateMaskImage(): void;
     getTransformOrigin(): Vector2;
-    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
+    updateTransform(cb?: (transform: Transform2D) => void): void;
     updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _getPointArray(): Vector2Data[];

package/dist/index.d.mts

@@ -444,7 +444,7 @@ declare class Matrix2 extends Matrix {
  */
 declare class Matrix3 extends Matrix {
     constructor(array?: number[]);
-    invert(): this;
+    affineInvert(): this;
 }
 
 declare class Projection2D extends Matrix3 {
@@ -583,8 +583,8 @@ declare class Transform2D extends Matrix3 {
         y: number;
     }, output?: TransformableObject): TransformableObject;
     apply<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
-    inverse(): this;
-    applyInverse<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
+    affineInverse(): this;
+    applyAffineInverse<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
     isIdentity(): boolean;
     toObject(): TransformObject;
 }
@@ -1105,7 +1105,7 @@ declare class WebGLProgramModule extends WebGLModule {
     boundProgram: WebGLProgram | null;
     uniforms: {
         projectionMatrix: number[];
-        worldTransformMatrix: number[];
+        viewMatrix: number[];
     };
     create(options?: WebGLProgramOptions): WebGLProgram;
     getMeta(program: WebGLProgram): WebGLProgramMeta;
@@ -1532,7 +1532,7 @@ interface Viewport {
 declare class Viewport extends Node implements Rectangulable {
     flipY: boolean;
     readonly projection: Projection2D;
-    readonly worldTransform: Transform2D;
+    readonly canvasTransform: Transform2D;
     protected _framebufferIndex: number;
     protected _framebuffers: ViewportFramebuffer[];
     x: number;
@@ -1557,8 +1557,8 @@ declare class Viewport extends Node implements Rectangulable {
     activateWithCopy(renderer: WebGLRenderer, target: Viewport): void;
     render(renderer: WebGLRenderer, next?: () => void): void;
     getRect(): Rect2;
-    toGlobal<P extends Vector2Data = Vector2>(worldPos: Vector2Data, newPos?: P): P;
-    toWorld<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
+    toCanvasGlobal<P extends Vector2Data = Vector2>(screenPos: Vector2Data, newPos?: P): P;
+    toCanvasScreen<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
 }
 
 interface RenderCall {
@@ -1948,8 +1948,7 @@ declare class Node2D extends CanvasItem {
     constructor(properties?: Partial<Node2DProperties>, nodes?: Node[]);
     protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     getTransformOrigin(): Vector2;
-    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
-    updateTransform(): void;
+    updateTransform(cb?: (transform: Transform2D) => void): void;
     updateGlobalTransform(): void;
     protected _transformVertices(vertices: Float32Array, vertTransform?: VertTransform): Float32Array;
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
@@ -1961,7 +1960,7 @@ declare class Node2D extends CanvasItem {
 interface Camera2DProperties extends Node2DProperties {
 }
 interface Camera2DEventMap extends Node2DEventMap {
-    updateWorldTransform: () => void;
+    updateCanvasTransform: () => void;
 }
 interface Camera2D {
     on: (<K extends keyof Camera2DEventMap>(type: K, listener: Camera2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
@@ -1985,7 +1984,9 @@ declare class Camera2D extends Node2D {
     protected _input(event: InputEvent, key: InputEventKey): void;
     protected _onWheel(e: WheelInputEvent): void;
     updateTransform(): void;
-    updateWorldTransform(): void;
+    updateCanvasTransform(): void;
+    toGlobal<P extends Vector2Data = Vector2>(screenPos: Vector2Data, newPos?: P): P;
+    toScreen<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
 }
 
 interface BaseElement2DFill extends NormalizedFill {
@@ -2156,7 +2157,7 @@ declare class BaseElement2D extends Node2D implements Rectangulable {
     protected _updateStyleProperty(key: string, value: any, _oldValue: any, _declaration?: PropertyDeclaration): void;
     protected _updateMaskImage(): void;
     getTransformOrigin(): Vector2;
-    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
+    updateTransform(cb?: (transform: Transform2D) => void): void;
     updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _getPointArray(): Vector2Data[];

package/dist/index.d.ts

@@ -444,7 +444,7 @@ declare class Matrix2 extends Matrix {
  */
 declare class Matrix3 extends Matrix {
     constructor(array?: number[]);
-    invert(): this;
+    affineInvert(): this;
 }
 
 declare class Projection2D extends Matrix3 {
@@ -583,8 +583,8 @@ declare class Transform2D extends Matrix3 {
         y: number;
     }, output?: TransformableObject): TransformableObject;
     apply<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
-    inverse(): this;
-    applyInverse<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
+    affineInverse(): this;
+    applyAffineInverse<P extends Vector2Data = Vector2>(pos: Vector2Data, newPos?: P): P;
     isIdentity(): boolean;
     toObject(): TransformObject;
 }
@@ -1105,7 +1105,7 @@ declare class WebGLProgramModule extends WebGLModule {
     boundProgram: WebGLProgram | null;
     uniforms: {
         projectionMatrix: number[];
-        worldTransformMatrix: number[];
+        viewMatrix: number[];
     };
     create(options?: WebGLProgramOptions): WebGLProgram;
     getMeta(program: WebGLProgram): WebGLProgramMeta;
@@ -1532,7 +1532,7 @@ interface Viewport {
 declare class Viewport extends Node implements Rectangulable {
     flipY: boolean;
     readonly projection: Projection2D;
-    readonly worldTransform: Transform2D;
+    readonly canvasTransform: Transform2D;
     protected _framebufferIndex: number;
     protected _framebuffers: ViewportFramebuffer[];
     x: number;
@@ -1557,8 +1557,8 @@ declare class Viewport extends Node implements Rectangulable {
     activateWithCopy(renderer: WebGLRenderer, target: Viewport): void;
     render(renderer: WebGLRenderer, next?: () => void): void;
     getRect(): Rect2;
-    toGlobal<P extends Vector2Data = Vector2>(worldPos: Vector2Data, newPos?: P): P;
-    toWorld<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
+    toCanvasGlobal<P extends Vector2Data = Vector2>(screenPos: Vector2Data, newPos?: P): P;
+    toCanvasScreen<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
 }
 
 interface RenderCall {
@@ -1948,8 +1948,7 @@ declare class Node2D extends CanvasItem {
     constructor(properties?: Partial<Node2DProperties>, nodes?: Node[]);
     protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     getTransformOrigin(): Vector2;
-    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
-    updateTransform(): void;
+    updateTransform(cb?: (transform: Transform2D) => void): void;
     updateGlobalTransform(): void;
     protected _transformVertices(vertices: Float32Array, vertTransform?: VertTransform): Float32Array;
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
@@ -1961,7 +1960,7 @@ declare class Node2D extends CanvasItem {
 interface Camera2DProperties extends Node2DProperties {
 }
 interface Camera2DEventMap extends Node2DEventMap {
-    updateWorldTransform: () => void;
+    updateCanvasTransform: () => void;
 }
 interface Camera2D {
     on: (<K extends keyof Camera2DEventMap>(type: K, listener: Camera2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
@@ -1985,7 +1984,9 @@ declare class Camera2D extends Node2D {
     protected _input(event: InputEvent, key: InputEventKey): void;
     protected _onWheel(e: WheelInputEvent): void;
     updateTransform(): void;
-    updateWorldTransform(): void;
+    updateCanvasTransform(): void;
+    toGlobal<P extends Vector2Data = Vector2>(screenPos: Vector2Data, newPos?: P): P;
+    toScreen<P extends Vector2Data = Vector2>(globalPos: Vector2Data, newPos?: P): P;
 }
 
 interface BaseElement2DFill extends NormalizedFill {
@@ -2156,7 +2157,7 @@ declare class BaseElement2D extends Node2D implements Rectangulable {
     protected _updateStyleProperty(key: string, value: any, _oldValue: any, _declaration?: PropertyDeclaration): void;
     protected _updateMaskImage(): void;
     getTransformOrigin(): Vector2;
-    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
+    updateTransform(cb?: (transform: Transform2D) => void): void;
     updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _getPointArray(): Vector2Data[];