@tmagic/stage 1.0.0-rc.7 → 1.0.0

package/dist/tmagic-stage.es.js

@@ -33,8 +33,6 @@ 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;
@@ -79,31 +77,15 @@ const isSameDomain = (targetUrl = "", source = globalThis.location.host) => {
     return true;
   return getHost(targetUrl) === source;
 };
-const isAbsolute = (el) => {
-  if (!el)
-    return false;
-  return getComputedStyle(el).position === "absolute";
-};
-const isRelative = (el) => {
-  if (!el)
-    return false;
-  return getComputedStyle(el).position === "relative";
-};
-const isStatic = (el) => {
-  if (!el)
-    return false;
-  return getComputedStyle(el).position === "static";
-};
-const isFixed = (el) => {
-  if (!el)
-    return false;
-  return getComputedStyle(el).position === "fixed";
-};
+const isAbsolute = (style) => style.position === "absolute";
+const isRelative = (style) => style.position === "relative";
+const isStatic = (style) => style.position === "static";
+const isFixed = (style) => style.position === "fixed";
 const isFixedParent = (el) => {
   let fixed = false;
   let dom = el;
   while (dom) {
-    fixed = isFixed(dom);
+    fixed = isFixed(getComputedStyle(dom));
     if (fixed) {
       break;
     }
@@ -118,21 +100,21 @@ const isFixedParent = (el) => {
 const getMode = (el) => {
   if (isFixedParent(el))
     return Mode.FIXED;
-  if (isStatic(el) || isRelative(el))
+  const style = getComputedStyle(el);
+  if (isStatic(style) || isRelative(style))
     return Mode.SORTABLE;
   return Mode.ABSOLUTE;
 };
 const getScrollParent = (element, includeHidden = false) => {
   let style = getComputedStyle(element);
   const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
-  if (isFixed(element))
+  if (isFixed(style))
     return null;
   for (let parent = element; parent.parentElement; ) {
     parent = parent.parentElement;
     style = getComputedStyle(parent);
-    if (isAbsolute(element) && isStatic(element)) {
+    if (isAbsolute(style) && isStatic(style))
       continue;
-    }
     if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
       return parent;
   }
@@ -161,29 +143,12 @@ 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 = getGuideLineFromCache(GuidesType.HORIZONTAL);
-    this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
     this.elementGuidelines = [];
     this.mode = Mode.ABSOLUTE;
     this.moveableOptions = {};
@@ -196,8 +161,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,
@@ -215,7 +180,7 @@ class StageDragResize extends EventEmitter {
     if (!this.moveable)
       throw new Error("\u672A\u521D\u59CB\u5316moveable");
     if (!el)
-      throw new Error("\u4E3A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
+      throw new Error("\u672A\u9009\u4E2D\u4EFB\u4F55\u8282\u70B9");
     this.target = el;
     this.init(el);
     Object.entries(this.moveableOptions).forEach(([key, value]) => {
@@ -231,7 +196,9 @@ class StageDragResize extends EventEmitter {
       this.verticalGuidelines = guidelines;
       this.moveableOptions.verticalGuidelines = guidelines;
     }
-    this.updateMoveable();
+    if (this.moveable) {
+      this.updateMoveable();
+    }
   }
   clearGuides() {
     this.horizontalGuidelines = [];
@@ -290,7 +257,7 @@ class StageDragResize extends EventEmitter {
   }
   bindResizeEvent() {
     if (!this.moveable)
-      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
     const frame = {
       left: 0,
       top: 0
@@ -309,10 +276,14 @@ class StageDragResize extends EventEmitter {
       const { beforeTranslate } = drag;
       this.dragStatus = "ing" /* ING */;
       this.moveableHelper?.onResize(e);
+      if (this.mode === Mode.SORTABLE) {
+        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.target.style.width = `${width}px`;
       this.target.style.height = `${height}px`;
-      this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
-      this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
     }).on("resizeEnd", () => {
       this.dragStatus = "end" /* END */;
       this.update(true);
@@ -320,8 +291,11 @@ class StageDragResize extends EventEmitter {
   }
   bindDragEvent() {
     if (!this.moveable)
-      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
-    let offset = null;
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
+    const frame = {
+      left: 0,
+      top: 0
+    };
     this.moveable.on("dragStart", (e) => {
       if (!this.target)
         throw new Error("\u672A\u9009\u4E2D\u7EC4\u4EF6");
@@ -330,22 +304,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) {
@@ -356,14 +327,13 @@ class StageDragResize extends EventEmitter {
             this.update();
         }
       }
-      offset = null;
       this.dragStatus = "end" /* END */;
       this.destroyGhostEl();
     });
   }
   bindRotateEvent() {
     if (!this.moveable)
-      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
     this.moveable.on("rotateStart", (e) => {
       this.dragStatus = "start" /* START */;
       this.moveableHelper?.onRotateStart(e);
@@ -387,7 +357,7 @@ class StageDragResize extends EventEmitter {
   }
   bindScaleEvent() {
     if (!this.moveable)
-      throw new Error("moveable \u4E3A\u521D\u59CB\u5316");
+      throw new Error("moveable \u672A\u521D\u59CB\u5316");
     this.moveable.on("scaleStart", (e) => {
       this.dragStatus = "start" /* START */;
       this.moveableHelper?.onScaleStart(e);
@@ -473,6 +443,9 @@ class StageDragResize extends EventEmitter {
       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();
@@ -526,7 +499,7 @@ class StageDragResize extends EventEmitter {
       elementGuidelines: this.elementGuidelines,
       bounds: {
         top: 0,
-        left: 0,
+        left: -1,
         right: this.container.clientWidth,
         bottom: this.container.clientHeight,
         ...moveableOptions.bounds || {}
@@ -598,6 +571,7 @@ 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);
   }
@@ -613,6 +587,9 @@ class TargetCalibrate extends EventEmitter {
       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() {
@@ -662,7 +639,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) {
@@ -693,8 +671,8 @@ class StageHighlight extends EventEmitter {
 class Rule extends EventEmitter$1 {
   constructor(container) {
     super();
-    this.horizontalGuidelines = getGuideLineFromCache(GuidesType.HORIZONTAL);
-    this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
+    this.horizontalGuidelines = [];
+    this.verticalGuidelines = [];
     this.getGuidesStyle = (type) => ({
       position: "fixed",
       zIndex: 1,
@@ -718,7 +696,6 @@ 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;
@@ -726,7 +703,6 @@ 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.horizontalGuidelines);
@@ -747,25 +723,26 @@ class Rule extends EventEmitter$1 {
       showGuides: show
     });
   }
-  clearGuides() {
-    this.horizontalGuidelines = [];
-    this.verticalGuidelines = [];
-    this.vGuides.setState({
-      defaultGuides: []
-    });
+  setGuides([hLines, vLines]) {
+    this.horizontalGuidelines = hLines;
+    this.verticalGuidelines = vLines;
     this.hGuides.setState({
-      defaultGuides: []
+      defaultGuides: hLines
     });
-    this.emit("changeGuides", {
-      type: GuidesType.VERTICAL,
-      guides: []
+    this.vGuides.setState({
+      defaultGuides: vLines
     });
     this.emit("changeGuides", {
       type: GuidesType.HORIZONTAL,
-      guides: []
+      guides: hLines
     });
-    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, "[]");
-    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, "[]");
+    this.emit("changeGuides", {
+      type: GuidesType.VERTICAL,
+      guides: vLines
+    });
+  }
+  clearGuides() {
+    this.setGuides([[], []]);
   }
   showRule(show = true) {
     if (show) {
@@ -1057,13 +1034,18 @@ class StageRender extends EventEmitter {
       });
     };
     this.loadHandler = async () => {
-      this.emit("onload");
+      this.contentWindow = this.iframe?.contentWindow;
+      this.contentWindow.magic = this.getMagicApi();
       if (this.render) {
         const el = await this.render(this.core);
         if (el) {
           this.iframe?.contentDocument?.body?.appendChild(el);
         }
       }
+      this.emit("onload");
+      this.contentWindow.postMessage({
+        tmagicRuntimeReady: true
+      }, "*");
     };
     this.core = core;
     this.runtimeUrl = core.config.runtimeUrl || "";
@@ -1087,8 +1069,6 @@ class StageRender extends EventEmitter {
         this.iframe.srcdoc = html;
       }
       el.appendChild(this.iframe);
-      this.contentWindow = this.iframe?.contentWindow;
-      this.contentWindow.magic = this.getMagicApi();
     } else {
       throw Error("mount \u5931\u8D25");
     }
@@ -1232,10 +1212,10 @@ class StageCore extends EventEmitter {
   setZoom(zoom = DEFAULT_ZOOM) {
     this.zoom = zoom;
   }
-  mount(el) {
+  async mount(el) {
     this.container = el;
     const { mask, renderer } = this;
-    renderer.mount(el);
+    await renderer.mount(el);
     mask.mount(el);
     this.emit("mounted");
   }
@@ -1263,5 +1243,5 @@ class StageCore extends EventEmitter {
   }
 }
 
-export { StageDragResize, StageMask, StageRender, StageCore as default };
+export { DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, SELECTED_CLASS, StageDragResize, StageMask, StageRender, ZIndex, StageCore as default };
 //# sourceMappingURL=tmagic-stage.es.js.map