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

package/dist/tmagic-stage.umd.js

@@ -636,6 +636,7 @@
       top: ${top}px;
       width: ${el.clientWidth}px;
       height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
       this.operationEl.id = `${prefix}${el.id}`;
       if (typeof this.core.config.updateDragEl === "function") {
@@ -703,7 +704,7 @@
         target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
         origin: false,
         rootContainer: this.core.container,
-        zoom: 1
+        zoom: 2
       });
     }
     clearHighlight() {
@@ -874,7 +875,7 @@
       this.maxScrollTop = 0;
       this.maxScrollLeft = 0;
       this.intersectionObserver = null;
-      this.shiftKeyDown = false;
+      this.isMultiSelectStatus = false;
       this.mode = Mode.ABSOLUTE;
       this.pageResizeObserver = null;
       this.wrapperResizeObserver = null;
@@ -887,19 +888,19 @@
         event.stopPropagation();
         if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
           return;
-        if (!this.shiftKeyDown && event.target.className.indexOf("moveable-area") !== -1) {
+        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.shiftKeyDown) {
+        if (this.isMultiSelectStatus) {
           this.emit("beforeMultiSelect", event);
         } else {
           this.emit("beforeSelect", event);
-          globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
         }
+        globalThis.document.addEventListener("mouseup", this.mouseUpHandler);
       };
       this.mouseUpHandler = () => {
         globalThis.document.removeEventListener("mouseup", this.mouseUpHandler);
@@ -936,11 +937,11 @@
       this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
       KeyController__default["default"].global.keydown("shift", (e) => {
         e.inputEvent.preventDefault();
-        this.shiftKeyDown = true;
+        this.isMultiSelectStatus = true;
       });
       KeyController__default["default"].global.keyup("shift", (e) => {
         e.inputEvent.preventDefault();
-        this.shiftKeyDown = false;
+        this.isMultiSelectStatus = false;
       });
     }
     setMode(mode) {
@@ -1097,19 +1098,9 @@
       });
       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.moveableForMulti = new Moveable__default["default"](this.container, this.getOptions({
+        target: this.dragElList
+      }));
       this.multiMoveableHelper = MoveableHelper__default["default"].create({
         useBeforeRender: true,
         useRender: false,
@@ -1149,12 +1140,31 @@
         this.update();
       });
     }
+    canSelect(el) {
+      if (el.className.includes(PAGE_CLASS)) {
+        this.core.highlightedDom = void 0;
+        this.core.highlightLayer.clearHighlight();
+        return false;
+      }
+      const currentTargetMode = getMode(el);
+      let selectedDomMode = "";
+      if (this.targetList.length === 0 && this.core.selectedDom) {
+        selectedDomMode = getMode(this.core.selectedDom);
+      } else if (this.targetList.length > 0) {
+        selectedDomMode = getMode(this.targetList[0]);
+      }
+      if (currentTargetMode !== selectedDomMode) {
+        return false;
+      }
+      return true;
+    }
     clearSelectStatus() {
       if (!this.moveableForMulti)
         return;
       this.destroyDragElList();
       this.moveableForMulti.target = null;
       this.moveableForMulti.updateTarget();
+      this.targetList = [];
     }
     destroy() {
       this.moveableForMulti?.destroy();
@@ -1182,9 +1192,29 @@
         });
       });
     }
+    getOptions(options = {}) {
+      let { moveableOptions = {} } = this.core.config;
+      if (typeof moveableOptions === "function") {
+        moveableOptions = moveableOptions(this.core);
+      }
+      return {
+        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 },
+        ...options,
+        ...moveableOptions
+      };
+    }
   }
 
-  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";
+  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";
 
   class StageRender extends EventEmitter.EventEmitter {
     constructor({ core }) {
@@ -1211,18 +1241,18 @@
         });
       };
       this.loadHandler = async () => {
-        this.contentWindow = this.iframe?.contentWindow;
-        this.contentWindow.magic = this.getMagicApi();
+        if (!this.contentWindow?.magic) {
+          this.postTmagicRuntimeReady();
+        }
+        if (!this.contentWindow)
+          return;
         if (this.render) {
           const el = await this.render(this.core);
           if (el) {
-            this.iframe?.contentDocument?.body?.appendChild(el);
+            this.contentWindow.document?.body?.appendChild(el);
           }
         }
         this.emit("onload");
-        this.contentWindow.postMessage({
-          tmagicRuntimeReady: true
-        }, "*");
         utils.injectStyle(this.contentWindow.document, style);
       };
       this.core = core;
@@ -1238,18 +1268,18 @@
       this.iframe.addEventListener("load", this.loadHandler);
     }
     async mount(el) {
-      if (this.iframe) {
-        if (!utils.isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-          let html = await fetch(this.runtimeUrl).then((res) => res.text());
-          const base = `${location.protocol}//${utils.getHost(this.runtimeUrl)}`;
-          html = html.replace("<head>", `<head>
-<base href="${base}">`);
-          this.iframe.srcdoc = html;
-        }
-        el.appendChild(this.iframe);
-      } else {
+      if (!this.iframe) {
         throw Error("mount \u5931\u8D25");
       }
+      if (!utils.isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+        let html = await fetch(this.runtimeUrl).then((res) => res.text());
+        const base = `${location.protocol}//${utils.getHost(this.runtimeUrl)}`;
+        html = html.replace("<head>", `<head>
+<base href="${base}">`);
+        this.iframe.srcdoc = html;
+      }
+      el.appendChild(this.iframe);
+      this.postTmagicRuntimeReady();
     }
     destroy() {
       this.iframe?.removeEventListener("load", this.loadHandler);
@@ -1258,6 +1288,13 @@
       this.iframe = void 0;
       this.removeAllListeners();
     }
+    postTmagicRuntimeReady() {
+      this.contentWindow = this.iframe?.contentWindow;
+      this.contentWindow.magic = this.getMagicApi();
+      this.contentWindow.postMessage({
+        tmagicRuntimeReady: true
+      }, "*");
+    }
   }
 
   class StageCore extends EventEmitter.EventEmitter {
@@ -1294,7 +1331,7 @@
         this.dr.setGuidelines(data.type, data.guides);
         this.emit("changeGuides", data);
       }).on("highlight", async (event) => {
-        const el = await this.getElementFromPoint(event, "mousemove");
+        const el = await this.getElementFromPoint(event);
         if (!el)
           return;
         await this.highlight(el);
@@ -1309,8 +1346,6 @@
         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);
@@ -1348,22 +1383,29 @@
       }
       return doc?.elementsFromPoint(x / zoom, y / zoom);
     }
-    async getElementFromPoint(event, type) {
+    async getElementFromPoint(event) {
       const els = this.getElementsFromPoint(event);
       let stopped = false;
       const stop = () => stopped = true;
       for (const el of els) {
-        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.canSelect(el, event, stop)) {
+        if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && await this.isElCanSelect(el, event, stop)) {
           if (stopped)
             break;
-          if (event.type === type) {
-            return el;
-          }
           return el;
         }
       }
     }
+    async isElCanSelect(el, event, stop) {
+      const canSelectByProp = await this.canSelect(el, event, stop);
+      if (!canSelectByProp)
+        return false;
+      if (this.mask.isMultiSelectStatus) {
+        return this.multiDr.canSelect(el);
+      }
+      return true;
+    }
     async select(idOrEl, event) {
+      this.clearSelectStatus("multiSelect");
       const el = await this.getTargetElement(idOrEl);
       if (el === this.selectedDom)
         return;
@@ -1373,7 +1415,6 @@
         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);