@tmagic/stage 1.2.7 → 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;
@@ -796,10 +819,7 @@
       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();
@@ -1006,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
@@ -1083,6 +1088,8 @@
     dragStatus = StageDragStatus.END;
     dragResizeHelper;
     getRenderDocument;
+    delayedMarkContainer;
+    markContainerEnd;
     constructor(config) {
       const moveableOptionsManagerConfig = {
         container: config.container,
@@ -1090,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();
@@ -1119,6 +1125,7 @@
           target: this.dragResizeHelper.getShadowEls()
         })
       );
+      let timeout;
       this.moveableForMulti.on("resizeGroupStart", (e) => {
         this.dragResizeHelper.onResizeGroupStart(e);
         this.dragStatus = StageDragStatus.START;
@@ -1132,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;
@@ -1187,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 });
     }
   }
 
@@ -1246,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,
@@ -1392,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);
@@ -1490,8 +1504,8 @@
         };
         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;
@@ -2200,8 +2214,8 @@
       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() {