feat: pattern editor

public/scripts/node-canvas-grid.js

@@ -163,6 +163,9 @@ class NodeCanvasGrid extends Component {
             return;
         }
 
+        // Set the data-item-count attribute for proper grid layout
+        gridContainer.setAttribute('data-item-count', validNodes.length);
+
         validNodes.forEach(node => {
             const nodeItem = this.createNodeCanvasItem(node);
             gridContainer.appendChild(nodeItem);

public/styles/main.css

@@ -243,13 +243,74 @@ body {
 .node-canvas-grid {
     flex: 1;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    grid-auto-rows: minmax(min(200px, calc((100vh - 10rem) / 3)), max(200px, calc((100vh - 10rem) / 2)));
     gap: 0.75rem;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0.5rem;
     align-items: stretch;
+    /* Default grid for 1-2 items */
+    grid-template-columns: repeat(2, 1fr);
+    min-height: 0;
+}
+
+/* Dynamic grid layouts based on number of items */
+.node-canvas-grid[data-item-count="1"] {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    justify-items: center;
+}
+
+.node-canvas-grid[data-item-count="2"] {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+}
+
+.node-canvas-grid[data-item-count="3"] {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+}
+
+.node-canvas-grid[data-item-count="4"] {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.node-canvas-grid[data-item-count="5"],
+.node-canvas-grid[data-item-count="6"] {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.node-canvas-grid[data-item-count="7"],
+.node-canvas-grid[data-item-count="8"] {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.node-canvas-grid[data-item-count="9"] {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+}
+
+.node-canvas-grid[data-item-count="10"],
+.node-canvas-grid[data-item-count="11"],
+.node-canvas-grid[data-item-count="12"] {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+}
+
+/* For more than 12 items, use auto-fit with reasonable minimum */
+.node-canvas-grid[data-item-count="13"],
+.node-canvas-grid[data-item-count="14"],
+.node-canvas-grid[data-item-count="15"],
+.node-canvas-grid[data-item-count="16"] {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+}
+
+.node-canvas-grid[data-item-count="17"] {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
 }
 
 .node-canvas-item {
@@ -1111,23 +1172,23 @@ body {
 
 /* Responsive adjustments */
 @media (min-width: 1600px) {
-    .node-canvas-grid {
+    .node-canvas-grid[data-item-count="17"] {
-        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        grid-auto-rows: minmax(220px, 1fr);
+        grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
     }
 }
 
 @media (max-width: 1400px) {
-    .node-canvas-grid {
+    .node-canvas-grid[data-item-count="17"] {
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        grid-auto-rows: minmax(180px, 1fr);
+        grid-template-rows: repeat(auto-fit, minmax(180px, 1fr));
     }
 }
 
 @media (max-width: 1200px) {
-    .node-canvas-grid {
+    .node-canvas-grid[data-item-count="17"] {
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-        grid-auto-rows: minmax(min(160px, calc((100vh - 8rem) / 3)), max(160px, calc((100vh - 8rem) / 2)));
+        grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
         gap: 0.5rem;
     }
     
@@ -1151,9 +1212,39 @@ body {
         gap: 0.5rem;
     }
 
-    .node-canvas-grid {
+    /* Mobile grid layouts - simplified for smaller screens but still maximize vertical space */
-        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    .node-canvas-grid[data-item-count="1"] {
-        grid-auto-rows: minmax(min(140px, calc((100vh - 7rem) / 3)), max(140px, calc((100vh - 7rem) / 2)));
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        justify-items: center;
+    }
+    
+    .node-canvas-grid[data-item-count="2"] {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: 1fr;
+    }
+    
+    .node-canvas-grid[data-item-count="3"],
+    .node-canvas-grid[data-item-count="4"] {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+    }
+    
+    .node-canvas-grid[data-item-count="5"],
+    .node-canvas-grid[data-item-count="6"],
+    .node-canvas-grid[data-item-count="7"],
+    .node-canvas-grid[data-item-count="8"],
+    .node-canvas-grid[data-item-count="9"],
+    .node-canvas-grid[data-item-count="10"],
+    .node-canvas-grid[data-item-count="11"],
+    .node-canvas-grid[data-item-count="12"],
+    .node-canvas-grid[data-item-count="13"],
+    .node-canvas-grid[data-item-count="14"],
+    .node-canvas-grid[data-item-count="15"],
+    .node-canvas-grid[data-item-count="16"],
+    .node-canvas-grid[data-item-count="17"] {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(auto-fit, 1fr);
         gap: 0.5rem;
         padding: 0.25rem;
     }