@tmagic/stage 1.0.6 → 1.1.0-beta.10

package/package.json

@@ -1,22 +1,24 @@
 {
-  "version": "1.0.6",
+  "version": "1.1.0-beta.10",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
   ],
   "main": "dist/tmagic-stage.umd.js",
-  "module": "dist/tmagic-stage.es.js",
-  "types": "dist/types/src/index.d.ts",
+  "module": "dist/tmagic-stage.mjs",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/tmagic-stage.es.js",
+      "import": "./dist/tmagic-stage.mjs",
       "require": "./dist/tmagic-stage.umd.js"
     },
     "./*": "./*"
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -27,10 +29,11 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.0.6",
-    "@tmagic/schema": "1.0.6",
-    "@tmagic/utils": "1.0.6",
+    "@tmagic/core": "1.1.0-beta.10",
+    "@tmagic/schema": "1.1.0-beta.10",
+    "@tmagic/utils": "1.1.0-beta.10",
     "events": "^3.3.0",
+    "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "moveable": "^0.30.0",
     "moveable-helper": "^0.4.0"
@@ -39,9 +42,9 @@
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^4.3.4",
-    "vite": "^2.9.13",
-    "vite-plugin-dts": "^0.9.6"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4"
   }
 }

package/src/StageCore.ts

@@ -19,35 +19,48 @@
 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 { CONTAINER_HIGHLIGHT_CLASS, 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,
+  ContainerHighlightType,
   GuidesEventData,
+  IsContainer,
   RemoveData,
   Runtime,
   SortEventData,
   StageCoreConfig,
+  StageDragStatus,
   UpdateData,
   UpdateEventData,
 } from './types';
 import { addSelectedClassName, removeSelectedClassName } from './util';
 
 export default class StageCore extends EventEmitter {
-  public selectedDom: Element | undefined;
+  public container?: HTMLDivElement;
+  // 当前选中的节点
+  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;
-  public container?: HTMLDivElement;
+  public containerHighlightClassName: string;
+  public containerHighlightDuration: number;
+  public containerHighlightType?: ContainerHighlightType;
+  public isContainer: IsContainer;
+
   private canSelect: CanSelect;
 
   constructor(config: StageCoreConfig) {
@@ -57,10 +70,15 @@ export default class StageCore extends EventEmitter {
 
     this.setZoom(config.zoom);
     this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
+    this.isContainer = config.isContainer;
+    this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS;
+    this.containerHighlightDuration = config.containerHighlightDuration || 800;
+    this.containerHighlightType = config.containerHighlightType;
 
     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) => {
@@ -71,8 +89,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);
@@ -82,16 +103,37 @@ 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);
+        if (!el) return;
+        // 如果多选组件处于拖拽状态时不进行组件高亮
+        if (this.multiDr.dragStatus === StageDragStatus.ING) 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 (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.multiSelect(this.selectedDomList);
       });
 
     // 要先触发select，在触发update
@@ -102,9 +144,19 @@ 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));
+      })
+      .on('select', async (id: Id) => {
+        const el = await this.getTargetElement(id);
+        this.select(el); // 选中
+        setTimeout(() => this.emit('select', el)); // set node
+      });
   }
 
-  public async setElementFromPoint(event: MouseEvent) {
+  public getElementsFromPoint(event: MouseEvent) {
     const { renderer, zoom } = this;
 
     const doc = renderer.contentWindow?.document;
@@ -119,28 +171,38 @@ export default class StageCore extends EventEmitter {
       }
     }
 
-    const els = doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
+    return doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
+  }
 
+  public async getElementFromPoint(event: MouseEvent) {
+    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 (!el.id.startsWith(GHOST_EL_ID_PREFIX) && (await this.isElCanSelect(el, event, stop))) {
         if (stopped) break;
-        if (event.type === 'mousemove') {
-          this.highlight(el);
-          break;
-        }
-        this.select(el, event);
-        break;
+        return el;
       }
     }
   }
 
+  public async isElCanSelect(el: HTMLElement, event: MouseEvent, stop: () => boolean): Promise<Boolean> {
+    // 执行业务方传入的判断逻辑
+    const canSelectByProp = await this.canSelect(el, event, stop);
+    if (!canSelectByProp) return false;
+    // 多选规则
+    if (this.mask.isMultiSelectStatus) {
+      return this.multiDr.canSelect(el, stop);
+    }
+    return true;
+  }
+
   /**
    * 选中组件
    * @param idOrEl 组件Dom节点的id属性，或者Dom节点
    */
   public async select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void> {
+    this.clearSelectStatus('multiSelect');
     const el = await this.getTargetElement(idOrEl);
 
     if (el === this.selectedDom) return;
@@ -170,6 +232,17 @@ export default class StageCore extends EventEmitter {
     }
   }
 
+  /**
+   * 多选
+   * @param domList 多选节点
+   */
+  public async multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void> {
+    this.clearSelectStatus('select');
+    const elList = await Promise.all(idOrElList.map(async (idOrEl) => await this.getTargetElement(idOrEl)));
+    this.multiDr.multiSelect(elList);
+    this.emit('multiSelect', elList);
+  }
+
   /**
    * 更新选中的节点
    * @param data 更新的数据
@@ -205,7 +278,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;
   }
@@ -226,6 +299,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节点上
@@ -248,6 +334,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[] = []): NodeJS.Timeout {
+    return globalThis.setTimeout(() => {
+      this.addContainerHighlightClassName(event, exclude);
+    }, this.containerHighlightDuration);
+  }
+
   /**
    * 销毁实例
    */