modern-canvas 0.23.2 → 0.23.3

package/dist/index.js

@@ -6695,6 +6695,7 @@ function Oi(e, t, n, r, i = {}) {
 //#region src/scene/2d/element/Element2DForeground.ts
 var ki = class extends J {
 	_sourceCanvas;
+	_sourceImage;
 	setProperties(e) {
 		return super._setProperties(d(e) ? void 0 : g(e));
 	}
@@ -6709,24 +6710,38 @@ var ki = class extends J {
 		}
 	}
 	async loadTexture() {
-		await super.loadTexture(), this._applyEffects();
+		await super.loadTexture(), await this._applyEffects();
 	}
-	_applyEffects() {
-		if (!this.effects?.length || this.animatedTexture || !this.texture) return;
-		let e = this.texture.source;
-		if (e && e.width > 0 && e.height > 0) {
-			let t = Math.max(1, Math.round(e.width)), n = Math.max(1, Math.round(e.height)), r = S(t, n), i = r?.getContext("2d");
-			r && i && (i.drawImage(e, 0, 0, t, n), this._sourceCanvas = r);
+	async _applyEffects() {
+		if (!this.effects?.length || this.animatedTexture || !this.texture) {
+			this._sourceCanvas = void 0, this._sourceImage = void 0;
+			return;
 		}
-		let t = this._sourceCanvas;
-		if (!t) return;
-		let n = t.width, r = t.height, i = Oi(t, this.effects, n, r);
+		let e = await this._resolveSourceCanvas();
+		if (!e) return;
+		let t = e.width, n = e.height, r = Oi(e, this.effects, t, n);
 		this.texture = new er({
-			source: i,
-			width: n,
-			height: r
+			source: r,
+			width: t,
+			height: n
 		});
 	}
+	async _resolveSourceCanvas() {
+		this._sourceImage !== this.image && (this._sourceCanvas = void 0, this._sourceImage = this.image);
+		let e = this.texture?.source;
+		if (e && e.width > 0 && e.height > 0) return this._sourceCanvas = this._snapshot(e);
+		if (this._sourceCanvas) return this._sourceCanvas;
+		if (d(this.image) || this.image === "viewport") return;
+		let t = this.image, n = await $.loadBy(`${t}#mc-foreground-source`, async () => {
+			let e = await $.fetchImageBitmap(t), n = this._snapshot(e);
+			return Ne && e instanceof ImageBitmap && e.close(), n;
+		});
+		return this._sourceImage === t && (this._sourceCanvas = n), n;
+	}
+	_snapshot(e) {
+		let t = Math.max(1, Math.round(e.width)), n = Math.max(1, Math.round(e.height)), r = S(t, n), i = r?.getContext("2d");
+		if (!(!r || !i)) return i.drawImage(e, 0, 0, t, n), r;
+	}
 };
 O([_(), D("design:type", Object)], ki.prototype, "fillWithShape", void 0), O([_(), D("design:type", Array)], ki.prototype, "effects", void 0);
 //#endregion

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

@@ -1,19 +1,36 @@
 import type { Foreground, NormalizedEffect, NormalizedForeground } from 'modern-idoc';
 import { Element2DFill } from './Element2DFill';
+type Snapshotable = CanvasImageSource & {
+    width: number;
+    height: number;
+};
 export declare class Element2DForeground extends Element2DFill implements NormalizedForeground {
     fillWithShape: NormalizedForeground['fillWithShape'];
     /** 图片效果叠层（filling/strokes/offset...）；加载后烘焙到运行时 canvas，不持久化 */
     effects?: NormalizedEffect[];
     /**
-     * 原图的 CPU 副本（HTMLCanvas），在纹理刚加载、source 仍存活时拍下。
-     * 用于烘焙 effects：纹理的 ImageBitmap source 上传 GPU 后可能被
-     * `close()`（detached，width/height 归零），此时直接 drawImage 会抛
-     * InvalidStateError，故始终从这份不会失效的副本烘焙。
+     * 原图的 CPU 副本（HTMLCanvas），供烘焙 effects 使用。
+     *
+     * 不能依赖 `this.texture.source`：那是张 ImageBitmap，经 GPU 上传 / 资源 GC 后
+     * 会被 `close()`（detached，width/height 归零），此时 drawImage 会抛
+     * `InvalidStateError`。实测纹理加载返回时 source 往往已是 detached，故这份副本
+     * 必须从图片自身独立解码（见 `_resolveSourceCanvas`），与 GPU 纹理生命周期解耦。
      */
     protected _sourceCanvas?: HTMLCanvasElement;
+    /** `_sourceCanvas` 对应的图片地址，image 变更时用于失效旧副本 */
+    protected _sourceImage?: string;
     setProperties(properties?: Foreground): this;
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     loadTexture(): Promise<void>;
-    /** 把原纹理 + effects 烘焙成一张运行时 canvas，包成 CanvasTexture（gif/无 effects 时跳过） */
-    protected _applyEffects(): void;
+    /** 把原图 + effects 烘焙成一张运行时 canvas，包成 CanvasTexture（gif/无 effects 时跳过） */
+    protected _applyEffects(): Promise<void>;
+    /**
+     * 取得用于烘焙的 CPU 副本：
+     * 1) 若纹理 source 仍存活（width>0），直接快照（省一次解码）；
+     * 2) 否则从 image 重新解码一份（资源层按 url 缓存复用，避免重复烘焙时反复解码）。
+     */
+    protected _resolveSourceCanvas(): Promise<HTMLCanvasElement | undefined>;
+    /** 把一张存活的图源画进新 canvas（不会被 close，可反复用于烘焙） */
+    protected _snapshot(source: Snapshotable): HTMLCanvasElement | undefined;
 }
+export {};

package/package.json

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