modern-canvas 0.12.22 → 0.13.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineProperty as Ht, Observable as de, Reactivable as Ir, parseColor as Ls, property as u, RawWeakMap as Br, isGradient as Fs, isColorFillObject as mr, clearUndef as Nr, idGenerator as zr, normalizeFill as $s, isNone as L, normalizeBackground as Vs, normalizeForeground as Gs, normalizeOutline as js, normalizeShadow as Ws, normalizeShape as qs, getDefaultStyle as Xs, normalizeText as Hs, normalizeTextContent as Ys, getDefaultTextStyle as Ks, getDefaultLayoutStyle as Zs } from "modern-idoc";
+import { defineProperty as Ht, Observable as de, Reactivable as Ir, parseColor as zs, property as u, RawWeakMap as Br, isGradient as Fs, isColorFillObject as mr, clearUndef as Nr, idGenerator as Lr, normalizeFill as $s, isNone as z, normalizeBackground as Vs, normalizeForeground as Gs, normalizeOutline as js, normalizeShadow as Ws, normalizeShape as qs, getDefaultStyle as Xs, normalizeText as Hs, normalizeTextContent as Ys, getDefaultTextStyle as Ks, getDefaultLayoutStyle as Zs } from "modern-idoc";
 import { fonts as Js } from "modern-font";
 import { extend as Qs } from "colord";
 import ei from "colord/plugins/names";
@@ -81,7 +81,7 @@ class k {
   }
 }
 k.start();
-async function Lr(r) {
+async function zr(r) {
   return new Promise((e) => {
     k.on(
       () => {
@@ -545,7 +545,7 @@ class pe extends Ir {
     this.setProperties(e);
   }
   _nextTick() {
-    return Lr();
+    return zr();
   }
   equal(e) {
     return !!(e && this.instanceId === e.instanceId);
@@ -563,7 +563,7 @@ class Z {
     return this._value;
   }
   set value(e) {
-    this._colord = Ls(e ?? "none");
+    this._colord = zs(e ?? "none");
   }
   get r8() {
     return this._colord.rgba.r;
@@ -1352,8 +1352,8 @@ class ge {
     };
   }
 }
-class O extends Kr {
-  static _t2d = /* @__PURE__ */ new O();
+class M extends Kr {
+  static _t2d = /* @__PURE__ */ new M();
   premultiply(e) {
     return e.multiply(this, this);
   }
@@ -1364,7 +1364,7 @@ class O extends Kr {
     return this.skew(0, e);
   }
   skew(e, t) {
-    return this.premultiply(O._t2d.makeSkew(e, t));
+    return this.premultiply(M._t2d.makeSkew(e, t));
   }
   makeSkew(e, t) {
     const s = Math.tan(e), i = Math.tan(t);
@@ -1393,7 +1393,7 @@ class O extends Kr {
     return this.translate(e, t, s);
   }
   translate(e, t, s = 0) {
-    return this.premultiply(O._t2d.makeTranslation(e, t, s));
+    return this.premultiply(M._t2d.makeTranslation(e, t, s));
   }
   makeTranslation(e, t, s = 0) {
     return this.set([
@@ -1418,7 +1418,7 @@ class O extends Kr {
     return this.scale(e, t, s);
   }
   scale(e, t, s = 1) {
-    return this.premultiply(O._t2d.makeScale(e, t, s));
+    return this.premultiply(M._t2d.makeScale(e, t, s));
   }
   makeScale(e, t, s = 1) {
     return this.set([
@@ -1443,7 +1443,7 @@ class O extends Kr {
     return this.rotate(e);
   }
   rotate(e) {
-    return this.premultiply(O._t2d.makeRotation(e));
+    return this.premultiply(M._t2d.makeRotation(e));
   }
   rotate3d(e, t, s, i) {
     const [o, a, n] = this._rotate3d(e, t, s, i);
@@ -1600,7 +1600,7 @@ Jr([
   u({ internal: !0 })
 ], Jt.prototype, "view");
 var Ye = /* @__PURE__ */ ((r) => (r.NORMAL = "normal", r.ADD = "add", r.MULTIPLY = "multiply", r.SCREEN = "screen", r.NONE = "none", r.NORMAL_NPM = "normal_npm", r.ADD_NPM = "add_npm", r.SCREEN_NPM = "screen_npm", r.SRC_IN = "src_in", r.SRC_OUT = "src_out", r.SRC_ATOP = "src_atop", r.DST_OVER = "dst_over", r.DST_IN = "dst_in", r.DST_OUT = "dst_out", r.DST_ATOP = "dst_atop", r.XOR = "xor", r.SUBTRACT = "subtract", r))(Ye || {});
-function zi(r) {
+function Li(r) {
   return {
     normal: [r.ONE, r.ONE_MINUS_SRC_ALPHA],
     add: [r.ONE, r.ONE],
@@ -1689,7 +1689,7 @@ class Re {
   }
 }
 Re._init();
-class Li extends X {
+class zi extends X {
   install(e) {
     super.install(e), e.state = this;
   }
@@ -1700,7 +1700,7 @@ class Li extends X {
   blendModes;
   defaultState = new Re({ blend: !0 });
   onUpdateContext() {
-    super.onUpdateContext(), this.blendModes = zi(this._renderer.gl);
+    super.onUpdateContext(), this.blendModes = Li(this._renderer.gl);
   }
   toggle(e, t) {
     this._renderer.gl[t ? "enable" : "disable"](e);
@@ -1917,18 +1917,18 @@ void main(void) {
     let l = 0, c = 0;
     const d = [];
     for (let _ = s.length, f = { id: ++this._drawCallUid }, m = [], g = /* @__PURE__ */ new Map(), w = 0, P = 0, R = 0; R < _; R++) {
-      const A = s[R].texture, z = R === _ - 1;
+      const A = s[R].texture, L = R === _ - 1;
       if (!A || g.has(A)) {
-        if (!z)
+        if (!L)
           continue;
       } else
         m.push(A), g.set(A, w++);
-      if (z || w >= i) {
+      if (L || w >= i) {
         f.textures = m, f.textureLocationMap = g, w = 0, f.first = c;
         for (let V = P; V <= R; V++) {
           const {
             indices: ur,
-            vertices: zt,
+            vertices: Lt,
             uvs: dr = new Float32Array(0),
             size: pr = new Float32Array(0),
             texture: fr,
@@ -1938,9 +1938,9 @@ void main(void) {
             disableWrapMode: Us = !1
           } = s[V], Ds = pr[0] || 0, Is = pr[1] || 0;
           P < V && f.blendMode !== _r && (f.count = c - f.first, d.push(f), P = V, f = { id: ++this._drawCallUid }, f.textures = m, f.first = c);
-          const Bs = l / this._vertexSize, Ns = (fr ? g.get(fr) : -1) ?? -1, zs = Us ? 1 : 0;
-          for (let Lt = zt.length, Y = 0; Y < Lt; Y += 2) {
-            if (a[l++] = Ns, a[l++] = zt[Y], a[l++] = zt[Y + 1], a[l++] = Ds, a[l++] = Is, a[l++] = dr[Y], a[l++] = dr[Y + 1], je) {
+          const Bs = l / this._vertexSize, Ns = (fr ? g.get(fr) : -1) ?? -1, Ls = Us ? 1 : 0;
+          for (let zt = Lt.length, Y = 0; Y < zt; Y += 2) {
+            if (a[l++] = Ns, a[l++] = Lt[Y], a[l++] = Lt[Y + 1], a[l++] = Ds, a[l++] = Is, a[l++] = dr[Y], a[l++] = dr[Y + 1], je) {
               const te = l * 4;
               n[te] = je[0], n[te + 1] = je[1], n[te + 2] = je[2], n[te + 3] = je[3];
             }
@@ -1948,9 +1948,9 @@ void main(void) {
               const te = l * 4;
               n[te] = We[0], n[te + 1] = We[1], n[te + 2] = We[2], n[te + 3] = We[3];
             }
-            l++, a[l++] = zs;
+            l++, a[l++] = Ls;
           }
-          for (let Lt = ur.length, Y = 0; Y < Lt; Y++)
+          for (let zt = ur.length, Y = 0; Y < zt; Y++)
             h[c++] = Bs + ur[Y];
           f.blendMode = _r;
         }
@@ -1962,11 +1962,11 @@ void main(void) {
     for (let _ = d.length, f = 0; f < _; f++) {
       const m = d[f], { first: g = 0, textures: w, textureLocationMap: P } = m;
       for (let R = w.length, A = 0; A < R; A++) {
-        const z = w[A], V = P.get(z);
+        const L = w[A], V = P.get(L);
         V !== void 0 && this._renderer.texture.bind({
           target: "texture_2d",
           location: V,
-          value: z
+          value: L
         });
       }
       this._state.blendMode = m.blendMode, this._renderer.state.bind(this._state), p.draw({
@@ -2874,7 +2874,7 @@ class Qi extends Jt {
     new ji(),
     new Zi(),
     new Ji(),
-    new Li(),
+    new zi(),
     new Gi(),
     new Xi(),
     new Hi(),
@@ -3629,11 +3629,11 @@ class Ot extends T {
     const { angle: a = 0, stops: n } = e, h = t, l = s, c = h / 2, d = l / 2, p = (a + 90) * Math.PI / 180, _ = Math.sin(p), f = -Math.cos(p), m = Math.abs(h * Math.sin(p)) + Math.abs(l * Math.cos(p)), g = c - _ * (m / 2), w = d - f * (m / 2), P = c + _ * (m / 2), R = d + f * (m / 2), A = o.createLinearGradient(g, w, P, R);
     for (const V of n) A.addColorStop(V.offset, V.color);
     o.fillStyle = A, o.fillRect(0, 0, h, l);
-    const z = o.getImageData(0, 0, i.width, i.height);
+    const L = o.getImageData(0, 0, i.width, i.height);
     return {
-      width: z.width,
-      height: z.height,
-      pixels: new Uint8Array(z.data.buffer)
+      width: L.width,
+      height: L.height,
+      pixels: new Uint8Array(L.data.buffer)
     };
   }
   constructor(e, t, s) {
@@ -4069,7 +4069,7 @@ function yo(r) {
   let e = Pr[r] ?? 0;
   return e++, Pr[r] = e, e;
 }
-let M = class extends pe {
+let O = class extends pe {
   _meta = new go(this);
   get meta() {
     return this._meta;
@@ -4265,7 +4265,7 @@ let M = class extends pe {
       const n = e.renderStack.push(this);
       a = e.renderStack.currentCall, e.renderStack.currentCall = n;
     }
-    if (this.mask instanceof M)
+    if (this.mask instanceof O)
       this.getNode("__$mask") || (this.mask.processMode = "disabled", this.appendChild(this.mask, "front"));
     else {
       const n = this.getNode("__$mask");
@@ -4429,43 +4429,43 @@ let M = class extends pe {
   static parse(r) {
     if (Array.isArray(r))
       return r.map((n) => this.parse(n));
-    const { meta: e = {}, children: t, ...s } = r, { inCanvasIs: i = "Node" } = e, o = Yt.get(i) ?? M, a = new o({ ...s, meta: e });
+    const { meta: e = {}, children: t, ...s } = r, { inCanvasIs: i = "Node" } = e, o = Yt.get(i) ?? O, a = new o({ ...s, meta: e });
     return t?.forEach((n) => a.appendChild(this.parse(n))), a;
   }
 };
 ae([
-  u({ fallback: zr() })
-], M.prototype, "id", 2);
+  u({ fallback: Lr() })
+], O.prototype, "id", 2);
 ae([
-  u({ fallback: zr() })
-], M.prototype, "name", 2);
+  u({ fallback: Lr() })
+], O.prototype, "name", 2);
 ae([
   u({ internal: !0, fallback: "inherit" })
-], M.prototype, "processMode", 2);
+], O.prototype, "processMode", 2);
 ae([
   u({ internal: !0, fallback: "default" })
-], M.prototype, "processSortMode", 2);
+], O.prototype, "processSortMode", 2);
 ae([
   u({ internal: !0, fallback: "inherit" })
-], M.prototype, "renderMode", 2);
+], O.prototype, "renderMode", 2);
 ae([
   u({ internal: !0, fallback: "inherit" })
-], M.prototype, "inputMode", 2);
+], O.prototype, "inputMode", 2);
 ae([
   u({ internal: !0, fallback: "default" })
-], M.prototype, "internalMode", 2);
+], O.prototype, "internalMode", 2);
 ae([
   u({ internal: !0 })
-], M.prototype, "mask", 2);
-M = ae([
+], O.prototype, "mask", 2);
+O = ae([
   v("Node")
-], M);
+], O);
 var xo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, Be = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? wo(e, t) : e, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = (s ? a(e, t, i) : a(i)) || i);
   return s && i && xo(e, t, i), i;
 };
-let G = class extends M {
+let G = class extends O {
   constructor(r, e = []) {
     super(), this.setProperties(r).append(e);
   }
@@ -4662,12 +4662,12 @@ var Eo = Object.defineProperty, Co = Object.getOwnPropertyDescriptor, Ne = (r, e
     (a = r[o]) && (i = (s ? a(e, t, i) : a(i)) || i);
   return s && i && Eo(e, t, i), i;
 };
-let j = class extends M {
+let j = class extends O {
   constructor(r = !1) {
     super(), this.flipY = r, this.projection.flipY(r);
   }
   projection = new Ii();
-  canvasTransform = new O();
+  canvasTransform = new M();
   _framebufferIndex = 0;
   _framebuffers = [
     { texture: new wr(), needsUpload: !1 },
@@ -4982,12 +4982,12 @@ class Ro {
     }), this.calls = [];
   }
 }
-var Mo = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, ze = (r, e, t, s) => {
+var Mo = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, Le = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? Oo(e, t) : e, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = (s ? a(e, t, i) : a(i)) || i);
   return s && i && Mo(e, t, i), i;
 };
-let ie = class extends M {
+let ie = class extends O {
   static from(r, e = !1) {
     const [t, s] = r ? Array.isArray(r) ? r : [0, r] : [];
     return new ie({
@@ -5018,22 +5018,22 @@ let ie = class extends M {
     super._process(r), this.paused || this.addTime(r);
   }
 };
-ze([
+Le([
   u({ fallback: 0 })
 ], ie.prototype, "startTime", 2);
-ze([
+Le([
   u({ fallback: 0 })
 ], ie.prototype, "currentTime", 2);
-ze([
+Le([
   u({ fallback: Number.MAX_SAFE_INTEGER })
 ], ie.prototype, "endTime", 2);
-ze([
+Le([
   u({ fallback: !1 })
 ], ie.prototype, "loop", 2);
-ze([
+Le([
   u({ fallback: !1 })
 ], ie.prototype, "paused", 2);
-ie = ze([
+ie = Le([
   v("Timeline")
 ], ie);
 var ko = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, is = (r, e, t, s) => {
@@ -5054,7 +5054,7 @@ var Do = Object.defineProperty, ht = (r, e, t, s) => {
     (a = r[o]) && (i = a(e, t, i) || i);
   return i && Do(e, t, i), i;
 };
-class Le extends Zt {
+class ze extends Zt {
   input = new Ri();
   renderStack = new Ro();
   root = new wt(!0).setTree(this);
@@ -5106,19 +5106,19 @@ class Le extends Zt {
 }
 ht([
   u()
-], Le.prototype, "backgroundColor");
+], ze.prototype, "backgroundColor");
 ht([
   u({ internal: !0, fallback: !1 })
-], Le.prototype, "debug");
+], ze.prototype, "debug");
 ht([
   u({ internal: !0, fallback: !1 })
-], Le.prototype, "processPaused");
+], ze.prototype, "processPaused");
 ht([
   u({ internal: !0, default: () => Js })
-], Le.prototype, "fonts");
+], ze.prototype, "fonts");
 ht([
   u({ internal: !0, default: () => new ie() })
-], Le.prototype, "timeline");
+], ze.prototype, "timeline");
 var Io = Object.getOwnPropertyDescriptor, Bo = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? Io(e, t) : e, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = a(i) || i);
@@ -5136,8 +5136,8 @@ Me = Bo([
     duration: 2e3
   })
 ], Me);
-var No = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, rr = (r, e, t, s) => {
-  for (var i = s > 1 ? void 0 : s ? zo(e, t) : e, o = r.length - 1, a; o >= 0; o--)
+var No = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, rr = (r, e, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? Lo(e, t) : e, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = (s ? a(e, t, i) : a(i)) || i);
   return s && i && No(e, t, i), i;
 };
@@ -5146,12 +5146,12 @@ let xe = class extends ye {
   scale = new S(1, 1).on("update", () => this.updateGlobalTransform());
   skew = new S().on("update", () => this.updateGlobalTransform());
   pivot = new S().on("update", () => this.updateGlobalTransform());
-  extraTransform = new O();
-  transform = new O();
+  extraTransform = new M();
+  transform = new M();
   globalPosition = new S();
   globalScale = new S();
   globalSkew = new S();
-  globalTransform = new O();
+  globalTransform = new M();
   _parentTransformDirtyId;
   constructor(r, e = []) {
     super(), this.setProperties(r).append(e);
@@ -5223,14 +5223,15 @@ rr([
 xe = rr([
   v("Node2D")
 ], xe);
-var Lo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, kt = (r, e, t, s) => {
+var zo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, kt = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? Fo(e, t) : e, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = (s ? a(e, t, i) : a(i)) || i);
-  return s && i && Lo(e, t, i), i;
+  return s && i && zo(e, t, i), i;
 };
 let Ke = class extends xe {
+  canvasTransform = new M();
   _screenOffset = { x: 0, y: 0 };
-  _zoom = new S(1, 1).on("update", () => this.updateCanvasTransform());
+  _zoom = new S(1, 1).on("update", () => this.updateTransform());
   get zoom() {
     return this._zoom;
   }
@@ -5291,8 +5292,8 @@ let Ke = class extends xe {
     } else if (e === "pointermove") {
       const t = r;
       this.grabbing && (this.position.add(
-        -(this._screenOffset.x - t.screenX),
-        -(this._screenOffset.y - t.screenY)
+        this._screenOffset.x - t.screenX,
+        this._screenOffset.y - t.screenY
       ), this._screenOffset = { x: t.screenX, y: t.screenY });
     } else if (e === "pointerup") {
       const t = r;
@@ -5303,16 +5304,16 @@ let Ke = class extends xe {
     if (r.ctrlKey) {
       if (!(r.wheelDeltaY ? Math.abs(Math.abs(r.wheelDeltaY) - Math.abs(3 * r.deltaY)) < 3 : r.deltaMode === 0)) {
         r.preventDefault();
-        const t = this._zoom.x;
+        const t = { x: r.screenX, y: r.screenY }, s = this.toGlobal(t);
         this.zoomWithWheel(r.deltaY);
-        const s = 1 - this._zoom.x / t;
+        const i = this.toScreen(s);
         this.position.add(
-          (r.screenX - this.position.x) * s,
-          (r.screenY - this.position.y) * s
+          i.x - t.x,
+          i.y - t.y
         );
       }
     } else
-      r.preventDefault(), this.position.add(-r.deltaX, -r.deltaY);
+      r.preventDefault(), this.position.add(r.deltaX, r.deltaY);
   }
   zoomWithWheel(r) {
     const e = Math.log(this._zoom.x), t = -r * this.wheelSensitivity, s = e + t;
@@ -5322,20 +5323,13 @@ let Ke = class extends xe {
     super.updateTransform(), this.updateCanvasTransform();
   }
   updateCanvasTransform() {
-    const r = this.getViewport();
-    r && (r.canvasTransform.identity().scale(this._zoom.x, this._zoom.y).translate(this.position.x, this.position.y), this.emit("updateCanvasTransform"));
+    this.canvasTransform.identity().scale(this._zoom.x, this._zoom.y).premultiply(this.transform.affineInverse()), this.getViewport()?.canvasTransform.copy(this.canvasTransform), this.emit("updateCanvasTransform");
   }
   toGlobal(r, e) {
-    const t = this.getViewport();
-    if (!t)
-      throw new Error("Failed to toGlobal, viewport is empty");
-    return t.toCanvasGlobal(r, e);
+    return this.canvasTransform.applyAffineInverse(r, e);
   }
   toScreen(r, e) {
-    const t = this.getViewport();
-    if (!t)
-      throw new Error("Failed to toScreen, viewport is empty");
-    return t.toCanvasScreen(r, e);
+    return this.canvasTransform.apply(r, e);
   }
   toJSON() {
     return {
@@ -5410,7 +5404,7 @@ function Al(r) {
   }
   return e;
 }
-function $o(r, e, t, s = new O()) {
+function $o(r, e, t, s = new M()) {
   return r = !r || r === "none" ? "" : r, At(r, { width: e, height: t }).reverse().forEach(({ name: i, args: o }) => {
     const a = o.map((n) => n.normalizedIntValue);
     switch (i) {
@@ -7110,7 +7104,7 @@ ue = ct([
 ], ue);
 function Pt(r, e) {
   let t = !1;
-  const { left: s = 0, top: i = 0, width: o, height: a } = e, n = new O().translate(-s, -i).scale(1 / o, 1 / a);
+  const { left: s = 0, top: i = 0, width: o, height: a } = e, n = new M().translate(-s, -i).scale(1 / o, 1 / a);
   if (r.cropRect) {
     const {
       left: h = 0,
@@ -7147,10 +7141,10 @@ function Pt(r, e) {
   }
   return { disableWrapMode: t, uvTransform: n };
 }
-var za = Object.defineProperty, H = (r, e, t, s) => {
+var La = Object.defineProperty, H = (r, e, t, s) => {
   for (var i = void 0, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = a(e, t, i) || i);
-  return i && za(e, t, i), i;
+  return i && La(e, t, i), i;
 };
 class D extends pe {
   constructor(e) {
@@ -7163,7 +7157,7 @@ class D extends pe {
   }
   setProperties(e) {
     return this._setProperties(
-      L(e) ? void 0 : $s(e)
+      z(e) ? void 0 : $s(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7190,7 +7184,7 @@ class D extends pe {
       this.linearGradient ?? this.radialGradient,
       this.parent.size.width,
       this.parent.size.height
-    ) : L(this.image) || (this.parent.tree?.log(`load image ${this.image}`), this.image.split("?")[0].endsWith(".gif") ? this.animatedTexture = await q.gif.load(this.image) : this.texture = await q.texture.load(this.image));
+    ) : z(this.image) || (this.parent.tree?.log(`load image ${this.image}`), this.image.split("?")[0].endsWith(".gif") ? this.animatedTexture = await q.gif.load(this.image) : this.texture = await q.texture.load(this.image));
   }
   async _updateTexture() {
     await this.loadTexture(), this.parent.requestRedraw();
@@ -7264,15 +7258,15 @@ H([
 H([
   u()
 ], D.prototype, "opacity");
-var La = Object.defineProperty, Fa = (r, e, t, s) => {
+var za = Object.defineProperty, Fa = (r, e, t, s) => {
   for (var i = void 0, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = a(e, t, i) || i);
-  return i && La(e, t, i), i;
+  return i && za(e, t, i), i;
 };
 class Cs extends D {
   setProperties(e) {
     return super._setProperties(
-      L(e) ? void 0 : Vs(e)
+      z(e) ? void 0 : Vs(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7294,7 +7288,7 @@ var $a = Object.defineProperty, Va = (r, e, t, s) => {
 class Ss extends D {
   setProperties(e) {
     return super._setProperties(
-      L(e) ? void 0 : Gs(e)
+      z(e) ? void 0 : Gs(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7316,7 +7310,7 @@ var Ga = Object.defineProperty, ut = (r, e, t, s) => {
 class $e extends D {
   setProperties(e) {
     return super._setProperties(
-      L(e) ? void 0 : js(e)
+      z(e) ? void 0 : js(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7373,7 +7367,7 @@ class Ve extends pe {
   }
   setProperties(e) {
     return super.setProperties(
-      L(e) ? void 0 : Ws(e)
+      z(e) ? void 0 : Ws(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7419,7 +7413,7 @@ class Ge extends pe {
   _path2DSet = new ti();
   setProperties(e) {
     return super.setProperties(
-      L(e) ? void 0 : qs(e)
+      z(e) ? void 0 : qs(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7504,7 +7498,7 @@ class ee extends pe {
   _textureMap = /* @__PURE__ */ new Map();
   setProperties(e) {
     return super.setProperties(
-      L(e) ? void 0 : Hs(e)
+      z(e) ? void 0 : Hs(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7562,7 +7556,7 @@ class ee extends pe {
       e.linearGradient ?? e.radialGradient,
       t.width,
       t.height
-    ) : L(e.image) ? void 0 : (this.parent.tree?.log(`load image ${e.image}`), await q.texture.load(e.image));
+    ) : z(e.image) ? void 0 : (this.parent.tree?.log(`load image ${e.image}`), await q.texture.load(e.image));
   }
   setContent(e) {
     this.content = Ys(e);
@@ -7578,7 +7572,7 @@ class ee extends pe {
     if (e.scale.x > 0 && e.scale.y > 0)
       return;
     const t = e.scale.x * e.scale.y, s = e.pivot;
-    return new O().translate(-s.x, -s.y).scale(t > 0 ? 1 : -1, 1).translate(s.x, s.y);
+    return new M().translate(-s.x, -s.y).scale(t > 0 ? 1 : -1, 1).translate(s.x, s.y);
   }
   useTextureDraw() {
     let e = this.drawMode;
@@ -7590,7 +7584,7 @@ class ee extends pe {
         const i = s.getMeta();
         if (i instanceof oi) {
           const o = i.parent.index, a = i.parent.parent.index;
-          if (s.style.fill && !L(s.style.fill))
+          if (s.style.fill && !z(s.style.fill))
             if (typeof s.style.fill == "object") {
               const n = s.style.fill, h = this._textureMap.get(`${a}.${o}.fill`) ?? this._textureMap.get(`${a}.fill`) ?? this._textureMap.get("fill");
               if (n.enabled !== !1 && (h || n.color)) {
@@ -7611,7 +7605,7 @@ class ee extends pe {
               e.addPath(s), e.style = { ...s.style }, e.fill({
                 vertTransform: this._createVertTransform()
               });
-          if (s.style.stroke && !L(s.style.stroke))
+          if (s.style.stroke && !z(s.style.stroke))
             if (typeof s.style.stroke == "object") {
               const n = s.style.stroke, h = this._textureMap.get(`${a}.${o}.outline`) ?? this._textureMap.get(`${a}.outline`) ?? this._textureMap.get("outline");
               if (n.enabled !== !1 && (h || n.color) && (n.width === void 0 || n.width)) {
@@ -7642,7 +7636,7 @@ class ee extends pe {
   _textureDraw(e) {
     const { left: t = 0, top: s = 0, width: i, height: o } = this.base.boundingBox;
     e.fillStyle = this._texture, e.rect(t, s, i, o), e.fill({
-      uvTransform: new O().translate(-t, -s).scale(1 / i, 1 / o),
+      uvTransform: new M().translate(-t, -s).scale(1 / i, 1 / o),
       vertTransform: this._createVertTransform()
     });
   }
@@ -7841,7 +7835,7 @@ let rt = class extends xe {
         this._overflowHidden = e === "hidden";
         break;
       case "pointerEvents":
-        this._allowPointerEvents = !L(e);
+        this._allowPointerEvents = !z(e);
         break;
       case "borderRadius":
       default:
@@ -8508,7 +8502,7 @@ let De = class extends Te {
       const { left: e = 0, top: t = 0, right: s = 0, bottom: i = 0 } = this.srcRect ?? {}, { width: o, height: a } = this.size;
       this.context.fillStyle = r;
       const n = Math.abs(1 + (e + s)) * o, h = Math.abs(1 + (t + i)) * a, l = 1 / n, c = 1 / h, d = e * o * l, p = t * a * c;
-      this.context.uvTransform = new O().scale(l, c).translate(d, p), this.shape.draw(), this.context.fill();
+      this.context.uvTransform = new M().scale(l, c).translate(d, p), this.shape.draw(), this.context.fill();
     }
   }
   _repaint(r) {
@@ -8670,7 +8664,7 @@ function _t(r, e, t, s) {
   const o = 3 * r - 3 * t + 1, a = 3 * t - 6 * r, n = 3 * r, h = 3 * e - 3 * s + 1, l = 3 * s - 6 * e, c = 3 * e, d = (m) => (3 * o * m + 2 * a) * m + n, p = (m) => ((o * m + a) * m + n) * m, _ = (m) => ((h * m + l) * m + c) * m;
   function f(m) {
     let g = m, w, P;
-    for (let z = 0; z < 8; z++) {
+    for (let L = 0; L < 8; L++) {
       if (P = p(g) - m, Math.abs(P) < 1e-6)
         return g;
       if (w = d(g), Math.abs(w) < 1e-6)
@@ -9667,7 +9661,7 @@ let it = class extends Te {
   }
   _drawSrc() {
     const r = this._src;
-    r?.isValid() && (this.context.fillStyle = r, this.context.uvTransform = new O().scale(
+    r?.isValid() && (this.context.fillStyle = r, this.context.uvTransform = new M().scale(
       1 / this.style.width,
       1 / this.style.height
     ));
@@ -9750,11 +9744,11 @@ void main(void) {
 Et = In([
   v("KawaseTransition")
 ], Et);
-var Nn = Object.defineProperty, zn = Object.getOwnPropertyDescriptor, Ln = (r, e, t) => e in r ? Nn(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, Fn = (r, e, t, s) => {
-  for (var i = s > 1 ? void 0 : s ? zn(e, t) : e, o = r.length - 1, a; o >= 0; o--)
+var Nn = Object.defineProperty, Ln = Object.getOwnPropertyDescriptor, zn = (r, e, t) => e in r ? Nn(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, Fn = (r, e, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? Ln(e, t) : e, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = a(i) || i);
   return i;
-}, $n = (r, e, t) => Ln(r, e + "", t);
+}, $n = (r, e, t) => zn(r, e + "", t);
 let Ct = class extends Me {
   apply(r) {
     b.draw(r, Ct.material, {
@@ -10001,9 +9995,12 @@ class el extends Ee {
       },
       loop: !1,
       autoplay: !1,
-      animationData: await e.fetch(s).then((a) => a.json())
+      animationData: await e.loadBy(
+        s,
+        () => e.fetch(s).then((a) => a.json())
+      )
     });
-    return this.load = (s, i) => e.loadBy(s, () => t(s, i)), [
+    return this.load = (s, i) => t(s, i), [
       "lottie"
     ].forEach((s) => {
       e.register(s, t);
@@ -10238,7 +10235,7 @@ const Ae = {
   preserveDrawingBuffer: !1,
   powerPreference: "default"
 };
-class Nt extends Le {
+class Nt extends ze {
   renderer;
   get view() {
     return this.renderer.view;
@@ -10319,7 +10316,7 @@ class Nt extends Le {
     return this.renderer.resize(e, t, s), this.root.width = e, this.root.height = t, this.root.requestUpload(), this.render(), this;
   }
   nextTick() {
-    return Lr();
+    return zr();
   }
   async waitUntilLoad() {
     await q.waitUntilLoad(), await this.nextTick();
@@ -10406,7 +10403,7 @@ async function cl(r) {
     data: o,
     keyframes: a = [],
     onBefore: n,
-    onFrame: h
+    onKeyframe: h
   } = r;
   return I ??= new Nt({
     pixelRatio: 1,
@@ -10414,8 +10411,8 @@ async function cl(r) {
     height: 1,
     preserveDrawingBuffer: !0
   }), I.debug = e, I.fonts = t, I.timeline.currentTime = 0, I.root.removeChildren(), I.resize(s, i, !0), (Array.isArray(o) ? o : [o]).forEach((l) => {
-    l instanceof M ? (l.parent = void 0, I.root.appendChild(l)) : I.root.appendChild(M.parse(l));
-  }), await n?.(I), await I.waitAndRender(), await new Promise((l) => {
+    l instanceof O ? (l.parent = void 0, I.root.appendChild(l)) : I.root.appendChild(O.parse(l));
+  }), await n?.(I), await I.waitAndRender(), a.length && await new Promise((l) => {
     let c = 0;
     const d = a.length, p = a[d - 1];
     async function _() {
@@ -10425,7 +10422,7 @@ async function cl(r) {
       I.timeline.currentTime = f, I.render(), await h?.(I.toPixels(), {
         currentTime: f,
         duration: g,
-        progress: f / p
+        progress: p !== 0 ? f / p : 1
       }), requestAnimationFrame(_);
     }
     _();
@@ -10513,7 +10510,7 @@ export {
   ki as Matrix4,
   go as Meta,
   Hr as MouseInputEvent,
-  M as Node,
+  O as Node,
   xe as Node2D,
   U as OutlineEffect,
   Kt as PI,
@@ -10544,7 +10541,7 @@ export {
   gi as SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT,
   vi as SUPPORTS_WEB_AUDIO,
   _i as SUPPORTS_WHEEL_EVENTS,
-  Le as SceneTree,
+  ze as SceneTree,
   tl as TextLoader,
   T as Texture2D,
   rl as TextureLoader,
@@ -10553,7 +10550,7 @@ export {
   ot as TiltShiftTransition,
   ie as Timeline,
   G as TimelineNode,
-  O as Transform2D,
+  M as Transform2D,
   cn as TransformRect2D,
   Me as Transition,
   St as TwistTransition,
@@ -10582,7 +10579,7 @@ export {
   Qi as WebGLRenderer,
   Xi as WebGLScissorModule,
   Re as WebGLState,
-  Li as WebGLStateModule,
+  zi as WebGLStateModule,
   Hi as WebGLStencilModule,
   Ki as WebGLTextureModule,
   Zi as WebGLVertexArrayModule,
@@ -10627,9 +10624,9 @@ export {
   C as lerp,
   _n as linear,
   xr as log2,
-  zi as mapWebGLBlendModes,
+  Li as mapWebGLBlendModes,
   yr as nextPow2,
-  Lr as nextTick,
+  zr as nextTick,
   Or as overflowMap,
   Al as parseCSSFilter,
   $o as parseCSSTransform,

package/dist/render.d.ts

@@ -9,7 +9,7 @@ export interface RenderOptions {
     fonts?: Fonts;
     keyframes?: number[];
     onBefore?: (engine: Engine) => void | Promise<void>;
-    onFrame?: (frame: Uint8ClampedArray<ArrayBuffer>, ctx: {
+    onKeyframe?: (frame: Uint8ClampedArray<ArrayBuffer>, ctx: {
         currentTime: number;
         duration: number;
         progress: number;

package/dist/scene/2d/Camera2D.d.ts

@@ -1,7 +1,7 @@
 import type { InputEvent, InputEventKey, Vector2Data, WheelInputEvent } from '../../core';
 import type { Node } from '../main';
 import type { Node2DEvents, Node2DProperties } from './Node2D';
-import { Vector2 } from '../../core';
+import { Transform2D, Vector2 } from '../../core';
 import { Node2D } from './Node2D';
 export interface Camera2DProperties extends Node2DProperties {
     zoom?: Vector2Data;
@@ -22,6 +22,7 @@ export declare class Camera2D extends Node2D {
     wheelSensitivity: number;
     spaceKey: boolean;
     grabbing: boolean;
+    readonly canvasTransform: Transform2D;
     protected _screenOffset: {
         x: number;
         y: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.12.22",
+  "version": "0.13.0",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",
@@ -97,8 +97,8 @@
     "simple-git-hooks": "^2.13.1",
     "typescript": "^5.9.3",
     "unbuild": "^3.6.1",
-    "vite": "^7.1.12",
-    "vitest": "^4.0.6",
+    "vite": "^7.2.1",
+    "vitest": "^4.0.7",
     "yoga-layout": "^3.2.1"
   },
   "simple-git-hooks": {