@tmagic/stage 1.0.0-beta.8 → 1.0.0-rc.10

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

@@ -1,19 +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"
+    /** 蒙层，用于监听用户操作，需要置于顶层 */
+    MASK = "99999",
+    /** 选中的节点 */
+    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,8 +1,11 @@
-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';
-export declare type CanSelect = (el: HTMLElement, stop: () => boolean) => boolean | Promise<boolean>;
+import StageDragResize from './StageDragResize';
+import StageMask from './StageMask';
+export declare type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export declare type StageCoreConfig = {
     /** 需要对齐的dom节点的CSS选择器字符串 */
     snapElementQuerySelector?: string;
@@ -13,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;
@@ -40,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 {
@@ -60,8 +69,9 @@ export interface RemoveData {
     root: MApp;
 }
 export interface Runtime {
+    getApp?: () => Core;
     beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
-    getSnapElements?: (el: HTMLElement) => HTMLElement[];
+    getSnapElements?: (el?: HTMLElement) => HTMLElement[];
     updateRootConfig: (config: MApp) => void;
     updatePageId?: (id: Id) => void;
     select?: (id: Id) => Promise<HTMLElement> | HTMLElement;
@@ -78,3 +88,13 @@ export interface Magic {
 export interface RuntimeWindow extends Window {
     magic: Magic;
 }
+export interface StageHighlightConfig {
+    core: StageCore;
+    container: HTMLElement;
+}
+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) => {
@@ -18,3 +18,6 @@ export declare const createDiv: ({ className, cssText }: {
     className: string;
     cssText: string;
 }) => 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,7 +1,9 @@
 {
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-rc.10",
   "name": "@tmagic/stage",
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/*"
+  ],
   "main": "dist/tmagic-stage.umd.js",
   "module": "dist/tmagic-stage.es.js",
   "types": "dist/types/src/index.d.ts",
@@ -9,8 +11,10 @@
     ".": {
       "import": "./dist/tmagic-stage.es.js",
       "require": "./dist/tmagic-stage.umd.js"
-    }
+    },
+    "./*": "./*"
   },
+  "license": "Apache-2.0",
   "scripts": {
     "build": "vite build"
   },
@@ -23,11 +27,13 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.8",
-    "@tmagic/utils": "^1.0.0-beta.8",
+    "@tmagic/core": "1.0.0-rc.10",
+    "@tmagic/schema": "1.0.0-rc.10",
+    "@tmagic/utils": "1.0.0-rc.10",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.28.0"
+    "moveable": "^0.29.4",
+    "moveable-helper": "^0.4.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -37,6 +43,5 @@
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6"
-  },
-  "gitHead": "ff8e32901775ecc145a82f906d6af6119652d61e"
+  }
 }

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

@@ -22,6 +22,7 @@ import { Id } from '@tmagic/schema';
 
 import { DEFAULT_ZOOM, GHOST_EL_ID_PREFIX } from './const';
 import StageDragResize from './StageDragResize';
+import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
 import StageRender from './StageRender';
 import {
@@ -34,15 +35,19 @@ import {
   UpdateData,
   UpdateEventData,
 } from './types';
+import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageCore extends EventEmitter {
   public selectedDom: Element | undefined;
+  public highlightedDom: Element | undefined;
 
   public renderer: StageRender;
   public mask: StageMask;
   public dr: StageDragResize;
+  public highlightLayer: StageHighlight;
   public config: StageCoreConfig;
   public zoom = DEFAULT_ZOOM;
+  public container?: HTMLDivElement;
   private canSelect: CanSelect;
 
   constructor(config: StageCoreConfig) {
@@ -56,9 +61,14 @@ export default class StageCore extends EventEmitter {
     this.renderer = new StageRender({ core: this });
     this.mask = new StageMask({ core: this });
     this.dr = new StageDragResize({ core: this, container: this.mask.content });
+    this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
 
-    this.renderer.on('runtime-ready', (runtime: Runtime) => this.emit('runtime-ready', runtime));
-    this.renderer.on('page-el-update', (el: HTMLElement) => this.mask?.observe(el));
+    this.renderer.on('runtime-ready', (runtime: Runtime) => {
+      this.emit('runtime-ready', runtime);
+    });
+    this.renderer.on('page-el-update', (el: HTMLElement) => {
+      this.mask?.observe(el);
+    });
 
     this.mask
       .on('beforeSelect', (event: MouseEvent) => {
@@ -70,6 +80,18 @@ export default class StageCore extends EventEmitter {
       .on('changeGuides', (data: GuidesEventData) => {
         this.dr.setGuidelines(data.type, data.guides);
         this.emit('changeGuides', data);
+      })
+      .on('highlight', async (event: MouseEvent) => {
+        await this.setElementFromPoint(event);
+        if (this.highlightedDom === this.selectedDom) {
+          this.highlightLayer.clearHighlight();
+          return;
+        }
+        this.highlightLayer.highlight(this.highlightedDom as HTMLElement);
+        this.emit('highlight', this.highlightedDom);
+      })
+      .on('clearHighlight', async () => {
+        this.highlightLayer.clearHighlight();
       });
 
     // 要先触发select，在触发update
@@ -102,8 +124,12 @@ export default class StageCore extends EventEmitter {
     let stopped = false;
     const stop = () => (stopped = true);
     for (const el of els) {
-      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.canSelect(el, stop))) {
+      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.canSelect(el, event, stop))) {
         if (stopped) break;
+        if (event.type === 'mousemove') {
+          this.highlight(el);
+          break;
+        }
         this.select(el, event);
         break;
       }
@@ -115,58 +141,85 @@ export default class StageCore extends EventEmitter {
    * @param idOrEl 组件Dom节点的id属性，或者Dom节点
    */
   public async select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void> {
-    let el;
-    if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
-      const runtime = await this.renderer?.getRuntime();
-      el = await runtime?.select?.(`${idOrEl}`);
-      if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
-    } else {
-      el = idOrEl;
-    }
+    const el = await this.getTargetElement(idOrEl);
 
     if (el === this.selectedDom) return;
 
-    const runtime = await this.renderer?.getRuntime();
+    const runtime = await this.renderer.getRuntime();
+
+    await runtime?.select?.(el.id);
+
     if (runtime?.beforeSelect) {
       await runtime.beforeSelect(el);
     }
 
     this.mask.setLayout(el);
-    this.dr?.select(el, event);
+    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, this.renderer.contentWindow.document);
+      }
+    }
   }
 
   /**
    * 更新选中的节点
    * @param data 更新的数据
    */
-  public update(data: UpdateData): void {
+  public update(data: UpdateData): Promise<void> {
     const { config } = data;
 
-    this.renderer?.getRuntime().then((runtime) => {
+    return this.renderer?.getRuntime().then((runtime) => {
       runtime?.update?.(data);
       // 更新配置后，需要等组件渲染更新
       setTimeout(() => {
         const el = this.renderer.contentWindow?.document.getElementById(`${config.id}`);
-        if (el) {
+        // 有可能dom已经重新渲染，不再是原来的dom了，所以这里判断id，而不是判断el === this.selectedDom
+        if (el && el.id === this.selectedDom?.id) {
+          this.selectedDom = el;
           // 更新了组件的布局，需要重新设置mask是否可以滚动
           this.mask.setLayout(el);
-          this.dr?.select(el);
+          this.dr.updateMoveable(el);
         }
       }, 0);
     });
   }
 
-  public sortNode(data: SortEventData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
+  /**
+   * 高亮选中组件
+   * @param el 页面Dom节点
+   */
+  public async highlight(idOrEl: HTMLElement | Id): Promise<void> {
+    let el;
+    try {
+      el = await this.getTargetElement(idOrEl);
+    } catch (error) {
+      this.highlightLayer.clearHighlight();
+      return;
+    }
+    if (el === this.highlightedDom) return;
+    this.highlightLayer.highlight(el);
+    this.highlightedDom = el;
   }
 
-  public add(data: UpdateData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+  public sortNode(data: SortEventData): Promise<void> {
+    return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
   }
 
-  public remove(data: RemoveData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
+  public add(data: UpdateData): Promise<void> {
+    return this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+  }
+
+  public remove(data: RemoveData): Promise<void> {
+    return this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(data));
   }
 
   public setZoom(zoom: number = DEFAULT_ZOOM): void {
@@ -178,6 +231,7 @@ export default class StageCore extends EventEmitter {
    * @param el 将stage挂载到该Dom节点上
    */
   public mount(el: HTMLDivElement): void {
+    this.container = el;
     const { mask, renderer } = this;
 
     renderer.mount(el);
@@ -198,12 +252,24 @@ export default class StageCore extends EventEmitter {
    * 销毁实例
    */
   public destroy(): void {
-    const { mask, renderer, dr } = this;
+    const { mask, renderer, dr, highlightLayer } = this;
 
     renderer.destroy();
     mask.destroy();
     dr.destroy();
+    highlightLayer.destroy();
 
     this.removeAllListeners();
+
+    this.container = undefined;
+  }
+
+  private async getTargetElement(idOrEl: Id | HTMLElement): Promise<HTMLElement> {
+    if (typeof idOrEl === 'string' || typeof idOrEl === 'number') {
+      const el = this.renderer.contentWindow?.document.getElementById(`${idOrEl}`);
+      if (!el) throw new Error(`不存在ID为${idOrEl}的元素`);
+      return el;
+    }
+    return idOrEl;
   }
 }