@tmagic/stage 1.1.0-beta.2 → 1.1.0-beta.3

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

@@ -4,15 +4,18 @@ import type { Id } from '@tmagic/schema';
 import StageDragResize from './StageDragResize';
 import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
+import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
 import { IsContainer, RemoveData, SortEventData, StageCoreConfig, UpdateData } from './types';
 export default class StageCore extends EventEmitter {
     container?: HTMLDivElement;
-    selectedDom: Element | undefined;
+    selectedDom: HTMLElement | undefined;
+    selectedDomList: HTMLElement[];
     highlightedDom: Element | undefined;
     renderer: StageRender;
     mask: StageMask;
     dr: StageDragResize;
+    multiDr: StageMultiDragResize;
     highlightLayer: StageHighlight;
     config: StageCoreConfig;
     zoom: number;
@@ -22,7 +25,7 @@ export default class StageCore extends EventEmitter {
     private canSelect;
     constructor(config: StageCoreConfig);
     getElementsFromPoint(event: MouseEvent): HTMLElement[];
-    setElementFromPoint(event: MouseEvent): Promise<void>;
+    getElementFromPoint(event: MouseEvent, type?: String): Promise<HTMLElement | undefined>;
     /**
      * 选中组件
      * @param idOrEl 组件Dom节点的id属性，或者Dom节点
@@ -42,6 +45,11 @@ export default class StageCore extends EventEmitter {
     add(data: UpdateData): Promise<void>;
     remove(data: RemoveData): Promise<void>;
     setZoom(zoom?: number): void;
+    /**
+     * 用于在切换选择模式时清除上一次的状态
+     * @param selectType 需要清理的选择模式 多选：multiSelect，单选：select
+     */
+    clearSelectStatus(selectType: String): void;
     /**
      * 挂载Dom节点
      * @param el 将stage挂载到该Dom节点上
@@ -51,6 +59,8 @@ export default class StageCore extends EventEmitter {
      * 清空所有参考线
      */
     clearGuides(): void;
+    addContainerHighlightClassName(event: MouseEvent, exclude: Element[]): Promise<void>;
+    getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude?: Element[]): NodeJS.Timeout;
     /**
      * 销毁实例
      */

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

@@ -3,18 +3,20 @@ import { EventEmitter } from 'events';
 import Moveable from 'moveable';
 import { GuidesType, Mode } from './const';
 import StageCore from './StageCore';
+import StageMask from './StageMask';
 import type { SortEventData, StageDragResizeConfig } from './types';
 /**
  * 选中框
  */
 export default class StageDragResize extends EventEmitter {
     core: StageCore;
+    mask: StageMask;
     /** 画布容器 */
     container: HTMLElement;
     /** 目标节点 */
     target?: HTMLElement;
     /** 目标节点在蒙层中的占位节点 */
-    dragEl: HTMLDivElement;
+    dragEl?: HTMLDivElement;
     /** Moveable拖拽类实例 */
     moveable?: Moveable;
     /** 水平参考线 */
@@ -45,6 +47,8 @@ export default class StageDragResize extends EventEmitter {
     updateMoveable(el?: HTMLElement | undefined): void;
     setGuidelines(type: GuidesType, guidelines: number[]): void;
     clearGuides(): void;
+    clearSelectStatus(): void;
+    destroyDragEl(): void;
     /**
      * 销毁实例
      */
@@ -60,9 +64,8 @@ export default class StageDragResize extends EventEmitter {
     private sort;
     private update;
     private generateGhostEl;
+    private setGhostElChildrenId;
     private destroyGhostEl;
-    private updateDragEl;
-    private destroyDragEl;
     private getOptions;
 }
 /**

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

@@ -21,6 +21,7 @@ export default class StageMask extends Rule {
     maxScrollTop: number;
     maxScrollLeft: number;
     intersectionObserver: IntersectionObserver | null;
+    shiftKeyDown: Boolean;
     private mode;
     private pageResizeObserver;
     private wrapperResizeObserver;

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

@@ -0,0 +1,42 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+import Moveable from 'moveable';
+import StageCore from './StageCore';
+import StageMask from './StageMask';
+import { StageDragResizeConfig } from './types';
+export default class StageMultiDragResize extends EventEmitter {
+    core: StageCore;
+    mask: StageMask;
+    /** 画布容器 */
+    container: HTMLElement;
+    /** 多选:目标节点组 */
+    targetList: HTMLElement[];
+    /** 多选:目标节点在蒙层中的占位节点组 */
+    dragElList: HTMLDivElement[];
+    /** Moveable多选拖拽类实例 */
+    moveableForMulti?: Moveable;
+    private multiMoveableHelper?;
+    constructor(config: StageDragResizeConfig);
+    /**
+     * 多选
+     * @param els
+     */
+    multiSelect(els: HTMLElement[]): void;
+    /**
+     * 清除多选状态
+     */
+    clearSelectStatus(): void;
+    /**
+     * 销毁实例
+     */
+    destroy(): void;
+    /**
+     * 清除蒙层占位节点
+     */
+    destroyDragElList(): void;
+    /**
+     * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
+     * @param isResize 是否进行大小缩放
+     */
+    private update;
+}

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

@@ -5,6 +5,7 @@ export declare const DRAG_EL_ID_PREFIX = "drag_el_";
 /** 高亮时需要在蒙层中创建一个占位节点，该节点的id前缀 */
 export declare const HIGHLIGHT_EL_ID_PREFIX = "highlight_el_";
 export declare const CONTAINER_HIGHLIGHT_CLASS = "tmagic-stage-container-highlight";
+export declare const PAGE_CLASS = "magic-ui-page";
 /** 默认放到缩小倍数 */
 export declare const DEFAULT_ZOOM = 1;
 /** 参考线类型 */

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

@@ -1,6 +1,6 @@
 import { MoveableOptions } from 'moveable';
 import Core from '@tmagic/core';
-import type { Id, MApp, MNode } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 import { GuidesType } from './const';
 import StageCore from './StageCore';
 import StageDragResize from './StageDragResize';
@@ -32,6 +32,7 @@ export interface StageMaskConfig {
 export interface StageDragResizeConfig {
     core: StageCore;
     container: HTMLElement;
+    mask: StageMask;
 }
 export declare type Rect = {
     width: number;
@@ -67,6 +68,7 @@ export interface SortEventData {
 }
 export interface UpdateData {
     config: MNode;
+    parent?: MContainer;
     root: MApp;
 }
 export interface RemoveData {

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

@@ -1,6 +1,7 @@
 import { Mode } from './const';
 import type { Offset } from './types';
 export declare const getOffset: (el: HTMLElement) => Offset;
+export declare const getTargetElStyle: (el: HTMLElement) => string;
 export declare const getAbsolutePosition: (el: HTMLElement, { top, left }: Offset) => {
     left: number;
     top: number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.3",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -27,10 +27,11 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.1.0-beta.2",
-    "@tmagic/schema": "1.1.0-beta.2",
-    "@tmagic/utils": "1.1.0-beta.2",
+    "@tmagic/core": "1.1.0-beta.3",
+    "@tmagic/schema": "1.1.0-beta.3",
+    "@tmagic/utils": "1.1.0-beta.3",
     "events": "^3.3.0",
+    "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "moveable": "^0.30.0",
     "moveable-helper": "^0.4.0"

package/src/StageCore.ts

@@ -19,11 +19,13 @@
 import { EventEmitter } from 'events';
 
 import type { Id } from '@tmagic/schema';
+import { addClassName } from '@tmagic/utils';
 
-import { DEFAULT_ZOOM, GHOST_EL_ID_PREFIX } from './const';
+import { DEFAULT_ZOOM, GHOST_EL_ID_PREFIX, PAGE_CLASS } from './const';
 import StageDragResize from './StageDragResize';
 import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
+import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
 import {
   CanSelect,
@@ -40,12 +42,15 @@ import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageCore extends EventEmitter {
   public container?: HTMLDivElement;
-
-  public selectedDom: Element | undefined;
+  // 当前选中的节点
+  public selectedDom: HTMLElement | undefined;
+  // 多选选中的节点组
+  public selectedDomList: HTMLElement[] = [];
   public highlightedDom: Element | undefined;
   public renderer: StageRender;
   public mask: StageMask;
   public dr: StageDragResize;
+  public multiDr: StageMultiDragResize;
   public highlightLayer: StageHighlight;
   public config: StageCoreConfig;
   public zoom = DEFAULT_ZOOM;
@@ -68,7 +73,8 @@ 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.dr = new StageDragResize({ core: this, container: this.mask.content, mask: this.mask });
+    this.multiDr = new StageMultiDragResize({ core: this, container: this.mask.content, mask: this.mask });
     this.highlightLayer = new StageHighlight({ core: this, container: this.mask.wrapper });
 
     this.renderer.on('runtime-ready', (runtime: Runtime) => {
@@ -79,8 +85,11 @@ export default class StageCore extends EventEmitter {
     });
 
     this.mask
-      .on('beforeSelect', (event: MouseEvent) => {
-        this.setElementFromPoint(event);
+      .on('beforeSelect', async (event: MouseEvent) => {
+        this.clearSelectStatus('multiSelect');
+        const el = await this.getElementFromPoint(event);
+        if (!el) return;
+        this.select(el, event);
       })
       .on('select', () => {
         this.emit('select', this.selectedDom);
@@ -90,16 +99,39 @@ export default class StageCore extends EventEmitter {
         this.emit('changeGuides', data);
       })
       .on('highlight', async (event: MouseEvent) => {
-        await this.setElementFromPoint(event);
+        const el = await this.getElementFromPoint(event, 'mousemove');
+        if (!el) return;
+        await this.highlight(el);
         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();
+      })
+      .on('beforeMultiSelect', async (event: MouseEvent) => {
+        const el = await this.getElementFromPoint(event);
+        if (!el) return;
+        // 多选不可以选中magic-ui-page
+        if (el.className.includes(PAGE_CLASS)) return;
+        this.clearSelectStatus('select');
+        // 如果已有单选选中元素，不是magic-ui-page就可以加入多选列表
+        if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
+          this.selectedDomList.push(this.selectedDom as HTMLElement);
+          this.selectedDom = undefined;
+        }
+        // 判断元素是否已在多选列表
+        const existIndex = this.selectedDomList.findIndex((selectedDom) => selectedDom.id === el.id);
+        if (existIndex !== -1) {
+          // 再次点击取消选中
+          this.selectedDomList.splice(existIndex, 1);
+        } else {
+          this.selectedDomList.push(el);
+        }
+        this.multiDr.multiSelect(this.selectedDomList);
+        this.emit('multiSelect', this.selectedDomList);
       });
 
     // 要先触发select，在触发update
@@ -110,6 +142,10 @@ export default class StageCore extends EventEmitter {
       .on('sort', (data: UpdateEventData) => {
         setTimeout(() => this.emit('sort', data));
       });
+
+    this.multiDr.on('update', (data: UpdateEventData) => {
+      setTimeout(() => this.emit('update', data));
+    });
   }
 
   public getElementsFromPoint(event: MouseEvent) {
@@ -130,20 +166,17 @@ export default class StageCore extends EventEmitter {
     return doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
   }
 
-  public async setElementFromPoint(event: MouseEvent) {
+  public async getElementFromPoint(event: MouseEvent, type?: String) {
     const els = this.getElementsFromPoint(event);
-
     let stopped = false;
     const stop = () => (stopped = true);
     for (const el of els) {
       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;
+        if (event.type === type) {
+          return el;
         }
-        this.select(el, event);
-        break;
+        return el;
       }
     }
   }
@@ -166,6 +199,7 @@ export default class StageCore extends EventEmitter {
     }
 
     this.mask.setLayout(el);
+    this.multiDr.destroyDragElList();
     this.dr.select(el, event);
 
     if (this.config.autoScrollIntoView || el.dataset.autoScrollIntoView) {
@@ -217,7 +251,7 @@ export default class StageCore extends EventEmitter {
       this.highlightLayer.clearHighlight();
       return;
     }
-    if (el === this.highlightedDom) return;
+    if (el === this.highlightedDom || !el) return;
     this.highlightLayer.highlight(el);
     this.highlightedDom = el;
   }
@@ -238,6 +272,19 @@ export default class StageCore extends EventEmitter {
     this.zoom = zoom;
   }
 
+  /**
+   * 用于在切换选择模式时清除上一次的状态
+   * @param selectType 需要清理的选择模式 多选：multiSelect，单选：select
+   */
+  public clearSelectStatus(selectType: String) {
+    if (selectType === 'multiSelect') {
+      this.multiDr.clearSelectStatus();
+      this.selectedDomList = [];
+    } else {
+      this.dr.clearSelectStatus();
+    }
+  }
+
   /**
    * 挂载Dom节点
    * @param el 将stage挂载到该Dom节点上
@@ -260,6 +307,27 @@ export default class StageCore extends EventEmitter {
     this.dr.clearGuides();
   }
 
+  public async addContainerHighlightClassName(event: MouseEvent, exclude: Element[]) {
+    const els = this.getElementsFromPoint(event);
+    const { renderer } = this;
+    const doc = renderer.contentWindow?.document;
+
+    if (!doc) return;
+
+    for (const el of els) {
+      if (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isContainer(el)) && !exclude.includes(el)) {
+        addClassName(el, doc, this.containerHighlightClassName);
+        break;
+      }
+    }
+  }
+
+  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude: Element[] = []) {
+    return globalThis.setTimeout(() => {
+      this.addContainerHighlightClassName(event, exclude);
+    }, this.containerHighlightDuration);
+  }
+
   /**
    * 销毁实例
    */

package/src/StageDragResize.ts

@@ -23,12 +23,13 @@ import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { addClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { removeClassNameByClassName } from '@tmagic/utils';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from './const';
 import StageCore from './StageCore';
+import StageMask from './StageMask';
 import type { SortEventData, StageDragResizeConfig } from './types';
-import { calcValueByFontsize, getAbsolutePosition, getMode, getOffset } from './util';
+import { calcValueByFontsize, getAbsolutePosition, getMode, getOffset, getTargetElStyle } from './util';
 
 /** 拖动状态 */
 enum ActionStatus {
@@ -45,12 +46,13 @@ enum ActionStatus {
  */
 export default class StageDragResize extends EventEmitter {
   public core: StageCore;
+  public mask: StageMask;
   /** 画布容器 */
   public container: HTMLElement;
   /** 目标节点 */
   public target?: HTMLElement;
   /** 目标节点在蒙层中的占位节点 */
-  public dragEl: HTMLDivElement;
+  public dragEl?: HTMLDivElement;
   /** Moveable拖拽类实例 */
   public moveable?: Moveable;
   /** 水平参考线 */
@@ -74,9 +76,7 @@ export default class StageDragResize extends EventEmitter {
 
     this.core = config.core;
     this.container = config.container;
-
-    this.dragEl = globalThis.document.createElement('div');
-    this.container.append(this.dragEl);
+    this.mask = config.mask;
   }
 
   /**
@@ -147,6 +147,17 @@ export default class StageDragResize extends EventEmitter {
     this.updateMoveable();
   }
 
+  public clearSelectStatus(): void {
+    if (!this.moveable) return;
+    this.destroyDragEl();
+    this.moveable.target = null;
+    this.moveable.updateTarget();
+  }
+
+  public destroyDragEl(): void {
+    this.dragEl?.remove();
+  }
+
   /**
    * 销毁实例
    */
@@ -166,9 +177,15 @@ export default class StageDragResize extends EventEmitter {
     this.mode = getMode(el);
 
     this.destroyGhostEl();
+    this.destroyDragEl();
+    this.dragEl = globalThis.document.createElement('div');
+    this.container.append(this.dragEl);
+    this.dragEl.style.cssText = getTargetElStyle(el);
+    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
 
-    this.updateDragEl(el);
-
+    if (typeof this.core.config.updateDragEl === 'function') {
+      this.core.config.updateDragEl(this.dragEl, el);
+    }
     this.moveableOptions = this.getOptions({
       target: this.dragEl,
     });
@@ -294,20 +311,7 @@ export default class StageDragResize extends EventEmitter {
           timeout = undefined;
         }
 
-        timeout = globalThis.setTimeout(async () => {
-          const els = this.core.getElementsFromPoint(e.inputEvent);
-          for (const el of els) {
-            if (
-              doc &&
-              !el.id.startsWith(GHOST_EL_ID_PREFIX) &&
-              el !== this.target &&
-              (await this.core.isContainer(el))
-            ) {
-              addClassName(el, doc, this.core.containerHighlightClassName);
-              break;
-            }
-          }
-        }, this.core.containerHighlightDuration);
+        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
 
         this.dragStatus = ActionStatus.ING;
 
@@ -467,6 +471,7 @@ export default class StageDragResize extends EventEmitter {
     }
 
     const ghostEl = el.cloneNode(true) as HTMLElement;
+    this.setGhostElChildrenId(ghostEl);
     const { top, left } = getAbsolutePosition(el, getOffset(el));
     ghostEl.id = `${GHOST_EL_ID_PREFIX}${el.id}`;
     ghostEl.style.zIndex = ZIndex.GHOST_EL;
@@ -478,34 +483,21 @@ export default class StageDragResize extends EventEmitter {
     return ghostEl;
   }
 
-  private destroyGhostEl(): void {
-    this.ghostEl?.remove();
-    this.ghostEl = undefined;
-  }
-
-  private updateDragEl(el: HTMLElement) {
-    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: ${el.clientWidth}px;
-      height: ${el.clientHeight}px;
-      z-index: ${ZIndex.DRAG_EL};
-    `;
-
-    this.dragEl.id = `${DRAG_EL_ID_PREFIX}${el.id}`;
+  private setGhostElChildrenId(el: Element) {
+    for (const child of el.children) {
+      if (child.id) {
+        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
+      }
 
-    if (typeof this.core.config.updateDragEl === 'function') {
-      this.core.config.updateDragEl(this.dragEl, el);
+      if (child.children.length) {
+        this.setGhostElChildrenId(child);
+      }
     }
   }
 
-  private destroyDragEl(): void {
-    this.dragEl?.remove();
+  private destroyGhostEl(): void {
+    this.ghostEl?.remove();
+    this.ghostEl = undefined;
   }
 
   private getOptions(options: MoveableOptions = {}): MoveableOptions {

package/src/StageMask.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
 
 import { createDiv, injectStyle } from '@tmagic/utils';
@@ -82,6 +83,7 @@ export default class StageMask extends Rule {
   public maxScrollTop = 0;
   public maxScrollLeft = 0;
   public intersectionObserver: IntersectionObserver | null = null;
+  public shiftKeyDown: Boolean = false;
 
   private mode: Mode = Mode.ABSOLUTE;
   private pageResizeObserver: ResizeObserver | null = null;
@@ -106,6 +108,14 @@ export default class StageMask extends Rule {
     this.content.addEventListener('wheel', this.mouseWheelHandler);
     this.content.addEventListener('mousemove', this.highlightHandler);
     this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
+    KeyController.global.keydown('shift', (e) => {
+      e.inputEvent.preventDefault();
+      this.shiftKeyDown = true;
+    });
+    KeyController.global.keyup('shift', (e) => {
+      e.inputEvent.preventDefault();
+      this.shiftKeyDown = false;
+    });
   }
 
   public setMode(mode: Mode) {
@@ -292,23 +302,30 @@ export default class StageMask extends Rule {
    */
   private mouseDownHandler = (event: MouseEvent): void => {
     this.emit('clearHighlight');
-
     event.stopImmediatePropagation();
     event.stopPropagation();
 
     if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return;
 
-    // 点击的对象如果是选中框，则不需要再触发选中了，而可能是拖动行为
+    // 如果单击多选选中区域，则不需要再触发选中了，而可能是拖动行为
+    if (!this.shiftKeyDown && (event.target as HTMLDivElement).className.indexOf('moveable-area') !== -1) {
+      return;
+    }
+    // 点击对象如果是边框锚点，则可能是resize
     if ((event.target as HTMLDivElement).className.indexOf('moveable-control') !== -1) {
       return;
     }
 
     this.content.removeEventListener('mousemove', this.highlightHandler);
 
-    this.emit('beforeSelect', event);
-
-    // 如果是右键点击，这里的mouseup事件监听没有效果
-    globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
+    // 判断触发多选还是单选
+    if (this.shiftKeyDown) {
+      this.emit('beforeMultiSelect', event);
+    } else {
+      this.emit('beforeSelect', event);
+      // 如果是右键点击，这里的mouseup事件监听没有效果
+      globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
+    }
   };
 
   private mouseUpHandler = (): void => {