wip

packages/builder/src/helpers/components.js

@@ -279,3 +279,11 @@ export const buildContextTreeLookupMap = rootComponent => {
   })
   return map
 }
+
+// Get a flat list of ids for all descendants of a component
+export const getChildIdsForComponent = component => {
+  return [
+    component._id,
+    ...(component?._children ?? []).map(getChildIdsForComponent).flat(1)
+  ]
+}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -130,14 +130,9 @@
       loading = false
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
+      console.log("selecting");
       componentStore.select(data.id)
-
+      componentTreeNodesStore.makeNodeVisible(data.id)
-      const componentPath = findComponentPath(
-        $selectedScreen?.props,
-        data.id
-      ).map(component => component._id)
-
-      componentTreeNodesStore.expandNodes(componentPath)
     } else if (type === "hover-component") {
       hoverStore.hover(data.id, false)
     } else if (type === "update-prop") {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte

@@ -6,7 +6,7 @@
     selectedComponent,
     componentTreeNodesStore,
   } from "stores/builder"
-  import { findComponent } from "helpers/components"
+  import { findComponent, getChildIdsForComponent } from "helpers/components"
   import { goto, isActive } from "@roxi/routify"
   import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -63,40 +63,23 @@
       componentStore.selectNext()
     },
     ["ArrowRight"]: component => {
-      componentTreeNodesStore.expandNode(component._id)
+      componentTreeNodesStore.expandNodes([component._id])
     },
     ["ArrowLeft"]: component => {
       componentStore.select(component._id)
-      componentTreeNodesStore.collapseNode(component._id)
+      componentTreeNodesStore.collapseNodes([component._id])
     },
     ["Ctrl+ArrowRight"]: component => {
-      componentTreeNodesStore.expandNode(component._id)
+      const childIds = getChildIdsForComponent(component)
-
+      componentTreeNodesStore.expandNodes(childIds)
-      const expandChildren = component => {
-        const children = component._children ?? []
-
-        children.forEach(child => {
-          componentTreeNodesStore.expandNode(child._id)
-          expandChildren(child)
-        })
-      }
-
-      expandChildren(component)
     },
     ["Ctrl+ArrowLeft"]: component => {
+      // Select the collapsing root component to ensure the currently selected component is hidden
+      // due to this action
       componentStore.select(component._id)
-      componentTreeNodesStore.collapseNode(component._id)
 
-      const collapseChildren = component => {
+      const childIds = getChildIdsForComponent(component)
-        const children = component._children ?? []
+      componentTreeNodesStore.collapseNodes(childIds)
-
-        children.forEach(child => {
-          componentTreeNodesStore.collapseNode(child._id)
-          collapseChildren(child)
-        })
-      }
-
-      collapseChildren(component)
     },
     ["Escape"]: () => {
       if ($isActive(`./:componentId/new`)) {

packages/builder/src/stores/builder/componentTreeNodes.js

@@ -1,5 +1,9 @@
 import { get } from 'svelte/store'
 import { createSessionStorageStore } from "@budibase/frontend-core"
+import { selectedScreen as selectedScreenStore } from "./screens"
+import {
+  findComponentPath,
+} from "helpers/components"
 
 const baseStore = createSessionStorageStore("openNodes", {})
 
@@ -11,14 +15,6 @@ const toggleNode = componentId => {
   })
 }
 
-const expandNode = componentId => {
-  baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = true
-
-    return openNodes
-  })
-}
-
 const expandNodes = componentIds => {
   baseStore.update(openNodes => {
     const newNodes = Object.fromEntries(
@@ -29,11 +25,34 @@ const expandNodes = componentIds => {
   })
 }
 
-const collapseNode = componentId => {
+const collapseNodes = componentIds => {
   baseStore.update(openNodes => {
-    openNodes[`nodeOpen-${componentId}`] = false
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, false])
+    )
 
-    return openNodes
+    return { ...openNodes, ...newNodes }
+  })
+}
+
+
+// Will ensure all parents of a node are expanded so that it is visible in the tree
+const makeNodeVisible = componentId => {
+  const selectedScreen = get(selectedScreenStore);
+
+  const path = findComponentPath(
+    selectedScreen.props,
+    componentId
+  )
+
+  const componentIds = path.map(component => component._id)
+
+  baseStore.update(openNodes => {
+    const newNodes = Object.fromEntries(
+      componentIds.map(id => [`nodeOpen-${id}`, true])
+    )
+
+    return { ...openNodes, ...newNodes }
   })
 }
 
@@ -45,9 +64,9 @@ const isNodeExpanded = componentId => {
 const store = {
   subscribe: baseStore.subscribe,
   toggleNode,
-  expandNode,
   expandNodes,
-  collapseNode,
+  makeNodeVisible,
+  collapseNodes,
   isNodeExpanded
 }
 

packages/builder/src/stores/builder/components.js

@@ -654,19 +654,10 @@ export class ComponentStore extends BudiStore {
       state.selectedScreenId = targetScreenId
       state.selectedComponentId = newComponentId
 
-      const targetScreen = get(screenStore).screens.find(
-        screen => screen.id === targetScreenId
-      )
-
-      const componentPathIds = findComponentPath(
-        targetScreen?.props,
-        newComponentId
-      ).map(component => component._id)
-
-      componentTreeNodesStore.expandNodes(componentPathIds)
-
       return state
     })
+
+    componentTreeNodesStore.makeNodeVisible(newComponentId)
   }
 
   getPrevious() {