@tmagic/stage 1.2.6 → 1.2.7

package/dist/tmagic-stage.umd.cjs

@@ -519,9 +519,33 @@
     }
   }
 
-  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();
@@ -547,6 +571,23 @@
         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);
       }
       `
       );
@@ -555,37 +596,49 @@
         {
           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);
+            }
+          })
+        ]
       );
     }
   });
@@ -681,9 +734,9 @@
         },
         isDisplayInnerSnapDigit: true,
         props: {
-          selectParent: true
+          actions: true
         },
-        ables: [selectParentAbles(this.selectParentHandler.bind(this))]
+        ables: [MoveableActionsAble(this.actionHandler.bind(this))]
       };
     }
     getMultiOptions() {
@@ -702,8 +755,8 @@
       }
       return this.customizedOptions;
     }
-    selectParentHandler() {
-      this.emit("select-parent");
+    actionHandler(type) {
+      this.emit(type);
     }
     createGuidelineElements(selectedElList, allElList) {
       const frame = globalThis.document.createDocumentFragment();
@@ -728,23 +781,6 @@
     }
   }
 
-  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;
@@ -770,6 +806,9 @@
         }
       });
     }
+    getTarget() {
+      return this.target;
+    }
     select(el, event) {
       if (!this.moveable || el !== this.target) {
         this.initMoveable(el);
@@ -1442,6 +1481,14 @@
         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);
@@ -2145,6 +2192,8 @@
         this.emit("sort", data);
       }).on("select-parent", () => {
         this.emit("select-parent");
+      }).on("remove", (data) => {
+        this.emit("remove", data);
       });
     }
     initMulDrEvent() {
@@ -2162,6 +2211,7 @@
     }
   }
 
+  exports.AbleActionEventType = AbleActionEventType;
   exports.CONTAINER_HIGHLIGHT_CLASS_NAME = CONTAINER_HIGHLIGHT_CLASS_NAME;
   exports.ContainerHighlightType = ContainerHighlightType;
   exports.DEFAULT_ZOOM = DEFAULT_ZOOM;