@tmagic/stage 1.2.7 → 1.2.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.7",
+  "version": "1.2.8",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -29,14 +29,14 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.2.7",
-    "@tmagic/schema": "1.2.7",
-    "@tmagic/utils": "1.2.7",
+    "@scena/guides": "^0.23.3",
+    "@tmagic/core": "1.2.8",
+    "@tmagic/schema": "1.2.8",
+    "@tmagic/utils": "1.2.8",
     "events": "^3.3.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.30.0",
+    "moveable": "^0.43.1",
     "moveable-helper": "^0.4.0"
   },
   "devDependencies": {

package/src/ActionManager.ts

@@ -25,6 +25,7 @@ import { Id } from '@tmagic/schema';
 import { addClassName, getDocument, removeClassNameByClassName } from '@tmagic/utils';
 
 import { CONTAINER_HIGHLIGHT_CLASS_NAME, GHOST_EL_ID_PREFIX, GuidesType, MouseButton, PAGE_CLASS } from './const';
+import DragResizeHelper from './DragResizeHelper';
 import StageDragResize from './StageDragResize';
 import StageHighlight from './StageHighlight';
 import StageMultiDragResize from './StageMultiDragResize';
@@ -101,27 +102,30 @@ export default class ActionManager extends EventEmitter {
     this.getRenderDocument = config.getRenderDocument;
     this.isContainer = config.isContainer;
 
+    const createDrHelper = () =>
+      new DragResizeHelper({
+        container: config.container,
+        updateDragEl: config.updateDragEl,
+      });
+
     this.dr = new StageDragResize({
       container: config.container,
       disabledDragStart: config.disabledDragStart,
+      moveableOptions: this.changeCallback(config.moveableOptions),
+      dragResizeHelper: createDrHelper(),
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
-      updateDragEl: config.updateDragEl,
-      markContainerEnd: () => this.markContainerEnd(),
-      delayedMarkContainer: (event: MouseEvent, exclude: Element[]) => {
-        if (this.canAddToContainer()) {
-          return this.delayedMarkContainer(event, exclude);
-        }
-        return undefined;
-      },
-      moveableOptions: this.changeCallback(config.moveableOptions),
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this),
     });
     this.multiDr = new StageMultiDragResize({
       container: config.container,
       multiMoveableOptions: config.multiMoveableOptions,
+      dragResizeHelper: createDrHelper(),
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
-      updateDragEl: config.updateDragEl,
+      markContainerEnd: this.markContainerEnd.bind(this),
+      delayedMarkContainer: this.delayedMarkContainer.bind(this),
     });
     this.highlightLayer = new StageHighlight({
       container: config.container,
@@ -320,10 +324,13 @@ export default class ActionManager extends EventEmitter {
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout {
-    return globalThis.setTimeout(() => {
-      this.addContainerHighlightClassName(event, excludeElList);
-    }, this.containerHighlightDuration);
+  public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout | undefined {
+    if (this.canAddToContainer()) {
+      return globalThis.setTimeout(() => {
+        this.addContainerHighlightClassName(event, excludeElList);
+      }, this.containerHighlightDuration);
+    }
+    return undefined;
   }
 
   public destroy(): void {
@@ -466,8 +473,8 @@ export default class ActionManager extends EventEmitter {
       });
 
     this.multiDr
-      .on('update', (data: UpdateEventData, parentEl: HTMLElement | null) => {
-        this.emit('multi-update', data, parentEl);
+      .on('update', (data: UpdateEventData) => {
+        this.emit('multi-update', data);
       })
       .on('change-to-select', async (id: Id) => {
         // 如果还在多选状态，不触发切换到单选

package/src/DragResizeHelper.ts

@@ -34,8 +34,8 @@ import MoveableHelper from 'moveable-helper';
 
 import { DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, Mode, ZIndex } from './const';
 import TargetShadow from './TargetShadow';
-import { DragResizeHelperConfig, TargetElement } from './types';
-import { getAbsolutePosition, getOffset } from './util';
+import { DragResizeHelperConfig, Rect, TargetElement } from './types';
+import { calcValueByFontsize, getAbsolutePosition, getOffset } from './util';
 
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
@@ -282,6 +282,44 @@ export default class DragResizeHelper {
     this.moveableHelper.onDragGroup(e);
   }
 
+  public getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect {
+    const offset = this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: el.offsetLeft, top: el.offsetTop };
+
+    let left = calcValueByFontsize(doc, offset.left);
+    let top = calcValueByFontsize(doc, offset.top);
+    const width = calcValueByFontsize(doc, el.clientWidth);
+    const height = calcValueByFontsize(doc, el.clientHeight);
+
+    let shadowEl = this.getShadowEl();
+    const shadowEls = this.getShadowEls();
+
+    if (shadowEls.length) {
+      shadowEl = shadowEls.find((item) => item.id.endsWith(el.id));
+    }
+
+    if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
+      const targetShadowHtmlEl = shadowEl as HTMLElement;
+      const targetShadowElOffsetLeft = targetShadowHtmlEl.offsetLeft || 0;
+      const targetShadowElOffsetTop = targetShadowHtmlEl.offsetTop || 0;
+
+      const frame = this.getFrame(shadowEl);
+
+      const [translateX, translateY] = frame?.properties.transform.translate.value;
+      const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+
+      left =
+        calcValueByFontsize(doc, targetShadowElOffsetLeft) +
+        parseFloat(translateX) -
+        calcValueByFontsize(doc, parentLeft);
+      top =
+        calcValueByFontsize(doc, targetShadowElOffsetTop) +
+        parseFloat(translateY) -
+        calcValueByFontsize(doc, parentTop);
+    }
+
+    return { width, height, left, top };
+  }
+
   /**
    * 多选状态设置多个节点的快照
    */

package/src/StageCore.ts

@@ -189,7 +189,10 @@ export default class StageCore extends EventEmitter {
   /**
    * @deprecated 废弃接口，建议用delayedMarkContainer代替
    */
-  public getAddContainerHighlightClassNameTimeout(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout {
+  public getAddContainerHighlightClassNameTimeout(
+    event: MouseEvent,
+    excludeElList: Element[] = [],
+  ): NodeJS.Timeout | undefined {
     return this.delayedMarkContainer(event, excludeElList);
   }
 
@@ -200,7 +203,7 @@ export default class StageCore extends EventEmitter {
    * @param excludeElList 计算鼠标所在容器时要排除的元素列表
    * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
    */
-  public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout {
+  public delayedMarkContainer(event: MouseEvent, excludeElList: Element[] = []): NodeJS.Timeout | undefined {
     return this.actionManager.delayedMarkContainer(event, excludeElList);
   }
 
@@ -331,8 +334,8 @@ export default class StageCore extends EventEmitter {
         // 先保证画布内完成渲染，再通知外部更新
         setTimeout(() => this.emit('select', el));
       })
-      .on('multi-update', (data: UpdateEventData, parentEl: HTMLElement | null) => {
-        this.emit('update', { data, parentEl });
+      .on('multi-update', (data: UpdateEventData) => {
+        this.emit('update', data);
       });
   }
 

package/src/StageDragResize.ts

@@ -24,7 +24,7 @@ import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
 import type { DelayedMarkContainer, GetRenderDocument, MarkContainerEnd, StageDragResizeConfig } from './types';
 import { StageDragStatus } from './types';
-import { calcValueByFontsize, down, getMode, getOffset, up } from './util';
+import { down, getMode, up } from './util';
 
 /**
  * 管理单选操作，响应选中操作，初始化moveableOption参数并初始化moveable，处理moveable回调事件对组件进行更新
@@ -51,10 +51,7 @@ export default class StageDragResize extends MoveableOptionsManager {
     this.delayedMarkContainer = config.delayedMarkContainer;
     this.disabledDragStart = config.disabledDragStart;
 
-    this.dragResizeHelper = new DragResizeHelper({
-      container: config.container,
-      updateDragEl: config.updateDragEl,
-    });
+    this.dragResizeHelper = config.dragResizeHelper;
 
     this.on('update-moveable', () => {
       if (this.moveable) {
@@ -315,40 +312,13 @@ export default class StageDragResize extends MoveableOptionsManager {
 
     if (!doc) return;
 
-    const offset =
-      this.mode === Mode.SORTABLE ? { left: 0, top: 0 } : { left: this.target.offsetLeft, top: this.target.offsetTop };
-
-    let left = calcValueByFontsize(doc, offset.left);
-    let top = calcValueByFontsize(doc, offset.top);
-    const width = calcValueByFontsize(doc, this.target.clientWidth);
-    const height = calcValueByFontsize(doc, this.target.clientHeight);
-
-    const shadowEl = this.dragResizeHelper.getShadowEl();
-    if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
-      const targetShadowHtmlEl = shadowEl as HTMLElement;
-      const targetShadowElOffsetLeft = targetShadowHtmlEl.offsetLeft || 0;
-      const targetShadowElOffsetTop = targetShadowHtmlEl.offsetTop || 0;
-
-      const frame = this.dragResizeHelper.getFrame(shadowEl);
-
-      const [translateX, translateY] = frame?.properties.transform.translate.value;
-      const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-
-      left =
-        calcValueByFontsize(doc, targetShadowElOffsetLeft) +
-        parseFloat(translateX) -
-        calcValueByFontsize(doc, parentLeft);
-      top =
-        calcValueByFontsize(doc, targetShadowElOffsetTop) +
-        parseFloat(translateY) -
-        calcValueByFontsize(doc, parentTop);
-    }
+    const rect = this.dragResizeHelper.getUpdatedElRect(this.target, parentEl, doc);
 
     this.emit('update', {
       data: [
         {
           el: this.target,
-          style: isResize ? { left, top, width, height } : { left, top },
+          style: isResize ? rect : { left: rect.left, top: rect.top },
         },
       ],
       parentEl,

package/src/StageMultiDragResize.ts

@@ -21,8 +21,15 @@ import Moveable from 'moveable';
 import { DRAG_EL_ID_PREFIX, Mode } from './const';
 import DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
-import { GetRenderDocument, MoveableOptionsManagerConfig, StageDragStatus, StageMultiDragResizeConfig } from './types';
-import { calcValueByFontsize, getMode } from './util';
+import {
+  DelayedMarkContainer,
+  GetRenderDocument,
+  MarkContainerEnd,
+  MoveableOptionsManagerConfig,
+  StageDragStatus,
+  StageMultiDragResizeConfig,
+} from './types';
+import { getMode } from './util';
 
 export default class StageMultiDragResize extends MoveableOptionsManager {
   /** 画布容器 */
@@ -34,6 +41,8 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
   public dragStatus: StageDragStatus = StageDragStatus.END;
   private dragResizeHelper: DragResizeHelper;
   private getRenderDocument: GetRenderDocument;
+  private delayedMarkContainer: DelayedMarkContainer;
+  private markContainerEnd: MarkContainerEnd;
 
   constructor(config: StageMultiDragResizeConfig) {
     const moveableOptionsManagerConfig: MoveableOptionsManagerConfig = {
@@ -43,13 +52,12 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
     };
     super(moveableOptionsManagerConfig);
 
+    this.delayedMarkContainer = config.delayedMarkContainer;
+    this.markContainerEnd = config.markContainerEnd;
     this.container = config.container;
     this.getRenderDocument = config.getRenderDocument;
 
-    this.dragResizeHelper = new DragResizeHelper({
-      container: config.container,
-      updateDragEl: config.updateDragEl,
-    });
+    this.dragResizeHelper = config.dragResizeHelper;
 
     this.on('update-moveable', () => {
       if (this.moveableForMulti) {
@@ -85,6 +93,8 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
       }),
     );
 
+    let timeout: NodeJS.Timeout | undefined;
+
     this.moveableForMulti
       .on('resizeGroupStart', (e) => {
         this.dragResizeHelper.onResizeGroupStart(e);
@@ -103,11 +113,18 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
         this.dragStatus = StageDragStatus.START;
       })
       .on('dragGroup', (e) => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = undefined;
+        }
+        timeout = this.delayedMarkContainer(e.inputEvent, this.targetList);
+
         this.dragResizeHelper.onDragGroup(e);
         this.dragStatus = StageDragStatus.ING;
       })
       .on('dragGroupEnd', () => {
-        this.update();
+        const parentEl = this.markContainerEnd();
+        this.update(false, parentEl);
         this.dragStatus = StageDragStatus.END;
       })
       .on('clickGroup', (e) => {
@@ -182,22 +199,19 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
    * 拖拽完成后将更新的位置信息暴露给上层业务方，业务方可以接收事件进行保存
    * @param isResize 是否进行大小缩放
    */
-  private update(isResize = false): void {
+  private update(isResize = false, parentEl: HTMLElement | null = null): void {
     if (this.targetList.length === 0) return;
 
     const doc = this.getRenderDocument();
     if (!doc) return;
 
     const data = this.targetList.map((targetItem) => {
-      const left = calcValueByFontsize(doc, targetItem.offsetLeft);
-      const top = calcValueByFontsize(doc, targetItem.offsetTop);
-      const width = calcValueByFontsize(doc, targetItem.clientWidth);
-      const height = calcValueByFontsize(doc, targetItem.clientHeight);
+      const rect = this.dragResizeHelper.getUpdatedElRect(targetItem, parentEl, doc);
       return {
         el: targetItem,
-        style: isResize ? { left, top, width, height } : { left, top },
+        style: isResize ? rect : { left: rect.left, top: rect.top },
       };
     });
-    this.emit('update', data, null);
+    this.emit('update', { data, parentEl });
   }
 }

package/src/types.ts

@@ -22,6 +22,7 @@ import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 
 import { GuidesType, ZIndex } from './const';
+import DragResizeHelper from './DragResizeHelper';
 import StageCore from './StageCore';
 
 export type TargetElement = HTMLElement | SVGElement;
@@ -112,21 +113,23 @@ export interface StageMaskConfig {
 
 export interface StageDragResizeConfig {
   container: HTMLElement;
+  dragResizeHelper: DragResizeHelper;
   moveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
   getRootContainer: GetRootContainer;
   getRenderDocument: GetRenderDocument;
   markContainerEnd: MarkContainerEnd;
   delayedMarkContainer: DelayedMarkContainer;
-  updateDragEl?: UpdateDragEl;
 }
 
 export interface StageMultiDragResizeConfig {
   container: HTMLElement;
+  dragResizeHelper: DragResizeHelper;
   multiMoveableOptions?: CustomizeMoveableOptions;
   getRootContainer: GetRootContainer;
   getRenderDocument: GetRenderDocument;
-  updateDragEl?: UpdateDragEl;
+  markContainerEnd: MarkContainerEnd;
+  delayedMarkContainer: DelayedMarkContainer;
 }
 
 export interface DragResizeHelperConfig {

package/types/ActionManager.d.ts

@@ -100,7 +100,7 @@ export default class ActionManager extends EventEmitter {
      * @param excludeElList 计算鼠标所在容器时要排除的元素列表
      * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
      */
-    delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout;
+    delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     destroy(): void;
     private changeCallback;
     /**

package/types/DragResizeHelper.d.ts

@@ -1,7 +1,7 @@
 import { OnDrag, OnDragGroup, OnDragGroupStart, OnDragStart, OnResize, OnResizeGroup, OnResizeGroupStart, OnResizeStart, OnRotate, OnRotateStart, OnScale, OnScaleStart } from 'moveable';
 import MoveableHelper from 'moveable-helper';
 import { Mode } from './const';
-import { DragResizeHelperConfig, TargetElement } from './types';
+import { DragResizeHelperConfig, Rect, TargetElement } from './types';
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
  * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
@@ -58,6 +58,7 @@ export default class DragResizeHelper {
     onResizeGroup(e: OnResizeGroup): void;
     onDragGroupStart(e: OnDragGroupStart): void;
     onDragGroup(e: OnDragGroup): void;
+    getUpdatedElRect(el: HTMLElement, parentEl: HTMLElement | null, doc: Document): Rect;
     /**
      * 多选状态设置多个节点的快照
      */

package/types/StageCore.d.ts

@@ -60,7 +60,7 @@ export default class StageCore extends EventEmitter {
     /**
      * @deprecated 废弃接口，建议用delayedMarkContainer代替
      */
-    getAddContainerHighlightClassNameTimeout(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout;
+    getAddContainerHighlightClassNameTimeout(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     /**
      * 鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
      * 标记的作用：1、高亮容器，给用户一个加入容器的交互感知；2、释放鼠标后，通过标记的标志找到要加入的容器
@@ -68,7 +68,7 @@ export default class StageCore extends EventEmitter {
      * @param excludeElList 计算鼠标所在容器时要排除的元素列表
      * @returns timeoutId，调用方在鼠标移走时要取消该timeout，阻止标记
      */
-    delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout;
+    delayedMarkContainer(event: MouseEvent, excludeElList?: Element[]): NodeJS.Timeout | undefined;
     /**
      * 销毁实例
      */

package/types/StageMultiDragResize.d.ts

@@ -11,6 +11,8 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
     dragStatus: StageDragStatus;
     private dragResizeHelper;
     private getRenderDocument;
+    private delayedMarkContainer;
+    private markContainerEnd;
     constructor(config: StageMultiDragResizeConfig);
     /**
      * 多选

package/types/types.d.ts

@@ -3,6 +3,7 @@ import type { MoveableOptions } from 'moveable';
 import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 import { GuidesType, ZIndex } from './const';
+import DragResizeHelper from './DragResizeHelper';
 import StageCore from './StageCore';
 export declare type TargetElement = HTMLElement | SVGElement;
 export declare type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
@@ -79,20 +80,22 @@ export interface StageMaskConfig {
 }
 export interface StageDragResizeConfig {
     container: HTMLElement;
+    dragResizeHelper: DragResizeHelper;
     moveableOptions?: CustomizeMoveableOptions;
     disabledDragStart?: boolean;
     getRootContainer: GetRootContainer;
     getRenderDocument: GetRenderDocument;
     markContainerEnd: MarkContainerEnd;
     delayedMarkContainer: DelayedMarkContainer;
-    updateDragEl?: UpdateDragEl;
 }
 export interface StageMultiDragResizeConfig {
     container: HTMLElement;
+    dragResizeHelper: DragResizeHelper;
     multiMoveableOptions?: CustomizeMoveableOptions;
     getRootContainer: GetRootContainer;
     getRenderDocument: GetRenderDocument;
-    updateDragEl?: UpdateDragEl;
+    markContainerEnd: MarkContainerEnd;
+    delayedMarkContainer: DelayedMarkContainer;
 }
 export interface DragResizeHelperConfig {
     container: HTMLElement;