modern-canvas 0.14.32 → 0.14.34

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineProperty as rs, Observable as ue, Reactivable as ss, parseColor as li, property as h, isGradient as ci, isColorFillObject as Vr, clearUndef as is, idGenerator as yr, normalizeFill as as, isNone as N, normalizeBackground as hi, normalizeForeground as ui, normalizeOutline as di, normalizeShadow as fi, normalizeShape as pi, getDefaultStyle as _i, normalizeText as mi, normalizeTextContent as gi, getDefaultTextStyle as vi, getDefaultLayoutStyle as bi, RawWeakMap as yi } from "modern-idoc";
+import { defineProperty as rs, Observable as ue, Reactivable as ss, parseColor as li, property as h, isGradient as ci, isColorFillObject as Vr, clearUndef as is, idGenerator as yr, normalizeFill as as, isNone as M, normalizeBackground as hi, normalizeForeground as ui, normalizeOutline as di, normalizeShadow as fi, normalizeShape as pi, getDefaultStyle as _i, normalizeText as mi, normalizeTextContent as gi, getDefaultTextStyle as vi, getDefaultLayoutStyle as bi, RawWeakMap as yi } from "modern-idoc";
 import { fonts as xi } from "modern-font";
 import { extend as wi } from "colord";
 import Pi from "colord/plugins/names";
@@ -1424,8 +1424,8 @@ class ra extends _s {
     ]);
   }
 }
-class D extends _s {
-  static _t2d = /* @__PURE__ */ new D();
+class N extends _s {
+  static _t2d = /* @__PURE__ */ new N();
   premultiply(e) {
     return e.multiply(this, this);
   }
@@ -1436,7 +1436,7 @@ class D extends _s {
     return this.skew(0, e);
   }
   skew(e, t) {
-    return this.premultiply(D._t2d.makeSkew(e, t));
+    return this.premultiply(N._t2d.makeSkew(e, t));
   }
   makeSkew(e, t) {
     const s = Math.tan(e), i = Math.tan(t);
@@ -1465,7 +1465,7 @@ class D extends _s {
     return this.translate(e, t, s);
   }
   translate(e, t, s = 0) {
-    return this.premultiply(D._t2d.makeTranslation(e, t, s));
+    return this.premultiply(N._t2d.makeTranslation(e, t, s));
   }
   makeTranslation(e, t, s = 0) {
     return this.set([
@@ -1490,7 +1490,7 @@ class D extends _s {
     return this.scale(e, t, s);
   }
   scale(e, t, s = 1) {
-    return this.premultiply(D._t2d.makeScale(e, t, s));
+    return this.premultiply(N._t2d.makeScale(e, t, s));
   }
   makeScale(e, t, s = 1) {
     return this.set([
@@ -1515,7 +1515,7 @@ class D extends _s {
     return this.rotate(e);
   }
   rotate(e) {
-    return this.premultiply(D._t2d.makeRotation(e));
+    return this.premultiply(N._t2d.makeRotation(e));
   }
   rotate3d(e, t, s, i) {
     const [a, o, n] = this._rotate3d(e, t, s, i);
@@ -2489,7 +2489,7 @@ function Kr(r) {
   let t = (r > 255 ? 1 : 0) << 3;
   return r >>>= t, e |= t, t = (r > 15 ? 1 : 0) << 2, r >>>= t, e |= t, t = (r > 3 ? 1 : 0) << 1, r >>>= t, e |= t, e | r >> 1;
 }
-var I = /* @__PURE__ */ ((r) => (r[r.disabled = 0] = "disabled", r[r.renderingMaskAdd = 1] = "renderingMaskAdd", r[r.maskActive = 2] = "maskActive", r[r.inverseMaskActive = 3] = "inverseMaskActive", r[r.renderingMaskRemove = 4] = "renderingMaskRemove", r[r.none = 5] = "none", r))(I || {}), at = /* @__PURE__ */ ((r) => (r[r.none = 0] = "none", r[r.color = 16384] = "color", r[r.stencil = 1024] = "stencil", r[r.depth = 256] = "depth", r[r.colorDepth = 16640] = "colorDepth", r[r.colorStencil = 17408] = "colorStencil", r[r.depthStencil = 1280] = "depthStencil", r[r.all = 17664] = "all", r))(at || {});
+var D = /* @__PURE__ */ ((r) => (r[r.disabled = 0] = "disabled", r[r.renderingMaskAdd = 1] = "renderingMaskAdd", r[r.maskActive = 2] = "maskActive", r[r.inverseMaskActive = 3] = "inverseMaskActive", r[r.renderingMaskRemove = 4] = "renderingMaskRemove", r[r.none = 5] = "none", r))(D || {}), at = /* @__PURE__ */ ((r) => (r[r.none = 0] = "none", r[r.color = 16384] = "color", r[r.stencil = 1024] = "stencil", r[r.depth = 256] = "depth", r[r.colorDepth = 16640] = "colorDepth", r[r.colorStencil = 17408] = "colorStencil", r[r.depthStencil = 1280] = "depthStencil", r[r.all = 17664] = "all", r))(at || {});
 class Ea extends W {
   install(e) {
     super.install(e), e.mask = this;
@@ -2507,7 +2507,7 @@ class Ea extends W {
     this.stack.push(s);
     const i = this._renderer.renderTarget.current?.instanceId ?? -1;
     let a = this._maskStackHash[i] ?? 0;
-    "x" in t ? this._renderer.scissor.push(t) : "render" in t && (this._renderer.flush(), this._renderer.renderTarget.ensureDepthStencil(), this._renderer.stencil.bind(I.renderingMaskAdd, a), this._renderer.colorMask.bind(0), a++, t.render(this._renderer), this._renderer.flush(), this._renderer.stencil.bind(I.maskActive, a), this._renderer.colorMask.bind(15)), this._maskStackHash[i] = a;
+    "x" in t ? this._renderer.scissor.push(t) : "render" in t && (this._renderer.flush(), this._renderer.renderTarget.ensureDepthStencil(), this._renderer.stencil.bind(D.renderingMaskAdd, a), this._renderer.colorMask.bind(0), a++, t.render(this._renderer), this._renderer.flush(), this._renderer.stencil.bind(D.maskActive, a), this._renderer.colorMask.bind(15)), this._maskStackHash[i] = a;
   }
   pop(e) {
     const t = this.stack.pop();
@@ -2515,7 +2515,7 @@ class Ea extends W {
       return;
     const { mask: s } = t, i = this._renderer.renderTarget.current?.instanceId ?? -1;
     let a = this._maskStackHash[i] ?? 0;
-    "x" in s && this._renderer.scissor.pop(), "render" in s && (this._renderer.flush(), a !== 0 ? this._renderer.stencil.bind(I.renderingMaskRemove, a) : (this._renderer.clear(at.stencil), this._renderer.stencil.bind(I.disabled, a)), a--, s.render(this._renderer), this._renderer.flush(), this._renderer.stencil.bind(I.maskActive, a), this._renderer.colorMask.bind(15)), this._maskStackHash[i] = a;
+    "x" in s && this._renderer.scissor.pop(), "render" in s && (this._renderer.flush(), a !== 0 ? this._renderer.stencil.bind(D.renderingMaskRemove, a) : (this._renderer.clear(at.stencil), this._renderer.stencil.bind(D.disabled, a)), a--, s.render(this._renderer), this._renderer.flush(), this._renderer.stencil.bind(D.maskActive, a), this._renderer.colorMask.bind(15)), this._maskStackHash[i] = a;
   }
 }
 var _r = /* @__PURE__ */ ((r) => (r[r.RGBA = 6408] = "RGBA", r[r.RGB = 6407] = "RGB", r[r.RG = 33319] = "RG", r[r.RED = 6403] = "RED", r[r.RGBA_INTEGER = 36249] = "RGBA_INTEGER", r[r.RGB_INTEGER = 36248] = "RGB_INTEGER", r[r.RG_INTEGER = 33320] = "RG_INTEGER", r[r.RED_INTEGER = 36244] = "RED_INTEGER", r[r.ALPHA = 6406] = "ALPHA", r[r.LUMINANCE = 6409] = "LUMINANCE", r[r.LUMINANCE_ALPHA = 6410] = "LUMINANCE_ALPHA", r[r.DEPTH_COMPONENT = 6402] = "DEPTH_COMPONENT", r[r.DEPTH_STENCIL = 34041] = "DEPTH_STENCIL", r))(_r || {}), bs = /* @__PURE__ */ ((r) => (r[r.TEXTURE_2D = 3553] = "TEXTURE_2D", r[r.TEXTURE_CUBE_MAP = 34067] = "TEXTURE_CUBE_MAP", r[r.TEXTURE_2D_ARRAY = 35866] = "TEXTURE_2D_ARRAY", r[r.TEXTURE_CUBE_MAP_POSITIVE_X = 34069] = "TEXTURE_CUBE_MAP_POSITIVE_X", r[r.TEXTURE_CUBE_MAP_NEGATIVE_X = 34070] = "TEXTURE_CUBE_MAP_NEGATIVE_X", r[r.TEXTURE_CUBE_MAP_POSITIVE_Y = 34071] = "TEXTURE_CUBE_MAP_POSITIVE_Y", r[r.TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072] = "TEXTURE_CUBE_MAP_NEGATIVE_Y", r[r.TEXTURE_CUBE_MAP_POSITIVE_Z = 34073] = "TEXTURE_CUBE_MAP_POSITIVE_Z", r[r.TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074] = "TEXTURE_CUBE_MAP_NEGATIVE_Z", r))(bs || {}), y = /* @__PURE__ */ ((r) => (r[r.UNSIGNED_BYTE = 5121] = "UNSIGNED_BYTE", r[r.UNSIGNED_SHORT = 5123] = "UNSIGNED_SHORT", r[r.UNSIGNED_SHORT_5_6_5 = 33635] = "UNSIGNED_SHORT_5_6_5", r[r.UNSIGNED_SHORT_4_4_4_4 = 32819] = "UNSIGNED_SHORT_4_4_4_4", r[r.UNSIGNED_SHORT_5_5_5_1 = 32820] = "UNSIGNED_SHORT_5_5_5_1", r[r.UNSIGNED_INT = 5125] = "UNSIGNED_INT", r[r.UNSIGNED_INT_10F_11F_11F_REV = 35899] = "UNSIGNED_INT_10F_11F_11F_REV", r[r.UNSIGNED_INT_2_10_10_10_REV = 33640] = "UNSIGNED_INT_2_10_10_10_REV", r[r.UNSIGNED_INT_24_8 = 34042] = "UNSIGNED_INT_24_8", r[r.UNSIGNED_INT_5_9_9_9_REV = 35902] = "UNSIGNED_INT_5_9_9_9_REV", r[r.BYTE = 5120] = "BYTE", r[r.SHORT = 5122] = "SHORT", r[r.INT = 5124] = "INT", r[r.FLOAT = 5126] = "FLOAT", r[r.FLOAT_32_UNSIGNED_INT_24_8_REV = 36269] = "FLOAT_32_UNSIGNED_INT_24_8_REV", r[r.HALF_FLOAT = 36193] = "HALF_FLOAT", r))(y || {});
@@ -3294,12 +3294,12 @@ class Ga extends W {
   }
 }
 const Ne = [];
-Ne[I.none] = {};
-Ne[I.disabled] = {
+Ne[D.none] = {};
+Ne[D.disabled] = {
   stencilWriteMask: 0,
   stencilReadMask: 0
 };
-Ne[I.renderingMaskAdd] = {
+Ne[D.renderingMaskAdd] = {
   stencilFront: {
     compare: "equal",
     passOp: "increment-clamp"
@@ -3309,7 +3309,7 @@ Ne[I.renderingMaskAdd] = {
     passOp: "increment-clamp"
   }
 };
-Ne[I.renderingMaskRemove] = {
+Ne[D.renderingMaskRemove] = {
   stencilFront: {
     compare: "equal",
     passOp: "decrement-clamp"
@@ -3319,7 +3319,7 @@ Ne[I.renderingMaskRemove] = {
     passOp: "decrement-clamp"
   }
 };
-Ne[I.maskActive] = {
+Ne[D.maskActive] = {
   stencilWriteMask: 0,
   stencilFront: {
     compare: "equal",
@@ -3330,7 +3330,7 @@ Ne[I.maskActive] = {
     passOp: "keep"
   }
 };
-Ne[I.inverseMaskActive] = {
+Ne[D.inverseMaskActive] = {
   stencilWriteMask: 0,
   stencilFront: {
     compare: "not-equal",
@@ -3347,12 +3347,12 @@ class Va extends W {
   }
   _cache = {
     enabled: !1,
-    stencilMode: I.none,
+    stencilMode: D.none,
     refCount: 0
   };
   current = {
     [-1]: {
-      stencilMode: I.disabled,
+      stencilMode: D.disabled,
       refCount: 0
     }
   };
@@ -3383,20 +3383,20 @@ class Va extends W {
     super._setup(), this._renderer.renderTarget.on("updateRenderTarget", this._updateRenderTarget);
   }
   reset() {
-    this._cache.enabled = !1, this._cache.stencilMode = I.none, this._cache.refCount = 0;
+    this._cache.enabled = !1, this._cache.stencilMode = D.none, this._cache.refCount = 0;
   }
   _updateRenderTarget = (e) => {
     if (e) {
       let t = this.current[e.instanceId];
       t || (t = this.current[e.instanceId] = {
-        stencilMode: I.disabled,
+        stencilMode: D.disabled,
         refCount: 0
       }), this.bind(t.stencilMode, t.refCount);
     }
   };
   bind(e, t) {
     const s = this.current[this._renderer.renderTarget.current?.instanceId ?? -1], i = this._gl, a = Ne[e], o = this._cache;
-    if (s.stencilMode = e, s.refCount = t, e === I.disabled) {
+    if (s.stencilMode = e, s.refCount = t, e === D.disabled) {
       this._cache.enabled && (this._cache.enabled = !1, i.disable(i.STENCIL_TEST));
       return;
     }
@@ -4657,7 +4657,7 @@ function go(r) {
   let e = Qr[r] ?? 0;
   return e++, Qr[r] = e, e;
 }
-let M = class extends Se {
+let I = class extends Se {
   _meta = new po(this);
   get meta() {
     return this._meta;
@@ -4917,7 +4917,7 @@ let M = class extends Se {
   append(...r) {
     let e;
     Array.isArray(r[0]) ? e = r[0] : e = r, e.forEach((t) => {
-      t instanceof M ? this.appendChild(t) : this.appendChild(M.parse(t));
+      t instanceof I ? this.appendChild(t) : this.appendChild(I.parse(t));
     });
   }
   before(...r) {
@@ -5040,46 +5040,46 @@ let M = class extends Se {
   static parse(r, e = "Node") {
     if (Array.isArray(r))
       return r.map((l) => this.parse(l));
-    const { is: t, meta: s = {}, children: i, ...a } = r, o = xr.get(t ?? s.inCanvasIs ?? e) ?? M, n = new o({ ...a, meta: s });
+    const { is: t, meta: s = {}, children: i, ...a } = r, o = xr.get(t ?? s.inCanvasIs ?? e) ?? I, n = new o({ ...a, meta: s });
     return i?.forEach((l) => n.appendChild(this.parse(l))), n;
   }
 };
 ae([
   h({ default: () => yr() })
-], M.prototype, "id", 2);
+], I.prototype, "id", 2);
 ae([
   h({ default: () => yr() })
-], M.prototype, "name", 2);
+], I.prototype, "name", 2);
 ae([
   h({ fallback: "inherit" })
-], M.prototype, "processMode", 2);
+], I.prototype, "processMode", 2);
 ae([
   h({ fallback: "default" })
-], M.prototype, "processSortMode", 2);
+], I.prototype, "processSortMode", 2);
 ae([
   h({ fallback: "inherit" })
-], M.prototype, "renderMode", 2);
+], I.prototype, "renderMode", 2);
 ae([
   h({ fallback: "inherit" })
-], M.prototype, "inputMode", 2);
+], I.prototype, "inputMode", 2);
 ae([
   h({ fallback: "default" })
-], M.prototype, "internalMode", 2);
+], I.prototype, "internalMode", 2);
 ae([
   h({ internal: !0 })
-], M.prototype, "mask", 2);
+], I.prototype, "mask", 2);
 ae([
   h({ internal: !0, default: !0 })
-], M.prototype, "needsRender", 2);
-M = ae([
+], I.prototype, "needsRender", 2);
+I = ae([
   b("Node")
-], M);
+], I);
 var vo = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, Ye = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? bo(e, t) : e, a = r.length - 1, o; a >= 0; a--)
     (o = r[a]) && (i = (s ? o(e, t, i) : o(i)) || i);
   return s && i && vo(e, t, i), i;
 };
-let q = class extends M {
+let q = class extends I {
   constructor(r, e = []) {
     super(), this.setProperties(r).append(e);
   }
@@ -5269,7 +5269,7 @@ let Ge = class extends q {
   _handleViewportTexture(r) {
     const e = this.tree?.getPreviousViewport();
     if (e && "getRect" in this) {
-      const { a: t, d: s, tx: i, ty: a } = e.canvasTransform.toObject(), { vertices: o } = r, n = new D().scale(1 / e.width * t, -1 / e.height * s).translate(
+      const { a: t, d: s, tx: i, ty: a } = e.canvasTransform.toObject(), { vertices: o } = r, n = new N().scale(1 / e.width * t, -1 / e.height * s).translate(
         - -i / e.width,
         1 + -a / e.height
       ), l = new Float32Array(o.length);
@@ -5311,8 +5311,8 @@ var wo = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, Le = (r, e
     (o = r[a]) && (i = (s ? o(e, t, i) : o(i)) || i);
   return s && i && wo(e, t, i), i;
 };
-let X = class extends M {
-  canvasTransform = new D();
+let X = class extends I {
+  canvasTransform = new N();
   renderTargetIndex = 0;
   renderTargets = [
     new se(),
@@ -5643,7 +5643,7 @@ var Ro = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, mt = (r, e
     (o = r[a]) && (i = (s ? o(e, t, i) : o(i)) || i);
   return s && i && Ro(e, t, i), i;
 };
-let we = class extends M {
+let we = class extends I {
   currentTime = 0;
   static from(r, e = !1) {
     const [t, s] = r ? Array.isArray(r) ? r : [0, r] : [];
@@ -5814,12 +5814,12 @@ let Me = class extends Ge {
   scale = new O(1, 1).on("update", () => this.updateGlobalTransform());
   skew = new O().on("update", () => this.updateGlobalTransform());
   pivot = new O().on("update", () => this.updateGlobalTransform());
-  extraTransform = new D();
-  transform = new D();
+  extraTransform = new N();
+  transform = new N();
   globalPosition = new O();
   globalScale = new O();
   globalSkew = new O();
-  globalTransform = new D();
+  globalTransform = new N();
   _parentTransformDirtyId;
   constructor(r, e = []) {
     super(), this.setProperties(r).append(e);
@@ -5887,7 +5887,7 @@ var Uo = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, Or = (r, e
   return s && i && Uo(e, t, i), i;
 };
 let kt = class extends Me {
-  canvasTransform = new D();
+  canvasTransform = new N();
   _screenOffset = { x: 0, y: 0 };
   _zoom = new O(1, 1).on("update", () => this.updateTransform());
   get zoom() {
@@ -6062,7 +6062,7 @@ function vc(r) {
   }
   return e;
 }
-function Lo(r, e, t, s = new D()) {
+function Lo(r, e, t, s = new N()) {
   return r = !r || r === "none" ? "" : r, Gt(r, { width: e, height: t }).reverse().forEach(({ name: i, args: a }) => {
     const o = a.map((n) => n.normalizedIntValue);
     switch (i) {
@@ -7887,7 +7887,7 @@ Pe = gt([
 function Ut(r, e) {
   const { x: t, y: s, width: i, height: a } = e;
   let o = !1;
-  const n = new D().translate(-t, -s).scale(1 / i, 1 / a);
+  const n = new N().translate(-t, -s).scale(1 / i, 1 / a);
   if (r.cropRect) {
     const {
       left: g = 0,
@@ -7937,7 +7937,7 @@ var Bn = Object.defineProperty, Z = (r, e, t, s) => {
 };
 class z extends Se {
   constructor(e) {
-    super(), this.parent = e;
+    super(), this._parent = e;
   }
   texture;
   animatedTexture;
@@ -7946,7 +7946,7 @@ class z extends Se {
   }
   setProperties(e) {
     return this._setProperties(
-      N(e) ? void 0 : as(e)
+      M(e) ? void 0 : as(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -7959,7 +7959,7 @@ class z extends Se {
       case "tile":
       case "opacity":
       case "enabled":
-        this.parent.requestDraw();
+        this._parent.requestDraw();
         break;
       case "image":
       case "linearGradient":
@@ -7972,12 +7972,12 @@ class z extends Se {
     if (this.linearGradient || this.radialGradient)
       this.texture = new Ht(
         this.linearGradient ?? this.radialGradient,
-        Math.floor(this.parent.size.width),
-        Math.floor(this.parent.size.height)
+        Math.floor(this._parent.size.width),
+        Math.floor(this._parent.size.height)
       );
-    else if (N(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") {
+    else if (this._parent.tree?.log(`load image ${this.image}`), this.image !== "viewport") {
       let e = this.image.split("?")[0].endsWith(".gif");
       const t = this.image, s = await V.loadBy(t, async () => {
         const i = await V.fetch(t).then((a) => a.blob());
@@ -7987,13 +7987,13 @@ class z extends Se {
     }
   }
   async _updateTexture() {
-    await this.loadTexture(), this.parent.requestDraw();
+    await this.loadTexture(), this._parent.requestDraw();
   }
   isValid() {
     return !!(this.enabled && (this.texture || this.animatedTexture || this.color || this.image === "viewport"));
   }
   draw() {
-    const { width: e, height: t } = this.parent.size, s = this.parent.context;
+    const { width: e, height: t } = this._parent.size, s = this._parent.context;
     let i = {
       size: { width: e, height: t }
     };
@@ -8006,7 +8006,7 @@ class z extends Se {
     const e = this.animatedTexture?.duration ?? 0;
     if (!e)
       return 0;
-    const t = this.parent.currentTime;
+    const t = this._parent.currentTime;
     return t < 0 ? 0 : t % e;
   }
   updateFrameIndex() {
@@ -8021,7 +8021,7 @@ class z extends Se {
         i = o;
         break;
       }
-    return this.animatedTexture.frameIndex !== i && (this.animatedTexture.frameIndex = i, this.parent.requestDraw()), this;
+    return this.animatedTexture.frameIndex !== i && (this.animatedTexture.frameIndex = i, this._parent.requestDraw()), this;
   }
   process(e) {
     this.updateFrameIndex();
@@ -8068,11 +8068,11 @@ var Ln = Object.defineProperty, Fn = (r, e, t, s) => {
 class Ws extends z {
   setProperties(e) {
     return super._setProperties(
-      N(e) ? void 0 : hi(e)
+      M(e) ? void 0 : hi(e)
     );
   }
   _updateProperty(e, t, s) {
-    super._updateProperty(e, t, s), e === "fillWithShape" && this.parent.requestDraw();
+    super._updateProperty(e, t, s), e === "fillWithShape" && this._parent.requestDraw();
   }
 }
 Fn([
@@ -8086,11 +8086,11 @@ var zn = Object.defineProperty, Gn = (r, e, t, s) => {
 class qs extends z {
   setProperties(e) {
     return super._setProperties(
-      N(e) ? void 0 : ui(e)
+      M(e) ? void 0 : ui(e)
     );
   }
   _updateProperty(e, t, s) {
-    super._updateProperty(e, t, s), e === "fillWithShape" && this.parent.requestDraw();
+    super._updateProperty(e, t, s), e === "fillWithShape" && this._parent.requestDraw();
   }
 }
 Gn([
@@ -8104,7 +8104,7 @@ var Vn = Object.defineProperty, vt = (r, e, t, s) => {
 class Ze extends z {
   setProperties(e) {
     return super._setProperties(
-      N(e) ? void 0 : di(e)
+      M(e) ? void 0 : di(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -8114,7 +8114,7 @@ class Ze extends z {
       case "lineCap":
       case "lineJoin":
       case "enabled":
-        this.parent.requestDraw();
+        this._parent.requestDraw();
         break;
     }
   }
@@ -8122,7 +8122,7 @@ class Ze extends z {
     return !!(this.enabled && (this.width || this.color || super.isValid()));
   }
   draw() {
-    const { width: e, height: t } = this.parent.size, s = this.parent.context;
+    const { width: e, height: t } = this._parent.size, s = this._parent.context;
     this.image === "viewport" ? s.strokeStyle = new Ar() : s.strokeStyle = this.texture ?? this.color ?? "#000000FF", s.lineWidth = this.width || 1, s.lineCap = this.lineCap, s.lineJoin = this.lineJoin, s.stroke({
       ...Ut(this, { x: 0, y: 0, width: e, height: t })
     });
@@ -8150,11 +8150,11 @@ var $n = Object.defineProperty, bt = (r, e, t, s) => {
 };
 class Je extends Se {
   constructor(e) {
-    super(), this.parent = e;
+    super(), this._parent = e;
   }
   setProperties(e) {
     return super.setProperties(
-      N(e) ? void 0 : fi(e)
+      M(e) ? void 0 : fi(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -8169,8 +8169,8 @@ class Je extends Se {
   }
   updateEffect() {
     const e = "__$shadow";
-    let t = this.parent.getNode(e);
-    this.blur || this.offsetX || this.offsetY ? (t || (t = new ie({ name: e }), this.parent.appendChild(t, "back")), t.setProperties(this.getProperties())) : t && this.parent.removeChild(t);
+    let t = this._parent.getNode(e);
+    this.blur || this.offsetX || this.offsetY ? (t || (t = new ie({ name: e }), this._parent.appendChild(t, "back")), t.setProperties(this.getProperties())) : t && this._parent.removeChild(t);
   }
 }
 bt([
@@ -8195,12 +8195,12 @@ var Hn = Object.defineProperty, yt = (r, e, t, s) => {
 };
 class Qe extends Se {
   constructor(e) {
-    super(), this.parent = e, this._updatePath2DSet();
+    super(), this._parent = e, this._updatePath2DSet();
   }
   _path2DSet = new Ei();
   setProperties(e) {
     return super.setProperties(
-      N(e) ? void 0 : pi(e)
+      M(e) ? void 0 : pi(e)
     );
   }
   _updateProperty(e, t, s) {
@@ -8209,7 +8209,7 @@ class Qe extends Se {
       case "paths":
       case "viewBox":
       case "enabled":
-        this._updatePath2DSet(), this.parent.requestDraw();
+        this._updatePath2DSet(), this._parent.requestDraw();
         break;
     }
   }
@@ -8222,7 +8222,7 @@ class Qe extends Se {
       const o = Si(this.svg);
       this._path2DSet = Ti(o), e = this._path2DSet.viewBox;
     } else
-      this.paths?.forEach((o, n) => {
+      this._path2DSet.paths.length = 0, this.paths?.forEach((o, n) => {
         const { data: l, ...c } = o, u = new Ot();
         u.style = c, u.addData(l), this._path2DSet.paths[n] = u;
       });
@@ -8237,7 +8237,7 @@ class Qe extends Se {
   }
   draw(e = !1) {
     if (!e && this.isValid()) {
-      const t = this.parent.context, { width: s, height: i } = this.parent.size;
+      const t = this._parent.context, { width: s, height: i } = this._parent.size;
       this._path2DSet.paths.forEach((a) => {
         t.addPath(a.clone().applyTransform(new $r().scale(s, i)));
       });
@@ -8245,7 +8245,7 @@ class Qe extends Se {
       this._drawRect();
   }
   _drawRect() {
-    const e = this.parent.context, { width: t, height: s } = this.parent.size, { borderRadius: i } = this.parent.style;
+    const e = this._parent.context, { width: t, height: s } = this._parent.size, { borderRadius: i } = this._parent.style;
     t && s && (i ? e.roundRect(0, 0, t, s, i) : e.rect(0, 0, t, s));
   }
 }
@@ -8285,7 +8285,7 @@ var Xn = Object.defineProperty, _e = (r, e, t, s) => {
 };
 class ne extends Se {
   constructor(e) {
-    super(), this.parent = e, this.base = new Ri(), this.base.setPropertyAccessor(this);
+    super(), this._parent = e, this.base = new Ri(), this.base.setPropertyAccessor(this);
   }
   base;
   get textContent() {
@@ -8303,13 +8303,13 @@ class ne extends Se {
   _textureMap = /* @__PURE__ */ new Map();
   setProperties(e) {
     return super.setProperties(
-      N(e) ? void 0 : mi(e)
+      M(e) ? void 0 : mi(e)
     );
   }
   _updateProperty(e, t, s) {
     switch (super._updateProperty(e, t, s), e) {
       case "enabled":
-        this.parent.requestDraw();
+        this._parent.requestDraw();
         break;
       case "effects":
       case "measureDom":
@@ -8332,15 +8332,16 @@ class ne extends Se {
     });
   }
   update() {
-    this.base.fonts = this.base.fonts ?? this.parent.tree?.fonts, this.base.update();
+    this.base.fonts = this.base.fonts ?? this._parent.tree?.fonts, this.base.update();
     const e = this._texture;
     e.width = Math.ceil(this.base.boundingBox.width), e.height = Math.ceil(this.base.boundingBox.height), this.base.render({
       view: e.source,
       pixelRatio: e.pixelRatio
-    }), e.requestUpdate("source"), this.parent.requestDraw();
+    }), e.requestUpdate("source"), this._parent.requestDraw();
   }
   _updateTextureMap() {
-    this._textureMap.clear();
+    if (this._textureMap.clear(), this.useTextureDraw())
+      return;
     const e = [];
     if (this.base.paragraphs.forEach((t, s) => {
       const i = [];
@@ -8364,14 +8365,14 @@ class ne extends Se {
     t && Object.keys(t).length > 0 && (this._textureMap.set(e, {
       texture: await this._loadTexture(as(t), s),
       box: s
-    }), this.parent.requestDraw());
+    }), this._parent.requestDraw());
   }
   async _loadTexture(e, t) {
     return e.linearGradient || e.radialGradient ? new Ht(
       e.linearGradient ?? e.radialGradient,
       t.width,
       t.height
-    ) : N(e.image) ? void 0 : (this.parent.tree?.log(`load image ${e.image}`), await V.texture.load(e.image));
+    ) : M(e.image) ? void 0 : (this._parent.tree?.log(`load image ${e.image}`), await V.texture.load(e.image));
   }
   setContent(e) {
     this.content = gi(e);
@@ -8386,18 +8387,10 @@ class ne extends Se {
     return !!(this.enabled && !/^\s*$/.test(this.getStringContent()));
   }
   _createTransformVertex() {
-    const e = this.parent;
-    if (e.scale.x > 0 && e.scale.y > 0)
-      return;
-    const t = e.scale.x * e.scale.y, s = e.pivot, i = new D().translate(-s.x, -s.y).scale(t > 0 ? 1 : -1, 1).translate(s.x, s.y), { a, c: o, tx: n, b: l, d: c, ty: u } = i.toObject();
-    let d, f;
-    return (m, p) => {
-      d = m[p], f = m[p + 1], m[p] = a * d + o * f + n, m[p + 1] = l * d + c * f + u;
-    };
   }
   useTextureDraw() {
     let e = this.drawMode;
-    return e === "auto" && (this.effects?.length || this.content.some((t) => t.fragments.some((s) => !!s.highlightImage)) ? e = "texture" : e = this._autoDrawMode ?? "texture"), e === "texture";
+    return e === "auto" && (this.effects?.length || this.content.some((t) => t.fragments.some((s) => !!(s.highlightImage || s.highlight?.image))) ? e = "texture" : e = this._autoDrawMode ?? "texture"), e === "texture";
   }
   _pathDraw(e) {
     const t = this._createTransformVertex();
@@ -8406,7 +8399,7 @@ class ne extends Se {
         const a = i.getMeta();
         if (a instanceof Ai) {
           const o = a.parent.index, n = a.parent.parent.index;
-          if (i.style.fill && !N(i.style.fill))
+          if (i.style.fill && !M(i.style.fill))
             if (typeof i.style.fill == "object") {
               const l = i.style.fill, c = this._textureMap.get(`${n}.${o}.fill`) ?? this._textureMap.get(`${n}.fill`) ?? this._textureMap.get("fill");
               l.enabled !== !1 && (c || l.color) && (e.addPath(i), e.style = { ...i.style }, e.fillStyle = c?.texture ?? l.color, e.fill({
@@ -8415,8 +8408,8 @@ class ne extends Se {
                   c?.box ?? {
                     x: 0,
                     y: 0,
-                    width: this.parent.size.width,
-                    height: this.parent.size.height
+                    width: this._parent.size.width,
+                    height: this._parent.size.height
                   }
                 ),
                 transformVertex: t
@@ -8425,7 +8418,7 @@ class ne extends Se {
               e.addPath(i), e.style = { ...i.style }, e.fill({
                 transformVertex: t
               });
-          if (i.style.stroke && !N(i.style.stroke))
+          if (i.style.stroke && !M(i.style.stroke))
             if (typeof i.style.stroke == "object") {
               const l = i.style.stroke, c = this._textureMap.get(`${n}.${o}.outline`) ?? this._textureMap.get(`${n}.outline`) ?? this._textureMap.get("outline");
               l.enabled !== !1 && (c || l.color) && (l.width === void 0 || l.width) && (e.addPath(i), e.style = { ...i.style }, e.lineWidth = l.width || 1, e.strokeStyle = c?.texture ?? l.color, e.lineCap = l.lineCap, e.lineJoin = l.lineJoin, e.stroke({
@@ -8434,8 +8427,8 @@ class ne extends Se {
                   c?.box ?? {
                     x: 0,
                     y: 0,
-                    width: this.parent.size.width,
-                    height: this.parent.size.height
+                    width: this._parent.size.width,
+                    height: this._parent.size.height
                   }
                 ),
                 transformVertex: t
@@ -8445,9 +8438,9 @@ class ne extends Se {
                 transformVertex: t
               });
         } else
-          e.addPath(i), e.style = { ...i.style }, i.style.fill && !N(i.style.fill) && e.fill({
+          e.addPath(i), e.style = { ...i.style }, i.style.fill && !M(i.style.fill) && e.fill({
             transformVertex: this._createTransformVertex()
-          }), i.style.stroke && !N(i.style.stroke) && e.stroke({
+          }), i.style.stroke && !M(i.style.stroke) && e.stroke({
             transformVertex: this._createTransformVertex()
           });
       });
@@ -8456,7 +8449,7 @@ class ne extends Se {
   _textureDraw(e) {
     const { left: t = 0, top: s = 0, width: i, height: a } = this.base.boundingBox;
     e.fillStyle = this._texture, e.rect(t, s, i, a);
-    const o = new D().translate(-t, -s).scale(1 / i, 1 / a), { a: n, c: l, tx: c, b: u, d, ty: f } = o.toObject();
+    const o = new N().translate(-t, -s).scale(1 / i, 1 / a), { a: n, c: l, tx: c, b: u, d, ty: f } = o.toObject();
     let m, p;
     e.fill({
       transformUv: (_, g) => {
@@ -8466,15 +8459,15 @@ class ne extends Se {
     });
   }
   draw() {
-    const e = this.parent.context;
+    const e = this._parent.context;
     this.useTextureDraw() ? this._textureDraw(e) : this._pathDraw(e);
   }
   process(e) {
     if (this.drawMode === "auto") {
-      const { width: t, height: s } = this.base.boundingBox, i = this.parent.getViewport();
+      const { width: t, height: s } = this.base.boundingBox, i = this._parent.getViewport();
       if (i) {
         const { a, d: o } = i.canvasTransform.toObject(), n = this._autoDrawMode;
-        t * a < this._autoDrawThreshold || s * o < this._autoDrawThreshold ? this._autoDrawMode = "texture" : this._autoDrawMode = "path", n !== this._autoDrawMode && this.parent.requestDraw();
+        t * a < this._autoDrawThreshold || s * o < this._autoDrawThreshold ? this._autoDrawMode = "texture" : this._autoDrawMode = "path", n !== this._autoDrawMode && (this._autoDrawMode === "path" && this._updateTextureMap(), this._parent.requestDraw());
       }
     }
   }
@@ -8486,7 +8479,7 @@ _e([
   h({ fallback: () => [] })
 ], ne.prototype, "content");
 _e([
-  h({ alias: "parent.style.json" })
+  h({ alias: "_parent.style.json" })
 ], ne.prototype, "style");
 _e([
   h()
@@ -8616,7 +8609,7 @@ const R = {
 };
 class kr {
   constructor(e) {
-    this._el = e, this._addChild = this._addChild.bind(this), this._removeChild = this._removeChild.bind(this), this._el.on("addChild", this._addChild), this._el.on("removeChild", this._removeChild);
+    this._parent = e, this._addChild = this._addChild.bind(this), this._removeChild = this._removeChild.bind(this), this._parent.on("addChild", this._addChild), this._parent.on("removeChild", this._removeChild);
   }
   static _yoga;
   static async load() {
@@ -8658,19 +8651,19 @@ class kr {
           s.setAspectRatio(t);
           break;
         case "borderTop":
-          s.setBorder(R.top, this._el.style.borderWidth);
+          s.setBorder(R.top, this._parent.style.borderWidth);
           break;
         case "borderBottom":
-          s.setBorder(R.bottom, this._el.style.borderWidth);
+          s.setBorder(R.bottom, this._parent.style.borderWidth);
           break;
         case "borderLeft":
-          s.setBorder(R.left, this._el.style.borderWidth);
+          s.setBorder(R.left, this._parent.style.borderWidth);
           break;
         case "borderRight":
-          s.setBorder(R.right, this._el.style.borderWidth);
+          s.setBorder(R.right, this._parent.style.borderWidth);
           break;
         case "border":
-          s.setBorder(R.all, this._el.style.borderWidth);
+          s.setBorder(R.all, this._parent.style.borderWidth);
           break;
         case "direction":
           s.setDirection(
@@ -8794,7 +8787,7 @@ class kr {
     }
   }
   update() {
-    const e = this._el, t = this.node;
+    const e = this._parent, t = this.node;
     if (e.getParent()?.flexbox?.update(), e.globalDisplay === "flex" && t && (t.isDirty() && t.calculateLayout(void 0, void 0, At.ltr), t.hasNewLayout())) {
       const { left: s, top: i, width: a, height: o } = t.getComputedLayout();
       (!Number.isNaN(s) && s !== e.position.x || !Number.isNaN(i) && i !== e.position.y) && e.position.set(s, i), (!Number.isNaN(a) && a !== e.size.x || !Number.isNaN(o) && o !== e.size.y) && e.size.set(a, o), t.markLayoutSeen();
@@ -8975,7 +8968,7 @@ let Ee = class extends Me {
         this._overflowHidden = e === "hidden";
         break;
       case "pointerEvents":
-        this._allowPointerEvents = !N(e);
+        this._allowPointerEvents = !M(e);
         break;
       case "borderRadius":
         this.requestDraw();
@@ -9011,13 +9004,13 @@ let Ee = class extends Me {
     this._parentGlobalDisplay !== e?.globalDisplay && this.updateGlobalDisplay(), this.flexbox.update(), super._process(r);
   }
   _updateStyleFilter(r) {
-    N(r) ? (this._colorFilterEffect?.remove(), this._colorFilterEffect = void 0, this.requestRender()) : (this._colorFilterEffect || (this._colorFilterEffect = new $e({
+    M(r) ? (this._colorFilterEffect?.remove(), this._colorFilterEffect = void 0, this.requestRender()) : (this._colorFilterEffect || (this._colorFilterEffect = new $e({
       name: "styleFilter",
       internalMode: "front"
     }), this.append(this._colorFilterEffect)), this._colorFilterEffect.filter = r);
   }
   _updateStyleMaskImage(r) {
-    N(r) ? (this._maskEffect?.remove(), this._maskEffect = void 0, this.requestRender()) : (this._maskEffect || (this._maskEffect = new We({
+    M(r) ? (this._maskEffect?.remove(), this._maskEffect = void 0, this.requestRender()) : (this._maskEffect || (this._maskEffect = new We({
       name: "styleMaskImage",
       internalMode: "back"
     }), this.append(this._maskEffect)), this._maskEffect.image = r);
@@ -9159,7 +9152,7 @@ class Ks extends Ee {
   _drawContent() {
     if (this.texture?.isValid()) {
       this.shape.draw(!0), this.context.fillStyle = this.texture;
-      const { a: e, c: t, tx: s, b: i, d: a, ty: o } = new D().scale(1 / this.size.x, 1 / this.size.y).toObject();
+      const { a: e, c: t, tx: s, b: i, d: a, ty: o } = new N().scale(1 / this.size.x, 1 / this.size.y).toObject();
       let n, l;
       this.context.fill({
         transformUv: (c, u) => {
@@ -9262,7 +9255,7 @@ let vr = class extends Ks {
   _updateVideoCurrentTime() {
     const r = this.texture;
     if (r && !r.isPlaying && !r.seeking) {
-      const e = ~~Math.max(0, this.currentTime % (r.duration * 1e3)) / 1e3;
+      const e = ~~Math.max(0, this.currentTime % this.videoDuration) / 1e3;
       r.currentTime !== e && (r.currentTime = e);
     }
   }
@@ -11089,7 +11082,7 @@ export {
   ea as Matrix4,
   po as Meta,
   fs as MouseInputEvent,
-  M as Node,
+  I as Node,
   Me as Node2D,
   It as Obb2D,
   F as OutlineEffect,
@@ -11129,7 +11122,7 @@ export {
   pt as TiltShiftTransition,
   we as Timeline,
   q as TimelineNode,
-  D as Transform2D,
+  N as Transform2D,
   tl as TransformRect2D,
   Ve as Transition,
   zt as TwistTransition,

package/dist/scene/2d/element/Element2DFill.d.ts

@@ -5,7 +5,7 @@ import { CoreObject } from '../../../core';
 export interface Element2DFill extends NormalizedFill {
 }
 export declare class Element2DFill extends CoreObject {
-    parent: Element2D;
+    protected _parent: Element2D;
     enabled: boolean;
     color?: NormalizedFill['color'];
     image?: NormalizedFill['image'];
@@ -19,7 +19,7 @@ export declare class Element2DFill extends CoreObject {
     opacity?: NormalizedFill['opacity'];
     texture?: Texture2D;
     animatedTexture?: AnimatedTexture;
-    constructor(parent: Element2D);
+    constructor(_parent: Element2D);
     protected _setProperties(properties?: NormalizedFill): this;
     setProperties(properties?: Fill): this;
     protected _updateProperty(key: string, value: any, oldValue: any): void;

package/dist/scene/2d/element/Element2DShadow.d.ts

@@ -2,13 +2,13 @@ import type { NormalizedShadow, Shadow } from 'modern-idoc';
 import type { Element2D } from './Element2D';
 import { CoreObject } from '../../../core';
 export declare class Element2DShadow extends CoreObject {
-    parent: Element2D;
+    protected _parent: Element2D;
     enabled: boolean;
     color: NormalizedShadow['color'];
     blur: NormalizedShadow['blur'];
     offsetY: NormalizedShadow['offsetX'];
     offsetX: NormalizedShadow['offsetY'];
-    constructor(parent: Element2D);
+    constructor(_parent: Element2D);
     setProperties(properties?: Shadow): this;
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     updateEffect(): void;

package/dist/scene/2d/element/Element2DShape.d.ts

@@ -3,14 +3,14 @@ import type { Element2D } from './Element2D';
 import { Path2DSet } from 'modern-path2d';
 import { CoreObject } from '../../../core';
 export declare class Element2DShape extends CoreObject {
-    parent: Element2D;
+    protected _parent: Element2D;
     enabled: boolean;
     preset: NormalizedShape['preset'];
     svg: NormalizedShape['svg'];
     viewBox: NormalizedShape['viewBox'];
     paths: NormalizedShape['paths'];
     protected _path2DSet: Path2DSet;
-    constructor(parent: Element2D);
+    constructor(_parent: Element2D);
     setProperties(properties?: Shape): this;
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     isValid(): boolean;

package/dist/scene/2d/element/Element2DText.d.ts

@@ -11,7 +11,7 @@ import { CoreObject } from '../../../core';
 import { CanvasTexture } from '../../resources';
 export type TextDrawMode = 'auto' | 'texture' | 'path';
 export declare class Element2DText extends CoreObject {
-    parent: Element2D;
+    protected _parent: Element2D;
     enabled: boolean;
     content: NormalizedText['content'];
     style: NormalizedText['style'];
@@ -32,7 +32,7 @@ export declare class Element2DText extends CoreObject {
         texture: Texture2D | undefined;
         box: RectangleLike;
     }>;
-    constructor(parent: Element2D);
+    constructor(_parent: Element2D);
     setProperties(properties?: TextProperties): this;
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     load(): Promise<void>;

package/dist/scene/2d/element/Flexbox.d.ts

@@ -72,11 +72,11 @@ export declare const boxSizingMap: {
     'content-box': number;
 };
 export declare class Flexbox {
-    protected _el: Element2D;
+    protected _parent: Element2D;
     static _yoga?: any;
     static load(): Promise<void>;
     readonly node: YogaNode | undefined;
-    constructor(_el: Element2D);
+    constructor(_parent: Element2D);
     protected _addChild(child: Node, newIndex: number): void;
     protected _removeChild(child: Node, _oldIndex: number): void;
     updateStyleProperty(key: string, value: any): void;

package/package.json

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