@tmagic/stage 1.1.0-beta.2 → 1.1.0-beta.3

package/dist/tmagic-stage.umd.js

@@ -1,20 +1,22 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('events'), require('moveable'), require('moveable-helper'), require('@tmagic/utils'), require('lodash-es'), require('@scena/guides')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'events', 'moveable', 'moveable-helper', '@tmagic/utils', 'lodash-es', '@scena/guides'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicStage = {}, global.EventEmitter, global.Moveable, global.MoveableHelper, global.utils, global.lodashEs, global.Guides));
-})(this, (function (exports, EventEmitter, Moveable, MoveableHelper, utils, lodashEs, Guides) { 'use strict';
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
   var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
   var MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
+  var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   var Guides__default = /*#__PURE__*/_interopDefaultLegacy(Guides);
 
   const GHOST_EL_ID_PREFIX = "ghost_el_";
   const DRAG_EL_ID_PREFIX = "drag_el_";
   const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
   const CONTAINER_HIGHLIGHT_CLASS = "tmagic-stage-container-highlight";
+  const PAGE_CLASS = "magic-ui-page";
   const DEFAULT_ZOOM = 1;
   var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
     GuidesType2["HORIZONTAL"] = "horizontal";
@@ -67,6 +69,19 @@
       top
     };
   };
+  const getTargetElStyle = (el) => {
+    const offset = getOffset(el);
+    const { transform } = getComputedStyle(el);
+    return `
+    position: absolute;
+    transform: ${transform};
+    left: ${offset.left}px;
+    top: ${offset.top}px;
+    width: ${el.clientWidth}px;
+    height: ${el.clientHeight}px;
+    z-index: ${ZIndex.DRAG_EL};
+  `;
+  };
   const getAbsolutePosition = (el, { top, left }) => {
     const { offsetParent } = el;
     if (offsetParent) {
@@ -159,8 +174,7 @@
       this.dragStatus = "end" /* END */;
       this.core = config.core;
       this.container = config.container;
-      this.dragEl = globalThis.document.createElement("div");
-      this.container.append(this.dragEl);
+      this.mask = config.mask;
     }
     select(el, event) {
       const oldTarget = this.target;
@@ -211,6 +225,16 @@
       this.moveableOptions.verticalGuidelines = [];
       this.updateMoveable();
     }
+    clearSelectStatus() {
+      if (!this.moveable)
+        return;
+      this.destroyDragEl();
+      this.moveable.target = null;
+      this.moveable.updateTarget();
+    }
+    destroyDragEl() {
+      this.dragEl?.remove();
+    }
     destroy() {
       this.moveable?.destroy();
       this.destroyGhostEl();
@@ -224,7 +248,14 @@
       }
       this.mode = getMode(el);
       this.destroyGhostEl();
-      this.updateDragEl(el);
+      this.destroyDragEl();
+      this.dragEl = globalThis.document.createElement("div");
+      this.container.append(this.dragEl);
+      this.dragEl.style.cssText = getTargetElStyle(el);
+      this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+      if (typeof this.core.config.updateDragEl === "function") {
+        this.core.config.updateDragEl(this.dragEl, el);
+      }
       this.moveableOptions = this.getOptions({
         target: this.dragEl
       });
@@ -323,15 +354,7 @@
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        timeout = globalThis.setTimeout(async () => {
-          const els = this.core.getElementsFromPoint(e.inputEvent);
-          for (const el of els) {
-            if (doc && !el.id.startsWith(GHOST_EL_ID_PREFIX) && el !== this.target && await this.core.isContainer(el)) {
-              utils.addClassName(el, doc, this.core.containerHighlightClassName);
-              break;
-            }
-          }
-        }, this.core.containerHighlightDuration);
+        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
         this.dragStatus = "ing" /* ING */;
         if (this.ghostEl) {
           this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
@@ -462,6 +485,7 @@
         this.destroyGhostEl();
       }
       const ghostEl = el.cloneNode(true);
+      this.setGhostElChildrenId(ghostEl);
       const { top, left } = getAbsolutePosition(el, getOffset(el));
       ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
       ghostEl.style.zIndex = ZIndex.GHOST_EL;
@@ -472,30 +496,20 @@
       el.after(ghostEl);
       return ghostEl;
     }
+    setGhostElChildrenId(el) {
+      for (const child of el.children) {
+        if (child.id) {
+          child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+        }
+        if (child.children.length) {
+          this.setGhostElChildrenId(child);
+        }
+      }
+    }
     destroyGhostEl() {
       this.ghostEl?.remove();
       this.ghostEl = void 0;
     }
-    updateDragEl(el) {
-      const offset = getOffset(el);
-      const { transform } = getComputedStyle(el);
-      this.dragEl.style.cssText = `
-      position: absolute;
-      transform: ${transform};
-      left: ${offset.left}px;
-      top: ${offset.top}px;
-      width: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.DRAG_EL};
-    `;
-      this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
-      if (typeof this.core.config.updateDragEl === "function") {
-        this.core.config.updateDragEl(this.dragEl, el);
-      }
-    }
-    destroyDragEl() {
-      this.dragEl?.remove();
-    }
     getOptions(options = {}) {
       if (!this.target)
         return {};
@@ -860,6 +874,7 @@
       this.maxScrollTop = 0;
       this.maxScrollLeft = 0;
       this.intersectionObserver = null;
+      this.shiftKeyDown = false;
       this.mode = Mode.ABSOLUTE;
       this.pageResizeObserver = null;
       this.wrapperResizeObserver = null;
@@ -872,12 +887,19 @@
         event.stopPropagation();
         if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
           return;
+        if (!this.shiftKeyDown && event.target.className.indexOf("moveable-area") !== -1) {
+          return;
+        }
         if (event.target.className.indexOf("moveable-control") !== -1) {
           return;
         }
         this.content.removeEventListener("mousemove", this.highlightHandler);
-        this.emit("beforeSelect", event);
-        globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
+        if (this.shiftKeyDown) {
+          this.emit("beforeMultiSelect", event);
+        } else {
+          this.emit("beforeSelect", event);
+          globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
+        }
       };
       this.mouseUpHandler = () => {
         globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
@@ -912,6 +934,14 @@
       this.content.addEventListener("wheel", this.mouseWheelHandler);
       this.content.addEventListener("mousemove", this.highlightHandler);
       this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
+      KeyController__default["default"].global.keydown("shift", (e) => {
+        e.inputEvent.preventDefault();
+        this.shiftKeyDown = true;
+      });
+      KeyController__default["default"].global.keyup("shift", (e) => {
+        e.inputEvent.preventDefault();
+        this.shiftKeyDown = false;
+      });
     }
     setMode(mode) {
       this.mode = mode;
@@ -1042,6 +1072,118 @@
     }
   }
 
+  class StageMultiDragResize extends EventEmitter.EventEmitter {
+    constructor(config) {
+      super();
+      this.targetList = [];
+      this.dragElList = [];
+      this.core = config.core;
+      this.container = config.container;
+      this.mask = config.mask;
+    }
+    multiSelect(els) {
+      this.targetList = els;
+      this.core.dr.destroyDragEl();
+      this.destroyDragElList();
+      this.dragElList = els.map((elItem) => {
+        const dragElDiv = globalThis.document.createElement("div");
+        this.container.append(dragElDiv);
+        dragElDiv.style.cssText = getTargetElStyle(elItem);
+        dragElDiv.id = `${DRAG_EL_ID_PREFIX}${elItem.id}`;
+        if (typeof this.core.config.updateDragEl === "function") {
+          this.core.config.updateDragEl(dragElDiv, elItem);
+        }
+        return dragElDiv;
+      });
+      this.moveableForMulti?.destroy();
+      this.multiMoveableHelper?.clear();
+      this.moveableForMulti = new Moveable__default["default"](this.container, {
+        target: this.dragElList,
+        defaultGroupRotate: 0,
+        defaultGroupOrigin: "50% 50%",
+        draggable: true,
+        resizable: true,
+        throttleDrag: 0,
+        startDragRotate: 0,
+        throttleDragRotate: 0,
+        zoom: 1,
+        origin: true,
+        padding: { left: 0, top: 0, right: 0, bottom: 0 }
+      });
+      this.multiMoveableHelper = MoveableHelper__default["default"].create({
+        useBeforeRender: true,
+        useRender: false,
+        createAuto: true
+      });
+      const frames = [];
+      this.moveableForMulti.on("dragGroupStart", (params) => {
+        const { events } = params;
+        this.multiMoveableHelper?.onDragGroupStart(params);
+        events.forEach((ev) => {
+          const matchEventTarget = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
+          if (!matchEventTarget)
+            return;
+          frames.push({
+            left: matchEventTarget.offsetLeft,
+            top: matchEventTarget.offsetTop,
+            id: matchEventTarget.id
+          });
+        });
+      }).on("dragGroup", (params) => {
+        const { events } = params;
+        events.forEach((ev) => {
+          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 + ev.beforeTranslate[0]}px`;
+            targeEl.style.top = `${frameSnapShot.top + ev.beforeTranslate[1]}px`;
+          }
+        });
+        this.multiMoveableHelper?.onDragGroup(params);
+      }).on("dragGroupEnd", () => {
+        this.update();
+      });
+    }
+    clearSelectStatus() {
+      if (!this.moveableForMulti)
+        return;
+      this.destroyDragElList();
+      this.moveableForMulti.target = null;
+      this.moveableForMulti.updateTarget();
+    }
+    destroy() {
+      this.moveableForMulti?.destroy();
+      this.destroyDragElList();
+    }
+    destroyDragElList() {
+      this.dragElList.forEach((dragElItem) => dragElItem?.remove());
+    }
+    update(isResize = false) {
+      if (this.targetList.length === 0)
+        return;
+      const { contentWindow } = this.core.renderer;
+      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 }
+        });
+      });
+    }
+  }
+
   var 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}\n";
 
   class StageRender extends EventEmitter.EventEmitter {
@@ -1121,6 +1263,7 @@
   class StageCore extends EventEmitter.EventEmitter {
     constructor(config) {
       super();
+      this.selectedDomList = [];
       this.zoom = DEFAULT_ZOOM;
       this.config = config;
       this.setZoom(config.zoom);
@@ -1130,7 +1273,8 @@
       this.containerHighlightDuration = config.containerHighlightDuration;
       this.renderer = new StageRender({ core: this });
       this.mask = new StageMask({ core: this });
-      this.dr = new StageDragResize({ core: this, container: this.mask.content });
+      this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
+      this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask });
       this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
       this.renderer.on("runtime-ready", (runtime) => {
         this.emit("runtime-ready", runtime);
@@ -1138,29 +1282,57 @@
       this.renderer.on("page-el-update", (el) => {
         this.mask?.observe(el);
       });
-      this.mask.on("beforeSelect", (event) => {
-        this.setElementFromPoint(event);
+      this.mask.on("beforeSelect", async (event) => {
+        this.clearSelectStatus("multiSelect");
+        const el = await this.getElementFromPoint(event);
+        if (!el)
+          return;
+        this.select(el, event);
       }).on("select", () => {
         this.emit("select", this.selectedDom);
       }).on("changeGuides", (data) => {
         this.dr.setGuidelines(data.type, data.guides);
         this.emit("changeGuides", data);
       }).on("highlight", async (event) => {
-        await this.setElementFromPoint(event);
+        const el = await this.getElementFromPoint(event, "mousemove");
+        if (!el)
+          return;
+        await this.highlight(el);
         if (this.highlightedDom === this.selectedDom) {
           this.highlightLayer.clearHighlight();
           return;
         }
-        this.highlightLayer.highlight(this.highlightedDom);
         this.emit("highlight", this.highlightedDom);
       }).on("clearHighlight", async () => {
         this.highlightLayer.clearHighlight();
+      }).on("beforeMultiSelect", async (event) => {
+        const el = await this.getElementFromPoint(event);
+        if (!el)
+          return;
+        if (el.className.includes(PAGE_CLASS))
+          return;
+        this.clearSelectStatus("select");
+        if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
+          this.selectedDomList.push(this.selectedDom);
+          this.selectedDom = void 0;
+        }
+        const existIndex = this.selectedDomList.findIndex((selectedDom) => selectedDom.id === el.id);
+        if (existIndex !== -1) {
+          this.selectedDomList.splice(existIndex, 1);
+        } else {
+          this.selectedDomList.push(el);
+        }
+        this.multiDr.multiSelect(this.selectedDomList);
+        this.emit("multiSelect", this.selectedDomList);
       });
       this.dr.on("update", (data) => {
         setTimeout(() => this.emit("update", data));
       }).on("sort", (data) => {
         setTimeout(() => this.emit("sort", data));
       });
+      this.multiDr.on("update", (data) => {
+        setTimeout(() => this.emit("update", data));
+      });
     }
     getElementsFromPoint(event) {
       const { renderer, zoom } = this;
@@ -1176,7 +1348,7 @@
       }
       return doc?.elementsFromPoint(x / zoom, y / zoom);
     }
-    async setElementFromPoint(event) {
+    async getElementFromPoint(event, type) {
       const els = this.getElementsFromPoint(event);
       let stopped = false;
       const stop = () => stopped = true;
@@ -1184,12 +1356,10 @@
         if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.canSelect(el, event, stop)) {
           if (stopped)
             break;
-          if (event.type === "mousemove") {
-            this.highlight(el);
-            break;
+          if (event.type === type) {
+            return el;
           }
-          this.select(el, event);
-          break;
+          return el;
         }
       }
     }
@@ -1203,6 +1373,7 @@
         await runtime.beforeSelect(el);
       }
       this.mask.setLayout(el);
+      this.multiDr.destroyDragElList();
       this.dr.select(el, event);
       if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
         this.mask.intersectionObserver?.observe(el);
@@ -1237,7 +1408,7 @@
         this.highlightLayer.clearHighlight();
         return;
       }
-      if (el === this.highlightedDom)
+      if (el === this.highlightedDom || !el)
         return;
       this.highlightLayer.highlight(el);
       this.highlightedDom = el;
@@ -1254,6 +1425,14 @@
     setZoom(zoom = DEFAULT_ZOOM) {
       this.zoom = zoom;
     }
+    clearSelectStatus(selectType) {
+      if (selectType === "multiSelect") {
+        this.multiDr.clearSelectStatus();
+        this.selectedDomList = [];
+      } else {
+        this.dr.clearSelectStatus();
+      }
+    }
     async mount(el) {
       this.container = el;
       const { mask, renderer } = this;
@@ -1265,6 +1444,24 @@
       this.mask.clearGuides();
       this.dr.clearGuides();
     }
+    async addContainerHighlightClassName(event, exclude) {
+      const els = this.getElementsFromPoint(event);
+      const { renderer } = this;
+      const doc = renderer.contentWindow?.document;
+      if (!doc)
+        return;
+      for (const el of els) {
+        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isContainer(el) && !exclude.includes(el)) {
+          utils.addClassName(el, doc, this.containerHighlightClassName);
+          break;
+        }
+      }
+    }
+    getAddContainerHighlightClassNameTimeout(event, exclude = []) {
+      return globalThis.setTimeout(() => {
+        this.addContainerHighlightClassName(event, exclude);
+      }, this.containerHighlightDuration);
+    }
     destroy() {
       const { mask, renderer, dr, highlightLayer } = this;
       renderer.destroy();
@@ -1293,6 +1490,7 @@
   exports.HIGHLIGHT_EL_ID_PREFIX = HIGHLIGHT_EL_ID_PREFIX;
   exports.Mode = Mode;
   exports.MouseButton = MouseButton;
+  exports.PAGE_CLASS = PAGE_CLASS;
   exports.SELECTED_CLASS = SELECTED_CLASS;
   exports.StageDragResize = StageDragResize;
   exports.StageMask = StageMask;
@@ -1305,6 +1503,7 @@
   exports.getMode = getMode;
   exports.getOffset = getOffset;
   exports.getScrollParent = getScrollParent;
+  exports.getTargetElStyle = getTargetElStyle;
   exports.isAbsolute = isAbsolute;
   exports.isFixed = isFixed;
   exports.isFixedParent = isFixedParent;