@tmagic/stage 1.1.0-beta.9 → 1.1.2

package/package.json

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

package/src/StageDragResize.ts

@@ -263,12 +263,13 @@ export default class StageDragResize extends EventEmitter {
         const { beforeTranslate } = drag;
         this.dragStatus = StageDragStatus.ING;
 
-        this.moveableHelper?.onResize(e);
-
         // 流式布局
         if (this.mode === Mode.SORTABLE) {
           this.target.style.top = '0px';
+          this.dragEl.style.width = `${width}px`;
+          this.dragEl.style.height = `${height}px`;
         } else {
+          this.moveableHelper?.onResize(e);
           this.target.style.left = `${frame.left + beforeTranslate[0]}px`;
           this.target.style.top = `${frame.top + beforeTranslate[1]}px`;
         }
@@ -518,6 +519,7 @@ export default class StageDragResize extends EventEmitter {
 
     const isAbsolute = this.mode === Mode.ABSOLUTE;
     const isFixed = this.mode === Mode.FIXED;
+    const isSortable = this.mode === Mode.SORTABLE;
 
     let { moveableOptions = {} } = this.core.config;
 
@@ -572,7 +574,7 @@ export default class StageDragResize extends EventEmitter {
         // 设置0的话无法移动到left为0，所以只能设置为-1
         left: -1,
         right: this.container.clientWidth - 1,
-        bottom: this.container.clientHeight,
+        bottom: isSortable ? undefined : this.container.clientHeight,
         ...(moveableOptions.bounds || {}),
       },
       ...options,

package/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,

package/src/style.css

@@ -9,3 +9,7 @@
   opacity: .1;
   pointer-events: none;
 }
+
+.magic-ui-container.magic-layout-relative {
+  min-height: 50px;
+}

package/src/types.ts

@@ -119,11 +119,13 @@ export interface SortEventData {
 export interface UpdateData {
   config: MNode;
   parent?: MContainer;
+  parentId?: Id;
   root: MApp;
 }
 
 export interface RemoveData {
   id: Id;
+  parentId: Id;
   root: MApp;
 }
 

package/types/types.d.ts

@@ -86,10 +86,12 @@ export interface SortEventData {
 export interface UpdateData {
     config: MNode;
     parent?: MContainer;
+    parentId?: Id;
     root: MApp;
 }
 export interface RemoveData {
     id: Id;
+    parentId: Id;
     root: MApp;
 }
 export interface Runtime {