@tmagic/stage 1.0.0-rc.2 → 1.0.0-rc.5

package/dist/tmagic-stage.umd.js

@@ -23,6 +23,8 @@
   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) => {
@@ -38,6 +40,8 @@
     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;
@@ -184,12 +188,29 @@
       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.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 = {};
@@ -264,6 +285,26 @@
         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__default["default"](this.container, {
@@ -348,14 +389,6 @@
         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");
@@ -394,7 +427,7 @@
       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`;
@@ -415,7 +448,7 @@
       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}`;
     }
@@ -431,6 +464,11 @@
       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,
@@ -650,8 +688,8 @@
   class Rule extends EventEmitter__default["default"] {
     constructor(container) {
       super();
-      this.horizontalGuidelines = [];
-      this.verticalGuidelines = [];
+      this.horizontalGuidelines = getGuideLineFromCache(GuidesType.HORIZONTAL);
+      this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
       this.getGuidesStyle = (type) => ({
         position: "fixed",
         zIndex: 1,
@@ -675,6 +713,7 @@
           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;
@@ -682,10 +721,11 @@
           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(() => {
@@ -719,6 +759,8 @@
         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) {
@@ -802,6 +844,7 @@
       this.wrapperWidth = 0;
       this.maxScrollTop = 0;
       this.maxScrollLeft = 0;
+      this.intersectionObserver = null;
       this.mode = Mode.ABSOLUTE;
       this.pageResizeObserver = null;
       this.wrapperResizeObserver = null;
@@ -841,7 +884,6 @@
         if (this.maxScrollLeft > 0) {
           this.scrollLeft = this.scrollLeft + deltaX;
         }
-        this.fixScrollValue();
         this.scroll();
         this.emit("scroll", event);
       };
@@ -873,15 +915,33 @@
       this.page = page;
       this.pageScrollParent = getScrollParent(page) || this.core.renderer.contentWindow?.document.documentElement || null;
       this.pageResizeObserver?.disconnect();
+      this.wrapperResizeObserver?.disconnect();
+      this.intersectionObserver?.disconnect();
+      if (typeof IntersectionObserver !== "undefined") {
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            const { target, intersectionRatio } = entry;
+            if (intersectionRatio <= 0) {
+              this.scrollIntoView(target);
+            }
+            this.intersectionObserver?.unobserve(target);
+          });
+        }, {
+          root: this.pageScrollParent,
+          rootMargin: "0px",
+          threshold: 1
+        });
+      }
       if (typeof ResizeObserver !== "undefined") {
         this.pageResizeObserver = new ResizeObserver((entries) => {
           const [entry] = entries;
           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) => {
@@ -904,8 +964,6 @@
       this.setMode(isFixedParent(el) ? Mode.FIXED : Mode.ABSOLUTE);
     }
     scrollIntoView(el) {
-      if (this.mode === Mode.FIXED)
-        return;
       el.scrollIntoView();
       if (!this.pageScrollParent)
         return;
@@ -923,6 +981,7 @@
       super.destroy();
     }
     scroll() {
+      this.fixScrollValue();
       let { scrollLeft, scrollTop } = this;
       if (this.pageScrollParent) {
         this.pageScrollParent.scrollTo({
@@ -951,10 +1010,10 @@
       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)
@@ -1128,7 +1187,9 @@
       }
       this.mask.setLayout(el);
       this.dr.select(el, event);
-      this.mask.scrollIntoView(el);
+      if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+        this.mask.intersectionObserver?.observe(el);
+      }
       this.selectedDom = el;
       if (this.renderer.contentWindow) {
         removeSelectedClassName(this.renderer.contentWindow.document);