Make grid rows and columns configurable and simplify grid style application

packages/client/manifest.json

@@ -4585,7 +4585,23 @@
       "width": 800,
       "height": 400
     },
-    "showEmptyState": false
+    "showEmptyState": false,
+    "settings": [
+      {
+        "type": "number",
+        "label": "Rows",
+        "key": "rows",
+        "defaultValue": 12,
+        "min": 1
+      },
+      {
+        "type": "number",
+        "label": "Columns",
+        "key": "cols",
+        "defaultValue": 12,
+        "min": 1
+      }
+    ]
   },
   "formblock": {
     "name": "Form Block",

packages/client/src/components/Component.svelte

@@ -170,21 +170,11 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
-  // We can apply additional styles automatically if required.
-  // One use case for this is ensuring grid children have proper styles to
-  // display properly inside a grid.
-  $: additionalStyles = getAdditionalStyles(
-    instance._styles?.normal || {},
-    parentType,
-    definition
-  )
-
   // Compute overall styles
   $: styles = {
     ...instance._styles,
     normal: {
       ...instance._styles?.normal,
-      ...additionalStyles,
       ...ephemeralStyles,
     },
     custom: customCSS,
@@ -460,54 +450,6 @@
     })
   }
 
-  const getAdditionalStyles = (styles, parentType, definition) => {
-    let newStyles = {}
-
-    // Ensure grid styles are set
-    if (parentType?.endsWith("/grid")) {
-      newStyles = {
-        ...newStyles,
-        overflow: "hidden",
-        width: "auto",
-        height: "auto",
-      }
-
-      // Guess rough grid size from definition size
-      let columns = 6
-      let rows = 4
-      if (definition.size?.width) {
-        columns = Math.min(12, Math.round(definition.size.width / 100))
-      }
-      if (definition.size?.height) {
-        rows = Math.min(12, Math.round(definition.size.height / 50))
-      }
-
-      // Ensure grid position styles are set
-      if (!styles["grid-column-start"]) {
-        newStyles["grid-column-start"] = 1
-      }
-      if (!styles["grid-column-end"]) {
-        newStyles["grid-column-end"] = columns + 1
-      }
-      if (!styles["grid-row-start"]) {
-        newStyles["grid-row-start"] = 1
-      }
-      if (!styles["grid-row-end"]) {
-        newStyles["grid-row-end"] = rows + 1
-      }
-
-      // Ensure grid end styles aren't before grid start styles
-      if (newStyles["grid-column-end"] <= newStyles["grid-column-start"]) {
-        newStyles["grid-column-end"] = newStyles["grid-column-start"] + 1
-      }
-      if (newStyles["grid-row-end"] <= newStyles["grid-row-start"]) {
-        newStyles["grid-row-end"] = newStyles["grid-row-start"] + 1
-      }
-    }
-
-    return newStyles
-  }
-
   onMount(() => {
     if (
       $appStore.isDevApp &&

packages/client/src/components/app/Grid.svelte

@@ -4,15 +4,21 @@
   const component = getContext("component")
   const { styleable } = getContext("sdk")
 
-  const cols = 12
+  export let cols = 12
+  export let rows = 12
 
   let node
-  $: coords = generateCoords(cols)
 
-  const generateCoords = num => {
+  // Deliberately non-reactive as we want this fixed whenever the grid renders
+  const defaultColSpan = Math.ceil((cols + 1) / 2)
+  const defaultRowSpan = Math.ceil((rows + 1) / 2)
+
+  $: coords = generateCoords(rows, cols)
+
+  const generateCoords = (rows, cols) => {
     let grid = []
-    for (let row = 0; row < num; row++) {
+    for (let row = 0; row < rows; row++) {
-      for (let col = 0; col < num; col++) {
+      for (let col = 0; col < cols; col++) {
         grid.push({ row, col })
       }
     }
@@ -23,7 +29,17 @@
 <div
   bind:this={node}
   class="grid"
-  use:styleable={$component.styles}
+  use:styleable={{
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      "--cols": cols,
+      "--rows": rows,
+      "--default-col-span": defaultColSpan,
+      "--default-row-span": defaultRowSpan,
+    },
+  }}
+  data-rows={rows}
   data-cols={cols}
 >
   <div class="underlay">
@@ -35,6 +51,26 @@
 </div>
 
 <style>
+  /*
+    Ensure all children of containers which are top level children of
+    grids do not overflow
+  */
+  :global(.grid > .component > .valid-container > .component > *) {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  /* Ensure all top level children have some grid styles set */
+  :global(.grid > .component > *) {
+    overflow: hidden;
+    width: auto;
+    height: auto;
+    grid-column-start: 1;
+    grid-column-end: var(--default-col-span);
+    grid-row-start: 1;
+    grid-row-end: var(--default-row-span);
+  }
+
   .grid {
     position: relative;
     height: 400px;
@@ -42,8 +78,8 @@
   .grid,
   .underlay {
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: repeat(var(--rows), 1fr);
-    grid-template-rows: repeat(12, 1fr);
+    grid-template-columns: repeat(var(--cols), 1fr);
   }
   .underlay {
     position: absolute;

packages/client/src/components/preview/GridDNDHandler.svelte

@@ -54,12 +54,13 @@
 
     const domGrid = getDOMNode(gridId)
     const cols = parseInt(domGrid.dataset.cols)
+    const rows = parseInt(domGrid.dataset.rows)
     const { width, height } = domGrid.getBoundingClientRect()
 
     const colWidth = width / cols
     const diffX = mouseX - startX
     let deltaX = Math.round(diffX / colWidth)
-    const rowHeight = height / cols
+    const rowHeight = height / rows
     const diffY = mouseY - startY
     let deltaY = Math.round(diffY / rowHeight)
 
@@ -160,27 +161,27 @@
       return
     }
 
-    const instance = componentStore.actions.getComponentInstance(dragInfo.id)
-    if (!instance) {
-      return
-    }
-    const styles = instance.getStyles()
     const domGrid = getDOMNode(dragInfo.gridId)
+    const gridCols = parseInt(domGrid.dataset.cols)
+    const gridRows = parseInt(domGrid.dataset.rows)
+    const domNode = getDOMNode(dragInfo.id)
+    const styles = window.getComputedStyle(domNode)
     if (domGrid) {
-      const getStyle = x => parseInt(styles?.normal?.[x] || "0")
+      const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
+      const getStyle = x => parseInt(styles?.[x] || "0")
+      const getColStyle = x => minMax(getStyle(x), 1, gridCols + 1)
+      const getRowStyle = x => minMax(getStyle(x), 1, gridRows + 1)
       dragInfo.grid = {
         startX: e.clientX,
         startY: e.clientY,
-        rowStart: getStyle("grid-row-start"),
+        rowStart: getRowStyle("grid-row-start"),
-        rowEnd: getStyle("grid-row-end"),
+        rowEnd: getRowStyle("grid-row-end"),
-        colStart: getStyle("grid-column-start"),
+        colStart: getColStyle("grid-column-start"),
-        colEnd: getStyle("grid-column-end"),
+        colEnd: getColStyle("grid-column-end"),
-        rowDeltaMin: 1 - getStyle("grid-row-start"),
+        rowDeltaMin: 1 - getRowStyle("grid-row-start"),
-        rowDeltaMax:
+        rowDeltaMax: gridRows + 1 - getRowStyle("grid-row-end"),
-          parseInt(domGrid.dataset.cols) + 1 - getStyle("grid-row-end"),
+        colDeltaMin: 1 - getColStyle("grid-column-start"),
-        colDeltaMin: 1 - getStyle("grid-column-start"),
+        colDeltaMax: gridCols + 1 - getColStyle("grid-column-end"),
-        colDeltaMax:
-          parseInt(domGrid.dataset.cols) + 1 - getStyle("grid-column-end"),
       }
       handleEvent(e)
     }