@tmagic/stage 1.1.0-beta.9 → 1.1.0

package/dist/tmagic-stage.mjs

@@ -386,10 +386,12 @@ class StageDragResize extends EventEmitter {
         return;
       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`;
       }
@@ -594,6 +596,7 @@ class StageDragResize extends EventEmitter {
       return {};
     const isAbsolute = this.mode === Mode.ABSOLUTE;
     const isFixed = this.mode === Mode.FIXED;
+    const isSortable = this.mode === Mode.SORTABLE;
     let { moveableOptions = {} } = this.core.config;
     if (typeof moveableOptions === "function") {
       moveableOptions = moveableOptions(this.core);
@@ -640,7 +643,7 @@ class StageDragResize extends EventEmitter {
         top: 0,
         left: -1,
         right: this.container.clientWidth - 1,
-        bottom: this.container.clientHeight,
+        bottom: isSortable ? void 0 : this.container.clientHeight,
         ...moveableOptions.bounds || {}
       },
       ...options,
@@ -1169,9 +1172,7 @@ class StageMultiDragResize extends EventEmitter {
       createAuto: true
     });
     const frames = [];
-    this.moveableForMulti.on("dragGroupStart", (params) => {
-      const { events } = params;
-      this.multiMoveableHelper?.onDragGroupStart(params);
+    const setFrames = (events) => {
       events.forEach((ev) => {
         const matchEventTarget = this.targetList.find((targetItem) => targetItem.id === ev.target.id.replace(DRAG_EL_ID_PREFIX, ""));
         if (!matchEventTarget)
@@ -1182,6 +1183,39 @@ class StageMultiDragResize extends EventEmitter {
           id: matchEventTarget.id
         });
       });
+    };
+    this.moveableForMulti.on("resizeGroupStart", (params) => {
+      const { events } = params;
+      this.multiMoveableHelper?.onResizeGroupStart(params);
+      setFrames(events);
+      this.dragStatus = StageDragStatus.START;
+    }).on("resizeGroup", (params) => {
+      const { events } = params;
+      events.forEach((ev) => {
+        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 (!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) => {
       const { events } = params;
@@ -1278,7 +1312,7 @@ class StageMultiDragResize extends EventEmitter {
       defaultGroupRotate: 0,
       defaultGroupOrigin: "50% 50%",
       draggable: true,
-      resizable: false,
+      resizable: true,
       throttleDrag: 0,
       startDragRotate: 0,
       throttleDragRotate: 0,
@@ -1299,7 +1333,7 @@ class StageMultiDragResize extends EventEmitter {
   }
 }
 
-const style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n  pointer-events: none;\n}\n";
+const style = ".tmagic-stage-container-highlight::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background-color: #000;\n  opacity: .1;\n  pointer-events: none;\n}\n\n.magic-ui-container.magic-layout-relative {\n  min-height: 50px;\n}\n";
 
 class StageRender extends EventEmitter {
   contentWindow = null;