feat(stage): 多选支持resize

close #302
Tencent · Aug 30, 2022 · 793d02a · 793d02a
1 parent 3af6f11
commit 793d02a
Showing 1 changed file with 57 additions and 13 deletions.
diff --git a/packages/stage/src/StageMultiDragResize.ts b/packages/stage/src/StageMultiDragResize.ts
@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import type { MoveableOptions } from 'moveable';
+import type { MoveableOptions, OnDragStart, OnResizeStart } from 'moveable';
 import Moveable from 'moveable';
 import MoveableHelper from 'moveable-helper';
 
@@ -85,23 +85,67 @@ export default class StageMultiDragResize extends EventEmitter {
       createAuto: true,
     });
     const frames: { left: number; top: number; id: string }[] = [];
+
+    const setFrames = (events: OnDragStart[] | OnResizeStart[]) => {
+      // 记录拖动前快照
+      events.forEach((ev) => {
+        // 实际目标元素
+        const matchEventTarget = this.targetList.find(
+          (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+        );
+        if (!matchEventTarget) return;
+        frames.push({
+          left: matchEventTarget.offsetLeft,
+          top: matchEventTarget.offsetTop,
+          id: matchEventTarget.id,
+        });
+      });
+    };
+
     this.moveableForMulti
-      .on('dragGroupStart', (params) => {
+      .on('resizeGroupStart', (params) => {
         const { events } = params;
-        this.multiMoveableHelper?.onDragGroupStart(params);
-        // 记录拖动前快照
+        this.multiMoveableHelper?.onResizeGroupStart(params);
+        setFrames(events);
+        this.dragStatus = StageDragStatus.START;
+      })
+      .on('resizeGroup', (params) => {
+        const { events } = params;
+        // 拖动过程更新
         events.forEach((ev) => {
-          // 实际目标元素
-          const matchEventTarget = this.targetList.find(
+          const { width, height, beforeTranslate } = ev.drag;
+          const frameSnapShot = frames.find(
+            (frameItem) => frameItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
+          );
+          if (!frameSnapShot) return;
+          const targeEl = this.targetList.find(
             (targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ''),
           );
-          if (!matchEventTarget) return;
-          frames.push({
-            left: matchEventTarget.offsetLeft,
-            top: matchEventTarget.offsetTop,
-            id: matchEventTarget.id,
-          });
+          if (!targeEl) return;
+          // 元素与其所属组同时加入多选列表时，只更新父元素
+          const isParentIncluded = this.targetList.find((targetItem) => targetItem.id === targeEl.parentElement?.id);
+          if (!isParentIncluded) {
+            // 更新页面元素位置
+            targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0]}px`;
+            targeEl.style.top = `${frameSnapShot.top + beforeTranslate[1]}px`;
+          }
+
+          // 更新页面元素位置
+          targeEl.style.width = `${width}px`;
+          targeEl.style.height = `${height}px`;
         });
+        this.multiMoveableHelper?.onResizeGroup(params);
+        this.dragStatus = StageDragStatus.ING;
+      })
+      .on('resizeGroupEnd', () => {
+        this.update(true);
+        this.dragStatus = StageDragStatus.END;
+      })
+      .on('dragGroupStart', (params) => {
+        const { events } = params;
+        this.multiMoveableHelper?.onDragGroupStart(params);
+        // 记录拖动前快照
+        setFrames(events);
         this.dragStatus = StageDragStatus.START;
       })
       .on('dragGroup', (params) => {
@@ -237,7 +281,7 @@ export default class StageMultiDragResize extends EventEmitter {
       defaultGroupRotate: 0,
       defaultGroupOrigin: '50% 50%',
       draggable: true,
-      resizable: false,
+      resizable: true,
       throttleDrag: 0,
       startDragRotate: 0,
       throttleDragRotate: 0,