Update when grid lines are shown, show sibling borders, add component padding, remove row and column settings

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte

@@ -96,32 +96,6 @@
       },
     ]
 
-    // Add grid layout settings if required
-    if (screen.props.layout === "grid") {
-      settings = settings.concat([
-        {
-          key: "props.cols",
-          label: "Columns",
-          control: Stepper,
-          defaultValue: 24,
-          props: {
-            min: 2,
-            max: 50,
-          },
-        },
-        {
-          key: "props.rows",
-          label: "Rows",
-          control: Stepper,
-          defaultValue: 24,
-          props: {
-            min: 2,
-            max: 50,
-          },
-        },
-      ])
-    }
-
     return settings
   }
 

packages/client/manifest.json

@@ -145,32 +145,6 @@
         ],
         "defaultValue": "flex"
       },
-      {
-        "type": "number",
-        "label": "Columns",
-        "key": "cols",
-        "placeholder": 12,
-        "defaultValue": 12,
-        "min": 2,
-        "max": 50,
-        "dependsOn": {
-          "setting": "layout",
-          "value": "grid"
-        }
-      },
-      {
-        "type": "number",
-        "label": "Rows",
-        "key": "rows",
-        "placeholder": 12,
-        "defaultValue": 12,
-        "min": 2,
-        "max": 50,
-        "dependsOn": {
-          "setting": "layout",
-          "value": "grid"
-        }
-      },
       {
         "type": "select",
         "label": "Direction",

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

@@ -480,10 +480,10 @@
     position: relative;
     padding: 32px;
   }
-  .main:has(.screenslot-dom > .component > .grid) {
+  /*  .main:has(.screenslot-dom > .component > .grid) {
     padding-top: 0;
     padding-bottom: 0;
-  }
+  }*/
   .layout--none .main {
     padding: 0;
   }

packages/client/src/components/app/container/GridContainer.svelte

@@ -2,19 +2,18 @@
   import { getContext } from "svelte"
 
   const component = getContext("component")
-  const { styleable, builderStore } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const context = getContext("context")
 
-  export let cols = 12
+  const cols = 12
-  export let rows = 12
+  const rowHeight = 24
 
   let width
   let height
 
-  $: cols = cols || 12
-  $: rows = rows || 12
   $: mobile = $context.device.mobile
   $: empty = $component.empty
+  $: rows = Math.max(1, Math.floor(height / rowHeight))
   $: colSize = width / cols
   $: rowSize = height / rows
 </script>
@@ -22,7 +21,6 @@
 <div
   class="grid"
   class:mobile
-  class:builder={$builderStore.inBuilder}
   bind:clientWidth={width}
   bind:clientHeight={height}
   use:styleable={{
@@ -39,13 +37,11 @@
   data-rows={rows}
   data-cols={cols}
 >
-  {#if $builderStore.inBuilder}
   <div class="underlay">
     {#each { length: cols * rows } as _}
       <div class="placeholder" />
     {/each}
   </div>
-  {/if}
 
   <!-- Only render the slot if not empty, as we don't want the placeholder -->
   {#if !empty}
@@ -57,32 +53,53 @@
   .grid {
     position: relative;
     height: 400px;
-    gap: 0;
+    --spacing: 10;
-  }
-  .grid.builder {
-    background: var(--spectrum-alias-background-color-secondary);
   }
+
   .grid,
   .underlay {
     display: grid;
     grid-template-rows: repeat(var(--rows), 1fr);
     grid-template-columns: repeat(var(--cols), 1fr);
+    gap: 0;
   }
   .underlay {
+    display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    border: 1px solid var(--spectrum-global-color-gray-900);
+    border-top: 1px solid var(--spectrum-global-color-gray-900);
-    opacity: 0.07;
+    border-left: 1px solid var(--spectrum-global-color-gray-900);
+    opacity: 0.1;
     pointer-events: none;
   }
   .underlay {
     z-index: 0;
   }
   .placeholder {
-    border: 1px solid var(--spectrum-global-color-gray-900);
+    border-bottom: 1px solid var(--spectrum-global-color-gray-900);
+    border-right: 1px solid var(--spectrum-global-color-gray-900);
+  }
+
+  /* Highlight grid lines when resizing children */
+  :global(.grid.highlight > .underlay) {
+    display: grid;
+  }
+
+  /* Highlight sibling borders when resizing childern */
+  :global(.grid.highlight > .component:not(.dragging):after) {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--spectrum-global-color-static-blue-200);
+    pointer-events: none;
+    z-index: 1;
+    top: 0;
+    left: 0;
   }
 
   /* Ensure all top level children have grid styles applied */
@@ -90,6 +107,9 @@
     display: flex;
     overflow: auto;
     pointer-events: all;
+    position: relative;
+    padding: 5px;
+    margin: 5px;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
@@ -98,7 +118,12 @@
       --grid-desktop-col-end,
       var(
         --grid-mobile-col-end,
-        round(up, calc(var(--default-width) / var(--col-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1
+          )
+        )
       )
     );
     --row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start, 1));
@@ -106,7 +131,12 @@
       --grid-desktop-row-end,
       var(
         --grid-mobile-row-end,
-        round(up, calc(var(--default-height) / var(--row-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1
+          )
+        )
       )
     );
 
@@ -137,7 +167,12 @@
       --grid-mobile-col-end,
       var(
         --grid-desktop-col-end,
-        round(up, calc(var(--default-width) / var(--col-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1
+          )
+        )
       )
     );
     --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start, 1));
@@ -145,7 +180,12 @@
       --grid-mobile-row-end,
       var(
         --grid-desktop-row-end,
-        round(up, calc(var(--default-height) / var(--row-size) + 1))
+        round(
+          up,
+          calc(
+            (var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1
+          )
+        )
       )
     );
 

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

@@ -4,7 +4,7 @@
   import { Utils, memo } from "@budibase/frontend-core"
   import {
     isGridEvent,
-    getGridParentID,
+    getGridParent,
     GridParams,
     getGridVar,
   } from "utils/grid"
@@ -62,6 +62,9 @@
     const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
 
     const domGrid = getDOMNode(gridId)
+    if (!domGrid) {
+      return
+    }
     const cols = parseInt(domGrid.dataset.cols)
     const rows = parseInt(domGrid.dataset.rows)
     const { width, height } = domGrid.getBoundingClientRect()
@@ -107,7 +110,7 @@
       }
       gridStyles.set(newStyles)
     }
-  }, 100)
+  }, 10)
 
   const handleEvent = e => {
     e.preventDefault()
@@ -140,16 +143,20 @@
 
     // Find grid parent
     const domComponent = getDOMNode(id)
-    const gridId = getGridParentID(domComponent)
+    const domGrid = getGridParent(domComponent)
-    if (!gridId) {
+    if (!domGrid) {
       return
     }
 
+    // Apply active class to grid
+    domComponent.parentNode.classList.add("dragging")
+    domGrid.classList.add("highlight")
+
     // Update state
     dragInfo = {
       domTarget: e.target,
       id,
-      gridId,
+      gridId: domGrid.parentNode.dataset.id,
       mode,
       side,
     }
@@ -168,10 +175,12 @@
     const { id, gridId } = dragInfo
     const domComponent = getDOMNode(id)
     const domGrid = getDOMNode(gridId)
+    if (!domComponent || !domGrid) {
+      return
+    }
     const gridCols = parseInt(domGrid.dataset.cols)
     const gridRows = parseInt(domGrid.dataset.rows)
     const styles = getComputedStyle(domComponent.parentNode)
-    if (domGrid) {
     dragInfo.grid = {
       startX: e.clientX,
       startY: e.clientY,
@@ -184,7 +193,6 @@
     }
     handleEvent(e)
   }
-  }
 
   const onDragOver = e => {
     if (!dragInfo?.grid) {
@@ -195,15 +203,26 @@
 
   // Callback when drag stops (whether dropped or not)
   const stopDragging = async () => {
+    if (!dragInfo) {
+      return
+    }
+    const { id, gridId, domTarget } = dragInfo
+
     // Save changes
     if ($gridStyles) {
-      await builderStore.actions.updateStyles($gridStyles, dragInfo.id)
+      await builderStore.actions.updateStyles($gridStyles, id)
     }
 
-    // Reset listener
+    // Reset DOM
-    if (dragInfo?.domTarget) {
+    const domComponent = getDOMNode(id)
-      dragInfo.domTarget.removeEventListener("dragend", stopDragging)
+    if (domComponent) {
+      domComponent.parentNode.classList.remove("dragging")
     }
+    const domGrid = getDOMNode(gridId)
+    if (domGrid) {
+      domGrid.classList.remove("highlight")
+    }
+    domTarget.removeEventListener("dragend", stopDragging)
 
     // Reset state
     dragInfo = null

packages/client/src/utils/grid.js

@@ -60,8 +60,8 @@ export const isGridChild = node => {
 }
 
 // Gets the component ID of the closest parent grid
-export const getGridParentID = node => {
+export const getGridParent = node => {
-  return node?.parentNode?.closest(".grid")?.parentNode.dataset.id
+  return node?.parentNode?.closest(".grid")
 }
 
 // Svelte action to apply required class names and styles to our component