@tmagic/stage 1.1.0-beta.7 → 1.1.0

package/dist/tmagic-stage.mjs

@@ -1,8 +1,8 @@
 import EventEmitter$1, { EventEmitter } from 'events';
 import { removeClassName, removeClassNameByClassName, createDiv, injectStyle, isSameDomain, getHost, addClassName } from '@tmagic/utils';
+import KeyController from 'keycon';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
-import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
 import Guides from '@scena/guides';
 
@@ -38,6 +38,18 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
 })(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 = [];
@@ -215,14 +227,27 @@ class StageDragResize extends EventEmitter {
   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.global.keydown("alt", (e) => {
+      e.inputEvent.preventDefault();
+      this.isContainerHighlight = true;
+    });
+    KeyController.global.keyup("alt", (e) => {
+      e.inputEvent.preventDefault();
+      const doc = this.core.renderer.contentWindow?.document;
+      if (doc && this.canContainerHighlight()) {
+        removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+      }
+      this.isContainerHighlight = false;
+    });
   }
   select(el, event) {
     const oldTarget = this.target;
@@ -287,7 +312,7 @@ class StageDragResize extends EventEmitter {
     this.moveable?.destroy();
     this.destroyGhostEl();
     this.destroyDragEl();
-    this.dragStatus = "end" /* END */;
+    this.dragStatus = StageDragStatus.END;
     this.removeAllListeners();
   }
   init(el) {
@@ -351,7 +376,7 @@ class StageDragResize extends EventEmitter {
     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;
@@ -360,18 +385,20 @@ class StageDragResize extends EventEmitter {
       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);
     });
   }
@@ -388,7 +415,7 @@ class StageDragResize extends EventEmitter {
     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);
@@ -402,8 +429,10 @@ class StageDragResize extends EventEmitter {
         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;
@@ -417,10 +446,10 @@ class StageDragResize extends EventEmitter {
         timeout = void 0;
       }
       let parentEl = null;
-      if (doc) {
+      if (doc && this.canContainerHighlight()) {
         parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
       }
-      if (this.dragStatus === "ing" /* ING */) {
+      if (this.dragStatus === StageDragStatus.ING) {
         if (parentEl) {
           this.update(false, parentEl);
         } else {
@@ -433,7 +462,7 @@ class StageDragResize extends EventEmitter {
           }
         }
       }
-      this.dragStatus = "end" /* END */;
+      this.dragStatus = StageDragStatus.END;
       this.destroyGhostEl();
     });
   }
@@ -441,17 +470,17 @@ class StageDragResize extends EventEmitter {
     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,
@@ -465,17 +494,17 @@ class StageDragResize extends EventEmitter {
     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,
@@ -523,9 +552,13 @@ class StageDragResize extends EventEmitter {
       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) {
@@ -563,6 +596,7 @@ class StageDragResize extends EventEmitter {
       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);
@@ -609,13 +643,16 @@ class StageDragResize extends EventEmitter {
         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 {
@@ -1102,6 +1139,7 @@ class StageMultiDragResize extends EventEmitter {
   targetList = [];
   dragElList = [];
   moveableForMulti;
+  dragStatus = StageDragStatus.END;
   multiMoveableHelper;
   constructor(config) {
     super();
@@ -1134,9 +1172,7 @@ class StageMultiDragResize extends EventEmitter {
       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)
@@ -1147,6 +1183,40 @@ class StageMultiDragResize extends EventEmitter {
           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) => {
@@ -1163,8 +1233,15 @@ class StageMultiDragResize extends EventEmitter {
         }
       });
       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) {
@@ -1211,16 +1288,19 @@ class StageMultiDragResize extends EventEmitter {
     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 = {}) {
@@ -1239,13 +1319,21 @@ class StageMultiDragResize extends EventEmitter {
       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 {
   contentWindow = null;
@@ -1346,6 +1434,7 @@ class StageCore extends EventEmitter {
   zoom = DEFAULT_ZOOM;
   containerHighlightClassName;
   containerHighlightDuration;
+  containerHighlightType;
   isContainer;
   canSelect;
   constructor(config) {
@@ -1354,8 +1443,9 @@ class StageCore extends EventEmitter {
     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 });
@@ -1382,6 +1472,8 @@ class StageCore extends EventEmitter {
       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();
@@ -1413,6 +1505,10 @@ class StageCore extends EventEmitter {
     });
     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) {
@@ -1575,5 +1671,5 @@ class StageCore extends EventEmitter {
   }
 }
 
-export { CONTAINER_HIGHLIGHT_CLASS, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, StageDragResize, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isRelative, isStatic, removeSelectedClassName, up };
+export { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isRelative, isStatic, removeSelectedClassName, up };
 //# sourceMappingURL=tmagic-stage.mjs.map