@tmagic/stage 1.3.6 → 1.3.8

package/dist/tmagic-stage.js

@@ -39,6 +39,11 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
   return Mode2;
 })(Mode || {});
 const SELECTED_CLASS = "tmagic-stage-selected-area";
+var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
+  AbleActionEventType2["SELECT_PARENT"] = "select-parent";
+  AbleActionEventType2["REMOVE"] = "remove";
+  return AbleActionEventType2;
+})(AbleActionEventType || {});
 
 const getParents = (el, relative) => {
   let cur = el.parentElement;
@@ -582,33 +587,6 @@ class DragResizeHelper {
 
 const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n";
 
-var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
-  ContainerHighlightType2["DEFAULT"] = "default";
-  ContainerHighlightType2["ALT"] = "alt";
-  return ContainerHighlightType2;
-})(ContainerHighlightType || {});
-var RenderType = /* @__PURE__ */ ((RenderType2) => {
-  RenderType2["IFRAME"] = "iframe";
-  RenderType2["NATIVE"] = "native";
-  return RenderType2;
-})(RenderType || {});
-var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
-  SelectStatus2["SELECT"] = "select";
-  SelectStatus2["MULTI_SELECT"] = "multiSelect";
-  return SelectStatus2;
-})(SelectStatus || {});
-var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
-  StageDragStatus2["START"] = "start";
-  StageDragStatus2["ING"] = "ing";
-  StageDragStatus2["END"] = "end";
-  return StageDragStatus2;
-})(StageDragStatus || {});
-var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
-  AbleActionEventType2["SELECT_PARENT"] = "select-parent";
-  AbleActionEventType2["REMOVE"] = "remove";
-  return AbleActionEventType2;
-})(AbleActionEventType || {});
-
 const MoveableActionsAble = (handler) => ({
   name: "actions",
   props: [],
@@ -901,6 +879,28 @@ class MoveableOptionsManager extends EventEmitter {
   }
 }
 
+var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
+  ContainerHighlightType2["DEFAULT"] = "default";
+  ContainerHighlightType2["ALT"] = "alt";
+  return ContainerHighlightType2;
+})(ContainerHighlightType || {});
+var RenderType = /* @__PURE__ */ ((RenderType2) => {
+  RenderType2["IFRAME"] = "iframe";
+  RenderType2["NATIVE"] = "native";
+  return RenderType2;
+})(RenderType || {});
+var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
+  SelectStatus2["SELECT"] = "select";
+  SelectStatus2["MULTI_SELECT"] = "multiSelect";
+  return SelectStatus2;
+})(SelectStatus || {});
+var StageDragStatus = /* @__PURE__ */ ((StageDragStatus2) => {
+  StageDragStatus2["START"] = "start";
+  StageDragStatus2["ING"] = "ing";
+  StageDragStatus2["END"] = "end";
+  return StageDragStatus2;
+})(StageDragStatus || {});
+
 class StageDragResize extends MoveableOptionsManager {
   /** 目标节点 */
   target;
@@ -1393,6 +1393,8 @@ class ActionManager extends EventEmitter {
   canSelect;
   isContainer;
   getRenderDocument;
+  disabledMultiSelect = false;
+  config;
   mouseMoveHandler = throttle(async (event) => {
     if (event.target?.classList?.contains("moveable-direction")) {
       return;
@@ -1407,38 +1409,21 @@ class ActionManager extends EventEmitter {
   }, throttleTime);
   constructor(config) {
     super();
+    this.config = config;
     this.container = config.container;
     this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS_NAME;
     this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
     this.containerHighlightType = config.containerHighlightType;
+    this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
     this.getElementsFromPoint = config.getElementsFromPoint;
     this.canSelect = config.canSelect || ((el) => !!el.id);
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
-    const createDrHelper = () => new DragResizeHelper({
-      container: config.container,
-      updateDragEl: config.updateDragEl
-    });
-    this.dr = new StageDragResize({
-      container: config.container,
-      disabledDragStart: config.disabledDragStart,
-      moveableOptions: this.changeCallback(config.moveableOptions, false),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this)
-    });
-    this.multiDr = new StageMultiDragResize({
-      container: config.container,
-      moveableOptions: this.changeCallback(config.moveableOptions, true),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this)
-    });
+    this.dr = this.createDr(config);
+    if (!this.disabledMultiSelect) {
+      this.multiDr = this.createMultiDr(config);
+    }
     this.highlightLayer = new StageHighlight({
       container: config.container,
       updateDragEl: config.updateDragEl,
@@ -1446,7 +1431,19 @@ class ActionManager extends EventEmitter {
     });
     this.initMouseEvent();
     this.initKeyEvent();
-    this.initActionEvent();
+  }
+  disableMultiSelect() {
+    this.disabledMultiSelect = true;
+    if (this.multiDr) {
+      this.multiDr.destroy();
+      this.multiDr = void 0;
+    }
+  }
+  enableMultiSelect() {
+    this.disabledMultiSelect = false;
+    if (!this.multiDr) {
+      this.multiDr = this.createMultiDr(this.config);
+    }
   }
   /**
    * 设置水平/垂直参考线
@@ -1455,14 +1452,14 @@ class ActionManager extends EventEmitter {
    */
   setGuidelines(type, guidelines) {
     this.dr.setGuidelines(type, guidelines);
-    this.multiDr.setGuidelines(type, guidelines);
+    this.multiDr?.setGuidelines(type, guidelines);
   }
   /**
    * 清空所有参考线
    */
   clearGuides() {
     this.dr.clearGuides();
-    this.multiDr.clearGuides();
+    this.multiDr?.clearGuides();
   }
   /**
    * 更新moveable，外部主要调用场景是元素配置变更、页面大小变更
@@ -1470,7 +1467,7 @@ class ActionManager extends EventEmitter {
    */
   updateMoveable(el) {
     this.dr.updateMoveable(el);
-    this.multiDr.updateMoveable();
+    this.multiDr?.updateMoveable();
   }
   /**
    * 判断是否单选选中的元素
@@ -1491,7 +1488,7 @@ class ActionManager extends EventEmitter {
     if (this.dr.getTarget()) {
       return this.dr.getOption(key);
     }
-    if (this.multiDr.targetList.length) {
+    if (this.multiDr?.targetList.length) {
       return this.multiDr.getOption(key);
     }
   }
@@ -1541,17 +1538,17 @@ class ActionManager extends EventEmitter {
     if (selectedEl?.className.includes(PAGE_CLASS)) {
       return true;
     }
-    return this.multiDr.canSelect(el, selectedEl);
+    return this.multiDr?.canSelect(el, selectedEl) || false;
   }
   select(el, event) {
-    this.selectedEl = el;
+    this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
     this.dr.select(el, event);
   }
   multiSelect(idOrElList) {
     this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
     this.clearSelectStatus(SelectStatus.SELECT);
-    this.multiDr.multiSelect(this.selectedElList);
+    this.multiDr?.multiSelect(this.selectedElList);
   }
   getHighlightEl() {
     return this.highlightedEl;
@@ -1567,7 +1564,7 @@ class ActionManager extends EventEmitter {
       this.clearHighlight();
       return;
     }
-    if (el === this.getSelectedEl() || this.multiDr.dragStatus === StageDragStatus.ING) {
+    if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
       this.clearHighlight();
       return;
     }
@@ -1587,7 +1584,7 @@ class ActionManager extends EventEmitter {
    */
   clearSelectStatus(selectType) {
     if (selectType === SelectStatus.MULTI_SELECT) {
-      this.multiDr.clearSelectStatus();
+      this.multiDr?.clearSelectStatus();
       this.selectedElList = [];
     } else {
       this.dr.clearSelectStatus();
@@ -1634,9 +1631,67 @@ class ActionManager extends EventEmitter {
     this.container.removeEventListener("mouseleave", this.mouseLeaveHandler);
     this.container.removeEventListener("wheel", this.mouseWheelHandler);
     this.dr.destroy();
-    this.multiDr.destroy();
+    this.multiDr?.destroy();
     this.highlightLayer.destroy();
   }
+  createDr(config) {
+    const createDrHelper = () => new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    const dr = new StageDragResize({
+      container: config.container,
+      disabledDragStart: config.disabledDragStart,
+      moveableOptions: this.changeCallback(config.moveableOptions, false),
+      dragResizeHelper: createDrHelper(),
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this)
+    });
+    dr.on("update", (data) => {
+      setTimeout(() => this.emit("update", data));
+    }).on("sort", (data) => {
+      setTimeout(() => this.emit("sort", data));
+    }).on("select-parent", () => {
+      this.emit("select-parent");
+    }).on("remove", () => {
+      const drTarget = this.dr.getTarget();
+      if (!drTarget)
+        return;
+      const data = {
+        data: [{ el: drTarget }]
+      };
+      this.emit("remove", data);
+    }).on("drag-start", (e) => {
+      this.emit("drag-start", e);
+    });
+    return dr;
+  }
+  createMultiDr(config) {
+    const createDrHelper = () => new DragResizeHelper({
+      container: config.container,
+      updateDragEl: config.updateDragEl
+    });
+    const multiDr = new StageMultiDragResize({
+      container: config.container,
+      moveableOptions: this.changeCallback(config.moveableOptions, true),
+      dragResizeHelper: createDrHelper(),
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this)
+    });
+    multiDr?.on("update", (data) => {
+      this.emit("multi-update", data);
+    }).on("change-to-select", async (id) => {
+      if (this.isMultiSelectStatus)
+        return false;
+      const el = this.getTargetElement(id);
+      this.emit("change-to-select", el);
+    });
+    return multiDr;
+  }
   changeCallback(options, isMulti) {
     if (typeof options === "function") {
       return () => {
@@ -1667,7 +1722,7 @@ class ActionManager extends EventEmitter {
       return;
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl);
-      this.selectedEl = void 0;
+      this.setSelectedEl(void 0);
     }
     const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
     if (existIndex !== -1) {
@@ -1707,14 +1762,20 @@ class ActionManager extends EventEmitter {
     const ctrl = isMac ? "meta" : "ctrl";
     KeyController.global.keydown(ctrl, (e) => {
       e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = true;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = true;
+      }
     });
     KeyController.global.on("blur", () => {
-      this.isMultiSelectStatus = false;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = false;
+      }
     });
     KeyController.global.keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = false;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = false;
+      }
     });
     KeyController.global.keydown("alt", (e) => {
       e.inputEvent.preventDefault();
@@ -1726,36 +1787,6 @@ class ActionManager extends EventEmitter {
       this.isAltKeydown = false;
     });
   }
-  /**
-   * 处理单选、多选抛出来的事件
-   */
-  initActionEvent() {
-    this.dr.on("update", (data) => {
-      setTimeout(() => this.emit("update", data));
-    }).on("sort", (data) => {
-      setTimeout(() => this.emit("sort", data));
-    }).on("select-parent", () => {
-      this.emit("select-parent");
-    }).on("remove", () => {
-      const drTarget = this.dr.getTarget();
-      if (!drTarget)
-        return;
-      const data = {
-        data: [{ el: drTarget }]
-      };
-      this.emit("remove", data);
-    }).on("drag-start", (e) => {
-      this.emit("drag-start", e);
-    });
-    this.multiDr.on("update", (data) => {
-      this.emit("multi-update", data);
-    }).on("change-to-select", async (id) => {
-      if (this.isMultiSelectStatus)
-        return false;
-      const el = this.getTargetElement(id);
-      this.emit("change-to-select", el);
-    });
-  }
   /**
    * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
    */
@@ -1822,8 +1853,10 @@ class Rule extends EventEmitter {
   container;
   containerResizeObserver;
   isShowGuides = true;
-  constructor(container) {
+  guidesOptions;
+  constructor(container, options) {
     super();
+    this.guidesOptions = options?.guidesOptions || {};
     this.container = container;
     this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
     this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
@@ -1922,7 +1955,8 @@ class Rule extends EventEmitter {
       lineColor: "#000",
       textColor: "#000",
       style: this.getGuidesStyle(type),
-      showGuides: this.isShowGuides
+      showGuides: this.isShowGuides,
+      ...this.guidesOptions
     });
     const changEventHandler = {
       [GuidesType.HORIZONTAL]: this.hGuidesChangeGuidesHandler,
@@ -1994,9 +2028,9 @@ class StageMask extends Rule {
   pageScrollParent = null;
   intersectionObserver = null;
   wrapperResizeObserver = null;
-  constructor() {
+  constructor(options) {
     const wrapper = createWrapper();
-    super(wrapper);
+    super(wrapper, options);
     this.wrapper = wrapper;
     this.content.addEventListener("wheel", this.mouseWheelHandler);
     this.wrapper.appendChild(this.content);
@@ -2308,12 +2342,6 @@ class StageRender extends EventEmitter$1 {
         x = x - rect.left;
         y = y - rect.top;
       }
-    } else if (this.nativeContainer) {
-      const rect = this.nativeContainer.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
     }
     return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
   }
@@ -2419,7 +2447,9 @@ class StageCore extends EventEmitter$1 {
         return null;
       }
     });
-    this.mask = new StageMask();
+    this.mask = new StageMask({
+      guidesOptions: config.guidesOptions
+    });
     this.actionManager = new ActionManager(this.getActionManagerConfig(config));
     this.initRenderEvent();
     this.initActionEvent();
@@ -2540,6 +2570,12 @@ class StageCore extends EventEmitter$1 {
   getDragStatus() {
     return this.actionManager.getDragStatus();
   }
+  disableMultiSelect() {
+    this.actionManager.disableMultiSelect();
+  }
+  enableMultiSelect() {
+    this.actionManager.enableMultiSelect();
+  }
   /**
    * 销毁实例
    */
@@ -2572,6 +2608,7 @@ class StageCore extends EventEmitter$1 {
       moveableOptions: config.moveableOptions,
       container: this.mask.content,
       disabledDragStart: config.disabledDragStart,
+      disabledMultiSelect: config.disabledMultiSelect,
       canSelect: config.canSelect,
       isContainer: config.isContainer,
       updateDragEl: config.updateDragEl,
@@ -2589,6 +2626,7 @@ class StageCore extends EventEmitter$1 {
     this.renderer.on("page-el-update", (el) => {
       this.mask?.observe(el);
       this.observePageResize(el);
+      this.emit("page-el-update", el);
     });
   }
   initMaskEvent() {