From d1affc2586a8267fc1398152ab24763e84b5ee1f Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Thu, 14 Mar 2024 15:21:55 +0000 Subject: [PATCH] wip --- packages/builder/src/helpers/components.js | 8 ++++ .../[screenId]/_components/AppPreview.svelte | 9 +--- .../ComponentList/ComponentKeyHandler.svelte | 35 ++++----------- .../src/stores/builder/componentTreeNodes.js | 45 +++++++++++++------ .../builder/src/stores/builder/components.js | 13 +----- 5 files changed, 53 insertions(+), 57 deletions(-) diff --git a/packages/builder/src/helpers/components.js b/packages/builder/src/helpers/components.js index 4f4f3ed380..31864d38bb 100644 --- a/packages/builder/src/helpers/components.js +++ b/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) + ] +} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 51837b751d..19ad808504 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/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) - - const componentPath = findComponentPath( - $selectedScreen?.props, - data.id - ).map(component => component._id) - - componentTreeNodesStore.expandNodes(componentPath) + componentTreeNodesStore.makeNodeVisible(data.id) } else if (type === "hover-component") { hoverStore.hover(data.id, false) } else if (type === "update-prop") { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte index f25d21721d..b304219a36 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte +++ b/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 expandChildren = component => { - const children = component._children ?? [] - - children.forEach(child => { - componentTreeNodesStore.expandNode(child._id) - expandChildren(child) - }) - } - - expandChildren(component) + const childIds = getChildIdsForComponent(component) + componentTreeNodesStore.expandNodes(childIds) }, ["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 children = component._children ?? [] - - children.forEach(child => { - componentTreeNodesStore.collapseNode(child._id) - collapseChildren(child) - }) - } - - collapseChildren(component) + const childIds = getChildIdsForComponent(component) + componentTreeNodesStore.collapseNodes(childIds) }, ["Escape"]: () => { if ($isActive(`./:componentId/new`)) { diff --git a/packages/builder/src/stores/builder/componentTreeNodes.js b/packages/builder/src/stores/builder/componentTreeNodes.js index d23f6a232f..c64facbbc9 100644 --- a/packages/builder/src/stores/builder/componentTreeNodes.js +++ b/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 } diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js index 64699a17c8..78fad6db40 100644 --- a/packages/builder/src/stores/builder/components.js +++ b/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() {