@tmagic/stage 1.2.7 → 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;
@@ -791,10 +814,7 @@ 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();
@@ -1001,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
@@ -1078,6 +1083,8 @@ class StageMultiDragResize extends MoveableOptionsManager {
   dragStatus = StageDragStatus.END;
   dragResizeHelper;
   getRenderDocument;
+  delayedMarkContainer;
+  markContainerEnd;
   constructor(config) {
     const moveableOptionsManagerConfig = {
       container: config.container,
@@ -1085,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();
@@ -1114,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;
@@ -1127,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;
@@ -1182,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 });
   }
 }
 
@@ -1241,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,
@@ -1387,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);
@@ -1485,8 +1499,8 @@ class ActionManager extends EventEmitter {
       };
       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;
@@ -2195,8 +2209,8 @@ class StageCore extends EventEmitter$1 {
     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() {