modern-canvas 0.7.0 → 0.7.1

package/dist/index.cjs

@@ -1081,7 +1081,7 @@ class Vector extends modernIdoc.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") {
@@ -1167,29 +1167,41 @@ class Vector extends modernIdoc.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);
@@ -1201,11 +1213,14 @@ class Vector extends modernIdoc.EventEmitter {
   }
   _onUpdate(_array) {
   }
+  toName() {
+    return `Vector${this.dim}`;
+  }
   toArray() {
     return this._array.slice();
   }
-  toName() {
-    return `Vector${this.dim}`;
+  toJSON() {
+    return this.toArray();
   }
 }
 
@@ -1225,7 +1240,7 @@ class Matrix extends modernIdoc.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") {
@@ -1312,7 +1327,7 @@ class Matrix extends modernIdoc.EventEmitter {
     return this.set(array);
   }
   set(value) {
-    return this._operate("=", value);
+    return this.operate("=", value);
   }
   copy(value) {
     return this.set(value);
@@ -1323,7 +1338,7 @@ class Matrix extends modernIdoc.EventEmitter {
     return cloned;
   }
   multiply(value, output) {
-    return this._operate("*", value, output);
+    return this.operate("*", value, output);
   }
   _onUpdate(_array) {
     this.dirtyId++;
@@ -1345,7 +1360,7 @@ class Matrix extends modernIdoc.EventEmitter {
     return `Matrix${this.rows}(${this.rows}x${this.cols})`;
   }
   toJSON() {
-    return this._array;
+    return this._array.slice();
   }
 }
 
@@ -1357,7 +1372,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) {
@@ -1386,7 +1401,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);
   }
 }
 
@@ -1527,7 +1542,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),
@@ -1576,7 +1591,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);
@@ -1839,7 +1854,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);
   }
 }
 
@@ -2087,13 +2102,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 {
@@ -4331,13 +4346,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 {
@@ -4388,13 +4403,13 @@ __decorateClass$Y([
   modernIdoc.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 {
@@ -4445,13 +4460,13 @@ __decorateClass$X([
   modernIdoc.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 {
@@ -4747,13 +4762,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 {
@@ -4924,13 +4939,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 {
@@ -5169,13 +5184,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) {
@@ -5652,14 +5667,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 = {};
@@ -6171,14 +6186,14 @@ exports.Node = __decorateClass$S([
   customNode("Node")
 ], exports.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;
 };
 exports.TimelineNode = class TimelineNode extends exports.Node {
@@ -6200,7 +6215,7 @@ exports.TimelineNode = class TimelineNode extends exports.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;
@@ -6213,7 +6228,7 @@ exports.TimelineNode = class TimelineNode extends exports.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;
@@ -6254,14 +6269,14 @@ exports.TimelineNode = __decorateClass$R([
   customNode("TimelineNode")
 ], exports.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;
 };
 exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
@@ -6335,7 +6350,7 @@ exports.CanvasItem = class CanvasItem extends exports.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();
@@ -6429,14 +6444,14 @@ exports.CanvasItem = __decorateClass$Q([
   customNode("CanvasItem")
 ], exports.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;
 };
 exports.Viewport = class Viewport extends exports.Node {
@@ -6593,14 +6608,14 @@ exports.Viewport = __decorateClass$P([
   customNode("Viewport")
 ], exports.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;
 };
 exports.Effect = class Effect extends exports.TimelineNode {
@@ -6884,14 +6899,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;
 };
 exports.Timeline = class Timeline extends exports.Node {
@@ -6926,7 +6941,7 @@ exports.Timeline = class Timeline extends exports.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;
@@ -6967,13 +6982,13 @@ exports.Window = __decorateClass$M([
   customNode("Window")
 ], exports.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 {
@@ -7077,14 +7092,14 @@ exports.Transition = __decorateClass$K([
   })
 ], exports.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;
 };
 exports.Node2D = class Node2D extends exports.CanvasItem {
@@ -7197,22 +7212,36 @@ exports.Node2D = __decorateClass$J([
   customNode("Node2D")
 ], exports.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;
 };
 exports.Camera2D = class Camera2D extends exports.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") {
@@ -7221,24 +7250,17 @@ exports.Camera2D = class Camera2D extends exports.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);
       }
     }
   }
@@ -7251,16 +7273,14 @@ exports.Camera2D = class Camera2D extends exports.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([
-  modernIdoc.property({ fallback: 6 })
-], exports.Camera2D.prototype, "maxZoom", 2);
-__decorateClass$I([
-  modernIdoc.property({ fallback: 0.1 })
-], exports.Camera2D.prototype, "minZoom", 2);
 exports.Camera2D = __decorateClass$I([
-  customNode("Camera2D")
+  customNode("Camera2D", {
+    processMode: "disabled",
+    renderMode: "disabled"
+  })
 ], exports.Camera2D);
 
 const defaultFilters = {
@@ -9978,10 +9998,14 @@ exports.BaseElement2D = class BaseElement2D extends exports.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;
               }
@@ -10938,7 +10962,7 @@ exports.Animation = class Animation extends exports.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;
@@ -11104,13 +11128,13 @@ exports.Animation = class Animation extends exports.TimelineNode {
   }
 };
 __decorateClass$e([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: "parent" })
 ], exports.Animation.prototype, "effectMode", 2);
 __decorateClass$e([
-  modernIdoc.property()
+  modernIdoc.property({ fallback: false })
 ], exports.Animation.prototype, "loop", 2);
 __decorateClass$e([
-  modernIdoc.property()
+  modernIdoc.property({ default: () => [] })
 ], exports.Animation.prototype, "keyframes", 2);
 __decorateClass$e([
   modernIdoc.property()
@@ -12770,7 +12794,7 @@ exports.Scaler = class Scaler extends exports.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;
       }