@tmagic/stage 1.1.0-beta.9 → 1.1.2

package/dist/tmagic-stage.umd.js

@@ -392,10 +392,12 @@
           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`;
         }
@@ -600,6 +602,7 @@
         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);
@@ -646,7 +649,7 @@
           top: 0,
           left: -1,
           right: this.container.clientWidth - 1,
-          bottom: this.container.clientHeight,
+          bottom: isSortable ? void 0 : this.container.clientHeight,
           ...moveableOptions.bounds || {}
         },
         ...options,
@@ -1175,9 +1178,7 @@
         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)
@@ -1188,6 +1189,39 @@
             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;
@@ -1284,7 +1318,7 @@
         defaultGroupRotate: 0,
         defaultGroupOrigin: "50% 50%",
         draggable: true,
-        resizable: false,
+        resizable: true,
         throttleDrag: 0,
         startDragRotate: 0,
         throttleDragRotate: 0,
@@ -1305,7 +1339,7 @@
     }
   }
 
-  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.EventEmitter {
     contentWindow = null;