modern-canvas 0.21.1 → 0.21.2

package/dist/index.js

@@ -6339,7 +6339,6 @@ var Y = class extends C {
 	_instance;
 	_container;
 	_texture;
-	_node;
 	_dirty = !1;
 	_scheduled = !1;
 	constructor(e) {
@@ -6401,26 +6400,26 @@ var Y = class extends C {
 				width: e,
 				height: t
 			}), this._instance.setOption(this._toOption(), !0), !this._texture) {
-				let n = this._container.querySelector("canvas");
-				if (!n) return;
+				let e = this._container.querySelector("canvas");
+				if (!e) return;
 				this._texture = new rr({
-					source: n,
+					source: e,
 					pixelRatio: 1
 				});
-				let r = z.parse({
-					is: "TextureRect2D",
-					style: {
-						left: 0,
-						top: 0,
-						width: e,
-						height: t
-					}
-				}, "Element2D");
-				r.texture = this._texture, this._node = r, this._parent.appendChild(r, "back");
 			}
-			this._node?.size.set(e, t), this._texture?.requestUpdate("source"), this._parent.requestDraw();
+			this._texture.requestUpdate("source"), this._parent.requestDraw();
 		}
 	}
+	draw() {
+		let e = this._texture;
+		if (!e?.isValid()) return;
+		let { width: t, height: n } = this._parent.size, r = this._parent.context;
+		this._parent.shape.draw(!0), r.fillStyle = e;
+		let { a: i, c: a, tx: o, b: s, d: c, ty: l } = new v().scale(1 / t, 1 / n), u, d;
+		r.fill({ transformUv: (e, t) => {
+			u = e[t], d = e[t + 1], e[t] = i * u + a * d + o, e[t + 1] = s * u + c * d + l;
+		} });
+	}
 	_toOption() {
 		let { type: e, categories: t } = this, n = e === "pie" || e === "doughnut", r = e === "bar", i = this.grouping === "stacked" || this.grouping === "percentStacked", a = {
 			title: this.title ? {
@@ -6465,7 +6464,7 @@ var Y = class extends C {
 		})), a;
 	}
 	_teardown() {
-		this._instance?.dispose(), this._instance = void 0, this._container = void 0, this._texture = void 0, this._node &&= (this._parent.removeChild(this._node), this._node.destroy(), void 0);
+		this._instance?.dispose(), this._instance = void 0, this._container = void 0, this._texture = void 0;
 	}
 	_destroy() {
 		this._teardown();
@@ -7532,7 +7531,7 @@ var Z = {
 		return new yt(this._getPointArray().map((e) => (e.x += t.x, e.y += t.y, e)), this.globalRotation);
 	}
 	_draw() {
-		super._draw(), this._background.isValid() && (this._shape.draw(!this._background.fillWithShape), this._background.draw()), this._fill.isValid() && (this._shape.draw(), this._fill.draw()), this._outline.isValid() && (this._shape.draw(), this._outline.draw()), this._foreground.isValid() && (this._shape.draw(!this._foreground.fillWithShape), this._foreground.draw()), this._text.isValid() && this._text.draw(), this._drawContent();
+		super._draw(), this._background.isValid() && (this._shape.draw(!this._background.fillWithShape), this._background.draw()), this._fill.isValid() && (this._shape.draw(), this._fill.draw()), this._outline.isValid() && (this._shape.draw(), this._outline.draw()), this._foreground.isValid() && (this._shape.draw(!this._foreground.fillWithShape), this._foreground.draw()), this._text.isValid() && this._text.draw(), this._chart.isValid() && this._chart.draw(), this._drawContent();
 	}
 	_drawContent() {}
 	input(e, t) {
@@ -7586,7 +7585,7 @@ var Z = {
 ya = O([x("Element2D"), D("design:paramtypes", [typeof (ma = typeof Partial < "u" && Partial) == "function" ? ma : Object, Array])], ya);
 //#endregion
 //#region src/scene/2d/TextureRect2D.ts
-var ba, xa = class extends ya {
+var ba = class extends ya {
 	texture;
 	constructor(e, t = []) {
 		super(), this.setProperties(e).append(t);
@@ -7600,11 +7599,7 @@ var ba, xa = class extends ya {
 			} });
 		}
 	}
-};
-xa = O([x("TextureRect2D"), D("design:paramtypes", [typeof (ba = typeof Partial < "u" && Partial) == "function" ? ba : Object, Array])], xa);
-//#endregion
-//#region src/scene/2d/Lottie2D.ts
-var Sa, Ca = class extends xa {
+}, xa, Sa = class extends ba {
 	texture = new rr();
 	animation;
 	_lastTime = NaN;
@@ -7635,10 +7630,10 @@ var Sa, Ca = class extends xa {
 		this.currentTime !== this._lastTime && (this._lastTime = this.currentTime, this.animation?.goToAndStop(this.currentTime, !1), this.texture.requestUpdate("source"), this.requestDraw()), super._process(e);
 	}
 };
-O([_({ fallback: "" }), D("design:type", String)], Ca.prototype, "src", void 0), Ca = O([x("Lottie2D"), D("design:paramtypes", [typeof (Sa = typeof Partial < "u" && Partial) == "function" ? Sa : Object, Array])], Ca);
+O([_({ fallback: "" }), D("design:type", String)], Sa.prototype, "src", void 0), Sa = O([x("Lottie2D"), D("design:paramtypes", [typeof (xa = typeof Partial < "u" && Partial) == "function" ? xa : Object, Array])], Sa);
 //#endregion
 //#region src/scene/2d/TransformRect2D.ts
-var wa = class extends ya {
+var Ca = class extends ya {
 	constructor(e, t = []) {
 		super(), this.setProperties(e).append(t);
 	}
@@ -7661,10 +7656,10 @@ var wa = class extends ya {
 		this.context.rect(0, 0, e, t), this.context.strokeStyle = "#00FF00", this.context.stroke(), this._drawCircle(0, 0), this._drawCircle(e, t), this._drawCircle(0, t), this._drawEllipse(0, t / 2), this._drawCircle(e, 0), this._drawEllipse(e, t / 2);
 	}
 };
-O([_({ fallback: 6 }), D("design:type", Number)], wa.prototype, "handleSize", void 0);
+O([_({ fallback: 6 }), D("design:type", Number)], Ca.prototype, "handleSize", void 0);
 //#endregion
 //#region src/scene/2d/Video2D.ts
-var Ta, Ea = class extends xa {
+var wa, Ta = class extends ba {
 	get videoDuration() {
 		return (this.texture?.duration ?? 0) * 1e3;
 	}
@@ -7704,11 +7699,11 @@ var Ta, Ea = class extends xa {
 		super._process(e), this._updateVideoCurrentTime();
 	}
 };
-O([_({ fallback: "" }), D("design:type", String)], Ea.prototype, "src", void 0), Ea = O([x("Video2D"), D("design:paramtypes", [typeof (Ta = typeof Partial < "u" && Partial) == "function" ? Ta : Object, Array])], Ea);
+O([_({ fallback: "" }), D("design:type", String)], Ta.prototype, "src", void 0), Ta = O([x("Video2D"), D("design:paramtypes", [typeof (wa = typeof Partial < "u" && Partial) == "function" ? wa : Object, Array])], Ta);
 //#endregion
 //#region src/scene/animation/Animation.ts
-var Da, Oa = (e) => e, ka = Na(.25, .1, .25, 1), Aa = Na(.42, 0, 1, 1), ja = Na(0, 0, .58, 1), Ma = Na(.42, 0, .58, 1);
-function Na(e, t, n, r) {
+var Ea, Da = (e) => e, Oa = Ma(.25, .1, .25, 1), ka = Ma(.42, 0, 1, 1), Aa = Ma(0, 0, .58, 1), ja = Ma(.42, 0, .58, 1);
+function Ma(e, t, n, r) {
 	let i = 1e-6, a = 3 * e - 3 * n + 1, o = 3 * n - 6 * e, s = 3 * e, c = 3 * t - 3 * r + 1, l = 3 * r - 6 * t, u = 3 * t, d = (e) => (3 * a * e + 2 * o) * e + s, f = (e) => ((a * e + o) * e + s) * e, p = (e) => ((c * e + l) * e + u) * e;
 	function m(e) {
 		let t = e, n, r;
@@ -7728,13 +7723,13 @@ function Na(e, t, n, r) {
 	}
 	return (e) => p(m(e));
 }
-var Pa = {
-	linear: Oa,
-	ease: ka,
-	easeIn: Aa,
-	easeOut: ja,
-	easeInOut: Ma
-}, Fa = class extends B {
+var Na = {
+	linear: Da,
+	ease: Oa,
+	easeIn: ka,
+	easeOut: Aa,
+	easeInOut: ja
+}, Pa = class extends B {
 	_keyframes = [];
 	_isFirstUpdatePosition = !1;
 	_cachedProps = new t();
@@ -7817,10 +7812,10 @@ var Pa = {
 		});
 	}
 	_parseEasing(e) {
-		if (!e) return Pa.linear;
-		if (e in Pa) return Pa[e];
+		if (!e) return Na.linear;
+		if (e in Na) return Na[e];
 		let t = e.replace(/cubic-bezier\((.+)\)/, "$1").split(",").map((e) => Number(e));
-		return Na(t[0], t[1], t[2], t[3]);
+		return Ma(t[0], t[1], t[2], t[3]);
 	}
 	_parseKeyframes(e, t) {
 		let n, r = this._keyframes;
@@ -7898,14 +7893,14 @@ var Pa = {
 		});
 	}
 };
-O([_({ fallback: "parent" }), D("design:type", Object)], Fa.prototype, "effectMode", void 0), O([_({ default: () => [] }), D("design:type", Array)], Fa.prototype, "keyframes", void 0), O([_(), D("design:type", Object)], Fa.prototype, "easing", void 0), Fa = O([x("Animation", {
+O([_({ fallback: "parent" }), D("design:type", Object)], Pa.prototype, "effectMode", void 0), O([_({ default: () => [] }), D("design:type", Array)], Pa.prototype, "keyframes", void 0), O([_(), D("design:type", Object)], Pa.prototype, "easing", void 0), Pa = O([x("Animation", {
 	renderMode: "disabled",
 	processSortMode: "parent-before",
 	duration: 2e3
-}), D("design:paramtypes", [typeof (Da = typeof Partial < "u" && Partial) == "function" ? Da : Object, Array])], Fa);
+}), D("design:paramtypes", [typeof (Ea = typeof Partial < "u" && Partial) == "function" ? Ea : Object, Array])], Pa);
 //#endregion
 //#region src/scene/audio/html/HTMLAudioContext.ts
-var Ia = class t extends e {
+var Fa = class t extends e {
 	static _instance;
 	static get instance() {
 		return this._instance ||= new t(), this._instance;
@@ -7935,7 +7930,7 @@ var Ia = class t extends e {
 	togglePause() {
 		return this.paused = !this.paused, this.refreshPaused(), this.paused;
 	}
-}, La = class t extends e {
+}, Ia = class t extends e {
 	static PADDING = .1;
 	_source = null;
 	_audio = null;
@@ -8062,7 +8057,7 @@ var Ia = class t extends e {
 		let e = this._source;
 		e && (e.onended = null, e.onplay = null, e.onpause = null, this._stop()), this._source = null, this._playbackRate = 1, this._volume = 1, this._loop = !1, this._end = 0, this._start = 0, this._duration = 0, this._playing = !1, this._pausedReal = !1, this._paused = !1, this._muted = !1, this._audio &&= (this._audio.context.off("refresh", this.refresh), this._audio.context.off("refreshPaused", this.refreshPaused), null);
 	}
-}, Ra = class {
+}, La = class {
 	parent;
 	source = new globalThis.Audio();
 	_src = "";
@@ -8079,7 +8074,7 @@ var Ia = class t extends e {
 		return !!this.source && this.source.readyState === 4;
 	}
 	get context() {
-		return Ia.instance;
+		return Fa.instance;
 	}
 	constructor(e) {
 		this.parent = e;
@@ -8090,9 +8085,9 @@ var Ia = class t extends e {
 		});
 	}
 	createSound() {
-		return new La();
+		return new Ia();
 	}
-}, za = class extends e {
+}, Ra = class extends e {
 	_input;
 	_output;
 	_processers = [];
@@ -8114,7 +8109,7 @@ var Ia = class t extends e {
 	get destination() {
 		return this._input;
 	}
-}, Ba = class {
+}, za = class {
 	destination;
 	source;
 	constructor(e, t = null) {
@@ -8129,21 +8124,21 @@ var Ia = class t extends e {
 };
 //#endregion
 //#region src/scene/audio/web/WebAudioContext.ts
-function Va() {
+function Ba() {
 	if (ze) return new AudioContext();
 	if (Be) {
 		let e = globalThis.webkitAudioContext;
 		return new e();
 	} else throw Error("Failed to createAudioContext");
 }
-function Ha(e, t, n) {
+function Va(e, t, n) {
 	if (Ve) return new OfflineAudioContext(e, t, n);
 	if (He) {
 		let r = globalThis.webkitOfflineAudioContext;
 		return new r(e, t, n);
 	} else throw Error("Failed to createOfflineAudioContext");
 }
-var Ua = class e extends za {
+var Ha = class e extends Ra {
 	static _instance;
 	static get instance() {
 		return this._instance ||= new e(), this._instance;
@@ -8184,7 +8179,7 @@ var Ua = class e extends za {
 	_compressor;
 	_analyser;
 	constructor() {
-		let e = Va(), t = Ha(1, 2, Ve ? Math.max(8e3, Math.min(96e3, e.sampleRate)) : 44100), n = e.createDynamicsCompressor(), r = e.createAnalyser();
+		let e = Ba(), t = Va(1, 2, Ve ? Math.max(8e3, Math.min(96e3, e.sampleRate)) : 44100), n = e.createDynamicsCompressor(), r = e.createAnalyser();
 		r.connect(n), n.connect(e.destination), super(r, n), this._context = e, this._offlineContext = t, this._compressor = n, this._analyser = r, this._locked = e.state === "suspended" && (Ie || Le), We && (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() {
@@ -8225,7 +8220,7 @@ var Ua = class e extends za {
 	setParamValue(e, t) {
 		e.setValueAtTime ? e.setValueAtTime(t, this._context.currentTime) : e.value = t;
 	}
-}, Wa = class extends e {
+}, Ua = class extends e {
 	_audio = null;
 	_sourceNode = null;
 	_gain = null;
@@ -8358,7 +8353,7 @@ var Ua = class e extends za {
 	destroy() {
 		super.destroy(), this._stop(), this._gain?.disconnect(), this._gain = null, this._audio?.context.off("refresh", this.refresh), this._audio?.context.off("refreshPaused", this.refreshPaused), this._audio = null, this._processors.forEach((e) => e.disconnect()), this._processors.length = 0, this._end = 0, this._playbackRate = 1, this._volume = 1, this._loop = !1, this._elapsed = 0, this._duration = 0, this._paused = !1, this._muted = !1, this._pausedReal = !1;
 	}
-}, Ga = class extends za {
+}, Wa = class extends Ra {
 	parent;
 	_sourceBuffer;
 	_sourceNode;
@@ -8366,7 +8361,7 @@ var Ua = class e extends za {
 	gain;
 	analyser;
 	get context() {
-		return Ua.instance;
+		return Ha.instance;
 	}
 	get isPlayable() {
 		return !!this._sourceNode.buffer;
@@ -8381,8 +8376,8 @@ var Ua = class e extends za {
 		this._sourceNode.buffer = e;
 	}
 	constructor(e) {
-		let t = Ua.audioContext, n = t.createBufferSource(), r = t.createGain(), i = t.createAnalyser();
-		n.connect(i), i.connect(r), r.connect(Ua.instance.destination), super(i, r), this.parent = e, this._sourceNode = n, this.gain = r, this.analyser = i;
+		let t = Ha.audioContext, n = t.createBufferSource(), r = t.createGain(), i = t.createAnalyser();
+		n.connect(i), i.connect(r), r.connect(Ha.instance.destination), super(i, r), this.parent = e, this._sourceNode = n, this.gain = r, this.analyser = i;
 	}
 	async load() {
 		return this._sourceLoad ||= new Promise((e) => {
@@ -8395,7 +8390,7 @@ var Ua = class e extends za {
 		});
 	}
 	_decode(e) {
-		return Promise.resolve(e instanceof AudioBuffer ? e : Ua.decode(e)).then((e) => (this.parent.isLoaded = !0, this.buffer = e, e));
+		return Promise.resolve(e instanceof AudioBuffer ? e : Ha.decode(e)).then((e) => (this.parent.isLoaded = !0, this.buffer = e, e));
 	}
 	cloneSource() {
 		let e = this.context, t = this._sourceNode, n = e.audioContext.createBufferSource(), r = e.audioContext.createGain();
@@ -8405,15 +8400,15 @@ var Ua = class e extends za {
 		};
 	}
 	createSound() {
-		return new Wa();
+		return new Ua();
 	}
-}, Ka, qa = class extends B {
+}, Ga, Ka = class extends B {
 	static {
-		Ka = this;
+		Ga = this;
 	}
 	static _soundPool = [];
 	_sounds = [];
-	_platformAudio = Ue ? new Ga(this) : new Ra(this);
+	_platformAudio = Ue ? new Wa(this) : new La(this);
 	get platformAudio() {
 		return this._platformAudio;
 	}
@@ -8506,7 +8501,7 @@ var Ua = class e extends za {
 		this._sounds.length = 0;
 	}
 	_createSound() {
-		return Ka._soundPool.length > 0 ? Ka._soundPool.pop().init(this._platformAudio) : this._platformAudio.createSound().init(this._platformAudio);
+		return Ga._soundPool.length > 0 ? Ga._soundPool.pop().init(this._platformAudio) : this._platformAudio.createSound().init(this._platformAudio);
 	}
 	refresh() {
 		for (let e = this._sounds.length, t = 0; t < e; t++) this._sounds[t].refresh();
@@ -8522,7 +8517,7 @@ var Ua = class e extends za {
 		this._recycleSound(e);
 	};
 	_recycleSound(e) {
-		e.destroy(), Ka._soundPool.includes(e) || Ka._soundPool.push(e);
+		e.destroy(), Ga._soundPool.includes(e) || Ga._soundPool.push(e);
 	}
 	_prevTime = 0;
 	_timer = 0;
@@ -8538,10 +8533,10 @@ var Ua = class e extends za {
 		}, 100);
 	}
 };
-qa = Ka = O([x("Audio"), D("design:paramtypes", [Object])], qa);
+Ka = Ga = O([x("Audio"), D("design:paramtypes", [Object])], Ka);
 //#endregion
 //#region src/scene/audio/AudioSpectrum.ts
-var Ja = class extends Pr {}, Ya, Xa = class extends ya {
+var qa = class extends Pr {}, Ja, Ya = class extends ya {
 	_audioBuffer;
 	_src = (() => {
 		let e = tt();
@@ -8565,7 +8560,7 @@ var Ja = class extends Pr {}, Ya, Xa = class extends ya {
 		}
 	}
 	async _loadSrc(e) {
-		await globalThis.fetch(e).then((e) => e.arrayBuffer()).then((e) => Ua.decode(e)).then((e) => {
+		await globalThis.fetch(e).then((e) => e.arrayBuffer()).then((e) => Ha.decode(e)).then((e) => {
 			this._audioBuffer = e, this.syncTexture(!0);
 		});
 	}
@@ -8600,12 +8595,12 @@ var Ja = class extends Pr {}, Ya, Xa = class extends ya {
 		this.syncTexture(), super._process(e);
 	}
 };
-O([_(), D("design:type", Object)], Xa.prototype, "src", void 0), O([_({ fallback: 0 }), D("design:type", Number)], Xa.prototype, "gap", void 0), O([_({ fallback: "#000000" }), D("design:type", String)], Xa.prototype, "color", void 0), Xa = O([x("AudioWaveform"), D("design:paramtypes", [typeof (Ya = typeof Partial < "u" && Partial) == "function" ? Ya : Object])], Xa);
+O([_(), D("design:type", Object)], Ya.prototype, "src", void 0), O([_({ fallback: 0 }), D("design:type", Number)], Ya.prototype, "gap", void 0), O([_({ fallback: "#000000" }), D("design:type", String)], Ya.prototype, "color", void 0), Ya = O([x("AudioWaveform"), D("design:paramtypes", [typeof (Ja = typeof Partial < "u" && Partial) == "function" ? Ja : Object])], Ya);
 //#endregion
 //#region src/scene/transitions/KawaseTransition.ts
-var Za, Qa = class extends Mr {
+var Xa, Za = class extends Mr {
 	static {
-		Za = this;
+		Xa = this;
 	}
 	blur = 10;
 	quality = 10;
@@ -8624,7 +8619,7 @@ var Za, Qa = class extends Mr {
 		let d = 1 / s, f = 1 / c, p = [], m, h = o - 1;
 		for (let e = 0; e < h; e++) m = u[e] + .5, p[0] = m * d, p[1] = m * f, l.push({ offset: p });
 		m = u[h] + .5, p[0] = m * d, p[1] = m * f, l.push({ offset: p }), l.forEach((t) => {
-			I.draw(e, Za.material, {
+			I.draw(e, Xa.material, {
 				sampler: r,
 				progress: i,
 				...t
@@ -8632,31 +8627,31 @@ var Za, Qa = class extends Mr {
 		});
 	}
 };
-Qa = Za = O([x("KawaseTransition")], Qa);
+Za = Xa = O([x("KawaseTransition")], Za);
 //#endregion
 //#region src/scene/transitions/LeftEraseTransition.ts
-var $a, eo = class extends Mr {
+var Qa, $a = class extends Mr {
 	static {
-		$a = this;
+		Qa = this;
 	}
 	static material = new F({ gl: {
 		vertex: "attribute vec2 position;\nattribute vec2 uv;\nvarying vec2 vUv;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n  vUv = uv;\n}",
 		fragment: "precision highp float;\nvarying vec2 vUv;\nuniform float progress;\nuniform sampler2D previous;\nuniform sampler2D next;\n\nfloat easeInOutQuint(float t) {\n    return t < 0.5 ? 16.0*t*t*t*t*t : 1.0+16.0*(--t)*t*t*t*t;\n}\n\nvoid main() {\n  vec4 src1Color = texture2D(previous, vUv);\n  vec4 src2Color = texture2D(next, vUv);\n  float mProgress = 1.0 - progress;\n  float mixPercent = 0.0;\n  if (vUv.x <= mProgress) {\n    mixPercent = 1.0;\n  }\n  gl_FragColor = mix(src2Color, src1Color, mixPercent);\n}"
 	} });
 	apply(e) {
-		I.draw(e, $a.material, {
+		I.draw(e, Qa.material, {
 			previous: 0,
 			next: 1,
 			progress: this.currentTimeProgress
 		});
 	}
 };
-eo = $a = O([x("LeftEraseTransition")], eo);
+$a = Qa = O([x("LeftEraseTransition")], $a);
 //#endregion
 //#region src/scene/transitions/TiltShiftTransition.ts
-var to, no = class extends Mr {
+var eo, to = class extends Mr {
 	static {
-		to = this;
+		eo = this;
 	}
 	blur = 100;
 	gradientBlur = 600;
@@ -8668,7 +8663,7 @@ var to, no = class extends Mr {
 		let n = this.currentTimeProgress, r, i;
 		n < .5 ? (r = 0, i = (.5 - n) / .5) : (r = 1, i = (n - .5) / .5);
 		let a = t.width, o = t.height, s = [0, o / 2], c = [600, o / 2], l = [a, o], u = c[0] - s[0], d = c[1] - s[1], f = Math.sqrt(u * u + d * d);
-		I.draw(e, to.material, {
+		I.draw(e, eo.material, {
 			sampler: r,
 			progress: i,
 			blur: this.blur,
@@ -8677,7 +8672,7 @@ var to, no = class extends Mr {
 			end: c,
 			delta: [u / f, d / f],
 			texSize: l
-		}), I.draw(e, to.material, {
+		}), I.draw(e, eo.material, {
 			sampler: r,
 			progress: i,
 			blur: this.blur,
@@ -8689,12 +8684,12 @@ var to, no = class extends Mr {
 		});
 	}
 };
-no = to = O([x("TiltShiftTransition")], no);
+to = eo = O([x("TiltShiftTransition")], to);
 //#endregion
 //#region src/scene/transitions/TwistTransition.ts
-var ro, io = class extends Mr {
+var no, ro = class extends Mr {
 	static {
-		ro = this;
+		no = this;
 	}
 	radius;
 	angle = 4;
@@ -8708,7 +8703,7 @@ var ro, io = class extends Mr {
 		let n = this.currentTimeProgress, r, i;
 		n < .5 ? (r = 0, i = (.5 - n) / .5) : (r = 1, i = (n - .5) / .5);
 		let a = t.width, o = t.height;
-		I.draw(e, ro.material, {
+		I.draw(e, no.material, {
 			sampler: r,
 			progress: i,
 			filterArea: [
@@ -8724,10 +8719,10 @@ var ro, io = class extends Mr {
 		});
 	}
 };
-io = ro = O([x("TwistTransition")], io);
+ro = no = O([x("TwistTransition")], ro);
 //#endregion
 //#region src/asset/loaders/GifLoader.ts
-var ao = class extends Rn {
+var io = class extends Rn {
 	install(e) {
 		let t = async (t) => {
 			let { decodeFrames: n } = await import("modern-gif");
@@ -8744,14 +8739,14 @@ var ao = class extends Rn {
 			e.register(n, t);
 		}), e.gif = this, this;
 	}
-}, oo = class extends Rn {
+}, ao = class extends Rn {
 	install(e) {
 		let t = async (e) => JSON.parse(await e.text());
 		return this.load = (n) => typeof n == "string" ? e.loadBy(n).then(t) : t(n), ["application/json"].forEach((n) => {
 			e.register(n, t);
 		}), e.json = this, this;
 	}
-}, so = class extends Rn {
+}, oo = class extends Rn {
 	install(e) {
 		return this.load = async (t, n) => (await import("lottie-web").then((e) => e.default)).loadAnimation({
 			container: null,
@@ -8762,12 +8757,12 @@ var ao = class extends Rn {
 			animationData: await e.loadBy(t, () => e.fetch(t).then((e) => e.json()))
 		}), e.lottie = this, this;
 	}
-}, co = class extends Rn {
+}, so = class extends Rn {
 	install(e) {
 		let t = async (e) => e.text();
 		return this.load = (n) => typeof n == "string" ? e.loadBy(n).then(t) : t(n), e.text = this, this;
 	}
-}, lo = class extends Rn {
+}, co = class extends Rn {
 	install(e) {
 		let t = (t) => e.fetchImageBitmap(t, { premultiplyAlpha: "premultiply" }).then((e) => new R({
 			source: e,
@@ -8791,11 +8786,11 @@ var ao = class extends Rn {
 			e.register(n, t);
 		}), e.texture = this, this;
 	}
-}, uo = class extends Rn {
+}, lo = class extends Rn {
 	install(e) {
 		return this.load = (t) => e.awaitBy(() => new cr(t).load()), e.video = this, this;
 	}
-}, fo = Object.entries({
+}, uo = Object.entries({
 	"font/woff": ["woff"],
 	"font/ttf": ["ttf"],
 	"font/otf": ["otf"],
@@ -8811,31 +8806,31 @@ var ao = class extends Rn {
 	"image/webp": ["webp"],
 	"application/json": ["json"]
 });
-function po(e) {
-	for (let [t, n] of fo) if (n.includes(e)) return t;
+function fo(e) {
+	for (let [t, n] of uo) if (n.includes(e)) return t;
 }
-function mo(e) {
+function po(e) {
 	let t;
 	if (e.startsWith("data:")) t = e.match(/^data:(.+?);/)?.[1];
 	else if (e.startsWith("http")) {
 		let n = e.split(/[#?]/)[0].split(".").pop()?.trim();
-		n && (t = po(n));
+		n && (t = fo(n));
 	}
 	return t;
 }
 //#endregion
 //#region src/asset/Assets.ts
-var ho = "WeakRef" in globalThis, go = class extends e {
+var mo = "WeakRef" in globalThis, ho = class extends e {
 	defaultHandler = (e) => e;
 	_handlers = /* @__PURE__ */ new Map();
 	_handleing = /* @__PURE__ */ new Map();
 	_handled = /* @__PURE__ */ new Map();
-	_gc = ho ? new FinalizationRegistry((e) => {
+	_gc = mo ? new FinalizationRegistry((e) => {
 		let t = this.get(e);
 		t && "destroy" in t && t.destroy(), this._handled.delete(e);
 	}) : void 0;
 	constructor() {
-		super(), ho || S.on(this.gc.bind(this), { sort: 2 });
+		super(), mo || S.on(this.gc.bind(this), { sort: 2 });
 	}
 	use(e) {
 		return e.install(this), this;
@@ -8884,11 +8879,11 @@ var ho = "WeakRef" in globalThis, go = class extends e {
 	}
 	get(e) {
 		let t = this._handled.get(e);
-		return ho && t instanceof WeakRef && (t = t.deref(), t || this._handleing.delete(e)), t;
+		return mo && t instanceof WeakRef && (t = t.deref(), t || this._handleing.delete(e)), t;
 	}
 	set(e, t) {
 		let n = t;
-		ho && typeof t == "object" && (this._gc.register(t, e), n = new WeakRef(t)), this._handled.set(e, n);
+		mo && typeof t == "object" && (this._gc.register(t, e), n = new WeakRef(t)), this._handled.set(e, n);
 	}
 	async awaitBy(e) {
 		let t = e(), n = c();
@@ -8903,7 +8898,7 @@ var ho = "WeakRef" in globalThis, go = class extends e {
 		return this._handleing.set(e, r), r;
 	}
 	async load(e, t) {
-		let n = await this.loadBy(e), r = mo(e);
+		let n = await this.loadBy(e), r = po(e);
 		return r === void 0 && (r = n.type?.split(";")[0] ?? void 0), ((r ? this._handlers.get(r) : void 0) ?? this.defaultHandler)(n, t);
 	}
 	async waitUntilLoad() {
@@ -8917,14 +8912,14 @@ var ho = "WeakRef" in globalThis, go = class extends e {
 			n && "destroy" in n && n.destroy();
 		}), this._handled.clear();
 	}
-}, $ = new go().use(new zn()).use(new ao()).use(new oo()).use(new so()).use(new co()).use(new lo()).use(new uo()), _o = {
+}, $ = new ho().use(new zn()).use(new io()).use(new ao()).use(new oo()).use(new so()).use(new co()).use(new lo()), go = {
 	alpha: !0,
 	stencil: !0,
 	antialias: !1,
 	premultipliedAlpha: !0,
 	preserveDrawingBuffer: !1,
 	powerPreference: "default"
-}, vo = class extends Ar {
+}, _o = class extends Ar {
 	renderer;
 	get view() {
 		return this.renderer.view;
@@ -8957,12 +8952,12 @@ var ho = "WeakRef" in globalThis, go = class extends e {
 	constructor(e = {}) {
 		let { view: t, width: n, height: r, pixelRatio: i = Ke, autoResize: a, data: o } = e;
 		super(), this.renderer = new Ln(t, {
-			alpha: _o.alpha ?? e.alpha,
-			stencil: _o.stencil ?? e.stencil,
-			antialias: _o.antialias ?? e.antialias,
-			premultipliedAlpha: _o.premultipliedAlpha ?? e.premultipliedAlpha,
-			preserveDrawingBuffer: _o.preserveDrawingBuffer ?? e.preserveDrawingBuffer,
-			powerPreference: _o.powerPreference ?? e.powerPreference
+			alpha: go.alpha ?? e.alpha,
+			stencil: go.stencil ?? e.stencil,
+			antialias: go.antialias ?? e.antialias,
+			premultipliedAlpha: go.premultipliedAlpha ?? e.premultipliedAlpha,
+			preserveDrawingBuffer: go.preserveDrawingBuffer ?? e.preserveDrawingBuffer,
+			powerPreference: go.powerPreference ?? e.powerPreference
 		}), this._setupInput(), this.pixelRatio = i, a ? !t && this.renderer.view && (this.renderer.view.style.width = "100%", this.renderer.view.style.height = "100%") : this.resize(n || this.gl.drawingBufferWidth || this.view?.clientWidth || 200, r || this.gl.drawingBufferHeight || this.view?.clientHeight || 200, !t), this.setProperties(e), o && this.root.append(o);
 	}
 	_updateProperty(e, t, n) {
@@ -9045,22 +9040,22 @@ var ho = "WeakRef" in globalThis, go = class extends e {
 		super._destroy(), this._resizeObserver?.disconnect(), this.renderer.destroy();
 	}
 };
-O([_({ fallback: !1 }), D("design:type", Boolean)], vo.prototype, "autoResize", void 0), O([_({ fallback: !1 }), D("design:type", Boolean)], vo.prototype, "autoStart", void 0);
+O([_({ fallback: !1 }), D("design:type", Boolean)], _o.prototype, "autoResize", void 0), O([_({ fallback: !1 }), D("design:type", Boolean)], _o.prototype, "autoStart", void 0);
 //#endregion
 //#region src/render.ts
-var yo, bo = [], xo = !1;
-function So() {
-	return yo ??= new vo({
+var vo, yo = [], bo = !1;
+function xo() {
+	return vo ??= new _o({
 		pixelRatio: 1,
 		width: 1,
 		height: 1,
 		preserveDrawingBuffer: !0
 	});
 }
-async function Co(e = 100) {
-	if (!xo) {
-		for (xo = !0; bo.length;) {
-			let t = bo.shift();
+async function So(e = 100) {
+	if (!bo) {
+		for (bo = !0; yo.length;) {
+			let t = yo.shift();
 			if (t) try {
 				await t();
 			} catch (e) {
@@ -9068,11 +9063,11 @@ async function Co(e = 100) {
 			}
 			else await new Promise((t) => setTimeout(t, e));
 		}
-		xo = !1;
+		bo = !1;
 	}
 }
-async function wo(e) {
-	let { debug: t = !1, fonts: n, width: r, height: i, data: a, keyframes: o = [], onBefore: s, onKeyframe: c, ...l } = e, u = Math.floor(r), d = Math.floor(i), f = So();
+async function Co(e) {
+	let { debug: t = !1, fonts: n, width: r, height: i, data: a, keyframes: o = [], onBefore: s, onKeyframe: c, ...l } = e, u = Math.floor(r), d = Math.floor(i), f = xo();
 	if (f.resetProperties(), f.setProperties(l), f.debug = t, f.fonts = n, f.timeline.currentTime = 0, f.resize(u, d, !0), f.root.removeChildren(!0), f.root.append(a), await s?.(f), await f.waitAndRender(), o.length) {
 		let e = o.length, t = o[e - 1];
 		for (let n = 0; n < e; n++) {
@@ -9090,15 +9085,15 @@ async function wo(e) {
 		toCanvas2D: () => f.toCanvas2D(new ImageData(p, u, d))
 	};
 }
-async function To(e) {
+async function wo(e) {
 	return new Promise((t) => {
-		bo.push(async () => t(await wo(e).then((e) => e.toCanvas2D()))), Co();
+		yo.push(async () => t(await Co(e).then((e) => e.toCanvas2D()))), So();
 	});
 }
-async function Eo(e) {
+async function To(e) {
 	return new Promise((t) => {
-		bo.push(async () => t(await wo(e).then((e) => e.pixels))), Co();
+		yo.push(async () => t(await Co(e).then((e) => e.pixels))), So();
 	});
 }
 //#endregion
-export { mt as Aabb2D, nr as AnimatedTexture, Fa as Animation, go as Assets, qa as Audio, za as AudioPipeline, Ba as AudioProcessor, Ja as AudioSpectrum, Xa as AudioWaveform, k as BufferUsage, Ir as Camera2D, ur as CanvasContext, Cr as CanvasItem, rr as CanvasTexture, T as Color, U as ColorAdjustEffect, Yr as ColorFilterEffect, vt as ColorMatrix, $r as ColorOverlayEffect, ni as ColorRemoveEffect, oi as ColorReplaceEffect, ir as ColorTexture, C as CoreObject, ht as DEG_TO_RAD, Ke as DEVICE_PIXEL_RATIO, W as DrawboardEffect, gi as DropShadowEffect, H as Effect, $n as EffectMaterial, ya as Element2D, Hi as Element2DBackground, Y as Element2DChart, Ki as Element2DConnection, J as Element2DFill, Ji as Element2DForeground, Yi as Element2DOutline, Xi as Element2DShadow, Zi as Element2DShape, Qi as Element2DStyle, na as Element2DTable, X as Element2DText, yi as EmbossEffect, vo as Engine, pa as Flexbox, zn as FontLoader, pi as GaussianBlurEffect, Wn as Geometry, ao as GifLoader, on as GlBatch2DSystem, tn as GlBlendMode, Ct as GlBuffer, jt as GlBufferSystem, St as GlBufferTarget, un as GlMaskSystem, Ut as GlProgram, mn as GlRenderTarget, hn as GlRenderTargetSystem, Qt as GlShaderSystem, rn as GlState, an as GlStateSystem, fn as GlStencilSystem, A as GlSystem, pn as GlViewportSystem, G as GlitchEffect, K as GodrayEffect, ar as GradientTexture, Ra as HTMLAudio, Ia as HTMLAudioContext, La as HTMLSound, We as IN_BROWSER, Ge as IN_MAC_OS, Vn as IndexBuffer, ft as Input, ot as InputEvent, oo as JsonLoader, Oi as KawaseBlurEffect, Qa as KawaseTransition, st as KeyboardInputEvent, eo as LeftEraseTransition, Rn as Loader, Ca as Lottie2D, so as LottieLoader, xt as MainLoop, ji as MaskEffect, F as Material, fr as Meta, ct as MouseInputEvent, z as Node, Pr as Node2D, yt as Obb2D, q as OutlineEffect, ye as PI, be as PI_2, Li as PixelateEffect, or as PixelsTexture, lt as PointerInputEvent, bt as Projection2D, qn as QuadGeometry, I as QuadUvGeometry, gt as RAD_TO_DEG, pt as RefCounted, L as RenderTarget, Tt as Renderer, w as Resource, ze as SUPPORTS_AUDIO_CONTEXT, Le as SUPPORTS_CLICK_EVENTS, Re as SUPPORTS_CREATE_IMAGE_BITMAP, je as SUPPORTS_IMAGE_BITMAP, Fe as SUPPORTS_MOUSE_EVENTS, Ve as SUPPORTS_OFFLINE_AUDIO_CONTEXT, Ne as SUPPORTS_POINTER_EVENTS, Me as SUPPORTS_RESIZE_OBSERVER, Ie as SUPPORTS_TOUCH_EVENTS, Ae as SUPPORTS_WEBGL2, Be as SUPPORTS_WEBKIT_AUDIO_CONTEXT, He as SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, Ue as SUPPORTS_WEB_AUDIO, Pe as SUPPORTS_WHEEL_EVENTS, Ar as SceneTree, co as TextLoader, R as Texture2D, lo as TextureLoader, xa as TextureRect2D, S as Ticker, no as TiltShiftTransition, Or as Timeline, B as TimelineNode, wa as TransformRect2D, Mr as Transition, io as TwistTransition, Dt as UniformGroup, tr as UvGeometry, er as UvMaterial, P as VertexAttribute, N as VertexBuffer, Ea as Video2D, uo as VideoLoader, cr as VideoTexture, V as Viewport, lr as ViewportTexture, Ga as WebAudio, Ua as WebAudioContext, Ln as WebGLRenderer, Wa as WebSound, ut as WheelInputEvent, kr as Window, Bi as ZoomBlurEffect, Q as alignMap, $ as assets, Lr as axisDir, fa as boxSizingMap, _t as clamp, Di as clampFrag, tt as createHTMLCanvas, At as createIdFromString, _e as createNode, rt as crossOrigin, Na as cubicBezier, x as customNode, ge as customNodes, _o as defaultOptions, nt as determineCrossOrigin, oa as directionMap, aa as displayMap, ka as ease, Aa as easeIn, Ma as easeInOut, ja as easeOut, Z as edgeMap, sa as flexDirectionMap, ca as flexWrapMap, Ei as frag, et as getCanvasFactory, Te as getDefaultCssPropertyValue, So as getRenderEngine, ia as gutterMap, at as instanceId, Xe as isCanvasElement, qe as isElementNode, Ye as isImageElement, xe as isPow2, Je as isVideoElement, Ze as isWebgl2, la as justifyMap, E as lerp, Oa as linear, cn as log2, nn as mapGlBlendModes, sn as nextPow2, ve as nextTick, ua as overflowMap, Ur as parseCssFilter, De as parseCssFunctions, Ee as parseCssProperty, Wr as parseCssTransformOrigin, da as positionTypeMap, To as render, Eo as renderPixels, xr as resetBatchPool, Rr as routeConnection, $e as setCanvasFactory, dn as stencilModeMap, Pa as timingFunctions };
+export { mt as Aabb2D, nr as AnimatedTexture, Pa as Animation, ho as Assets, Ka as Audio, Ra as AudioPipeline, za as AudioProcessor, qa as AudioSpectrum, Ya as AudioWaveform, k as BufferUsage, Ir as Camera2D, ur as CanvasContext, Cr as CanvasItem, rr as CanvasTexture, T as Color, U as ColorAdjustEffect, Yr as ColorFilterEffect, vt as ColorMatrix, $r as ColorOverlayEffect, ni as ColorRemoveEffect, oi as ColorReplaceEffect, ir as ColorTexture, C as CoreObject, ht as DEG_TO_RAD, Ke as DEVICE_PIXEL_RATIO, W as DrawboardEffect, gi as DropShadowEffect, H as Effect, $n as EffectMaterial, ya as Element2D, Hi as Element2DBackground, Y as Element2DChart, Ki as Element2DConnection, J as Element2DFill, Ji as Element2DForeground, Yi as Element2DOutline, Xi as Element2DShadow, Zi as Element2DShape, Qi as Element2DStyle, na as Element2DTable, X as Element2DText, yi as EmbossEffect, _o as Engine, pa as Flexbox, zn as FontLoader, pi as GaussianBlurEffect, Wn as Geometry, io as GifLoader, on as GlBatch2DSystem, tn as GlBlendMode, Ct as GlBuffer, jt as GlBufferSystem, St as GlBufferTarget, un as GlMaskSystem, Ut as GlProgram, mn as GlRenderTarget, hn as GlRenderTargetSystem, Qt as GlShaderSystem, rn as GlState, an as GlStateSystem, fn as GlStencilSystem, A as GlSystem, pn as GlViewportSystem, G as GlitchEffect, K as GodrayEffect, ar as GradientTexture, La as HTMLAudio, Fa as HTMLAudioContext, Ia as HTMLSound, We as IN_BROWSER, Ge as IN_MAC_OS, Vn as IndexBuffer, ft as Input, ot as InputEvent, ao as JsonLoader, Oi as KawaseBlurEffect, Za as KawaseTransition, st as KeyboardInputEvent, $a as LeftEraseTransition, Rn as Loader, Sa as Lottie2D, oo as LottieLoader, xt as MainLoop, ji as MaskEffect, F as Material, fr as Meta, ct as MouseInputEvent, z as Node, Pr as Node2D, yt as Obb2D, q as OutlineEffect, ye as PI, be as PI_2, Li as PixelateEffect, or as PixelsTexture, lt as PointerInputEvent, bt as Projection2D, qn as QuadGeometry, I as QuadUvGeometry, gt as RAD_TO_DEG, pt as RefCounted, L as RenderTarget, Tt as Renderer, w as Resource, ze as SUPPORTS_AUDIO_CONTEXT, Le as SUPPORTS_CLICK_EVENTS, Re as SUPPORTS_CREATE_IMAGE_BITMAP, je as SUPPORTS_IMAGE_BITMAP, Fe as SUPPORTS_MOUSE_EVENTS, Ve as SUPPORTS_OFFLINE_AUDIO_CONTEXT, Ne as SUPPORTS_POINTER_EVENTS, Me as SUPPORTS_RESIZE_OBSERVER, Ie as SUPPORTS_TOUCH_EVENTS, Ae as SUPPORTS_WEBGL2, Be as SUPPORTS_WEBKIT_AUDIO_CONTEXT, He as SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, Ue as SUPPORTS_WEB_AUDIO, Pe as SUPPORTS_WHEEL_EVENTS, Ar as SceneTree, so as TextLoader, R as Texture2D, co as TextureLoader, ba as TextureRect2D, S as Ticker, to as TiltShiftTransition, Or as Timeline, B as TimelineNode, Ca as TransformRect2D, Mr as Transition, ro as TwistTransition, Dt as UniformGroup, tr as UvGeometry, er as UvMaterial, P as VertexAttribute, N as VertexBuffer, Ta as Video2D, lo as VideoLoader, cr as VideoTexture, V as Viewport, lr as ViewportTexture, Wa as WebAudio, Ha as WebAudioContext, Ln as WebGLRenderer, Ua as WebSound, ut as WheelInputEvent, kr as Window, Bi as ZoomBlurEffect, Q as alignMap, $ as assets, Lr as axisDir, fa as boxSizingMap, _t as clamp, Di as clampFrag, tt as createHTMLCanvas, At as createIdFromString, _e as createNode, rt as crossOrigin, Ma as cubicBezier, x as customNode, ge as customNodes, go as defaultOptions, nt as determineCrossOrigin, oa as directionMap, aa as displayMap, Oa as ease, ka as easeIn, ja as easeInOut, Aa as easeOut, Z as edgeMap, sa as flexDirectionMap, ca as flexWrapMap, Ei as frag, et as getCanvasFactory, Te as getDefaultCssPropertyValue, xo as getRenderEngine, ia as gutterMap, at as instanceId, Xe as isCanvasElement, qe as isElementNode, Ye as isImageElement, xe as isPow2, Je as isVideoElement, Ze as isWebgl2, la as justifyMap, E as lerp, Da as linear, cn as log2, nn as mapGlBlendModes, sn as nextPow2, ve as nextTick, ua as overflowMap, Ur as parseCssFilter, De as parseCssFunctions, Ee as parseCssProperty, Wr as parseCssTransformOrigin, da as positionTypeMap, wo as render, To as renderPixels, xr as resetBatchPool, Rr as routeConnection, $e as setCanvasFactory, dn as stencilModeMap, Na as timingFunctions };

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

@@ -1,14 +1,13 @@
 import type { Chart, NormalizedChart } from 'modern-idoc';
-import type { TextureRect2D } from '../TextureRect2D';
 import type { Element2D } from './Element2D';
 import { CoreObject } from '../../../core';
 import { CanvasTexture } from '../../resources';
 /**
- * Renders an idoc chart with echarts (optional dependency): echarts draws into an
- * offscreen canvas which is uploaded as a CanvasTexture on a TextureRect2D child in
- * the parent's `back` layer (same "library → canvas → texture" pattern as Lottie2D).
- * Updates are microtask-coalesced. Without echarts installed, charts render nothing
- * (a one-time warning is logged).
+ * Renders an idoc chart with echarts (optional dependency). echarts draws into an
+ * offscreen canvas, which is uploaded as a CanvasTexture and drawn directly onto the
+ * parent element in `draw()` — the same way fill/background paint a texture, so the
+ * chart is the element's own content (no extra child node). Updates are
+ * microtask-coalesced. Without echarts installed, charts render nothing (warned once).
  */
 export declare class Element2DChart extends CoreObject implements NormalizedChart {
     protected _parent: Element2D;
@@ -24,7 +23,6 @@ export declare class Element2DChart extends CoreObject implements NormalizedChar
     protected _instance?: any;
     protected _container?: HTMLElement;
     protected _texture?: CanvasTexture;
-    protected _node?: TextureRect2D;
     protected _dirty: boolean;
     protected _scheduled: boolean;
     constructor(_parent: Element2D);
@@ -32,7 +30,10 @@ export declare class Element2DChart extends CoreObject implements NormalizedChar
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     protected _requestUpdate(): void;
     isValid(): boolean;
+    /** Render with echarts into the offscreen canvas backing `_texture`. */
     update(): Promise<void>;
+    /** Paint the echarts texture onto the element, like fill/background do. */
+    draw(): void;
     /** Map the normalized idoc chart to an echarts option. */
     protected _toOption(): Record<string, any>;
     protected _teardown(): void;

package/package.json

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