@tmagic/stage 1.3.6 → 1.3.8

package/dist/tmagic-stage.umd.cjs

@@ -36,6 +36,11 @@
     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;
@@ -579,33 +584,6 @@
 
   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: [],
@@ -898,6 +876,28 @@
     }
   }
 
+  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;
@@ -1390,6 +1390,8 @@
     canSelect;
     isContainer;
     getRenderDocument;
+    disabledMultiSelect = false;
+    config;
     mouseMoveHandler = lodashEs.throttle(async (event) => {
       if (event.target?.classList?.contains("moveable-direction")) {
         return;
@@ -1404,38 +1406,21 @@
     }, 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,
@@ -1443,7 +1428,19 @@
       });
       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);
+      }
     }
     /**
      * 设置水平/垂直参考线
@@ -1452,14 +1449,14 @@
      */
     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，外部主要调用场景是元素配置变更、页面大小变更
@@ -1467,7 +1464,7 @@
      */
     updateMoveable(el) {
       this.dr.updateMoveable(el);
-      this.multiDr.updateMoveable();
+      this.multiDr?.updateMoveable();
     }
     /**
      * 判断是否单选选中的元素
@@ -1488,7 +1485,7 @@
       if (this.dr.getTarget()) {
         return this.dr.getOption(key);
       }
-      if (this.multiDr.targetList.length) {
+      if (this.multiDr?.targetList.length) {
         return this.multiDr.getOption(key);
       }
     }
@@ -1538,17 +1535,17 @@
       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;
@@ -1564,7 +1561,7 @@
         this.clearHighlight();
         return;
       }
-      if (el === this.getSelectedEl() || this.multiDr.dragStatus === StageDragStatus.ING) {
+      if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
         this.clearHighlight();
         return;
       }
@@ -1584,7 +1581,7 @@
      */
     clearSelectStatus(selectType) {
       if (selectType === SelectStatus.MULTI_SELECT) {
-        this.multiDr.clearSelectStatus();
+        this.multiDr?.clearSelectStatus();
         this.selectedElList = [];
       } else {
         this.dr.clearSelectStatus();
@@ -1631,9 +1628,67 @@
       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 () => {
@@ -1664,7 +1719,7 @@
         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) {
@@ -1704,14 +1759,20 @@
       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();
@@ -1723,36 +1784,6 @@
         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事件中再通知外面的编辑器更新
      */
@@ -1819,8 +1850,10 @@
     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);
@@ -1919,7 +1952,8 @@
         lineColor: "#000",
         textColor: "#000",
         style: this.getGuidesStyle(type),
-        showGuides: this.isShowGuides
+        showGuides: this.isShowGuides,
+        ...this.guidesOptions
       });
       const changEventHandler = {
         [GuidesType.HORIZONTAL]: this.hGuidesChangeGuidesHandler,
@@ -1991,9 +2025,9 @@
     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);
@@ -2305,12 +2339,6 @@
           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);
     }
@@ -2416,7 +2444,9 @@
           return null;
         }
       });
-      this.mask = new StageMask();
+      this.mask = new StageMask({
+        guidesOptions: config.guidesOptions
+      });
       this.actionManager = new ActionManager(this.getActionManagerConfig(config));
       this.initRenderEvent();
       this.initActionEvent();
@@ -2537,6 +2567,12 @@
     getDragStatus() {
       return this.actionManager.getDragStatus();
     }
+    disableMultiSelect() {
+      this.actionManager.disableMultiSelect();
+    }
+    enableMultiSelect() {
+      this.actionManager.enableMultiSelect();
+    }
     /**
      * 销毁实例
      */
@@ -2569,6 +2605,7 @@
         moveableOptions: config.moveableOptions,
         container: this.mask.content,
         disabledDragStart: config.disabledDragStart,
+        disabledMultiSelect: config.disabledMultiSelect,
         canSelect: config.canSelect,
         isContainer: config.isContainer,
         updateDragEl: config.updateDragEl,
@@ -2586,6 +2623,7 @@
       this.renderer.on("page-el-update", (el) => {
         this.mask?.observe(el);
         this.observePageResize(el);
+        this.emit("page-el-update", el);
       });
     }
     initMaskEvent() {