modern-canvas 0.23.10 → 0.23.11

package/dist/index.js

@@ -5011,6 +5011,9 @@ var Sr = class extends Tt {
 	root = new xr().setTree(this);
 	timeline = new br().setTree(this);
 	nodeMap = /* @__PURE__ */ new Map();
+	_boundFonts;
+	_textRemeasureScheduled = !1;
+	_onFontLoad = () => this._scheduleTextRemeasure();
 	_backgroundColor = new T();
 	_previousViewport;
 	_currentViewport;
@@ -5027,13 +5030,27 @@ var Sr = class extends Tt {
 		return this.nodeMap.get(e);
 	}
 	constructor(e) {
-		super(), this.on("nodeEnter", (e) => this.nodeMap.set(e.id, e)), this.on("nodeExit", (e) => this.nodeMap.delete(e.id)), this.setProperties(e);
+		super(), this.on("nodeEnter", (e) => this.nodeMap.set(e.id, e)), this.on("nodeExit", (e) => this.nodeMap.delete(e.id)), this.setProperties(e), this._bindFonts(this.fonts);
+	}
+	_bindFonts(e) {
+		this._boundFonts !== e && (this._boundFonts?.off("load", this._onFontLoad), this._boundFonts = e, e?.on("load", this._onFontLoad));
+	}
+	_scheduleTextRemeasure() {
+		this._textRemeasureScheduled || (this._textRemeasureScheduled = !0, queueMicrotask(() => {
+			this._textRemeasureScheduled = !1, this.nodeMap.forEach((e) => {
+				let t = e.text;
+				t?.enabled && typeof t.update == "function" && t.update();
+			});
+		}));
 	}
 	_updateProperty(e, t, n) {
 		switch (super._updateProperty(e, t, n), e) {
 			case "backgroundColor":
 				this._backgroundColor.value = t;
 				break;
+			case "fonts":
+				this._bindFonts(t), this._scheduleTextRemeasure();
+				break;
 		}
 	}
 	setProperties(e) {
@@ -5058,7 +5075,7 @@ var Sr = class extends Tt {
 		t.activate(e, 0), L.draw(e), t.inactivate(e);
 	}
 	_destroy() {
-		super._destroy(), this.root.destroy(), this.input.destroy(), this.nodeMap.clear();
+		super._destroy(), this._bindFonts(void 0), this.root.destroy(), this.input.destroy(), this.nodeMap.clear();
 	}
 };
 k([_({ alias: "root.msaa" }), O("design:type", Boolean)], Sr.prototype, "msaa", void 0), k([_({ fallback: !1 }), O("design:type", Boolean)], Sr.prototype, "pixelate", void 0), k([_({ fallback: !1 }), O("design:type", Boolean)], Sr.prototype, "roundPixels", void 0), k([_(), O("design:type", Object)], Sr.prototype, "backgroundColor", void 0), k([_({
@@ -6474,7 +6491,7 @@ var X = class extends C {
 		}
 		let n = await yi();
 		if (!n) {
-			console.warn("[modern-canvas] chart rendering requires the optional \"echarts\" dependency (e.g. `pnpm add echarts`)");
+			console.warn("[modern-canvas] chart rendering requires the optional \"echarts\" dependency (e.g. `pnpm add echarts`)"), this._renderPlaceholder(e, t);
 			return;
 		}
 		if (!(this.destroyed || !this.isValid())) {
@@ -6505,6 +6522,16 @@ var X = class extends C {
 			this._texture.requestUpdate("source"), this._parent.requestDraw();
 		}
 	}
+	_renderPlaceholder(e, t) {
+		if (typeof document > "u" || !e || !t) return;
+		let n = document.createElement("canvas");
+		n.width = Math.ceil(e), n.height = Math.ceil(t);
+		let r = n.getContext("2d");
+		r && (r.fillStyle = "#f3f4f6", r.fillRect(0, 0, e, t), r.strokeStyle = "#d1d5db", r.setLineDash([6, 4]), r.strokeRect(1, 1, e - 2, t - 2), r.fillStyle = "#9ca3af", r.font = "14px sans-serif", r.textAlign = "center", r.textBaseline = "middle", r.fillText("图表需安装 echarts", e / 2, t / 2), this._texture ? this._texture.source = n : this._texture = new er({
+			source: n,
+			pixelRatio: 1
+		}), this._texture.requestUpdate("source"), this._parent.requestDraw());
+	}
 	draw() {
 		let e = this._texture;
 		if (!e?.isValid()) return;

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

@@ -32,6 +32,8 @@ export declare class Element2DChart extends CoreObject implements NormalizedChar
     isValid(): boolean;
     /** Render with echarts into the offscreen canvas backing `_texture`. */
     update(): Promise<void>;
+    /** echarts 缺失时画一个虚线框 + 文案的占位纹理，而非静默空白。 */
+    protected _renderPlaceholder(width: number, height: number): void;
     /** Paint the echarts texture onto the element, like fill/background do. */
     draw(): void;
     /** Map the normalized idoc chart to an echarts option. */

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

@@ -46,6 +46,10 @@ export declare class SceneTree extends MainLoop {
     readonly root: Window;
     timeline: Timeline;
     readonly nodeMap: Map<string, Node>;
+    /** 已订阅 load 事件的 fonts 实例，用于在 fonts 切换 / 销毁时解绑。 */
+    protected _boundFonts?: Fonts;
+    protected _textRemeasureScheduled: boolean;
+    protected _onFontLoad: () => void;
     protected _backgroundColor: Color;
     protected _previousViewport?: Viewport;
     protected _currentViewport?: Viewport;
@@ -54,6 +58,14 @@ export declare class SceneTree extends MainLoop {
     setCurrentViewport(viewport: Viewport | undefined): void;
     getNodeById<T extends Node = Node>(id: string): T | undefined;
     constructor(properties?: Partial<SceneTreeProperties>);
+    /** 订阅 fonts 的 load 事件，并在切换 fonts / 销毁时解绑，避免重复订阅与泄漏。 */
+    protected _bindFonts(next?: Fonts): void;
+    /**
+     * 字体到位后，重排树内全部文字（含表格 back 层单元格——它们也在 nodeMap）。
+     * 一个 tick 内多次 load 合并为一次。文字创建时字体可能尚未就绪、按 0 宽 glyph 测量挤成一坨，
+     * 这里在字体可用时自动重新测量，使所有消费方无需各自轮询字体状态。
+     */
+    protected _scheduleTextRemeasure(): void;
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     setProperties(properties?: Record<string, any>): this;
     log(...args: any[]): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.23.10",
+  "version": "0.23.11",
   "packageManager": "pnpm@10.19.0",
   "description": "A JavaScript WebGL rendering engine. only the ESM.",
   "author": "wxm",
@@ -62,7 +62,7 @@
   "dependencies": {
     "colord": "^2.9.3",
     "earcut": "^3.0.2",
-    "modern-font": "^0.6.0",
+    "modern-font": "^0.6.1",
     "modern-idoc": "^0.11.9",
     "modern-path2d": "^1.8.5",
     "modern-text": "^2.0.6"