From 0ea9b157c789487e9c5bc71511eb57ac4902f9fc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 13:58:29 +0100
Subject: [PATCH] Further refactoring to grid nested layouts

---
 .../client/src/components/Component.svelte    |  6 ++--
 .../app/container/GridContainer.svelte        |  2 +-
 .../preview/GridStylesButton.svelte           | 11 +++----
 .../src/components/preview/SettingsBar.svelte | 31 +++++++++++++++----
 .../components/preview/SettingsButton.svelte  | 11 +++----
 .../preview/SettingsColorPicker.svelte        |  5 +--
 .../components/preview/SettingsPicker.svelte  |  5 +--
 packages/client/src/utils/grid.js             | 10 +++---
 8 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 771cb8b0e6..85c6dc6e36 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -200,11 +200,12 @@
 
   // Build up full styles and split them into variables and non-variables
   $: baseStyles = getBaseStyles(definition)
-  $: parsedStyles = parseStyles({
+  $: styles = {
     ...baseStyles,
     ...instance._styles?.normal,
     ...ephemeralStyles,
-  })
+  }
+  $: parsedStyles = parseStyles(styles)
   $: wrapperCSS = buildStyleString(parsedStyles.variables)
 
   // Update component context
@@ -214,6 +215,7 @@
     styles: {
       ...instance._styles,
       normal: parsedStyles.nonVariables,
+      variables: parsedStyles.variables,
       custom: customCSS,
       id,
       empty: emptyState,
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index a5450ffe4c..3e58fef787 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -95,7 +95,7 @@
   /* Ensure all top level children have grid styles applied */
   .grid :global(> .component) {
     display: flex;
-    overflow: hidden;
+    overflow: auto;
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
diff --git a/packages/client/src/components/preview/GridStylesButton.svelte b/packages/client/src/components/preview/GridStylesButton.svelte
index 0a313bba53..e168754f3b 100644
--- a/packages/client/src/components/preview/GridStylesButton.svelte
+++ b/packages/client/src/components/preview/GridStylesButton.svelte
@@ -1,14 +1,16 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
   import { getGridVarValue } from "utils/grid"
 
   export let style
   export let value
   export let icon
   export let title
+  export let gridStyles
+  export let componentId
 
-  $: currentValue = getGridVarValue($componentStore.selectedComponent, style)
+  $: currentValue = getGridVarValue(gridStyles, style)
   $: active = currentValue === value
 </script>
 
@@ -18,10 +20,7 @@
   {title}
   class:active
   on:click={() => {
-    builderStore.actions.updateStyles(
-      { [style]: value },
-      $componentStore.selectedComponent._id
-    )
+    builderStore.actions.updateStyles({ [style]: value }, componentId)
   }}
 >
   <Icon name={icon} size="S" />
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 540204f817..1fecec5376 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -20,11 +20,12 @@
 
   // TODO: respect dependsOn keys
 
-  $: id = $builderStore.selectedComponentId
-  $: parent = findComponentParent($builderStore.screen.props, id)
-  $: instance = componentStore.actions.getComponentInstance(id)
-  $: state = $instance?.state
+  $: componentId = $builderStore.selectedComponentId
+  $: component = $componentStore.selectedComponent
   $: definition = $componentStore.selectedComponentDefinition
+  $: parent = findComponentParent($builderStore.screen.props, componentId)
+  $: instance = componentStore.actions.getComponentInstance(componentId)
+  $: state = $instance?.state
   $: showBar =
     definition?.showSettingsBar !== false &&
     !$dndIsDragging &&
@@ -36,12 +37,13 @@
     }
   }
   $: settings = getBarSettings(definition)
-  $: isRoot = id === $builderStore.screen?.props?._id
+  $: isRoot = componentId === $builderStore.screen?.props?._id
   $: insideGrid =
     parent?._component.endsWith("/container") && parent.layout === "grid"
   $: showGridStyles = insideGrid && definition?.grid?.showControls !== false
   $: gridHAlignVar = $getGridVar("h-align")
   $: gridVAlignVar = $getGridVar("v-align")
+  $: gridStyles = $state?.styles?.variables
 
   const getBarSettings = definition => {
     let allSettings = []
@@ -141,7 +143,7 @@
 {#if showBar}
   <div
     class="bar"
-    style="top: {top}px; left: {left}px;"
+    style="top:{top}px; left:{left}px;"
     bind:this={self}
     class:visible={measured}
   >
@@ -151,24 +153,32 @@
         value="start"
         icon="AlignLeft"
         title="Align left"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="center"
         icon="AlignCenter"
         title="Align center"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="end"
         icon="AlignRight"
         title="Align right"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="stretch"
         icon="MoveLeftRight"
         title="Stretch horizontally"
+        {gridStyles}
+        {componentId}
       />
       <div class="divider" />
       <GridStylesButton
@@ -176,24 +186,32 @@
         value="start"
         icon="AlignTop"
         title="Align top"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="center"
         icon="AlignMiddle"
         title="Align middle"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="end"
         icon="AlignBottom"
         title="Align bottom"
+        {gridStyles}
+        {componentId}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="stretch"
         icon="MoveUpDown"
         title="Stretch vertically"
+        {gridStyles}
+        {componentId}
       />
       <div class="divider" />
     {/if}
@@ -206,6 +224,7 @@
               value={option.value}
               icon={option.barIcon}
               title={option.barTitle || option.label}
+              {component}
             />
           {/each}
         {:else}
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index 446a367282..a93ffb77af 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -1,18 +1,19 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop
   export let value
   export let icon
   export let title
-  export let rotate = false
   export let bool = false
   export let active = false
+  export let component
 
   const dispatch = createEventDispatcher()
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+
+  $: currentValue = component?.[prop]
   $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
 
@@ -20,7 +21,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   {title}
-  class:rotate
   class:active
   on:click={() => {
     if (prop) {
@@ -50,7 +50,4 @@
     background-color: rgba(13, 102, 208, 0.1);
     color: var(--spectrum-global-color-blue-600);
   }
-  .rotate {
-    transform: rotate(90deg);
-  }
 </style>
diff --git a/packages/client/src/components/preview/SettingsColorPicker.svelte b/packages/client/src/components/preview/SettingsColorPicker.svelte
index b078d048d2..a292d7d838 100644
--- a/packages/client/src/components/preview/SettingsColorPicker.svelte
+++ b/packages/client/src/components/preview/SettingsColorPicker.svelte
@@ -1,10 +1,11 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>
diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 8b83729fde..3900d065e8 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -1,12 +1,13 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
 
   export let prop
   export let options
   export let label
+  export let component
 
-  $: currentValue = $componentStore.selectedComponent?.[prop]
+  $: currentValue = component?.[prop]
 </script>
 
 <div>
diff --git a/packages/client/src/utils/grid.js b/packages/client/src/utils/grid.js
index a357f86de4..5879232e89 100644
--- a/packages/client/src/utils/grid.js
+++ b/packages/client/src/utils/grid.js
@@ -1,5 +1,5 @@
-import { builderStore } from "stores"
-import { derived, get } from "svelte/store"
+import { builderStore, componentStore } from "stores"
+import { derived, get, readable } from "svelte/store"
 
 /**
  * We use CSS variables on components to control positioning and layout of
@@ -91,13 +91,13 @@ export const getBaseGridVars = definition => {
 }
 
 // Gets the current value of a certain grid CSS variable for a component
-export const getGridVarValue = (component, variable) => {
+export const getGridVarValue = (styles, variable) => {
   // Try the desired variable
-  let val = component?._styles?.normal?.[variable]
+  let val = styles?.[variable]
 
   // Otherwise try the other device variables
   if (!val) {
-    val = component?._styles?.normal?.[getOtherDeviceGridVar(variable)]
+    val = styles?.[getOtherDeviceGridVar(variable)]
   }
 
   // Otherwise use the default