@tmagic/stage 1.0.0-rc.1 → 1.0.0-rc.10

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,31 +33,22 @@ 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;
+  const parents = [];
+  while (cur && cur !== relative) {
+    parents.push(cur);
+    cur = cur.parentElement;
+  }
+  return parents;
+};
 const getOffset = (el) => {
-  const { transform } = getComputedStyle(el);
   const { offsetParent } = el;
-  let left = el.offsetLeft;
-  let top = el.offsetTop;
-  if (transform.indexOf("matrix") > -1) {
-    let a = 1;
-    let b = 1;
-    let c = 1;
-    let d = 1;
-    let e = 0;
-    let f = 0;
-    transform.replace(/matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/, ($0, $1, $2, $3, $4, $5, $6) => {
-      a = +$1;
-      b = +$2;
-      c = +$3;
-      d = +$4;
-      e = +$5;
-      f = +$6;
-      return transform;
-    });
-    left = a * left + c * top + e;
-    top = b * left + d * top + f;
-  }
+  const left = el.offsetLeft;
+  const top = el.offsetTop;
   if (offsetParent) {
     const parentOffset = getOffset(offsetParent);
     return {
@@ -156,18 +149,41 @@ const removeSelectedClassName = (doc) => {
   if (oldEl) {
     oldEl.classList.remove(SELECTED_CLASS);
     oldEl.parentNode?.classList.remove(`${SELECTED_CLASS}-parent`);
+    doc.querySelectorAll(`.${SELECTED_CLASS}-parents`).forEach((item) => {
+      item.classList.remove(`${SELECTED_CLASS}-parents`);
+    });
   }
 };
-const addSelectedClassName = (el) => {
+const addSelectedClassName = (el, doc) => {
   el.classList.add(SELECTED_CLASS);
   el.parentNode?.classList.add(`${SELECTED_CLASS}-parent`);
+  getParents(el, doc.body).forEach((item) => {
+    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 = {};
@@ -180,8 +196,8 @@ class StageDragResize extends EventEmitter {
   select(el, event) {
     const oldTarget = this.target;
     this.target = el;
-    this.init(el);
     if (!this.moveable || this.target !== oldTarget) {
+      this.init(el);
       this.moveableHelper = MoveableHelper.create({
         useBeforeRender: true,
         useRender: false,
@@ -242,6 +258,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, {
@@ -249,35 +285,38 @@ class StageDragResize extends EventEmitter {
     });
     this.bindResizeEvent();
     this.bindDragEvent();
+    this.bindRotateEvent();
+    this.bindScaleEvent();
   }
   bindResizeEvent() {
     if (!this.moveable)
       throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+    const frame = {
+      left: 0,
+      top: 0
+    };
     this.moveable.on("resizeStart", (e) => {
-      if (e.dragStart) {
-        const rect = this.moveable.getRect();
-        const offset = getAbsolutePosition(e.target, rect);
-        e.dragStart.set([offset.left, offset.top]);
-      }
-    }).on("resize", ({ width, height, drag }) => {
+      if (!this.target)
+        return;
+      this.dragStatus = "start" /* START */;
+      this.moveableHelper?.onResizeStart(e);
+      frame.top = this.target.offsetTop;
+      frame.left = this.target.offsetLeft;
+    }).on("resize", (e) => {
+      const { width, height, drag } = e;
       if (!this.moveable || !this.target || !this.dragEl)
         return;
       const { beforeTranslate } = drag;
       this.dragStatus = "ing" /* ING */;
-      this.target.style.width = `${width}px`;
-      this.target.style.height = `${height}px`;
-      this.dragEl.style.width = `${width}px`;
-      this.dragEl.style.height = `${height}px`;
+      this.moveableHelper?.onResize(e);
       if (this.mode === Mode.SORTABLE) {
-        this.dragEl.style.top = `${beforeTranslate[1]}px`;
-        this.target.style.top = `0px`;
-        return;
+        this.target.style.top = "0px";
+      } else {
+        this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
+        this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
       }
-      this.dragEl.style.left = `${beforeTranslate[0]}px`;
-      this.dragEl.style.top = `${beforeTranslate[1]}px`;
-      const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] });
-      this.target.style.left = `${offset.left}px`;
-      this.target.style.top = `${offset.top}px`;
+      this.target.style.width = `${width}px`;
+      this.target.style.height = `${height}px`;
     }).on("resizeEnd", () => {
       this.dragStatus = "end" /* END */;
       this.update(true);
@@ -286,7 +325,10 @@ class StageDragResize extends EventEmitter {
   bindDragEvent() {
     if (!this.moveable)
       throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
-    let offset = null;
+    const frame = {
+      left: 0,
+      top: 0
+    };
     this.moveable.on("dragStart", (e) => {
       if (!this.target)
         throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
@@ -295,22 +337,19 @@ class StageDragResize extends EventEmitter {
       if (this.mode === Mode.SORTABLE) {
         this.ghostEl = this.generateGhostEl(this.target);
       }
+      frame.top = this.target.offsetTop;
+      frame.left = this.target.offsetLeft;
     }).on("drag", (e) => {
       if (!this.target || !this.dragEl)
         return;
-      if (!offset) {
-        offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
-      }
       this.dragStatus = "ing" /* ING */;
-      const { left, top } = e;
       if (this.ghostEl) {
-        this.dragEl.style.top = `${top}px`;
-        this.ghostEl.style.top = `${top + offset.top}px`;
+        this.ghostEl.style.top = `${frame.top + e.beforeTranslate[1]}px`;
         return;
       }
       this.moveableHelper?.onDrag(e);
-      this.target.style.left = `${left + offset.left}px`;
-      this.target.style.top = `${top + offset.top}px`;
+      this.target.style.left = `${frame.left + e.beforeTranslate[0]}px`;
+      this.target.style.top = `${frame.top + e.beforeTranslate[1]}px`;
     }).on("dragEnd", () => {
       if (this.dragStatus === "ing" /* ING */) {
         switch (this.mode) {
@@ -321,18 +360,57 @@ class StageDragResize extends EventEmitter {
             this.update();
         }
       }
-      offset = null;
       this.dragStatus = "end" /* END */;
       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]")) : [];
+  bindRotateEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+    this.moveable.on("rotateStart", (e) => {
+      this.dragStatus = "start" /* START */;
+      this.moveableHelper?.onRotateStart(e);
+    }).on("rotate", (e) => {
+      if (!this.target || !this.dragEl)
+        return;
+      this.dragStatus = "ing" /* ING */;
+      this.moveableHelper?.onRotate(e);
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.target.style.transform = frame?.toCSSObject().transform || "";
+    }).on("rotateEnd", (e) => {
+      this.dragStatus = "end" /* END */;
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.emit("update", {
+        el: this.target,
+        style: {
+          transform: frame?.get("transform")
+        }
+      });
+    });
+  }
+  bindScaleEvent() {
+    if (!this.moveable)
+      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+    this.moveable.on("scaleStart", (e) => {
+      this.dragStatus = "start" /* START */;
+      this.moveableHelper?.onScaleStart(e);
+    }).on("scale", (e) => {
+      if (!this.target || !this.dragEl)
+        return;
+      this.dragStatus = "ing" /* ING */;
+      this.moveableHelper?.onScale(e);
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.target.style.transform = frame?.toCSSObject().transform || "";
+    }).on("scaleEnd", (e) => {
+      this.dragStatus = "end" /* END */;
+      const frame = this.moveableHelper?.getFrame(e.target);
+      this.emit("update", {
+        el: this.target,
+        style: {
+          transform: frame?.get("transform")
+        }
+      });
     });
-    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element) && element !== mask.page);
   }
   sort() {
     if (!this.target || !this.ghostEl)
@@ -354,12 +432,13 @@ class StageDragResize extends EventEmitter {
     }
   }
   update(isResize = false) {
-    const rect = this.moveable.getRect();
-    const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : getAbsolutePosition(this.target, rect);
+    if (!this.target)
+      return;
+    const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
     const left = this.calcValueByFontsize(offset.left);
     const top = this.calcValueByFontsize(offset.top);
-    const width = this.calcValueByFontsize(rect.width);
-    const height = this.calcValueByFontsize(rect.height);
+    const width = this.calcValueByFontsize(this.target.clientWidth);
+    const height = this.calcValueByFontsize(this.target.clientHeight);
     this.emit("update", {
       el: this.target,
       style: isResize ? { left, top, width, height } : { left, top }
@@ -372,7 +451,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`;
@@ -385,17 +464,21 @@ class StageDragResize extends EventEmitter {
     this.ghostEl = void 0;
   }
   updateDragEl(el) {
-    const { width, height } = el.getBoundingClientRect();
     const offset = getOffset(el);
+    const { transform } = getComputedStyle(el);
     this.dragEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${offset.left}px;
       top: ${offset.top}px;
-      width: ${width}px;
-      height: ${height}px;
-      z-index: 9;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+    if (typeof this.core.config.updateDragEl === "function") {
+      this.core.config.updateDragEl(this.dragEl, el);
+    }
   }
   destroyDragEl() {
     this.dragEl?.remove();
@@ -409,6 +492,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,
@@ -416,6 +504,8 @@ class StageDragResize extends EventEmitter {
       dragArea: false,
       draggable: true,
       resizable: true,
+      scalable: false,
+      rotatable: false,
       snappable: isAbsolute || isFixed,
       snapGap: isAbsolute || isFixed,
       snapThreshold: 5,
@@ -514,49 +604,34 @@ class TargetCalibrate extends EventEmitter {
     this.parent = config.parent;
     this.mask = config.mask;
     this.dr = config.dr;
+    this.core = config.core;
     this.operationEl = globalThis.document.createElement("div");
     this.parent.append(this.operationEl);
   }
   update(el, prefix) {
-    const { width, height } = el.getBoundingClientRect();
     const { left, top } = this.getOffset(el);
+    const { transform } = getComputedStyle(el);
     this.operationEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${left}px;
       top: ${top}px;
-      width: ${width}px;
-      height: ${height}px;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
     `;
     this.operationEl.id = `${prefix}${el.id}`;
+    if (typeof this.core.config.updateDragEl === "function") {
+      this.core.config.updateDragEl(this.operationEl, el);
+    }
     return this.operationEl;
   }
   destroy() {
     this.operationEl?.remove();
   }
   getOffset(el) {
-    const { transform } = getComputedStyle(el);
     const { offsetParent } = el;
-    let left = el.offsetLeft;
-    let top = el.offsetTop;
-    if (transform.indexOf("matrix") > -1) {
-      let a = 1;
-      let b = 1;
-      let c = 1;
-      let d = 1;
-      let e = 0;
-      let f = 0;
-      transform.replace(/matrix\((.+), (.+), (.+), (.+), (.+), (.+)\)/, ($0, $1, $2, $3, $4, $5, $6) => {
-        a = +$1;
-        b = +$2;
-        c = +$3;
-        d = +$4;
-        e = +$5;
-        f = +$6;
-        return transform;
-      });
-      left = a * left + c * top + e;
-      top = b * left + d * top + f;
-    }
+    const left = el.offsetLeft;
+    const top = el.offsetTop;
     if (offsetParent) {
       const parentOffset = this.getOffset(offsetParent);
       return {
@@ -597,7 +672,8 @@ class StageHighlight extends EventEmitter {
     this.calibrationTarget = new TargetCalibrate({
       parent: this.core.mask.content,
       mask: this.core.mask,
-      dr: this.core.dr
+      dr: this.core.dr,
+      core: this.core
     });
   }
   highlight(el) {
@@ -628,8 +704,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,
@@ -653,6 +729,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;
@@ -660,10 +737,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(() => {
@@ -697,6 +775,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) {
@@ -780,6 +860,7 @@ class StageMask extends Rule {
     this.wrapperWidth = 0;
     this.maxScrollTop = 0;
     this.maxScrollLeft = 0;
+    this.intersectionObserver = null;
     this.mode = Mode.ABSOLUTE;
     this.pageResizeObserver = null;
     this.wrapperResizeObserver = null;
@@ -819,7 +900,6 @@ class StageMask extends Rule {
       if (this.maxScrollLeft > 0) {
         this.scrollLeft = this.scrollLeft + deltaX;
       }
-      this.fixScrollValue();
       this.scroll();
       this.emit("scroll", event);
     };
@@ -851,15 +931,33 @@ class StageMask extends Rule {
     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) => {
@@ -881,6 +979,14 @@ class StageMask extends Rule {
   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;
@@ -891,6 +997,7 @@ class StageMask extends Rule {
     super.destroy();
   }
   scroll() {
+    this.fixScrollValue();
     let { scrollLeft, scrollTop } = this;
     if (this.pageScrollParent) {
       this.pageScrollParent.scrollTo({
@@ -919,10 +1026,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)
@@ -968,16 +1075,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 || "";
@@ -1096,11 +1193,14 @@ 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.selectedDom = el;
     if (this.renderer.contentWindow) {
       removeSelectedClassName(this.renderer.contentWindow.document);
       if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom);
+        addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
       }
     }
   }