@tmagic/stage 1.4.15 → 1.5.0-beta.0

package/dist/tmagic-stage.js

@@ -1,8 +1,8 @@
 import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
+import { removeClassName, guid, setIdToEl, getIdFromEl, getElById, calcValueByFontsize, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import KeyController from 'keycon';
 import { merge, throttle } from 'lodash-es';
 import { Env } from '@tmagic/core';
-import { removeClassName, guid, calcValueByFontsize, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import MoveableHelper from 'moveable-helper';
 import Moveable from 'moveable';
 import Guides from '@scena/guides';
@@ -305,7 +305,7 @@ class TargetShadow {
   }
   updateEl(target, src) {
     const el = src || globalThis.document.createElement("div");
-    el.id = `${this.idPrefix}_${target.id}`;
+    setIdToEl()(el, `${this.idPrefix}_${getIdFromEl()(target)}`);
     el.style.cssText = getTargetElStyle(target, this.zIndex);
     if (typeof this.updateDragEl === "function") {
       this.updateDragEl(el, target, this.container);
@@ -317,7 +317,7 @@ class TargetShadow {
     } else if (!isFixed && mode === Mode.FIXED) {
       el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
     }
-    if (!globalThis.document.getElementById(el.id)) {
+    if (!getElById()(globalThis.document, getIdFromEl()(el))) {
       this.container.append(el);
     }
     return el;
@@ -328,6 +328,7 @@ class TargetShadow {
   };
 }
 
+const getId = getIdFromEl();
 class DragResizeHelper {
   /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
   targetShadow;
@@ -485,14 +486,14 @@ class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -512,14 +513,14 @@ class DragResizeHelper {
     const { events } = e;
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id)
+        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id)
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
+        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(targetItem) && getId(ev.target)?.endsWith(getId(targetItem))
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -538,7 +539,7 @@ class DragResizeHelper {
     let shadowEl = this.getShadowEl();
     const shadowEls = this.getShadowEls();
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => item.id.endsWith(el.id));
+      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
     }
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
       const targetShadowHtmlEl = shadowEl;
@@ -559,13 +560,14 @@ class DragResizeHelper {
     if (this.framesSnapShot.length > 0) return;
     events.forEach((ev) => {
       const matchEventTarget = this.targetList.find(
-        (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
+        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || "")
       );
       if (!matchEventTarget) return;
-      this.framesSnapShot.push({
+      const id = getId(matchEventTarget);
+      id && this.framesSnapShot.push({
         left: matchEventTarget.offsetLeft,
         top: matchEventTarget.offsetTop,
-        id: matchEventTarget.id
+        id
       });
     });
   }
@@ -579,7 +581,7 @@ class DragResizeHelper {
     const ghostEl = el.cloneNode(true);
     this.setGhostElChildrenId(ghostEl);
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
     ghostEl.style.zIndex = ZIndex.GHOST_EL;
     ghostEl.style.opacity = ".5";
     ghostEl.style.position = "absolute";
@@ -592,8 +594,10 @@ class DragResizeHelper {
   }
   setGhostElChildrenId(el) {
     for (const child of Array.from(el.children)) {
-      if (child.id) {
-        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+      const el2 = child;
+      const id = getId(el2);
+      if (id) {
+        setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
       }
       if (child.children.length) {
         this.setGhostElChildrenId(child);
@@ -1123,9 +1127,10 @@ class StageDragResize extends MoveableOptionsManager {
         this.emit("sort", up(deltaTop, this.target));
       }
     } else {
-      this.emit("sort", {
-        src: this.target.id,
-        dist: this.target.id
+      const id = getIdFromEl()(this.target);
+      id && this.emit("sort", {
+        src: id,
+        dist: id
       });
     }
   }
@@ -1285,7 +1290,8 @@ class StageMultiDragResize extends MoveableOptionsManager {
     }).on("clickGroup", (e) => {
       const { inputTarget, targets } = e;
       if (targets.length > 1 && targets.includes(inputTarget)) {
-        this.emit("change-to-select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""), e.inputEvent);
+        const id = getIdFromEl()(inputTarget)?.replace(DRAG_EL_ID_PREFIX, "");
+        id && this.emit("change-to-select", id, e.inputEvent);
       }
     });
   }
@@ -1395,12 +1401,13 @@ class ActionManager extends EventEmitter {
       return;
     }
     const el = await this.getElementFromPoint(event);
-    if (!el) {
+    const id = getIdFromEl()(el);
+    if (!id) {
       this.clearHighlight();
       return;
     }
     this.emit("mousemove", event);
-    this.highlight(el.id);
+    this.highlight(id);
   }, throttleTime);
   constructor(config) {
     super();
@@ -1412,7 +1419,7 @@ class ActionManager extends EventEmitter {
     this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
     this.getElementsFromPoint = config.getElementsFromPoint;
-    this.canSelect = config.canSelect || ((el) => !!el.id);
+    this.canSelect = config.canSelect || ((el) => Boolean(getIdFromEl()(el)));
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
     this.dr = this.createDr(config);
@@ -1468,7 +1475,7 @@ class ActionManager extends EventEmitter {
    * 判断是否单选选中的元素
    */
   isSelectedEl(el) {
-    return el.id === this.selectedEl?.id;
+    return getIdFromEl()(el) === getIdFromEl()(this.selectedEl);
   }
   setSelectedEl(el) {
     this.selectedEl = el;
@@ -1498,7 +1505,7 @@ class ActionManager extends EventEmitter {
     let stopped = false;
     const stop = () => stopped = true;
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
+      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
         if (stopped) break;
         return el;
       }
@@ -1599,7 +1606,7 @@ class ActionManager extends EventEmitter {
     if (!doc) return;
     const els = this.getElementsFromPoint(event);
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
+      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
         addClassName(el, doc, this.containerHighlightClassName);
         break;
       }
@@ -1700,9 +1707,9 @@ class ActionManager extends EventEmitter {
         if (typeof options === "function") {
           const cfg = {
             targetEl: this.selectedEl,
-            targetElId: this.selectedEl?.id,
+            targetElId: getIdFromEl()(this.selectedEl),
             targetEls: this.selectedElList,
-            targetElIds: this.selectedElList?.map((item) => item.id),
+            targetElIds: this.selectedElList?.map((item) => getIdFromEl()(item) || ""),
             isMulti,
             document: this.getRenderDocument()
           };
@@ -1725,7 +1732,7 @@ class ActionManager extends EventEmitter {
       this.selectedElList.push(this.selectedEl);
       this.setSelectedEl(null);
     }
-    const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
+    const existIndex = this.selectedElList.findIndex((selectedDom) => getIdFromEl()(selectedDom) === getIdFromEl()(el));
     if (existIndex !== -1) {
       if (this.selectedElList.length > 1) {
         this.selectedElList.splice(existIndex, 1);
@@ -2352,7 +2359,7 @@ class StageRender extends EventEmitter$1 {
     return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
   }
   getTargetElement(id) {
-    return this.getDocument()?.getElementById(`${id}`) || null;
+    return getElById()(this.getDocument(), id);
   }
   /**
    * 销毁实例
@@ -2662,11 +2669,12 @@ class StageCore extends EventEmitter$1 {
    */
   initActionManagerEvent() {
     this.actionManager.on("before-select", (el, event) => {
-      this.select(el.id, event);
+      const id = getIdFromEl()(el);
+      id && this.select(id, event);
     }).on("select", (selectedEl, event) => {
       this.emit("select", selectedEl, event);
     }).on("before-multi-select", (els) => {
-      this.multiSelect(els.map((el) => el.id));
+      this.multiSelect(els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)));
     }).on("multi-select", (selectedElList, event) => {
       this.emit("multi-select", selectedElList, event);
     }).on("dblclick", (event) => {

package/dist/tmagic-stage.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('keycon'), require('lodash-es'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable-helper'), require('moveable'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', 'keycon', 'lodash-es', '@tmagic/core', '@tmagic/utils', 'moveable-helper', 'moveable', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.KeyController, global.lodashEs, global.core, global.utils, global.MoveableHelper, global.Moveable, global.Guides));
-})(this, (function (exports, EventEmitter, KeyController, lodashEs, core, utils, MoveableHelper, Moveable, Guides) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('@tmagic/utils'), require('keycon'), require('lodash-es'), require('@tmagic/core'), require('moveable-helper'), require('moveable'), require('@scena/guides')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'events', '@tmagic/utils', 'keycon', 'lodash-es', '@tmagic/core', 'moveable-helper', 'moveable', '@scena/guides'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.utils, global.KeyController, global.lodashEs, global.core, global.MoveableHelper, global.Moveable, global.Guides));
+})(this, (function (exports, EventEmitter, utils, KeyController, lodashEs, core, MoveableHelper, Moveable, Guides) { 'use strict';
 
   const GHOST_EL_ID_PREFIX = "ghost_el_";
   const DRAG_EL_ID_PREFIX = "drag_el_";
@@ -302,7 +302,7 @@
     }
     updateEl(target, src) {
       const el = src || globalThis.document.createElement("div");
-      el.id = `${this.idPrefix}_${target.id}`;
+      utils.setIdToEl()(el, `${this.idPrefix}_${utils.getIdFromEl()(target)}`);
       el.style.cssText = getTargetElStyle(target, this.zIndex);
       if (typeof this.updateDragEl === "function") {
         this.updateDragEl(el, target, this.container);
@@ -314,7 +314,7 @@
       } else if (!isFixed && mode === Mode.FIXED) {
         el.style.transform = `translate3d(${-this.scrollLeft}px, ${-this.scrollTop}px, 0)`;
       }
-      if (!globalThis.document.getElementById(el.id)) {
+      if (!utils.getElById()(globalThis.document, utils.getIdFromEl()(el))) {
         this.container.append(el);
       }
       return el;
@@ -325,6 +325,7 @@
     };
   }
 
+  const getId = utils.getIdFromEl();
   class DragResizeHelper {
     /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
     targetShadow;
@@ -482,14 +483,14 @@
       events.forEach((ev) => {
         const { width, height, beforeTranslate } = ev.drag;
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
         );
         if (!frameSnapShot) return;
         const targeEl = this.targetList.find(
-          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, "")
+          (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
         );
         if (!targeEl) return;
-        const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+        const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -509,14 +510,14 @@
       const { events } = e;
       events.forEach((ev) => {
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(frameItem.id)
+          (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id)
         );
         if (!frameSnapShot) return;
         const targeEl = this.targetList.find(
-          (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
+          (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(targetItem) && getId(ev.target)?.endsWith(getId(targetItem))
         );
         if (!targeEl) return;
-        const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+        const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -535,7 +536,7 @@
       let shadowEl = this.getShadowEl();
       const shadowEls = this.getShadowEls();
       if (shadowEls.length) {
-        shadowEl = shadowEls.find((item) => item.id.endsWith(el.id));
+        shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
       }
       if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
         const targetShadowHtmlEl = shadowEl;
@@ -556,13 +557,14 @@
       if (this.framesSnapShot.length > 0) return;
       events.forEach((ev) => {
         const matchEventTarget = this.targetList.find(
-          (targetItem) => ev.target.id.startsWith(DRAG_EL_ID_PREFIX) && ev.target.id.endsWith(targetItem.id)
+          (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || "")
         );
         if (!matchEventTarget) return;
-        this.framesSnapShot.push({
+        const id = getId(matchEventTarget);
+        id && this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
           top: matchEventTarget.offsetTop,
-          id: matchEventTarget.id
+          id
         });
       });
     }
@@ -576,7 +578,7 @@
       const ghostEl = el.cloneNode(true);
       this.setGhostElChildrenId(ghostEl);
       const { top, left } = getAbsolutePosition(el, getOffset(el));
-      ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
+      utils.setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
       ghostEl.style.zIndex = ZIndex.GHOST_EL;
       ghostEl.style.opacity = ".5";
       ghostEl.style.position = "absolute";
@@ -589,8 +591,10 @@
     }
     setGhostElChildrenId(el) {
       for (const child of Array.from(el.children)) {
-        if (child.id) {
-          child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+        const el2 = child;
+        const id = getId(el2);
+        if (id) {
+          utils.setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
         }
         if (child.children.length) {
           this.setGhostElChildrenId(child);
@@ -1120,9 +1124,10 @@
           this.emit("sort", up(deltaTop, this.target));
         }
       } else {
-        this.emit("sort", {
-          src: this.target.id,
-          dist: this.target.id
+        const id = utils.getIdFromEl()(this.target);
+        id && this.emit("sort", {
+          src: id,
+          dist: id
         });
       }
     }
@@ -1282,7 +1287,8 @@
       }).on("clickGroup", (e) => {
         const { inputTarget, targets } = e;
         if (targets.length > 1 && targets.includes(inputTarget)) {
-          this.emit("change-to-select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""), e.inputEvent);
+          const id = utils.getIdFromEl()(inputTarget)?.replace(DRAG_EL_ID_PREFIX, "");
+          id && this.emit("change-to-select", id, e.inputEvent);
         }
       });
     }
@@ -1392,12 +1398,13 @@
         return;
       }
       const el = await this.getElementFromPoint(event);
-      if (!el) {
+      const id = utils.getIdFromEl()(el);
+      if (!id) {
         this.clearHighlight();
         return;
       }
       this.emit("mousemove", event);
-      this.highlight(el.id);
+      this.highlight(id);
     }, throttleTime);
     constructor(config) {
       super();
@@ -1409,7 +1416,7 @@
       this.disabledMultiSelect = config.disabledMultiSelect ?? false;
       this.getTargetElement = config.getTargetElement;
       this.getElementsFromPoint = config.getElementsFromPoint;
-      this.canSelect = config.canSelect || ((el) => !!el.id);
+      this.canSelect = config.canSelect || ((el) => Boolean(utils.getIdFromEl()(el)));
       this.getRenderDocument = config.getRenderDocument;
       this.isContainer = config.isContainer;
       this.dr = this.createDr(config);
@@ -1465,7 +1472,7 @@
      * 判断是否单选选中的元素
      */
     isSelectedEl(el) {
-      return el.id === this.selectedEl?.id;
+      return utils.getIdFromEl()(el) === utils.getIdFromEl()(this.selectedEl);
     }
     setSelectedEl(el) {
       this.selectedEl = el;
@@ -1495,7 +1502,7 @@
       let stopped = false;
       const stop = () => stopped = true;
       for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
+        if (!utils.getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
           if (stopped) break;
           return el;
         }
@@ -1596,7 +1603,7 @@
       if (!doc) return;
       const els = this.getElementsFromPoint(event);
       for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
+        if (!utils.getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer?.(el) && !excludeElList.includes(el)) {
           utils.addClassName(el, doc, this.containerHighlightClassName);
           break;
         }
@@ -1697,9 +1704,9 @@
           if (typeof options === "function") {
             const cfg = {
               targetEl: this.selectedEl,
-              targetElId: this.selectedEl?.id,
+              targetElId: utils.getIdFromEl()(this.selectedEl),
               targetEls: this.selectedElList,
-              targetElIds: this.selectedElList?.map((item) => item.id),
+              targetElIds: this.selectedElList?.map((item) => utils.getIdFromEl()(item) || ""),
               isMulti,
               document: this.getRenderDocument()
             };
@@ -1722,7 +1729,7 @@
         this.selectedElList.push(this.selectedEl);
         this.setSelectedEl(null);
       }
-      const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
+      const existIndex = this.selectedElList.findIndex((selectedDom) => utils.getIdFromEl()(selectedDom) === utils.getIdFromEl()(el));
       if (existIndex !== -1) {
         if (this.selectedElList.length > 1) {
           this.selectedElList.splice(existIndex, 1);
@@ -2349,7 +2356,7 @@
       return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
     }
     getTargetElement(id) {
-      return this.getDocument()?.getElementById(`${id}`) || null;
+      return utils.getElById()(this.getDocument(), id);
     }
     /**
      * 销毁实例
@@ -2659,11 +2666,12 @@
      */
     initActionManagerEvent() {
       this.actionManager.on("before-select", (el, event) => {
-        this.select(el.id, event);
+        const id = utils.getIdFromEl()(el);
+        id && this.select(id, event);
       }).on("select", (selectedEl, event) => {
         this.emit("select", selectedEl, event);
       }).on("before-multi-select", (els) => {
-        this.multiSelect(els.map((el) => el.id));
+        this.multiSelect(els.map((el) => utils.getIdFromEl()(el)).filter((id) => Boolean(id)));
       }).on("multi-select", (selectedElList, event) => {
         this.emit("multi-select", selectedElList, event);
       }).on("dblclick", (event) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.15",
+  "version": "1.5.0-beta.0",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -32,7 +32,8 @@
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
-    "moveable-helper": "^0.4.0"
+    "moveable-helper": "^0.4.0",
+    "scenejs": "^1.10.3"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -40,13 +41,13 @@
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
     "sass": "^1.77.0",
-    "vite": "^5.3.1"
+    "vite": "^5.3.5"
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/utils": "1.4.15",
-    "@tmagic/schema": "1.4.15",
-    "@tmagic/core": "1.4.15"
+    "@tmagic/schema": "1.5.0-beta.0",
+    "@tmagic/utils": "1.5.0-beta.0",
+    "@tmagic/core": "1.5.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -54,9 +55,6 @@
     }
   },
   "scripts": {
-    "build": "npm run build:type && vite build",
-    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
-    "clear:type": "rimraf ./types",
-    "check:type": "tsc --noEmit --project tsconfig.build.json"
+    "build": "vite build"
   }
 }

package/src/ActionManager.ts

@@ -23,7 +23,7 @@ import type { MoveableOptions, OnDragStart } from 'moveable';
 
 import { Env } from '@tmagic/core';
 import type { Id } from '@tmagic/schema';
-import { addClassName, getDocument, removeClassNameByClassName } from '@tmagic/utils';
+import { addClassName, getDocument, getIdFromEl, removeClassNameByClassName } from '@tmagic/utils';
 
 import {
   AbleActionEventType,
@@ -99,13 +99,14 @@ export default class ActionManager extends EventEmitter {
     }
 
     const el = await this.getElementFromPoint(event);
-    if (!el) {
+    const id = getIdFromEl()(el);
+    if (!id) {
       this.clearHighlight();
       return;
     }
 
     this.emit('mousemove', event);
-    this.highlight(el.id);
+    this.highlight(id);
   }, throttleTime);
 
   constructor(config: ActionManagerConfig) {
@@ -118,7 +119,7 @@ export default class ActionManager extends EventEmitter {
     this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
     this.getElementsFromPoint = config.getElementsFromPoint;
-    this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
+    this.canSelect = config.canSelect || ((el: HTMLElement) => Boolean(getIdFromEl()(el)));
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
 
@@ -187,7 +188,7 @@ export default class ActionManager extends EventEmitter {
    */
   public isSelectedEl(el: HTMLElement): boolean {
     // 有可能dom已经重新渲染，不再是原来的dom了，所以这里判断id，而不是判断el === this.selectedDom
-    return el.id === this.selectedEl?.id;
+    return getIdFromEl()(el) === getIdFromEl()(this.selectedEl);
   }
 
   public setSelectedEl(el: HTMLElement | null): void {
@@ -224,7 +225,7 @@ export default class ActionManager extends EventEmitter {
     let stopped = false;
     const stop = () => (stopped = true);
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
+      if (!getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
         if (stopped) break;
         return el;
       }
@@ -344,7 +345,11 @@ export default class ActionManager extends EventEmitter {
     const els = this.getElementsFromPoint(event);
 
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isContainer?.(el)) && !excludeElList.includes(el)) {
+      if (
+        !getIdFromEl()(el)?.startsWith(GHOST_EL_ID_PREFIX) &&
+        (await this.isContainer?.(el)) &&
+        !excludeElList.includes(el)
+      ) {
         addClassName(el, doc, this.containerHighlightClassName);
         break;
       }
@@ -477,9 +482,9 @@ export default class ActionManager extends EventEmitter {
         if (typeof options === 'function') {
           const cfg: CustomizeMoveableOptionsCallbackConfig = {
             targetEl: this.selectedEl,
-            targetElId: this.selectedEl?.id,
+            targetElId: getIdFromEl()(this.selectedEl),
             targetEls: this.selectedElList,
-            targetElIds: this.selectedElList?.map((item) => item.id),
+            targetElIds: this.selectedElList?.map((item) => getIdFromEl()(item) || ''),
             isMulti,
             document: this.getRenderDocument(),
           };
@@ -507,7 +512,7 @@ export default class ActionManager extends EventEmitter {
     }
 
     // 判断元素是否已在多选列表
-    const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
+    const existIndex = this.selectedElList.findIndex((selectedDom) => getIdFromEl()(selectedDom) === getIdFromEl()(el));
     if (existIndex !== -1) {
       // 再次点击取消选中
       if (this.selectedElList.length > 1) {