Fix flashing of missing component settings panel when deleting components

This commit is contained in:
Andrew Kingston 2024-08-02 09:40:12 +01:00
parent 8dd0658f18
commit 3630c73837
No known key found for this signature in database
3 changed files with 21 additions and 15 deletions

View File

@ -2,7 +2,11 @@
import AppPanel from "./_components/AppPanel.svelte"
import * as routify from "@roxi/routify"
import { syncURLToState } from "helpers/urlStateSync"
import { screenStore, selectedScreen } from "stores/builder"
import {
screenStore,
selectedScreen,
selectedComponent,
} from "stores/builder"
import { onDestroy } from "svelte"
import LeftPanel from "./_components/LeftPanel.svelte"

View File

@ -574,15 +574,26 @@ export class ComponentStore extends BudiStore {
return
}
// Determine the next component to select after deletion
// Determine the next component to select, and select it before deletion
// to avoid an intermediate state of no component selection
const state = get(this.store)
let nextSelectedComponentId
let nextId
if (state.selectedComponentId === component._id) {
nextSelectedComponentId = this.getNext()
if (!nextSelectedComponentId) {
nextSelectedComponentId = this.getPrevious()
nextId = this.getNext()
if (!nextId) {
nextId = this.getPrevious()
}
}
if (nextId) {
// If this is the nav, select the screen instead
if (nextId.endsWith("-navigation")) {
nextId = nextId.replace("-navigation", "-screen")
}
this.update(state => {
state.selectedComponentId = nextId
return state
})
}
// Patch screen
await screenStore.patch(screen => {
@ -601,14 +612,6 @@ export class ComponentStore extends BudiStore {
child => child._id !== component._id
)
})
// Update selected component if required
if (nextSelectedComponentId) {
this.update(state => {
state.selectedComponentId = nextSelectedComponentId
return state
})
}
}
copy(component, cut = false, selectParent = true) {

View File

@ -11,7 +11,6 @@
export let componentId
$: currentValue = getGridVarValue(gridStyles, style)
$: console.log(style, currentValue, value)
$: active = currentValue === value
</script>