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

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

@@ -1,23 +1,46 @@
+/** 流式布局下拖动时需要clone一个镜像节点，镜像节点的id前缀 */
 export declare const GHOST_EL_ID_PREFIX = "ghost_el_";
+/** 拖动的时候需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export declare const DRAG_EL_ID_PREFIX = "drag_el_";
+/** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
+/** 默认放到缩小倍数 */
 export declare const DEFAULT_ZOOM = 1;
+/** 参考线类型 */
 export declare enum GuidesType {
+    /** 水平 */
     HORIZONTAL = "horizontal",
+    /** 垂直 */
     VERTICAL = "vertical"
 }
+/** css z-index */
 export declare enum ZIndex {
+    /** 蒙层，用于监听用户操作，需要置于顶层 */
     MASK = "99999",
-    SELECTED_EL = "666"
+    /** 选中的节点 */
+    SELECTED_EL = "666",
+    GHOST_EL = "700",
+    DRAG_EL = "9"
 }
+/** 鼠标按键 */
 export declare enum MouseButton {
+    /** 左键 */
     LEFT = 0,
+    /** z中健 */
     MIDDLE = 1,
+    /** 右键 */
     RIGHT = 2
 }
+/** 布局方式 */
 export declare enum Mode {
+    /** 绝对定位布局 */
     ABSOLUTE = "absolute",
+    /** 固定定位布局 */
     FIXED = "fixed",
+    /** 流式布局 */
     SORTABLE = "sortable"
 }
+/** 选中节点的class name */
 export declare const SELECTED_CLASS = "tmagic-stage-selected-area";
+export declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+export declare const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";

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

@@ -1,4 +1,5 @@
-import { MoveableOptions } from 'react-moveable/declaration/types';
+import { MoveableOptions } from 'moveable';
+import Core from '@tmagic/core';
 import { Id, MApp, MNode } from '@tmagic/schema';
 import { GuidesType } from './const';
 import StageCore from './StageCore';
@@ -15,6 +16,8 @@ export declare type StageCoreConfig = {
     /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
     runtimeUrl?: string;
     render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
+    autoScrollIntoView?: boolean;
+    updateDragEl?: (el: HTMLDivElement, target: HTMLElement) => void;
 };
 export interface StageRenderConfig {
     core: StageCore;
@@ -42,10 +45,14 @@ export interface UpdateEventData {
     el: HTMLElement;
     ghostEl: HTMLElement;
     style: {
-        width: number;
-        height: number;
+        width?: number;
+        height?: number;
         left?: number;
         top?: number;
+        transform?: {
+            rotate?: string;
+            scale?: string;
+        };
     };
 }
 export interface SortEventData {
@@ -62,9 +69,10 @@ export interface RemoveData {
     root: MApp;
 }
 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;
@@ -88,4 +96,5 @@ export interface TargetCalibrateConfig {
     parent: HTMLElement;
     mask: StageMask;
     dr: StageDragResize;
+    core: StageCore;
 }

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

@@ -1,4 +1,4 @@
-import { Mode } from './const';
+import { GuidesType, Mode } from './const';
 import type { Offset } from './types';
 export declare const getOffset: (el: HTMLElement) => Offset;
 export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
@@ -19,4 +19,5 @@ export declare const createDiv: ({ className, cssText }: {
     cssText: string;
 }) => HTMLDivElement;
 export declare const removeSelectedClassName: (doc: Document) => void;
-export declare const addSelectedClassName: (el: Element) => 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.1",
+  "version": "1.0.0-rc.12",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,8 +27,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-rc.1",
-    "@tmagic/utils": "^1.0.0-rc.1",
+    "@tmagic/core": "1.0.0-rc.12",
+    "@tmagic/schema": "1.0.0-rc.12",
+    "@tmagic/utils": "1.0.0-rc.12",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.29.4",
@@ -42,6 +43,5 @@
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6"
-  },
-  "gitHead": "3b647794d087888bfec9772f54356fa48c0b6d90"
+  }
 }

package/src/Rule.ts

@@ -2,13 +2,14 @@ import EventEmitter from 'events';
 
 import Guides, { GuidesEvents } from '@scena/guides';
 
-import { GuidesType } from './const';
+import { GuidesType, H_GUIDE_LINE_STORAGE_KEY, V_GUIDE_LINE_STORAGE_KEY } from './const';
+import { getGuideLineFromCache } from './util';
 
 export default class Rule extends EventEmitter {
   public hGuides: Guides;
   public vGuides: Guides;
-  public horizontalGuidelines: number[] = [];
-  public verticalGuidelines: number[] = [];
+  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
+  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
 
   private container: HTMLDivElement;
   private containerResizeObserver: ResizeObserver;
@@ -17,8 +18,8 @@ export default class Rule extends EventEmitter {
     super();
 
     this.container = container;
-    this.hGuides = this.createGuides(GuidesType.HORIZONTAL);
-    this.vGuides = this.createGuides(GuidesType.VERTICAL);
+    this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
+    this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
 
     this.hGuides.on('changeGuides', this.hGuidesChangeGuidesHandler);
     this.vGuides.on('changeGuides', this.vGuidesChangeGuidesHandler);
@@ -68,6 +69,9 @@ export default class Rule extends EventEmitter {
       type: GuidesType.HORIZONTAL,
       guides: [],
     });
+
+    globalThis.localStorage.setItem(V_GUIDE_LINE_STORAGE_KEY, '[]');
+    globalThis.localStorage.setItem(H_GUIDE_LINE_STORAGE_KEY, '[]');
   }
 
   /**
@@ -138,6 +142,8 @@ 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']) => {
@@ -146,5 +152,7 @@ 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

@@ -155,12 +155,17 @@ export default class StageCore extends EventEmitter {
 
     this.mask.setLayout(el);
     this.dr.select(el, event);
+
+    if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
+      this.mask.intersectionObserver?.observe(el);
+    }
+
     this.selectedDom = el;
 
     if (this.renderer.contentWindow) {
       removeSelectedClassName(this.renderer.contentWindow.document);
       if (this.selectedDom) {
-        addSelectedClassName(this.selectedDom);
+        addSelectedClassName(this.selectedDom, this.renderer.contentWindow.document);
       }
     }
   }
@@ -225,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

@@ -23,14 +23,18 @@ import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
+import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
 import StageCore from './StageCore';
-import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types';
-import { getAbsolutePosition, getMode, getOffset } from './util';
+import type { SortEventData, StageDragResizeConfig } from './types';
+import { getAbsolutePosition, getGuideLineFromCache, getMode, getOffset } from './util';
 
+/** 拖动状态 */
 enum ActionStatus {
+  /** 开始拖动 */
   START = 'start',
+  /** 拖动中 */
   ING = 'ing',
+  /** 拖动结束 */
   END = 'end',
 }
 
@@ -39,17 +43,27 @@ enum ActionStatus {
  */
 export default class StageDragResize extends EventEmitter {
   public core: StageCore;
+  /** 画布容器 */
   public container: HTMLElement;
+  /** 目标节点 */
   public target?: HTMLElement;
-  public dragEl: HTMLElement;
+  /** 目标节点在蒙层中的占位节点 */
+  public dragEl: HTMLDivElement;
+  /** Moveable拖拽类实例 */
   public moveable?: Moveable;
-  public horizontalGuidelines: number[] = [];
-  public verticalGuidelines: number[] = [];
+  /** 水平参考线 */
+  public horizontalGuidelines: number[] = getGuideLineFromCache(GuidesType.HORIZONTAL);
+  /** 垂直参考线 */
+  public verticalGuidelines: number[] = getGuideLineFromCache(GuidesType.VERTICAL);
+  /** 对齐元素集合 */
   public elementGuidelines: HTMLElement[] = [];
+  /** 布局方式：流式布局、绝对定位、固定定位 */
   public mode: Mode = Mode.ABSOLUTE;
 
   private moveableOptions: MoveableOptions = {};
+  /** 拖动状态 */
   private dragStatus: ActionStatus = ActionStatus.END;
+  /** 流式布局下，目标节点的镜像节点 */
   private ghostEl: HTMLElement | undefined;
   private moveableHelper?: MoveableHelper;
 
@@ -73,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,
@@ -98,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;
 
@@ -157,6 +170,29 @@ export default class StageDragResize extends EventEmitter {
     });
   }
 
+  private setElementGuidelines(nodes: HTMLElement[]) {
+    this.elementGuidelines.forEach((node) => {
+      node.remove();
+    });
+    this.elementGuidelines = [];
+
+    if (this.mode === Mode.ABSOLUTE) {
+      const frame = document.createDocumentFragment();
+
+      for (const node of nodes) {
+        const { width, height } = node.getBoundingClientRect();
+        if (node === this.target) continue;
+        const { left, top } = getOffset(node as HTMLElement);
+        const elementGuideline = document.createElement('div');
+        elementGuideline.style.cssText = `position: absolute;width: ${width}px;height: ${height}px;top: ${top}px;left: ${left}px`;
+        this.elementGuidelines.push(elementGuideline);
+        frame.append(elementGuideline);
+      }
+
+      this.container.append(frame);
+    }
+  }
+
   private initMoveable() {
     this.moveable?.destroy();
 
@@ -166,49 +202,47 @@ export default class StageDragResize extends EventEmitter {
 
     this.bindResizeEvent();
     this.bindDragEvent();
+    this.bindRotateEvent();
+    this.bindScaleEvent();
   }
 
   private bindResizeEvent(): void {
-    if (!this.moveable) throw new Error('moveable 为初始化');
+    if (!this.moveable) throw new Error('moveable 未初始化');
 
     const frame = {
-      translate: [0, 0],
+      left: 0,
+      top: 0,
     };
 
     this.moveable
       .on('resizeStart', (e) => {
-        if (e.dragStart) {
-          const rect = this.moveable!.getRect();
-          const offset = getAbsolutePosition(e.target as HTMLElement, rect);
-          e.dragStart.set([offset.left, offset.top]);
-        }
+        if (!this.target) return;
+
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onResizeStart(e);
+
+        frame.top = this.target.offsetTop;
+        frame.left = this.target.offsetLeft;
       })
-      .on('resize', ({ width, height, drag }) => {
+      .on('resize', (e) => {
+        const { width, height, drag } = e;
         if (!this.moveable || !this.target || !this.dragEl) return;
 
         const { beforeTranslate } = drag;
-        frame.translate = beforeTranslate;
         this.dragStatus = ActionStatus.ING;
 
-        this.target.style.width = `${width}px`;
-        this.target.style.height = `${height}px`;
-        this.dragEl.style.width = `${width}px`;
-        this.dragEl.style.height = `${height}px`;
+        this.moveableHelper?.onResize(e);
 
         // 流式布局
         if (this.mode === Mode.SORTABLE) {
-          this.dragEl.style.top = `${beforeTranslate[1]}px`;
-          this.target.style.top = `0px`;
-          return;
+          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.dragEl.style.left = `${beforeTranslate[0]}px`;
-        this.dragEl.style.top = `${beforeTranslate[1]}px`;
-
-        const offset = getAbsolutePosition(this.target, { left: beforeTranslate[0], top: beforeTranslate[1] });
-
-        this.target.style.left = `${offset.left}px`;
-        this.target.style.top = `${offset.top}px`;
+        this.target.style.width = `${width}px`;
+        this.target.style.height = `${height}px`;
       })
       .on('resizeEnd', () => {
         this.dragStatus = ActionStatus.END;
@@ -217,9 +251,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) => {
@@ -232,29 +269,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事件
@@ -267,24 +300,64 @@ export default class StageDragResize extends EventEmitter {
               this.update();
           }
         }
-        offset = null;
 
         this.dragStatus = ActionStatus.END;
         this.destroyGhostEl();
       });
   }
 
-  private getSnapElements(runtime: Runtime, el?: HTMLElement): HTMLElement[] {
-    const { renderer, mask } = this.core;
-    const getSnapElements =
-      runtime?.getSnapElements ||
-      (() => {
-        const doc = renderer.contentWindow?.document;
-        return doc ? Array.from(doc.querySelectorAll('[id]')) : [];
+  private bindRotateEvent(): void {
+    if (!this.moveable) throw new Error('moveable 未初始化');
+
+    this.moveable
+      .on('rotateStart', (e) => {
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onRotateStart(e);
+      })
+      .on('rotate', (e) => {
+        if (!this.target || !this.dragEl) return;
+        this.dragStatus = ActionStatus.ING;
+        this.moveableHelper?.onRotate(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || '';
+      })
+      .on('rotateEnd', (e) => {
+        this.dragStatus = ActionStatus.END;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit('update', {
+          el: this.target,
+          style: {
+            transform: frame?.get('transform'),
+          },
+        });
+      });
+  }
+
+  private bindScaleEvent(): void {
+    if (!this.moveable) throw new Error('moveable 未初始化');
+
+    this.moveable
+      .on('scaleStart', (e) => {
+        this.dragStatus = ActionStatus.START;
+        this.moveableHelper?.onScaleStart(e);
+      })
+      .on('scale', (e) => {
+        if (!this.target || !this.dragEl) return;
+        this.dragStatus = ActionStatus.ING;
+        this.moveableHelper?.onScale(e);
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.target.style.transform = frame?.toCSSObject().transform || '';
+      })
+      .on('scaleEnd', (e) => {
+        this.dragStatus = ActionStatus.END;
+        const frame = this.moveableHelper?.getFrame(e.target);
+        this.emit('update', {
+          el: this.target,
+          style: {
+            transform: frame?.get('transform'),
+          },
+        });
       });
-    return getSnapElements(el).filter(
-      (element) => element !== this.target && !this.target?.contains(element) && element !== mask.page,
-    );
   }
 
   private sort(): void {
@@ -307,14 +380,15 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private update(isResize = false): void {
-    const rect = this.moveable!.getRect();
+    if (!this.target) return;
+
     const offset =
-      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : getAbsolutePosition(this.target as HTMLElement, rect);
+      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
 
     const left = this.calcValueByFontsize(offset.left);
     const top = this.calcValueByFontsize(offset.top);
-    const width = this.calcValueByFontsize(rect.width);
-    const height = this.calcValueByFontsize(rect.height);
+    const width = this.calcValueByFontsize(this.target.clientWidth);
+    const height = this.calcValueByFontsize(this.target.clientHeight);
 
     this.emit('update', {
       el: this.target,
@@ -330,7 +404,7 @@ export default class StageDragResize extends EventEmitter {
     const ghostEl = el.cloneNode(true) as HTMLElement;
     const { top, left } = getAbsolutePosition(el, getOffset(el));
     ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
-    ghostEl.style.zIndex = '5';
+    ghostEl.style.zIndex = ZIndex.GHOST_EL;
     ghostEl.style.opacity = '.5';
     ghostEl.style.position = 'absolute';
     ghostEl.style.left = `${left}px`;
@@ -345,19 +419,24 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private updateDragEl(el: HTMLElement) {
-    const { width, height } = el.getBoundingClientRect();
     const offset = getOffset(el);
+    const { transform } = getComputedStyle(el);
 
     this.dragEl.style.cssText = `
       position: absolute;
+      transform: ${transform};
       left: ${offset.left}px;
       top: ${offset.top}px;
-      width: ${width}px;
-      height: ${height}px;
-      z-index: 9;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+      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);
+    }
   }
 
   private destroyDragEl(): void {
@@ -376,6 +455,14 @@ export default class StageDragResize extends EventEmitter {
       moveableOptions = moveableOptions(this.core);
     }
 
+    const elementGuidelines: any = moveableOptions.elementGuidelines || this.target.parentElement?.children || [];
+
+    this.setElementGuidelines(elementGuidelines);
+
+    if (moveableOptions.elementGuidelines) {
+      delete moveableOptions.elementGuidelines;
+    }
+
     return {
       origin: false,
       rootContainer: this.core.container,
@@ -383,6 +470,8 @@ export default class StageDragResize extends EventEmitter {
       dragArea: false,
       draggable: true,
       resizable: true,
+      scalable: false,
+      rotatable: false,
       snappable: isAbsolute || isFixed,
       snapGap: isAbsolute || isFixed,
       snapThreshold: 5,

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,
     });
   }