+
_notes2.current.goToNode(ROOT_NODE)}>
+
+
+
${renderedTreeTrunk}
`
}//}}}
componentDidMount() {//{{{
+ this.treeDiv.current.addEventListener('keydown', event => this.keyHandler(event))
+
// This will show and select the treenode that is selected in the node UI.
const node = _notes2.current?.nodeUI.current?.node.value
if (node === null)
@@ -105,14 +114,14 @@ class Tree extends Component {
}//}}}
populateFirstLevel(callback = null) {//{{{
- nodeStore.getTreeNodes('', 0)
- .then(async res => {
- res.sort(Node.sort)
+ nodeStore.get(ROOT_NODE)
+ .then(node => node.fetchChildren())
+ .then(children => {
this.treeNodeComponents = {}
this.treeTrunk = []
- for (const node of res) {
+ for (const node of children) {
// The root node isn't supposed to be shown in the tree.
- if (node.UUID === '00000000-0000-0000-0000-000000000000')
+ if (node.UUID === ROOT_NODE)
continue
if (node.ParentUUID === '')
this.treeTrunk.push(node)
@@ -124,7 +133,7 @@ class Tree extends Component {
})
.catch(e => { console.log(e); console.log(e.type, e.error); alert(e.error) })
}//}}}
- setSelected(node) {//{{{
+ setSelected(node, dontExpand) {//{{{
// The previously selected node, if any, needs to be rerendered
// to not retain its 'selected' class.
const prevUUID = this.selectedNode?.UUID
@@ -135,8 +144,8 @@ class Tree extends Component {
// And now the newly selected node is rerendered.
this.treeNodeComponents[node.UUID]?.current.forceUpdate()
- // Expanding selected nodes... I don't know...
- this.setNodeExpanded(node.UUID, true)
+ if (!dontExpand)
+ this.setNodeExpanded(node.UUID, true)
}//}}}
isSelected(node) {//{{{
return this.selectedNode?.UUID === node.UUID
@@ -154,7 +163,7 @@ class Tree extends Component {
return
// Start the chain of by expanding the top node.
- this.setNodeExpanded(ancestry[ancestry.length-1].UUID, true)
+ this.setNodeExpanded(ancestry[ancestry.length - 1].UUID, true)
}//}}}
getNodeExpanded(UUID) {//{{{
if (this.expandedNodes[UUID] === undefined)
@@ -166,6 +175,95 @@ class Tree extends Component {
this.getNodeExpanded(UUID)
this.expandedNodes[UUID].value = value
}//}}}
+ getParentNodeWithNextSibling(node) {//{{{
+ let currNode = node
+ while (currNode !== null && currNode.UUID !== ROOT_NODE && currNode.getSiblingAfter() === null) {
+ currNode = currNode.getParent()
+ }
+ return currNode?.getSiblingAfter()
+ }//}}}
+
+ async keyHandler(event) {//{{{
+ let handled = true
+ let nodeExpanded = false
+ let siblingBefore = null
+ let siblingExpanded = false
+ let parent = null
+ const n = this.selectedNode
+
+ switch (event.key) {
+ case 'j':
+ case 'ArrowDown':
+ nodeExpanded = this.getNodeExpanded(n.UUID)
+
+ // Last node, not expanded, so it matters not whether it has children or not.
+ // Traverse upward to nearest parent with next sibling.
+ if (!nodeExpanded && n.isLastSibling()) {
+ const wantedNode = this.getParentNodeWithNextSibling(n)
+ if (wantedNode?.UUID === ROOT_NODE)
+ break
+ await _notes2.current.goToNode(wantedNode?.UUID, true, true)
+ break
+ }
+
+ if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
+ const wantedNode = this.getParentNodeWithNextSibling(n)
+ await _notes2.current.goToNode(wantedNode?.UUID, true, true)
+ break
+ }
+ // Node not expanded. Go to this node's next sibling.
+ // GoToNode will abort if given null.
+ if (!nodeExpanded || !n.hasChildren()) {
+ await _notes2.current.goToNode(n.getSiblingAfter()?.UUID, true, true)
+ break
+ }
+
+ // Node is expanded.
+ // Children will be visually beneath this node, if any.
+ if (nodeExpanded && n.hasChildren()) {
+ await _notes2.current.goToNode(n.Children[0].UUID, true, true)
+ break
+ }
+ break
+
+ case 'k':
+ case 'ArrowUp':
+ siblingBefore = n.getSiblingBefore()
+ if (siblingBefore !== null)
+ siblingExpanded = this.getNodeExpanded(siblingBefore.UUID)
+
+ if (n.isFirstSibling()) {
+ parent = n.getParent()
+ if (parent?.UUID === ROOT_NODE)
+ break
+ await _notes2.current.goToNode(parent?.UUID, true, true)
+ break
+ }
+
+ if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
+ await _notes2.current.goToNode(siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, true, true)
+ break
+ }
+
+ if (siblingBefore) {
+ await _notes2.current.goToNode(siblingBefore.UUID, true, true)
+ break
+ }
+ break
+
+ case 'h':
+ case 'ArrowLeft':
+ break
+
+ default:
+ handled = false
+ }
+
+ if (handled) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+ }//}}}
}
class TreeNode extends Component {
diff --git a/static/less/notes2.less b/static/less/notes2.less
index c39d7af..93b75cd 100644
--- a/static/less/notes2.less
+++ b/static/less/notes2.less
@@ -50,7 +50,7 @@ html {
display: grid;
position: relative;
justify-items: center;
- margin-bottom: 32px;
+ margin-bottom: 8px;
margin-left: 24px;
margin-right: 24px;
img {
@@ -60,6 +60,12 @@ html {
}
}
+ .icons {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 32px;
+ }
+
.node {
display: grid;
grid-template-columns: 24px min-content;
diff --git a/static/service_worker.js b/static/service_worker.js
index e10e3b0..6c77241 100644
--- a/static/service_worker.js
+++ b/static/service_worker.js
@@ -7,19 +7,26 @@ const CACHED_ASSETS = [
'/css/{{ .VERSION }}/notes2.css',
'/js/{{ .VERSION }}/lib/preact/preact.mjs',
- '/js/{{ .VERSION }}/lib/htm/htm.mjs',
'/js/{{ .VERSION }}/lib/preact/devtools.mjs',
'/js/{{ .VERSION }}/lib/signals/signals.mjs',
'/js/{{ .VERSION }}/lib/signals/signals-core.mjs',
'/js/{{ .VERSION }}/lib/preact/hooks.mjs',
+ '/js/{{ .VERSION }}/lib/preact/debug.mjs',
+ '/js/{{ .VERSION }}/lib/htm/htm.mjs',
+ '/js/{{ .VERSION }}/lib/fullcalendar.min.js',
+ '/js/{{ .VERSION }}/lib/node_modules/marked/marked.min.js',
+ '/js/{{ .VERSION }}/lib/sjcl.js',
'/js/{{ .VERSION }}/api.mjs',
+ '/js/{{ .VERSION }}/node.mjs',
'/js/{{ .VERSION }}/node_store.mjs',
'/js/{{ .VERSION }}/notes2.mjs',
+ '/js/{{ .VERSION }}/sync.mjs',
'/js/{{ .VERSION }}/key.mjs',
'/js/{{ .VERSION }}/crypto.mjs',
'/js/{{ .VERSION }}/checklist.mjs',
+ '/images/{{ .VERSION }}/logo.svg',
'/images/{{ .VERSION }}/leaf.svg',
'/images/{{ .VERSION }}/collapsed.svg',
'/images/{{ .VERSION }}/expanded.svg',