modern-canvas 0.7.0 → 0.7.1

package/dist/index.mjs

@@ -1075,7 +1075,7 @@ class Vector extends EventEmitter {
   get length() {
     return this.dim;
   }
-  _operate(operator, target, output) {
+  operate(operator, target, output) {
     const { dim: length, _array: array } = this;
     let targetArray;
     if (typeof target === "number") {
@@ -1161,29 +1161,41 @@ class Vector extends EventEmitter {
     }
     return outputObject?.set(outputArray) ?? outputArray;
   }
-  add(value, output) {
-    return this._operate("+", value, output);
+  add(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("+", value);
   }
-  sub(value, output) {
-    return this._operate("-", value, output);
+  sub(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("-", value);
   }
-  multiply(value, output) {
-    return this._operate("*", value, output);
+  multiply(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("*", value);
   }
-  divide(value, output) {
-    return this._operate("/", value, output);
+  divide(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
+    }
+    return this.operate("/", value);
   }
   rotate(angle) {
-    return this._operate("rot", angle);
+    return this.operate("rot", angle);
   }
   set(value, ...args) {
     if (args.length && typeof value === "number") {
       value = [value, ...args];
     }
-    return this._operate("=", value);
+    return this.operate("=", value);
   }
   equals(value) {
-    return this._operate("==", value);
+    return this.operate("==", value);
   }
   copy(value) {
     return this.set(value);
@@ -1195,11 +1207,14 @@ class Vector extends EventEmitter {
   }
   _onUpdate(_array) {
   }
+  toName() {
+    return `Vector${this.dim}`;
+  }
   toArray() {
     return this._array.slice();
   }
-  toName() {
-    return `Vector${this.dim}`;
+  toJSON() {
+    return this.toArray();
   }
 }
 
@@ -1219,7 +1234,7 @@ class Matrix extends EventEmitter {
   get length() {
     return this.cols * this.rows;
   }
-  _operate(operator, target, output) {
+  operate(operator, target, output) {
     const { cols, rows, length, _array: array } = this;
     let targetArray;
     if (typeof target === "number") {
@@ -1306,7 +1321,7 @@ class Matrix extends EventEmitter {
     return this.set(array);
   }
   set(value) {
-    return this._operate("=", value);
+    return this.operate("=", value);
   }
   copy(value) {
     return this.set(value);
@@ -1317,7 +1332,7 @@ class Matrix extends EventEmitter {
     return cloned;
   }
   multiply(value, output) {
-    return this._operate("*", value, output);
+    return this.operate("*", value, output);
   }
   _onUpdate(_array) {
     this.dirtyId++;
@@ -1339,7 +1354,7 @@ class Matrix extends EventEmitter {
     return `Matrix${this.rows}(${this.rows}x${this.cols})`;
   }
   toJSON() {
-    return this._array;
+    return this._array.slice();
   }
 }
 
@@ -1351,7 +1366,7 @@ class Matrix4 extends Matrix {
 
 const DEG_TO_RAD = PI / 180;
 const RAD_TO_DEG = 180 / PI;
-function clamp(min, val, max) {
+function clamp(val, min, max) {
   return Math.max(min, Math.min(val, max));
 }
 function lerp(a, b, weight) {
@@ -1380,7 +1395,7 @@ const curves = {
 class Vector4 extends Vector {
   constructor(x = 0, y = 0, z = 0, m = 0) {
     super(4);
-    this.set([x, y, z, m]);
+    this.set(x, y, z, m);
   }
 }
 
@@ -1521,7 +1536,7 @@ class ColorMatrix extends Matrix {
     ]);
   }
   sepia(amount = 1) {
-    const v = clamp(0, amount, 1);
+    const v = clamp(amount, 0, 1);
     return this.multiply([
       lerp(1, 0.393, v),
       lerp(0, 0.7689999, v),
@@ -1570,7 +1585,7 @@ class ColorMatrix extends Matrix {
     ]);
   }
   grayscale(amount = 1) {
-    const v = clamp(0, amount, 1);
+    const v = clamp(amount, 0, 1);
     const r = lerp(1, 0.3, v);
     const rr = lerp(0, 0.3, v);
     const g = lerp(1, 0.59, v);
@@ -1833,7 +1848,7 @@ class Vector2 extends Vector {
     return this;
   }
   static lerp(a, b, t) {
-    return new Vector2(b).clone().sub(new Vector2(a)).multiply(t).add(new Vector2(a));
+    return new Vector2(b).clone().sub(a).multiply(t).add(a);
   }
 }
 
@@ -2081,13 +2096,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$Q = Object.defineProperty;
+var __defProp$P = Object.defineProperty;
 var __decorateClass$Z = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$Q(target, key, result);
+  if (result) __defProp$P(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -4325,13 +4340,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$P = Object.defineProperty;
+var __defProp$O = Object.defineProperty;
 var __decorateClass$Y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$P(target, key, result);
+  if (result) __defProp$O(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4382,13 +4397,13 @@ __decorateClass$Y([
   property({ protected: true, fallback: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$O = Object.defineProperty;
+var __defProp$N = Object.defineProperty;
 var __decorateClass$X = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$O(target, key, result);
+  if (result) __defProp$N(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4439,13 +4454,13 @@ __decorateClass$X([
   property({ protected: true, fallback: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$N = Object.defineProperty;
+var __defProp$M = Object.defineProperty;
 var __decorateClass$W = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$N(target, key, result);
+  if (result) __defProp$M(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4741,13 +4756,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$M = Object.defineProperty;
+var __defProp$L = Object.defineProperty;
 var __decorateClass$V = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$M(target, key, result);
+  if (result) __defProp$L(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -4918,13 +4933,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$L = Object.defineProperty;
+var __defProp$K = Object.defineProperty;
 var __decorateClass$U = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$L(target, key, result);
+  if (result) __defProp$K(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5163,13 +5178,13 @@ class PixelsTexture extends Texture2D {
   }
 }
 
-var __defProp$K = Object.defineProperty;
+var __defProp$J = Object.defineProperty;
 var __decorateClass$T = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$K(target, key, result);
+  if (result) __defProp$J(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5646,14 +5661,14 @@ class Children extends Array {
   }
 }
 
-var __defProp$J = Object.defineProperty;
+var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
 var __decorateClass$S = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$J(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 const iidMap = {};
@@ -6165,14 +6180,14 @@ Node = __decorateClass$S([
   customNode("Node")
 ], Node);
 
-var __defProp$I = Object.defineProperty;
+var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
 var __decorateClass$R = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$I(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 let TimelineNode = class extends Node {
@@ -6194,7 +6209,7 @@ let TimelineNode = class extends Node {
     return this._parent?.startTime ?? 0;
   }
   get currentTime() {
-    return clamp(0, this._currentTime, this.computedDuration);
+    return clamp(this._currentTime, 0, this.computedDuration);
   }
   get startTime() {
     return this._startTime;
@@ -6207,7 +6222,7 @@ let TimelineNode = class extends Node {
     return this._startTime + this.computedDuration;
   }
   get currentTimeProgress() {
-    return this.computedDuration ? clamp(0, this._currentTime / this.computedDuration, 1) : 0;
+    return this.computedDuration ? clamp(this._currentTime / this.computedDuration, 0, 1) : 0;
   }
   isInsideTimeRange() {
     const current = this._currentTime;
@@ -6248,14 +6263,14 @@ TimelineNode = __decorateClass$R([
   customNode("TimelineNode")
 ], TimelineNode);
 
-var __defProp$H = Object.defineProperty;
+var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
 var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$H(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 let CanvasItem = class extends TimelineNode {
@@ -6329,7 +6344,7 @@ let CanvasItem = class extends TimelineNode {
   }
   _updateGlobalOpacity() {
     this._parentGlobalOpacity = this.getParent()?.opacity;
-    const globalOpacity = clamp(0, this.opacity, 1) * (this._parentGlobalOpacity ?? 1);
+    const globalOpacity = clamp(this.opacity, 0, 1) * (this._parentGlobalOpacity ?? 1);
     if (this._globalOpacity !== globalOpacity) {
       this._globalOpacity = globalOpacity;
       this.requestRepaint();
@@ -6423,14 +6438,14 @@ CanvasItem = __decorateClass$Q([
   customNode("CanvasItem")
 ], CanvasItem);
 
-var __defProp$G = Object.defineProperty;
+var __defProp$F = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
 var __decorateClass$P = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -6587,14 +6602,14 @@ Viewport = __decorateClass$P([
   customNode("Viewport")
 ], Viewport);
 
-var __defProp$F = Object.defineProperty;
+var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
 var __decorateClass$O = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 let Effect = class extends TimelineNode {
@@ -6878,14 +6893,14 @@ class RenderStack {
   }
 }
 
-var __defProp$E = Object.defineProperty;
+var __defProp$D = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
 var __decorateClass$N = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 let Timeline = class extends Node {
@@ -6920,7 +6935,7 @@ let Timeline = class extends Node {
     if (this.loop && current > end) {
       current = start + current % end;
     }
-    current = clamp(start, current, end);
+    current = clamp(current, start, end);
     this.currentTime = current;
     this.emit("updateCurrentTime", current, delta);
     return this;
@@ -6961,13 +6976,13 @@ Window = __decorateClass$M([
   customNode("Window")
 ], Window);
 
-var __defProp$D = Object.defineProperty;
+var __defProp$C = Object.defineProperty;
 var __decorateClass$L = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$D(target, key, result);
+  if (result) __defProp$C(target, key, result);
   return result;
 };
 class SceneTree extends MainLoop {
@@ -7071,14 +7086,14 @@ Transition = __decorateClass$K([
   })
 ], Transition);
 
-var __defProp$C = Object.defineProperty;
+var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
 var __decorateClass$J = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 let Node2D = class extends CanvasItem {
@@ -7191,22 +7206,36 @@ Node2D = __decorateClass$J([
   customNode("Node2D")
 ], Node2D);
 
-var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
 var __decorateClass$I = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
+      result = (decorator(result)) || result;
   return result;
 };
 let Camera2D = class extends Node2D {
   zoom = new Vector2(1, 1).on("update", () => this.updateCanvasTransform());
+  maxZoom = new Vector2(6, 6);
+  minZoom = new Vector2(0.1, 0.1);
   constructor(properties, nodes = []) {
     super();
     this.setProperties(properties).append(nodes);
   }
+  addZoom(x, y = x) {
+    this.zoom.set(
+      clamp(this.zoom.x + x, this.minZoom.x, this.maxZoom.x),
+      clamp(this.zoom.y + y, this.minZoom.y, this.maxZoom.y)
+    );
+    return this;
+  }
+  setZoom(x, y = x) {
+    this.zoom.set(
+      clamp(x, this.minZoom.x, this.maxZoom.x),
+      clamp(y, this.minZoom.y, this.maxZoom.y)
+    );
+    return this;
+  }
   _input(event, key) {
     super._input(event, key);
     if (key === "wheel") {
@@ -7215,24 +7244,17 @@ let Camera2D = class extends Node2D {
         const isTouchPad = e.wheelDeltaY ? Math.abs(Math.abs(e.wheelDeltaY) - Math.abs(3 * e.deltaY)) < 3 : e.deltaMode === 0;
         if (!isTouchPad) {
           e.preventDefault();
-          const value = this.zoom.x + e.deltaY * -0.015;
-          const zoom = Math.min(this.maxZoom, Math.max(this.minZoom, value));
-          const ratio = 1 - zoom / this.zoom.x;
-          this.zoom.set([
-            zoom,
-            zoom
-          ]);
-          this.position.add([
+          const oldZoom = this.zoom.x;
+          this.addZoom(e.deltaY * -0.015);
+          const ratio = 1 - this.zoom.x / oldZoom;
+          this.position.add(
             (e.screenX - this.position.x) * ratio,
             (e.screenY - this.position.y) * ratio
-          ]);
+          );
         }
       } else {
         e.preventDefault();
-        this.position.add([
-          -e.deltaX,
-          -e.deltaY
-        ]);
+        this.position.add(-e.deltaX, -e.deltaY);
       }
     }
   }
@@ -7245,16 +7267,14 @@ let Camera2D = class extends Node2D {
     if (!viewport)
       return;
     viewport.canvasTransform.identity().scale(this.zoom.x, this.zoom.y).translate(this.position.x, this.position.y);
+    this.emit("updateCanvasTransform");
   }
 };
-__decorateClass$I([
-  property({ fallback: 6 })
-], Camera2D.prototype, "maxZoom", 2);
-__decorateClass$I([
-  property({ fallback: 0.1 })
-], Camera2D.prototype, "minZoom", 2);
 Camera2D = __decorateClass$I([
-  customNode("Camera2D")
+  customNode("Camera2D", {
+    processMode: "disabled",
+    renderMode: "disabled"
+  })
 ], Camera2D);
 
 const defaultFilters = {
@@ -9972,10 +9992,14 @@ let BaseElement2D = class extends Node2D {
       case "pointermove":
       case "pointerup": {
         if (this.canPointerEvents()) {
-          const { screenX, screenY } = event;
+          let { screenX, screenY } = event;
           if (screenX && screenY) {
-            const [x, y] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
-            if (this._pointerInput({ x, y }, key)) {
+            const viewport = this.getViewport();
+            if (viewport) {
+              [screenX, screenY] = viewport.canvasTransform.inverse().applyToPoint(screenX, screenY);
+            }
+            [screenX, screenY] = this.globalTransform.inverse().applyToPoint(screenX, screenY);
+            if (this._pointerInput({ x: screenX, y: screenY }, key)) {
               if (!event.target) {
                 event.target = this;
               }
@@ -10932,7 +10956,7 @@ let Animation = class extends TimelineNode {
     const offset = 1 / targets.length;
     const progress = this.currentTimeProgress;
     targets.forEach((target, i) => {
-      const tiem = offset === 1 ? progress : clamp(0, Math.max(0, progress - offset * i) / offset, 1);
+      const tiem = offset === 1 ? progress : clamp(Math.max(0, progress - offset * i) / offset, 0, 1);
       const startProps = this._cachedProps.get(target);
       if (!startProps)
         return;
@@ -11098,13 +11122,13 @@ let Animation = class extends TimelineNode {
   }
 };
 __decorateClass$e([
-  property()
+  property({ fallback: "parent" })
 ], Animation.prototype, "effectMode", 2);
 __decorateClass$e([
-  property()
+  property({ fallback: false })
 ], Animation.prototype, "loop", 2);
 __decorateClass$e([
-  property()
+  property({ default: () => [] })
 ], Animation.prototype, "keyframes", 2);
 __decorateClass$e([
   property()
@@ -12764,7 +12788,7 @@ let Scaler = class extends Node {
       case "scale":
       case "min":
       case "max": {
-        this.scale = clamp(this.minScale, this.scale, this.maxScale);
+        this.scale = clamp(this.scale, this.minScale, this.maxScale);
         this._updateTarget();
         break;
       }

package/package.json

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