Performance improvements

packages/client/src/components/Component.svelte

@@ -40,6 +40,7 @@
     getActionDependentContextKeys,
   } from "../utils/buttonActions.js"
   import { gridLayout } from "utils/grid.js"
+  import { memo } from "@budibase/frontend-core"
 
   export let instance = {}
   export let parent = null
@@ -53,7 +54,7 @@
   const component = getContext("component")
 
   // Create component context
-  const store = writable({})
+  const store = memo({})
   setContext("component", store)
 
   // Ref to the svelte component
@@ -206,7 +207,8 @@
   }
 
   // Metadata to pass into grid action to apply CSS
-  $: gridMetadata = {
+  let gridMetadata = memo()
+  $: gridMetadata.set({
     active:
       parent?._component.endsWith("/container") && parent?.layout === "grid",
     id,
@@ -215,7 +217,7 @@
     draggable,
     definition,
     errored: errorState,
-  }
+  })
 
   // Update component context
   $: store.set({
@@ -668,7 +670,7 @@
     data-name={name}
     data-icon={icon}
     data-parent={$component.id}
-    use:gridLayout={gridMetadata}
+    use:gridLayout={$gridMetadata}
   >
     {#if errorState}
       <ComponentErrorState

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

@@ -2,6 +2,7 @@
   import { getContext, onMount } from "svelte"
   import { writable } from "svelte/store"
   import { GridRowHeight, GridColumns } from "constants"
+  import { memo } from "@budibase/frontend-core"
 
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
@@ -12,12 +13,25 @@
   let rows = 1
   let children = writable({})
   let mounted = false
+  let styles = memo({})
 
   $: rows = calculateRequiredRows($children, mobile)
   $: mobile = $context.device.mobile
   $: empty = $component.empty
   $: colSize = width / GridColumns
   $: height = rows * GridRowHeight
+  $: styles.set({
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      "--height": `${height}px`,
+      "--cols": GridColumns,
+      "--rows": rows,
+      "--col-size": colSize,
+      "--row-size": GridRowHeight,
+    },
+    empty: false,
+  })
 
   // Calculates the minimum number of rows required to render all child
   // components, on a certain device type
@@ -104,18 +118,7 @@
   class="grid"
   class:mobile
   bind:clientWidth={width}
-  use:styleable={{
+  use:styleable={$styles}
-    ...$component.styles,
-    normal: {
-      ...$component.styles?.normal,
-      "--height": `${height}px`,
-      "--cols": GridColumns,
-      "--rows": rows,
-      "--col-size": colSize,
-      "--row-size": GridRowHeight,
-    },
-    empty: false,
-  }}
   data-cols={GridColumns}
   data-col-size={colSize}
 >
@@ -134,9 +137,6 @@
 </div>
 
 <style>
-  .grid {
-    position: relative;
-  }
   .grid,
   .underlay {
     height: var(--height) !important;

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

@@ -20,7 +20,6 @@
 
   let dragInfo
   let styles = memo()
-  let gridStyles = memo()
 
   // Grid CSS variables
   $: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
@@ -33,13 +32,11 @@
 
   // Some memoisation of primitive types for performance
   $: id = dragInfo?.id
-  $: gridId = dragInfo?.gridId
 
   // Set ephemeral styles
   $: instance = componentStore.actions.getComponentInstance(id)
-  $: gridInstance = componentStore.actions.getComponentInstance(gridId)
   $: $instance?.setEphemeralStyles(enrichComponentStyles($styles))
-  $: $gridInstance?.setEphemeralStyles($gridStyles)
+  $: $styles, console.log("new styles")
 
   // Sugar for a combination of both min and max
   const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
@@ -188,7 +185,7 @@
     if (!dragInfo) {
       return
     }
-    const { id, gridId, domTarget, domGrid, domComponent } = dragInfo
+    const { id, domTarget, domGrid, domComponent } = dragInfo
 
     // Reset DOM
     domComponent.parentNode.classList.remove("dragging")
@@ -199,14 +196,10 @@
     if ($styles) {
       await builderStore.actions.updateStyles($styles, id)
     }
-    if ($gridStyles) {
-      await builderStore.actions.updateStyles($gridStyles, gridId)
-    }
 
     // Reset state
     dragInfo = null
     styles.set(null)
-    gridStyles.set(null)
   }
 
   onMount(() => {

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

@@ -7,9 +7,7 @@
   export let icon
   export let title
   export let componentId
-  export let computedStyles
+  export let active
-
-  $: active = computedStyles?.getPropertyValue(style) === value
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

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

@@ -1,14 +1,14 @@
 <script>
-  import { onMount, onDestroy } from "svelte"
+  import { onMount, onDestroy, getContext } from "svelte"
   import SettingsButton from "./SettingsButton.svelte"
   import GridStylesButton from "./GridStylesButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore, componentStore, dndIsDragging } from "stores"
   import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
-  import { findComponentParent } from "utils/components"
+  import { getGridVar, GridParams, Devices } from "utils/grid"
-  import { getGridVar, GridParams } from "utils/grid"
 
+  const context = getContext("context")
   const verticalOffset = 36
   const horizontalOffset = 2
 
@@ -18,7 +18,10 @@
   let self
   let measured = false
   let observer
-  let computedStyles
+
+  let insideGrid = false
+  let gridHAlign
+  let gridVAlign
 
   // TODO: respect dependsOn keys
 
@@ -26,7 +29,6 @@
   $: measured, observeComputedStyles(componentId)
   $: component = $componentStore.selectedComponent
   $: definition = $componentStore.selectedComponentDefinition
-  $: parent = findComponentParent($builderStore.screen.props, componentId)
   $: instance = componentStore.actions.getComponentInstance(componentId)
   $: state = $instance?.state
   $: showBar =
@@ -34,20 +36,14 @@
     !$dndIsDragging &&
     definition &&
     !$state?.errorState
-  $: {
-    if (!showBar) {
-      measured = false
-    }
-  }
   $: settings = getBarSettings(component, definition)
   $: isRoot = componentId === $builderStore.screen?.props?._id
-  $: insideGrid =
-    parent?._component.endsWith("/container") && parent.layout === "grid"
   $: showGridStyles =
     insideGrid &&
     (definition?.grid?.hAlign !== "stretch" ||
       definition?.grid?.vAlign !== "stretch")
-  $: device = $builderStore.previewDevice
+  $: mobile = $context.device.mobile
+  $: device = mobile ? Devices.Mobile : Devices.Desktop
   $: gridHAlignVar = getGridVar(device, GridParams.HAlign)
   $: gridVAlignVar = getGridVar(device, GridParams.VAlign)
 
@@ -74,6 +70,9 @@
     }
     const id = $builderStore.selectedComponentId
     let element = document.getElementsByClassName(id)?.[0]
+
+    // Check if we're inside a grid
+    insideGrid = element.parentNode.classList.contains("grid")
     if (!insideGrid) {
       element = element?.children?.[0]
     }
@@ -92,6 +91,17 @@
       const height = self.offsetHeight
       const { scrollX, scrollY, innerWidth } = window
 
+      // Read grid metadata from data attributes
+      if (insideGrid) {
+        if (mobile) {
+          gridHAlign = element.dataset.gridMobileHAlign
+          gridVAlign = element.dataset.gridMobileVAlign
+        } else {
+          gridHAlign = element.dataset.gridDesktopHAlign
+          gridVAlign = element.dataset.gridDesktopVAlign
+        }
+      }
+
       // Vertically, always render above unless no room, then render inside
       let newTop = elBounds.top + scrollY - verticalOffset - height
       if (newTop < deviceBounds.top - 50) {
@@ -143,18 +153,13 @@
     observer?.disconnect()
     const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
     if (node) {
-      observer = new MutationObserver(() => {
+      observer = new MutationObserver(updatePosition)
-        console.log("get computed")
-        computedStyles = getComputedStyle(node)
-        updatePosition()
-      })
       observer.observe(node, {
         attributes: true,
         attributeFilter: ["style"],
         childList: false,
         subtree: false,
       })
-      computedStyles = getComputedStyle(node)
     }
   }
 
@@ -184,32 +189,32 @@
         value="start"
         icon="AlignLeft"
         title="Align left"
+        active={gridHAlign === "start"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="center"
         icon="AlignCenter"
         title="Align center"
+        active={gridHAlign === "center"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="end"
         icon="AlignRight"
         title="Align right"
+        active={gridHAlign === "end"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridHAlignVar}
         value="stretch"
         icon="MoveLeftRight"
         title="Stretch horizontally"
+        active={gridHAlign === "stretch"}
         {componentId}
-        {computedStyles}
       />
       <div class="divider" />
       <GridStylesButton
@@ -217,32 +222,32 @@
         value="start"
         icon="AlignTop"
         title="Align top"
+        active={gridVAlign === "start"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="center"
         icon="AlignMiddle"
         title="Align middle"
+        active={gridVAlign === "center"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="end"
         icon="AlignBottom"
         title="Align bottom"
+        active={gridVAlign === "end"}
         {componentId}
-        {computedStyles}
       />
       <GridStylesButton
         style={gridVAlignVar}
         value="stretch"
         icon="MoveUpDown"
         title="Stretch vertically"
+        active={gridVAlign === "stretch"}
         {componentId}
-        {computedStyles}
       />
       <div class="divider" />
     {/if}

packages/client/src/utils/grid.js

@@ -132,6 +132,8 @@ export const gridLayout = (node, metadata) => {
     }
     addDataTag("gridDesktopRowEnd", Devices.Desktop, GridParams.RowEnd)
     addDataTag("gridMobileRowEnd", Devices.Mobile, GridParams.RowEnd)
+    addDataTag("gridDesktopHAlign", Devices.Desktop, GridParams.HAlign)
+    addDataTag("gridMobileHAlign", Devices.Mobile, GridParams.HAlign)
     addDataTag("gridDesktopVAlign", Devices.Desktop, GridParams.VAlign)
     addDataTag("gridMobileVAlign", Devices.Mobile, GridParams.VAlign)
 
@@ -149,7 +151,7 @@ export const gridLayout = (node, metadata) => {
 
   // Removes the previously set up listeners
   const removeListeners = () => {
-    node.removeEventListener("click", selectComponent)
+    node.removeEventListener("click", selectComponent, false)
   }
 
   applyMetadata(metadata)