@tmagic/stage 1.0.0-rc.9 → 1.0.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.9",
+  "version": "1.0.2",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.0.0-rc.9",
-    "@tmagic/schema": "1.0.0-rc.9",
-    "@tmagic/utils": "1.0.0-rc.9",
+    "@tmagic/core": "1.0.2",
+    "@tmagic/schema": "1.0.2",
+    "@tmagic/utils": "1.0.2",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.29.4",
+    "moveable": "^0.30.0",
     "moveable-helper": "^0.4.0"
   },
   "devDependencies": {

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/StageCore.ts

@@ -230,11 +230,11 @@ export default class StageCore extends EventEmitter {
    * 挂载Dom节点
    * @param el 将stage挂载到该Dom节点上
    */
-  public mount(el: HTMLDivElement): void {
+  public async mount(el: HTMLDivElement) {
     this.container = el;
     const { mask, renderer } = this;
 
-    renderer.mount(el);
+    await renderer.mount(el);
     mask.mount(el);
 
     this.emit('mounted');

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[] = [];
   /** 布局方式：流式布局、绝对定位、固定定位 */
@@ -111,7 +111,7 @@ export default class StageDragResize extends EventEmitter {
    */
   public updateMoveable(el = this.target): void {
     if (!this.moveable) throw new Error('未初始化moveable');
-    if (!el) throw new Error('为选中任何节点');
+    if (!el) throw new Error('未选中任何节点');
 
     this.target = el;
 
@@ -132,7 +132,9 @@ export default class StageDragResize extends EventEmitter {
       this.moveableOptions.verticalGuidelines = guidelines;
     }
 
-    this.updateMoveable();
+    if (this.moveable) {
+      this.updateMoveable();
+    }
   }
 
   public clearGuides() {
@@ -207,7 +209,7 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private bindResizeEvent(): void {
-    if (!this.moveable) throw new Error('moveable 为初始化');
+    if (!this.moveable) throw new Error('moveable 未初始化');
 
     const frame = {
       left: 0,
@@ -251,7 +253,7 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private bindDragEvent(): void {
-    if (!this.moveable) throw new Error('moveable 为初始化');
+    if (!this.moveable) throw new Error('moveable 未初始化');
 
     const frame = {
       left: 0,
@@ -307,7 +309,7 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private bindRotateEvent(): void {
-    if (!this.moveable) throw new Error('moveable 为初始化');
+    if (!this.moveable) throw new Error('moveable 未初始化');
 
     this.moveable
       .on('rotateStart', (e) => {
@@ -334,7 +336,7 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private bindScaleEvent(): void {
-    if (!this.moveable) throw new Error('moveable 为初始化');
+    if (!this.moveable) throw new Error('moveable 未初始化');
 
     this.moveable
       .on('scaleStart', (e) => {
@@ -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/StageRender.ts

@@ -81,10 +81,6 @@ export default class StageRender extends EventEmitter {
       }
 
       el.appendChild<HTMLIFrameElement>(this.iframe);
-
-      this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
-
-      this.contentWindow.magic = this.getMagicApi();
     } else {
       throw Error('mount 失败');
     }
@@ -113,7 +109,9 @@ export default class StageRender extends EventEmitter {
   }
 
   private loadHandler = async () => {
-    this.emit('onload');
+    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+
+    this.contentWindow.magic = this.getMagicApi();
 
     if (this.render) {
       const el = await this.render(this.core);
@@ -121,5 +119,14 @@ export default class StageRender extends EventEmitter {
         this.iframe?.contentDocument?.body?.appendChild(el);
       }
     }
+
+    this.emit('onload');
+
+    this.contentWindow.postMessage(
+      {
+        tmagicRuntimeReady: true,
+      },
+      '*',
+    );
   };
 }

package/src/const.ts

@@ -22,7 +22,7 @@ export const GHOST_EL_ID_PREFIX = 'ghost_el_';
 /** 拖动的时候需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const DRAG_EL_ID_PREFIX = 'drag_el_';
 
-/** 高亮事需要在蒙层中创建一个占位节点，该节点的id前缀 */
+/** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export const HIGHLIGHT_EL_ID_PREFIX = 'highlight_el_';
 
 /** 默认放到缩小倍数 */
@@ -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/types.ts

@@ -105,7 +105,7 @@ export interface Runtime {
   getApp?: () => Core;
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
   getSnapElements?: (el?: HTMLElement) => HTMLElement[];
-  updateRootConfig: (config: MApp) => void;
+  updateRootConfig?: (config: MApp) => void;
   updatePageId?: (id: Id) => void;
   select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
   add?: (data: UpdateData) => void;

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,7 +100,8 @@ 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;
 };
 
@@ -120,13 +109,14 @@ export const getScrollParent = (element: HTMLElement, includeHidden = false): HT
   let style = getComputedStyle(element);
   const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
 
-  if (isFixed(element)) return null;
+  if (isFixed(style)) return null;
+
   for (let parent = element; parent.parentElement; ) {
     parent = parent.parentElement;
     style = getComputedStyle(parent);
-    if (isAbsolute(element) && isStatic(element)) {
-      continue;
-    }
+
+    if (isAbsolute(style) && isStatic(style)) continue;
+
     if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
   }
 
@@ -159,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 [];
-};