@tmagic/stage 1.1.0-beta.5 → 1.1.0-beta.8

package/package.json

@@ -1,22 +1,24 @@
 {
-  "version": "1.1.0-beta.5",
+  "version": "1.1.0-beta.8",
   "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,9 +29,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.1.0-beta.5",
-    "@tmagic/schema": "1.1.0-beta.5",
-    "@tmagic/utils": "1.1.0-beta.5",
+    "@tmagic/core": "1.1.0-beta.8",
+    "@tmagic/schema": "1.1.0-beta.8",
+    "@tmagic/utils": "1.1.0-beta.8",
     "events": "^3.3.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
@@ -40,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

@@ -114,7 +114,6 @@ export default class StageCore extends EventEmitter {
       .on('beforeMultiSelect', async (event: MouseEvent) => {
         const el = await this.getElementFromPoint(event);
         if (!el) return;
-        this.clearSelectStatus('select');
         // 如果已有单选选中元素，不是magic-ui-page就可以加入多选列表
         if (this.selectedDom && !this.selectedDom.className.includes(PAGE_CLASS)) {
           this.selectedDomList.push(this.selectedDom as HTMLElement);
@@ -128,8 +127,7 @@ export default class StageCore extends EventEmitter {
         } else {
           this.selectedDomList.push(el);
         }
-        this.multiDr.multiSelect(this.selectedDomList);
-        this.emit('multiSelect', this.selectedDomList);
+        this.multiSelect(this.selectedDomList);
       });
 
     // 要先触发select，在触发update
@@ -182,7 +180,7 @@ export default class StageCore extends EventEmitter {
     if (!canSelectByProp) return false;
     // 多选规则
     if (this.mask.isMultiSelectStatus) {
-      return this.multiDr.canSelect(el);
+      return this.multiDr.canSelect(el, stop);
     }
     return true;
   }
@@ -222,6 +220,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 更新的数据
@@ -328,7 +337,7 @@ export default class StageCore extends EventEmitter {
     }
   }
 
-  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude: Element[] = []) {
+  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, exclude: Element[] = []): NodeJS.Timeout {
     return globalThis.setTimeout(() => {
       this.addContainerHighlightClassName(event, exclude);
     }, this.containerHighlightDuration);

package/src/StageDragResize.ts

@@ -484,7 +484,7 @@ export default class StageDragResize extends EventEmitter {
   }
 
   private setGhostElChildrenId(el: Element) {
-    for (const child of el.children) {
+    for (const child of Array.from(el.children)) {
       if (child.id) {
         child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
       }

package/src/StageMask.ts

@@ -108,11 +108,16 @@ 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) => {
+
+    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+
+    const ctrl = isMac ? 'meta' : 'ctrl';
+
+    KeyController.global.keydown(ctrl, (e) => {
       e.inputEvent.preventDefault();
       this.isMultiSelectStatus = true;
     });
-    KeyController.global.keyup('shift', (e) => {
+    KeyController.global.keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
       this.isMultiSelectStatus = false;
     });
@@ -331,7 +336,9 @@ export default class StageMask extends Rule {
   private mouseUpHandler = (): void => {
     globalThis.document.removeEventListener('mouseup', this.mouseUpHandler);
     this.content.addEventListener('mousemove', this.highlightHandler);
-    this.emit('select');
+    if (!this.isMultiSelectStatus) {
+      this.emit('select');
+    }
   };
 
   private mouseWheelHandler = (event: WheelEvent) => {

package/src/StageMultiDragResize.ts

@@ -70,7 +70,6 @@ export default class StageMultiDragResize extends EventEmitter {
     });
     this.moveableForMulti?.destroy();
     this.multiMoveableHelper?.clear();
-
     this.moveableForMulti = new Moveable(
       this.container,
       this.getOptions({
@@ -128,16 +127,20 @@ export default class StageMultiDragResize extends EventEmitter {
       });
   }
 
-  public canSelect(el: HTMLElement): Boolean {
-    // 多选不可以选中magic-ui-page
+  public canSelect(el: HTMLElement, stop: () => boolean): Boolean {
+    // 多选状态下不可以选中magic-ui-page，并停止继续向上层选中
     if (el.className.includes(PAGE_CLASS)) {
       this.core.highlightedDom = undefined;
       this.core.highlightLayer.clearHighlight();
+      stop();
       return false;
     }
     const currentTargetMode = getMode(el);
     let selectedDomMode = '';
-
+    if (this.core.selectedDom?.className.includes(PAGE_CLASS)) {
+      // 先单击选中了页面(magic-ui-page)，再按住多选键多选时，任一元素均可选中
+      return true;
+    }
     if (this.targetList.length === 0 && this.core.selectedDom) {
       // 单选后添加到多选的情况
       selectedDomMode = getMode(this.core.selectedDom);
@@ -208,11 +211,12 @@ export default class StageMultiDragResize extends EventEmitter {
    * @return {MoveableOptions} moveable options参数
    */
   private getOptions(options: MoveableOptions = {}): MoveableOptions {
-    let { moveableOptions = {} } = this.core.config;
+    let { multiMoveableOptions = {} } = this.core.config;
 
-    if (typeof moveableOptions === 'function') {
-      moveableOptions = moveableOptions(this.core);
+    if (typeof multiMoveableOptions === 'function') {
+      multiMoveableOptions = multiMoveableOptions(this.core);
     }
+
     return {
       defaultGroupRotate: 0,
       defaultGroupOrigin: '50% 50%',
@@ -225,7 +229,7 @@ export default class StageMultiDragResize extends EventEmitter {
       origin: true,
       padding: { left: 0, top: 0, right: 0, bottom: 0 },
       ...options,
-      ...moveableOptions,
+      ...multiMoveableOptions,
     };
   }
 }

package/src/types.ts

@@ -39,6 +39,7 @@ export type StageCoreConfig = {
   containerHighlightClassName: string;
   containerHighlightDuration: number;
   moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
+  multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
   runtimeUrl?: string;
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
@@ -111,7 +112,6 @@ export interface RemoveData {
 export interface Runtime {
   getApp?: () => Core;
   beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
-  getSnapElements?: (el?: HTMLElement) => HTMLElement[];
   updateRootConfig?: (config: MApp) => void;
   updatePageId?: (id: Id) => void;
   select?: (id: Id) => Promise<HTMLElement> | HTMLElement;

package/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

package/{dist/types/src → types}/StageCore.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+/// <reference types="node" />
 import { EventEmitter } from 'events';
 import type { Id } from '@tmagic/schema';
 import StageDragResize from './StageDragResize';
@@ -32,6 +33,11 @@ export default class StageCore extends EventEmitter {
      * @param idOrEl 组件Dom节点的id属性，或者Dom节点
      */
     select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void>;
+    /**
+     * 多选
+     * @param domList 多选节点
+     */
+    multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void>;
     /**
      * 更新选中的节点
      * @param data 更新的数据

package/{dist/types/src → types}/StageMultiDragResize.d.ts

@@ -22,7 +22,7 @@ export default class StageMultiDragResize extends EventEmitter {
      * @param els
      */
     multiSelect(els: HTMLElement[]): void;
-    canSelect(el: HTMLElement): Boolean;
+    canSelect(el: HTMLElement, stop: () => boolean): Boolean;
     /**
      * 清除多选状态
      */

package/types/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const log: (...args: any[]) => void;
+export declare const info: (...args: any[]) => void;
+export declare const warn: (...args: any[]) => void;
+export declare const debug: (...args: any[]) => void;
+export declare const error: (...args: any[]) => void;

package/{dist/types/src → types}/types.d.ts

@@ -17,6 +17,7 @@ export declare type StageCoreConfig = {
     containerHighlightClassName: string;
     containerHighlightDuration: number;
     moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
+    multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
     /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
     runtimeUrl?: string;
     render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
@@ -78,7 +79,6 @@ export interface RemoveData {
 export interface Runtime {
     getApp?: () => Core;
     beforeSelect?: (el: HTMLElement) => Promise<boolean> | boolean;
-    getSnapElements?: (el?: HTMLElement) => HTMLElement[];
     updateRootConfig?: (config: MApp) => void;
     updatePageId?: (id: Id) => void;
     select?: (id: Id) => Promise<HTMLElement> | HTMLElement;