Add initial work on grid layouts in containers

packages/client/manifest.json

@@ -119,6 +119,48 @@
     },
     "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "layout",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "Flex",
+            "value": "flex",
+            "barIcon": "ModernGridView",
+            "barTitle": "Flex layout"
+          },
+          {
+            "label": "Grid",
+            "value": "grid",
+            "barIcon": "ViewGrid",
+            "barTitle": "Grid layout"
+          }
+        ],
+        "defaultValue": "flex"
+      },
+      {
+        "type": "number",
+        "label": "Columns",
+        "key": "cols",
+        "placeholder": 12,
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid"
+        }
+      },
+      {
+        "type": "number",
+        "label": "Rows",
+        "key": "rows",
+        "placeholder": 12,
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid"
+        }
+      },
       {
         "type": "select",
         "label": "Direction",
@@ -139,7 +181,12 @@
             "barTitle": "Row layout"
           }
         ],
-        "defaultValue": "column"
+        "defaultValue": "column",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -173,7 +220,12 @@
             "barTitle": "Align stretched horizontally"
           }
         ],
-        "defaultValue": "stretch"
+        "defaultValue": "stretch",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -207,7 +259,12 @@
             "barTitle": "Align stretched vertically"
           }
         ],
-        "defaultValue": "top"
+        "defaultValue": "top",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -229,7 +286,12 @@
             "barTitle": "Grow container"
           }
         ],
-        "defaultValue": "shrink"
+        "defaultValue": "shrink",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "select",
@@ -255,7 +317,12 @@
             "value": "L"
           }
         ],
-        "defaultValue": "M"
+        "defaultValue": "M",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "boolean",
@@ -263,7 +330,12 @@
         "key": "wrap",
         "showInBar": true,
         "barIcon": "ModernGridView",
-        "barTitle": "Wrap"
+        "barTitle": "Wrap",
+        "dependsOn": {
+          "setting": "layout",
+          "value": "grid",
+          "invert": true
+        }
       },
       {
         "type": "event",
@@ -7167,23 +7239,6 @@
       "scope": "local"
     }
   },
-  "grid": {
-    "name": "Grid",
-    "icon": "ViewGrid",
-    "hasChildren": true,
-    "settings": [
-      {
-        "type": "number",
-        "key": "cols",
-        "label": "Columns"
-      },
-      {
-        "type": "number",
-        "key": "rows",
-        "label": "Rows"
-      }
-    ]
-  },
   "gridblock": {
     "name": "Table",
     "icon": "Table",

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

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
-  import Container from "./Container.svelte"
+  import Container from "./container/Container.svelte"
 
   const { Provider, ContextScopes } = getContext("sdk")
   const component = getContext("component")

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

@@ -0,0 +1,12 @@
+<script>
+  import GridContainer from "./GridContainer.svelte"
+  import FlexContainer from "./FlexContainer.svelte"
+
+  export let layout = "flex"
+
+  $: component = layout === "grid" ? GridContainer : FlexContainer
+</script>
+
+<svelte:component this={component} {...$$props}>
+  <slot />
+</svelte:component>

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

@@ -7,6 +7,9 @@
   export let cols = 12
   export let rows = 12
 
+  $: cols = cols || 12
+  $: rows = rows || 12
+
   // 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)

packages/client/src/components/app/index.js

@@ -13,7 +13,7 @@ import "@spectrum-css/page/dist/index-vars.css"
 export { default as Placeholder } from "./Placeholder.svelte"
 
 // User facing components
-export { default as container } from "./Container.svelte"
+export { default as container } from "./container/Container.svelte"
 export { default as section } from "./Section.svelte"
 export { default as dataprovider } from "./DataProvider.svelte"
 export { default as divider } from "./Divider.svelte"
@@ -35,7 +35,6 @@ export { default as spectrumcard } from "./SpectrumCard.svelte"
 export { default as tag } from "./Tag.svelte"
 export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
-export { default as grid } from "./Grid.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
 export { default as modal } from "./Modal.svelte"
 export { default as gridblock } from "./GridBlock.svelte"

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

@@ -25,7 +25,7 @@
       e.target
         .closest?.(".component")
         ?.parentNode.closest(".component")
-        ?.childNodes[0].classList.contains("grid") ||
+        ?.childNodes[0].classList?.contains("grid") ||
       e.target.classList.contains("anchor")
     )
   }

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

@@ -1,7 +1,6 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { domDebounce } from "utils/domDebounce"
   import { builderStore } from "stores"
 
   export let componentId = null
@@ -36,20 +35,20 @@
 
   $: visibleIndicators = state.indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
-  $: $$props, debouncedUpdate()
+  // $: $$props, updatePosition()
 
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
     const domNode = component?.children[0]
 
     // Ignore grid itself
-    if (domNode?.classList.contains("grid")) {
+    if (domNode?.classList?.contains("grid")) {
       return false
     }
 
     return component?.parentNode
       ?.closest?.(".component")
-      ?.childNodes[0]?.classList.contains("grid")
+      ?.childNodes[0]?.classList?.contains("grid")
   }
 
   const createIntersectionCallback = idx => entries => {
@@ -145,17 +144,16 @@
       })
     })
   }
-  const debouncedUpdate = domDebounce(updatePosition)
 
   onMount(() => {
-    debouncedUpdate()
+    updatePosition()
-    interval = setInterval(debouncedUpdate, 100)
+    interval = setInterval(updatePosition, 100)
-    document.addEventListener("scroll", debouncedUpdate, true)
+    document.addEventListener("scroll", updatePosition, true)
   })
 
   onDestroy(() => {
     clearInterval(interval)
-    document.removeEventListener("scroll", debouncedUpdate, true)
+    document.removeEventListener("scroll", updatePosition, true)
     observers.forEach(o => o.disconnect())
   })
 </script>