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

package/src/Rule.ts

@@ -2,14 +2,13 @@ import EventEmitter from 'events';
 
 import Guides, { GuidesEvents } from '@scena/guides';
 
-import { GuidesType, H_GUIDE_LINE_STORAGE_KEY, V_GUIDE_LINE_STORAGE_KEY } from './const';
-import { getGuideLineFromCache } from './util';
+import { GuidesType } from './const';
 
 export default class Rule extends EventEmitter {
   public hGuides: Guides;
   public vGuides: Guides;
-  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
-  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
+  public horizontalGuidelines: number[] = [];
+  public verticalGuidelines: number[] = [];
 
   private container: HTMLDivElement;
   private containerResizeObserver: ResizeObserver;
@@ -28,6 +27,7 @@ export default class Rule extends EventEmitter {
       this.vGuides.resize();
       this.hGuides.resize();
     });
+
     this.containerResizeObserver.observe(this.container);
   }
 
@@ -45,33 +45,34 @@ export default class Rule extends EventEmitter {
     });
   }
 
-  /**
-   * 清空所有参考线
-   */
-  public clearGuides() {
-    this.horizontalGuidelines = [];
-    this.verticalGuidelines = [];
+  public setGuides([hLines, vLines]: [number[], number[]]) {
+    this.horizontalGuidelines = hLines;
+    this.verticalGuidelines = vLines;
 
-    this.vGuides.setState({
-      defaultGuides: [],
+    this.hGuides.setState({
+      defaultGuides: hLines,
     });
 
-    this.hGuides.setState({
-      defaultGuides: [],
+    this.vGuides.setState({
+      defaultGuides: vLines,
     });
 
     this.emit('changeGuides', {
-      type: GuidesType.VERTICAL,
-      guides: [],
+      type: GuidesType.HORIZONTAL,
+      guides: hLines,
     });
 
     this.emit('changeGuides', {
-      type: GuidesType.HORIZONTAL,
-      guides: [],
+      type: GuidesType.VERTICAL,
+      guides: vLines,
     });
+  }
 
-    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, '[]');
-    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, '[]');
+  /**
+   * 清空所有参考线
+   */
+  public clearGuides() {
+    this.setGuides([[], []]);
   }
 
   /**
@@ -101,7 +102,7 @@ export default class Rule extends EventEmitter {
     }
   }
 
-  scrollRule(scrollTop: number) {
+  public scrollRule(scrollTop: number) {
     this.hGuides.scrollGuides(scrollTop);
     this.hGuides.scroll(0);
 
@@ -142,8 +143,6 @@ export default class Rule extends EventEmitter {
       type: GuidesType.HORIZONTAL,
       guides: this.horizontalGuidelines,
     });
-
-    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
   };
 
   private vGuidesChangeGuidesHandler = (e: GuidesEvents['changeGuides']) => {
@@ -152,7 +151,5 @@ export default class Rule extends EventEmitter {
       type: GuidesType.VERTICAL,
       guides: this.verticalGuidelines,
     });
-
-    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, JSON.stringify(e.guides));
   };
 }

package/src/StageDragResize.ts

@@ -26,7 +26,7 @@ import MoveableHelper from 'moveable-helper';
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
 import StageCore from './StageCore';
 import type { SortEventData, StageDragResizeConfig } from './types';
-import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
+import { getAbsolutePosition, getMode, getOffset } from './util';
 
 /** 拖动状态 */
 enum ActionStatus {
@@ -52,9 +52,9 @@ export default class StageDragResize extends EventEmitter {
   /** Moveable拖拽类实例 */
   public moveable?: Moveable;
   /** 水平参考线 */
-  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
+  public horizontalGuidelines: number[] = [];
   /** 垂直参考线 */
-  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
+  public verticalGuidelines: number[] = [];
   /** 对齐元素集合 */
   public elementGuidelines: HTMLElement[] = [];
   /** 布局方式：流式布局、绝对定位、固定定位 */
@@ -132,7 +132,9 @@ export default class StageDragResize extends EventEmitter {
       this.moveableOptions.verticalGuidelines = guidelines;
     }
 
-    this.updateMoveable();
+    if (this.moveable) {
+      this.updateMoveable();
+    }
   }
 
   public clearGuides() {
@@ -499,7 +501,8 @@ export default class StageDragResize extends EventEmitter {
 
       bounds: {
         top: 0,
-        left: 0,
+        // 设置0的话无法移动到left为0，所以只能设置为-1
+        left: -1,
         right: this.container.clientWidth,
         bottom: this.container.clientHeight,
         ...(moveableOptions.bounds || {}),

package/src/const.ts

@@ -68,6 +68,3 @@ export enum Mode {
 
 /** 选中节点的class name */
 export const SELECTED_CLASS = 'tmagic-stage-selected-area';
-
-export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
-export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';

package/src/index.ts

@@ -23,4 +23,5 @@ export { default as StageRender } from './StageRender';
 export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';
 export * from './types';
+export * from './const';
 export default StageCore;

package/src/util.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { GuidesType, H_GUIDE_LINE_STORAGE_KEY, Mode, SELECTED_CLASS, V_GUIDE_LINE_STORAGE_KEY } from './const';
+import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
 
 const getParents = (el: Element, relative: Element) => {
@@ -73,31 +73,19 @@ export const isSameDomain = (targetUrl = '', source = globalThis.location.host)
   return getHost(targetUrl) === source;
 };
 
-export const isAbsolute = (el?: HTMLElement): boolean => {
-  if (!el) return false;
-  return getComputedStyle(el).position === 'absolute';
-};
+export const isAbsolute = (style: CSSStyleDeclaration): boolean => style.position === 'absolute';
 
-export const isRelative = (el?: HTMLElement): boolean => {
-  if (!el) return false;
-  return getComputedStyle(el).position === 'relative';
-};
+export const isRelative = (style: CSSStyleDeclaration): boolean => style.position === 'relative';
 
-export const isStatic = (el?: HTMLElement): boolean => {
-  if (!el) return false;
-  return getComputedStyle(el).position === 'static';
-};
+export const isStatic = (style: CSSStyleDeclaration): boolean => style.position === 'static';
 
-export const isFixed = (el?: HTMLElement): boolean => {
-  if (!el) return false;
-  return getComputedStyle(el).position === 'fixed';
-};
+export const isFixed = (style: CSSStyleDeclaration): boolean => style.position === 'fixed';
 
 export const isFixedParent = (el: HTMLElement) => {
   let fixed = false;
   let dom = el;
   while (dom) {
-    fixed = isFixed(dom);
+    fixed = isFixed(getComputedStyle(dom));
     if (fixed) {
       break;
     }
@@ -112,22 +100,22 @@ export const isFixedParent = (el: HTMLElement) => {
 
 export const getMode = (el: HTMLElement): Mode => {
   if (isFixedParent(el)) return Mode.FIXED;
-  if (isStatic(el) || isRelative(el)) return Mode.SORTABLE;
+  const style = getComputedStyle(el);
+  if (isStatic(style) || isRelative(style)) return Mode.SORTABLE;
   return Mode.ABSOLUTE;
 };
 
 export const getScrollParent = (element: HTMLElement, includeHidden = false): HTMLElement | null => {
   let style = getComputedStyle(element);
-  const excludeStaticParent = style.position === 'absolute';
   const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
 
-  if (style.position === 'fixed') return null;
+  if (isFixed(style)) return null;
 
   for (let parent = element; parent.parentElement; ) {
     parent = parent.parentElement;
     style = getComputedStyle(parent);
 
-    if (excludeStaticParent && style.position === 'static') continue;
+    if (isAbsolute(style) && isStatic(style)) continue;
 
     if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
   }
@@ -161,23 +149,3 @@ export const addSelectedClassName = (el: Element, doc: Document) => {
     item.classList.add(`${SELECTED_CLASS}-parents`);
   });
 };
-
-export const getGuideLineFromCache = (type: GuidesType): number[] => {
-  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 [];
-};