@tmagic/stage 1.2.6 → 1.2.7

package/dist/tmagic-stage.js

@@ -514,9 +514,33 @@ class DragResizeHelper {
   }
 }
 
-const selectParentAbles = (selectParentHandler) => ({
-  name: "select-parent",
-  props: {},
+var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+  ContainerHighlightType2["DEFAULT"] = "default";
+  ContainerHighlightType2["ALT"] = "alt";
+  return ContainerHighlightType2;
+})(ContainerHighlightType || {});
+var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
+  SelectStatus2["SELECT"] = "select";
+  SelectStatus2["MULTI_SELECT"] = "multiSelect";
+  return SelectStatus2;
+})(SelectStatus || {});
+var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+  StageDragStatus2["START"] = "start";
+  StageDragStatus2["ING"] = "ing";
+  StageDragStatus2["END"] = "end";
+  return StageDragStatus2;
+})(StageDragStatus || {});
+var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
+  AbleActionEventType2["SELECT_PARENT"] = "select-parent";
+  AbleActionEventType2["REMOVE"] = "remove";
+  return AbleActionEventType2;
+})(AbleActionEventType || {});
+
+const MoveableActionsAble = (handler) => ({
+  name: "actions",
+  props: {
+    selectParent: Boolean
+  },
   events: {},
   render(moveable, React) {
     const rect = moveable.getRect();
@@ -542,6 +566,23 @@ const selectParentAbles = (selectParentHandler) => ({
         color: white;
         font-size: 12px;
         font-weight: bold;
+        margin-left: 2px;
+        position: relative;
+      }
+      .moveable-remove-button:before, .moveable-remove-button:after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) rotate(45deg);
+        width: 14px;
+        height: 2px;
+        background: #fff;
+        border-radius: 1px;
+        cursor: pointer;
+      }
+      .moveable-remove-button:after {
+        transform: translate(-50%, -50%) rotate(-45deg);
       }
       `
     );
@@ -550,37 +591,49 @@ const selectParentAbles = (selectParentHandler) => ({
       {
         className: "moveable-editable",
         style: {
-          transform: `translate(${pos2[0] - 25}px, ${pos2[1] - 30}px) rotate(${rect.rotation}deg) translate(10px)`
+          transform: `translate(${pos2[0] - 48}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg) translate(10px)`
         }
       },
-      React.createElement(
-        "button",
-        {
-          className: "moveable-button",
-          title: "\u9009\u4E2D\u7236\u7EC4\u4EF6",
-          onClick: () => {
-            selectParentHandler();
-          }
-        },
+      [
         React.createElement(
-          "svg",
+          "button",
           {
-            width: "1em",
-            height: "1em",
-            viewBox: "0 0 16 16",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            style: {
-              transform: "rotate(90deg)"
+            className: "moveable-button",
+            title: "\u9009\u4E2D\u7236\u7EC4\u4EF6",
+            onClick: () => {
+              handler(AbleActionEventType.SELECT_PARENT);
             }
           },
-          React.createElement("path", {
-            d: "M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z",
-            fill: "currentColor",
-            fillOpacity: "0.9"
-          })
-        )
-      )
+          React.createElement(
+            "svg",
+            {
+              width: "20px",
+              height: "20px",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              style: {
+                transform: "rotate(90deg)",
+                position: "absolute",
+                left: 0,
+                top: 0
+              }
+            },
+            React.createElement("path", {
+              d: "M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z",
+              fill: "currentColor",
+              fillOpacity: "0.9"
+            })
+          )
+        ),
+        React.createElement("button", {
+          className: "moveable-button moveable-remove-button",
+          title: "\u5220\u9664",
+          onClick: () => {
+            handler(AbleActionEventType.REMOVE);
+          }
+        })
+      ]
     );
   }
 });
@@ -676,9 +729,9 @@ class MoveableOptionsManager extends EventEmitter {
       },
       isDisplayInnerSnapDigit: true,
       props: {
-        selectParent: true
+        actions: true
       },
-      ables: [selectParentAbles(this.selectParentHandler.bind(this))]
+      ables: [MoveableActionsAble(this.actionHandler.bind(this))]
     };
   }
   getMultiOptions() {
@@ -697,8 +750,8 @@ class MoveableOptionsManager extends EventEmitter {
     }
     return this.customizedOptions;
   }
-  selectParentHandler() {
-    this.emit("select-parent");
+  actionHandler(type) {
+    this.emit(type);
   }
   createGuidelineElements(selectedElList, allElList) {
     const frame = globalThis.document.createDocumentFragment();
@@ -723,23 +776,6 @@ class MoveableOptionsManager extends EventEmitter {
   }
 }
 
-var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-  ContainerHighlightType2["DEFAULT"] = "default";
-  ContainerHighlightType2["ALT"] = "alt";
-  return ContainerHighlightType2;
-})(ContainerHighlightType || {});
-var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
-  SelectStatus2["SELECT"] = "select";
-  SelectStatus2["MULTI_SELECT"] = "multiSelect";
-  return SelectStatus2;
-})(SelectStatus || {});
-var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
-  StageDragStatus2["START"] = "start";
-  StageDragStatus2["ING"] = "ing";
-  StageDragStatus2["END"] = "end";
-  return StageDragStatus2;
-})(StageDragStatus || {});
-
 class StageDragResize extends MoveableOptionsManager {
   target;
   moveable;
@@ -765,6 +801,9 @@ class StageDragResize extends MoveableOptionsManager {
       }
     });
   }
+  getTarget() {
+    return this.target;
+  }
   select(el, event) {
     if (!this.moveable || el !== this.target) {
       this.initMoveable(el);
@@ -1437,6 +1476,14 @@ class ActionManager extends EventEmitter {
       setTimeout(() => this.emit("sort", data));
     }).on("select-parent", () => {
       this.emit("select-parent");
+    }).on("remove", () => {
+      const drTarget = this.dr.getTarget();
+      if (!drTarget)
+        return;
+      const data = {
+        data: [{ el: drTarget }]
+      };
+      this.emit("remove", data);
     });
     this.multiDr.on("update", (data, parentEl) => {
       this.emit("multi-update", data, parentEl);
@@ -2140,6 +2187,8 @@ class StageCore extends EventEmitter$1 {
       this.emit("sort", data);
     }).on("select-parent", () => {
       this.emit("select-parent");
+    }).on("remove", (data) => {
+      this.emit("remove", data);
     });
   }
   initMulDrEvent() {
@@ -2157,5 +2206,5 @@ class StageCore extends EventEmitter$1 {
   }
 }
 
-export { CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
+export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
 //# sourceMappingURL=tmagic-stage.js.map