@tmagic/stage 1.1.0-beta.5 → 1.1.0-beta.8

package/dist/tmagic-stage.umd.js

@@ -4,13 +4,13 @@
   (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 }; }
+  const _interopDefaultLegacy = e => 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 EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+  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_";
   const DRAG_EL_ID_PREFIX = "drag_el_";
@@ -210,14 +210,22 @@
   };
 
   class StageDragResize extends EventEmitter.EventEmitter {
+    core;
+    mask;
+    container;
+    target;
+    dragEl;
+    moveable;
+    horizontalGuidelines = [];
+    verticalGuidelines = [];
+    elementGuidelines = [];
+    mode = Mode.ABSOLUTE;
+    moveableOptions = {};
+    dragStatus = "end" /* END */;
+    ghostEl;
+    moveableHelper;
     constructor(config) {
       super();
-      this.horizontalGuidelines = [];
-      this.verticalGuidelines = [];
-      this.elementGuidelines = [];
-      this.mode = Mode.ABSOLUTE;
-      this.moveableOptions = {};
-      this.dragStatus = "end" /* END */;
       this.core = config.core;
       this.container = config.container;
       this.mask = config.mask;
@@ -227,7 +235,7 @@
       this.target = el;
       if (!this.moveable || this.target !== oldTarget) {
         this.init(el);
-        this.moveableHelper = MoveableHelper__default["default"].create({
+        this.moveableHelper = MoveableHelper__default.default.create({
           useBeforeRender: true,
           useRender: false,
           createAuto: true
@@ -331,7 +339,7 @@
     }
     initMoveable() {
       this.moveable?.destroy();
-      this.moveable = new Moveable__default["default"](this.container, {
+      this.moveable = new Moveable__default.default(this.container, {
         ...this.moveableOptions
       });
       this.bindResizeEvent();
@@ -543,7 +551,7 @@
       return ghostEl;
     }
     setGhostElChildrenId(el) {
-      for (const child of el.children) {
+      for (const child of Array.from(el.children)) {
         if (child.id) {
           child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
         }
@@ -617,6 +625,11 @@
   }
 
   class TargetCalibrate extends EventEmitter.EventEmitter {
+    parent;
+    mask;
+    dr;
+    core;
+    operationEl;
     constructor(config) {
       super();
       this.parent = config.parent;
@@ -684,6 +697,11 @@
   }
 
   class StageHighlight extends EventEmitter.EventEmitter {
+    core;
+    container;
+    target;
+    moveable;
+    calibrationTarget;
     constructor(config) {
       super();
       this.core = config.core;
@@ -700,7 +718,7 @@
         return;
       this.target = el;
       this.moveable?.destroy();
-      this.moveable = new Moveable__default["default"](this.container, {
+      this.moveable = new Moveable__default.default(this.container, {
         target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
         origin: false,
         rootContainer: this.core.container,
@@ -720,42 +738,15 @@
     }
   }
 
-  class Rule extends EventEmitter__default["default"] {
+  class Rule extends EventEmitter__default.default {
+    hGuides;
+    vGuides;
+    horizontalGuidelines = [];
+    verticalGuidelines = [];
+    container;
+    containerResizeObserver;
     constructor(container) {
       super();
-      this.horizontalGuidelines = [];
-      this.verticalGuidelines = [];
-      this.getGuidesStyle = (type) => ({
-        position: "fixed",
-        zIndex: 1,
-        left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
-        top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
-        width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
-        height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
-      });
-      this.createGuides = (type, defaultGuides = []) => new Guides__default["default"](this.container, {
-        type,
-        defaultGuides,
-        displayDragPos: true,
-        backgroundColor: "#fff",
-        lineColor: "#000",
-        textColor: "#000",
-        style: this.getGuidesStyle(type)
-      });
-      this.hGuidesChangeGuidesHandler = (e) => {
-        this.horizontalGuidelines = e.guides;
-        this.emit("changeGuides", {
-          type: GuidesType.HORIZONTAL,
-          guides: this.horizontalGuidelines
-        });
-      };
-      this.vGuidesChangeGuidesHandler = (e) => {
-        this.verticalGuidelines = e.guides;
-        this.emit("changeGuides", {
-          type: GuidesType.VERTICAL,
-          guides: this.verticalGuidelines
-        });
-      };
       this.container = container;
       this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
       this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
@@ -827,6 +818,37 @@
       this.containerResizeObserver.disconnect();
       this.removeAllListeners();
     }
+    getGuidesStyle = (type) => ({
+      position: "fixed",
+      zIndex: 1,
+      left: type === GuidesType.HORIZONTAL ? 0 : "-30px",
+      top: type === GuidesType.HORIZONTAL ? "-30px" : 0,
+      width: type === GuidesType.HORIZONTAL ? "100%" : "30px",
+      height: type === GuidesType.HORIZONTAL ? "30px" : "100%"
+    });
+    createGuides = (type, defaultGuides = []) => new Guides__default.default(this.container, {
+      type,
+      defaultGuides,
+      displayDragPos: true,
+      backgroundColor: "#fff",
+      lineColor: "#000",
+      textColor: "#000",
+      style: this.getGuidesStyle(type)
+    });
+    hGuidesChangeGuidesHandler = (e) => {
+      this.horizontalGuidelines = e.guides;
+      this.emit("changeGuides", {
+        type: GuidesType.HORIZONTAL,
+        guides: this.horizontalGuidelines
+      });
+    };
+    vGuidesChangeGuidesHandler = (e) => {
+      this.verticalGuidelines = e.guides;
+      this.emit("changeGuides", {
+        type: GuidesType.VERTICAL,
+        guides: this.verticalGuidelines
+      });
+    };
   }
 
   const wrapperClassName = "editor-mask-wrapper";
@@ -860,74 +882,30 @@
     return el;
   };
   class StageMask extends Rule {
+    content = createContent();
+    wrapper;
+    core;
+    page = null;
+    pageScrollParent = null;
+    scrollTop = 0;
+    scrollLeft = 0;
+    width = 0;
+    height = 0;
+    wrapperHeight = 0;
+    wrapperWidth = 0;
+    maxScrollTop = 0;
+    maxScrollLeft = 0;
+    intersectionObserver = null;
+    isMultiSelectStatus = false;
+    mode = Mode.ABSOLUTE;
+    pageResizeObserver = null;
+    wrapperResizeObserver = null;
+    highlightHandler = lodashEs.throttle((event) => {
+      this.emit("highlight", event);
+    }, throttleTime);
     constructor(config) {
       const wrapper = createWrapper();
       super(wrapper);
-      this.content = createContent();
-      this.page = null;
-      this.pageScrollParent = null;
-      this.scrollTop = 0;
-      this.scrollLeft = 0;
-      this.width = 0;
-      this.height = 0;
-      this.wrapperHeight = 0;
-      this.wrapperWidth = 0;
-      this.maxScrollTop = 0;
-      this.maxScrollLeft = 0;
-      this.intersectionObserver = null;
-      this.isMultiSelectStatus = false;
-      this.mode = Mode.ABSOLUTE;
-      this.pageResizeObserver = null;
-      this.wrapperResizeObserver = null;
-      this.highlightHandler = lodashEs.throttle((event) => {
-        this.emit("highlight", event);
-      }, throttleTime);
-      this.mouseDownHandler = (event) => {
-        this.emit("clearHighlight");
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
-          return;
-        if (!this.isMultiSelectStatus && event.target.className.indexOf("moveable-area") !== -1) {
-          return;
-        }
-        if (event.target.className.indexOf("moveable-control") !== -1) {
-          return;
-        }
-        this.content.removeEventListener("mousemove", this.highlightHandler);
-        if (this.isMultiSelectStatus) {
-          this.emit("beforeMultiSelect", event);
-        } else {
-          this.emit("beforeSelect", event);
-        }
-        globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
-      };
-      this.mouseUpHandler = () => {
-        globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
-        this.content.addEventListener("mousemove", this.highlightHandler);
-        this.emit("select");
-      };
-      this.mouseWheelHandler = (event) => {
-        this.emit("clearHighlight");
-        if (!this.page)
-          throw new Error("page \u672A\u521D\u59CB\u5316");
-        const { deltaY, deltaX } = event;
-        if (this.page.clientHeight < this.wrapperHeight && deltaY)
-          return;
-        if (this.page.clientWidth < this.wrapperWidth && deltaX)
-          return;
-        if (this.maxScrollTop > 0) {
-          this.scrollTop = this.scrollTop + deltaY;
-        }
-        if (this.maxScrollLeft > 0) {
-          this.scrollLeft = this.scrollLeft + deltaX;
-        }
-        this.scroll();
-        this.emit("scroll", event);
-      };
-      this.mouseLeaveHandler = () => {
-        setTimeout(() => this.emit("clearHighlight"), throttleTime);
-      };
       this.wrapper = wrapper;
       this.core = config.core;
       this.content.addEventListener("mousedown", this.mouseDownHandler);
@@ -935,11 +913,13 @@
       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) => {
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+      const ctrl = isMac ? "meta" : "ctrl";
+      KeyController__default.default.global.keydown(ctrl, (e) => {
         e.inputEvent.preventDefault();
         this.isMultiSelectStatus = true;
       });
-      KeyController__default["default"].global.keyup("shift", (e) => {
+      KeyController__default.default.global.keyup(ctrl, (e) => {
         e.inputEvent.preventDefault();
         this.isMultiSelectStatus = false;
       });
@@ -1071,13 +1051,66 @@
       if (this.maxScrollLeft < this.scrollLeft)
         this.scrollLeft = this.maxScrollLeft;
     }
+    mouseDownHandler = (event) => {
+      this.emit("clearHighlight");
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
+        return;
+      if (!this.isMultiSelectStatus && event.target.className.indexOf("moveable-area") !== -1) {
+        return;
+      }
+      if (event.target.className.indexOf("moveable-control") !== -1) {
+        return;
+      }
+      this.content.removeEventListener("mousemove", this.highlightHandler);
+      if (this.isMultiSelectStatus) {
+        this.emit("beforeMultiSelect", event);
+      } else {
+        this.emit("beforeSelect", event);
+      }
+      globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
+    };
+    mouseUpHandler = () => {
+      globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
+      this.content.addEventListener("mousemove", this.highlightHandler);
+      if (!this.isMultiSelectStatus) {
+        this.emit("select");
+      }
+    };
+    mouseWheelHandler = (event) => {
+      this.emit("clearHighlight");
+      if (!this.page)
+        throw new Error("page \u672A\u521D\u59CB\u5316");
+      const { deltaY, deltaX } = event;
+      if (this.page.clientHeight < this.wrapperHeight && deltaY)
+        return;
+      if (this.page.clientWidth < this.wrapperWidth && deltaX)
+        return;
+      if (this.maxScrollTop > 0) {
+        this.scrollTop = this.scrollTop + deltaY;
+      }
+      if (this.maxScrollLeft > 0) {
+        this.scrollLeft = this.scrollLeft + deltaX;
+      }
+      this.scroll();
+      this.emit("scroll", event);
+    };
+    mouseLeaveHandler = () => {
+      setTimeout(() => this.emit("clearHighlight"), throttleTime);
+    };
   }
 
   class StageMultiDragResize extends EventEmitter.EventEmitter {
+    core;
+    mask;
+    container;
+    targetList = [];
+    dragElList = [];
+    moveableForMulti;
+    multiMoveableHelper;
     constructor(config) {
       super();
-      this.targetList = [];
-      this.dragElList = [];
       this.core = config.core;
       this.container = config.container;
       this.mask = config.mask;
@@ -1098,10 +1131,10 @@
       });
       this.moveableForMulti?.destroy();
       this.multiMoveableHelper?.clear();
-      this.moveableForMulti = new Moveable__default["default"](this.container, this.getOptions({
+      this.moveableForMulti = new Moveable__default.default(this.container, this.getOptions({
         target: this.dragElList
       }));
-      this.multiMoveableHelper = MoveableHelper__default["default"].create({
+      this.multiMoveableHelper = MoveableHelper__default.default.create({
         useBeforeRender: true,
         useRender: false,
         createAuto: true
@@ -1140,14 +1173,18 @@
         this.update();
       });
     }
-    canSelect(el) {
+    canSelect(el, stop) {
       if (el.className.includes(PAGE_CLASS)) {
         this.core.highlightedDom = void 0;
         this.core.highlightLayer.clearHighlight();
+        stop();
         return false;
       }
       const currentTargetMode = getMode(el);
       let selectedDomMode = "";
+      if (this.core.selectedDom?.className.includes(PAGE_CLASS)) {
+        return true;
+      }
       if (this.targetList.length === 0 && this.core.selectedDom) {
         selectedDomMode = getMode(this.core.selectedDom);
       } else if (this.targetList.length > 0) {
@@ -1193,9 +1230,9 @@
       });
     }
     getOptions(options = {}) {
-      let { moveableOptions = {} } = this.core.config;
-      if (typeof moveableOptions === "function") {
-        moveableOptions = moveableOptions(this.core);
+      let { multiMoveableOptions = {} } = this.core.config;
+      if (typeof multiMoveableOptions === "function") {
+        multiMoveableOptions = multiMoveableOptions(this.core);
       }
       return {
         defaultGroupRotate: 0,
@@ -1209,52 +1246,22 @@
         origin: true,
         padding: { left: 0, top: 0, right: 0, bottom: 0 },
         ...options,
-        ...moveableOptions
+        ...multiMoveableOptions
       };
     }
   }
 
-  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  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";
 
   class StageRender extends EventEmitter.EventEmitter {
+    contentWindow = null;
+    runtime = null;
+    iframe;
+    runtimeUrl;
+    core;
+    render;
     constructor({ core }) {
       super();
-      this.contentWindow = null;
-      this.runtime = null;
-      this.getMagicApi = () => ({
-        onPageElUpdate: (el) => this.emit("page-el-update", el),
-        onRuntimeReady: (runtime) => {
-          this.runtime = runtime;
-          globalThis.runtime = runtime;
-          this.emit("runtime-ready", runtime);
-        }
-      });
-      this.getRuntime = () => {
-        if (this.runtime)
-          return Promise.resolve(this.runtime);
-        return new Promise((resolve) => {
-          const listener = (runtime) => {
-            this.off("runtime-ready", listener);
-            resolve(runtime);
-          };
-          this.on("runtime-ready", listener);
-        });
-      };
-      this.loadHandler = async () => {
-        if (!this.contentWindow?.magic) {
-          this.postTmagicRuntimeReady();
-        }
-        if (!this.contentWindow)
-          return;
-        if (this.render) {
-          const el = await this.render(this.core);
-          if (el) {
-            this.contentWindow.document?.body?.appendChild(el);
-          }
-        }
-        this.emit("onload");
-        utils.injectStyle(this.contentWindow.document, style);
-      };
       this.core = core;
       this.runtimeUrl = core.config.runtimeUrl || "";
       this.render = core.config.render;
@@ -1267,6 +1274,14 @@
     `;
       this.iframe.addEventListener("load", this.loadHandler);
     }
+    getMagicApi = () => ({
+      onPageElUpdate: (el) => this.emit("page-el-update", el),
+      onRuntimeReady: (runtime) => {
+        this.runtime = runtime;
+        globalThis.runtime = runtime;
+        this.emit("runtime-ready", runtime);
+      }
+    });
     async mount(el) {
       if (!this.iframe) {
         throw Error("mount \u5931\u8D25");
@@ -1281,6 +1296,17 @@
       el.appendChild(this.iframe);
       this.postTmagicRuntimeReady();
     }
+    getRuntime = () => {
+      if (this.runtime)
+        return Promise.resolve(this.runtime);
+      return new Promise((resolve) => {
+        const listener = (runtime) => {
+          this.off("runtime-ready", listener);
+          resolve(runtime);
+        };
+        this.on("runtime-ready", listener);
+      });
+    };
     destroy() {
       this.iframe?.removeEventListener("load", this.loadHandler);
       this.contentWindow = null;
@@ -1288,6 +1314,21 @@
       this.iframe = void 0;
       this.removeAllListeners();
     }
+    loadHandler = async () => {
+      if (!this.contentWindow?.magic) {
+        this.postTmagicRuntimeReady();
+      }
+      if (!this.contentWindow)
+        return;
+      if (this.render) {
+        const el = await this.render(this.core);
+        if (el) {
+          this.contentWindow.document?.body?.appendChild(el);
+        }
+      }
+      this.emit("onload");
+      utils.injectStyle(this.contentWindow.document, style);
+    };
     postTmagicRuntimeReady() {
       this.contentWindow = this.iframe?.contentWindow;
       this.contentWindow.magic = this.getMagicApi();
@@ -1298,10 +1339,23 @@
   }
 
   class StageCore extends EventEmitter.EventEmitter {
+    container;
+    selectedDom;
+    selectedDomList = [];
+    highlightedDom;
+    renderer;
+    mask;
+    dr;
+    multiDr;
+    highlightLayer;
+    config;
+    zoom = DEFAULT_ZOOM;
+    containerHighlightClassName;
+    containerHighlightDuration;
+    isContainer;
+    canSelect;
     constructor(config) {
       super();
-      this.selectedDomList = [];
-      this.zoom = DEFAULT_ZOOM;
       this.config = config;
       this.setZoom(config.zoom);
       this.canSelect = config.canSelect || ((el) => !!el.id);
@@ -1346,7 +1400,6 @@
         const el = await this.getElementFromPoint(event);
         if (!el)
           return;
-        this.clearSelectStatus("select");
         if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
           this.selectedDomList.push(this.selectedDom);
           this.selectedDom = void 0;
@@ -1357,8 +1410,7 @@
         } else {
           this.selectedDomList.push(el);
         }
-        this.multiDr.multiSelect(this.selectedDomList);
-        this.emit("multiSelect", this.selectedDomList);
+        this.multiSelect(this.selectedDomList);
       });
       this.dr.on("update", (data) => {
         setTimeout(() => this.emit("update", data));
@@ -1400,7 +1452,7 @@
       if (!canSelectByProp)
         return false;
       if (this.mask.isMultiSelectStatus) {
-        return this.multiDr.canSelect(el);
+        return this.multiDr.canSelect(el, stop);
       }
       return true;
     }
@@ -1427,6 +1479,12 @@
         }
       }
     }
+    async multiSelect(idOrElList) {
+      this.clearSelectStatus("select");
+      const elList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
+      this.multiDr.multiSelect(elList);
+      this.emit("multiSelect", elList);
+    }
     update(data) {
       const { config } = data;
       return this.renderer?.getRuntime().then((runtime) => {
@@ -1539,7 +1597,7 @@
   exports.ZIndex = ZIndex;
   exports.addSelectedClassName = addSelectedClassName;
   exports.calcValueByFontsize = calcValueByFontsize;
-  exports["default"] = StageCore;
+  exports.default = StageCore;
   exports.down = down;
   exports.getAbsolutePosition = getAbsolutePosition;
   exports.getMode = getMode;