@tmagic/stage 1.0.0-rc.7 → 1.0.0

package/dist/types/src/util.d.ts

@@ -1,4 +1,4 @@
-import { GuidesType, Mode } from './const';
+import { Mode } from './const';
 import type { Offset } from './types';
 export declare const getOffset: (el: HTMLElement) => Offset;
 export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
@@ -7,10 +7,10 @@ export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offse
 };
 export declare const getHost: (targetUrl: string) => string | undefined;
 export declare const isSameDomain: (targetUrl?: string, source?: string) => boolean;
-export declare const isAbsolute: (el?: HTMLElement | undefined) => boolean;
-export declare const isRelative: (el?: HTMLElement | undefined) => boolean;
-export declare const isStatic: (el?: HTMLElement | undefined) => boolean;
-export declare const isFixed: (el?: HTMLElement | undefined) => boolean;
+export declare const isAbsolute: (style: CSSStyleDeclaration) => boolean;
+export declare const isRelative: (style: CSSStyleDeclaration) => boolean;
+export declare const isStatic: (style: CSSStyleDeclaration) => boolean;
+export declare const isFixed: (style: CSSStyleDeclaration) => boolean;
 export declare const isFixedParent: (el: HTMLElement) => boolean;
 export declare const getMode: (el: HTMLElement) => Mode;
 export declare const getScrollParent: (element: HTMLElement, includeHidden?: boolean) => HTMLElement | null;
@@ -20,4 +20,3 @@ export declare const createDiv: ({ className, cssText }: {
 }) => HTMLDivElement;
 export declare const removeSelectedClassName: (doc: Document) => void;
 export declare const addSelectedClassName: (el: Element, doc: Document) => void;
-export declare const getGuideLineFromCache: (type: GuidesType) => number[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.0.0-rc.7",
-    "@tmagic/schema": "1.0.0-rc.7",
-    "@tmagic/utils": "1.0.0-rc.7",
+    "@tmagic/core": "1.0.0",
+    "@tmagic/schema": "1.0.0",
+    "@tmagic/utils": "1.0.0",
     "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

@@ -25,8 +25,8 @@ 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 { Offset, SortEventData, StageDragResizeConfig } from './types';
-import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
+import type { SortEventData, StageDragResizeConfig } from './types';
+import { getAbsolutePosition, getMode, getOffset } from './util';
 
 /** 拖动状态 */
 enum ActionStatus {
@@ -48,13 +48,13 @@ export default class StageDragResize extends EventEmitter {
   /** 目标节点 */
   public target?: HTMLElement;
   /** 目标节点在蒙层中的占位节点 */
-  public dragEl: HTMLElement;
+  public dragEl: HTMLDivElement;
   /** 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[] = [];
   /** 布局方式：流式布局、绝对定位、固定定位 */
@@ -87,10 +87,9 @@ export default class StageDragResize extends EventEmitter {
     const oldTarget = this.target;
     this.target = el;
 
-    this.init(el);
-
     // 从不能拖动到能拖动的节点之间切换，要重新创建moveable，不然dragStart不生效
     if (!this.moveable || this.target !== oldTarget) {
+      this.init(el);
       this.moveableHelper = MoveableHelper.create({
         useBeforeRender: true,
         useRender: false,
@@ -112,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;
 
@@ -133,7 +132,9 @@ export default class StageDragResize extends EventEmitter {
       this.moveableOptions.verticalGuidelines = guidelines;
     }
 
-    this.updateMoveable();
+    if (this.moveable) {
+      this.updateMoveable();
+    }
   }
 
   public clearGuides() {
@@ -208,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,
@@ -234,10 +235,16 @@ export default class StageDragResize extends EventEmitter {
 
         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 = ActionStatus.END;
@@ -246,9 +253,12 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private bindDragEvent(): void {
-    if (!this.moveable) throw new Error('moveable 为初始化');
+    if (!this.moveable) throw new Error('moveable 未初始化');
 
-    let offset: Offset | null = null;
+    const frame = {
+      left: 0,
+      top: 0,
+    };
 
     this.moveable
       .on('dragStart', (e) => {
@@ -261,29 +271,25 @@ export default 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 = ActionStatus.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', () => {
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
@@ -296,7 +302,6 @@ export default class StageDragResize extends EventEmitter {
               this.update();
           }
         }
-        offset = null;
 
         this.dragStatus = ActionStatus.END;
         this.destroyGhostEl();
@@ -304,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) => {
@@ -331,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) => {
@@ -430,6 +435,10 @@ export default class StageDragResize extends EventEmitter {
     `;
 
     this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+
+    if (typeof this.core.config.updateDragEl === 'function') {
+      this.core.config.updateDragEl(this.dragEl, el);
+    }
   }
 
   private destroyDragEl(): void {
@@ -492,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/StageHighlight.ts

@@ -41,6 +41,7 @@ export default class StageHighlight extends EventEmitter {
       parent: this.core.mask.content,
       mask: this.core.mask,
       dr: this.core.dr,
+      core: this.core,
     });
   }
 

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

@@ -20,6 +20,7 @@
 import { EventEmitter } from 'events';
 
 import { Mode } from './const';
+import StageCore from './StageCore';
 import StageDragResize from './StageDragResize';
 import StageMask from './StageMask';
 import type { Offset, TargetCalibrateConfig } from './types';
@@ -32,7 +33,8 @@ export default class TargetCalibrate extends EventEmitter {
   public parent: HTMLElement;
   public mask: StageMask;
   public dr: StageDragResize;
-  public operationEl: HTMLElement;
+  public core: StageCore;
+  public operationEl: HTMLDivElement;
 
   constructor(config: TargetCalibrateConfig) {
     super();
@@ -40,6 +42,7 @@ export default 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);
@@ -58,6 +61,11 @@ export default class TargetCalibrate extends EventEmitter {
     `;
 
     this.operationEl.id = `${prefix}${el.id}`;
+
+    if (typeof this.core.config.updateDragEl === 'function') {
+      this.core.config.updateDragEl(this.operationEl, el);
+    }
+
     return this.operationEl;
   }
 

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

@@ -39,6 +39,7 @@ export type StageCoreConfig = {
   runtimeUrl?: string;
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
   autoScrollIntoView?: boolean;
+  updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
 };
 
 export interface StageRenderConfig {
@@ -104,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;
@@ -133,4 +134,5 @@ export interface TargetCalibrateConfig {
   parent: HTMLElement;
   mask: StageMask;
   dr: StageDragResize;
+  core: 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,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 [];
-};