@tmagic/stage 1.2.0-beta.1 → 1.2.0-beta.11

package/dist/tmagic-stage.umd.js

@@ -45,6 +45,77 @@
   })(Mode || {});
   const SELECTED_CLASS = "tmagic-stage-selected-area";
 
+  const selectParentAbles = (dr) => ({
+    name: "selectParent",
+    props: {},
+    events: {},
+    render(moveable, React) {
+      const rect = moveable.getRect();
+      const { pos2 } = moveable.state;
+      const editableViewer = moveable.useCSS(
+        "div",
+        `
+      {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        will-change: transform;
+        transform-origin: 0px 0px;
+        display: flex;
+      }
+      .moveable-button {
+        width: 20px;
+        height: 20px;
+        background: #4af;
+        border-radius: 4px;
+        appearance: none;
+        border: 0;
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      `
+      );
+      return React.createElement(
+        editableViewer,
+        {
+          className: "moveable-editable",
+          style: {
+            transform: `translate(${pos2[0] - 25}px, ${pos2[1] - 30}px) rotate(${rect.rotation}deg) translate(10px)`
+          }
+        },
+        React.createElement(
+          "button",
+          {
+            className: "moveable-button",
+            title: "\u9009\u4E2D\u7236\u7EC4\u4EF6",
+            onClick: () => {
+              dr.emit("select-parent");
+            }
+          },
+          React.createElement(
+            "svg",
+            {
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              style: {
+                transform: "rotate(90deg)"
+              }
+            },
+            React.createElement("path", {
+              d: "M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z",
+              fill: "currentColor",
+              fillOpacity: "0.9"
+            })
+          )
+        )
+      );
+    }
+  });
+
   var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
     ContainerHighlightType2["DEFAULT"] = "default";
     ContainerHighlightType2["ALT"] = "alt";
@@ -141,6 +212,8 @@
       return null;
     for (let parent = element; parent.parentElement; ) {
       parent = parent.parentElement;
+      if (parent.tagName === "HTML")
+        return parent;
       style = getComputedStyle(parent);
       if (isAbsolute(style) && isStatic(style))
         continue;
@@ -225,6 +298,7 @@
       dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
     };
   };
+  const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
 
   class StageDragResize extends EventEmitter.EventEmitter {
     core;
@@ -499,10 +573,14 @@
         this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit("update", {
-          el: this.target,
-          style: {
-            transform: frame?.get("transform")
-          }
+          data: [
+            {
+              el: this.target,
+              style: {
+                transform: frame?.get("transform")
+              }
+            }
+          ]
         });
       });
     }
@@ -523,10 +601,14 @@
         this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit("update", {
-          el: this.target,
-          style: {
-            transform: frame?.get("transform")
-          }
+          data: [
+            {
+              el: this.target,
+              style: {
+                transform: frame?.get("transform")
+              }
+            }
+          ]
         });
       });
     }
@@ -631,7 +713,7 @@
         resizable: true,
         scalable: false,
         rotatable: false,
-        snappable: isAbsolute || isFixed,
+        snappable: true,
         snapGap: isAbsolute || isFixed,
         snapThreshold: 5,
         snapDigit: 0,
@@ -662,6 +744,10 @@
           bottom: isSortable ? void 0 : this.container.clientHeight,
           ...moveableOptions.bounds || {}
         },
+        props: {
+          selectParent: true
+        },
+        ables: [selectParentAbles(this)],
         ...options,
         ...moveableOptions
       };
@@ -792,6 +878,7 @@
     verticalGuidelines = [];
     container;
     containerResizeObserver;
+    isShowGuides = true;
     constructor(container) {
       super();
       this.container = container;
@@ -805,12 +892,13 @@
       });
       this.containerResizeObserver.observe(this.container);
     }
-    showGuides(show = true) {
+    showGuides(isShowGuides = true) {
+      this.isShowGuides = isShowGuides;
       this.hGuides.setState({
-        showGuides: show
+        showGuides: isShowGuides
       });
       this.vGuides.setState({
-        showGuides: show
+        showGuides: isShowGuides
       });
     }
     setGuides([hLines, vLines]) {
@@ -880,7 +968,8 @@
       backgroundColor: "#fff",
       lineColor: "#000",
       textColor: "#000",
-      style: this.getGuidesStyle(type)
+      style: this.getGuidesStyle(type),
+      showGuides: this.isShowGuides
     });
     hGuidesChangeGuidesHandler = (e) => {
       this.horizontalGuidelines = e.guides;
@@ -931,9 +1020,7 @@
   class StageMask extends Rule {
     content = createContent();
     wrapper;
-    core;
     page = null;
-    pageScrollParent = null;
     scrollTop = 0;
     scrollLeft = 0;
     width = 0;
@@ -942,37 +1029,21 @@
     wrapperWidth = 0;
     maxScrollTop = 0;
     maxScrollLeft = 0;
-    intersectionObserver = null;
     isMultiSelectStatus = false;
     mode = Mode.ABSOLUTE;
-    pageResizeObserver = null;
+    pageScrollParent = null;
+    intersectionObserver = null;
     wrapperResizeObserver = null;
     highlightHandler = lodashEs.throttle((event) => {
       this.emit("highlight", event);
     }, throttleTime);
-    constructor(config) {
+    constructor() {
       const wrapper = createWrapper();
       super(wrapper);
       this.wrapper = wrapper;
-      this.core = config.core;
-      this.content.addEventListener("mousedown", this.mouseDownHandler);
+      this.initContentEventListener();
       this.wrapper.appendChild(this.content);
-      this.content.addEventListener("wheel", this.mouseWheelHandler);
-      this.content.addEventListener("mousemove", this.highlightHandler);
-      this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
-      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-      const ctrl = isMac ? "meta" : "ctrl";
-      KeyController__default.default.global.keydown(ctrl, (e) => {
-        e.inputEvent.preventDefault();
-        this.isMultiSelectStatus = true;
-      });
-      KeyController__default.default.global.on("blur", () => {
-        this.isMultiSelectStatus = false;
-      });
-      KeyController__default.default.global.keyup(ctrl, (e) => {
-        e.inputEvent.preventDefault();
-        this.isMultiSelectStatus = false;
-      });
+      this.initMultiSelectEvent();
     }
     setMode(mode) {
       this.mode = mode;
@@ -989,9 +1060,66 @@
       if (!page)
         return;
       this.page = page;
-      this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
-      this.pageResizeObserver?.disconnect();
+      this.initObserverIntersection();
+      this.initObserverWrapper();
+    }
+    pageResize(entries) {
+      const [entry] = entries;
+      const { clientHeight, clientWidth } = entry.target;
+      this.setHeight(clientHeight);
+      this.setWidth(clientWidth);
+      this.scroll();
+    }
+    observerIntersection(el) {
+      this.intersectionObserver?.observe(el);
+    }
+    mount(el) {
+      if (!this.content)
+        throw new Error("content \u4E0D\u5B58\u5728");
+      el.appendChild(this.wrapper);
+    }
+    setLayout(el) {
+      this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
+    }
+    scrollIntoView(el) {
+      el.scrollIntoView();
+      if (!this.pageScrollParent)
+        return;
+      this.scrollLeft = this.pageScrollParent.scrollLeft;
+      this.scrollTop = this.pageScrollParent.scrollTop;
+      this.scroll();
+    }
+    destroy() {
+      this.content?.remove();
+      this.page = null;
+      this.pageScrollParent = null;
       this.wrapperResizeObserver?.disconnect();
+      this.content.removeEventListener("mouseleave", this.mouseLeaveHandler);
+      super.destroy();
+    }
+    initContentEventListener() {
+      this.content.addEventListener("mousedown", this.mouseDownHandler);
+      this.content.addEventListener("wheel", this.mouseWheelHandler);
+      this.content.addEventListener("mousemove", this.highlightHandler);
+      this.content.addEventListener("mouseleave", this.mouseLeaveHandler);
+    }
+    initMultiSelectEvent() {
+      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+      const ctrl = isMac ? "meta" : "ctrl";
+      KeyController__default.default.global.keydown(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        this.isMultiSelectStatus = true;
+      });
+      KeyController__default.default.global.on("blur", () => {
+        this.isMultiSelectStatus = false;
+      });
+      KeyController__default.default.global.keyup(ctrl, (e) => {
+        e.inputEvent.preventDefault();
+        this.isMultiSelectStatus = false;
+      });
+    }
+    initObserverIntersection() {
+      this.pageScrollParent = getScrollParent(this.page) || null;
       this.intersectionObserver?.disconnect();
       if (typeof IntersectionObserver !== "undefined") {
         this.intersectionObserver = new IntersectionObserver(
@@ -1011,18 +1139,10 @@
           }
         );
       }
+    }
+    initObserverWrapper() {
+      this.wrapperResizeObserver?.disconnect();
       if (typeof ResizeObserver !== "undefined") {
-        this.pageResizeObserver = new ResizeObserver((entries) => {
-          const [entry] = entries;
-          const { clientHeight, clientWidth } = entry.target;
-          this.setHeight(clientHeight);
-          this.setWidth(clientWidth);
-          this.scroll();
-          if (this.core.dr.moveable) {
-            this.core.dr.updateMoveable();
-          }
-        });
-        this.pageResizeObserver.observe(page);
         this.wrapperResizeObserver = new ResizeObserver((entries) => {
           const [entry] = entries;
           const { clientHeight, clientWidth } = entry.target;
@@ -1034,31 +1154,6 @@
         this.wrapperResizeObserver.observe(this.wrapper);
       }
     }
-    mount(el) {
-      if (!this.content)
-        throw new Error("content \u4E0D\u5B58\u5728");
-      el.appendChild(this.wrapper);
-    }
-    setLayout(el) {
-      this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
-    }
-    scrollIntoView(el) {
-      el.scrollIntoView();
-      if (!this.pageScrollParent)
-        return;
-      this.scrollLeft = this.pageScrollParent.scrollLeft;
-      this.scrollTop = this.pageScrollParent.scrollTop;
-      this.scroll();
-    }
-    destroy() {
-      this.content?.remove();
-      this.page = null;
-      this.pageScrollParent = null;
-      this.pageResizeObserver?.disconnect();
-      this.wrapperResizeObserver?.disconnect();
-      this.content.removeEventListener("mouseleave", this.mouseLeaveHandler);
-      super.destroy();
-    }
     scroll() {
       this.fixScrollValue();
       let { scrollLeft, scrollTop } = this;
@@ -1110,10 +1205,13 @@
       event.stopPropagation();
       if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT)
         return;
-      if (!this.isMultiSelectStatus && event.target.className.indexOf("moveable-area") !== -1) {
+      if (!event.target)
+        return;
+      const targetClassList = event.target.classList;
+      if (!this.isMultiSelectStatus && targetClassList.contains("moveable-area")) {
         return;
       }
-      if (event.target.className.indexOf("moveable-control") !== -1) {
+      if (targetClassList.contains("moveable-control") || isMoveableButton(event.target)) {
         return;
       }
       this.content.removeEventListener("mousemove", this.highlightHandler);
@@ -1375,13 +1473,11 @@
     runtime = null;
     iframe;
     runtimeUrl;
-    core;
     render;
-    constructor({ core }) {
+    constructor({ runtimeUrl, render }) {
       super();
-      this.core = core;
-      this.runtimeUrl = core.config.runtimeUrl || "";
-      this.render = core.config.render;
+      this.runtimeUrl = runtimeUrl || "";
+      this.render = render;
       this.iframe = globalThis.document.createElement("iframe");
       this.iframe.src = utils.isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
       this.iframe.style.cssText = `
@@ -1424,6 +1520,9 @@
         this.on("runtime-ready", listener);
       });
     };
+    getDocument() {
+      return this.contentWindow?.document;
+    }
     destroy() {
       this.iframe?.removeEventListener("load", this.loadHandler);
       this.contentWindow = null;
@@ -1438,7 +1537,7 @@
       if (!this.contentWindow)
         return;
       if (this.render) {
-        const el = await this.render(this.core);
+        const el = await this.render();
         if (el) {
           this.contentWindow.document?.body?.appendChild(el);
         }
@@ -1475,6 +1574,7 @@
     containerHighlightType;
     isContainer;
     canSelect;
+    pageResizeObserver = null;
     constructor(config) {
       super();
       this.config = config;
@@ -1484,8 +1584,8 @@
       this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
       this.containerHighlightDuration = config.containerHighlightDuration || 800;
       this.containerHighlightType = config.containerHighlightType;
-      this.renderer = new StageRender({ core: this });
-      this.mask = new StageMask({ core: this });
+      this.renderer = new StageRender({ runtimeUrl: config.runtimeUrl, render: this.render.bind(this) });
+      this.mask = new StageMask();
       this.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
       this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask });
       this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
@@ -1494,6 +1594,7 @@
       });
       this.renderer.on("page-el-update", (el) => {
         this.mask?.observe(el);
+        this.observePageResize(el);
       });
       this.mask.on("beforeSelect", async (event) => {
         this.clearSelectStatus("multiSelect");
@@ -1535,11 +1636,14 @@
           this.selectedDomList.push(el);
         }
         this.multiSelect(this.selectedDomList);
+        this.emit("multiSelect", this.selectedDomList);
       });
       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");
       });
       this.multiDr.on("update", (data) => {
         setTimeout(() => this.emit("update", data));
@@ -1551,7 +1655,6 @@
     }
     getElementsFromPoint(event) {
       const { renderer, zoom } = this;
-      const doc = renderer.contentWindow?.document;
       let x = event.clientX;
       let y = event.clientY;
       if (renderer.iframe) {
@@ -1561,7 +1664,7 @@
           y = y - rect.top;
         }
       }
-      return doc?.elementsFromPoint(x / zoom, y / zoom);
+      return renderer.getDocument()?.elementsFromPoint(x / zoom, y / zoom);
     }
     async getElementFromPoint(event) {
       const els = this.getElementsFromPoint(event);
@@ -1597,28 +1700,28 @@
       this.mask.setLayout(el);
       this.dr.select(el, event);
       if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
-        this.mask.intersectionObserver?.observe(el);
+        this.mask.observerIntersection(el);
       }
       this.selectedDom = el;
-      if (this.renderer.contentWindow) {
-        removeSelectedClassName(this.renderer.contentWindow.document);
+      const doc = this.renderer.getDocument();
+      if (doc) {
+        removeSelectedClassName(doc);
         if (this.selectedDom) {
-          addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
+          addSelectedClassName(this.selectedDom, doc);
         }
       }
     }
     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);
+      this.selectedDomList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
+      this.multiDr.multiSelect(this.selectedDomList);
     }
     update(data) {
       const { config } = data;
       return this.renderer?.getRuntime().then((runtime) => {
         runtime?.update?.(data);
         setTimeout(() => {
-          const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
+          const el = this.renderer.getDocument()?.getElementById(`${config.id}`);
           if (el && el.id === this.selectedDom?.id) {
             this.selectedDom = el;
             this.mask.setLayout(el);
@@ -1674,7 +1777,7 @@
     async addContainerHighlightClassName(event, exclude) {
       const els = this.getElementsFromPoint(event);
       const { renderer } = this;
-      const doc = renderer.contentWindow?.document;
+      const doc = renderer.getDocument();
       if (!doc)
         return;
       for (const el of els) {
@@ -1690,17 +1793,35 @@
       }, this.containerHighlightDuration);
     }
     destroy() {
-      const { mask, renderer, dr, highlightLayer } = this;
+      const { mask, renderer, dr, highlightLayer, pageResizeObserver } = this;
       renderer.destroy();
       mask.destroy();
       dr.destroy();
       highlightLayer.destroy();
+      pageResizeObserver?.disconnect();
       this.removeAllListeners();
       this.container = void 0;
     }
+    observePageResize(page) {
+      if (typeof ResizeObserver !== "undefined") {
+        this.pageResizeObserver = new ResizeObserver((entries) => {
+          this.mask.pageResize(entries);
+          if (this.dr.moveable) {
+            this.dr.updateMoveable();
+          }
+        });
+        this.pageResizeObserver.observe(page);
+      }
+    }
+    async render() {
+      if (this.config?.render) {
+        return await this.config.render(this);
+      }
+      return null;
+    }
     async getTargetElement(idOrEl) {
       if (typeof idOrEl === "string" || typeof idOrEl === "number") {
-        const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
+        const el = this.renderer.getDocument()?.getElementById(`${idOrEl}`);
         if (!el)
           throw new Error(`\u4E0D\u5B58\u5728ID\u4E3A${idOrEl}\u7684\u5143\u7D20`);
         return el;
@@ -1737,6 +1858,7 @@
   exports.isAbsolute = isAbsolute;
   exports.isFixed = isFixed;
   exports.isFixedParent = isFixedParent;
+  exports.isMoveableButton = isMoveableButton;
   exports.isRelative = isRelative;
   exports.isStatic = isStatic;
   exports.removeSelectedClassName = removeSelectedClassName;