Fixed initial node when visiting page
This commit is contained in:
parent
303c7d9b2d
commit
b1c85d96e9
3 changed files with 29 additions and 17 deletions
|
|
@ -11,11 +11,21 @@ export class App {
|
||||||
this.crumbsElement = document.getElementById('crumbs')
|
this.crumbsElement = document.getElementById('crumbs')
|
||||||
this.nodeUI = document.getElementById('note')
|
this.nodeUI = document.getElementById('note')
|
||||||
|
|
||||||
|
|
||||||
_mbus.subscribe('TREE_TRUNK_FETCHED', async () => {
|
_mbus.subscribe('TREE_TRUNK_FETCHED', async () => {
|
||||||
document.getElementById('tree').append(this.tree.render())
|
// Subscribing to the start node existing after the tree trunk is
|
||||||
|
// fetched since the NODE_COMPONENT_EXIST message isn't sent for the
|
||||||
|
// 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.tree.render())
|
||||||
document.getElementById('tree-nodes')?.focus()
|
document.getElementById('tree-nodes')?.focus()
|
||||||
|
|
||||||
const startNode = await this.getStartNode()
|
if (startNode.UUID == ROOT_NODE)
|
||||||
this.goToNode(startNode.UUID, false, false)
|
this.goToNode(startNode.UUID, false, false)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -41,7 +51,7 @@ export class App {
|
||||||
if (e.startsWith('page-'))
|
if (e.startsWith('page-'))
|
||||||
classList.remove(e)
|
classList.remove(e)
|
||||||
})
|
})
|
||||||
classList.add('page-'+page)
|
classList.add('page-' + page)
|
||||||
})
|
})
|
||||||
|
|
||||||
window.addEventListener('keydown', event => this.keyHandler(event))
|
window.addEventListener('keydown', event => this.keyHandler(event))
|
||||||
|
|
|
||||||
|
|
@ -456,7 +456,7 @@ class NodeHistoryStore extends SimpleNodeStore {
|
||||||
request.onerror = (event) => reject(event.target.error)
|
request.onerror = (event) => reject(event.target.error)
|
||||||
})
|
})
|
||||||
}//}}}
|
}//}}}
|
||||||
hasNode(uuid, updated) {
|
hasNode(uuid, updated) {// {{{
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const req = this.db
|
const req = this.db
|
||||||
.transaction(['nodes', this.storeName], 'readonly')
|
.transaction(['nodes', this.storeName], 'readonly')
|
||||||
|
|
@ -472,7 +472,7 @@ class NodeHistoryStore extends SimpleNodeStore {
|
||||||
reject(event.target.error)
|
reject(event.target.error)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}// }}}
|
||||||
retrievePage(uuid, perPage, page) {// {{{
|
retrievePage(uuid, perPage, page) {// {{{
|
||||||
return new Promise((resolve, _reject) => {
|
return new Promise((resolve, _reject) => {
|
||||||
const cursor = this.db
|
const cursor = this.db
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { ROOT_NODE } from 'node_store'
|
import { ROOT_NODE } from 'node_store'
|
||||||
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
|
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
|
||||||
import { Color, Solver } from './lib/css_colorize.mjs'
|
import { Color, Solver } from './lib/css_colorize.mjs'
|
||||||
|
import { Node } from './page_node.mjs'
|
||||||
|
|
||||||
// TreeExpandedHandler is responsible for collapsing or expanding
|
// TreeExpandedHandler is responsible for collapsing or expanding
|
||||||
// the node tree, wide view or narrow "mobile" view.
|
// the node tree, wide view or narrow "mobile" view.
|
||||||
|
|
@ -152,21 +153,21 @@ export class N2Tree extends CustomHTMLElement {
|
||||||
let result = solver.solve()
|
let result = solver.solve()
|
||||||
// console.log(result.filter)
|
// console.log(result.filter)
|
||||||
}// }}}
|
}// }}}
|
||||||
render() {// {{{
|
async render() {// {{{
|
||||||
if (this.rendered)
|
if (this.rendered)
|
||||||
alert('Tree should only be rendered once.')
|
alert('Tree should only be rendered once.')
|
||||||
|
|
||||||
for (const node of this.treeTrunk) {
|
|
||||||
const treenode = new N2TreeNode(this, node)
|
this.expandedNodes[ROOT_NODE] = true
|
||||||
this.treeNodeComponents[node.UUID] = treenode
|
const startnode = await nodeStore.get(ROOT_NODE)
|
||||||
this.elTreenodes.appendChild(treenode.render())
|
const starttreenode = new N2TreeNode(this, startnode, null)
|
||||||
}
|
this.treeNodeComponents[startnode.UUID] = starttreenode
|
||||||
|
this.elTreenodes.appendChild(starttreenode.render())
|
||||||
|
|
||||||
this.rendered = true
|
this.rendered = true
|
||||||
return this
|
return this
|
||||||
}// }}}
|
}// }}}
|
||||||
reset() {// {{{
|
reset() {// {{{
|
||||||
console.log('tree reset')
|
|
||||||
this.treeNodeComponents = {}
|
this.treeNodeComponents = {}
|
||||||
this.treeTrunk = []
|
this.treeTrunk = []
|
||||||
this.rendered = false
|
this.rendered = false
|
||||||
|
|
@ -306,7 +307,7 @@ export class N2Tree extends CustomHTMLElement {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) {
|
if (n.isFirstSibling()) {
|
||||||
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: false, dontExpand: true })
|
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: false, dontExpand: true })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
@ -358,8 +359,6 @@ export class N2Tree extends CustomHTMLElement {
|
||||||
|
|
||||||
if (n.isFirstSibling()) {
|
if (n.isFirstSibling()) {
|
||||||
parent = n.getParent()
|
parent = n.getParent()
|
||||||
if (parent?.UUID === ROOT_NODE)
|
|
||||||
return
|
|
||||||
_mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: false, dontExpand: true })
|
_mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: false, dontExpand: true })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
@ -562,7 +561,9 @@ export class N2TreeNode extends CustomHTMLElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
// The expand icon <img> is only changed to not get a flickering when re-rendering.
|
// The expand icon <img> is only changed to not get a flickering when re-rendering.
|
||||||
if (!this.node.hasChildren())
|
if (this.node.UUID === ROOT_NODE)
|
||||||
|
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`)
|
||||||
|
else if (!this.node.hasChildren())
|
||||||
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
|
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
|
||||||
else if (this.tree.getNodeExpanded(this.node.UUID))
|
else if (this.tree.getNodeExpanded(this.node.UUID))
|
||||||
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`)
|
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`)
|
||||||
|
|
@ -578,6 +579,7 @@ export class N2TreeNode extends CustomHTMLElement {
|
||||||
if (treenode === undefined) {
|
if (treenode === undefined) {
|
||||||
treenode = new N2TreeNode(this.tree, node, this)
|
treenode = new N2TreeNode(this.tree, node, this)
|
||||||
this.tree.treeNodeComponents[node.UUID] = treenode
|
this.tree.treeNodeComponents[node.UUID] = treenode
|
||||||
|
_mbus.dispatch(`NODE_COMPONENT_EXIST_${node.UUID}`)
|
||||||
}
|
}
|
||||||
return treenode
|
return treenode
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue