modern-canvas 0.15.7 → 0.15.8

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineProperty as Qr, Observable as Ct, Reactivable as ts, parseColor as ii, property as h, isGradient as ai, isColorFillObject as Fr, clearUndef as es, idGenerator as vr, isNone as I, normalizeFill as rs, normalizeBackground as oi, normalizeForeground as ni, normalizeOutline as li, normalizeShadow as hi, normalizeShape as ci, getDefaultStyle as ui, normalizeText as di, normalizeTextContent as fi, getDefaultTextStyle as pi, getDefaultLayoutStyle as _i, RawWeakMap as mi } from "modern-idoc";
+import { defineProperty as Qr, Observable as Ct, Reactivable as ts, parseColor as ii, property as h, isGradient as ai, isColorFillObject as Fr, clearUndef as es, idGenerator as vr, isNone as M, normalizeFill as rs, normalizeBackground as oi, normalizeForeground as ni, normalizeOutline as li, normalizeShadow as hi, normalizeShape as ci, getDefaultStyle as ui, normalizeText as di, normalizeTextContent as fi, getDefaultTextStyle as pi, getDefaultLayoutStyle as _i, RawWeakMap as mi } from "modern-idoc";
 import { fonts as gi } from "modern-font";
 import { extend as vi } from "colord";
 import bi from "colord/plugins/names";
@@ -179,7 +179,7 @@ function is(r, t, e = {}) {
   }
   return l;
 }
-const Ci = "WebGL2RenderingContext" in globalThis, Oi = "ImageBitmap" in globalThis, Di = "ResizeObserver" in globalThis, Kt = "PointerEvent" in globalThis, Ii = "WheelEvent" in globalThis, sh = "MouseEvent" in globalThis, pt = "ontouchstart" in globalThis, Mi = "onclick" in globalThis, ih = "createImageBitmap" in globalThis, as = "AudioContext" in globalThis, os = "webkitAudioContext" in globalThis, ns = "OfflineAudioContext" in globalThis, ki = "webkitOfflineAudioContext" in globalThis, Ni = as || os, xr = typeof window < "u", Ui = typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0, ls = globalThis.devicePixelRatio || 1, hs = (r) => r !== null && typeof r == "object" && r.nodeType === 1, Bi = (r) => hs(r) && r.tagName === "VIDEO", ah = (r) => hs(r) && r.tagName === "IMG";
+const Ci = "WebGL2RenderingContext" in globalThis, Oi = "ImageBitmap" in globalThis, Di = "ResizeObserver" in globalThis, Kt = "PointerEvent" in globalThis, Mi = "WheelEvent" in globalThis, sh = "MouseEvent" in globalThis, pt = "ontouchstart" in globalThis, Ii = "onclick" in globalThis, ih = "createImageBitmap" in globalThis, as = "AudioContext" in globalThis, os = "webkitAudioContext" in globalThis, ns = "OfflineAudioContext" in globalThis, ki = "webkitOfflineAudioContext" in globalThis, Ni = as || os, xr = typeof window < "u", Ui = typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0, ls = globalThis.devicePixelRatio || 1, hs = (r) => r !== null && typeof r == "object" && r.nodeType === 1, Bi = (r) => hs(r) && r.tagName === "VIDEO", ah = (r) => hs(r) && r.tagName === "IMG";
 function Li(r) {
   return typeof r == "object" && r !== null && r.nodeType === 1 && r.tagName === "CANVAS";
 }
@@ -375,7 +375,7 @@ class ji extends Ct {
         const a = t.changedTouches[s];
         typeof a.button > "u" && (a.button = 0), typeof a.buttons > "u" && (a.buttons = 1), typeof a.isPrimary > "u" && (a.isPrimary = t.touches.length === 1 && t.type === "touchstart"), typeof a.width > "u" && (a.width = a.radiusX || 1), typeof a.height > "u" && (a.height = a.radiusY || 1), typeof a.tiltX > "u" && (a.tiltX = 0), typeof a.tiltY > "u" && (a.tiltY = 0), typeof a.pointerType > "u" && (a.pointerType = "touch"), typeof a.pointerId > "u" && (a.pointerId = a.identifier || 0), typeof a.pressure > "u" && (a.pressure = a.force || 0.5), typeof a.twist > "u" && (a.twist = 0), typeof a.tangentialPressure > "u" && (a.tangentialPressure = 0), typeof a.layerX > "u" && (a.layerX = a.offsetX = a.clientX), typeof a.layerY > "u" && (a.layerY = a.offsetY = a.clientY), a.type = t.type, e.push(a);
       }
-    else if (Ii && t instanceof globalThis.WheelEvent)
+    else if (Mi && t instanceof globalThis.WheelEvent)
       e.push(t);
     else if (Kt && t instanceof globalThis.PointerEvent)
       e.push(t);
@@ -2959,13 +2959,13 @@ const Oa = {
       r.source
     ), t.width = o, t.height = l;
   }
-}, Ia = {
+}, Ma = {
   buffer: Oa,
   image: Da
 };
-class Ma extends q {
+class Ia extends q {
   uploaders = {
-    ...Ia
+    ...Ma
   };
   textures = /* @__PURE__ */ new Map();
   glTextures = /* @__PURE__ */ new Map();
@@ -3355,7 +3355,7 @@ class Fa extends q {
 class za extends Pr {
   contextLost = !1;
   _systems = [
-    new Ma(),
+    new Ia(),
     new ea(),
     new pa(),
     new Ua(),
@@ -3529,7 +3529,7 @@ var $a = Object.defineProperty, Ge = (r, t, e, s) => {
     (o = r[a]) && (i = o(t, e, i) || i);
   return i && $a(t, e, i), i;
 };
-class It extends lt {
+class Mt extends lt {
   constructor(t = {}) {
     super(), this.setProperties(t);
   }
@@ -3539,16 +3539,16 @@ class It extends lt {
 }
 Ge([
   h({ fallback: "triangle-list" })
-], It.prototype, "topology");
+], Mt.prototype, "topology");
 Ge([
   h({ default: () => ({}) })
-], It.prototype, "attributes");
+], Mt.prototype, "attributes");
 Ge([
   h({ default: () => new Xt() })
-], It.prototype, "indexBuffer");
+], Mt.prototype, "indexBuffer");
 Ge([
   h({ fallback: 1 })
-], It.prototype, "instanceCount");
+], Mt.prototype, "instanceCount");
 var Ha = Object.defineProperty, gs = (r, t, e, s) => {
   for (var i = void 0, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (i = o(t, e, i) || i);
@@ -3565,7 +3565,7 @@ gs([
 gs([
   h({ default: () => new Float32Array() })
 ], gt.prototype, "data");
-var Xa = Object.defineProperty, Mt = (r, t, e, s) => {
+var Xa = Object.defineProperty, It = (r, t, e, s) => {
   for (var i = void 0, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (i = o(t, e, i) || i);
   return i && Xa(t, e, i), i;
@@ -3575,28 +3575,28 @@ class H extends lt {
     super(), this.setProperties(t);
   }
 }
-Mt([
+It([
   h({ default: () => new gt() })
 ], H.prototype, "buffer");
-Mt([
+It([
   h({ fallback: "float32" })
 ], H.prototype, "format");
-Mt([
+It([
   h()
 ], H.prototype, "instance");
-Mt([
+It([
   h()
 ], H.prototype, "stride");
-Mt([
+It([
   h()
 ], H.prototype, "offset");
-Mt([
+It([
   h()
 ], H.prototype, "start");
-Mt([
+It([
   h()
 ], H.prototype, "divisor");
-class nh extends It {
+class nh extends Mt {
   constructor() {
     super({
       topology: "triangle-strip",
@@ -3725,7 +3725,7 @@ void main(void) { gl_FragColor = transition(vUv); }` : ""}`
       });
   }
 }
-class Ie extends E {
+class Me extends E {
   static _instance;
   static get instance() {
     return this._instance ??= new this();
@@ -3758,12 +3758,12 @@ void main(void) {
     });
   }
 }
-class P extends It {
+class P extends Mt {
   static _instance;
   static get instance() {
     return this._instance ??= new this();
   }
-  static draw(t, e = Ie.instance, s) {
+  static draw(t, e = Me.instance, s) {
     this.instance.draw(t, e, s);
   }
   constructor() {
@@ -3788,7 +3788,7 @@ class P extends It {
     });
   }
 }
-class lh extends It {
+class lh extends Mt {
   positionBuffer;
   uvBuffer;
   constructor(t) {
@@ -4402,11 +4402,11 @@ function co(r) {
   let t = Kr[r] ?? 0;
   return t++, Kr[r] = t, t;
 }
-let M = class extends xt {
+let I = class extends xt {
   static parse(r, t = "Node") {
     if (Array.isArray(r))
       return r.map((n) => this.parse(n));
-    const { is: e, meta: s = {}, children: i, ...a } = r, o = br.get(e ?? s.inCanvasIs ?? t) ?? M, l = new o({ ...a, meta: s });
+    const { is: e, meta: s = {}, children: i, ...a } = r, o = br.get(e ?? s.inCanvasIs ?? t) ?? I, l = new o({ ...a, meta: s });
     return i?.forEach((n) => l.appendChild(this.parse(n))), l;
   }
   _mask;
@@ -4671,7 +4671,7 @@ let M = class extends xt {
   append(...r) {
     let t;
     Array.isArray(r[0]) ? t = r[0] : t = r, t.forEach((e) => {
-      e instanceof M ? this.appendChild(e) : this.appendChild(M.parse(e));
+      e instanceof I ? this.appendChild(e) : this.appendChild(I.parse(e));
     });
   }
   before(...r) {
@@ -4801,37 +4801,37 @@ let M = class extends xt {
 };
 ht([
   h({ default: () => vr() })
-], M.prototype, "id", 2);
+], I.prototype, "id", 2);
 ht([
   h({ default: () => vr() })
-], M.prototype, "name", 2);
+], I.prototype, "name", 2);
 ht([
   h({ fallback: "inherit" })
-], M.prototype, "processMode", 2);
+], I.prototype, "processMode", 2);
 ht([
   h({ fallback: "default" })
-], M.prototype, "processSortMode", 2);
+], I.prototype, "processSortMode", 2);
 ht([
   h({ fallback: "inherit" })
-], M.prototype, "renderMode", 2);
+], I.prototype, "renderMode", 2);
 ht([
   h({ fallback: "inherit" })
-], M.prototype, "inputMode", 2);
+], I.prototype, "inputMode", 2);
 ht([
   h({ fallback: "default" })
-], M.prototype, "internalMode", 2);
+], I.prototype, "internalMode", 2);
 ht([
   h({ internal: !0, default: !0 })
-], M.prototype, "needsRender", 2);
-M = ht([
+], I.prototype, "needsRender", 2);
+I = ht([
   b("Node")
-], M);
+], I);
 var uo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, de = (r, t, e, s) => {
   for (var i = s > 1 ? void 0 : s ? fo(t, e) : t, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (i = (s ? o(t, e, i) : o(i)) || i);
   return s && i && uo(t, e, i), i;
 };
-let et = class extends M {
+let et = class extends I {
   insideTimeRange = !1;
   /** Timeline */
   get _timeline() {
@@ -5094,7 +5094,7 @@ var mo = Object.defineProperty, go = Object.getOwnPropertyDescriptor, kt = (r, t
     (o = r[a]) && (i = (s ? o(t, e, i) : o(i)) || i);
   return s && i && mo(t, e, i), i;
 };
-let X = class extends M {
+let X = class extends I {
   canvasTransform = new $();
   renderTargetIndex = 0;
   renderTargets = [
@@ -5147,7 +5147,7 @@ let X = class extends M {
     return !1;
   }
   activateWithCopy(r, t) {
-    this.resize(t.width, t.height), this.activate(r) && (r.clear(), t.texture.activate(r, 0), P.draw(r, Ie.instance, {
+    this.resize(t.width, t.height), this.activate(r) && (r.clear(), t.texture.activate(r, 0), P.draw(r, Me.instance, {
       sampler: 0
     }));
   }
@@ -5433,7 +5433,7 @@ var xo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, pe = (r, t
     (o = r[a]) && (i = (s ? o(t, e, i) : o(i)) || i);
   return s && i && xo(t, e, i), i;
 };
-let vt = class extends M {
+let vt = class extends I {
   currentTime = 0;
   static from(r, t = !1) {
     const [e, s] = r ? Array.isArray(r) ? r : [0, r] : [];
@@ -5670,7 +5670,7 @@ var Oo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, Rr = (r, t
     (o = r[a]) && (i = (s ? o(t, e, i) : o(i)) || i);
   return s && i && Oo(t, e, i), i;
 };
-let Me = class extends ae {
+let Ie = class extends ae {
   canvasTransform = new $();
   _screenOffset = { x: 0, y: 0 };
   _zoom = new R(1, 1, () => this._updateTransform());
@@ -5722,6 +5722,34 @@ let Me = class extends ae {
       mt(t, this._minZoom.y, this._maxZoom.y)
     ), this;
   }
+  setZoomAtOrigin(r, t, e) {
+    let s;
+    if (e === "screenCenter") {
+      const o = this._tree?.root;
+      o ? s = { x: o.width / 2, y: o.height / 2 } : s = { x: 0, y: 0 };
+    } else
+      s = e;
+    const i = this.toGlobal(s);
+    this.setZoom(r, t);
+    const a = this.toScreen(i);
+    this.position.add({
+      x: a.x - s.x,
+      y: a.y - s.y
+    });
+  }
+  _zoomStep(r) {
+    return r < 0.15 ? 0.05 : r < 0.5 ? 0.1 : r < 3 ? 0.25 : 1;
+  }
+  zoomIn() {
+    const r = this._zoomStep(this._zoom.x);
+    let t = this._zoom.x + r;
+    t = Math.floor(t / r) * r, this.setZoomAtOrigin(t, t, "screenCenter");
+  }
+  zoomOut() {
+    const r = this._zoomStep(this._zoom.x);
+    let t = this._zoom.x - r;
+    t = Math.ceil(t / r) * r, this.setZoomAtOrigin(t, t, "screenCenter");
+  }
   _input(r, t) {
     if (super._input(r, t), t === "keydown") {
       const e = r;
@@ -5745,22 +5773,17 @@ let Me = class extends ae {
   }
   _onWheel(r) {
     if (r.preventDefault(), r.ctrlKey || r.metaKey) {
-      const t = { x: r.screenX, y: r.screenY }, e = this.toGlobal(t), s = r.ctrlKey && Ui ? 10 : 1, i = -r.deltaY * (r.deltaMode === 1 ? 0.05 : r.deltaMode ? 1 : 2e-3) * s;
-      this.zoomWithWheel(i);
-      const a = this.toScreen(e);
-      this.position.add({
-        x: a.x - t.x,
-        y: a.y - t.y
-      });
+      const t = this._getZoomByWheel(r, this._zoom.x);
+      this.setZoomAtOrigin(t, t, { x: r.screenX, y: r.screenY });
     } else
       this.position.add({
         x: Math.round(r.deltaX),
         y: Math.round(r.deltaY)
       });
   }
-  zoomWithWheel(r) {
-    const e = Math.log(this._zoom.x) + r, s = Math.exp(e);
-    this.setZoom(Math.round(s * 1e4) / 1e4);
+  _getZoomByWheel(r, t) {
+    const e = r.ctrlKey && Ui ? 10 : 1, s = -r.deltaY * (r.deltaMode === 1 ? 0.05 : r.deltaMode ? 1 : 2e-3) * e, a = Math.log(t) + s, o = Math.exp(a);
+    return Math.round(o * 1e4) / 1e4;
   }
   _updateTransform() {
     super._updateTransform(), this._updateCanvasTransform();
@@ -5791,16 +5814,16 @@ let Me = class extends ae {
 };
 Rr([
   h({ internal: !0, fallback: !1 })
-], Me.prototype, "spaceKey", 2);
+], Ie.prototype, "spaceKey", 2);
 Rr([
   h({ internal: !0, fallback: !1 })
-], Me.prototype, "grabbing", 2);
-Me = Rr([
+], Ie.prototype, "grabbing", 2);
+Ie = Rr([
   b("Camera2D", {
     processMode: "disabled",
     renderMode: "disabled"
   })
-], Me);
+], Ie);
 const Zr = {
   brightness: 1,
   contrast: 1,
@@ -5850,7 +5873,7 @@ function hh(r) {
   }
   return t;
 }
-function Io(r, t, e, s = new $()) {
+function Mo(r, t, e, s = new $()) {
   return r = !r || r === "none" ? "" : r, Fe(r, { width: t, height: e }).reverse().forEach(({ name: i, args: a }) => {
     const o = a.map((l) => l.normalizedIntValue);
     switch (i) {
@@ -5920,7 +5943,7 @@ function Io(r, t, e, s = new $()) {
     }
   }), s;
 }
-function Mo(r) {
+function Io(r) {
   const [t, e = t] = r.split(" ");
   return [t, e].map((s) => {
     switch (s = s.trim(), s) {
@@ -6738,9 +6761,9 @@ let rt = class extends T {
         uInputSize: [t.width, t.height, 1 / t.width, 1 / t.height]
       });
     }), this.blurEffect.strength = this.blur, this.blurEffect.apply(r, this.viewport3), t.redraw(r, () => {
-      this.viewport3.texture.activate(r, 1), P.draw(r, Ie.instance, {
+      this.viewport3.texture.activate(r, 1), P.draw(r, Me.instance, {
         sampler: 1
-      }), this.shadowOnly || P.draw(r, Ie.instance, {
+      }), this.shadowOnly || P.draw(r, Me.instance, {
         sampler: 0
       }), r.texture.unbind(1);
     });
@@ -6790,10 +6813,10 @@ Wt([
 rt = Wt([
   b("DropShadowEffect")
 ], rt);
-var Is = Object.defineProperty, an = Object.getOwnPropertyDescriptor, on = (r, t, e) => t in r ? Is(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, Ms = (r, t, e, s) => {
+var Ms = Object.defineProperty, an = Object.getOwnPropertyDescriptor, on = (r, t, e) => t in r ? Ms(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, Is = (r, t, e, s) => {
   for (var i = s > 1 ? void 0 : s ? an(t, e) : t, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (i = (s ? o(t, e, i) : o(i)) || i);
-  return s && i && Is(t, e, i), i;
+  return s && i && Ms(t, e, i), i;
 }, nn = (r, t, e) => on(r, t + "", e);
 let oe = class extends T {
   constructor(r, t = []) {
@@ -6837,10 +6860,10 @@ void main(void) {
 }`
   }
 }));
-Ms([
+Is([
   h({ fallback: 5 })
 ], oe.prototype, "strength", 2);
-oe = Ms([
+oe = Is([
   b("EmbossEffect")
 ], oe);
 var ks = Object.defineProperty, ln = Object.getOwnPropertyDescriptor, hn = (r, t, e) => t in r ? ks(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, st = (r, t, e, s) => {
@@ -7734,7 +7757,7 @@ class F extends xt {
   }
   setProperties(t) {
     return this._setProperties(
-      I(t) ? void 0 : rs(t)
+      M(t) ? void 0 : rs(t)
     );
   }
   _updateProperty(t, e, s) {
@@ -7763,7 +7786,7 @@ class F extends xt {
         Math.floor(this._parent.size.width),
         Math.floor(this._parent.size.height)
       );
-    else if (I(this.image))
+    else if (M(this.image))
       this.animatedTexture = void 0, this.texture = void 0;
     else if (this._parent.tree?.log(`load image ${this.image}`), this.image !== "viewport") {
       let t = this.image.split("?")[0].endsWith(".gif");
@@ -7857,22 +7880,22 @@ Z([
 Z([
   h()
 ], F.prototype, "opacity");
-var In = Object.defineProperty, Mn = (r, t, e, s) => {
+var Mn = Object.defineProperty, In = (r, t, e, s) => {
   for (var i = void 0, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (i = o(t, e, i) || i);
-  return i && In(t, e, i), i;
+  return i && Mn(t, e, i), i;
 };
 class $s extends F {
   setProperties(t) {
     return super._setProperties(
-      I(t) ? void 0 : oi(t)
+      M(t) ? void 0 : oi(t)
     );
   }
   _updateProperty(t, e, s) {
     super._updateProperty(t, e, s), t === "fillWithShape" && this._parent.requestDraw();
   }
 }
-Mn([
+In([
   h()
 ], $s.prototype, "fillWithShape");
 var kn = Object.defineProperty, Nn = (r, t, e, s) => {
@@ -7883,7 +7906,7 @@ var kn = Object.defineProperty, Nn = (r, t, e, s) => {
 class Hs extends F {
   setProperties(t) {
     return super._setProperties(
-      I(t) ? void 0 : ni(t)
+      M(t) ? void 0 : ni(t)
     );
   }
   _updateProperty(t, e, s) {
@@ -7901,7 +7924,7 @@ var Un = Object.defineProperty, me = (r, t, e, s) => {
 class qt extends F {
   setProperties(t) {
     return super._setProperties(
-      I(t) ? void 0 : li(t)
+      M(t) ? void 0 : li(t)
     );
   }
   _updateProperty(t, e, s) {
@@ -7951,7 +7974,7 @@ class jt extends xt {
   }
   setProperties(t) {
     return super.setProperties(
-      I(t) ? void 0 : hi(t)
+      M(t) ? void 0 : hi(t)
     );
   }
   _updateProperty(t, e, s) {
@@ -7997,7 +8020,7 @@ class Yt extends xt {
   _path2DSet = new yi();
   setProperties(t) {
     return super.setProperties(
-      I(t) ? void 0 : ci(t)
+      M(t) ? void 0 : ci(t)
     );
   }
   _updateProperty(t, e, s) {
@@ -8100,7 +8123,7 @@ class it extends xt {
   _textureMap = /* @__PURE__ */ new Map();
   setProperties(t) {
     return super.setProperties(
-      I(t) ? void 0 : di(t)
+      M(t) ? void 0 : di(t)
     );
   }
   _updateProperty(t, e, s) {
@@ -8169,7 +8192,7 @@ class it extends xt {
       t.linearGradient ?? t.radialGradient,
       e.width,
       e.height
-    ) : I(t.image) ? void 0 : (this._parent.tree?.log(`load image ${t.image}`), await G.texture.load(t.image));
+    ) : M(t.image) ? void 0 : (this._parent.tree?.log(`load image ${t.image}`), await G.texture.load(t.image));
   }
   setContent(t) {
     this.content = fi(t);
@@ -8196,7 +8219,7 @@ class it extends xt {
         const a = i.getMeta();
         if (a instanceof Ei) {
           const o = a.parent.index, l = a.parent.parent.index;
-          if (i.style.fill && !I(i.style.fill))
+          if (i.style.fill && !M(i.style.fill))
             if (typeof i.style.fill == "object") {
               const n = i.style.fill, c = this._textureMap.get(`${l}.${o}.fill`) ?? this._textureMap.get(`${l}.fill`) ?? this._textureMap.get("fill");
               n.enabled !== !1 && (c || n.color) && (t.addPath(i), t.style = { ...i.style }, t.fillStyle = c?.texture ?? n.color, t.fill({
@@ -8215,7 +8238,7 @@ class it extends xt {
               t.addPath(i), t.style = { ...i.style }, t.fill({
                 transformVertex: e
               });
-          if (i.style.stroke && !I(i.style.stroke))
+          if (i.style.stroke && !M(i.style.stroke))
             if (typeof i.style.stroke == "object") {
               const n = i.style.stroke, c = this._textureMap.get(`${l}.${o}.outline`) ?? this._textureMap.get(`${l}.outline`) ?? this._textureMap.get("outline");
               n.enabled !== !1 && (c || n.color) && (n.width === void 0 || n.width) && (t.addPath(i), t.style = { ...i.style }, t.lineWidth = n.width || 1, t.strokeStyle = c?.texture ?? n.color, t.lineCap = n.lineCap, t.lineJoin = n.lineJoin, t.stroke({
@@ -8235,9 +8258,9 @@ class it extends xt {
                 transformVertex: e
               });
         } else
-          t.addPath(i), t.style = { ...i.style }, i.style.fill && !I(i.style.fill) && t.fill({
+          t.addPath(i), t.style = { ...i.style }, i.style.fill && !M(i.style.fill) && t.fill({
             transformVertex: this._createTransformVertex()
-          }), i.style.stroke && !I(i.style.stroke) && t.stroke({
+          }), i.style.stroke && !M(i.style.stroke) && t.stroke({
             transformVertex: this._createTransformVertex()
           });
       });
@@ -8397,7 +8420,7 @@ const A = {
   "content-box": 1
   // BoxSizing.ContentBox
 };
-class Ir {
+class Mr {
   constructor(t) {
     this._parent = t, this._addChild = this._addChild.bind(this), this._removeChild = this._removeChild.bind(this), this._parent.on("addChild", this._addChild), this._parent.on("removeChild", this._removeChild);
   }
@@ -8406,7 +8429,7 @@ class Ir {
     const { loadYoga: t } = await import("yoga-layout/load");
     this._yoga = await t();
   }
-  node = Ir._yoga?.Node.create();
+  node = Mr._yoga?.Node.create();
   _addChild(t, e) {
     if (t instanceof yt && t.flexbox.node && this.node) {
       this.node.insertChild(t.flexbox.node, e);
@@ -8594,7 +8617,7 @@ var Gn = Object.getOwnPropertyDescriptor, Vn = (r, t, e, s) => {
 };
 const $n = new Set(Object.keys(_i())), Hn = new Set(Object.keys(pi()));
 let yt = class extends ae {
-  flexbox = new Ir(this);
+  flexbox = new Mr(this);
   aabb = new j();
   globalAabb = new j();
   _parentGlobalDisplay;
@@ -8742,7 +8765,7 @@ let yt = class extends ae {
         this.skew.y = t;
         break;
       case "transform":
-        this.extraTransform.identity(), this.extraTransform.translate(-this.pivot.x, -this.pivot.y), Io(
+        this.extraTransform.identity(), this.extraTransform.translate(-this.pivot.x, -this.pivot.y), Mo(
           t ?? "",
           this.size.width,
           this.size.height,
@@ -8750,7 +8773,7 @@ let yt = class extends ae {
         ), this.extraTransform.translate(this.pivot.x, this.pivot.y), this.updateGlobalTransform();
         break;
       case "transformOrigin": {
-        const s = Mo(t ?? "");
+        const s = Io(t ?? "");
         this.pivot.set(
           s[0] * this.size.width,
           s[1] * this.size.height
@@ -8791,7 +8814,7 @@ let yt = class extends ae {
         this._overflowHidden = t === "hidden", this._updateMask();
         break;
       case "pointerEvents":
-        this._allowPointerEvents = !I(t);
+        this._allowPointerEvents = !M(t);
         break;
       case "borderRadius":
         this.requestDraw();
@@ -8824,13 +8847,13 @@ let yt = class extends ae {
     this._parentGlobalDisplay !== t?.globalDisplay && this._updateGlobalDisplay(), this.flexbox.update(), super._process(r);
   }
   _updateStyleFilter(r) {
-    I(r) ? (this._colorFilterEffect?.remove(), this._colorFilterEffect = void 0, this.requestRender()) : (this._colorFilterEffect || (this._colorFilterEffect = new zt({
+    M(r) ? (this._colorFilterEffect?.remove(), this._colorFilterEffect = void 0, this.requestRender()) : (this._colorFilterEffect || (this._colorFilterEffect = new zt({
       name: "styleFilter",
       internalMode: "front"
     }), this.append(this._colorFilterEffect)), this._colorFilterEffect.filter = r);
   }
   _updateStyleMaskImage(r) {
-    I(r) ? (this._maskEffect?.remove(), this._maskEffect = void 0, this.requestRender()) : (this._maskEffect || (this._maskEffect = new Ht({
+    M(r) ? (this._maskEffect?.remove(), this._maskEffect = void 0, this.requestRender()) : (this._maskEffect || (this._maskEffect = new Ht({
       name: "styleMaskImage",
       internalMode: "back"
     }), this.append(this._maskEffect)), this._maskEffect.image = r);
@@ -9311,10 +9334,10 @@ he = Xe([
     duration: 2e3
   })
 ], he);
-class Mr extends Ct {
+class Ir extends Ct {
   static _instance;
   static get instance() {
-    return this._instance || (this._instance = new Mr()), this._instance;
+    return this._instance || (this._instance = new Ir()), this._instance;
   }
   playbackRate = 1;
   muted = !1;
@@ -9498,7 +9521,7 @@ class al {
     return !!this.source && this.source.readyState === 4;
   }
   get context() {
-    return Mr.instance;
+    return Ir.instance;
   }
   async load() {
     return new Promise((t) => {
@@ -9609,7 +9632,7 @@ class Rt extends Ys {
       2,
       ns ? Math.max(8e3, Math.min(96e3, t.sampleRate)) : 44100
     ), s = t.createDynamicsCompressor(), i = t.createAnalyser();
-    i.connect(s), s.connect(t.destination), super(i, s), this._context = t, this._offlineContext = e, this._compressor = s, this._analyser = i, this._locked = t.state === "suspended" && (pt || Mi), xr && (this._locked && (this._unlock(), document.addEventListener("mousedown", this._unlock, !0), document.addEventListener("touchstart", this._unlock, !0), document.addEventListener("touchend", this._unlock, !0)), globalThis.addEventListener("focus", this._onFocus), globalThis.addEventListener("blur", this._onBlur));
+    i.connect(s), s.connect(t.destination), super(i, s), this._context = t, this._offlineContext = e, this._compressor = s, this._analyser = i, this._locked = t.state === "suspended" && (pt || Ii), xr && (this._locked && (this._unlock(), document.addEventListener("mousedown", this._unlock, !0), document.addEventListener("touchstart", this._unlock, !0), document.addEventListener("touchend", this._unlock, !0)), globalThis.addEventListener("focus", this._onFocus), globalThis.addEventListener("blur", this._onBlur));
   }
   _onFocus() {
     if (!this.autoPause)
@@ -10289,8 +10312,8 @@ void main(void) {
 ue = Ol([
   b("TiltShiftTransition")
 ], ue);
-var Il = Object.defineProperty, Ml = Object.getOwnPropertyDescriptor, kl = (r, t, e) => t in r ? Il(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, Nl = (r, t, e, s) => {
-  for (var i = s > 1 ? void 0 : s ? Ml(t, e) : t, a = r.length - 1, o; a >= 0; a--)
+var Ml = Object.defineProperty, Il = Object.getOwnPropertyDescriptor, kl = (r, t, e) => t in r ? Ml(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, Nl = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? Il(t, e) : t, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (i = o(i) || i);
   return i;
 }, Ul = (r, t, e) => kl(r, t + "", e);
@@ -10813,7 +10836,7 @@ export {
   uh as AudioSpectrum,
   ce as AudioWaveform,
   _t as BufferUsage,
-  Me as Camera2D,
+  Ie as Camera2D,
   ao as CanvasContext,
   Lt as CanvasItem,
   vs as CanvasTexture,
@@ -10843,10 +10866,10 @@ export {
   it as Element2DText,
   oe as EmbossEffect,
   kr as Engine,
-  Ir as Flexbox,
+  Mr as Flexbox,
   Ga as FontLoader,
   nt as GaussianBlurEffect,
-  It as Geometry,
+  Mt as Geometry,
   Bl as GifLoader,
   ga as GlBatch2DSystem,
   ie as GlBlendMode,
@@ -10867,7 +10890,7 @@ export {
   K as GodrayEffect,
   Ve as GradientTexture,
   al as HTMLAudio,
-  Mr as HTMLAudioContext,
+  Ir as HTMLAudioContext,
   Ne as HTMLSound,
   xr as IN_BROWSER,
   Ui as IN_MAC_OS,
@@ -10887,7 +10910,7 @@ export {
   E as Material,
   no as Meta,
   cs as MouseInputEvent,
-  M as Node,
+  I as Node,
   ae as Node2D,
   Oe as Obb2D,
   L as OutlineEffect,
@@ -10905,7 +10928,7 @@ export {
   Pr as Renderer,
   lt as Resource,
   as as SUPPORTS_AUDIO_CONTEXT,
-  Mi as SUPPORTS_CLICK_EVENTS,
+  Ii as SUPPORTS_CLICK_EVENTS,
   ih as SUPPORTS_CREATE_IMAGE_BITMAP,
   Oi as SUPPORTS_IMAGE_BITMAP,
   sh as SUPPORTS_MOUSE_EVENTS,
@@ -10917,7 +10940,7 @@ export {
   os as SUPPORTS_WEBKIT_AUDIO_CONTEXT,
   ki as SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT,
   Ni as SUPPORTS_WEB_AUDIO,
-  Ii as SUPPORTS_WHEEL_EVENTS,
+  Mi as SUPPORTS_WHEEL_EVENTS,
   Pt as SceneTree,
   zl as TextLoader,
   x as Texture2D,
@@ -10932,7 +10955,7 @@ export {
   Ft as Transition,
   Le as TwistTransition,
   lh as UvGeometry,
-  Ie as UvMaterial,
+  Me as UvMaterial,
   R as Vector2,
   H as VertexAttribute,
   gt as VertexBuffer,
@@ -10992,8 +11015,8 @@ export {
   hh as parseCssFilter,
   Fe as parseCssFunctions,
   Pe as parseCssProperty,
-  Io as parseCssTransform,
-  Mo as parseCssTransformOrigin,
+  Mo as parseCssTransform,
+  Io as parseCssTransformOrigin,
   lr as positionTypeMap,
   dh as render,
   Ot as stencilModeMap,

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

@@ -39,9 +39,13 @@ export declare class Camera2D extends Node2D {
     setProperties(properties?: Record<string, any>): this;
     addZoom(x: number, y?: number): this;
     setZoom(x: number, y?: number): this;
+    setZoomAtOrigin(x: number, y: number, origin: Vector2Like | 'screenCenter'): void;
+    protected _zoomStep(val: number): number;
+    zoomIn(): void;
+    zoomOut(): void;
     protected _input(event: InputEvent, key: InputEventKey): void;
     protected _onWheel(e: WheelInputEvent): void;
-    zoomWithWheel(delta: number): void;
+    protected _getZoomByWheel(e: WheelInputEvent, val: number): number;
     _updateTransform(): void;
     protected _updateCanvasTransform(): void;
     syncCanvasTransform(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.15.7",
+  "version": "0.15.8",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",