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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.8",
+  "version": "1.1.0-beta.9",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.1.0-beta.8",
-    "@tmagic/schema": "1.1.0-beta.8",
-    "@tmagic/utils": "1.1.0-beta.8",
+    "@tmagic/core": "1.1.0-beta.9",
+    "@tmagic/schema": "1.1.0-beta.9",
+    "@tmagic/utils": "1.1.0-beta.9",
     "events": "^3.3.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",

package/src/StageCore.ts

@@ -21,7 +21,7 @@ import { EventEmitter } from 'events';
 import type { Id } from '@tmagic/schema';
 import { addClassName } from '@tmagic/utils';
 
-import { DEFAULT_ZOOM, GHOST_EL_ID_PREFIX, PAGE_CLASS } 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';
@@ -29,12 +29,14 @@ import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
 import {
   CanSelect,
+  ContainerHighlightType,
   GuidesEventData,
   IsContainer,
   RemoveData,
   Runtime,
   SortEventData,
   StageCoreConfig,
+  StageDragStatus,
   UpdateData,
   UpdateEventData,
 } from './types';
@@ -56,6 +58,7 @@ export default class StageCore extends EventEmitter {
   public zoom = DEFAULT_ZOOM;
   public containerHighlightClassName: string;
   public containerHighlightDuration: number;
+  public containerHighlightType?: ContainerHighlightType;
   public isContainer: IsContainer;
 
   private canSelect: CanSelect;
@@ -68,8 +71,9 @@ 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;
-    this.containerHighlightDuration = config.containerHighlightDuration;
+    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 });
@@ -101,6 +105,8 @@ export default class StageCore extends EventEmitter {
       .on('highlight', async (event: MouseEvent) => {
         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();
@@ -139,9 +145,15 @@ export default class StageCore extends EventEmitter {
         setTimeout(() => this.emit('sort', data));
       });
 
-    this.multiDr.on('update', (data: UpdateEventData) => {
-      setTimeout(() => this.emit('update', 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 getElementsFromPoint(event: MouseEvent) {

package/src/StageDragResize.ts

@@ -19,6 +19,7 @@
 /* eslint-disable no-param-reassign */
 import { EventEmitter } from 'events';
 
+import KeyController from 'keycon';
 import type { MoveableOptions } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
@@ -29,18 +30,9 @@ import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, Mode, ZIndex } from
 import StageCore from './StageCore';
 import StageMask from './StageMask';
 import type { StageDragResizeConfig } from './types';
+import { ContainerHighlightType, StageDragStatus } from './types';
 import { calcValueByFontsize, down, getAbsolutePosition, getMode, getOffset, getTargetElStyle, up } from './util';
 
-/** 拖动状态 */
-enum ActionStatus {
-  /** 开始拖动 */
-  START = 'start',
-  /** 拖动中 */
-  ING = 'ing',
-  /** 拖动结束 */
-  END = 'end',
-}
-
 /**
  * 选中框
  */
@@ -66,10 +58,11 @@ export default class StageDragResize extends EventEmitter {
 
   private moveableOptions: MoveableOptions = {};
   /** 拖动状态 */
-  private dragStatus: ActionStatus = ActionStatus.END;
+  private dragStatus: StageDragStatus = StageDragStatus.END;
   /** 流式布局下，目标节点的镜像节点 */
   private ghostEl: HTMLElement | undefined;
   private moveableHelper?: MoveableHelper;
+  private isContainerHighlight: Boolean = false;
 
   constructor(config: StageDragResizeConfig) {
     super();
@@ -77,6 +70,20 @@ export default class StageDragResize extends EventEmitter {
     this.core = config.core;
     this.container = config.container;
     this.mask = config.mask;
+
+    KeyController.global.keydown('alt', (e) => {
+      e.inputEvent.preventDefault();
+      this.isContainerHighlight = true;
+    });
+    KeyController.global.keyup('alt', (e) => {
+      e.inputEvent.preventDefault();
+
+      const doc = this.core.renderer.contentWindow?.document;
+      if (doc && this.canContainerHighlight()) {
+        removeClassNameByClassName(doc, this.core.containerHighlightClassName);
+      }
+      this.isContainerHighlight = false;
+    });
   }
 
   /**
@@ -165,7 +172,7 @@ export default class StageDragResize extends EventEmitter {
     this.moveable?.destroy();
     this.destroyGhostEl();
     this.destroyDragEl();
-    this.dragStatus = ActionStatus.END;
+    this.dragStatus = StageDragStatus.END;
     this.removeAllListeners();
   }
 
@@ -243,7 +250,7 @@ export default class StageDragResize extends EventEmitter {
       .on('resizeStart', (e) => {
         if (!this.target) return;
 
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onResizeStart(e);
 
         frame.top = this.target.offsetTop;
@@ -254,7 +261,7 @@ export default class StageDragResize extends EventEmitter {
         if (!this.moveable || !this.target || !this.dragEl) return;
 
         const { beforeTranslate } = drag;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.ING;
 
         this.moveableHelper?.onResize(e);
 
@@ -270,7 +277,7 @@ export default class StageDragResize extends EventEmitter {
         this.target.style.height = `${height}px`;
       })
       .on('resizeEnd', () => {
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         this.update(true);
       });
   }
@@ -292,7 +299,7 @@ export default class StageDragResize extends EventEmitter {
       .on('dragStart', (e) => {
         if (!this.target) throw new Error('未选中组件');
 
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
 
         this.moveableHelper?.onDragStart(e);
 
@@ -311,9 +318,11 @@ export default class StageDragResize extends EventEmitter {
           timeout = undefined;
         }
 
-        timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        if (this.canContainerHighlight()) {
+          timeout = this.core.getAddContainerHighlightClassNameTimeout(e.inputEvent, [this.target]);
+        }
 
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.ING;
 
         // 流式布局
         if (this.ghostEl) {
@@ -334,12 +343,12 @@ export default class StageDragResize extends EventEmitter {
 
         let parentEl: HTMLElement | null = null;
 
-        if (doc) {
+        if (doc && this.canContainerHighlight()) {
           parentEl = removeClassNameByClassName(doc, this.core.containerHighlightClassName);
         }
 
         // 点击不拖动时会触发dragStart和dragEnd，但是不会有drag事件
-        if (this.dragStatus === ActionStatus.ING) {
+        if (this.dragStatus === StageDragStatus.ING) {
           if (parentEl) {
             this.update(false, parentEl);
           } else {
@@ -353,7 +362,7 @@ export default class StageDragResize extends EventEmitter {
           }
         }
 
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         this.destroyGhostEl();
       });
   }
@@ -363,18 +372,18 @@ export default class StageDragResize extends EventEmitter {
 
     this.moveable
       .on('rotateStart', (e) => {
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onRotateStart(e);
       })
       .on('rotate', (e) => {
         if (!this.target || !this.dragEl) return;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.ING;
         this.moveableHelper?.onRotate(e);
         const frame = this.moveableHelper?.getFrame(e.target);
         this.target.style.transform = frame?.toCSSObject().transform || '';
       })
       .on('rotateEnd', (e) => {
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit('update', {
           el: this.target,
@@ -390,18 +399,18 @@ export default class StageDragResize extends EventEmitter {
 
     this.moveable
       .on('scaleStart', (e) => {
-        this.dragStatus = ActionStatus.START;
+        this.dragStatus = StageDragStatus.START;
         this.moveableHelper?.onScaleStart(e);
       })
       .on('scale', (e) => {
         if (!this.target || !this.dragEl) return;
-        this.dragStatus = ActionStatus.ING;
+        this.dragStatus = StageDragStatus.ING;
         this.moveableHelper?.onScale(e);
         const frame = this.moveableHelper?.getFrame(e.target);
         this.target.style.transform = frame?.toCSSObject().transform || '';
       })
       .on('scaleEnd', (e) => {
-        this.dragStatus = ActionStatus.END;
+        this.dragStatus = StageDragStatus.END;
         const frame = this.moveableHelper?.getFrame(e.target);
         this.emit('update', {
           el: this.target,
@@ -459,9 +468,13 @@ export default class StageDragResize extends EventEmitter {
     }
 
     this.emit('update', {
-      el: this.target,
+      data: [
+        {
+          el: this.target,
+          style: isResize ? { left, top, width, height } : { left, top },
+        },
+      ],
       parentEl,
-      style: isResize ? { left, top, width, height } : { left, top },
     });
   }
 
@@ -566,4 +579,11 @@ export default class StageDragResize extends EventEmitter {
       ...moveableOptions,
     };
   }
+
+  private canContainerHighlight() {
+    return (
+      this.core.containerHighlightType === ContainerHighlightType.DEFAULT ||
+      (this.core.containerHighlightType === ContainerHighlightType.ALT && this.isContainerHighlight)
+    );
+  }
 }

package/src/StageMultiDragResize.ts

@@ -25,8 +25,9 @@ import MoveableHelper from 'moveable-helper';
 import { DRAG_EL_ID_PREFIX, PAGE_CLASS } from './const';
 import StageCore from './StageCore';
 import StageMask from './StageMask';
-import { StageDragResizeConfig } from './types';
+import { StageDragResizeConfig, StageDragStatus } from './types';
 import { calcValueByFontsize, getMode, getTargetElStyle } from './util';
+
 export default class StageMultiDragResize extends EventEmitter {
   public core: StageCore;
   public mask: StageMask;
@@ -38,6 +39,8 @@ export default class StageMultiDragResize extends EventEmitter {
   public dragElList: HTMLDivElement[] = [];
   /** Moveable多选拖拽类实例 */
   public moveableForMulti?: Moveable;
+  /** 拖动状态 */
+  public dragStatus: StageDragStatus = StageDragStatus.END;
   private multiMoveableHelper?: MoveableHelper;
 
   constructor(config: StageDragResizeConfig) {
@@ -99,6 +102,7 @@ export default class StageMultiDragResize extends EventEmitter {
             id: matchEventTarget.id,
           });
         });
+        this.dragStatus = StageDragStatus.START;
       })
       .on('dragGroup', (params) => {
         const { events } = params;
@@ -121,9 +125,18 @@ export default class StageMultiDragResize extends EventEmitter {
           }
         });
         this.multiMoveableHelper?.onDragGroup(params);
+        this.dragStatus = StageDragStatus.ING;
       })
       .on('dragGroupEnd', () => {
         this.update();
+        this.dragStatus = StageDragStatus.END;
+      })
+      .on('clickGroup', (params) => {
+        const { inputTarget, targets } = params;
+        // 如果此时mask不处于多选状态下，且有多个元素被选中，同时点击的元素在选中元素中的其中一项，代表多选态切换为该元素的单选态
+        if (!this.mask.isMultiSelectStatus && targets.length > 1 && targets.includes(inputTarget)) {
+          this.emit('select', inputTarget.id.replace(DRAG_EL_ID_PREFIX, ''));
+        }
       });
   }
 
@@ -192,16 +205,19 @@ export default class StageMultiDragResize extends EventEmitter {
     const doc = contentWindow?.document;
     if (!doc) return;
 
-    this.targetList.forEach((targetItem) => {
-      const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
-      const left = calcValueByFontsize(doc, offset.left);
-      const top = calcValueByFontsize(doc, offset.top);
-      const width = calcValueByFontsize(doc, targetItem.clientWidth);
-      const height = calcValueByFontsize(doc, targetItem.clientHeight);
-      this.emit('update', {
-        el: targetItem,
-        style: isResize ? { left, top, width, height } : { left, top },
-      });
+    this.emit('update', {
+      data: this.targetList.map((targetItem) => {
+        const offset = { left: targetItem.offsetLeft, top: targetItem.offsetTop };
+        const left = calcValueByFontsize(doc, offset.left);
+        const top = calcValueByFontsize(doc, offset.top);
+        const width = calcValueByFontsize(doc, targetItem.clientWidth);
+        const height = calcValueByFontsize(doc, targetItem.clientHeight);
+        return {
+          el: targetItem,
+          style: isResize ? { left, top, width, height } : { left, top },
+        };
+      }),
+      parentEl: null,
     });
   }
 
@@ -221,13 +237,22 @@ export default class StageMultiDragResize extends EventEmitter {
       defaultGroupRotate: 0,
       defaultGroupOrigin: '50% 50%',
       draggable: true,
-      resizable: true,
+      resizable: false,
       throttleDrag: 0,
       startDragRotate: 0,
       throttleDragRotate: 0,
       zoom: 1,
       origin: true,
       padding: { left: 0, top: 0, right: 0, bottom: 0 },
+      snappable: true,
+      bounds: {
+        top: 0,
+        // 设置0的话无法移动到left为0，所以只能设置为-1
+        left: -1,
+        right: this.container.clientWidth - 1,
+        bottom: this.container.clientHeight,
+        ...(multiMoveableOptions.bounds || {}),
+      },
       ...options,
       ...multiMoveableOptions,
     };

package/src/types.ts

@@ -29,6 +29,11 @@ import StageMask from './StageMask';
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
 
+export enum ContainerHighlightType {
+  DEFAULT = 'default',
+  ALT = 'alt',
+}
+
 export type StageCoreConfig = {
   /** 需要对齐的dom节点的CSS选择器字符串 */
   snapElementQuerySelector?: string;
@@ -36,8 +41,9 @@ export type StageCoreConfig = {
   zoom?: number;
   canSelect?: CanSelect;
   isContainer: IsContainer;
-  containerHighlightClassName: string;
-  containerHighlightDuration: number;
+  containerHighlightClassName?: string;
+  containerHighlightDuration?: number;
+  containerHighlightType?: ContainerHighlightType;
   moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
   /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
@@ -61,6 +67,16 @@ export interface StageDragResizeConfig {
   mask: StageMask;
 }
 
+/** 拖动状态 */
+export enum StageDragStatus {
+  /** 开始拖动 */
+  START = 'start',
+  /** 拖动中 */
+  ING = 'ing',
+  /** 拖动结束 */
+  END = 'end',
+}
+
 export type Rect = {
   width: number;
   height: number;
@@ -77,19 +93,21 @@ export interface GuidesEventData {
 }
 
 export interface UpdateEventData {
-  el: HTMLElement;
-  parentEl: HTMLElement | null;
-  ghostEl: HTMLElement;
-  style: {
-    width?: number;
-    height?: number;
-    left?: number;
-    top?: number;
-    transform?: {
-      rotate?: string;
-      scale?: string;
+  data: {
+    el: HTMLElement;
+    style: {
+      width?: number;
+      height?: number;
+      left?: number;
+      top?: number;
+      transform?: {
+        rotate?: string;
+        scale?: string;
+      };
     };
-  };
+    ghostEl?: HTMLElement;
+  }[];
+  parentEl: HTMLElement | null;
 }
 
 export interface SortEventData {

package/types/StageCore.d.ts

@@ -7,7 +7,7 @@ import StageHighlight from './StageHighlight';
 import StageMask from './StageMask';
 import StageMultiDragResize from './StageMultiDragResize';
 import StageRender from './StageRender';
-import { IsContainer, RemoveData, SortEventData, StageCoreConfig, UpdateData } from './types';
+import { ContainerHighlightType, IsContainer, RemoveData, SortEventData, StageCoreConfig, UpdateData } from './types';
 export default class StageCore extends EventEmitter {
     container?: HTMLDivElement;
     selectedDom: HTMLElement | undefined;
@@ -22,6 +22,7 @@ export default class StageCore extends EventEmitter {
     zoom: number;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType?: ContainerHighlightType;
     isContainer: IsContainer;
     private canSelect;
     constructor(config: StageCoreConfig);

package/types/StageDragResize.d.ts

@@ -33,6 +33,7 @@ export default class StageDragResize extends EventEmitter {
     /** 流式布局下，目标节点的镜像节点 */
     private ghostEl;
     private moveableHelper?;
+    private isContainerHighlight;
     constructor(config: StageDragResizeConfig);
     /**
      * 将选中框渲染并覆盖到选中的组件Dom节点上方
@@ -67,4 +68,5 @@ export default class StageDragResize extends EventEmitter {
     private setGhostElChildrenId;
     private destroyGhostEl;
     private getOptions;
+    private canContainerHighlight;
 }

package/types/StageMultiDragResize.d.ts

@@ -3,7 +3,7 @@ import { EventEmitter } from 'events';
 import Moveable from 'moveable';
 import StageCore from './StageCore';
 import StageMask from './StageMask';
-import { StageDragResizeConfig } from './types';
+import { StageDragResizeConfig, StageDragStatus } from './types';
 export default class StageMultiDragResize extends EventEmitter {
     core: StageCore;
     mask: StageMask;
@@ -15,6 +15,8 @@ export default class StageMultiDragResize extends EventEmitter {
     dragElList: HTMLDivElement[];
     /** Moveable多选拖拽类实例 */
     moveableForMulti?: Moveable;
+    /** 拖动状态 */
+    dragStatus: StageDragStatus;
     private multiMoveableHelper?;
     constructor(config: StageDragResizeConfig);
     /**

package/types/types.d.ts

@@ -7,6 +7,10 @@ import StageDragResize from './StageDragResize';
 import StageMask from './StageMask';
 export declare type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export declare type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
+export declare enum ContainerHighlightType {
+    DEFAULT = "default",
+    ALT = "alt"
+}
 export declare type StageCoreConfig = {
     /** 需要对齐的dom节点的CSS选择器字符串 */
     snapElementQuerySelector?: string;
@@ -14,8 +18,9 @@ export declare type StageCoreConfig = {
     zoom?: number;
     canSelect?: CanSelect;
     isContainer: IsContainer;
-    containerHighlightClassName: string;
-    containerHighlightDuration: number;
+    containerHighlightClassName?: string;
+    containerHighlightDuration?: number;
+    containerHighlightType?: ContainerHighlightType;
     moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
     multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
     /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */
@@ -35,6 +40,15 @@ export interface StageDragResizeConfig {
     container: HTMLElement;
     mask: StageMask;
 }
+/** 拖动状态 */
+export declare enum StageDragStatus {
+    /** 开始拖动 */
+    START = "start",
+    /** 拖动中 */
+    ING = "ing",
+    /** 拖动结束 */
+    END = "end"
+}
 export declare type Rect = {
     width: number;
     height: number;
@@ -48,19 +62,21 @@ export interface GuidesEventData {
     guides: number[];
 }
 export interface UpdateEventData {
-    el: HTMLElement;
-    parentEl: HTMLElement | null;
-    ghostEl: HTMLElement;
-    style: {
-        width?: number;
-        height?: number;
-        left?: number;
-        top?: number;
-        transform?: {
-            rotate?: string;
-            scale?: string;
+    data: {
+        el: HTMLElement;
+        style: {
+            width?: number;
+            height?: number;
+            left?: number;
+            top?: number;
+            transform?: {
+                rotate?: string;
+                scale?: string;
+            };
         };
-    };
+        ghostEl?: HTMLElement;
+    }[];
+    parentEl: HTMLElement | null;
 }
 export interface SortEventData {
     src: Id;