Ensure the component tree containing the selected component cannot be hidden
This commit is contained in:
parent
7157b29da0
commit
53ce97b9de
2 changed files with 25 additions and 4 deletions
|
@ -3,7 +3,7 @@ import { getAutomationStore } from "./store/automation"
|
|||
import { getThemeStore } from "./store/theme"
|
||||
import { derived, writable } from "svelte/store"
|
||||
import { FrontendTypes, LAYOUT_NAMES } from "../constants"
|
||||
import { findComponent } from "./componentUtils"
|
||||
import { findComponent, findComponentPath } from "./componentUtils"
|
||||
|
||||
export const store = getFrontendStore()
|
||||
export const automationStore = getAutomationStore()
|
||||
|
@ -29,6 +29,16 @@ export const selectedComponent = derived(
|
|||
}
|
||||
)
|
||||
|
||||
export const selectedComponentPath = derived(
|
||||
[store, currentAsset],
|
||||
([$store, $currentAsset]) => {
|
||||
return findComponentPath(
|
||||
$currentAsset.props,
|
||||
$store.selectedComponentId
|
||||
).map(component => component._id)
|
||||
}
|
||||
)
|
||||
|
||||
export const currentAssetId = derived(store, $store => {
|
||||
return $store.currentFrontEndType === FrontendTypes.SCREEN
|
||||
? $store.selectedScreenId
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
import NavItem from "components/common/NavItem.svelte"
|
||||
import { capitalise } from "helpers"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { selectedComponentPath } from "builderStore"
|
||||
|
||||
export let components = []
|
||||
export let currentComponent
|
||||
|
@ -71,10 +72,20 @@
|
|||
notifications.error("Error saving component")
|
||||
}
|
||||
}
|
||||
|
||||
const isOpen = (component, selectedComponentPath, closedNodes) => {
|
||||
if (!component?._children?.length) {
|
||||
return false
|
||||
}
|
||||
if (selectedComponentPath.includes(component._id)) {
|
||||
return true
|
||||
}
|
||||
return !closedNodes[component._id]
|
||||
}
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
{#each components as component, index (component._id)}
|
||||
{#each components || [] as component, index (component._id)}
|
||||
<li on:click|stopPropagation={() => selectComponent(component)}>
|
||||
{#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
|
||||
<div
|
||||
|
@ -97,12 +108,12 @@
|
|||
withArrow
|
||||
indentLevel={level + 1}
|
||||
selected={$store.selectedComponentId === component._id}
|
||||
opened={!closedNodes[component._id] && component?._children?.length}
|
||||
opened={isOpen(component, $selectedComponentPath, closedNodes)}
|
||||
>
|
||||
<ComponentDropdownMenu {component} />
|
||||
</NavItem>
|
||||
|
||||
{#if component._children && !closedNodes[component._id]}
|
||||
{#if isOpen(component, $selectedComponentPath, closedNodes)}
|
||||
<svelte:self
|
||||
components={component._children}
|
||||
{currentComponent}
|
||||
|
|
Loading…
Reference in a new issue