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

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

@@ -2,7 +2,9 @@ import { MoveableOptions } from 'react-moveable/declaration/types';
 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;
@@ -61,7 +63,7 @@ export interface RemoveData {
 }
 export interface Runtime {
     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 +80,12 @@ 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;
+}

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

@@ -18,3 +18,5 @@ 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;

package/package.json

@@ -1,7 +1,9 @@
 {
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-rc.2",
   "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,12 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.8",
-    "@tmagic/utils": "^1.0.0-beta.8",
+    "@tmagic/schema": "^1.0.0-rc.2",
+    "@tmagic/utils": "^1.0.0-rc.2",
     "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",
@@ -38,5 +43,5 @@
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6"
   },
-  "gitHead": "ff8e32901775ecc145a82f906d6af6119652d61e"
+  "gitHead": "3e309780ed33640ab3fc986a93dd0e7b15c167e5"
 }

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,82 @@ 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);
+    this.mask.scrollIntoView(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 sortNode(data: SortEventData): Promise<void> {
+    return this.renderer?.getRuntime().then((runtime) => runtime?.sortNode?.(data));
   }
 
-  public add(data: UpdateData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
+  public add(data: UpdateData): Promise<void> {
+    return this.renderer?.getRuntime().then((runtime) => runtime?.add?.(data));
   }
 
-  public remove(data: RemoveData): void {
-    this.renderer?.getRuntime().then((runtime) => runtime?.remove?.(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 +228,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 +249,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;
   }
 }

package/src/StageDragResize.ts

@@ -21,10 +21,11 @@ import { EventEmitter } from 'events';
 
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
+import MoveableHelper from 'moveable-helper';
 
-import { GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
+import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode } from './const';
 import StageCore from './StageCore';
-import type { SortEventData, StageDragResizeConfig } from './types';
+import type { Offset, Runtime, SortEventData, StageDragResizeConfig } from './types';
 import { getAbsolutePosition, getMode, getOffset } from './util';
 
 enum ActionStatus {
@@ -40,21 +41,26 @@ export default class StageDragResize extends EventEmitter {
   public core: StageCore;
   public container: HTMLElement;
   public target?: HTMLElement;
-  public dragEl?: HTMLElement;
+  public dragEl: HTMLElement;
   public moveable?: Moveable;
   public horizontalGuidelines: number[] = [];
   public verticalGuidelines: number[] = [];
+  public elementGuidelines: HTMLElement[] = [];
+  public mode: Mode = Mode.ABSOLUTE;
 
   private moveableOptions: MoveableOptions = {};
   private dragStatus: ActionStatus = ActionStatus.END;
   private ghostEl: HTMLElement | undefined;
-  private mode: Mode = Mode.ABSOLUTE;
+  private moveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
     super();
 
     this.core = config.core;
     this.container = config.container;
+
+    this.dragEl = globalThis.document.createElement('div');
+    this.container.append(this.dragEl);
   }
 
   /**
@@ -63,23 +69,24 @@ export default class StageDragResize extends EventEmitter {
    * @param el 选中组件的Dom节点元素
    * @param event 鼠标事件
    */
-  public async select(el: HTMLElement, event?: MouseEvent): Promise<void> {
+  public select(el: HTMLElement, event?: MouseEvent): void {
+    const oldTarget = this.target;
     this.target = el;
-    // 如果有滚动条会导致resize时获取到width，height不准确
-    if (/(auto|scroll)/.test(this.target.style.overflow)) {
-      this.target.style.overflow = 'hidden';
-    }
-    this.mode = getMode(el);
-    this.destroyDragEl();
-    this.destroyGhostEl();
 
-    this.dragEl = this.generateDragEl(el);
+    this.init(el);
 
-    this.moveableOptions = await this.getOptions({
-      target: this.dragEl || this.target,
-    });
+    // 从不能拖动到能拖动的节点之间切换，要重新创建moveable，不然dragStart不生效
+    if (!this.moveable || this.target !== oldTarget) {
+      this.moveableHelper = MoveableHelper.create({
+        useBeforeRender: true,
+        useRender: false,
+        createAuto: true,
+      });
 
-    this.initMoveable();
+      this.initMoveable();
+    } else {
+      this.updateMoveable();
+    }
 
     if (event) {
       this.moveable?.dragStart(event);
@@ -89,11 +96,15 @@ export default class StageDragResize extends EventEmitter {
   /**
    * 初始化选中框并渲染出来
    */
-  public async refresh() {
+  public updateMoveable(el = this.target): void {
     if (!this.moveable) throw new Error('未初始化moveable');
+    if (!el) throw new Error('为选中任何节点');
 
-    const options = await this.getOptions();
-    Object.entries(options).forEach(([key, value]) => {
+    this.target = el;
+
+    this.init(el);
+
+    Object.entries(this.moveableOptions).forEach(([key, value]) => {
       (this.moveable as any)[key] = value;
     });
     this.moveable.updateTarget();
@@ -102,17 +113,21 @@ export default class StageDragResize extends EventEmitter {
   public setGuidelines(type: GuidesType, guidelines: number[]): void {
     if (type === GuidesType.HORIZONTAL) {
       this.horizontalGuidelines = guidelines;
+      this.moveableOptions.horizontalGuidelines = guidelines;
     } else if (type === GuidesType.VERTICAL) {
       this.verticalGuidelines = guidelines;
+      this.moveableOptions.verticalGuidelines = guidelines;
     }
 
-    this.refresh();
+    this.updateMoveable();
   }
 
   public clearGuides() {
-    this.verticalGuidelines = [];
     this.horizontalGuidelines = [];
-    this.refresh();
+    this.verticalGuidelines = [];
+    this.moveableOptions.horizontalGuidelines = [];
+    this.moveableOptions.verticalGuidelines = [];
+    this.updateMoveable();
   }
 
   /**
@@ -126,6 +141,22 @@ export default class StageDragResize extends EventEmitter {
     this.removeAllListeners();
   }
 
+  private init(el: HTMLElement): void {
+    // 如果有滚动条会导致resize时获取到width，height不准确
+    if (/(auto|scroll)/.test(el.style.overflow)) {
+      el.style.overflow = 'hidden';
+    }
+    this.mode = getMode(el);
+
+    this.destroyGhostEl();
+
+    this.updateDragEl(el);
+
+    this.moveableOptions = this.getOptions({
+      target: this.dragEl,
+    });
+  }
+
   private initMoveable() {
     this.moveable?.destroy();
 
@@ -188,34 +219,42 @@ export default class StageDragResize extends EventEmitter {
   private bindDragEvent(): void {
     if (!this.moveable) throw new Error('moveable 为初始化');
 
+    let offset: Offset | null = null;
+
     this.moveable
-      .on('dragStart', () => {
+      .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
 
         this.dragStatus = ActionStatus.START;
 
+        this.moveableHelper?.onDragStart(e);
+
         if (this.mode === Mode.SORTABLE) {
           this.ghostEl = this.generateGhostEl(this.target);
         }
       })
-      .on('drag', ({ left, top }) => {
+      .on('drag', (e) => {
         if (!this.target || !this.dragEl) return;
+
+        if (!offset) {
+          offset = getAbsolutePosition(this.target, { left: 0, top: 0 });
+        }
+
         this.dragStatus = ActionStatus.ING;
 
-        const offset = getAbsolutePosition(this.target, { left, top });
+        const { left, top } = e;
 
         // 流式布局
         if (this.ghostEl) {
           this.dragEl.style.top = `${top}px`;
-          this.ghostEl.style.top = `${offset.top}px`;
+          this.ghostEl.style.top = `${top + offset.top}px`;
           return;
         }
 
-        this.dragEl.style.left = `${left}px`;
-        this.dragEl.style.top = `${top}px`;
+        this.moveableHelper?.onDrag(e);
 
-        this.target.style.left = `${offset.left}px`;
-        this.target.style.top = `${offset.top}px`;
+        this.target.style.left = `${left + offset.left}px`;
+        this.target.style.top = `${top + offset.top}px`;
       })
       .on('dragEnd', () => {
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
@@ -228,24 +267,23 @@ export default class StageDragResize extends EventEmitter {
               this.update();
           }
         }
+        offset = null;
 
         this.dragStatus = ActionStatus.END;
         this.destroyGhostEl();
       });
   }
 
-  private async getSnapElements(el: HTMLElement): Promise<HTMLElement[]> {
-    const { renderer } = this.core;
+  private getSnapElements(runtime: Runtime, el?: HTMLElement): HTMLElement[] {
+    const { renderer, mask } = this.core;
     const getSnapElements =
-      (await renderer.getRuntime())?.getSnapElements ||
+      runtime?.getSnapElements ||
       (() => {
         const doc = renderer.contentWindow?.document;
         return doc ? Array.from(doc.querySelectorAll('[id]')) : [];
       });
-    return (
-      getSnapElements(el)
-        // 排除掉当前组件本身
-        .filter((element) => element !== this.target && !this.target?.contains(element))
+    return getSnapElements(el).filter(
+      (element) => element !== this.target && !this.target?.contains(element) && element !== mask.page,
     );
   }
 
@@ -291,7 +329,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}${ghostEl.id}`;
+    ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
     ghostEl.style.zIndex = '5';
     ghostEl.style.opacity = '.5';
     ghostEl.style.position = 'absolute';
@@ -306,34 +344,31 @@ export default class StageDragResize extends EventEmitter {
     this.ghostEl = undefined;
   }
 
-  private generateDragEl(el: HTMLElement): HTMLElement {
-    if (this.dragEl) {
-      this.destroyDragEl();
-    }
-
+  private updateDragEl(el: HTMLElement) {
     const { width, height } = el.getBoundingClientRect();
     const offset = getOffset(el);
-    const dragEl = globalThis.document.createElement('div');
-    dragEl.style.cssText = `
+
+    this.dragEl.style.cssText = `
       position: absolute;
       left: ${offset.left}px;
       top: ${offset.top}px;
       width: ${width}px;
       height: ${height}px;
+      z-index: 9;
     `;
-    this.container.append(dragEl);
-    return dragEl;
+
+    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
   }
 
   private destroyDragEl(): void {
     this.dragEl?.remove();
-    this.dragEl = undefined;
   }
 
-  private async getOptions(options: MoveableOptions = {}): Promise<MoveableOptions> {
+  private getOptions(options: MoveableOptions = {}): MoveableOptions {
     if (!this.target) return {};
 
     const isAbsolute = this.mode === Mode.ABSOLUTE;
+    const isFixed = this.mode === Mode.FIXED;
 
     let { moveableOptions = {} } = this.core.config;
 
@@ -342,20 +377,36 @@ export default class StageDragResize extends EventEmitter {
     }
 
     return {
-      scrollable: true,
-      origin: true,
+      origin: false,
+      rootContainer: this.core.container,
       zoom: 1,
-      dragArea: true,
+      dragArea: false,
       draggable: true,
       resizable: true,
-      snappable: isAbsolute,
-      snapGap: isAbsolute,
-      snapDirections: { center: isAbsolute, middle: isAbsolute },
-      elementSnapDirections: { center: isAbsolute, middle: isAbsolute },
-
-      elementGuidelines: isAbsolute ? await this.getSnapElements(this.target) : [],
+      snappable: isAbsolute || isFixed,
+      snapGap: isAbsolute || isFixed,
+      snapThreshold: 5,
+      snapDigit: 0,
+      throttleDrag: 0,
+      isDisplaySnapDigit: isAbsolute,
+      snapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+        center: isAbsolute,
+        middle: isAbsolute,
+      },
+      elementSnapDirections: {
+        top: isAbsolute,
+        right: isAbsolute,
+        bottom: isAbsolute,
+        left: isAbsolute,
+      },
+      isDisplayInnerSnapDigit: true,
       horizontalGuidelines: this.horizontalGuidelines,
       verticalGuidelines: this.verticalGuidelines,
+      elementGuidelines: this.elementGuidelines,
 
       bounds: {
         top: 0,