@hed-hog/core 0.0.298 → 0.0.300

package/hedhog/frontend/app/dashboard/components/draggable-grid.tsx.ejs

@@ -84,6 +84,60 @@ const deriveResponsiveLayout = (
   });
 };
 
+const scaleToColumnCount = (
+  value: number,
+  sourceCols: number,
+  targetCols: number
+) => {
+  if (sourceCols === targetCols) {
+    return value;
+  }
+
+  return Math.round((value * targetCols) / sourceCols);
+};
+
+const mapLayoutToBaseColumns = (
+  nextLayout: RGLLayout,
+  sourceCols: number,
+  targetCols: number,
+  previousLayout: Layout
+): Layout => {
+  const previousItems = new Map(previousLayout.map((item) => [item.i, item]));
+
+  return nextLayout.map((item) => {
+    const previousItem = previousItems.get(item.i);
+    const nextW =
+      sourceCols === 1
+        ? (previousItem?.w ?? 1)
+        : clamp(
+            scaleToColumnCount(item.w, sourceCols, targetCols),
+            1,
+            targetCols
+          );
+    const nextX =
+      sourceCols === 1
+        ? clamp(previousItem?.x ?? 0, 0, Math.max(0, targetCols - nextW))
+        : clamp(
+            scaleToColumnCount(item.x, sourceCols, targetCols),
+            0,
+            Math.max(0, targetCols - nextW)
+          );
+
+    return {
+      i: item.i,
+      x: nextX,
+      y: item.y,
+      w: nextW,
+      h: item.h,
+      minW: previousItem?.minW ?? item.minW,
+      maxW: previousItem?.maxW ?? item.maxW,
+      minH: previousItem?.minH ?? item.minH,
+      maxH: previousItem?.maxH ?? item.maxH,
+      static: previousItem?.static ?? item.static,
+    } satisfies LayoutItem;
+  });
+};
+
 // Simple compaction function for grid layout
 const compactLayout = (
   layout: RGLLayout,
@@ -161,24 +215,15 @@ export function DraggableGrid({
     };
   }, []);
 
-  const handleLayoutChange = (newLayout: RGLLayout) => {
-    if (effectiveCols !== cols) {
-      return;
-    }
-
+  const emitUserLayoutChange = (newLayout: RGLLayout) => {
     const layouts = Array.isArray(newLayout) ? newLayout : [newLayout];
-    const convertedLayout = layouts.map((item: any) => ({
-      i: item.i,
-      x: item.x,
-      y: item.y,
-      w: item.w,
-      h: item.h,
-      minW: item.minW,
-      maxW: item.maxW,
-      minH: item.minH,
-      maxH: item.maxH,
-      static: item.static,
-    })) as LayoutItem[];
+    const convertedLayout = mapLayoutToBaseColumns(
+      layouts,
+      effectiveCols,
+      cols,
+      layout
+    );
+
     onLayoutChange(convertedLayout);
   };
 
@@ -208,7 +253,8 @@ export function DraggableGrid({
           allowOverlap: !preventCollision,
           compact: (layout, cols) => compactLayout(layout, cols, compactType),
         }}
-        onLayoutChange={handleLayoutChange}
+        onDragStop={(nextLayout) => emitUserLayoutChange(nextLayout)}
+        onResizeStop={(nextLayout) => emitUserLayoutChange(nextLayout)}
       >
         {children}
       </GridLayout>