Tree render and navigation with note rendering

static/js/node.mjs

@@ -331,6 +331,61 @@ class NodeContent extends Component {
 	}//}}}
 }
 
+export class NodeUINative {
+	constructor(parentElement) {// {{{
+		this.node = null
+		this.parent = parentElement
+		this.parent.replaceChildren(this.createElements())
+
+		_mbus.subscribe('NODE_UI_OPEN', event => {
+			this.node = event.detail.data
+			this.render()
+		})
+
+		_mbus.subscribe('NODE_MODIFIED', ()=>{
+			document.querySelector('#crumbs .crumbs')?.classList.add('node-modified')
+		})
+
+		_mbus.subscribe('NODE_UNMODIFIED', ()=>{
+			document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified')
+		})
+	}// }}}
+	createElements() {// {{{
+		const tmpl = document.createElement('template')
+		tmpl.innerHTML = `
+			<div id="name"></div>
+			<div class="grow-wrap" style="display: none">
+				<textarea id="node-content" class="node-content" required rows=1></textarea>
+			</div>
+		`
+
+		tmpl.content.querySelector('#node-content').addEventListener('input', event=>this.contentChanged(event))
+
+		return tmpl.content
+	}// }}}
+	render() {// {{{
+		this.parent.querySelector('.grow-wrap').style.display = (this.node === null ? 'none' : 'grid')
+		this.parent.querySelector('#name').innerText = this.node?.get('Name') ?? ''
+		this.parent.querySelector('#node-content').value = this.node?.get('Content') ?? ''
+
+		this.resize()
+		return this.parent
+	}// }}}
+
+	resize() {//{{{
+		const textarea = this.parent.querySelector('#node-content')
+		textarea.parentNode.dataset.replicatedValue = textarea.value
+	}//}}}
+	contentChanged(event) {//{{{
+		this.node.setContent(event.target.value)
+		this.resize()
+	}//}}}
+	isModified() {// {{{
+		return this.node?.isModified()
+	}// }}}
+
+}
+
 export class Node {
 	static sort(a, b) {//{{{
 		if (a.data.Name < b.data.Name) return -1
@@ -340,7 +395,6 @@ export class Node {
 	constructor(nodeData, level) {//{{{
 		this.Level = level
 		this.data = nodeData
-
 		this.UUID = nodeData.UUID
 
 		// Toplevel nodes are normalized to have the ROOT_NODE as parent.
@@ -354,13 +408,12 @@ export class Node {
 		this.Children = []
 		this.Ancestors = []
 
-		this._content = this.data.Content
-		this._modified = false
-
 		this._sibling_before = null
 		this._sibling_after = null
 		this._parent = null
 
+		this.reset()
+
 		/*
 		this.RenderMarkdown = signal(nodeData.RenderMarkdown)
 		this.Markdown = false
@@ -377,6 +430,10 @@ export class Node {
 		*/
 	}//}}}
 
+	reset() {// {{{
+		this._content = this.data.Content
+		this._modified = false
+	}// }}}
 	get(prop) {//{{{
 		return this.data[prop]
 	}//}}}
@@ -384,6 +441,9 @@ export class Node {
 		// '2024-12-17T17:33:48.85939Z
 		return new Date(Date.parse(this.data.Updated))
 	}//}}}
+	isModified() {// {{{
+		return this._modified
+	}// }}}
 	hasFetchedChildren() {//{{{
 		return this._children_fetched
 	}//}}}
@@ -436,12 +496,12 @@ export class Node {
 		if (this.CryptoKeyID != 0 && !this._decrypted)
 			this.#decrypt()
 		*/
-		this.modified = true
 		return this._content
 	}//}}}
-
 	setContent(new_content) {//{{{
 		this._content = new_content
+		this._modified = true
+		_mbus.dispatch('NODE_MODIFIED')
 		/* TODO - implement crypto
 		if (this.CryptoKeyID == 0)
 			// Logic behind plaintext not being decrypted is that
@@ -456,6 +516,8 @@ export class Node {
 		this.data.Updated = new Date().toISOString()
 		this._modified = false
 
+		_mbus.dispatch('NODE_UNMODIFIED')
+
 		// When stored into database and ancestry was changed,
 		// the ancestry path could be interesting.
 		const ancestors = await nodeStore.getNodeAncestry(this)