@tmagic/stage 1.0.0-rc.3 → 1.0.0-rc.6

package/dist/tmagic-stage.es.js

@@ -16,6 +16,8 @@ var GuidesType = /* @__PURE__ */ ((GuidesType2) => {
 var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
   ZIndex2["MASK"] = "99999";
   ZIndex2["SELECTED_EL"] = "666";
+  ZIndex2["GHOST_EL"] = "700";
+  ZIndex2["DRAG_EL"] = "9";
   return ZIndex2;
 })(ZIndex || {});
 var MouseButton = /* @__PURE__ */ ((MouseButton2) => {
@@ -31,6 +33,8 @@ var Mode = /* @__PURE__ */ ((Mode2) => {
   return Mode2;
 })(Mode || {});
 const SELECTED_CLASS = "tmagic-stage-selected-area";
+const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
 
 const getParents = (el, relative) => {
   let cur = el.parentElement;
@@ -177,12 +181,29 @@ const addSelectedClassName = (el, doc) => {
     item.classList.add(`${SELECTED_CLASS}-parents`);
   });
 };
+const getGuideLineFromCache = (type) => {
+  const key = {
+    [GuidesType.HORIZONTAL]: H_GUIDE_LINE_STORAGE_KEY,
+    [GuidesType.VERTICAL]: V_GUIDE_LINE_STORAGE_KEY
+  }[type];
+  if (!key)
+    return [];
+  const guideLineCacheData = globalThis.localStorage.getItem(key);
+  if (guideLineCacheData) {
+    try {
+      return JSON.parse(guideLineCacheData) || [];
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return [];
+};
 
 class StageDragResize extends EventEmitter {
   constructor(config) {
     super();
-    this.horizontalGuidelines = [];
-    this.verticalGuidelines = [];
+    this.horizontalGuidelines = getGuideLineFromCache(GuidesType.HORIZONTAL);
+    this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
     this.elementGuidelines = [];
     this.mode = Mode.ABSOLUTE;
     this.moveableOptions = {};
@@ -257,6 +278,26 @@ class StageDragResize extends EventEmitter {
       target: this.dragEl
     });
   }
+  setElementGuidelines(nodes) {
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+    if (this.mode === Mode.ABSOLUTE) {
+      const frame = document.createDocumentFragment();
+      for (const node of nodes) {
+        const { width, height } = node.getBoundingClientRect();
+        if (node === this.target)
+          continue;
+        const { left, top } = getOffset(node);
+        const elementGuideline = document.createElement("div");
+        elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+        this.elementGuidelines.push(elementGuideline);
+        frame.append(elementGuideline);
+      }
+      this.container.append(frame);
+    }
+  }
   initMoveable() {
     this.moveable?.destroy();
     this.moveable = new Moveable(this.container, {
@@ -341,14 +382,6 @@ class StageDragResize extends EventEmitter {
       this.destroyGhostEl();
     });
   }
-  getSnapElements(runtime, el) {
-    const { renderer, mask } = this.core;
-    const getSnapElements = runtime?.getSnapElements || (() => {
-      const doc = renderer.contentWindow?.document;
-      return doc ? Array.from(doc.querySelectorAll("[id]")) : [];
-    });
-    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element) && element !== mask.page);
-  }
   sort() {
     if (!this.target || !this.ghostEl)
       throw new Error("\u672A\u77E5\u9519\u8BEF");
@@ -387,7 +420,7 @@ class StageDragResize extends EventEmitter {
     const ghostEl = el.cloneNode(true);
     const { top, left } = getAbsolutePosition(el, getOffset(el));
     ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
-    ghostEl.style.zIndex = "5";
+    ghostEl.style.zIndex = ZIndex.GHOST_EL;
     ghostEl.style.opacity = ".5";
     ghostEl.style.position = "absolute";
     ghostEl.style.left = `${left}px`;
@@ -408,7 +441,7 @@ class StageDragResize extends EventEmitter {
       top: ${offset.top}px;
       width: ${width}px;
       height: ${height}px;
-      z-index: 9;
+      z-index: ${ZIndex.DRAG_EL};
     `;
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
   }
@@ -424,6 +457,11 @@ class StageDragResize extends EventEmitter {
     if (typeof moveableOptions === "function") {
       moveableOptions = moveableOptions(this.core);
     }
+    const elementGuidelines = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
+    this.setElementGuidelines(elementGuidelines);
+    if (moveableOptions.elementGuidelines) {
+      delete moveableOptions.elementGuidelines;
+    }
     return {
       origin: false,
       rootContainer: this.core.container,
@@ -643,8 +681,8 @@ class StageHighlight extends EventEmitter {
 class Rule extends EventEmitter$1 {
   constructor(container) {
     super();
-    this.horizontalGuidelines = [];
-    this.verticalGuidelines = [];
+    this.horizontalGuidelines = getGuideLineFromCache(GuidesType.HORIZONTAL);
+    this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
     this.getGuidesStyle = (type) => ({
       position: "fixed",
       zIndex: 1,
@@ -668,6 +706,7 @@ class Rule extends EventEmitter$1 {
         type: GuidesType.HORIZONTAL,
         guides: this.horizontalGuidelines
       });
+      globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
     };
     this.vGuidesChangeGuidesHandler = (e) => {
       this.verticalGuidelines = e.guides;
@@ -675,10 +714,11 @@ class Rule extends EventEmitter$1 {
         type: GuidesType.VERTICAL,
         guides: this.verticalGuidelines
       });
+      globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
     };
     this.container = container;
-    this.hGuides = this.createGuides(GuidesType.HORIZONTAL);
-    this.vGuides = this.createGuides(GuidesType.VERTICAL);
+    this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+    this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
     this.hGuides.on("changeGuides", this.hGuidesChangeGuidesHandler);
     this.vGuides.on("changeGuides", this.vGuidesChangeGuidesHandler);
     this.containerResizeObserver = new ResizeObserver(() => {
@@ -712,6 +752,8 @@ class Rule extends EventEmitter$1 {
       type: GuidesType.HORIZONTAL,
       guides: []
     });
+    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, "[]");
+    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, "[]");
   }
   showRule(show = true) {
     if (show) {
@@ -835,7 +877,6 @@ class StageMask extends Rule {
       if (this.maxScrollLeft > 0) {
         this.scrollLeft = this.scrollLeft + deltaX;
       }
-      this.fixScrollValue();
       this.scroll();
       this.emit("scroll", event);
     };
@@ -890,9 +931,10 @@ class StageMask extends Rule {
         const { clientHeight, clientWidth } = entry.target;
         this.setHeight(clientHeight);
         this.setWidth(clientWidth);
-        this.fixScrollValue();
         this.scroll();
-        this.core.dr.updateMoveable();
+        if (this.core.dr.moveable) {
+          this.core.dr.updateMoveable();
+        }
       });
       this.pageResizeObserver.observe(page);
       this.wrapperResizeObserver = new ResizeObserver((entries) => {
@@ -932,6 +974,7 @@ class StageMask extends Rule {
     super.destroy();
   }
   scroll() {
+    this.fixScrollValue();
     let { scrollLeft, scrollTop } = this;
     if (this.pageScrollParent) {
       this.pageScrollParent.scrollTo({
@@ -960,10 +1003,10 @@ class StageMask extends Rule {
     this.content.style.width = `${width}px`;
   }
   setMaxScrollLeft() {
-    this.maxScrollLeft = this.width - this.wrapperWidth;
+    this.maxScrollLeft = Math.max(this.width - this.wrapperWidth, 0);
   }
   setMaxScrollTop() {
-    this.maxScrollTop = this.height - this.wrapperHeight;
+    this.maxScrollTop = Math.max(this.height - this.wrapperHeight, 0);
   }
   fixScrollValue() {
     if (this.scrollTop < 0)
@@ -1009,16 +1052,6 @@ class StageRender extends EventEmitter {
           this.iframe?.contentDocument?.body?.appendChild(el);
         }
       }
-      if (this.contentWindow) {
-        const style = this.contentWindow.document.createElement("style");
-        style.id = "tmagic-stage-render";
-        style.innerHTML = `
-        .${SELECTED_CLASS}, .${SELECTED_CLASS}-parent {
-          z-index: ${ZIndex.SELECTED_EL};
-        }
-      `;
-        this.contentWindow.document.head.appendChild(style);
-      }
     };
     this.core = core;
     this.runtimeUrl = core.config.runtimeUrl || "";