First steps to creating a new node

static/js/app.mjs

@@ -1,6 +1,6 @@
 import { ROOT_NODE } from 'node_store'
 import { TreeNative } from 'tree'
-import { NodeUINative } from 'node'
+import { NodeUINative, Node } from 'node'
 
 export class App {
 	constructor() {// {{{
@@ -29,6 +29,10 @@ export class App {
 		})
 
 		window.addEventListener('keydown', event => this.keyHandler(event))
+		document.getElementById('notes2').addEventListener('click', event => {
+			if (event.target.id === 'notes2')
+				document.getElementById('node-content')?.focus()
+		})
 
 		window._sync = new Sync()
 		window._sync.run()
@@ -45,7 +49,6 @@ export class App {
 
 		switch (event.key.toUpperCase()) {
 			case 'T':
-				console.log(document.activeElement.id)
 				if (document.activeElement.id === 'tree-nodes')
 					document.getElementById('node-content').focus()
 				else
@@ -68,10 +71,12 @@ export class App {
 				this.toggleMarkdown()
 				break
 
+			*/
 			case 'N':
 				this.createNode()
 				break
 
+			/*
 			case 'P':
 				this.showPage('node-properties')
 				break
@@ -145,6 +150,18 @@ export class App {
 
 		await Promise.all([history, sendQueue, nodeStoreAdding])
 	}//}}}
+	async createNode() {//{{{
+		let name = prompt("Name")
+		if (!name)
+			return
+
+		const nn = Node.create(name, this.currentNode.UUID)
+		nn.save()
+
+		nodeStore.sendQueue.add(nn)
+		nodeStore.add([nn])
+
+	}//}}}
 	async goToNode(nodeUUID, dontPush, dontExpand) {//{{{
 		if (nodeUUID === null || nodeUUID === undefined)
 			return
@@ -220,38 +237,37 @@ class Crumb {
 	}// }}}
 }
 
+function tmpl(html) {// {{{
+	const el = document.createElement('template')
+	el.innerHTML = html
+	return el.content.children
+}// }}}
+
 class Op {
-	constructor(id) {
+	constructor(id) {// {{{
 		this.id = id
 		_mbus.subscribe(this.id, p => this.render(p))
-	}
-	render(html) {
+	}// }}}
+	render(html) {// {{{
 		const op = document.getElementById('op')
 		const t = document.createElement('template')
 		t.innerHTML = `<dialog id="${this.id}" class="op">${html}</dialog>`
 		op.replaceChildren(t.content)
 		document.getElementById(this.id).showModal()
-	}
-	get(selector) {
+	}// }}}
+	get(selector) {// {{{
 		return document.querySelector(`#${this.id} ${selector}`)
-	}
-	bind(selector, event, fn) {
+	}// }}}
+	bind(selector, event, fn) {// {{{
 		this.get(selector).addEventListener(event, evt => fn(evt))
-	}
-}
-
-function tmpl(html) {
-	const el = document.createElement('template')
-	el.innerHTML = html
-	return el.content.children
+	}// }}}
 }
 
 class OpSearch extends Op {
-	constructor() {
+	constructor() {// {{{
 		super('op-search')
-	}
-
-	render() {
+	}// }}}
+	render() {// {{{
 		super.render(`
 			<div class="header">Search</div>
 			<div>
@@ -262,29 +278,27 @@ class OpSearch extends Op {
 		`)
 
 		this.bind('input[type="text"]', 'keydown', evt => this.search(evt))
-	}
-
-	search(event) {
+	}// }}}
+	search(event) {// {{{
 		if (event.key !== 'Enter')
 			return
 
 		const searchFor = document.querySelector('#op-search input').value
 		nodeStore.search(searchFor, ROOT_NODE)
 			.then(res => this.displayResults(res))
-	}
-
-	displayResults(results) {
+	}// }}}
+	displayResults(results) {// {{{
 		const rs = []
 		for (const r of results) {
 			const ancestors = r.ancestry.reverse().map(a => {
 				const div = tmpl(`<div class="ancestor">${a.data.Name}</div>`)
-				div[0].addEventListener('click', ()=>_notes2.current.goToNode(a.UUID))
+				div[0].addEventListener('click', () => _notes2.current.goToNode(a.UUID))
 				return div[0]
 			})
 
 
 			const div = tmpl(`<div>${r.name}</div>`)
-			div[0].addEventListener('click', ()=>_notes2.current.goToNode(r.uuid))
+			div[0].addEventListener('click', () => _notes2.current.goToNode(r.uuid))
 			rs.push(...div)
 
 			const ancDev = tmpl('<div class="ancestors"></div>')
@@ -292,7 +306,7 @@ class OpSearch extends Op {
 			rs.push(ancDev[0])
 		}
 		this.get('.results').replaceChildren(...rs)
-	}
+	}// }}}
 }
 
 // vim: foldmethod=marker