@tmagic/stage 1.7.8 → 1.7.10

package/dist/es/ActionManager.js

@@ -151,6 +151,26 @@ var ActionManager = class extends EventEmitter$1 {
 		return null;
 	}
 	/**
+	* 获取鼠标下方第二个可选中元素（跳过最上层），用于双击穿透选中下方元素
+	* @param event 鼠标事件
+	* @returns 鼠标下方第二个可选中元素，不存在时返回 null
+	*/
+	async getNextElementFromPoint(event) {
+		const els = this.getElementsFromPoint(event);
+		let stopped = false;
+		const stop = () => stopped = true;
+		let skippedFirst = false;
+		for (const el of els) if (!getIdFromEl()(el)?.startsWith("ghost_el_") && await this.isElCanSelect(el, event, stop)) {
+			if (stopped) break;
+			if (!skippedFirst) {
+				skippedFirst = true;
+				continue;
+			}
+			return el;
+		}
+		return null;
+	}
+	/**
 	* 判断一个元素能否在当前场景被选中
 	* @param el 被判断的元素
 	* @param event 鼠标事件

package/dist/es/Rule.js

@@ -79,6 +79,7 @@ var Rule = class extends EventEmitter$1 {
 		this.hGuides?.off("changeGuides", this.hGuidesChangeGuidesHandler);
 		this.vGuides?.off("changeGuides", this.vGuidesChangeGuidesHandler);
 		this.containerResizeObserver?.disconnect();
+		this.container = void 0;
 		this.removeAllListeners();
 	}
 	destroyGuides() {
@@ -89,7 +90,6 @@ var Rule = class extends EventEmitter$1 {
 		});
 		this.hGuides = void 0;
 		this.vGuides = void 0;
-		this.container = void 0;
 	}
 	getGuidesStyle = (type) => ({
 		position: "fixed",

package/dist/es/StageCore.js

@@ -43,7 +43,31 @@ var StageCore = class extends EventEmitter {
 	* @param id 选中的id
 	*/
 	async select(id, event) {
-		const el = this.renderer?.getTargetElement(id) || null;
+		if (!this.renderer) return;
+		let el = this.renderer.getTargetElement(id) || null;
+		if (!el) el = await new Promise((resolve) => {
+			const observer = new MutationObserver(() => {
+				const target = this.renderer?.getTargetElement(id);
+				if (target) {
+					observer.disconnect();
+					clearTimeout(timer);
+					resolve(target);
+				}
+			});
+			const body = this.renderer?.getDocument()?.body;
+			if (!body) {
+				resolve(null);
+				return;
+			}
+			observer.observe(body, {
+				childList: true,
+				subtree: true
+			});
+			const timer = setTimeout(() => {
+				observer.disconnect();
+				resolve(this.renderer?.getTargetElement(id) || null);
+			}, 1e3);
+		});
 		if (el === this.actionManager?.getSelectedEl()) return;
 		await this.renderer?.select([id]);
 		if (el) this.mask?.setLayout(el);
@@ -157,6 +181,13 @@ var StageCore = class extends EventEmitter {
 		this.renderer?.reloadIframe(url);
 	}
 	/**
+	* 将指定id的dom元素生成为图片
+	*/
+	async getElementImage(id, type = "png", options = {}) {
+		if (!this.renderer) throw new Error("Renderer is not initialized");
+		return this.renderer.getElementImage(id, type, options);
+	}
+	/**
 	* 销毁实例
 	*/
 	destroy() {

package/dist/es/StageRender.js

@@ -3,6 +3,7 @@ import { addSelectedClassName, removeSelectedClassName } from "./util.js";
 import style_default from "./style.js";
 import { EventEmitter } from "events";
 import { getElById, getHost, guid, injectStyle, isSameDomain } from "@tmagic/core";
+import { snapdom } from "@zumer/snapdom";
 //#region packages/stage/src/StageRender.ts
 var StageRender = class extends EventEmitter {
 	/** 组件的js、css执行的环境，直接渲染为当前window，iframe渲染则为iframe.contentWindow */
@@ -103,6 +104,21 @@ var StageRender = class extends EventEmitter {
 	getTargetElement(id) {
 		return getElById()(this.getDocument(), id);
 	}
+	/**
+	* 将指定id的dom元素生成为图片
+	* @param id 目标元素的id
+	* @param options 图片生成选项
+	* @returns data URL 格式的图片数据
+	*/
+	async getElementImage(id, type = "png", options = {}) {
+		const el = this.getTargetElement(id);
+		if (!el) throw new Error(`Element with id "${id}" not found`);
+		el.scrollIntoView();
+		const toFunc = `to${type.charAt(0).toUpperCase() + type.slice(1)}`;
+		const result = await snapdom(el, options);
+		if (toFunc in result) return result[toFunc]();
+		throw new Error(`Invalid type: ${type}`);
+	}
 	postTmagicRuntimeReady() {
 		this.contentWindow = this.iframe?.contentWindow;
 		this.contentWindow.magic = this.getMagicApi();

package/dist/tmagic-stage.umd.cjs

@@ -1,14 +1,15 @@
 (function(global, factory) {
-	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("events"), require("@tmagic/core"), require("keycon"), require("moveable-helper"), require("moveable"), require("@scena/guides")) : typeof define === "function" && define.amd ? define([
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("events"), require("@tmagic/core"), require("keycon"), require("moveable-helper"), require("moveable"), require("@scena/guides"), require("@zumer/snapdom")) : typeof define === "function" && define.amd ? define([
 		"exports",
 		"events",
 		"@tmagic/core",
 		"keycon",
 		"moveable-helper",
 		"moveable",
-		"@scena/guides"
-	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TMagicStage = {}, global.events, global._tmagic_core, global.keycon, global.moveable_helper, global.moveable, global._scena_guides));
-})(this, function(exports, events, _tmagic_core, keycon, moveable_helper, moveable, _scena_guides) {
+		"@scena/guides",
+		"@zumer/snapdom"
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TMagicStage = {}, global.events, global._tmagic_core, global.keycon, global.moveable_helper, global.moveable, global._scena_guides, global._zumer_snapdom));
+})(this, function(exports, events, _tmagic_core, keycon, moveable_helper, moveable, _scena_guides, _zumer_snapdom) {
 	Object.defineProperties(exports, {
 		__esModule: { value: true },
 		[Symbol.toStringTag]: { value: "Module" }
@@ -3619,6 +3620,26 @@
 			return null;
 		}
 		/**
+		* 获取鼠标下方第二个可选中元素（跳过最上层），用于双击穿透选中下方元素
+		* @param event 鼠标事件
+		* @returns 鼠标下方第二个可选中元素，不存在时返回 null
+		*/
+		async getNextElementFromPoint(event) {
+			const els = this.getElementsFromPoint(event);
+			let stopped = false;
+			const stop = () => stopped = true;
+			let skippedFirst = false;
+			for (const el of els) if (!(0, _tmagic_core.getIdFromEl)()(el)?.startsWith("ghost_el_") && await this.isElCanSelect(el, event, stop)) {
+				if (stopped) break;
+				if (!skippedFirst) {
+					skippedFirst = true;
+					continue;
+				}
+				return el;
+			}
+			return null;
+		}
+		/**
 		* 判断一个元素能否在当前场景被选中
 		* @param el 被判断的元素
 		* @param event 鼠标事件
@@ -4013,6 +4034,7 @@
 			this.hGuides?.off("changeGuides", this.hGuidesChangeGuidesHandler);
 			this.vGuides?.off("changeGuides", this.vGuidesChangeGuidesHandler);
 			this.containerResizeObserver?.disconnect();
+			this.container = void 0;
 			this.removeAllListeners();
 		}
 		destroyGuides() {
@@ -4023,7 +4045,6 @@
 			});
 			this.hGuides = void 0;
 			this.vGuides = void 0;
-			this.container = void 0;
 		}
 		getGuidesStyle = (type) => ({
 			position: "fixed",
@@ -4424,6 +4445,21 @@
 		getTargetElement(id) {
 			return (0, _tmagic_core.getElById)()(this.getDocument(), id);
 		}
+		/**
+		* 将指定id的dom元素生成为图片
+		* @param id 目标元素的id
+		* @param options 图片生成选项
+		* @returns data URL 格式的图片数据
+		*/
+		async getElementImage(id, type = "png", options = {}) {
+			const el = this.getTargetElement(id);
+			if (!el) throw new Error(`Element with id "${id}" not found`);
+			el.scrollIntoView();
+			const toFunc = `to${type.charAt(0).toUpperCase() + type.slice(1)}`;
+			const result = await (0, _zumer_snapdom.snapdom)(el, options);
+			if (toFunc in result) return result[toFunc]();
+			throw new Error(`Invalid type: ${type}`);
+		}
 		postTmagicRuntimeReady() {
 			this.contentWindow = this.iframe?.contentWindow;
 			this.contentWindow.magic = this.getMagicApi();
@@ -4543,7 +4579,31 @@
 		* @param id 选中的id
 		*/
 		async select(id, event) {
-			const el = this.renderer?.getTargetElement(id) || null;
+			if (!this.renderer) return;
+			let el = this.renderer.getTargetElement(id) || null;
+			if (!el) el = await new Promise((resolve) => {
+				const observer = new MutationObserver(() => {
+					const target = this.renderer?.getTargetElement(id);
+					if (target) {
+						observer.disconnect();
+						clearTimeout(timer);
+						resolve(target);
+					}
+				});
+				const body = this.renderer?.getDocument()?.body;
+				if (!body) {
+					resolve(null);
+					return;
+				}
+				observer.observe(body, {
+					childList: true,
+					subtree: true
+				});
+				const timer = setTimeout(() => {
+					observer.disconnect();
+					resolve(this.renderer?.getTargetElement(id) || null);
+				}, 1e3);
+			});
 			if (el === this.actionManager?.getSelectedEl()) return;
 			await this.renderer?.select([id]);
 			if (el) this.mask?.setLayout(el);
@@ -4657,6 +4717,13 @@
 			this.renderer?.reloadIframe(url);
 		}
 		/**
+		* 将指定id的dom元素生成为图片
+		*/
+		async getElementImage(id, type = "png", options = {}) {
+			if (!this.renderer) throw new Error("Renderer is not initialized");
+			return this.renderer.getElementImage(id, type, options);
+		}
+		/**
 		* 销毁实例
 		*/
 		destroy() {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.8",
+  "version": "1.7.10",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": false,
@@ -31,6 +31,7 @@
   "dependencies": {
     "@scena/guides": "^0.29.2",
     "events": "^3.3.0",
+    "@zumer/snapdom": "^2.8.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
@@ -42,8 +43,8 @@
     "@types/lodash-es": "^4.17.4"
   },
   "peerDependencies": {
-    "typescript": "^5.9.3",
-    "@tmagic/core": "1.7.8"
+    "typescript": "^6.0.2",
+    "@tmagic/core": "1.7.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionManager.ts

@@ -236,6 +236,30 @@ export default class ActionManager extends EventEmitter {
     return null;
   }
 
+  /**
+   * 获取鼠标下方第二个可选中元素（跳过最上层），用于双击穿透选中下方元素
+   * @param event 鼠标事件
+   * @returns 鼠标下方第二个可选中元素，不存在时返回 null
+   */
+  public async getNextElementFromPoint(event: MouseEvent): Promise<HTMLElement | null> {
+    const els = this.getElementsFromPoint(event as Point);
+
+    let stopped = false;
+    const stop = () => (stopped = true);
+    let skippedFirst = false;
+    for (const el of els) {
+      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
+        if (stopped) break;
+        if (!skippedFirst) {
+          skippedFirst = true;
+          continue;
+        }
+        return el;
+      }
+    }
+    return null;
+  }
+
   /**
    * 判断一个元素能否在当前场景被选中
    * @param el 被判断的元素

package/src/Rule.ts

@@ -124,6 +124,7 @@ export default class Rule extends EventEmitter {
     this.hGuides?.off('changeGuides', this.hGuidesChangeGuidesHandler);
     this.vGuides?.off('changeGuides', this.vGuidesChangeGuidesHandler);
     this.containerResizeObserver?.disconnect();
+    this.container = undefined;
     this.removeAllListeners();
   }
 
@@ -137,7 +138,6 @@ export default class Rule extends EventEmitter {
 
     this.hGuides = undefined;
     this.vGuides = undefined;
-    this.container = undefined;
   }
 
   private getGuidesStyle = (type: GuidesType) => ({

package/src/StageCore.ts

@@ -18,6 +18,7 @@
 
 import { EventEmitter } from 'events';
 
+import { SnapdomOptions } from '@zumer/snapdom';
 import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import type { Id } from '@tmagic/core';
@@ -88,7 +89,38 @@ export default class StageCore extends EventEmitter {
    * @param id 选中的id
    */
   public async select(id: Id, event?: MouseEvent): Promise<void> {
-    const el = this.renderer?.getTargetElement(id) || null;
+    if (!this.renderer) {
+      return;
+    }
+
+    let el = this.renderer.getTargetElement(id) || null;
+
+    if (!el) {
+      el = await new Promise<HTMLElement | null>((resolve) => {
+        const observer = new MutationObserver(() => {
+          const target = this.renderer?.getTargetElement(id);
+          if (target) {
+            observer.disconnect();
+            clearTimeout(timer);
+            resolve(target);
+          }
+        });
+
+        const body = this.renderer?.getDocument()?.body;
+        if (!body) {
+          resolve(null);
+          return;
+        }
+
+        observer.observe(body, { childList: true, subtree: true });
+
+        const timer = setTimeout(() => {
+          observer.disconnect();
+          resolve(this.renderer?.getTargetElement(id) || null);
+        }, 1000);
+      });
+    }
+
     if (el === this.actionManager?.getSelectedEl()) return;
 
     await this.renderer?.select([id]);
@@ -241,6 +273,21 @@ export default class StageCore extends EventEmitter {
     this.renderer?.reloadIframe(url);
   }
 
+  /**
+   * 将指定id的dom元素生成为图片
+   */
+  public async getElementImage(
+    id: Id,
+    type: 'download' | 'raw' | 'svg' | 'canvas' | 'png' | 'jpeg' | 'webp' | 'blob' = 'png',
+    options: SnapdomOptions = {},
+  ) {
+    if (!this.renderer) {
+      throw new Error('Renderer is not initialized');
+    }
+
+    return this.renderer.getElementImage(id, type, options);
+  }
+
   /**
    * 销毁实例
    */

package/src/StageRender.ts

@@ -18,6 +18,8 @@
 
 import { EventEmitter } from 'events';
 
+import { snapdom, SnapdomOptions } from '@zumer/snapdom';
+
 import type { Id } from '@tmagic/core';
 import { getElById, getHost, guid, injectStyle, isSameDomain } from '@tmagic/core';
 
@@ -162,6 +164,35 @@ export default class StageRender extends EventEmitter {
     return getElById()(this.getDocument(), id);
   }
 
+  /**
+   * 将指定id的dom元素生成为图片
+   * @param id 目标元素的id
+   * @param options 图片生成选项
+   * @returns data URL 格式的图片数据
+   */
+  public async getElementImage(
+    id: Id,
+    type: 'download' | 'raw' | 'svg' | 'canvas' | 'png' | 'jpeg' | 'webp' | 'blob' = 'png',
+    options: SnapdomOptions = {},
+  ) {
+    const el = this.getTargetElement(id);
+    if (!el) {
+      throw new Error(`Element with id "${id}" not found`);
+    }
+
+    el.scrollIntoView();
+
+    const toFunc = `to${type.charAt(0).toUpperCase() + type.slice(1)}`;
+
+    const result = await snapdom(el, options);
+
+    if (toFunc in result) {
+      return result[toFunc]();
+    }
+
+    throw new Error(`Invalid type: ${type}`);
+  }
+
   public postTmagicRuntimeReady() {
     this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
 

package/types/index.d.ts

@@ -1,5 +1,6 @@
 import * as _tmagic_editor0 from "@tmagic/editor";
 import EventEmitter$1, { EventEmitter } from "events";
+import { SnapdomOptions } from "@zumer/snapdom";
 import { MoveableManagerInterface, MoveableOptions, OnDrag, OnDragGroup, OnDragGroupStart, OnDragStart, OnResize, OnResizeGroup, OnResizeGroupStart, OnResizeStart, OnRotate, OnRotateStart, OnScale, OnScaleStart, Renderer } from "moveable";
 import Core, { Id, MApp, MContainer, MNode } from "@tmagic/core";
 import Guides, { GuidesOptions, GuidesOptions as GuidesOptions$1 } from "@scena/guides";
@@ -468,6 +469,12 @@ declare class ActionManager extends EventEmitter$1 {
    * @returns 鼠标下方第一个可选中元素
    */
   getElementFromPoint(event: MouseEvent): Promise<HTMLElement | null>;
+  /**
+   * 获取鼠标下方第二个可选中元素（跳过最上层），用于双击穿透选中下方元素
+   * @param event 鼠标事件
+   * @returns 鼠标下方第二个可选中元素，不存在时返回 null
+   */
+  getNextElementFromPoint(event: MouseEvent): Promise<HTMLElement | null>;
   /**
    * 判断一个元素能否在当前场景被选中
    * @param el 被判断的元素
@@ -711,6 +718,13 @@ declare class StageRender extends EventEmitter {
    */
   getElementsFromPoint(point: Point): HTMLElement[];
   getTargetElement(id: Id): HTMLElement | null;
+  /**
+   * 将指定id的dom元素生成为图片
+   * @param id 目标元素的id
+   * @param options 图片生成选项
+   * @returns data URL 格式的图片数据
+   */
+  getElementImage(id: Id, type?: 'download' | 'raw' | 'svg' | 'canvas' | 'png' | 'jpeg' | 'webp' | 'blob', options?: SnapdomOptions): Promise<any>;
   postTmagicRuntimeReady(): void;
   reloadIframe(url: string): void;
   destroyIframe(): void;
@@ -801,6 +815,10 @@ declare class StageCore extends EventEmitter {
   disableMultiSelect(): void;
   enableMultiSelect(): void;
   reloadIframe(url: string): void;
+  /**
+   * 将指定id的dom元素生成为图片
+   */
+  getElementImage(id: Id, type?: 'download' | 'raw' | 'svg' | 'canvas' | 'png' | 'jpeg' | 'webp' | 'blob', options?: SnapdomOptions): Promise<any>;
   /**
    * 销毁实例
    */