@tmagic/stage 1.2.6 → 1.2.8

package/dist/tmagic-stage.umd.cjs

@@ -1,15 +1,15 @@
 (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'), require('moveable-helper'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', 'keycon', 'lodash-es', '@tmagic/core', '@tmagic/utils', 'moveable', 'moveable-helper', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.KeyController, global.lodashEs, global.core, global.utils, global.Moveable, global.MoveableHelper, global.Guides));
-})(this, (function (exports, EventEmitter, KeyController, lodashEs, core, utils, Moveable, MoveableHelper, Guides) { 'use strict';
+  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';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
   const EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
-  const Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
   const MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
+  const Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
   const Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
 
   const GHOST_EL_ID_PREFIX = "ghost_el_";
@@ -475,6 +475,29 @@
       });
       this.moveableHelper.onDragGroup(e);
     }
+    getUpdatedElRect(el, parentEl, doc) {
+      const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: el.offsetLeft, top: el.offsetTop };
+      let left = calcValueByFontsize(doc, offset.left);
+      let top = calcValueByFontsize(doc, offset.top);
+      const width = calcValueByFontsize(doc, el.clientWidth);
+      const height = calcValueByFontsize(doc, el.clientHeight);
+      let shadowEl = this.getShadowEl();
+      const shadowEls = this.getShadowEls();
+      if (shadowEls.length) {
+        shadowEl = shadowEls.find((item) => item.id.endsWith(el.id));
+      }
+      if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
+        const targetShadowHtmlEl = shadowEl;
+        const targetShadowElOffsetLeft = targetShadowHtmlEl.offsetLeft || 0;
+        const targetShadowElOffsetTop = targetShadowHtmlEl.offsetTop || 0;
+        const frame = this.getFrame(shadowEl);
+        const [translateX, translateY] = frame?.properties.transform.translate.value;
+        const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+        left = calcValueByFontsize(doc, targetShadowElOffsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
+        top = calcValueByFontsize(doc, targetShadowElOffsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
+      }
+      return { width, height, left, top };
+    }
     setFramesSnapShot(events) {
       if (this.framesSnapShot.length > 0)
         return;
@@ -519,9 +542,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 +594,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 +619,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 +757,9 @@
         },
         isDisplayInnerSnapDigit: true,
         props: {
-          selectParent: true
+          actions: true
         },
-        ables: [selectParentAbles(this.selectParentHandler.bind(this))]
+        ables: [MoveableActionsAble(this.actionHandler.bind(this))]
       };
     }
     getMultiOptions() {
@@ -702,8 +778,8 @@
       }
       return this.customizedOptions;
     }
-    selectParentHandler() {
-      this.emit("select-parent");
+    actionHandler(type) {
+      this.emit(type);
     }
     createGuidelineElements(selectedElList, allElList) {
       const frame = globalThis.document.createDocumentFragment();
@@ -728,23 +804,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;
@@ -760,16 +819,16 @@
       this.markContainerEnd = config.markContainerEnd;
       this.delayedMarkContainer = config.delayedMarkContainer;
       this.disabledDragStart = config.disabledDragStart;
-      this.dragResizeHelper = new DragResizeHelper({
-        container: config.container,
-        updateDragEl: config.updateDragEl
-      });
+      this.dragResizeHelper = config.dragResizeHelper;
       this.on("update-moveable", () => {
         if (this.moveable) {
           this.updateMoveable();
         }
       });
     }
+    getTarget() {
+      return this.target;
+    }
     select(el, event) {
       if (!this.moveable || el !== this.target) {
         this.initMoveable(el);
@@ -967,27 +1026,12 @@
       const doc = this.getRenderDocument();
       if (!doc)
         return;
-      const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
-      let left = calcValueByFontsize(doc, offset.left);
-      let top = calcValueByFontsize(doc, offset.top);
-      const width = calcValueByFontsize(doc, this.target.clientWidth);
-      const height = calcValueByFontsize(doc, this.target.clientHeight);
-      const shadowEl = this.dragResizeHelper.getShadowEl();
-      if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
-        const targetShadowHtmlEl = shadowEl;
-        const targetShadowElOffsetLeft = targetShadowHtmlEl.offsetLeft || 0;
-        const targetShadowElOffsetTop = targetShadowHtmlEl.offsetTop || 0;
-        const frame = this.dragResizeHelper.getFrame(shadowEl);
-        const [translateX, translateY] = frame?.properties.transform.translate.value;
-        const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-        left = calcValueByFontsize(doc, targetShadowElOffsetLeft) + parseFloat(translateX) - calcValueByFontsize(doc, parentLeft);
-        top = calcValueByFontsize(doc, targetShadowElOffsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
-      }
+      const rect = this.dragResizeHelper.getUpdatedElRect(this.target, parentEl, doc);
       this.emit("update", {
         data: [
           {
             el: this.target,
-            style: isResize ? { left, top, width, height } : { left, top }
+            style: isResize ? rect : { left: rect.left, top: rect.top }
           }
         ],
         parentEl
@@ -1044,6 +1088,8 @@
     dragStatus = StageDragStatus.END;
     dragResizeHelper;
     getRenderDocument;
+    delayedMarkContainer;
+    markContainerEnd;
     constructor(config) {
       const moveableOptionsManagerConfig = {
         container: config.container,
@@ -1051,12 +1097,11 @@
         getRootContainer: config.getRootContainer
       };
       super(moveableOptionsManagerConfig);
+      this.delayedMarkContainer = config.delayedMarkContainer;
+      this.markContainerEnd = config.markContainerEnd;
       this.container = config.container;
       this.getRenderDocument = config.getRenderDocument;
-      this.dragResizeHelper = new DragResizeHelper({
-        container: config.container,
-        updateDragEl: config.updateDragEl
-      });
+      this.dragResizeHelper = config.dragResizeHelper;
       this.on("update-moveable", () => {
         if (this.moveableForMulti) {
           this.updateMoveable();
@@ -1080,6 +1125,7 @@
           target: this.dragResizeHelper.getShadowEls()
         })
       );
+      let timeout;
       this.moveableForMulti.on("resizeGroupStart", (e) => {
         this.dragResizeHelper.onResizeGroupStart(e);
         this.dragStatus = StageDragStatus.START;
@@ -1093,10 +1139,16 @@
         this.dragResizeHelper.onDragGroupStart(e);
         this.dragStatus = StageDragStatus.START;
       }).on("dragGroup", (e) => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
+        timeout = this.delayedMarkContainer(e.inputEvent, this.targetList);
         this.dragResizeHelper.onDragGroup(e);
         this.dragStatus = StageDragStatus.ING;
       }).on("dragGroupEnd", () => {
-        this.update();
+        const parentEl = this.markContainerEnd();
+        this.update(false, parentEl);
         this.dragStatus = StageDragStatus.END;
       }).on("clickGroup", (e) => {
         const { inputTarget, targets } = e;
@@ -1148,23 +1200,20 @@
       this.moveableForMulti?.destroy();
       this.dragResizeHelper.destroy();
     }
-    update(isResize = false) {
+    update(isResize = false, parentEl = null) {
       if (this.targetList.length === 0)
         return;
       const doc = this.getRenderDocument();
       if (!doc)
         return;
       const data = this.targetList.map((targetItem) => {
-        const left = calcValueByFontsize(doc, targetItem.offsetLeft);
-        const top = calcValueByFontsize(doc, targetItem.offsetTop);
-        const width = calcValueByFontsize(doc, targetItem.clientWidth);
-        const height = calcValueByFontsize(doc, targetItem.clientHeight);
+        const rect = this.dragResizeHelper.getUpdatedElRect(targetItem, parentEl, doc);
         return {
           el: targetItem,
-          style: isResize ? { left, top, width, height } : { left, top }
+          style: isResize ? rect : { left: rect.left, top: rect.top }
         };
       });
-      this.emit("update", data, null);
+      this.emit("update", { data, parentEl });
     }
   }
 
@@ -1207,27 +1256,28 @@
       this.canSelect = config.canSelect || ((el) => !!el.id);
       this.getRenderDocument = config.getRenderDocument;
       this.isContainer = config.isContainer;
+      const createDrHelper = () => new DragResizeHelper({
+        container: config.container,
+        updateDragEl: config.updateDragEl
+      });
       this.dr = new StageDragResize({
         container: config.container,
         disabledDragStart: config.disabledDragStart,
+        moveableOptions: this.changeCallback(config.moveableOptions),
+        dragResizeHelper: createDrHelper(),
         getRootContainer: config.getRootContainer,
         getRenderDocument: config.getRenderDocument,
-        updateDragEl: config.updateDragEl,
-        markContainerEnd: () => this.markContainerEnd(),
-        delayedMarkContainer: (event, exclude) => {
-          if (this.canAddToContainer()) {
-            return this.delayedMarkContainer(event, exclude);
-          }
-          return void 0;
-        },
-        moveableOptions: this.changeCallback(config.moveableOptions)
+        markContainerEnd: this.markContainerEnd.bind(this),
+        delayedMarkContainer: this.delayedMarkContainer.bind(this)
       });
       this.multiDr = new StageMultiDragResize({
         container: config.container,
         multiMoveableOptions: config.multiMoveableOptions,
+        dragResizeHelper: createDrHelper(),
         getRootContainer: config.getRootContainer,
         getRenderDocument: config.getRenderDocument,
-        updateDragEl: config.updateDragEl
+        markContainerEnd: this.markContainerEnd.bind(this),
+        delayedMarkContainer: this.delayedMarkContainer.bind(this)
       });
       this.highlightLayer = new StageHighlight({
         container: config.container,
@@ -1353,9 +1403,12 @@
       }
     }
     delayedMarkContainer(event, excludeElList = []) {
-      return globalThis.setTimeout(() => {
-        this.addContainerHighlightClassName(event, excludeElList);
-      }, this.containerHighlightDuration);
+      if (this.canAddToContainer()) {
+        return globalThis.setTimeout(() => {
+          this.addContainerHighlightClassName(event, excludeElList);
+        }, this.containerHighlightDuration);
+      }
+      return void 0;
     }
     destroy() {
       this.container.removeEventListener("mousedown", this.mouseDownHandler);
@@ -1442,9 +1495,17 @@
         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);
+      this.multiDr.on("update", (data) => {
+        this.emit("multi-update", data);
       }).on("change-to-select", async (id) => {
         if (this.isMultiSelectStatus)
           return false;
@@ -2145,14 +2206,16 @@
         this.emit("sort", data);
       }).on("select-parent", () => {
         this.emit("select-parent");
+      }).on("remove", (data) => {
+        this.emit("remove", data);
       });
     }
     initMulDrEvent() {
       this.actionManager.on("change-to-select", (el) => {
         this.select(el);
         setTimeout(() => this.emit("select", el));
-      }).on("multi-update", (data, parentEl) => {
-        this.emit("update", { data, parentEl });
+      }).on("multi-update", (data) => {
+        this.emit("update", data);
       });
     }
     initHighlightEvent() {
@@ -2162,6 +2225,7 @@
     }
   }
 
+  exports.AbleActionEventType = AbleActionEventType;
   exports.CONTAINER_HIGHLIGHT_CLASS_NAME = CONTAINER_HIGHLIGHT_CLASS_NAME;
   exports.ContainerHighlightType = ContainerHighlightType;
   exports.DEFAULT_ZOOM = DEFAULT_ZOOM;