@tmagic/stage 1.3.5 → 1.3.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.5",
+  "version": "1.3.7",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -17,13 +17,8 @@
     "./*": "./*"
   },
   "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": ">=14"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",
@@ -31,9 +26,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.29.2",
-    "@tmagic/core": "1.3.5",
-    "@tmagic/schema": "1.3.5",
-    "@tmagic/utils": "1.3.5",
+    "@tmagic/core": "1.3.7",
+    "@tmagic/schema": "1.3.7",
+    "@tmagic/utils": "1.3.7",
     "events": "^3.3.0",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
@@ -43,10 +38,15 @@
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^15.12.4",
+    "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.4.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事件中再通知外面的编辑器更新
    */
@@ -561,13 +601,13 @@ export default class ActionManager extends EventEmitter {
   /**
    * 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
    */
-  private mouseUpHandler = (): void => {
+  private mouseUpHandler = (event: MouseEvent): void => {
     getDocument().removeEventListener('mouseup', this.mouseUpHandler);
     this.container.addEventListener('mousemove', this.mouseMoveHandler);
     if (this.isMultiSelectStatus) {
-      this.emit('multi-select', this.selectedElList);
+      this.emit('multi-select', this.selectedElList, event);
     } else {
-      this.emit('select', this.selectedEl);
+      this.emit('select', this.selectedEl, event);
     }
   };
 

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

@@ -61,6 +61,7 @@ export default class StageCore extends EventEmitter {
     this.renderer = new StageRender({
       runtimeUrl: config.runtimeUrl,
       zoom: config.zoom,
+      renderType: config.renderType,
       customizedRender: async (): Promise<HTMLElement | null> => {
         if (this?.customizedRender) {
           return await this.customizedRender(this);
@@ -68,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();
@@ -221,6 +224,14 @@ export default class StageCore extends EventEmitter {
     return this.actionManager.getDragStatus();
   }
 
+  public disableMultiSelect() {
+    this.actionManager.disableMultiSelect();
+  }
+
+  public enableMultiSelect() {
+    this.actionManager.enableMultiSelect();
+  }
+
   /**
    * 销毁实例
    */
@@ -259,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,
@@ -278,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);
     });
   }
 
@@ -307,14 +321,14 @@ export default class StageCore extends EventEmitter {
       .on('before-select', (idOrEl: Id | HTMLElement, event?: MouseEvent) => {
         this.select(idOrEl, event);
       })
-      .on('select', (selectedEl: HTMLElement) => {
-        this.emit('select', selectedEl);
+      .on('select', (selectedEl: HTMLElement, event: MouseEvent) => {
+        this.emit('select', selectedEl, event);
       })
       .on('before-multi-select', (idOrElList: HTMLElement[] | Id[]) => {
         this.multiSelect(idOrElList);
       })
-      .on('multi-select', (selectedElList: HTMLElement[]) => {
-        this.emit('multi-select', selectedElList);
+      .on('multi-select', (selectedElList: HTMLElement[], event: MouseEvent) => {
+        this.emit('multi-select', selectedElList, event);
       });
   }
 

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;