@tmagic/stage 1.1.6 → 1.2.0-beta.10

package/dist/tmagic-stage.mjs

@@ -39,6 +39,77 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
 })(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";
@@ -135,6 +206,8 @@ const getScrollParent = (element, includeHidden = false) => {
     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;
@@ -219,6 +292,7 @@ const up = (deltaTop, target) => {
     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 {
   core;
@@ -493,10 +567,14 @@ class StageDragResize extends EventEmitter {
       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")
+            }
+          }
+        ]
       });
     });
   }
@@ -517,10 +595,14 @@ class StageDragResize extends EventEmitter {
       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")
+            }
+          }
+        ]
       });
     });
   }
@@ -625,7 +707,7 @@ class StageDragResize extends EventEmitter {
       resizable: true,
       scalable: false,
       rotatable: false,
-      snappable: isAbsolute || isFixed,
+      snappable: true,
       snapGap: isAbsolute || isFixed,
       snapThreshold: 5,
       snapDigit: 0,
@@ -656,6 +738,10 @@ class StageDragResize extends EventEmitter {
         bottom: isSortable ? void 0 : this.container.clientHeight,
         ...moveableOptions.bounds || {}
       },
+      props: {
+        selectParent: true
+      },
+      ables: [selectParentAbles(this)],
       ...options,
       ...moveableOptions
     };
@@ -786,6 +872,7 @@ class Rule extends EventEmitter$1 {
   verticalGuidelines = [];
   container;
   containerResizeObserver;
+  isShowGuides = true;
   constructor(container) {
     super();
     this.container = container;
@@ -799,12 +886,13 @@ class Rule extends EventEmitter$1 {
     });
     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]) {
@@ -874,7 +962,8 @@ class Rule extends EventEmitter$1 {
     backgroundColor: "#fff",
     lineColor: "#000",
     textColor: "#000",
-    style: this.getGuidesStyle(type)
+    style: this.getGuidesStyle(type),
+    showGuides: this.isShowGuides
   });
   hGuidesChangeGuidesHandler = (e) => {
     this.horizontalGuidelines = e.guides;
@@ -925,9 +1014,7 @@ const createWrapper = () => {
 class StageMask extends Rule {
   content = createContent();
   wrapper;
-  core;
   page = null;
-  pageScrollParent = null;
   scrollTop = 0;
   scrollLeft = 0;
   width = 0;
@@ -936,34 +1023,21 @@ class StageMask extends Rule {
   wrapperWidth = 0;
   maxScrollTop = 0;
   maxScrollLeft = 0;
-  intersectionObserver = null;
   isMultiSelectStatus = false;
   mode = Mode.ABSOLUTE;
-  pageResizeObserver = null;
+  pageScrollParent = null;
+  intersectionObserver = null;
   wrapperResizeObserver = null;
   highlightHandler = 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.global.keydown(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = true;
-    });
-    KeyController.global.keyup(ctrl, (e) => {
-      e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = false;
-    });
+    this.initMultiSelectEvent();
   }
   setMode(mode) {
     this.mode = mode;
@@ -980,9 +1054,66 @@ class StageMask extends Rule {
     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.global.keydown(ctrl, (e) => {
+      e.inputEvent.preventDefault();
+      this.isMultiSelectStatus = true;
+    });
+    KeyController.global.on("blur", () => {
+      this.isMultiSelectStatus = false;
+    });
+    KeyController.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(
@@ -1002,18 +1133,10 @@ class StageMask extends Rule {
         }
       );
     }
+  }
+  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;
@@ -1025,31 +1148,6 @@ class StageMask extends Rule {
       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;
@@ -1101,10 +1199,13 @@ class StageMask extends Rule {
     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);
@@ -1366,13 +1467,11 @@ class StageRender extends EventEmitter {
   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 = isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
     this.iframe.style.cssText = `
@@ -1415,6 +1514,9 @@ class StageRender extends EventEmitter {
       this.on("runtime-ready", listener);
     });
   };
+  getDocument() {
+    return this.contentWindow?.document;
+  }
   destroy() {
     this.iframe?.removeEventListener("load", this.loadHandler);
     this.contentWindow = null;
@@ -1429,7 +1531,7 @@ class StageRender extends EventEmitter {
     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);
       }
@@ -1466,6 +1568,7 @@ class StageCore extends EventEmitter {
   containerHighlightType;
   isContainer;
   canSelect;
+  pageResizeObserver = null;
   constructor(config) {
     super();
     this.config = config;
@@ -1475,8 +1578,8 @@ class StageCore extends EventEmitter {
     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 });
@@ -1485,6 +1588,7 @@ class StageCore extends EventEmitter {
     });
     this.renderer.on("page-el-update", (el) => {
       this.mask?.observe(el);
+      this.observePageResize(el);
     });
     this.mask.on("beforeSelect", async (event) => {
       this.clearSelectStatus("multiSelect");
@@ -1526,11 +1630,14 @@ class StageCore extends EventEmitter {
         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));
@@ -1542,7 +1649,6 @@ class StageCore extends EventEmitter {
   }
   getElementsFromPoint(event) {
     const { renderer, zoom } = this;
-    const doc = renderer.contentWindow?.document;
     let x = event.clientX;
     let y = event.clientY;
     if (renderer.iframe) {
@@ -1552,7 +1658,7 @@ class StageCore extends EventEmitter {
         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);
@@ -1588,28 +1694,28 @@ class StageCore extends EventEmitter {
     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);
@@ -1665,7 +1771,7 @@ class StageCore extends EventEmitter {
   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) {
@@ -1681,17 +1787,35 @@ class StageCore extends EventEmitter {
     }, 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;
@@ -1700,5 +1824,5 @@ class StageCore extends EventEmitter {
   }
 }
 
-export { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isRelative, isStatic, removeSelectedClassName, up };
+export { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
 //# sourceMappingURL=tmagic-stage.mjs.map