@tmagic/stage 1.3.6 → 1.3.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.6",
+  "version": "1.3.8",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -17,11 +17,6 @@
     "./*": "./*"
   },
   "license": "Apache-2.0",
-  "scripts": {
-    "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": ">=18"
   },
@@ -31,9 +26,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.6",
-    "@tmagic/schema": "1.3.6",
-    "@tmagic/utils": "1.3.6",
+    "@tmagic/core": "1.3.8",
+    "@tmagic/schema": "1.3.8",
+    "@tmagic/utils": "1.3.8",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
@@ -48,5 +43,10 @@
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
     "vite": "^5.0.7"
+  },
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   }
-}
+}

package/src/ActionManager.ts

@@ -57,7 +57,7 @@ const defaultContainerHighlightDuration = 800;
  */
 export default class ActionManager extends EventEmitter {
   private dr: StageDragResize;
-  private multiDr: StageMultiDragResize;
+  private multiDr?: StageMultiDragResize;
   private highlightLayer: StageHighlight;
   /** 单选、多选、高亮的容器（蒙层的content） */
   private container: HTMLElement;
@@ -81,6 +81,8 @@ export default class ActionManager extends EventEmitter {
   private canSelect: CanSelect;
   private isContainer: IsContainer;
   private getRenderDocument: GetRenderDocument;
+  private disabledMultiSelect = false;
+  private config: ActionManagerConfig;
 
   private mouseMoveHandler = throttle(async (event: MouseEvent): Promise<void> => {
     if ((event.target as HTMLDivElement)?.classList?.contains('moveable-direction')) {
@@ -99,41 +101,24 @@ export default class ActionManager extends EventEmitter {
 
   constructor(config: ActionManagerConfig) {
     super();
+    this.config = config;
     this.container = config.container;
     this.containerHighlightClassName = config.containerHighlightClassName || CONTAINER_HIGHLIGHT_CLASS_NAME;
     this.containerHighlightDuration = config.containerHighlightDuration || defaultContainerHighlightDuration;
     this.containerHighlightType = config.containerHighlightType;
+    this.disabledMultiSelect = config.disabledMultiSelect ?? false;
     this.getTargetElement = config.getTargetElement;
     this.getElementsFromPoint = config.getElementsFromPoint;
     this.canSelect = config.canSelect || ((el: HTMLElement) => !!el.id);
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
 
-    const createDrHelper = () =>
-      new DragResizeHelper({
-        container: config.container,
-        updateDragEl: config.updateDragEl,
-      });
+    this.dr = this.createDr(config);
+
+    if (!this.disabledMultiSelect) {
+      this.multiDr = this.createMultiDr(config);
+    }
 
-    this.dr = new StageDragResize({
-      container: config.container,
-      disabledDragStart: config.disabledDragStart,
-      moveableOptions: this.changeCallback(config.moveableOptions, false),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this),
-    });
-    this.multiDr = new StageMultiDragResize({
-      container: config.container,
-      moveableOptions: this.changeCallback(config.moveableOptions, true),
-      dragResizeHelper: createDrHelper(),
-      getRootContainer: config.getRootContainer,
-      getRenderDocument: config.getRenderDocument,
-      markContainerEnd: this.markContainerEnd.bind(this),
-      delayedMarkContainer: this.delayedMarkContainer.bind(this),
-    });
     this.highlightLayer = new StageHighlight({
       container: config.container,
       updateDragEl: config.updateDragEl,
@@ -142,7 +127,22 @@ export default class ActionManager extends EventEmitter {
 
     this.initMouseEvent();
     this.initKeyEvent();
-    this.initActionEvent();
+  }
+
+  public disableMultiSelect() {
+    this.disabledMultiSelect = true;
+    if (this.multiDr) {
+      this.multiDr.destroy();
+      this.multiDr = undefined;
+    }
+  }
+
+  public enableMultiSelect() {
+    this.disabledMultiSelect = false;
+
+    if (!this.multiDr) {
+      this.multiDr = this.createMultiDr(this.config);
+    }
   }
 
   /**
@@ -152,7 +152,7 @@ export default class ActionManager extends EventEmitter {
    */
   public setGuidelines(type: GuidesType, guidelines: number[]): void {
     this.dr.setGuidelines(type, guidelines);
-    this.multiDr.setGuidelines(type, guidelines);
+    this.multiDr?.setGuidelines(type, guidelines);
   }
 
   /**
@@ -160,7 +160,7 @@ export default class ActionManager extends EventEmitter {
    */
   public clearGuides(): void {
     this.dr.clearGuides();
-    this.multiDr.clearGuides();
+    this.multiDr?.clearGuides();
   }
 
   /**
@@ -170,7 +170,7 @@ export default class ActionManager extends EventEmitter {
   public updateMoveable(el?: HTMLElement): void {
     this.dr.updateMoveable(el);
     // 多选时不可配置元素，因此不存在多选元素变更，不需要传el
-    this.multiDr.updateMoveable();
+    this.multiDr?.updateMoveable();
   }
 
   /**
@@ -181,7 +181,7 @@ export default class ActionManager extends EventEmitter {
     return el.id === this.selectedEl?.id;
   }
 
-  public setSelectedEl(el: HTMLElement): void {
+  public setSelectedEl(el?: HTMLElement): void {
     this.selectedEl = el;
   }
 
@@ -197,7 +197,7 @@ export default class ActionManager extends EventEmitter {
     if (this.dr.getTarget()) {
       return this.dr.getOption(key);
     }
-    if (this.multiDr.targetList.length) {
+    if (this.multiDr?.targetList.length) {
       return this.multiDr.getOption(key);
     }
   }
@@ -254,11 +254,11 @@ export default class ActionManager extends EventEmitter {
     if (selectedEl?.className.includes(PAGE_CLASS)) {
       return true;
     }
-    return this.multiDr.canSelect(el, selectedEl);
+    return this.multiDr?.canSelect(el, selectedEl) || false;
   }
 
   public select(el: HTMLElement, event: MouseEvent | undefined): void {
-    this.selectedEl = el;
+    this.setSelectedEl(el);
     this.clearSelectStatus(SelectStatus.MULTI_SELECT);
     this.dr.select(el, event);
   }
@@ -266,7 +266,7 @@ export default class ActionManager extends EventEmitter {
   public multiSelect(idOrElList: HTMLElement[] | Id[]): void {
     this.selectedElList = idOrElList.map((idOrEl) => this.getTargetElement(idOrEl));
     this.clearSelectStatus(SelectStatus.SELECT);
-    this.multiDr.multiSelect(this.selectedElList);
+    this.multiDr?.multiSelect(this.selectedElList);
   }
 
   public getHighlightEl(): HTMLElement | undefined {
@@ -287,7 +287,7 @@ export default class ActionManager extends EventEmitter {
     }
 
     // 选中组件不高亮、多选拖拽状态不高亮
-    if (el === this.getSelectedEl() || this.multiDr.dragStatus === StageDragStatus.ING) {
+    if (el === this.getSelectedEl() || this.multiDr?.dragStatus === StageDragStatus.ING) {
       this.clearHighlight();
       return;
     }
@@ -309,7 +309,7 @@ export default class ActionManager extends EventEmitter {
    */
   public clearSelectStatus(selectType: SelectStatus): void {
     if (selectType === SelectStatus.MULTI_SELECT) {
-      this.multiDr.clearSelectStatus();
+      this.multiDr?.clearSelectStatus();
       this.selectedElList = [];
     } else {
       this.dr.clearSelectStatus();
@@ -361,10 +361,84 @@ export default class ActionManager extends EventEmitter {
     this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
     this.container.removeEventListener('wheel', this.mouseWheelHandler);
     this.dr.destroy();
-    this.multiDr.destroy();
+    this.multiDr?.destroy();
     this.highlightLayer.destroy();
   }
 
+  private createDr(config: ActionManagerConfig) {
+    const createDrHelper = () =>
+      new DragResizeHelper({
+        container: config.container,
+        updateDragEl: config.updateDragEl,
+      });
+
+    const dr = new StageDragResize({
+      container: config.container,
+      disabledDragStart: config.disabledDragStart,
+      moveableOptions: this.changeCallback(config.moveableOptions, false),
+      dragResizeHelper: createDrHelper(),
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this),
+    });
+
+    dr.on('update', (data: UpdateEventData) => {
+      // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
+      setTimeout(() => this.emit('update', data));
+    })
+      .on('sort', (data: UpdateEventData) => {
+        // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
+        setTimeout(() => this.emit('sort', data));
+      })
+      .on('select-parent', () => {
+        this.emit('select-parent');
+      })
+      .on('remove', () => {
+        const drTarget = this.dr.getTarget();
+        if (!drTarget) return;
+        const data: RemoveEventData = {
+          data: [{ el: drTarget }],
+        };
+        this.emit('remove', data);
+      })
+      .on('drag-start', (e: OnDragStart) => {
+        this.emit('drag-start', e);
+      });
+
+    return dr;
+  }
+
+  private createMultiDr(config: ActionManagerConfig) {
+    const createDrHelper = () =>
+      new DragResizeHelper({
+        container: config.container,
+        updateDragEl: config.updateDragEl,
+      });
+    const multiDr = new StageMultiDragResize({
+      container: config.container,
+      moveableOptions: this.changeCallback(config.moveableOptions, true),
+      dragResizeHelper: createDrHelper(),
+      getRootContainer: config.getRootContainer,
+      getRenderDocument: config.getRenderDocument,
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this),
+    });
+
+    multiDr
+      ?.on('update', (data: UpdateEventData) => {
+        this.emit('multi-update', data);
+      })
+      .on('change-to-select', async (id: Id) => {
+        // 如果还在多选状态，不触发切换到单选
+        if (this.isMultiSelectStatus) return false;
+        const el = this.getTargetElement(id);
+        this.emit('change-to-select', el);
+      });
+
+    return multiDr;
+  }
+
   private changeCallback(options: CustomizeMoveableOptions, isMulti: boolean): CustomizeMoveableOptions {
     // 在actionManager才能获取到各种参数，在这里传好参数有比较好的扩展性
     if (typeof options === 'function') {
@@ -399,7 +473,7 @@ export default class ActionManager extends EventEmitter {
     // 如果已有单选选中元素，不是magic-ui-page就可以加入多选列表
     if (this.selectedEl && !this.selectedEl.className.includes(PAGE_CLASS)) {
       this.selectedElList.push(this.selectedEl as HTMLElement);
-      this.selectedEl = undefined;
+      this.setSelectedEl(undefined);
     }
     // 判断元素是否已在多选列表
     const existIndex = this.selectedElList.findIndex((selectedDom) => selectedDom.id === el.id);
@@ -450,15 +524,21 @@ export default class ActionManager extends EventEmitter {
     // 多选启用状态监听
     KeyController.global.keydown(ctrl, (e) => {
       e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = true;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = true;
+      }
     });
     // ctrl+tab切到其他窗口，需要将多选状态置为false
     KeyController.global.on('blur', () => {
-      this.isMultiSelectStatus = false;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = false;
+      }
     });
     KeyController.global.keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
-      this.isMultiSelectStatus = false;
+      if (!this.disabledMultiSelect) {
+        this.isMultiSelectStatus = false;
+      }
     });
 
     // alt健监听，用于启用拖拽组件加入容器状态
@@ -474,46 +554,6 @@ export default class ActionManager extends EventEmitter {
     });
   }
 
-  /**
-   * 处理单选、多选抛出来的事件
-   */
-  private initActionEvent(): void {
-    this.dr
-      .on('update', (data: UpdateEventData) => {
-        // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
-        setTimeout(() => this.emit('update', data));
-      })
-      .on('sort', (data: UpdateEventData) => {
-        // 点击组件并立即拖动的场景，要保证select先被触发，延迟update通知
-        setTimeout(() => this.emit('sort', data));
-      })
-      .on('select-parent', () => {
-        this.emit('select-parent');
-      })
-      .on('remove', () => {
-        const drTarget = this.dr.getTarget();
-        if (!drTarget) return;
-        const data: RemoveEventData = {
-          data: [{ el: drTarget }],
-        };
-        this.emit('remove', data);
-      })
-      .on('drag-start', (e: OnDragStart) => {
-        this.emit('drag-start', e);
-      });
-
-    this.multiDr
-      .on('update', (data: UpdateEventData) => {
-        this.emit('multi-update', data);
-      })
-      .on('change-to-select', async (id: Id) => {
-        // 如果还在多选状态，不触发切换到单选
-        if (this.isMultiSelectStatus) return false;
-        const el = this.getTargetElement(id);
-        this.emit('change-to-select', el);
-      });
-  }
-
   /**
    * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
    */

package/src/MoveableActionsAble.ts

@@ -1,7 +1,7 @@
 import { MoveableManagerInterface, Renderer } from 'moveable';
 
+import { AbleActionEventType } from './const';
 import ableCss from './moveable-able.css?raw';
-import { AbleActionEventType } from './types';
 
 export default (handler: (type: AbleActionEventType) => void) => ({
   name: 'actions',

package/src/MoveableOptionsManager.ts

@@ -21,9 +21,9 @@ import EventEmitter from 'events';
 import { merge } from 'lodash-es';
 import type { ElementGuidelineValueOption, MoveableOptions, MoveableRefType } from 'moveable';
 
-import { GuidesType, Mode } from './const';
+import { AbleActionEventType, GuidesType, Mode } from './const';
 import MoveableActionsAble from './MoveableActionsAble';
-import { AbleActionEventType, GetRootContainer, MoveableOptionsManagerConfig } from './types';
+import type { GetRootContainer, MoveableOptionsManagerConfig } from './types';
 import { getOffset } from './util';
 
 /**

package/src/Rule.ts

@@ -1,8 +1,9 @@
 import EventEmitter from 'events';
 
-import Guides, { GuidesEvents } from '@scena/guides';
+import Guides, { type GuidesEvents, type GuidesOptions } from '@scena/guides';
 
 import { GuidesType } from './const';
+import type { RuleOptions } from './types';
 
 export default class Rule extends EventEmitter {
   public hGuides: Guides;
@@ -13,10 +14,13 @@ export default class Rule extends EventEmitter {
   private container: HTMLDivElement;
   private containerResizeObserver: ResizeObserver;
   private isShowGuides = true;
+  private guidesOptions?: Partial<GuidesOptions>;
 
-  constructor(container: HTMLDivElement) {
+  constructor(container: HTMLDivElement, options?: RuleOptions) {
     super();
 
+    this.guidesOptions = options?.guidesOptions || {};
+
     this.container = container;
     this.hGuides = this.createGuides(GuidesType.HORIZONTAL, this.horizontalGuidelines);
     this.vGuides = this.createGuides(GuidesType.VERTICAL, this.verticalGuidelines);
@@ -136,6 +140,7 @@ export default class Rule extends EventEmitter {
       textColor: '#000',
       style: this.getGuidesStyle(type),
       showGuides: this.isShowGuides,
+      ...this.guidesOptions,
     });
 
     const changEventHandler = {

package/src/StageCore.ts

@@ -69,7 +69,9 @@ export default class StageCore extends EventEmitter {
         return null;
       },
     });
-    this.mask = new StageMask();
+    this.mask = new StageMask({
+      guidesOptions: config.guidesOptions,
+    });
     this.actionManager = new ActionManager(this.getActionManagerConfig(config));
 
     this.initRenderEvent();
@@ -222,6 +224,14 @@ export default class StageCore extends EventEmitter {
     return this.actionManager.getDragStatus();
   }
 
+  public disableMultiSelect() {
+    this.actionManager.disableMultiSelect();
+  }
+
+  public enableMultiSelect() {
+    this.actionManager.enableMultiSelect();
+  }
+
   /**
    * 销毁实例
    */
@@ -260,6 +270,7 @@ export default class StageCore extends EventEmitter {
       moveableOptions: config.moveableOptions,
       container: this.mask.content,
       disabledDragStart: config.disabledDragStart,
+      disabledMultiSelect: config.disabledMultiSelect,
       canSelect: config.canSelect,
       isContainer: config.isContainer,
       updateDragEl: config.updateDragEl,
@@ -279,6 +290,8 @@ export default class StageCore extends EventEmitter {
     this.renderer.on('page-el-update', (el: HTMLElement) => {
       this.mask?.observe(el);
       this.observePageResize(el);
+
+      this.emit('page-el-update', el);
     });
   }
 

package/src/StageMask.ts

@@ -20,6 +20,7 @@ import { createDiv, getDocument, injectStyle } from '@tmagic/utils';
 
 import { Mode, ZIndex } from './const';
 import Rule from './Rule';
+import type { RuleOptions } from './types';
 import { getScrollParent, isFixedParent } from './util';
 
 const wrapperClassName = 'editor-mask-wrapper';
@@ -80,9 +81,9 @@ export default class StageMask extends Rule {
   private intersectionObserver: IntersectionObserver | null = null;
   private wrapperResizeObserver: ResizeObserver | null = null;
 
-  constructor() {
+  constructor(options?: RuleOptions) {
     const wrapper = createWrapper();
-    super(wrapper);
+    super(wrapper, options);
 
     this.wrapper = wrapper;
 

package/src/StageRender.ts

@@ -156,12 +156,6 @@ export default class StageRender extends EventEmitter {
         x = x - rect.left;
         y = y - rect.top;
       }
-    } else if (this.nativeContainer) {
-      const rect = this.nativeContainer.getClientRects()[0];
-      if (rect) {
-        x = x - rect.left;
-        y = y - rect.top;
-      }
     }
 
     return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom) as HTMLElement[];

package/src/const.ts

@@ -73,3 +73,8 @@ export enum Mode {
 
 /** 选中节点的class name */
 export const SELECTED_CLASS = 'tmagic-stage-selected-area';
+
+export enum AbleActionEventType {
+  SELECT_PARENT = 'select-parent',
+  REMOVE = 'remove',
+}

package/src/index.ts

@@ -19,6 +19,7 @@
 import StageCore from './StageCore';
 
 export type { MoveableOptions, OnDragStart } from 'moveable';
+export type { GuidesOptions } from '@scena/guides';
 export { default as StageRender } from './StageRender';
 export { default as StageMask } from './StageMask';
 export { default as StageDragResize } from './StageDragResize';

package/src/types.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import type { GuidesOptions } from '@scena/guides';
 import type { MoveableOptions } from 'moveable';
 
 import Core from '@tmagic/core';
@@ -77,6 +78,8 @@ export interface StageCoreConfig {
   updateDragEl?: UpdateDragEl;
   disabledDragStart?: boolean;
   renderType?: RenderType;
+  guidesOptions?: Partial<GuidesOptions>;
+  disabledMultiSelect?: boolean;
 }
 
 export interface ActionManagerConfig {
@@ -86,6 +89,7 @@ export interface ActionManagerConfig {
   containerHighlightType?: ContainerHighlightType;
   moveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
+  disabledMultiSelect?: boolean;
   canSelect?: CanSelect;
   isContainer: IsContainer;
   getRootContainer: GetRootContainer;
@@ -264,7 +268,6 @@ export interface TargetShadowConfig {
   idPrefix?: string;
 }
 
-export enum AbleActionEventType {
-  SELECT_PARENT = 'select-parent',
-  REMOVE = 'remove',
+export interface RuleOptions {
+  guidesOptions?: Partial<GuidesOptions>;
 }

package/types/ActionManager.d.ts

@@ -11,7 +11,7 @@ import { ActionManagerConfig, SelectStatus, StageDragStatus } from './types';
  */
 export default class ActionManager extends EventEmitter {
     private dr;
-    private multiDr;
+    private multiDr?;
     private highlightLayer;
     /** 单选、多选、高亮的容器（蒙层的content） */
     private container;
@@ -35,8 +35,12 @@ export default class ActionManager extends EventEmitter {
     private canSelect;
     private isContainer;
     private getRenderDocument;
+    private disabledMultiSelect;
+    private config;
     private mouseMoveHandler;
     constructor(config: ActionManagerConfig);
+    disableMultiSelect(): void;
+    enableMultiSelect(): void;
     /**
      * 设置水平/垂直参考线
      * @param type 参考线类型
@@ -56,7 +60,7 @@ export default class ActionManager extends EventEmitter {
      * 判断是否单选选中的元素
      */
     isSelectedEl(el: HTMLElement): boolean;
-    setSelectedEl(el: HTMLElement): void;
+    setSelectedEl(el?: HTMLElement): void;
     getSelectedEl(): HTMLElement | undefined;
     getSelectedElList(): HTMLElement[];
     getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
@@ -105,6 +109,8 @@ export default class ActionManager extends EventEmitter {
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getDragStatus(): StageDragStatus;
     destroy(): void;
+    private createDr;
+    private createMultiDr;
     private changeCallback;
     /**
      * 在执行多选逻辑前，先准备好多选选中元素
@@ -126,10 +132,6 @@ export default class ActionManager extends EventEmitter {
      * 初始化键盘事件监听
      */
     private initKeyEvent;
-    /**
-     * 处理单选、多选抛出来的事件
-     */
-    private initActionEvent;
     /**
      * 在down事件中集中cpu处理画布中选中操作渲染，在up事件中再通知外面的编辑器更新
      */

package/types/MoveableActionsAble.d.ts

@@ -1,5 +1,5 @@
 import { MoveableManagerInterface, Renderer } from 'moveable';
-import { AbleActionEventType } from './types';
+import { AbleActionEventType } from './const';
 declare const _default: (handler: (type: AbleActionEventType) => void) => {
     name: string;
     props: never[];

package/types/MoveableOptionsManager.d.ts

@@ -2,7 +2,7 @@
 import EventEmitter from 'events';
 import type { MoveableOptions } from 'moveable';
 import { GuidesType, Mode } from './const';
-import { MoveableOptionsManagerConfig } from './types';
+import type { MoveableOptionsManagerConfig } from './types';
 /**
  * 单选和多选的父类，用于管理moveableOptions
  * @extends EventEmitter

package/types/Rule.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="node" />
 import EventEmitter from 'events';
 import Guides from '@scena/guides';
+import type { RuleOptions } from './types';
 export default class Rule extends EventEmitter {
     hGuides: Guides;
     vGuides: Guides;
@@ -9,7 +10,8 @@ export default class Rule extends EventEmitter {
     private container;
     private containerResizeObserver;
     private isShowGuides;
-    constructor(container: HTMLDivElement);
+    private guidesOptions?;
+    constructor(container: HTMLDivElement, options?: RuleOptions);
     /**
      * 是否显示辅助线
      * @param isShowGuides 是否显示

package/types/StageCore.d.ts

@@ -73,6 +73,8 @@ export default class StageCore extends EventEmitter {
     delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     getMoveableOption<K extends keyof MoveableOptions>(key: K): MoveableOptions[K] | undefined;
     getDragStatus(): import("./types").StageDragStatus;
+    disableMultiSelect(): void;
+    enableMultiSelect(): void;
     /**
      * 销毁实例
      */