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

package/package.json

@@ -1,22 +1,24 @@
 {
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0-beta.6",
   "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.3",
-    "@tmagic/schema": "1.1.0-beta.3",
-    "@tmagic/utils": "1.1.0-beta.3",
+    "@tmagic/core": "1.1.0-beta.6",
+    "@tmagic/schema": "1.1.0-beta.6",
+    "@tmagic/utils": "1.1.0-beta.6",
     "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

@@ -99,7 +99,7 @@ export default class StageCore extends EventEmitter {
         this.emit('changeGuides', data);
       })
       .on('highlight', async (event: MouseEvent) => {
-        const el = await this.getElementFromPoint(event, 'mousemove');
+        const el = await this.getElementFromPoint(event);
         if (!el) return;
         await this.highlight(el);
         if (this.highlightedDom === this.selectedDom) {
@@ -114,9 +114,6 @@ export default class StageCore extends EventEmitter {
       .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);
@@ -130,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
@@ -166,26 +162,35 @@ export default class StageCore extends EventEmitter {
     return doc?.elementsFromPoint(x / zoom, y / zoom) as HTMLElement[];
   }
 
-  public async getElementFromPoint(event: MouseEvent, type?: String) {
+  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 === type) {
-          return el;
-        }
         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);
+    }
+    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;
@@ -199,7 +204,6 @@ 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) {
@@ -216,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 更新的数据

package/src/StageDragResize.ts

@@ -28,8 +28,8 @@ 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, getTargetElStyle } from './util';
+import type { StageDragResizeConfig } from './types';
+import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util';
 
 /** 拖动状态 */
 enum ActionStatus {
@@ -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}`;
       }
@@ -558,7 +558,7 @@ export default class StageDragResize extends EventEmitter {
         top: 0,
         // 设置0的话无法移动到left为0，所以只能设置为-1
         left: -1,
-        right: this.container.clientWidth,
+        right: this.container.clientWidth - 1,
         bottom: this.container.clientHeight,
         ...(moveableOptions.bounds || {}),
       },
@@ -567,73 +567,3 @@ export default class StageDragResize extends EventEmitter {
     };
   }
 }
-
-/**
- * 下移组件位置
- * @param {number} deltaTop 偏移量
- * @param {Object} detail 当前选中的组件配置
- */
-export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
-  let swapIndex = 0;
-  let addUpH = target.clientHeight;
-  const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
-  );
-  const index = brothers.indexOf(target);
-  // 往下移动
-  const downEls = brothers.slice(index + 1) as HTMLElement[];
-
-  for (let i = 0; i < downEls.length; i++) {
-    const ele = downEls[i];
-    // 是 fixed 不做处理
-    if (ele.style?.position === 'fixed') {
-      continue;
-    }
-    addUpH += ele.clientHeight / 2;
-    if (deltaTop <= addUpH) {
-      break;
-    }
-    addUpH += ele.clientHeight / 2;
-    swapIndex = i;
-  }
-  return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
-  };
-};
-
-/**
- * 上移组件位置
- * @param {Array} brothers 处于同一容器下的所有子组件配置
- * @param {number} index 当前组件所处的位置
- * @param {number} deltaTop 偏移量
- * @param {Object} detail 当前选中的组件配置
- */
-export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
-  const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
-  );
-  const index = brothers.indexOf(target);
-  // 往上移动
-  const upEls = brothers.slice(0, index) as HTMLElement[];
-
-  let addUpH = target.clientHeight;
-  let swapIndex = upEls.length - 1;
-
-  for (let i = upEls.length - 1; i >= 0; i--) {
-    const ele = upEls[i];
-    if (!ele) continue;
-    // 是 fixed 不做处理
-    if (ele.style.position === 'fixed') continue;
-
-    addUpH += ele.clientHeight / 2;
-    if (-deltaTop <= addUpH) break;
-    addUpH += ele.clientHeight / 2;
-
-    swapIndex = i;
-  }
-  return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
-  };
-};

package/src/StageHighlight.ts

@@ -57,7 +57,7 @@ export default class StageHighlight extends EventEmitter {
       target: this.calibrationTarget.update(el, HIGHLIGHT_EL_ID_PREFIX),
       origin: false,
       rootContainer: this.core.container,
-      zoom: 1,
+      zoom: 2,
     });
   }
 

package/src/StageMask.ts

@@ -83,7 +83,7 @@ export default class StageMask extends Rule {
   public maxScrollTop = 0;
   public maxScrollLeft = 0;
   public intersectionObserver: IntersectionObserver | null = null;
-  public shiftKeyDown: Boolean = false;
+  public isMultiSelectStatus: Boolean = false;
 
   private mode: Mode = Mode.ABSOLUTE;
   private pageResizeObserver: ResizeObserver | null = null;
@@ -110,11 +110,11 @@ export default class StageMask extends Rule {
     this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
     KeyController.global.keydown('shift', (e) => {
       e.inputEvent.preventDefault();
-      this.shiftKeyDown = true;
+      this.isMultiSelectStatus = true;
     });
     KeyController.global.keyup('shift', (e) => {
       e.inputEvent.preventDefault();
-      this.shiftKeyDown = false;
+      this.isMultiSelectStatus = false;
     });
   }
 
@@ -308,7 +308,7 @@ export default class StageMask extends Rule {
     if (event.button !== MouseButton.LEFT && event.button !== MouseButton.RIGHT) return;
 
     // 如果单击多选选中区域，则不需要再触发选中了，而可能是拖动行为
-    if (!this.shiftKeyDown && (event.target as HTMLDivElement).className.indexOf('moveable-area') !== -1) {
+    if (!this.isMultiSelectStatus && (event.target as HTMLDivElement).className.indexOf('moveable-area') !== -1) {
       return;
     }
     // 点击对象如果是边框锚点，则可能是resize
@@ -319,19 +319,21 @@ export default class StageMask extends Rule {
     this.content.removeEventListener('mousemove', this.highlightHandler);
 
     // 判断触发多选还是单选
-    if (this.shiftKeyDown) {
+    if (this.isMultiSelectStatus) {
       this.emit('beforeMultiSelect', event);
     } else {
       this.emit('beforeSelect', event);
-      // 如果是右键点击，这里的mouseup事件监听没有效果
-      globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
     }
+    // 如果是右键点击，这里的mouseup事件监听没有效果
+    globalThis.document.addEventListener('mouseup', this.mouseUpHandler);
   };
 
   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

@@ -18,14 +18,15 @@
 
 import { EventEmitter } from 'events';
 
+import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
-import { DRAG_EL_ID_PREFIX } from './const';
+import { DRAG_EL_ID_PREFIX, PAGE_CLASS } from './const';
 import StageCore from './StageCore';
 import StageMask from './StageMask';
 import { StageDragResizeConfig } from './types';
-import { calcValueByFontsize, getTargetElStyle } from './util';
+import { calcValueByFontsize, getMode, getTargetElStyle } from './util';
 export default class StageMultiDragResize extends EventEmitter {
   public core: StageCore;
   public mask: StageMask;
@@ -69,20 +70,12 @@ export default class StageMultiDragResize extends EventEmitter {
     });
     this.moveableForMulti?.destroy();
     this.multiMoveableHelper?.clear();
-
-    this.moveableForMulti = new Moveable(this.container, {
-      target: this.dragElList,
-      defaultGroupRotate: 0,
-      defaultGroupOrigin: '50% 50%',
-      draggable: true,
-      resizable: true,
-      throttleDrag: 0,
-      startDragRotate: 0,
-      throttleDragRotate: 0,
-      zoom: 1,
-      origin: true,
-      padding: { left: 0, top: 0, right: 0, bottom: 0 },
-    });
+    this.moveableForMulti = new Moveable(
+      this.container,
+      this.getOptions({
+        target: this.dragElList,
+      }),
+    );
     this.multiMoveableHelper = MoveableHelper.create({
       useBeforeRender: true,
       useRender: false,
@@ -134,6 +127,30 @@ export default class StageMultiDragResize extends EventEmitter {
       });
   }
 
+  public canSelect(el: HTMLElement): Boolean {
+    // 多选不可以选中magic-ui-page
+    if (el.className.includes(PAGE_CLASS)) {
+      this.core.highlightedDom = undefined;
+      this.core.highlightLayer.clearHighlight();
+      return false;
+    }
+    const currentTargetMode = getMode(el);
+    let selectedDomMode = '';
+
+    if (this.targetList.length === 0 && this.core.selectedDom) {
+      // 单选后添加到多选的情况
+      selectedDomMode = getMode(this.core.selectedDom);
+    } else if (this.targetList.length > 0) {
+      // 已加入多选列表的布局模式是一样的，取第一个判断
+      selectedDomMode = getMode(this.targetList[0]);
+    }
+    // 定位模式不同，不可混选
+    if (currentTargetMode !== selectedDomMode) {
+      return false;
+    }
+    return true;
+  }
+
   /**
    * 清除多选状态
    */
@@ -142,6 +159,7 @@ export default class StageMultiDragResize extends EventEmitter {
     this.destroyDragElList();
     this.moveableForMulti.target = null;
     this.moveableForMulti.updateTarget();
+    this.targetList = [];
   }
 
   /**
@@ -182,4 +200,32 @@ export default class StageMultiDragResize extends EventEmitter {
       });
     });
   }
+
+  /**
+   * 获取moveable options参数
+   * @param {MoveableOptions} options
+   * @return {MoveableOptions} moveable options参数
+   */
+  private getOptions(options: MoveableOptions = {}): MoveableOptions {
+    let { multiMoveableOptions = {} } = this.core.config;
+
+    if (typeof multiMoveableOptions === 'function') {
+      multiMoveableOptions = multiMoveableOptions(this.core);
+    }
+
+    return {
+      defaultGroupRotate: 0,
+      defaultGroupOrigin: '50% 50%',
+      draggable: true,
+      resizable: true,
+      throttleDrag: 0,
+      startDragRotate: 0,
+      throttleDragRotate: 0,
+      zoom: 1,
+      origin: true,
+      padding: { left: 0, top: 0, right: 0, bottom: 0 },
+      ...options,
+      ...multiMoveableOptions,
+    };
+  }
 }

package/src/StageRender.ts

@@ -72,20 +72,22 @@ export default class StageRender extends EventEmitter {
    * @param el 将页面挂载到该Dom节点上
    */
   public async mount(el: HTMLDivElement) {
-    if (this.iframe) {
-      if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
-        // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
-        let html = await fetch(this.runtimeUrl).then((res) => res.text());
-        // 使用base, 解决相对路径或绝对路径的问题
-        const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
-        html = html.replace('<head>', `<head>\n<base href="${base}">`);
-        this.iframe.srcdoc = html;
-      }
-
-      el.appendChild<HTMLIFrameElement>(this.iframe);
-    } else {
+    if (!this.iframe) {
       throw Error('mount 失败');
     }
+
+    if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
+      // 不同域，使用srcdoc发起异步请求，需要目标地址支持跨域
+      let html = await fetch(this.runtimeUrl).then((res) => res.text());
+      // 使用base, 解决相对路径或绝对路径的问题
+      const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
+      html = html.replace('<head>', `<head>\n<base href="${base}">`);
+      this.iframe.srcdoc = html;
+    }
+
+    el.appendChild<HTMLIFrameElement>(this.iframe);
+
+    this.postTmagicRuntimeReady();
   }
 
   public getRuntime = (): Promise<Runtime> => {
@@ -111,26 +113,34 @@ export default class StageRender extends EventEmitter {
   }
 
   private loadHandler = async () => {
-    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+    if (!this.contentWindow?.magic) {
+      this.postTmagicRuntimeReady();
+    }
 
-    this.contentWindow.magic = this.getMagicApi();
+    if (!this.contentWindow) return;
 
     if (this.render) {
       const el = await this.render(this.core);
       if (el) {
-        this.iframe?.contentDocument?.body?.appendChild(el);
+        this.contentWindow.document?.body?.appendChild(el);
       }
     }
 
     this.emit('onload');
 
+    injectStyle(this.contentWindow.document, style);
+  };
+
+  private postTmagicRuntimeReady() {
+    this.contentWindow = this.iframe?.contentWindow as RuntimeWindow;
+
+    this.contentWindow.magic = this.getMagicApi();
+
     this.contentWindow.postMessage(
       {
         tmagicRuntimeReady: true,
       },
       '*',
     );
-
-    injectStyle(this.contentWindow.document, style);
-  };
+  }
 }

package/src/TargetCalibrate.ts

@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import { Mode } from './const';
+import { Mode, ZIndex } from './const';
 import StageCore from './StageCore';
 import StageDragResize from './StageDragResize';
 import StageMask from './StageMask';
@@ -57,6 +57,7 @@ export default class TargetCalibrate extends EventEmitter {
       top: ${top}px;
       width: ${el.clientWidth}px;
       height: ${el.clientHeight}px;
+      z-index: ${ZIndex.DRAG_EL};
     `;
 
     this.operationEl.id = `${prefix}${el.id}`;

package/src/style.css

@@ -7,4 +7,5 @@
   left: 0;
   background-color: #000;
   opacity: .1;
+  pointer-events: none;
 }

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/src/util.ts

@@ -17,8 +17,8 @@
  */
 import { removeClassName } from '@tmagic/utils';
 
-import { Mode, SELECTED_CLASS, ZIndex } from './const';
-import type { Offset } from './types';
+import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
+import type { Offset, SortEventData } from './types';
 
 const getParents = (el: Element, relative: Element) => {
   let cur: Element | null = el.parentElement;
@@ -159,3 +159,73 @@ export const calcValueByFontsize = (doc: Document, value: number) => {
 
   return value;
 };
+
+/**
+ * 下移组件位置
+ * @param {number} deltaTop 偏移量
+ * @param {Object} detail 当前选中的组件配置
+ */
+export const down = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
+  let swapIndex = 0;
+  let addUpH = target.clientHeight;
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+  );
+  const index = brothers.indexOf(target);
+  // 往下移动
+  const downEls = brothers.slice(index + 1) as HTMLElement[];
+
+  for (let i = 0; i < downEls.length; i++) {
+    const ele = downEls[i];
+    // 是 fixed 不做处理
+    if (ele.style?.position === 'fixed') {
+      continue;
+    }
+    addUpH += ele.clientHeight / 2;
+    if (deltaTop <= addUpH) {
+      break;
+    }
+    addUpH += ele.clientHeight / 2;
+    swapIndex = i;
+  }
+  return {
+    src: target.id,
+    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
+  };
+};
+
+/**
+ * 上移组件位置
+ * @param {Array} brothers 处于同一容器下的所有子组件配置
+ * @param {number} index 当前组件所处的位置
+ * @param {number} deltaTop 偏移量
+ * @param {Object} detail 当前选中的组件配置
+ */
+export const up = (deltaTop: number, target: HTMLElement | SVGElement): SortEventData | void => {
+  const brothers = Array.from(target.parentNode?.children || []).filter(
+    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+  );
+  const index = brothers.indexOf(target);
+  // 往上移动
+  const upEls = brothers.slice(0, index) as HTMLElement[];
+
+  let addUpH = target.clientHeight;
+  let swapIndex = upEls.length - 1;
+
+  for (let i = upEls.length - 1; i >= 0; i--) {
+    const ele = upEls[i];
+    if (!ele) continue;
+    // 是 fixed 不做处理
+    if (ele.style.position === 'fixed') continue;
+
+    addUpH += ele.clientHeight / 2;
+    if (-deltaTop <= addUpH) break;
+    addUpH += ele.clientHeight / 2;
+
+    swapIndex = i;
+  }
+  return {
+    src: target.id,
+    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
+  };
+};

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';
@@ -25,12 +26,18 @@ export default class StageCore extends EventEmitter {
     private canSelect;
     constructor(config: StageCoreConfig);
     getElementsFromPoint(event: MouseEvent): HTMLElement[];
-    getElementFromPoint(event: MouseEvent, type?: String): Promise<HTMLElement | undefined>;
+    getElementFromPoint(event: MouseEvent): Promise<HTMLElement | undefined>;
+    isElCanSelect(el: HTMLElement, event: MouseEvent, stop: () => boolean): Promise<Boolean>;
     /**
      * 选中组件
      * @param idOrEl 组件Dom节点的id属性，或者Dom节点
      */
     select(idOrEl: Id | HTMLElement, event?: MouseEvent): Promise<void>;
+    /**
+     * 多选
+     * @param domList 多选节点
+     */
+    multiSelect(idOrElList: HTMLElement[] | Id[]): Promise<void>;
     /**
      * 更新选中的节点
      * @param data 更新的数据