Fix quick arrow navigation not collapsing nodes correctly

This commit is contained in:
Magnus Åhall 2026-06-08 20:27:43 +02:00
parent b3e5d79403
commit 4976a6ebe0
5 changed files with 60 additions and 69 deletions

View file

@ -6,11 +6,16 @@ import { Node } from 'node'
export class App {
constructor() {// {{{
this.currentNode = null
this.sidebar = new N2Sidebar() // XXX - rename this.tree
this.sidebar = new N2Sidebar()
this.crumbs = new N2Crumbs()
this.crumbsElement = document.getElementById('crumbs')
this.nodeUI = document.getElementById('note')
this.showNodeEventSequence = new ShowNodeEventSequence() // discard all GO_TO_NODE events
this.sidebar.render().then(sidebar => {
document.getElementById('tree').append(sidebar)
document.getElementById('tree-nodes')?.focus()
})
_mbus.subscribe('TREE_TRUNK_FETCHED', async () => {
// Subscribing to the start node existing after the tree trunk is
@ -18,9 +23,6 @@ export class App {
// root node itself, and the root node should be selected in the tree
// after it is rendered when the site is shown without UUID in the URL.
const startNode = await this.getStartNode()
_mbus.subscribe(`NODE_COMPONENT_EXIST_${startNode.UUID}`, () => {
this.goToNode(startNode.UUID, false, false)
})
document.getElementById('tree').append(await this.sidebar.render())
document.getElementById('tree-nodes')?.focus()
@ -187,14 +189,36 @@ export class App {
this.sidebar.setSelected(node, dontExpand)
const ancestors = await nodeStore.getNodeAncestry(node)
_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
_mbus.dispatch('NODE_UI_OPEN', node)
_mbus.dispatch('NODE_UNMODIFIED')
_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
// Scrolls node into view.
this.sidebar.makeVisible(node)
// makeVisible normally expands all ancestor nodes to make the whole chain visible.
// This is a bad idea when quickly navigating the tree, since the arrow navigation
// has collapsed nodes which the event calling goToNode can come to undo, if the
// event processing lags behind.
if (!dontExpand)
await this.sidebar.makeVisible(node, ancestors)
_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
_mbus.dispatch('NODE_UI_OPEN', { node, eventSequence: this.showNodeEventSequence.next() })
_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
_mbus.dispatch('NODE_UNMODIFIED')
}//}}}
pageIsVisible(page) {// {{{
let classList = document.querySelector('#main-page').classList
return classList.contains(page)
}// }}}
}
class ShowNodeEventSequence {
constructor() {
this.seq = 0
}
next() {
return ++this.seq
}
current() {
return this.seq
}
}
class N2Crumbs extends CustomHTMLElement {