@tmagic/stage 1.1.0-beta.7 → 1.1.0

package/dist/tmagic-stage.umd.js

@@ -1,15 +1,15 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('@tmagic/utils'), require('moveable'), require('moveable-helper'), require('keycon'), require('lodash-es'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', '@tmagic/utils', 'moveable', 'moveable-helper', 'keycon', 'lodash-es', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.utils, global.Moveable, global.MoveableHelper, global.KeyController, global.lodashEs, global.Guides));
-})(this, (function (exports, EventEmitter, utils, Moveable, MoveableHelper, KeyController, lodashEs, Guides) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('@tmagic/utils'), require('keycon'), require('moveable'), require('moveable-helper'), require('lodash-es'), require('@scena/guides')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'events', '@tmagic/utils', 'keycon', 'moveable', 'moveable-helper', 'lodash-es', '@scena/guides'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.utils, global.KeyController, global.Moveable, global.MoveableHelper, global.lodashEs, global.Guides));
+})(this, (function (exports, EventEmitter, utils, KeyController, Moveable, MoveableHelper, lodashEs, 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 KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   const Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
 
   const GHOST_EL_ID_PREFIX = "ghost_el_";
@@ -44,6 +44,18 @@
   })(Mode || {});
   const SELECTED_CLASS = "tmagic-stage-selected-area";
 
+  var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+    ContainerHighlightType2["DEFAULT"] = "default";
+    ContainerHighlightType2["ALT"] = "alt";
+    return ContainerHighlightType2;
+  })(ContainerHighlightType || {});
+  var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+    StageDragStatus2["START"] = "start";
+    StageDragStatus2["ING"] = "ing";
+    StageDragStatus2["END"] = "end";
+    return StageDragStatus2;
+  })(StageDragStatus || {});
+
   const getParents = (el, relative) => {
     let cur = el.parentElement;
     const parents = [];
@@ -221,14 +233,27 @@
     elementGuidelines = [];
     mode = Mode.ABSOLUTE;
     moveableOptions = {};
-    dragStatus = "end" /* END */;
+    dragStatus = StageDragStatus.END;
     ghostEl;
     moveableHelper;
+    isContainerHighlight = false;
     constructor(config) {
       super();
       this.core = config.core;
       this.container = config.container;
       this.mask = config.mask;
+      KeyController__default.default.global.keydown("alt", (e) => {
+        e.inputEvent.preventDefault();
+        this.isContainerHighlight = true;
+      });
+      KeyController__default.default.global.keyup("alt", (e) => {
+        e.inputEvent.preventDefault();
+        const doc = this.core.renderer.contentWindow?.document;
+        if (doc && this.canContainerHighlight()) {
+          utils.removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+        }
+        this.isContainerHighlight = false;
+      });
     }
     select(el, event) {
       const oldTarget = this.target;
@@ -293,7 +318,7 @@
       this.moveable?.destroy();
       this.destroyGhostEl();
       this.destroyDragEl();
-      this.dragStatus = "end" /* END */;
+      this.dragStatus = StageDragStatus.END;
       this.removeAllListeners();
     }
     init(el) {
@@ -357,7 +382,7 @@
       this.moveable.on("resizeStart", (e) => {
         if (!this.target)
           return;
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onResizeStart(e);
         frame.top = this.target.offsetTop;
         frame.left = this.target.offsetLeft;
@@ -366,18 +391,20 @@
         if (!this.moveable || !this.target || !this.dragEl)
           return;
         const { beforeTranslate } = drag;
-        this.dragStatus = "ing" /* ING */;
-        this.moveableHelper?.onResize(e);
+        this.dragStatus = StageDragStatus.ING;
         if (this.mode === Mode.SORTABLE) {
           this.target.style.top = "0px";
+          this.dragEl.style.width = `${width}px`;
+          this.dragEl.style.height = `${height}px`;
         } else {
+          this.moveableHelper?.onResize(e);
           this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
           this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
         }
         this.target.style.width = `${width}px`;
         this.target.style.height = `${height}px`;
       }).on("resizeEnd", () => {
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         this.update(true);
       });
     }
@@ -394,7 +421,7 @@
       this.moveable.on("dragStart", (e) => {
         if (!this.target)
           throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onDragStart(e);
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
@@ -408,8 +435,10 @@
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
-        this.dragStatus = "ing" /* ING */;
+        if (this.canContainerHighlight()) {
+          timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        }
+        this.dragStatus = StageDragStatus.ING;
         if (this.ghostEl) {
           this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
           return;
@@ -423,10 +452,10 @@
           timeout = void 0;
         }
         let parentEl = null;
-        if (doc) {
+        if (doc && this.canContainerHighlight()) {
           parentEl = utils.removeClassNameByClassName(doc, this.core.containerHighlightClassName);
         }
-        if (this.dragStatus === "ing" /* ING */) {
+        if (this.dragStatus === StageDragStatus.ING) {
           if (parentEl) {
             this.update(false, parentEl);
           } else {
@@ -439,7 +468,7 @@
             }
           }
         }
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         this.destroyGhostEl();
       });
     }
@@ -447,17 +476,17 @@
       if (!this.moveable)
         throw new Error("moveable \u672A\u521D\u59CB\u5316");
       this.moveable.on("rotateStart", (e) => {
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onRotateStart(e);
       }).on("rotate", (e) => {
         if (!this.target || !this.dragEl)
           return;
-        this.dragStatus = "ing" /* ING */;
+        this.dragStatus = StageDragStatus.ING;
         this.moveableHelper?.onRotate(e);
         const frame = this.moveableHelper?.getFrame(e.target);
         this.target.style.transform = frame?.toCSSObject().transform || "";
       }).on("rotateEnd", (e) => {
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit("update", {
           el: this.target,
@@ -471,17 +500,17 @@
       if (!this.moveable)
         throw new Error("moveable \u672A\u521D\u59CB\u5316");
       this.moveable.on("scaleStart", (e) => {
-        this.dragStatus = "start" /* START */;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onScaleStart(e);
       }).on("scale", (e) => {
         if (!this.target || !this.dragEl)
           return;
-        this.dragStatus = "ing" /* ING */;
+        this.dragStatus = StageDragStatus.ING;
         this.moveableHelper?.onScale(e);
         const frame = this.moveableHelper?.getFrame(e.target);
         this.target.style.transform = frame?.toCSSObject().transform || "";
       }).on("scaleEnd", (e) => {
-        this.dragStatus = "end" /* END */;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit("update", {
           el: this.target,
@@ -529,9 +558,13 @@
         top = calcValueByFontsize(doc, this.dragEl.offsetTop) + parseFloat(translateY) - calcValueByFontsize(doc, parentTop);
       }
       this.emit("update", {
-        el: this.target,
-        parentEl,
-        style: isResize ? { left, top, width, height } : { left, top }
+        data: [
+          {
+            el: this.target,
+            style: isResize ? { left, top, width, height } : { left, top }
+          }
+        ],
+        parentEl
       });
     }
     generateGhostEl(el) {
@@ -569,6 +602,7 @@
         return {};
       const isAbsolute = this.mode === Mode.ABSOLUTE;
       const isFixed = this.mode === Mode.FIXED;
+      const isSortable = this.mode === Mode.SORTABLE;
       let { moveableOptions = {} } = this.core.config;
       if (typeof moveableOptions === "function") {
         moveableOptions = moveableOptions(this.core);
@@ -615,13 +649,16 @@
           top: 0,
           left: -1,
           right: this.container.clientWidth - 1,
-          bottom: this.container.clientHeight,
+          bottom: isSortable ? void 0 : this.container.clientHeight,
           ...moveableOptions.bounds || {}
         },
         ...options,
         ...moveableOptions
       };
     }
+    canContainerHighlight() {
+      return this.core.containerHighlightType === ContainerHighlightType.DEFAULT || this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight;
+    }
   }
 
   class TargetCalibrate extends EventEmitter.EventEmitter {
@@ -1108,6 +1145,7 @@
     targetList = [];
     dragElList = [];
     moveableForMulti;
+    dragStatus = StageDragStatus.END;
     multiMoveableHelper;
     constructor(config) {
       super();
@@ -1140,9 +1178,7 @@
         createAuto: true
       });
       const frames = [];
-      this.moveableForMulti.on("dragGroupStart", (params) => {
-        const { events } = params;
-        this.multiMoveableHelper?.onDragGroupStart(params);
+      const setFrames = (events) => {
         events.forEach((ev) => {
           const matchEventTarget = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
           if (!matchEventTarget)
@@ -1153,6 +1189,40 @@
             id: matchEventTarget.id
           });
         });
+      };
+      this.moveableForMulti.on("resizeGroupStart", (params) => {
+        const { events } = params;
+        this.multiMoveableHelper?.onResizeGroupStart(params);
+        setFrames(events);
+        this.dragStatus = StageDragStatus.START;
+      }).on("resizeGroup", (params) => {
+        const { events } = params;
+        events.forEach((ev) => {
+          const { width, height, beforeTranslate } = ev.drag;
+          const frameSnapShot = frames.find((frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+          if (!frameSnapShot)
+            return;
+          const targeEl = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+          if (!targeEl)
+            return;
+          const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+          if (!isParentIncluded) {
+            targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0]}px`;
+            targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
+          }
+          targeEl.style.width = `${width}px`;
+          targeEl.style.height = `${height}px`;
+        });
+        this.multiMoveableHelper?.onResizeGroup(params);
+        this.dragStatus = StageDragStatus.ING;
+      }).on("resizeGroupEnd", () => {
+        this.update(true);
+        this.dragStatus = StageDragStatus.END;
+      }).on("dragGroupStart", (params) => {
+        const { events } = params;
+        this.multiMoveableHelper?.onDragGroupStart(params);
+        setFrames(events);
+        this.dragStatus = StageDragStatus.START;
       }).on("dragGroup", (params) => {
         const { events } = params;
         events.forEach((ev) => {
@@ -1169,8 +1239,15 @@
           }
         });
         this.multiMoveableHelper?.onDragGroup(params);
+        this.dragStatus = StageDragStatus.ING;
       }).on("dragGroupEnd", () => {
         this.update();
+        this.dragStatus = StageDragStatus.END;
+      }).on("clickGroup", (params) => {
+        const { inputTarget, targets } = params;
+        if (!this.mask.isMultiSelectStatus && targets.length > 1 && targets.includes(inputTarget)) {
+          this.emit("select", inputTarget.id.replace(DRAG_EL_ID_PREFIX, ""));
+        }
       });
     }
     canSelect(el, stop) {
@@ -1217,16 +1294,19 @@
       const doc = contentWindow?.document;
       if (!doc)
         return;
-      this.targetList.forEach((targetItem) => {
-        const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
-        const left = calcValueByFontsize(doc, offset.left);
-        const top = calcValueByFontsize(doc, offset.top);
-        const width = calcValueByFontsize(doc, targetItem.clientWidth);
-        const height = calcValueByFontsize(doc, targetItem.clientHeight);
-        this.emit("update", {
-          el: targetItem,
-          style: isResize ? { left, top, width, height } : { left, top }
-        });
+      this.emit("update", {
+        data: this.targetList.map((targetItem) => {
+          const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
+          const left = calcValueByFontsize(doc, offset.left);
+          const top = calcValueByFontsize(doc, offset.top);
+          const width = calcValueByFontsize(doc, targetItem.clientWidth);
+          const height = calcValueByFontsize(doc, targetItem.clientHeight);
+          return {
+            el: targetItem,
+            style: isResize ? { left, top, width, height } : { left, top }
+          };
+        }),
+        parentEl: null
       });
     }
     getOptions(options = {}) {
@@ -1245,13 +1325,21 @@
         zoom: 1,
         origin: true,
         padding: { left: 0, top: 0, right: 0, bottom: 0 },
+        snappable: true,
+        bounds: {
+          top: 0,
+          left: -1,
+          right: this.container.clientWidth - 1,
+          bottom: this.container.clientHeight,
+          ...multiMoveableOptions.bounds || {}
+        },
         ...options,
         ...multiMoveableOptions
       };
     }
   }
 
-  const style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n  pointer-events: none;\n}\n";
+  const style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n  pointer-events: none;\n}\n\n.magic-ui-container.magic-layout-relative {\n  min-height: 50px;\n}\n";
 
   class StageRender extends EventEmitter.EventEmitter {
     contentWindow = null;
@@ -1352,6 +1440,7 @@
     zoom = DEFAULT_ZOOM;
     containerHighlightClassName;
     containerHighlightDuration;
+    containerHighlightType;
     isContainer;
     canSelect;
     constructor(config) {
@@ -1360,8 +1449,9 @@
       this.setZoom(config.zoom);
       this.canSelect = config.canSelect || ((el) => !!el.id);
       this.isContainer = config.isContainer;
-      this.containerHighlightClassName = config.containerHighlightClassName;
-      this.containerHighlightDuration = config.containerHighlightDuration;
+      this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
+      this.containerHighlightDuration = config.containerHighlightDuration || 800;
+      this.containerHighlightType = config.containerHighlightType;
       this.renderer = new StageRender({ core: this });
       this.mask = new StageMask({ core: this });
       this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
@@ -1388,6 +1478,8 @@
         const el = await this.getElementFromPoint(event);
         if (!el)
           return;
+        if (this.multiDr.dragStatus === StageDragStatus.ING)
+          return;
         await this.highlight(el);
         if (this.highlightedDom === this.selectedDom) {
           this.highlightLayer.clearHighlight();
@@ -1419,6 +1511,10 @@
       });
       this.multiDr.on("update", (data) => {
         setTimeout(() => this.emit("update", data));
+      }).on("select", async (id) => {
+        const el = await this.getTargetElement(id);
+        this.select(el);
+        setTimeout(() => this.emit("select", el));
       });
     }
     getElementsFromPoint(event) {
@@ -1582,6 +1678,7 @@
   }
 
   exports.CONTAINER_HIGHLIGHT_CLASS = CONTAINER_HIGHLIGHT_CLASS;
+  exports.ContainerHighlightType = ContainerHighlightType;
   exports.DEFAULT_ZOOM = DEFAULT_ZOOM;
   exports.DRAG_EL_ID_PREFIX = DRAG_EL_ID_PREFIX;
   exports.GHOST_EL_ID_PREFIX = GHOST_EL_ID_PREFIX;
@@ -1592,6 +1689,7 @@
   exports.PAGE_CLASS = PAGE_CLASS;
   exports.SELECTED_CLASS = SELECTED_CLASS;
   exports.StageDragResize = StageDragResize;
+  exports.StageDragStatus = StageDragStatus;
   exports.StageMask = StageMask;
   exports.StageRender = StageRender;
   exports.ZIndex = ZIndex;