modern-canvas 0.14.4 → 0.14.5

package/dist/core/renderers/gl/GlScissorSystem.d.ts

@@ -8,8 +8,10 @@ export declare class GlScissorSystem extends GlSystem {
         refCount: number;
         rect?: RectangleLike;
     }>;
-    onRenderTargetChange(renderTarget: RenderTargetLike | null): void;
+    protected _setup(): void;
+    protected _updateRenderTarget: (renderTarget: RenderTargetLike | null) => void;
     push(rect: RectangleLike): void;
     pop(): void;
     bind(rect?: RectangleLike | null): void;
+    destroy(): void;
 }

package/dist/core/renderers/gl/GlStencilSystem.d.ts

@@ -48,8 +48,10 @@ export declare class GlStencilSystem extends GlSystem {
         'greater': number;
         'greater-equal': number;
     };
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
+    protected _setup(): void;
     reset(): void;
-    onRenderTargetChange(renderTarget: RenderTargetLike | null): void;
+    protected _updateRenderTarget: (renderTarget: RenderTargetLike | null) => void;
     bind(stencilMode: StencilMode, refCount: number): void;
+    destroy(): void;
 }

package/dist/core/renderers/gl/renderTarget/GlRenderTargetSystem.d.ts

@@ -1,9 +1,20 @@
 import type { RectangleLike } from '../../../math';
 import type { RenderTargetLike, TextureLike } from '../../shared';
 import type { GlRenderer } from '../GlRenderer';
+import type { GlSystemEvents } from '../system';
+import type { GlRenderingContext } from '../types';
 import { Projection2D } from '../../../math';
 import { GlSystem } from '../system';
 import { GlRenderTarget } from './GlRenderTarget';
+export interface GlRenderTargetSystemEvents extends GlSystemEvents {
+    updateRenderTarget: [renderTarget: RenderTargetLike | null];
+}
+export interface GlRenderTargetSystem {
+    on: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, listener: (...args: GlRenderTargetSystemEvents[K]) => void) => this;
+    once: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, listener: (...args: GlRenderTargetSystemEvents[K]) => void) => this;
+    off: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, listener: (...args: GlRenderTargetSystemEvents[K]) => void) => this;
+    emit: <K extends keyof GlRenderTargetSystemEvents & string>(event: K, ...args: GlRenderTargetSystemEvents[K]) => this;
+}
 export declare class GlRenderTargetSystem extends GlSystem {
     install(renderer: GlRenderer): void;
     readonly renderTargets: Map<number, RenderTargetLike>;
@@ -13,7 +24,7 @@ export declare class GlRenderTargetSystem extends GlSystem {
     protected _hasMRT: boolean;
     protected _writeDepthTexture: boolean;
     projectionMatrix: Projection2D;
-    onUpdateContext(): void;
+    protected _updateContext(gl: GlRenderingContext): void;
     bind(renderTarget: RenderTargetLike | null, frame?: RectangleLike): void;
     unbind(): void;
     getGlRenderTarget(renderTarget: RenderTargetLike): GlRenderTarget;

package/dist/core/renderers/gl/state/GlStateSystem.d.ts

@@ -31,7 +31,7 @@ export declare class GlStateSystem extends GlSystem {
     boundBlendMode?: string;
     blendModes: Record<GlBlendMode, any>;
     defaultState: GlState;
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
     toggle(boundPoint: number, enable: boolean): void;
     setBlend(value: boolean): void;
     setOffsets(value: boolean): void;

package/dist/core/renderers/gl/system/GlSystem.d.ts

@@ -1,12 +1,24 @@
+import type { ObservableEvents } from 'modern-idoc';
 import type { GlRenderer } from '../GlRenderer';
 import type { GlRenderingContext } from '../types';
-export declare abstract class GlSystem {
+import { Observable } from 'modern-idoc';
+export interface GlSystemEvents extends ObservableEvents {
+    updateContext: [gl: GlRenderingContext];
+    setup: [];
+}
+export interface GlSystem {
+    on: <K extends keyof GlSystemEvents & string>(event: K, listener: (...args: GlSystemEvents[K]) => void) => this;
+    once: <K extends keyof GlSystemEvents & string>(event: K, listener: (...args: GlSystemEvents[K]) => void) => this;
+    off: <K extends keyof GlSystemEvents & string>(event: K, listener: (...args: GlSystemEvents[K]) => void) => this;
+    emit: <K extends keyof GlSystemEvents & string>(event: K, ...args: GlSystemEvents[K]) => this;
+}
+export declare abstract class GlSystem extends Observable {
     protected _renderer: GlRenderer;
     protected get _gl(): GlRenderingContext;
-    get gl(): GlRenderingContext;
+    constructor();
     install(renderer: GlRenderer): void;
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
+    protected _setup(): void;
     flush(): void;
     reset(): void;
-    destroy(): void;
 }

package/dist/core/renderers/gl/texture/GlTextureSystem.d.ts

@@ -17,7 +17,7 @@ export declare class GlTextureSystem extends GlSystem {
     protected _location: GlTextureLocation;
     current: (TextureLike | null)[];
     install(renderer: GlRenderer): void;
-    onUpdateContext(gl: GlRenderingContext): void;
+    protected _updateContext(gl: GlRenderingContext): void;
     getGlTexture(texture: TextureLike): GlTexture;
     protected _createGlTexture(texture: TextureLike): GlTexture;
     bind(texture?: TextureLike | null, location?: number): void;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineProperty as ts, Observable as we, Reactivable as rs, parseColor as ai, property as h, isGradient as ni, isColorFillObject as Nr, clearUndef as ss, idGenerator as is, normalizeFill as li, isNone as V, normalizeBackground as ci, normalizeForeground as hi, normalizeOutline as ui, normalizeShadow as di, normalizeShape as fi, getDefaultStyle as pi, normalizeText as _i, normalizeTextContent as mi, getDefaultTextStyle as gi, getDefaultLayoutStyle as vi, RawWeakMap as bi } from "modern-idoc";
+import { defineProperty as ts, Observable as he, Reactivable as rs, parseColor as ai, property as h, isGradient as ni, isColorFillObject as Nr, clearUndef as ss, idGenerator as is, normalizeFill as li, isNone as V, normalizeBackground as ci, normalizeForeground as hi, normalizeOutline as ui, normalizeShadow as di, normalizeShape as fi, getDefaultStyle as pi, normalizeText as _i, normalizeTextContent as mi, getDefaultTextStyle as gi, getDefaultLayoutStyle as vi, RawWeakMap as bi } from "modern-idoc";
 import { fonts as yi } from "modern-font";
 import { extend as xi } from "colord";
 import wi from "colord/plugins/names";
@@ -183,7 +183,7 @@ function as(r, e, t = {}) {
   }
   return n;
 }
-const Ii = "WebGL2RenderingContext" in globalThis, Mi = "ImageBitmap" in globalThis, Ni = "ResizeObserver" in globalThis, et = "PointerEvent" in globalThis, ki = "WheelEvent" in globalThis, dc = "MouseEvent" in globalThis, ve = "ontouchstart" in globalThis, Ui = "onclick" in globalThis, fc = "createImageBitmap" in globalThis, ns = "AudioContext" in globalThis, ls = "webkitAudioContext" in globalThis, cs = "OfflineAudioContext" in globalThis, Bi = "webkitOfflineAudioContext" in globalThis, Li = ns || ls, pr = typeof window < "u", Fi = typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0, hs = globalThis.devicePixelRatio || 1, us = (r) => r !== null && typeof r == "object" && r.nodeType === 1, zi = (r) => us(r) && r.tagName === "VIDEO", pc = (r) => us(r) && r.tagName === "IMG";
+const Ii = "WebGL2RenderingContext" in globalThis, Mi = "ImageBitmap" in globalThis, Ni = "ResizeObserver" in globalThis, et = "PointerEvent" in globalThis, ki = "WheelEvent" in globalThis, dc = "MouseEvent" in globalThis, be = "ontouchstart" in globalThis, Ui = "onclick" in globalThis, fc = "createImageBitmap" in globalThis, ns = "AudioContext" in globalThis, ls = "webkitAudioContext" in globalThis, cs = "OfflineAudioContext" in globalThis, Bi = "webkitOfflineAudioContext" in globalThis, Li = ns || ls, pr = typeof window < "u", Fi = typeof navigator < "u" && navigator?.userAgent?.indexOf("Mac") >= 0, hs = globalThis.devicePixelRatio || 1, us = (r) => r !== null && typeof r == "object" && r.nodeType === 1, zi = (r) => us(r) && r.tagName === "VIDEO", pc = (r) => us(r) && r.tagName === "IMG";
 function Gi(r) {
   return typeof r == "object" && r !== null && r.nodeType === 1 && r.tagName === "CANVAS";
 }
@@ -342,7 +342,7 @@ const Ki = {
   touchmove: "pointermove",
   touchcancel: "pointercancel"
 };
-class Zi extends we {
+class Zi extends he {
   /**
    * Current event
    */
@@ -364,17 +364,17 @@ class Zi extends we {
     if (!this.setuped || !this.target)
       return;
     const e = this.target.style;
-    globalThis.navigator.msPointerEnabled ? (e.msContentZooming = "", e.msTouchAction = "") : et && (e.touchAction = ""), et ? (this.target.removeEventListener("pointerdown", this._onPointerDown), this.target.removeEventListener("pointerleave", this._onPointerOver), this.target.removeEventListener("pointerover", this._onPointerOver), this.target.removeEventListener("pointermove", this._onPointerMove), this.target.removeEventListener("pointerup", this._onPointerUp)) : (this.target.removeEventListener("mousedown", this._onPointerDown), this.target.removeEventListener("mouseout", this._onPointerOver), this.target.removeEventListener("mouseover", this._onPointerOver), this.target.removeEventListener("mousemove", this._onPointerMove), this.target.removeEventListener("mouseup", this._onPointerUp)), ve && (this.target.removeEventListener("touchstart", this._onPointerDown), this.target.removeEventListener("touchmove", this._onPointerMove), this.target.removeEventListener("touchend", this._onPointerUp)), this.target.removeEventListener("wheel", this._onWheel), document.removeEventListener("keydown", this._onKeyDown), document.removeEventListener("keypress", this._onKeyPress), document.removeEventListener("keyup", this._onKeyUp), this.target = void 0, this.setuped = !1;
+    globalThis.navigator.msPointerEnabled ? (e.msContentZooming = "", e.msTouchAction = "") : et && (e.touchAction = ""), et ? (this.target.removeEventListener("pointerdown", this._onPointerDown), this.target.removeEventListener("pointerleave", this._onPointerOver), this.target.removeEventListener("pointerover", this._onPointerOver), this.target.removeEventListener("pointermove", this._onPointerMove), this.target.removeEventListener("pointerup", this._onPointerUp)) : (this.target.removeEventListener("mousedown", this._onPointerDown), this.target.removeEventListener("mouseout", this._onPointerOver), this.target.removeEventListener("mouseover", this._onPointerOver), this.target.removeEventListener("mousemove", this._onPointerMove), this.target.removeEventListener("mouseup", this._onPointerUp)), be && (this.target.removeEventListener("touchstart", this._onPointerDown), this.target.removeEventListener("touchmove", this._onPointerMove), this.target.removeEventListener("touchend", this._onPointerUp)), this.target.removeEventListener("wheel", this._onWheel), document.removeEventListener("keydown", this._onKeyDown), document.removeEventListener("keypress", this._onKeyPress), document.removeEventListener("keyup", this._onKeyUp), this.target = void 0, this.setuped = !1;
   }
   addEventListeners() {
     if (this.setuped || !this.target)
       return;
     const e = this.target.style;
-    e && (globalThis.navigator.msPointerEnabled ? (e.msContentZooming = "none", e.msTouchAction = "none") : et && (e.touchAction = "none")), et ? (this.target.addEventListener("pointerdown", this._onPointerDown), this.target.addEventListener("pointerleave", this._onPointerOver), this.target.addEventListener("pointerover", this._onPointerOver), this.target.addEventListener("pointermove", this._onPointerMove), this.target.addEventListener("pointerup", this._onPointerUp)) : (this.target.addEventListener("mousedown", this._onPointerDown), this.target.addEventListener("mouseout", this._onPointerOver), this.target.addEventListener("mouseover", this._onPointerOver), this.target.addEventListener("mousemove", this._onPointerMove), this.target.addEventListener("mouseup", this._onPointerUp)), ve && (this.target.addEventListener("touchstart", this._onPointerDown), this.target.addEventListener("touchmove", this._onPointerMove), this.target.addEventListener("touchend", this._onPointerUp)), this.target.addEventListener("wheel", this._onWheel), document.addEventListener("keydown", this._onKeyDown), document.addEventListener("keypress", this._onKeyPress), document.addEventListener("keyup", this._onKeyUp), this.setuped = !0;
+    e && (globalThis.navigator.msPointerEnabled ? (e.msContentZooming = "none", e.msTouchAction = "none") : et && (e.touchAction = "none")), et ? (this.target.addEventListener("pointerdown", this._onPointerDown), this.target.addEventListener("pointerleave", this._onPointerOver), this.target.addEventListener("pointerover", this._onPointerOver), this.target.addEventListener("pointermove", this._onPointerMove), this.target.addEventListener("pointerup", this._onPointerUp)) : (this.target.addEventListener("mousedown", this._onPointerDown), this.target.addEventListener("mouseout", this._onPointerOver), this.target.addEventListener("mouseover", this._onPointerOver), this.target.addEventListener("mousemove", this._onPointerMove), this.target.addEventListener("mouseup", this._onPointerUp)), be && (this.target.addEventListener("touchstart", this._onPointerDown), this.target.addEventListener("touchmove", this._onPointerMove), this.target.addEventListener("touchend", this._onPointerUp)), this.target.addEventListener("wheel", this._onWheel), document.addEventListener("keydown", this._onKeyDown), document.addEventListener("keypress", this._onKeyPress), document.addEventListener("keyup", this._onKeyUp), this.setuped = !0;
   }
   normalize(e) {
     const t = [];
-    if (ve && e instanceof globalThis.TouchEvent)
+    if (be && e instanceof globalThis.TouchEvent)
       for (let s = 0, i = e.changedTouches.length; s < i; s++) {
         const o = e.changedTouches[s];
         typeof o.button > "u" && (o.button = 0), typeof o.buttons > "u" && (o.buttons = 1), typeof o.isPrimary > "u" && (o.isPrimary = e.touches.length === 1 && e.type === "touchstart"), typeof o.width > "u" && (o.width = o.radiusX || 1), typeof o.height > "u" && (o.height = o.radiusY || 1), typeof o.tiltX > "u" && (o.tiltX = 0), typeof o.tiltY > "u" && (o.tiltY = 0), typeof o.pointerType > "u" && (o.pointerType = "touch"), typeof o.pointerId > "u" && (o.pointerId = o.identifier || 0), typeof o.pressure > "u" && (o.pressure = o.force || 0.5), typeof o.twist > "u" && (o.twist = 0), typeof o.tangentialPressure > "u" && (o.tangentialPressure = 0), typeof o.layerX > "u" && (o.layerX = o.offsetX = o.clientX), typeof o.layerY > "u" && (o.layerY = o.offsetY = o.clientY), o.type = e.type, t.push(o);
@@ -451,7 +451,7 @@ class Zi extends we {
     this.event?.cursor && this.setCursor(this.event.cursor);
   };
   _onPointerDown = (e) => {
-    if (ve && e.pointerType === "touch")
+    if (be && e.pointerType === "touch")
       return;
     const t = this.normalize(e);
     for (let s = 0, i = t.length; s < i; s++)
@@ -459,7 +459,7 @@ class Zi extends we {
     this.event?.cursor && this.setCursor(this.event.cursor);
   };
   _onPointerOver = (e) => {
-    if (!this.enableClickEvent || ve && e.pointerType === "touch")
+    if (!this.enableClickEvent || be && e.pointerType === "touch")
       return;
     const t = this.normalize(e);
     for (let s = 0, i = t.length; s < i; s++)
@@ -467,7 +467,7 @@ class Zi extends we {
     this.event?.cursor && this.setCursor(this.event.cursor);
   };
   _onPointerMove = (e) => {
-    if (!this.enableMoveEvent || ve && e.pointerType === "touch")
+    if (!this.enableMoveEvent || be && e.pointerType === "touch")
       return;
     const t = this.normalize(e);
     for (let s = 0, i = t.length; s < i; s++)
@@ -475,7 +475,7 @@ class Zi extends we {
     this.event?.cursor && this.setCursor(this.event.cursor);
   };
   _onPointerUp = (e) => {
-    if (!this.enableClickEvent || ve && e.pointerType === "touch")
+    if (!this.enableClickEvent || be && e.pointerType === "touch")
       return;
     let t = e.target;
     e.composedPath && e.composedPath().length > 0 && (t = e.composedPath()[0]);
@@ -516,7 +516,7 @@ class Pe extends rs {
 class Ji extends Pe {
   //
 }
-class he extends Ji {
+class ue extends Ji {
   //
 }
 xi([wi]);
@@ -596,7 +596,7 @@ class oe {
     return [this.r, this.g, this.b, this.a];
   }
 }
-class ee extends we {
+class ee extends he {
   constructor(e) {
     super(), this.dim = e;
   }
@@ -706,7 +706,7 @@ class ee extends we {
     return this.toArray();
   }
 }
-class ae extends we {
+class ae extends he {
   constructor(e, t, s) {
     super(), this.rows = e, this.cols = t, s ? this.set(s) : this.identity();
   }
@@ -1560,7 +1560,7 @@ class io {
   byteLength = 0;
   dirty = !0;
 }
-var be = /* @__PURE__ */ ((r) => (r[r.mapRead = 1] = "mapRead", r[r.mapWrite = 2] = "mapWrite", r[r.copySrc = 4] = "copySrc", r[r.copyDst = 8] = "copyDst", r[r.index = 16] = "index", r[r.vertex = 32] = "vertex", r[r.uniform = 64] = "uniform", r[r.storage = 128] = "storage", r[r.indirect = 256] = "indirect", r[r.queryResolve = 512] = "queryResolve", r[r.static = 1024] = "static", r))(be || {}), oo = Object.defineProperty, ms = (r, e, t, s) => {
+var ye = /* @__PURE__ */ ((r) => (r[r.mapRead = 1] = "mapRead", r[r.mapWrite = 2] = "mapWrite", r[r.copySrc = 4] = "copySrc", r[r.copyDst = 8] = "copyDst", r[r.index = 16] = "index", r[r.vertex = 32] = "vertex", r[r.uniform = 64] = "uniform", r[r.storage = 128] = "storage", r[r.indirect = 256] = "indirect", r[r.queryResolve = 512] = "queryResolve", r[r.static = 1024] = "static", r))(ye || {}), oo = Object.defineProperty, ms = (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 && oo(e, t, i), i;
@@ -1590,25 +1590,25 @@ function ao(r, e) {
   let t = Lr[r];
   return t === void 0 && (Zt[e] === void 0 && (Zt[e] = 1), Lr[r] = t = Zt[e]++), t;
 }
-class q {
+class q extends he {
   get _gl() {
     return this._renderer.gl;
   }
-  get gl() {
-    return this._renderer.gl;
+  constructor() {
+    super(), this.on("updateContext", this._updateContext.bind(this)), this.on("setup", this._setup.bind(this));
   }
   install(e) {
     this._renderer = e;
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
-  onUpdateContext(e) {
+  _updateContext(e) {
+  }
+  _setup() {
   }
   flush() {
   }
   reset() {
   }
-  destroy() {
-  }
 }
 class no extends q {
   install(e) {
@@ -1622,7 +1622,7 @@ class no extends q {
   _createGlBuffer(e) {
     const t = this._gl, s = new io(t.createBuffer());
     let i = it.arrayBuffer;
-    return e.usage & be.index ? i = it.elementArrayBuffer : e.usage & be.uniform && (i = it.uniformBuffer), s.target = i, this.glBuffers.set(e.instanceId, s), this.buffers.get(e.instanceId) || ("on" in e && (e.on("updateProperty", (o) => {
+    return e.usage & ye.index ? i = it.elementArrayBuffer : e.usage & ye.uniform && (i = it.uniformBuffer), s.target = i, this.glBuffers.set(e.instanceId, s), this.buffers.get(e.instanceId) || ("on" in e && (e.on("updateProperty", (o) => {
       switch (o) {
         case "usage":
         case "data":
@@ -1644,7 +1644,7 @@ class no extends q {
     s.dirty = !1;
     const { _gl: i } = this, { usage: o, data: a } = e;
     i.bindBuffer(s.target, s.native);
-    const n = o & be.static ? i.STATIC_DRAW : i.DYNAMIC_DRAW;
+    const n = o & ye.static ? i.STATIC_DRAW : i.DYNAMIC_DRAW;
     if (a)
       if (s.byteLength >= a.byteLength) {
         const l = a.length * a.BYTES_PER_ELEMENT;
@@ -1970,7 +1970,7 @@ class xo extends q {
     return e.uniforms = c, t.deleteShader(i), t.deleteShader(o), s;
   }
   _createGlShader(e, t) {
-    const s = this.gl, i = s.createShader(t);
+    const s = this._gl, i = s.createShader(t);
     if (!i)
       throw new Error("Failed to create shader");
     if (s.shaderSource(i, e), s.compileShader(i), !s.getShaderParameter(i, s.COMPILE_STATUS))
@@ -2144,8 +2144,8 @@ class Po extends q {
   boundBlendMode;
   blendModes;
   defaultState = new ze({ blend: !0 });
-  onUpdateContext(e) {
-    super.onUpdateContext(e), this.blendModes = wo(e);
+  _updateContext(e) {
+    super._updateContext(e), this.blendModes = wo(e);
   }
   toggle(e, t) {
     this._renderer.gl[t ? "enable" : "disable"](e);
@@ -2280,11 +2280,11 @@ ${Array.from({ length: e }, (l, c) => {
       })
     }, i = {
       instanceId: rt(),
-      usage: be.vertex,
+      usage: ye.vertex,
       data: new Float32Array()
     }, o = {
       instanceId: rt(),
-      usage: be.index,
+      usage: ye.index,
       data: new Uint32Array()
     }, a = {
       instanceId: rt(),
@@ -2326,15 +2326,15 @@ ${Array.from({ length: e }, (l, c) => {
     const d = [];
     let f = 0;
     for (let p = s.length, _ = { id: ++f }, g = [], v = /* @__PURE__ */ new Map(), w = 0, S = 0, O = 0; O < p; O++) {
-      const k = s[O].texture, me = O === p - 1;
+      const k = s[O].texture, ge = O === p - 1;
       if (!k || v.has(k)) {
-        if (!me)
+        if (!ge)
           continue;
       } else
         g.push(k), v.set(k, w++);
-      if (me || w >= i) {
+      if (ge || w >= i) {
         _.textures = g, _.textureLocationMap = v, w = 0, _.start = u;
-        for (let ge = S; ge <= O; ge++) {
+        for (let ve = S; ve <= O; ve++) {
           const {
             indices: Or,
             vertices: jt,
@@ -2344,8 +2344,8 @@ ${Array.from({ length: e }, (l, c) => {
             blendMode: Mr = lt.normal,
             clipOutsideUv: ei,
             roundPixels: ti
-          } = s[ge];
-          S < ge && _.blendMode !== Mr && (_.size = u - _.start, d.push(_), S = ge, _ = { id: ++f }, _.textures = g, _.start = u);
+          } = s[ve];
+          S < ve && _.blendMode !== Mr && (_.size = u - _.start, d.push(_), S = ve, _ = { id: ++f }, _.textures = g, _.start = u);
           const { width: Wt, height: qt } = Qs, ri = c / this._vertexSize, si = (Ir ? v.get(Ir) : 255) ?? 255, ii = ti ? 1 : 0, oi = ei ? 1 : 0;
           let xt, wt;
           for (let Yt = jt.length, Q = 0; Q < Yt; Q += 2) {
@@ -2365,8 +2365,8 @@ ${Array.from({ length: e }, (l, c) => {
     for (let p = d.length, _ = 0; _ < p; _++) {
       const g = d[_], { start: v = 0, textures: w, textureLocationMap: S } = g;
       for (let O = w.length, k = 0; k < O; k++) {
-        const me = w[k], ge = S.get(me);
-        ge !== void 0 && this._renderer.texture.bind(me, ge);
+        const ge = w[k], ve = S.get(ge);
+        ve !== void 0 && this._renderer.texture.bind(ge, ve);
       }
       this._state.blendMode = g.blendMode, this._renderer.state.bind(this._state), m.draw({
         size: g.size,
@@ -2827,8 +2827,8 @@ class Uo extends q {
   install(e) {
     super.install(e), e.texture = this;
   }
-  onUpdateContext(e) {
-    super.onUpdateContext(e), Object.keys(this._mapFormatToInternalFormat).length || (this._mapFormatToInternalFormat = Ao(e, this._renderer.extensions), this._mapFormatToType = Co(e), this._mapFormatToFormat = Ro(e)), this.maxTextureSize = e.getParameter(e.MAX_TEXTURE_SIZE), this.maxTextureImageUnits = e.getParameter(e.MAX_TEXTURE_IMAGE_UNITS);
+  _updateContext(e) {
+    super._updateContext(e), Object.keys(this._mapFormatToInternalFormat).length || (this._mapFormatToInternalFormat = Ao(e, this._renderer.extensions), this._mapFormatToType = Co(e), this._mapFormatToFormat = Ro(e)), this.maxTextureSize = e.getParameter(e.MAX_TEXTURE_SIZE), this.maxTextureImageUnits = e.getParameter(e.MAX_TEXTURE_IMAGE_UNITS);
     for (let t = 0; t < this.maxTextureImageUnits; t++)
       this.unbind(t);
   }
@@ -2836,7 +2836,7 @@ class Uo extends q {
     return this.glTextures.get(e.instanceId) || this._createGlTexture(e);
   }
   _createGlTexture(e) {
-    const t = this.gl, s = new To(t.createTexture());
+    const t = this._gl, s = new To(t.createTexture());
     if (t.bindTexture(s.target, s.native), s.type = this._mapFormatToType[e.format], s.internalFormat = this._mapFormatToInternalFormat[e.format], s.format = this._mapFormatToFormat[e.format], this.glTextures.set(e.instanceId, s), e.mipmap && (this._renderer.supports.nonPowOf2mipmaps || e.isPowerOfTwo)) {
       const i = Math.max(e.width, e.height);
       e.mipLevelCount = Math.floor(Math.log2(i)) + 1;
@@ -3162,14 +3162,17 @@ class Vo extends q {
       refCount: 0
     }
   };
-  onRenderTargetChange(e) {
+  _setup() {
+    super._setup(), this._renderer.renderTarget.on("updateRenderTarget", this._updateRenderTarget);
+  }
+  _updateRenderTarget = (e) => {
     if (e) {
       let t = this.current[e.instanceId];
       t || (t = this.current[e.instanceId] = {
         refCount: 0
       }), t.rect && t.refCount > 0 ? this.bind(t.rect) : this.bind(null);
     }
-  }
+  };
   push(e) {
     const t = this._gl;
     t.enable(t.SCISSOR_TEST);
@@ -3193,6 +3196,9 @@ class Vo extends q {
     } else
       t.disable(t.SCISSOR_TEST);
   }
+  destroy() {
+    super.destroy(), this._renderer.renderTarget.off("updateRenderTarget", this._updateRenderTarget);
+  }
 }
 const Ie = [];
 Ie[D.none] = {};
@@ -3259,8 +3265,8 @@ class $o extends q {
   };
   _passOpMap;
   _compareMap;
-  onUpdateContext(e) {
-    super.onUpdateContext(e), this._compareMap = {
+  _updateContext(e) {
+    super._updateContext(e), this._compareMap = {
       always: e.ALWAYS,
       never: e.NEVER,
       equal: e.EQUAL,
@@ -3280,10 +3286,13 @@ class $o extends q {
       "decrement-wrap": e.DECR_WRAP
     }, this.reset();
   }
+  _setup() {
+    super._setup(), this._renderer.renderTarget.on("updateRenderTarget", this._updateRenderTarget);
+  }
   reset() {
     this._cache.enabled = !1, this._cache.stencilMode = D.none, this._cache.refCount = 0;
   }
-  onRenderTargetChange(e) {
+  _updateRenderTarget = (e) => {
     if (e) {
       let t = this.current[e.instanceId];
       t || (t = this.current[e.instanceId] = {
@@ -3291,7 +3300,7 @@ class $o extends q {
         refCount: 0
       }), this.bind(t.stencilMode, t.refCount);
     }
-  }
+  };
   bind(e, t) {
     const s = this.current[this._renderer.renderTarget.current?.instanceId ?? -1], i = this._gl, o = Ie[e], a = this._cache;
     if (s.stencilMode = e, s.refCount = t, e === D.disabled) {
@@ -3300,6 +3309,9 @@ class $o extends q {
     }
     this._cache.enabled || (this._cache.enabled = !0, i.enable(i.STENCIL_TEST)), (e !== a.stencilMode || a.refCount !== t) && (a.stencilMode = e, a.refCount = t, o.stencilBack && (i.stencilFunc(this._compareMap[o.stencilBack.compare], t, 255), i.stencilOp(i.KEEP, i.KEEP, this._passOpMap[o.stencilBack.passOp])));
   }
+  destroy() {
+    super.destroy(), this._renderer.renderTarget.off("updateRenderTarget", this._updateRenderTarget);
+  }
 }
 class Ho extends q {
   current = new Fe(0, 0, 0, 0);
@@ -3333,15 +3345,13 @@ class jo extends q {
   _hasMRT = !0;
   _writeDepthTexture = !0;
   projectionMatrix = new ro();
-  onUpdateContext() {
-    if (this._hasMRT = !0, this._writeDepthTexture = !0, this._renderer.version === 1) {
-      const e = this._renderer.gl, t = this._renderer.extensions.drawBuffers, s = this._renderer.extensions.depthTexture;
+  _updateContext(e) {
+    if (super._updateContext(e), this._hasMRT = !0, this._writeDepthTexture = !0, this._renderer.version === 1) {
+      const t = this._renderer.extensions.drawBuffers, s = this._renderer.extensions.depthTexture;
       t ? e.drawBuffers = (i) => t.drawBuffersWEBGL(i) : (this._hasMRT = !1, e.drawBuffers = () => {
       }), s || (this._writeDepthTexture = !1);
-    } else {
-      const e = this._renderer.gl;
+    } else
       this._msaaSamples = e.getInternalformatParameter(e.RENDERBUFFER, e.RGBA8, e.SAMPLES);
-    }
   }
   bind(e, t) {
     const s = this._gl, i = this.current !== e;
@@ -3362,7 +3372,7 @@ class jo extends q {
         width: this._renderer.screen.width * this._renderer.pixelRatio,
         height: this._renderer.screen.height * this._renderer.pixelRatio
       });
-    i && (this._renderer.scissor.onRenderTargetChange(this.current), this._renderer.stencil.onRenderTargetChange(this.current));
+    i && this.emit("updateRenderTarget", this.current);
   }
   unbind() {
     return this.bind(null);
@@ -3541,7 +3551,7 @@ class Wo extends mr {
   constructor(e = $i(), t) {
     if (super(), !e)
       throw new Error("Failed to createHTMLCanvas");
-    Gi(e) ? this._setupContext(e, t) : (this.gl = e, this.version = Vi(this.gl) ? 2 : 1), this._setupBindPoints()._setupExtensions()._setupPolyfill()._setupSupports(), this._systems.forEach((s) => s.install(this)), this._systems.forEach((s) => s.onUpdateContext(this.gl));
+    Gi(e) ? this._setupContext(e, t) : (this.gl = e, this.version = Vi(this.gl) ? 2 : 1), this._setupBindPoints()._setupExtensions()._setupPolyfill()._setupSupports(), this._systems.forEach((s) => s.install(this)), this._systems.forEach((s) => s.emit("updateContext", this.gl)), this._systems.forEach((s) => s.emit("setup"));
   }
   _setupContext(e, t) {
     this.view = e;
@@ -3621,7 +3631,7 @@ class Wo extends mr {
     }, 0);
   }
   _contextRestored() {
-    this.contextLost = !1, this._setupExtensions(), this._systems.forEach((e) => e.onUpdateContext(this.gl));
+    this.contextLost = !1, this._setupExtensions(), this._systems.forEach((e) => e.emit("updateContext", this.gl));
   }
   resize(e, t, s = !0) {
     super.resize(e, t, s), this.viewport.bind({
@@ -3673,13 +3683,13 @@ var Yo = Object.defineProperty, bs = (r, e, t, s) => {
     (a = r[o]) && (i = a(e, t, i) || i);
   return i && Yo(e, t, i), i;
 };
-class We extends he {
+class We extends ue {
   constructor(e) {
     super(), this.setProperties(e);
   }
 }
 bs([
-  h({ fallback: be.index })
+  h({ fallback: ye.index })
 ], We.prototype, "usage");
 bs([
   h({ default: () => new Uint32Array() })
@@ -3689,7 +3699,7 @@ var Ko = Object.defineProperty, zt = (r, e, t, s) => {
     (a = r[o]) && (i = a(e, t, i) || i);
   return i && Ko(e, t, i), i;
 };
-class Ne extends he {
+class Ne extends ue {
   constructor(e = {}) {
     super(), this.setProperties(e);
   }
@@ -3714,29 +3724,29 @@ var Zo = Object.defineProperty, ys = (r, e, t, s) => {
     (a = r[o]) && (i = a(e, t, i) || i);
   return i && Zo(e, t, i), i;
 };
-class ye extends he {
+class xe extends ue {
   constructor(e) {
     super(), this.setProperties(e);
   }
 }
 ys([
-  h({ fallback: be.vertex })
-], ye.prototype, "usage");
+  h({ fallback: ye.vertex })
+], xe.prototype, "usage");
 ys([
   h({ default: () => new Float32Array() })
-], ye.prototype, "data");
+], xe.prototype, "data");
 var Jo = Object.defineProperty, ke = (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 && Jo(e, t, i), i;
 };
-class H extends he {
+class H extends ue {
   constructor(e) {
     super(), this.setProperties(e);
   }
 }
 ke([
-  h({ default: () => new ye() })
+  h({ default: () => new xe() })
 ], H.prototype, "buffer");
 ke([
   h({ fallback: "float32" })
@@ -3763,7 +3773,7 @@ class bc extends Ne {
       attributes: {
         position: new H({
           format: "float32x2",
-          buffer: new ye({
+          buffer: new xe({
             data: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
           })
         })
@@ -3786,7 +3796,7 @@ function ta() {
     tint: new Float32Array([1, 1, 1, 1])
   };
 }
-class E extends he {
+class E extends ue {
   static instance = new this();
   glProgram;
   constructor(e = {}) {
@@ -3931,13 +3941,13 @@ class P extends Ne {
       attributes: {
         position: new H({
           format: "float32x2",
-          buffer: new ye({
+          buffer: new xe({
             data: new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1])
           })
         }),
         uv: new H({
           format: "float32x2",
-          buffer: new ye({
+          buffer: new xe({
             data: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
           })
         })
@@ -3952,7 +3962,7 @@ class yc extends Ne {
   positionBuffer;
   uvBuffer;
   constructor(e) {
-    const t = new ye({ data: new Float32Array() }), s = new ye({ data: new Float32Array() });
+    const t = new xe({ data: new Float32Array() }), s = new xe({ data: new Float32Array() });
     super({
       ...e,
       attributes: {
@@ -3969,12 +3979,12 @@ class yc extends Ne {
     }), this.positionBuffer = t, this.uvBuffer = s;
   }
 }
-var oa = Object.defineProperty, aa = Object.getOwnPropertyDescriptor, ue = (r, e, t, s) => {
+var oa = Object.defineProperty, aa = Object.getOwnPropertyDescriptor, de = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? aa(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 && oa(e, t, i), i;
 };
-let X = class extends he {
+let X = class extends ue {
   get valid() {
     return !!(this.width && this.height);
   }
@@ -3985,31 +3995,31 @@ let X = class extends he {
     return this.valid ? (r.renderTarget.bind(this, e), !0) : !1;
   }
 };
-ue([
+de([
   h({ fallback: !1 })
 ], X.prototype, "isRoot", 2);
-ue([
+de([
   h({ fallback: 0 })
 ], X.prototype, "x", 2);
-ue([
+de([
   h({ fallback: 0 })
 ], X.prototype, "y", 2);
-ue([
+de([
   h({ fallback: 0 })
 ], X.prototype, "width", 2);
-ue([
+de([
   h({ fallback: 0 })
 ], X.prototype, "height", 2);
-ue([
+de([
   h({ fallback: 0 })
 ], X.prototype, "mipLevel", 2);
-ue([
+de([
   h({ fallback: !1 })
 ], X.prototype, "msaa", 2);
-ue([
+de([
   h({ default: () => [new x()] })
 ], X.prototype, "colorTextures", 2);
-X = ue([
+X = de([
   b("RenderTarget")
 ], X);
 var na = Object.defineProperty, N = (r, e, t, s) => {
@@ -4017,7 +4027,7 @@ var na = Object.defineProperty, N = (r, e, t, s) => {
     (a = r[o]) && (i = a(e, t, i) || i);
   return i && na(e, t, i), i;
 };
-class x extends he {
+class x extends ue {
   static get EMPTY() {
     return new this({ width: 1, height: 1 });
   }
@@ -4132,7 +4142,7 @@ N([
 N([
   h({ fallback: !1 })
 ], x.prototype, "isPowerOfTwo");
-class la extends he {
+class la extends ue {
   frames;
   frameIndex = 0;
   get currentFrame() {
@@ -4209,7 +4219,7 @@ class Gt extends x {
     if (!o)
       throw new Error("Failed to parse linear gradient, get canvas context is null.");
     const { angle: a = 0, stops: n } = e, l = t, c = s, u = l / 2, d = c / 2, f = (a + 90) * Math.PI / 180, m = Math.sin(f), p = -Math.cos(f), _ = Math.abs(l * Math.sin(f)) + Math.abs(c * Math.cos(f)), g = u - m * (_ / 2), v = d - p * (_ / 2), w = u + m * (_ / 2), S = d + p * (_ / 2), O = o.createLinearGradient(g, v, w, S);
-    for (const me of n) O.addColorStop(me.offset, me.color);
+    for (const ge of n) O.addColorStop(ge.offset, ge.color);
     o.fillStyle = O, o.fillRect(0, 0, l, c);
     const k = o.getImageData(0, 0, i.width, i.height);
     return {
@@ -4543,7 +4553,7 @@ class _a extends Pe {
     return { internalKey: `____${e}` };
   }
 }
-var ma = Object.defineProperty, ga = Object.getOwnPropertyDescriptor, de = (r, e, t, s) => {
+var ma = Object.defineProperty, ga = Object.getOwnPropertyDescriptor, fe = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? ga(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 && ma(e, t, i), i;
@@ -4909,31 +4919,31 @@ let M = class extends Pe {
     return s?.forEach((n) => a.appendChild(this.parse(n))), a;
   }
 };
-de([
+fe([
   h({ fallback: is() })
 ], M.prototype, "id", 2);
-de([
+fe([
   h({ fallback: is() })
 ], M.prototype, "name", 2);
-de([
+fe([
   h({ fallback: "inherit" })
 ], M.prototype, "processMode", 2);
-de([
+fe([
   h({ fallback: "default" })
 ], M.prototype, "processSortMode", 2);
-de([
+fe([
   h({ fallback: "inherit" })
 ], M.prototype, "renderMode", 2);
-de([
+fe([
   h({ fallback: "inherit" })
 ], M.prototype, "inputMode", 2);
-de([
+fe([
   h({ fallback: "default" })
 ], M.prototype, "internalMode", 2);
-de([
+fe([
   h({ internal: !0 })
 ], M.prototype, "mask", 2);
-M = de([
+M = fe([
   b("Node")
 ], M);
 var ba = Object.defineProperty, ya = Object.getOwnPropertyDescriptor, qe = (r, e, t, s) => {
@@ -5322,6 +5332,7 @@ let T = class extends Y {
           break;
       }
   }
+  _rect = { x: 0, y: 0, width: 0, height: 0 };
   _processParent() {
     const r = this._tree?.renderStack;
     if (!r)
@@ -5331,10 +5342,33 @@ let T = class extends Y {
       return;
     const t = e.calls;
     let s, i;
-    t.forEach((o, a) => {
-      const n = o.renderable;
-      (n.equal(this._parent) || n.parent?.equal(this._parent)) && (n.needsRender && (this.needsRender = !0), s = s ?? a, i = a);
-    }), !(s === void 0 || i === void 0) && (this.needsRender ? (t.splice(i + 1, 0, r.createCall(this)), t.splice(s, 0, r.createCall(this))) : t.splice(s, i + 1, r.createCall(this)));
+    const o = {
+      minX: Number.MAX_SAFE_INTEGER,
+      minY: Number.MAX_SAFE_INTEGER,
+      maxX: 0,
+      maxY: 0
+    };
+    if (t.forEach((n, l) => {
+      const c = n.renderable;
+      if (c.equal(this._parent) || c.parent?.equal(this._parent)) {
+        if (c.needsRender && (this.needsRender = !0), "getRect" in c) {
+          const u = c.getRect(), d = {
+            x: [u.x, u.x + u.width],
+            y: [u.y, u.y + u.height]
+          };
+          o.minX = Math.min(...d.x), o.maxX = Math.max(...d.x), o.minY = Math.min(...d.y), o.maxY = Math.max(...d.y);
+        }
+        s = s ?? l, i = l;
+      }
+    }), s === void 0 || i === void 0)
+      return;
+    const a = {
+      x: o.minX,
+      y: o.minY,
+      width: o.maxX - o.minX,
+      height: o.maxY - o.minY
+    };
+    a.width === Number.MAX_SAFE_INTEGER || a.height === Number.MAX_SAFE_INTEGER || (!this.needsRender && (this._rect.width !== a.width || this._rect.height !== a.height) && (this.needsRender = !0), this.needsRender ? (t.splice(i + 1, 0, r.createCall(this)), t.splice(s, 0, r.createCall(this))) : t.splice(s, i + 1, r.createCall(this)), this._rect = a);
   }
   _processChildren() {
     this.children.length && (super.emit("process"), this._tree?.renderStack.push(this));
@@ -5370,9 +5404,8 @@ let T = class extends Y {
     }
   }
   _renderParentOrChildren(r) {
-    const e = this._tree?.getCurrentViewport();
-    let t = { x: 0, y: 0, width: 0, height: 0 };
-    this._parent && "getRect" in this._parent ? t = this._parent.getRect() : e && (t.width = e.width, t.height = e.height), this.needsRender ? this._renderId % 2 === 0 ? (this._renderViewport = e, t.width && t.height && this.viewport1.resize(t.width, t.height), this.viewport1.canvasTransform.identity().translate(-t.x, -t.y), this.viewport1.renderStart(r)) : e && e.equal(this.viewport1) && this._renderViewport && !this._renderViewport.equal(this.viewport1) && (this.apply(r, this.viewport1, {
+    const e = this._tree?.getCurrentViewport(), t = this._rect;
+    this.needsRender ? (this._renderId % 2 === 0 ? (this._renderViewport = e, t.width && t.height && this.viewport1.resize(t.width, t.height), this.viewport1.canvasTransform.identity().translate(-t.x, -t.y), this.viewport1.renderStart(r)) : e && e.equal(this.viewport1) && this._renderViewport && !this._renderViewport.equal(this.viewport1) && (this.apply(r, this.viewport1, {
       redraw: !0,
       target: this._effectMode === "parent" ? this._parent ?? void 0 : void 0
     }), this._renderViewport.activate(r), this._renderViewport = void 0, r.batch2D.render({
@@ -5389,7 +5422,7 @@ let T = class extends Y {
       uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
       indices: new Uint32Array([0, 1, 2, 0, 2, 3]),
       texture: this.viewport1.texture
-    }), this.needsRender = !1) : r.batch2D.render({
+    }), this.needsRender = !1), this._renderId++) : r.batch2D.render({
       vertices: new Float32Array([
         t.x,
         t.y,
@@ -5408,10 +5441,10 @@ let T = class extends Y {
   _render(r) {
     switch (this._effectMode) {
       case "before":
-        this._renderBefore(r);
+        this._renderBefore(r), this._renderId++;
         break;
       case "transition":
-        this._renderTransition(r);
+        this._renderTransition(r), this._renderId++;
         break;
       case "parent":
       case "children":
@@ -5419,7 +5452,6 @@ let T = class extends Y {
         this._renderParentOrChildren(r);
         break;
     }
-    this.needsRender && this._renderId++;
   }
   apply(r, e, t) {
     this.material && (t?.redraw ? e.redraw(r, () => {
@@ -5553,7 +5585,7 @@ var Ia = Object.defineProperty, Ee = (r, e, t, s) => {
     (a = r[o]) && (i = a(e, t, i) || i);
   return i && Ia(e, t, i), i;
 };
-class fe extends _r {
+class pe extends _r {
   input = new Zi();
   renderStack = new Ra();
   root = new or().setTree(this);
@@ -5602,28 +5634,28 @@ class fe extends _r {
 }
 Ee([
   h({ alias: "root.msaa" })
-], fe.prototype, "msaa");
+], pe.prototype, "msaa");
 Ee([
   h({ fallback: !1 })
-], fe.prototype, "pixelate");
+], pe.prototype, "pixelate");
 Ee([
   h({ fallback: !1 })
-], fe.prototype, "roundPixels");
+], pe.prototype, "roundPixels");
 Ee([
   h()
-], fe.prototype, "backgroundColor");
+], pe.prototype, "backgroundColor");
 Ee([
   h({ internal: !0, fallback: !1 })
-], fe.prototype, "debug");
+], pe.prototype, "debug");
 Ee([
   h({ internal: !0, fallback: !1 })
-], fe.prototype, "processPaused");
+], pe.prototype, "processPaused");
 Ee([
   h({ internal: !0, default: () => yi })
-], fe.prototype, "fonts");
+], pe.prototype, "fonts");
 Ee([
   h({ internal: !0, default: () => new le() })
-], fe.prototype, "timeline");
+], pe.prototype, "timeline");
 var Ma = Object.getOwnPropertyDescriptor, Na = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? Ma(e, t) : e, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (i = a(i) || i);
@@ -5990,7 +6022,7 @@ function za(r) {
     }
   });
 }
-var Es = Object.defineProperty, Ga = Object.getOwnPropertyDescriptor, Va = (r, e, t) => e in r ? Es(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, pe = (r, e, t, s) => {
+var Es = Object.defineProperty, Ga = Object.getOwnPropertyDescriptor, Va = (r, e, t) => e in r ? Es(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, _e = (r, e, t, s) => {
   for (var i = s > 1 ? void 0 : s ? Ga(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 && Es(e, t, i), i;
@@ -6052,31 +6084,31 @@ void main(void) {
 }`
   }
 }));
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "saturation", 2);
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "contrast", 2);
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "brightness", 2);
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "red", 2);
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "green", 2);
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "blue", 2);
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "alpha", 2);
-pe([
+_e([
   h({ fallback: 1 })
 ], W.prototype, "gamma", 2);
-W = pe([
+W = _e([
   b("ColorAdjustEffect")
 ], W);
 var Ss = Object.defineProperty, Ha = Object.getOwnPropertyDescriptor, Xa = (r, e, t) => e in r ? Ss(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, Ts = (r, e, t, s) => {
@@ -7624,13 +7656,13 @@ var Hs = Object.defineProperty, kn = Object.getOwnPropertyDescriptor, Un = (r, e
     (a = r[o]) && (i = (s ? a(e, t, i) : a(i)) || i);
   return s && i && Hs(e, t, i), i;
 }, Bn = (r, e, t) => Un(r, e + "", t);
-let xe = class extends T {
+let we = class extends T {
   constructor(r, e = []) {
     super(), this.setProperties(r).append(e);
   }
   apply(r, e) {
     e.redraw(r, () => {
-      P.draw(r, xe.material, {
+      P.draw(r, we.material, {
         sampler: 0,
         uCenter: [e.width / 2, e.height / 2],
         uInnerRadius: this.innerRadius,
@@ -7641,7 +7673,7 @@ let xe = class extends T {
     });
   }
 };
-Bn(xe, "material", new E({
+Bn(we, "material", new E({
   gl: {
     vertex: `attribute vec2 position;
 attribute vec2 uv;
@@ -7729,19 +7761,19 @@ void main() {
 }));
 mt([
   h()
-], xe.prototype, "center", 2);
+], we.prototype, "center", 2);
 mt([
   h({ fallback: 20 })
-], xe.prototype, "innerRadius", 2);
+], we.prototype, "innerRadius", 2);
 mt([
   h({ fallback: -1 })
-], xe.prototype, "radius", 2);
+], we.prototype, "radius", 2);
 mt([
   h({ fallback: 0.1 })
-], xe.prototype, "strength", 2);
-xe = mt([
+], we.prototype, "strength", 2);
+we = mt([
   b("ZoomBlurEffect")
-], xe);
+], we);
 function Mt(r, e) {
   const { x: t, y: s, width: i, height: o } = e;
   let a = !1;
@@ -8127,7 +8159,7 @@ bt([
 bt([
   h()
 ], Qe.prototype, "paths");
-class ar extends he {
+class ar extends ue {
   constructor(e) {
     super(), this.setProperties(e);
   }
@@ -8141,7 +8173,7 @@ const Wr = {
 };
 for (const r in Wr)
   ts(ar, r, { fallback: Wr[r] });
-var jn = Object.defineProperty, _e = (r, e, t, s) => {
+var jn = Object.defineProperty, me = (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 && jn(e, t, i), i;
@@ -8319,31 +8351,31 @@ class ie extends Pe {
     }
   }
 }
-_e([
+me([
   h({ fallback: !0 })
 ], ie.prototype, "enabled");
-_e([
+me([
   h({ fallback: () => [] })
 ], ie.prototype, "content");
-_e([
+me([
   h({ alias: "parent.style.json" })
 ], ie.prototype, "style");
-_e([
+me([
   h()
 ], ie.prototype, "effects");
-_e([
+me([
   h()
 ], ie.prototype, "fill");
-_e([
+me([
   h()
 ], ie.prototype, "outline");
-_e([
+me([
   h({ alias: "base.measureDom" })
 ], ie.prototype, "measureDom");
-_e([
+me([
   h({ alias: "base.fonts" })
 ], ie.prototype, "fonts");
-_e([
+me([
   h({ fallback: "auto" })
 ], ie.prototype, "drawMode");
 var Wn = Object.getOwnPropertyDescriptor, qn = (r, e, t, s) => {
@@ -9382,7 +9414,7 @@ dt = Ht([
     duration: 2e3
   })
 ], dt);
-class Ar extends we {
+class Ar extends he {
   static _instance;
   static get instance() {
     return this._instance || (this._instance = new Ar()), this._instance;
@@ -9413,7 +9445,7 @@ class Ar extends we {
     return this.paused = !this.paused, this.refreshPaused(), this.paused;
   }
 }
-class Nt extends we {
+class Nt extends he {
   static PADDING = 0.1;
   _source = null;
   _audio = null;
@@ -9580,7 +9612,7 @@ class pl {
     return new Nt();
   }
 }
-class Zs extends we {
+class Zs extends he {
   constructor(e, t) {
     super(), this._input = e, this._output = t;
   }
@@ -9680,7 +9712,7 @@ class Ae extends Zs {
       2,
       cs ? Math.max(8e3, Math.min(96e3, e.sampleRate)) : 44100
     ), s = e.createDynamicsCompressor(), i = e.createAnalyser();
-    i.connect(s), s.connect(e.destination), super(i, s), this._context = e, this._offlineContext = t, this._compressor = s, this._analyser = i, this._locked = e.state === "suspended" && (ve || Ui), pr && (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(e.destination), super(i, s), this._context = e, this._offlineContext = t, this._compressor = s, this._analyser = i, this._locked = e.state === "suspended" && (be || Ui), pr && (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)
@@ -9722,7 +9754,7 @@ class Ae extends Zs {
     e.setValueAtTime ? e.setValueAtTime(t, this._context.currentTime) : e.value = t;
   }
 }
-class gl extends we {
+class gl extends he {
   _audio = null;
   _sourceNode = null;
   _gain = null;
@@ -10564,7 +10596,7 @@ function ec(r) {
   return e;
 }
 const Rt = "WeakRef" in globalThis;
-class tc extends we {
+class tc extends he {
   defaultHandler = (e) => e;
   _handlers = /* @__PURE__ */ new Map();
   _handleing = /* @__PURE__ */ new Map();
@@ -10671,7 +10703,7 @@ const Le = {
   preserveDrawingBuffer: !1,
   powerPreference: "default"
 };
-class Cr extends fe {
+class Cr extends pe {
   renderer;
   get view() {
     return this.renderer.view;
@@ -10876,7 +10908,7 @@ export {
   Pc as AudioSpectrum,
   ft as AudioWaveform,
   nr as BaseElement2D,
-  be as BufferUsage,
+  ye as BufferUsage,
   It as Camera2D,
   fa as CanvasContext,
   Ge as CanvasItem,
@@ -10972,7 +11004,7 @@ export {
   Ji as RefCounted,
   X as RenderTarget,
   mr as Renderer,
-  he as Resource,
+  ue as Resource,
   ns as SUPPORTS_AUDIO_CONTEXT,
   Ui as SUPPORTS_CLICK_EVENTS,
   fc as SUPPORTS_CREATE_IMAGE_BITMAP,
@@ -10981,13 +11013,13 @@ export {
   cs as SUPPORTS_OFFLINE_AUDIO_CONTEXT,
   et as SUPPORTS_POINTER_EVENTS,
   Ni as SUPPORTS_RESIZE_OBSERVER,
-  ve as SUPPORTS_TOUCH_EVENTS,
+  be as SUPPORTS_TOUCH_EVENTS,
   Ii as SUPPORTS_WEBGL2,
   ls as SUPPORTS_WEBKIT_AUDIO_CONTEXT,
   Bi as SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT,
   Li as SUPPORTS_WEB_AUDIO,
   ki as SUPPORTS_WHEEL_EVENTS,
-  fe as SceneTree,
+  pe as SceneTree,
   Yl as TextLoader,
   x as Texture2D,
   Kl as TextureLoader,
@@ -11007,7 +11039,7 @@ export {
   vc as Vector3,
   to as Vector4,
   H as VertexAttribute,
-  ye as VertexBuffer,
+  xe as VertexBuffer,
   hr as Video2D,
   Zl as VideoLoader,
   da as VideoTexture,
@@ -11018,7 +11050,7 @@ export {
   gl as WebSound,
   Yi as WheelInputEvent,
   or as Window,
-  xe as ZoomBlurEffect,
+  we as ZoomBlurEffect,
   Be as alignMap,
   $ as assets,
   es as boxSizingMap,

package/dist/scene/main/Effect.d.ts

@@ -1,4 +1,4 @@
-import type { GlRenderer } from '../../core';
+import type { GlRenderer, RectangleLike } from '../../core';
 import type { Material } from '../resources';
 import type { Node } from './Node';
 import type { SceneTree } from './SceneTree';
@@ -42,6 +42,7 @@ export declare class Effect extends TimelineNode {
     protected _treeExit(oldTree: SceneTree): void;
     protected _onProcessing(): void;
     protected _onNodeProcessed(node: Node): void;
+    protected _rect: RectangleLike;
     protected _processParent(): void;
     protected _processChildren(): void;
     _onProcess(delta?: number): void;

package/package.json

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