@tmagic/stage 1.0.0-rc.12 → 1.0.0-rc.13

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,26 +77,15 @@ const isSameDomain = (targetUrl = "", source = globalThis.location.host) => {
     return true;
   return getHost(targetUrl) === source;
 };
-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;
     }
@@ -113,20 +100,20 @@ 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 excludeStaticParent = style.position === "absolute";
   const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
-  if (style.position === "fixed")
+  if (isFixed(style))
     return null;
   for (let parent = element; parent.parentElement; ) {
     parent = parent.parentElement;
     style = getComputedStyle(parent);
-    if (excludeStaticParent && style.position === "static")
+    if (isAbsolute(style) && isStatic(style))
       continue;
     if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
       return parent;
@@ -156,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 = {};
@@ -226,7 +196,9 @@ class StageDragResize extends EventEmitter {
       this.verticalGuidelines = guidelines;
       this.moveableOptions.verticalGuidelines = guidelines;
     }
-    this.updateMoveable();
+    if (this.moveable) {
+      this.updateMoveable();
+    }
   }
   clearGuides() {
     this.horizontalGuidelines = [];
@@ -527,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 || {}
@@ -699,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,
@@ -724,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;
@@ -732,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);
@@ -753,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
+    });
+    this.emit("changeGuides", {
+      type: GuidesType.VERTICAL,
+      guides: vLines
     });
-    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, "[]");
-    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, "[]");
+  }
+  clearGuides() {
+    this.setGuides([[], []]);
   }
   showRule(show = true) {
     if (show) {
@@ -1272,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