@tmagic/stage 1.2.6 → 1.2.8

package/dist/tmagic-stage.js

@@ -3,8 +3,8 @@ import KeyController from 'keycon';
 import { merge, throttle } from 'lodash-es';
 import { Env } from '@tmagic/core';
 import { removeClassName, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
-import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
+import Moveable from 'moveable';
 import Guides from '@scena/guides';
 
 const GHOST_EL_ID_PREFIX = "ghost_el_";
@@ -470,6 +470,29 @@ class DragResizeHelper {
     });
     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;
@@ -514,9 +537,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 +589,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 +614,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 +752,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 +773,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 +799,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;
@@ -755,16 +814,16 @@ class StageDragResize extends MoveableOptionsManager {
     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);
@@ -962,27 +1021,12 @@ class StageDragResize extends MoveableOptionsManager {
     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
@@ -1039,6 +1083,8 @@ class StageMultiDragResize extends MoveableOptionsManager {
   dragStatus = StageDragStatus.END;
   dragResizeHelper;
   getRenderDocument;
+  delayedMarkContainer;
+  markContainerEnd;
   constructor(config) {
     const moveableOptionsManagerConfig = {
       container: config.container,
@@ -1046,12 +1092,11 @@ class StageMultiDragResize extends MoveableOptionsManager {
       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();
@@ -1075,6 +1120,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
         target: this.dragResizeHelper.getShadowEls()
       })
     );
+    let timeout;
     this.moveableForMulti.on("resizeGroupStart", (e) => {
       this.dragResizeHelper.onResizeGroupStart(e);
       this.dragStatus = StageDragStatus.START;
@@ -1088,10 +1134,16 @@ class StageMultiDragResize extends MoveableOptionsManager {
       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;
@@ -1143,23 +1195,20 @@ class StageMultiDragResize extends MoveableOptionsManager {
     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 });
   }
 }
 
@@ -1202,27 +1251,28 @@ class ActionManager extends EventEmitter {
     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,
@@ -1348,9 +1398,12 @@ class ActionManager extends EventEmitter {
     }
   }
   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);
@@ -1437,9 +1490,17 @@ 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);
+    this.multiDr.on("update", (data) => {
+      this.emit("multi-update", data);
     }).on("change-to-select", async (id) => {
       if (this.isMultiSelectStatus)
         return false;
@@ -2140,14 +2201,16 @@ class StageCore extends EventEmitter$1 {
       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() {
@@ -2157,5 +2220,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