@tmagic/stage 1.5.0-beta.9 → 1.5.0

package/dist/tmagic-stage.js

@@ -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) => {
@@ -603,21 +604,9 @@ class DragResizeHelper {
     el.after(ghostEl);
     return ghostEl;
   }
-  setGhostElChildrenId(el) {
-    for (const child of Array.from(el.children)) {
-      const el2 = child;
-      const id = getIdFromEl()(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",
@@ -654,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",
           {
@@ -1697,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);
     });
@@ -2720,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) => {
@@ -599,21 +600,9 @@
       el.after(ghostEl);
       return ghostEl;
     }
-    setGhostElChildrenId(el) {
-      for (const child of Array.from(el.children)) {
-        const el2 = child;
-        const id = utils.getIdFromEl()(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",
@@ -650,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",
             {
@@ -1693,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);
       });
@@ -2716,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.9",
+  "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.9",
-    "@tmagic/core": "1.5.0-beta.9",
-    "@tmagic/utils": "1.5.0-beta.9"
+    "@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

@@ -402,18 +402,4 @@ export default class DragResizeHelper {
 
     return ghostEl;
   }
-
-  private setGhostElChildrenId(el: Element): void {
-    for (const child of Array.from(el.children)) {
-      const el = child as HTMLElement;
-      const id = getIdFromEl()(el);
-      if (id) {
-        setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
-      }
-
-      if (child.children.length) {
-        this.setGhostElChildrenId(child);
-      }
-    }
-  }
 }

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/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/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;
     /**