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

package/dist/{tmagic-stage.es.js → tmagic-stage.mjs}

@@ -204,14 +204,22 @@ const up = (deltaTop, target) => {
 };
 
 class StageDragResize extends 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;
@@ -537,7 +545,7 @@ class StageDragResize extends EventEmitter {
     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}`;
       }
@@ -611,6 +619,11 @@ class StageDragResize extends EventEmitter {
 }
 
 class TargetCalibrate extends EventEmitter {
+  parent;
+  mask;
+  dr;
+  core;
+  operationEl;
   constructor(config) {
     super();
     this.parent = config.parent;
@@ -678,6 +691,11 @@ class TargetCalibrate extends EventEmitter {
 }
 
 class StageHighlight extends EventEmitter {
+  core;
+  container;
+  target;
+  moveable;
+  calibrationTarget;
   constructor(config) {
     super();
     this.core = config.core;
@@ -715,41 +733,14 @@ class StageHighlight extends EventEmitter {
 }
 
 class Rule extends EventEmitter$1 {
+  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(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);
@@ -821,6 +812,37 @@ class Rule extends EventEmitter$1 {
     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(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";
@@ -854,74 +876,30 @@ const createWrapper = () => {
   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 = 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 = 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);
@@ -929,11 +907,13 @@ class StageMask extends Rule {
     this.content.addEventListener("wheel", this.mouseWheelHandler);
     this.content.addEventListener("mousemove", this.highlightHandler);
     this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
-    KeyController.global.keydown("shift", (e) => {
+    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+    const ctrl = isMac ? "meta" : "ctrl";
+    KeyController.global.keydown(ctrl, (e) => {
       e.inputEvent.preventDefault();
       this.isMultiSelectStatus = true;
     });
-    KeyController.global.keyup("shift", (e) => {
+    KeyController.global.keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
       this.isMultiSelectStatus = false;
     });
@@ -1065,13 +1045,66 @@ class StageMask extends Rule {
     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 {
+  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;
@@ -1134,14 +1167,18 @@ class StageMultiDragResize extends EventEmitter {
       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) {
@@ -1187,9 +1224,9 @@ class StageMultiDragResize extends EventEmitter {
     });
   }
   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,
@@ -1203,52 +1240,22 @@ class StageMultiDragResize extends EventEmitter {
       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 {
+  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");
-      injectStyle(this.contentWindow.document, style);
-    };
     this.core = core;
     this.runtimeUrl = core.config.runtimeUrl || "";
     this.render = core.config.render;
@@ -1261,6 +1268,14 @@ class StageRender extends EventEmitter {
     `;
     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");
@@ -1275,6 +1290,17 @@ class StageRender extends EventEmitter {
     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;
@@ -1282,6 +1308,21 @@ class StageRender extends EventEmitter {
     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");
+    injectStyle(this.contentWindow.document, style);
+  };
   postTmagicRuntimeReady() {
     this.contentWindow = this.iframe?.contentWindow;
     this.contentWindow.magic = this.getMagicApi();
@@ -1292,10 +1333,23 @@ class StageRender extends EventEmitter {
 }
 
 class StageCore extends 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);
@@ -1340,7 +1394,6 @@ class StageCore extends EventEmitter {
       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;
@@ -1351,8 +1404,7 @@ class StageCore extends EventEmitter {
       } 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));
@@ -1394,7 +1446,7 @@ class StageCore extends EventEmitter {
     if (!canSelectByProp)
       return false;
     if (this.mask.isMultiSelectStatus) {
-      return this.multiDr.canSelect(el);
+      return this.multiDr.canSelect(el, stop);
     }
     return true;
   }
@@ -1421,6 +1473,12 @@ class StageCore extends EventEmitter {
       }
     }
   }
+  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) => {
@@ -1518,4 +1576,4 @@ 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 };
-//# sourceMappingURL=tmagic-stage.es.js.map
+//# sourceMappingURL=tmagic-stage.mjs.map