diff --git a/static/js/app.mjs b/static/js/app.mjs index fdb3db4..b444140 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -11,12 +11,22 @@ export class App { this.crumbsElement = document.getElementById('crumbs') this.nodeUI = document.getElementById('note') + _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() - const startNode = await this.getStartNode() - this.goToNode(startNode.UUID, false, false) + if (startNode.UUID == ROOT_NODE) + this.goToNode(startNode.UUID, false, false) }) _mbus.subscribe('TREE_NODE_SELECTED', event => { @@ -41,7 +51,7 @@ export class App { if (e.startsWith('page-')) classList.remove(e) }) - classList.add('page-'+page) + classList.add('page-' + page) }) window.addEventListener('keydown', event => this.keyHandler(event)) diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs index 9e8a672..bd2a331 100644 --- a/static/js/node_store.mjs +++ b/static/js/node_store.mjs @@ -456,7 +456,7 @@ class NodeHistoryStore extends SimpleNodeStore { request.onerror = (event) => reject(event.target.error) }) }//}}} - hasNode(uuid, updated) { + hasNode(uuid, updated) {// {{{ return new Promise((resolve, reject) => { const req = this.db .transaction(['nodes', this.storeName], 'readonly') @@ -472,7 +472,7 @@ class NodeHistoryStore extends SimpleNodeStore { reject(event.target.error) } }) - } + }// }}} retrievePage(uuid, perPage, page) {// {{{ return new Promise((resolve, _reject) => { const cursor = this.db diff --git a/static/js/tree.mjs b/static/js/tree.mjs index 928d60d..6443455 100644 --- a/static/js/tree.mjs +++ b/static/js/tree.mjs @@ -1,6 +1,7 @@ import { ROOT_NODE } from 'node_store' import { CustomHTMLElement } from './lib/custom_html_element.mjs' import { Color, Solver } from './lib/css_colorize.mjs' +import { Node } from './page_node.mjs' // TreeExpandedHandler is responsible for collapsing or expanding // the node tree, wide view or narrow "mobile" view. @@ -152,21 +153,21 @@ export class N2Tree extends CustomHTMLElement { let result = solver.solve() // console.log(result.filter) }// }}} - render() {// {{{ + async render() {// {{{ if (this.rendered) alert('Tree should only be rendered once.') - for (const node of this.treeTrunk) { - const treenode = new N2TreeNode(this, node) - this.treeNodeComponents[node.UUID] = treenode - this.elTreenodes.appendChild(treenode.render()) - } + + this.expandedNodes[ROOT_NODE] = true + const startnode = await nodeStore.get(ROOT_NODE) + const starttreenode = new N2TreeNode(this, startnode, null) + this.treeNodeComponents[startnode.UUID] = starttreenode + this.elTreenodes.appendChild(starttreenode.render()) this.rendered = true return this }// }}} reset() {// {{{ - console.log('tree reset') this.treeNodeComponents = {} this.treeTrunk = [] this.rendered = false @@ -306,7 +307,7 @@ export class N2Tree extends CustomHTMLElement { 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 }) return } @@ -358,8 +359,6 @@ export class N2Tree extends CustomHTMLElement { if (n.isFirstSibling()) { parent = n.getParent() - if (parent?.UUID === ROOT_NODE) - return _mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: false, dontExpand: true }) return } @@ -562,7 +561,9 @@ export class N2TreeNode extends CustomHTMLElement { } // The expand icon 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`) else if (this.tree.getNodeExpanded(this.node.UUID)) this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`) @@ -578,6 +579,7 @@ export class N2TreeNode extends CustomHTMLElement { if (treenode === undefined) { treenode = new N2TreeNode(this.tree, node, this) this.tree.treeNodeComponents[node.UUID] = treenode + _mbus.dispatch(`NODE_COMPONENT_EXIST_${node.UUID}`) } return treenode })