@tmagic/stage 1.0.0-rc.7 → 1.0.0

package/dist/tmagic-stage.umd.js

@@ -40,8 +40,6 @@
     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;
@@ -86,31 +84,15 @@
       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;
       }
@@ -125,21 +107,21 @@
   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;
     }
@@ -168,29 +150,12 @@
       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 = getGuideLineFromCache(GuidesType.HORIZONTAL);
-      this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
+      this.horizontalGuidelines = [];
+      this.verticalGuidelines = [];
       this.elementGuidelines = [];
       this.mode = Mode.ABSOLUTE;
       this.moveableOptions = {};
@@ -203,8 +168,8 @@
     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__default["default"].create({
           useBeforeRender: true,
           useRender: false,
@@ -222,7 +187,7 @@
       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]) => {
@@ -238,7 +203,9 @@
         this.verticalGuidelines = guidelines;
         this.moveableOptions.verticalGuidelines = guidelines;
       }
-      this.updateMoveable();
+      if (this.moveable) {
+        this.updateMoveable();
+      }
     }
     clearGuides() {
       this.horizontalGuidelines = [];
@@ -297,7 +264,7 @@
     }
     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
@@ -316,10 +283,14 @@
         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);
@@ -327,8 +298,11 @@
     }
     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");
@@ -337,22 +311,19 @@
         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) {
@@ -363,14 +334,13 @@
               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);
@@ -394,7 +364,7 @@
     }
     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);
@@ -480,6 +450,9 @@
       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();
@@ -533,7 +506,7 @@
         elementGuidelines: this.elementGuidelines,
         bounds: {
           top: 0,
-          left: 0,
+          left: -1,
           right: this.container.clientWidth,
           bottom: this.container.clientHeight,
           ...moveableOptions.bounds || {}
@@ -605,6 +578,7 @@
       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);
     }
@@ -620,6 +594,9 @@
       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() {
@@ -669,7 +646,8 @@
       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) {
@@ -700,8 +678,8 @@
   class Rule extends EventEmitter__default["default"] {
     constructor(container) {
       super();
-      this.horizontalGuidelines = getGuideLineFromCache(GuidesType.HORIZONTAL);
-      this.verticalGuidelines = getGuideLineFromCache(GuidesType.VERTICAL);
+      this.horizontalGuidelines = [];
+      this.verticalGuidelines = [];
       this.getGuidesStyle = (type) => ({
         position: "fixed",
         zIndex: 1,
@@ -725,7 +703,6 @@
           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;
@@ -733,7 +710,6 @@
           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);
@@ -754,25 +730,26 @@
         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) {
@@ -1064,13 +1041,18 @@
         });
       };
       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 || "";
@@ -1094,8 +1076,6 @@
           this.iframe.srcdoc = html;
         }
         el.appendChild(this.iframe);
-        this.contentWindow = this.iframe?.contentWindow;
-        this.contentWindow.magic = this.getMagicApi();
       } else {
         throw Error("mount \u5931\u8D25");
       }
@@ -1239,10 +1219,10 @@
     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");
     }
@@ -1270,9 +1250,18 @@
     }
   }
 
+  exports.DEFAULT_ZOOM = DEFAULT_ZOOM;
+  exports.DRAG_EL_ID_PREFIX = DRAG_EL_ID_PREFIX;
+  exports.GHOST_EL_ID_PREFIX = GHOST_EL_ID_PREFIX;
+  exports.GuidesType = GuidesType;
+  exports.HIGHLIGHT_EL_ID_PREFIX = HIGHLIGHT_EL_ID_PREFIX;
+  exports.Mode = Mode;
+  exports.MouseButton = MouseButton;
+  exports.SELECTED_CLASS = SELECTED_CLASS;
   exports.StageDragResize = StageDragResize;
   exports.StageMask = StageMask;
   exports.StageRender = StageRender;
+  exports.ZIndex = ZIndex;
   exports["default"] = StageCore;
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });