wip: improve responsive scaling

src/components/Dashboard/Wrappers/gridstack/column-sorting.ts

@@ -0,0 +1,88 @@
+import { GridStackNode } from 'fily-publish-gridstack';
+
+type GridstackColumnSortingFn = (
+  column: number,
+  prevColumn: number,
+  newNodes: GridStackNode[],
+  nodes: GridStackNode[]
+) => void;
+
+const getGridstackAttribute = (node: GridStackNode, path: 'x' | 'y' | 'w' | 'h'): number =>
+  parseInt(node.el!.getAttribute(`data-gridstack-${path}`)!, 10);
+
+const getGridstackAttributes = (node: GridStackNode) => ({
+  width: getGridstackAttribute(node, 'w'),
+  height: getGridstackAttribute(node, 'h'),
+  x: getGridstackAttribute(node, 'x'),
+  y: getGridstackAttribute(node, 'y'),
+});
+
+type Type = ReturnType<typeof getGridstackAttributes> & { node: GridStackNode };
+
+const nextItem = (start: number, end: number, nodes: Type[]): number => {
+  const next = nodes
+    .filter((x) => x.y <= end && x.y + x.height - 1 > end)
+    .sort((a, b) => a.y + a.height - (b.y + b.height))
+    .at(0);
+  if (!next) return end;
+  return nextItem(start, next.height - 1 + next.y, nodes);
+};
+
+const nextRowHeight = (nodes: Type[], values: number[], current = 0) => {
+  const item = nodes.find((x) => x.y >= current);
+  if (!item) return;
+  const next = nextItem(item.y, item.y + item.height - 1, nodes);
+  values.push(next + 1 - item.y);
+  nextRowHeight(nodes, values, next);
+};
+
+const getRowHeights = (nodes: Type[]) => {
+  const rowHeights: number[] = [];
+  nextRowHeight(
+    nodes,
+    rowHeights
+  );
+  return rowHeights;
+};
+
+const sortNodesByYAndX = (a: GridStackNode, b: GridStackNode) => {
+  const aAttributes = getGridstackAttributes(a);
+  const bAttributes = getGridstackAttributes(b);
+
+  const differenceY = aAttributes.y - bAttributes.y;
+
+  return differenceY !== 0 ? differenceY : aAttributes.x - bAttributes.x;
+};
+
+export const commonColumnSorting: GridstackColumnSortingFn = (
+  column,
+  prevColumn,
+  newNodes,
+  nodes
+) => {
+  if (column === prevColumn) {
+    newNodes.concat(nodes);
+    return;
+  }
+
+  let nextRow = 0;
+  let available = column;
+
+  const sortedNodes = nodes.sort(sortNodesByYAndX);
+  const mappedNodes = sortedNodes.map((node) => ({
+    ...getGridstackAttributes(node),
+    node,
+  }));
+  const rowHeights = getRowHeights(mappedNodes);
+
+  const rowItems: Type[][] = [];
+
+  // TODO: fix issue with spaces between.
+  let rowTotal = 0;
+  rowHeights.forEach(height => {
+    rowItems.push(mappedNodes.filter(node => node.y >= rowTotal && node.y < rowTotal + height));
+    rowTotal += height;
+  });
+
+  console.log(rowItems);
+};

src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts

@@ -16,8 +16,46 @@ import { AppType } from '../../../../types/app';
 import { AreaType } from '../../../../types/area';
 import { IWidget } from '../../../../widgets/widgets';
 import { useEditModeStore } from '../../Views/useEditModeStore';
+import { commonColumnSorting } from './column-sorting';
 import { initializeGridstack } from './init-gridstack';
 
+const getGridstackAttribute = (node: GridStackNode, path: 'x' | 'y' | 'w' | 'h'): number => parseInt(node.el!.getAttribute(`data-gridstack-${path}`)!, 10);
+
+        const getGridstackAttributes = (node: GridStackNode) => ({
+          width: getGridstackAttribute(node, 'w'),
+          height: getGridstackAttribute(node, 'h'),
+          x: getGridstackAttribute(node, 'x'),
+          y: getGridstackAttribute(node, 'y'),
+        });
+
+type Type = (ReturnType<typeof getGridstackAttributes> & { node: GridStackNode });
+
+const nextItem = (start: number, end: number, nodes: Type[]): number => {
+  const next = nodes
+  .filter(x => x.y <= end && x.y + x.height - 1 > end)
+  .sort((a, b) => (a.y + a.height) - (b.y + b.height))
+  .at(0);
+if (!next) return end;
+return nextItem(start, next.height - 1 + next.y, nodes);
+};
+
+const nextRowHeight = (nodes: Type[], values: number[], current = 0) => {
+  const item = nodes.find(x => x.y >= current);
+  if (!item) return;
+  const next = nextItem(item.y, item.y + item.height - 1, nodes);
+  values.push(next + 1 - item.y);
+  nextRowHeight(nodes, values, next);
+};
+
+const getRowHeights = (nodes: GridStackNode[]) => {
+  const rowHeights: number[] = [];
+  nextRowHeight(nodes.map((node) => ({
+    ...getGridstackAttributes(node),
+    node,
+  })), rowHeights);
+  return rowHeights;
+};
+
 interface UseGristackReturnType {
   apps: AppType[];
   widgets: IWidget<string, any>[];
@@ -90,24 +128,16 @@ export const useGridstack = (
     if (areaType === 'sidebar') return;
     gridRef.current?.column(
       wrapperColumnCount,
-      (column, prevColumn, newNodes, nodes) => {
+      /*(column, prevColumn, newNodes, nodes) => {
         let nextRow = 0;
         let available = column;
+        let maxHeightInRow = 1;
 
         if (column === prevColumn) {
           newNodes.concat(nodes);
           return;
         }
 
-        const getGridstackAttribute = (node: GridStackNode, path: 'x' | 'y' | 'w' | 'h'): number => parseInt(node.el!.getAttribute(`data-gridstack-${path}`)!, 10);
-
-        const getGridstackAttributes = (node: GridStackNode) => ({
-          width: getGridstackAttribute(node, 'w'),
-          height: getGridstackAttribute(node, 'h'),
-          x: getGridstackAttribute(node, 'x'),
-          y: getGridstackAttribute(node, 'y'),
-        });
-
         const sortNodes = (a: GridStackNode, b: GridStackNode) => {
           const aAttributes = getGridstackAttributes(a);
           const bAttributes = getGridstackAttributes(b);
@@ -117,36 +147,39 @@ export const useGridstack = (
           return differenceY !== 0 ? differenceY : aAttributes.x - bAttributes.x;
         };
 
-        const sorted = nodes.sort(sortNodes);
+        const sortedNodes = nodes.sort(sortNodes);
+        const rowHeights = getRowHeights(sortedNodes);
 
-        console.log(sorted);
-
-        sorted.forEach((node) => {
+        sortedNodes.forEach((node) => {
           const newnode = node;
           const width = parseInt(newnode.el!.getAttribute('data-gridstack-w')!, 10);
           const height = parseInt(newnode.el!.getAttribute('data-gridstack-h')!, 10);
           const x = parseInt(newnode.el!.getAttribute('data-gridstack-x')!, 10);
           const y = parseInt(newnode.el!.getAttribute('data-gridstack-y')!, 10);
-          const moveYDown = 1;
+          maxHeightInRow = height > maxHeightInRow ? height : maxHeightInRow;
+
+          const continueInNextRow = () => {
+            nextRow += maxHeightInRow;
+            maxHeightInRow = 1;
+            available = column;
+            return nextRow;
+          };
 
           if (column === 3) {
             newnode.x = available >= width ? 3 - available : 0;
-            newnode.y = available === 3 || available >= width ? nextRow : nextRow += moveYDown;
+            newnode.y = available === 3 || available >= width ? nextRow : continueInNextRow();
 
             if (width > 3) {
               newnode.w = 3;
-              nextRow += moveYDown;
-              available = 3;
+              continueInNextRow();
             } else if (available >= width) {
               available -= width;
               if (available === 0) {
-                nextRow += moveYDown;
-                available = 3;
+                continueInNextRow();
               }
             } else if (available < width) {
-              newnode.y = newnode.y! + moveYDown;
+              newnode.y = continueInNextRow();
               available = 3 - width;
-              nextRow += moveYDown;
             }
           } else if (column === 6) {
             newnode.x = available >= width ? 6 - available : 0;
@@ -154,29 +187,25 @@ export const useGridstack = (
 
             if (width > 6) {
               newnode.w = 6;
-              nextRow += moveYDown;
-              available = 6;
+              continueInNextRow();
             } else if (available >= width) {
               available -= width;
               if (available === 0) {
-                nextRow += moveYDown;
-                available = 6;
+                continueInNextRow();
               }
             } else if (available < width) {
-              newnode.y = newnode.y! + moveYDown;
+              newnode.y = continueInNextRow();
               available = 6 - width;
-              nextRow += moveYDown;
             }
           } else {
             newnode.x = y % 2 === 1 ? x + 6 : x;
             newnode.y = Math.floor(y / 2);
           }
 
-          console.log(newnode);
-
           newNodes.push(newnode);
         });
-      }
+      }*/
+      commonColumnSorting
     );
   }, [wrapperColumnCount]);