@tmagic/stage 1.5.0-beta.8 → 1.5.0

package/dist/tmagic-stage.js

@@ -1,5 +1,5 @@
 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 { removeClassName, getIdFromEl, guid, setIdToEl, 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';
@@ -43,6 +43,7 @@ const SELECTED_CLASS = "tmagic-stage-selected-area";
 var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
   AbleActionEventType2["SELECT_PARENT"] = "select-parent";
   AbleActionEventType2["REMOVE"] = "remove";
+  AbleActionEventType2["RERENDER"] = "rerender";
   return AbleActionEventType2;
 })(AbleActionEventType || {});
 var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
@@ -179,7 +180,7 @@ const down = (deltaTop, target) => {
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+    (child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
   );
   const index = brothers.indexOf(target);
   const downEls = brothers.slice(index + 1);
@@ -195,14 +196,15 @@ const down = (deltaTop, target) => {
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+  const src = getIdFromEl()(target) || "";
   return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+    src,
+    dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || "" : src
   };
 };
 const up = (deltaTop, target) => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+    (child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
   );
   const index = brothers.indexOf(target);
   const upEls = brothers.slice(0, index);
@@ -217,9 +219,10 @@ const up = (deltaTop, target) => {
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+  const src = getIdFromEl()(target) || "";
   return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+    src,
+    dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || "" : src
   };
 };
 const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
@@ -329,7 +332,6 @@ class TargetShadow {
   };
 }
 
-const getId = getIdFromEl();
 class DragResizeHelper {
   /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
   targetShadow;
@@ -489,14 +491,16 @@ class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+        (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
+      );
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -516,14 +520,16 @@ class DragResizeHelper {
     const { events } = e;
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id)
+        (frameItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id)
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(targetItem) && getId(ev.target)?.endsWith(getId(targetItem))
+        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(targetItem) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem))
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
+      );
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -542,7 +548,7 @@ class DragResizeHelper {
     let shadowEl = this.getShadowEl();
     const shadowEls = this.getShadowEls();
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
+      shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ""));
     }
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
       const targetShadowHtmlEl = shadowEl;
@@ -563,10 +569,10 @@ class DragResizeHelper {
     if (this.framesSnapShot.length > 0) return;
     events.forEach((ev) => {
       const matchEventTarget = this.targetList.find(
-        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || "")
+        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || "")
       );
       if (!matchEventTarget) return;
-      const id = getId(matchEventTarget);
+      const id = getIdFromEl()(matchEventTarget);
       id && this.framesSnapShot.push({
         left: matchEventTarget.offsetLeft,
         top: matchEventTarget.offsetTop,
@@ -581,35 +587,26 @@ class DragResizeHelper {
     if (this.ghostEl) {
       this.destroyGhostEl();
     }
-    const ghostEl = el.cloneNode(true);
-    this.setGhostElChildrenId(ghostEl);
+    const ghostEl = document.createElement("div");
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-    ghostEl.style.zIndex = ZIndex.GHOST_EL;
-    ghostEl.style.opacity = ".5";
-    ghostEl.style.position = "absolute";
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    ghostEl.style.marginLeft = "0";
-    ghostEl.style.marginTop = "0";
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
+    ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
     el.after(ghostEl);
     return ghostEl;
   }
-  setGhostElChildrenId(el) {
-    for (const child of Array.from(el.children)) {
-      const el2 = child;
-      const id = getId(el2);
-      if (id) {
-        setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
-      }
-      if (child.children.length) {
-        this.setGhostElChildrenId(child);
-      }
-    }
-  }
 }
 
-const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n";
+const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n  cursor: pointer;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n.moveable-rerender-button img {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n";
 
 const MoveableActionsAble = (handler, customizedButton = []) => ({
   name: "actions",
@@ -646,6 +643,21 @@ const MoveableActionsAble = (handler, customizedButton = []) => ({
           const options = buttonRenderer(React);
           return React.createElement("button", options.props || {}, ...options.children || []);
         }),
+        React.createElement(
+          "button",
+          {
+            className: "moveable-button moveable-rerender-button",
+            title: "重新收集依赖后渲染",
+            onClick: () => {
+              handler(AbleActionEventType.RERENDER);
+            }
+          },
+          React.createElement("img", {
+            src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLXJlcGxhY2UiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2ZmZmZmZiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIgLz4KICA8cmVjdCB4PSIxNSIgeT0iMTUiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiAvPgogIDxwYXRoIGQ9Ik0yMSAxMXYtM2EyIDIgMCAwIDAgLTIgLTJoLTZsMyAzbTAgLTZsLTMgMyIgLz4KICA8cGF0aCBkPSJNMyAxM3YzYTIgMiAwIDAgMCAyIDJoNmwtMyAtM20wIDZsMyAtMyIgLz4KPC9zdmc+CgoK",
+            width: "16",
+            height: "16"
+          })
+        ),
         React.createElement(
           "button",
           {
@@ -1689,6 +1701,8 @@ class ActionManager extends EventEmitter {
         data: [{ el: drTarget }]
       };
       this.emit("remove", data);
+    }).on(AbleActionEventType.RERENDER, () => {
+      this.emit("rerender");
     }).on("drag-start", (e) => {
       this.emit("drag-start", e);
     });
@@ -2712,6 +2726,8 @@ class StageCore extends EventEmitter$1 {
       this.emit("sort", data);
     }).on("select-parent", () => {
       this.emit("select-parent");
+    }).on("rerender", () => {
+      this.emit("rerender");
     }).on("remove", (data) => {
       this.emit("remove", data);
     });

package/dist/tmagic-stage.umd.cjs

@@ -39,6 +39,7 @@
   var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
     AbleActionEventType2["SELECT_PARENT"] = "select-parent";
     AbleActionEventType2["REMOVE"] = "remove";
+    AbleActionEventType2["RERENDER"] = "rerender";
     return AbleActionEventType2;
   })(AbleActionEventType || {});
   var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
@@ -175,7 +176,7 @@
     let swapIndex = 0;
     let addUpH = target.clientHeight;
     const brothers = Array.from(target.parentNode?.children || []).filter(
-      (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+      (child) => !utils.getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
     );
     const index = brothers.indexOf(target);
     const downEls = brothers.slice(index + 1);
@@ -191,14 +192,15 @@
       addUpH += ele.clientHeight / 2;
       swapIndex = i;
     }
+    const src = utils.getIdFromEl()(target) || "";
     return {
-      src: target.id,
-      dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+      src,
+      dist: downEls.length && swapIndex > -1 ? utils.getIdFromEl()(downEls[swapIndex]) || "" : src
     };
   };
   const up = (deltaTop, target) => {
     const brothers = Array.from(target.parentNode?.children || []).filter(
-      (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+      (child) => !utils.getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
     );
     const index = brothers.indexOf(target);
     const upEls = brothers.slice(0, index);
@@ -213,9 +215,10 @@
       addUpH += ele.clientHeight / 2;
       swapIndex = i;
     }
+    const src = utils.getIdFromEl()(target) || "";
     return {
-      src: target.id,
-      dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+      src,
+      dist: upEls.length && swapIndex > -1 ? utils.getIdFromEl()(upEls[swapIndex]) || "" : src
     };
   };
   const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
@@ -325,7 +328,6 @@
     };
   }
 
-  const getId = utils.getIdFromEl();
   class DragResizeHelper {
     /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
     targetShadow;
@@ -485,14 +487,16 @@
       events.forEach((ev) => {
         const { width, height, beforeTranslate } = ev.drag;
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+          (frameItem) => frameItem.id === utils.getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
         );
         if (!frameSnapShot) return;
         const targeEl = this.targetList.find(
-          (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+          (targetItem) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
         );
         if (!targeEl) return;
-        const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+        const isParentIncluded = this.targetList.find(
+          (targetItem) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(targeEl.parentElement)
+        );
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -512,14 +516,16 @@
       const { events } = e;
       events.forEach((ev) => {
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id)
+          (frameItem) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(ev.target)?.endsWith(frameItem.id)
         );
         if (!frameSnapShot) return;
         const targeEl = this.targetList.find(
-          (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(targetItem) && getId(ev.target)?.endsWith(getId(targetItem))
+          (targetItem) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(targetItem) && utils.getIdFromEl()(ev.target)?.endsWith(utils.getIdFromEl()(targetItem))
         );
         if (!targeEl) return;
-        const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+        const isParentIncluded = this.targetList.find(
+          (targetItem) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(targeEl.parentElement)
+        );
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -538,7 +544,7 @@
       let shadowEl = this.getShadowEl();
       const shadowEls = this.getShadowEls();
       if (shadowEls.length) {
-        shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
+        shadowEl = shadowEls.find((item) => utils.getIdFromEl()(item)?.endsWith(utils.getIdFromEl()(el) || ""));
       }
       if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
         const targetShadowHtmlEl = shadowEl;
@@ -559,10 +565,10 @@
       if (this.framesSnapShot.length > 0) return;
       events.forEach((ev) => {
         const matchEventTarget = this.targetList.find(
-          (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || "")
+          (targetItem) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(ev.target)?.endsWith(utils.getIdFromEl()(targetItem) || "")
         );
         if (!matchEventTarget) return;
-        const id = getId(matchEventTarget);
+        const id = utils.getIdFromEl()(matchEventTarget);
         id && this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
           top: matchEventTarget.offsetTop,
@@ -577,35 +583,26 @@
       if (this.ghostEl) {
         this.destroyGhostEl();
       }
-      const ghostEl = el.cloneNode(true);
-      this.setGhostElChildrenId(ghostEl);
+      const ghostEl = document.createElement("div");
       const { top, left } = getAbsolutePosition(el, getOffset(el));
-      utils.setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-      ghostEl.style.zIndex = ZIndex.GHOST_EL;
-      ghostEl.style.opacity = ".5";
-      ghostEl.style.position = "absolute";
-      ghostEl.style.left = `${left}px`;
-      ghostEl.style.top = `${top}px`;
-      ghostEl.style.marginLeft = "0";
-      ghostEl.style.marginTop = "0";
+      utils.setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${utils.getIdFromEl()(el)}`);
+      ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
       el.after(ghostEl);
       return ghostEl;
     }
-    setGhostElChildrenId(el) {
-      for (const child of Array.from(el.children)) {
-        const el2 = child;
-        const id = getId(el2);
-        if (id) {
-          utils.setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
-        }
-        if (child.children.length) {
-          this.setGhostElChildrenId(child);
-        }
-      }
-    }
   }
 
-  const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n";
+  const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n  cursor: pointer;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n.moveable-rerender-button img {\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n";
 
   const MoveableActionsAble = (handler, customizedButton = []) => ({
     name: "actions",
@@ -642,6 +639,21 @@
             const options = buttonRenderer(React);
             return React.createElement("button", options.props || {}, ...options.children || []);
           }),
+          React.createElement(
+            "button",
+            {
+              className: "moveable-button moveable-rerender-button",
+              title: "重新收集依赖后渲染",
+              onClick: () => {
+                handler(AbleActionEventType.RERENDER);
+              }
+            },
+            React.createElement("img", {
+              src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLXJlcGxhY2UiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2ZmZmZmZiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIgLz4KICA8cmVjdCB4PSIxNSIgeT0iMTUiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiAvPgogIDxwYXRoIGQ9Ik0yMSAxMXYtM2EyIDIgMCAwIDAgLTIgLTJoLTZsMyAzbTAgLTZsLTMgMyIgLz4KICA8cGF0aCBkPSJNMyAxM3YzYTIgMiAwIDAgMCAyIDJoNmwtMyAtM20wIDZsMyAtMyIgLz4KPC9zdmc+CgoK",
+              width: "16",
+              height: "16"
+            })
+          ),
           React.createElement(
             "button",
             {
@@ -1685,6 +1697,8 @@
           data: [{ el: drTarget }]
         };
         this.emit("remove", data);
+      }).on(AbleActionEventType.RERENDER, () => {
+        this.emit("rerender");
       }).on("drag-start", (e) => {
         this.emit("drag-start", e);
       });
@@ -2708,6 +2722,8 @@
         this.emit("sort", data);
       }).on("select-parent", () => {
         this.emit("select-parent");
+      }).on("rerender", () => {
+        this.emit("rerender");
       }).on("remove", (data) => {
         this.emit("remove", data);
       });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.8",
+  "version": "1.5.0",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -23,6 +23,7 @@
     "node": ">=18"
   },
   "repository": {
+    "directory": "packages/stage",
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
@@ -41,13 +42,13 @@
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
     "sass": "^1.78.0",
-    "vite": "^5.4.3"
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/schema": "1.5.0-beta.8",
-    "@tmagic/core": "1.5.0-beta.8",
-    "@tmagic/utils": "1.5.0-beta.8"
+    "@tmagic/core": "1.5.0",
+    "@tmagic/utils": "1.5.0",
+    "@tmagic/schema": "1.5.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionManager.ts

@@ -445,6 +445,9 @@ export default class ActionManager extends EventEmitter {
         };
         this.emit('remove', data);
       })
+      .on(AbleActionEventType.RERENDER, () => {
+        this.emit('rerender');
+      })
       .on('drag-start', (e: OnDragStart) => {
         this.emit('drag-start', e);
       });

package/src/DragResizeHelper.ts

@@ -39,8 +39,6 @@ import TargetShadow from './TargetShadow';
 import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
 
-const getId = getIdFromEl();
-
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
  * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
@@ -243,15 +241,17 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
+        (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),
+      );
 
       if (!isParentIncluded) {
         // 更新页面元素位置
@@ -281,18 +281,21 @@ export default class DragResizeHelper {
     // 拖动过程更新
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id),
+        (frameItem) =>
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
         (targetItem) =>
-          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
-          getId(targetItem) &&
-          getId(ev.target)?.endsWith(getId(targetItem)!),
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getIdFromEl()(targetItem) &&
+          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem)!),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),
+      );
       if (!isParentIncluded) {
         // 更新页面元素位置
         const { marginLeft, marginTop } = getMarginValue(targeEl);
@@ -319,7 +322,7 @@ export default class DragResizeHelper {
     const shadowEls = this.getShadowEls();
 
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ''));
+      shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ''));
     }
 
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
@@ -356,11 +359,12 @@ export default class DragResizeHelper {
       // 实际目标元素
       const matchEventTarget = this.targetList.find(
         (targetItem) =>
-          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || ''),
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || ''),
       );
       if (!matchEventTarget) return;
 
-      const id = getId(matchEventTarget);
+      const id = getIdFromEl()(matchEventTarget);
       id &&
         this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
@@ -378,32 +382,24 @@ export default class DragResizeHelper {
       this.destroyGhostEl();
     }
 
-    const ghostEl = el.cloneNode(true) as HTMLElement;
-    this.setGhostElChildrenId(ghostEl);
+    const ghostEl = document.createElement('div') as HTMLElement;
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-    ghostEl.style.zIndex = ZIndex.GHOST_EL;
-    ghostEl.style.opacity = '.5';
-    ghostEl.style.position = 'absolute';
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    ghostEl.style.marginLeft = '0';
-    ghostEl.style.marginTop = '0';
-    el.after(ghostEl);
-    return ghostEl;
-  }
 
-  private setGhostElChildrenId(el: Element): void {
-    for (const child of Array.from(el.children)) {
-      const el = child as HTMLElement;
-      const id = getId(el);
-      if (id) {
-        setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
-      }
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
+
+    ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
+    el.after(ghostEl);
 
-      if (child.children.length) {
-        this.setGhostElChildrenId(child);
-      }
-    }
+    return ghostEl;
   }
 }

package/src/MoveableActionsAble.ts

@@ -57,6 +57,21 @@ export default (
           return React.createElement('button', options.props || {}, ...(options.children || []));
         }),
 
+        React.createElement(
+          'button',
+          {
+            className: 'moveable-button moveable-rerender-button',
+            title: '重新收集依赖后渲染',
+            onClick: () => {
+              handler(AbleActionEventType.RERENDER);
+            },
+          },
+          React.createElement('img', {
+            src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLXJlcGxhY2UiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI2ZmZmZmZiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIgLz4KICA8cmVjdCB4PSIxNSIgeT0iMTUiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiAvPgogIDxwYXRoIGQ9Ik0yMSAxMXYtM2EyIDIgMCAwIDAgLTIgLTJoLTZsMyAzbTAgLTZsLTMgMyIgLz4KICA8cGF0aCBkPSJNMyAxM3YzYTIgMiAwIDAgMCAyIDJoNmwtMyAtM20wIDZsMyAtMyIgLz4KPC9zdmc+CgoK',
+            width: '16',
+            height: '16',
+          }),
+        ),
         React.createElement(
           'button',
           {

package/src/StageCore.ts

@@ -373,6 +373,9 @@ export default class StageCore extends EventEmitter {
       .on('select-parent', () => {
         this.emit('select-parent');
       })
+      .on('rerender', () => {
+        this.emit('rerender');
+      })
       .on('remove', (data: RemoveEventData) => {
         this.emit('remove', data);
       });

package/src/StageDragResize.ts

@@ -22,7 +22,7 @@ import Moveable, { MoveableOptions } from 'moveable';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { Mode, StageDragStatus } from './const';
-import DragResizeHelper from './DragResizeHelper';
+import type DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
 import type {
   DelayedMarkContainer,

package/src/const.ts

@@ -77,6 +77,7 @@ export const SELECTED_CLASS = 'tmagic-stage-selected-area';
 export enum AbleActionEventType {
   SELECT_PARENT = 'select-parent',
   REMOVE = 'remove',
+  RERENDER = 'rerender',
 }
 
 /** 将组件添加到容器的方式 */

package/src/moveable-able.css

@@ -10,6 +10,7 @@
   font-weight: bold;
   margin-left: 2px;
   position: relative;
+  cursor: pointer;
 }
 .moveable-remove-button:before, .moveable-remove-button:after {
   content: "";
@@ -106,3 +107,8 @@
   top: 50%;;
 }
 
+.moveable-rerender-button img {
+  position: absolute;
+  left: 2px;
+  top: 2px;
+}

package/src/types.ts

@@ -251,6 +251,7 @@ export interface CoreEvents {
   update: [data: UpdateEventData];
   sort: [data: SortEventData];
   'select-parent': [];
+  rerender: [];
   remove: [data: RemoveEventData];
   highlight: [highlightEl: HTMLElement];
   mousemove: [event: MouseEvent];
@@ -283,6 +284,7 @@ export interface ActionManagerEvents {
   sort: [data: SortEventData];
   remove: [data: RemoveEventData];
   select: [selectedEl: HTMLElement | null, event: MouseEvent];
+  rerender: [];
   'select-parent': [];
   'drag-start': [event: OnDragStart];
   'multi-update': [data: UpdateEventData];
@@ -297,6 +299,7 @@ export interface DrEvents {
   'update-moveable': [];
   [AbleActionEventType.REMOVE]: [];
   [AbleActionEventType.SELECT_PARENT]: [];
+  [AbleActionEventType.RERENDER]: [];
   'drag-start': [event: OnDragStart];
   update: [data: UpdateEventData];
   sort: [data: SortEventData];

package/src/util.ts

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { removeClassName } from '@tmagic/utils';
+import { getIdFromEl, removeClassName } from '@tmagic/utils';
 
 import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
 import type { Offset, SortEventData, TargetElement } from './types';
@@ -170,7 +170,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+    (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX),
   );
   const index = brothers.indexOf(target);
   // 往下移动
@@ -189,9 +189,12 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+
+  const src = getIdFromEl()(target) || '';
+
   return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
+    src,
+    dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || '' : src,
   };
 };
 
@@ -204,7 +207,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
  */
 export const up = (deltaTop: number, target: TargetElement): SortEventData => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+    (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX),
   );
   const index = brothers.indexOf(target);
   // 往上移动
@@ -225,9 +228,12 @@ export const up = (deltaTop: number, target: TargetElement): SortEventData => {
 
     swapIndex = i;
   }
+
+  const src = getIdFromEl()(target) || '';
+
   return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
+    src,
+    dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || '' : src,
   };
 };
 

package/types/index.d.ts

@@ -1,3 +1,4 @@
+import * as _tmagic_editor from '@tmagic/editor';
 import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
 import { OnResizeStart, OnResize, OnDragStart, OnDrag, OnRotateStart, OnRotate, OnScaleStart, OnScale, OnResizeGroupStart, OnResizeGroup, OnDragGroupStart, OnDragGroup, MoveableOptions, Renderer, MoveableManagerInterface } from 'moveable';
 export * from 'moveable';
@@ -56,7 +57,8 @@ declare enum Mode {
 declare const SELECTED_CLASS = "tmagic-stage-selected-area";
 declare enum AbleActionEventType {
     SELECT_PARENT = "select-parent",
-    REMOVE = "remove"
+    REMOVE = "remove",
+    RERENDER = "rerender"
 }
 /** 将组件添加到容器的方式 */
 declare enum ContainerHighlightType {
@@ -151,7 +153,6 @@ declare class DragResizeHelper {
      * 流式布局把目标节点复制一份进行拖拽，在拖拽结束前不影响页面原布局样式
      */
     private generateGhostEl;
-    private setGhostElChildrenId;
 }
 
 type TargetElement = HTMLElement | SVGElement;
@@ -348,6 +349,7 @@ interface CoreEvents {
     update: [data: UpdateEventData];
     sort: [data: SortEventData];
     'select-parent': [];
+    rerender: [];
     remove: [data: RemoveEventData];
     highlight: [highlightEl: HTMLElement];
     mousemove: [event: MouseEvent];
@@ -377,6 +379,7 @@ interface ActionManagerEvents {
     sort: [data: SortEventData];
     remove: [data: RemoveEventData];
     select: [selectedEl: HTMLElement | null, event: MouseEvent];
+    rerender: [];
     'select-parent': [];
     'drag-start': [event: OnDragStart];
     'multi-update': [data: UpdateEventData];
@@ -390,6 +393,7 @@ interface DrEvents {
     'update-moveable': [];
     [AbleActionEventType.REMOVE]: [];
     [AbleActionEventType.SELECT_PARENT]: [];
+    [AbleActionEventType.RERENDER]: [];
     'drag-start': [event: OnDragStart];
     update: [data: UpdateEventData];
     sort: [data: SortEventData];
@@ -781,7 +785,7 @@ declare class StageCore extends EventEmitter$1 {
      */
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
-    getDragStatus(): StageDragStatus | undefined;
+    getDragStatus(): _tmagic_editor.StageDragStatus | undefined;
     disableMultiSelect(): void;
     enableMultiSelect(): void;
     /**