@tmagic/stage 1.2.6 → 1.2.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.6",
+  "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.6",
-    "@tmagic/schema": "1.2.6",
-    "@tmagic/utils": "1.2.6",
+    "@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';
@@ -39,6 +40,7 @@ import {
   GetTargetElement,
   IsContainer,
   Point,
+  RemoveEventData,
   SelectStatus,
   StageDragStatus,
   UpdateEventData,
@@ -100,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,
@@ -319,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 {
@@ -454,11 +462,19 @@ export default class ActionManager extends EventEmitter {
       })
       .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);
       });
 
     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/MoveableActionsAble.ts

@@ -0,0 +1,109 @@
+import { MoveableManagerInterface, Renderer } from 'moveable';
+
+import { AbleActionEventType } from './types';
+
+export default (handler: (type: AbleActionEventType) => void) => ({
+  name: 'actions',
+  props: {
+    selectParent: Boolean,
+  },
+  events: {},
+  render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
+    const rect = moveable.getRect();
+    const { pos2 } = moveable.state;
+
+    // use css for able
+    const editableViewer = moveable.useCSS(
+      'div',
+      `
+      {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        will-change: transform;
+        transform-origin: 0px 0px;
+        display: flex;
+      }
+      .moveable-button {
+        width: 20px;
+        height: 20px;
+        background: #4af;
+        border-radius: 4px;
+        appearance: none;
+        border: 0;
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+        margin-left: 2px;
+        position: relative;
+      }
+      .moveable-remove-button:before, .moveable-remove-button:after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) rotate(45deg);
+        width: 14px;
+        height: 2px;
+        background: #fff;
+        border-radius: 1px;
+        cursor: pointer;
+      }
+      .moveable-remove-button:after {
+        transform: translate(-50%, -50%) rotate(-45deg);
+      }
+      `,
+    );
+    // Add key (required)
+    // Add class prefix moveable-(required)
+    return React.createElement(
+      editableViewer,
+      {
+        className: 'moveable-editable',
+        style: {
+          transform: `translate(${pos2[0] - 48}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg) translate(10px)`,
+        },
+      },
+      [
+        React.createElement(
+          'button',
+          {
+            className: 'moveable-button',
+            title: '选中父组件',
+            onClick: () => {
+              handler(AbleActionEventType.SELECT_PARENT);
+            },
+          },
+          React.createElement(
+            'svg',
+            {
+              width: '20px',
+              height: '20px',
+              viewBox: '0 0 16 16',
+              fill: 'none',
+              xmlns: 'http://www.w3.org/2000/svg',
+              style: {
+                transform: 'rotate(90deg)',
+                position: 'absolute',
+                left: 0,
+                top: 0,
+              },
+            },
+            React.createElement('path', {
+              d: 'M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z',
+              fill: 'currentColor',
+              fillOpacity: '0.9',
+            }),
+          ),
+        ),
+        React.createElement('button', {
+          className: 'moveable-button moveable-remove-button',
+          title: '删除',
+          onClick: () => {
+            handler(AbleActionEventType.REMOVE);
+          },
+        }),
+      ],
+    );
+  },
+});

package/src/MoveableOptionsManager.ts

@@ -22,8 +22,8 @@ import { merge } from 'lodash-es';
 import { MoveableOptions } from 'moveable';
 
 import { GuidesType, Mode } from './const';
-import selectParentAbles from './MoveableSelectParentAble';
-import { GetRootContainer, MoveableOptionsManagerConfig } from './types';
+import MoveableActionsAble from './MoveableActionsAble';
+import { AbleActionEventType, GetRootContainer, MoveableOptionsManagerConfig } from './types';
 import { getOffset } from './util';
 
 /**
@@ -173,10 +173,10 @@ export default class MoveableOptionsManager extends EventEmitter {
       isDisplayInnerSnapDigit: true,
 
       props: {
-        selectParent: true,
+        actions: true,
       },
 
-      ables: [selectParentAbles(this.selectParentHandler.bind(this))],
+      ables: [MoveableActionsAble(this.actionHandler.bind(this))],
     };
   }
 
@@ -208,8 +208,8 @@ export default class MoveableOptionsManager extends EventEmitter {
   /**
    * 这是给selectParentAbles的回调函数，用于触发选中父元素事件
    */
-  private selectParentHandler(): void {
-    this.emit('select-parent');
+  private actionHandler(type: AbleActionEventType): void {
+    this.emit(type);
   }
 
   /**

package/src/StageCore.ts

@@ -30,6 +30,7 @@ import {
   GuidesEventData,
   Point,
   RemoveData,
+  RemoveEventData,
   Runtime,
   StageCoreConfig,
   UpdateData,
@@ -188,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);
   }
 
@@ -199,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);
   }
 
@@ -313,6 +317,9 @@ export default class StageCore extends EventEmitter {
       })
       .on('select-parent', () => {
         this.emit('select-parent');
+      })
+      .on('remove', (data: RemoveEventData) => {
+        this.emit('remove', data);
       });
   }
 
@@ -327,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) {
@@ -63,6 +60,10 @@ export default class StageDragResize extends MoveableOptionsManager {
     });
   }
 
+  public getTarget() {
+    return this.target;
+  }
+
   /**
    * 将选中框渲染并覆盖到选中的组件Dom节点上方
    * 当选中的节点不是absolute时，会创建一个新的节点出来作为拖拽目标
@@ -311,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 {
@@ -190,6 +193,12 @@ export interface UpdateEventData {
   parentEl: HTMLElement | null;
 }
 
+export interface RemoveEventData {
+  data: {
+    el: HTMLElement;
+  }[];
+}
+
 export interface SortEventData {
   src: Id;
   dist: Id;
@@ -244,3 +253,8 @@ export interface TargetShadowConfig {
   updateDragEl?: UpdateDragEl;
   idPrefix?: string;
 }
+
+export enum AbleActionEventType {
+  SELECT_PARENT = 'select-parent',
+  REMOVE = 'remove',
+}

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/{MoveableSelectParentAble.d.ts → MoveableActionsAble.d.ts}

@@ -1,7 +1,10 @@
 import { MoveableManagerInterface, Renderer } from 'moveable';
-declare const _default: (selectParentHandler: () => void) => {
+import { AbleActionEventType } from './types';
+declare const _default: (handler: (type: AbleActionEventType) => void) => {
     name: string;
-    props: {};
+    props: {
+        selectParent: BooleanConstructor;
+    };
     events: {};
     render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
 };

package/types/MoveableOptionsManager.d.ts

@@ -68,7 +68,7 @@ export default class MoveableOptionsManager extends EventEmitter {
     /**
      * 这是给selectParentAbles的回调函数，用于触发选中父元素事件
      */
-    private selectParentHandler;
+    private actionHandler;
     /**
      * 为需要辅助对齐的元素创建div
      * @param selectedElList 选中的元素列表，需要排除在对齐元素之外

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;
     /**
      * 销毁实例
      */