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

package/dist/tmagic-stage.es.js

@@ -630,6 +630,7 @@ class TargetCalibrate extends EventEmitter {
       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") {
@@ -697,7 +698,7 @@ class StageHighlight extends EventEmitter {
       target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
       origin: false,
       rootContainer: this.core.container,
-      zoom: 1
+      zoom: 2
     });
   }
   clearHighlight() {
@@ -868,7 +869,7 @@ class StageMask extends Rule {
     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;
@@ -881,19 +882,19 @@ class StageMask extends Rule {
       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);
@@ -930,11 +931,11 @@ class StageMask extends Rule {
     this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
     KeyController.global.keydown("shift", (e) => {
       e.inputEvent.preventDefault();
-      this.shiftKeyDown = true;
+      this.isMultiSelectStatus = true;
     });
     KeyController.global.keyup("shift", (e) => {
       e.inputEvent.preventDefault();
-      this.shiftKeyDown = false;
+      this.isMultiSelectStatus = false;
     });
   }
   setMode(mode) {
@@ -1091,19 +1092,9 @@ class StageMultiDragResize extends EventEmitter {
     });
     this.moveableForMulti?.destroy();
     this.multiMoveableHelper?.clear();
-    this.moveableForMulti = new Moveable(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(this.container, this.getOptions({
+      target: this.dragElList
+    }));
     this.multiMoveableHelper = MoveableHelper.create({
       useBeforeRender: true,
       useRender: false,
@@ -1143,12 +1134,31 @@ class StageMultiDragResize extends EventEmitter {
       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();
@@ -1176,9 +1186,29 @@ class StageMultiDragResize extends EventEmitter {
       });
     });
   }
+  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 {
   constructor({ core }) {
@@ -1205,18 +1235,18 @@ class StageRender extends EventEmitter {
       });
     };
     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
-      }, "*");
       injectStyle(this.contentWindow.document, style);
     };
     this.core = core;
@@ -1232,18 +1262,18 @@ class StageRender extends EventEmitter {
     this.iframe.addEventListener("load", this.loadHandler);
   }
   async mount(el) {
-    if (this.iframe) {
-      if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-        let html = await fetch(this.runtimeUrl).then((res) => res.text());
-        const base = `${location.protocol}//${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 (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+      let html = await fetch(this.runtimeUrl).then((res) => res.text());
+      const base = `${location.protocol}//${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);
@@ -1252,6 +1282,13 @@ class StageRender extends EventEmitter {
     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 {
@@ -1288,7 +1325,7 @@ class StageCore extends EventEmitter {
       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);
@@ -1303,8 +1340,6 @@ class StageCore extends EventEmitter {
       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);
@@ -1342,22 +1377,29 @@ class StageCore extends EventEmitter {
     }
     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;
@@ -1367,7 +1409,6 @@ class StageCore extends EventEmitter {
       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);