+ `
+
+ 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
if (a.data.Name > b.data.Name) return 0
return 0
}//}}}
+ static create(name, parentUUID) {
+ return new Node({
+ UUID: uuidv7(),
+ Created: (new Date()).toISOString(),
+ Content: '',
+ Name: name,
+ ParentUUID: parentUUID,
+ Markdown: false,
+ History: false,
+ })
+ }
+
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 +425,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 +447,10 @@ export class Node {
*/
}//}}}
+ reset() {// {{{
+ this._content = this.data.Content
+ this._modified = false
+ }// }}}
get(prop) {//{{{
return this.data[prop]
}//}}}
@@ -384,6 +458,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
}//}}}
@@ -408,7 +485,8 @@ export class Node {
}
// Notify the tree that all children are fetched and ready to process.
- _notes2.current.tree.fetchChildrenOn(this.UUID)
+ //_notes2.current.tree.fetchChildrenOn(this.UUID)
+ _mbus.dispatch(`NODE_CHILDREN_FETCHED_${this.UUID}`)
return this.Children
}//}}}
@@ -435,12 +513,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
@@ -455,6 +533,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)
@@ -462,4 +542,30 @@ export class Node {
}//}}}
}
+function uuidv7() {
+ // random bytes
+ const value = new Uint8Array(16)
+ crypto.getRandomValues(value)
+
+ // current timestamp in ms
+ const timestamp = BigInt(Date.now())
+
+ // timestamp
+ value[0] = Number((timestamp >> 40n) & 0xffn)
+ value[1] = Number((timestamp >> 32n) & 0xffn)
+ value[2] = Number((timestamp >> 24n) & 0xffn)
+ value[3] = Number((timestamp >> 16n) & 0xffn)
+ value[4] = Number((timestamp >> 8n) & 0xffn)
+ value[5] = Number(timestamp & 0xffn)
+
+ // version and variant
+ value[6] = (value[6] & 0x0f) | 0x70
+ value[8] = (value[8] & 0x3f) | 0x80
+
+ const str = Array.from(value)
+ .map((b) => b.toString(16).padStart(2, "0"))
+ .join("")
+ return `${str.slice(0, 8)}-${str.slice(8, 12)}-${str.slice(12, 16)}-${str.slice(16, 20)}-${str.slice(20)}`
+}
+
// vim: foldmethod=marker
diff --git a/static/js/node_store.mjs b/static/js/node_store.mjs
index 80aa758..ef43233 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -159,6 +159,7 @@ export class NodeStore {
})
}//}}}
+ /* TODO - Remove?
async storeNode(node) {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction('nodes', 'readwrite')
@@ -181,6 +182,7 @@ export class NodeStore {
}
})
}//}}}
+ */
async upsertNodeRecords(records) {//{{{
return new Promise((resolve, reject) => {
diff --git a/static/js/notes2.mjs b/static/js/notes2.mjs
index d73ef53..7bef2ad 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -3,6 +3,7 @@ import { signal } from 'preact/signals'
import htm from 'htm'
import { Node, NodeUI } from 'node'
import { ROOT_NODE } from 'node_store'
+import { TreeNative } from 'tree'
const html = htm.bind(h)
export class Notes2 extends Component {
@@ -14,6 +15,7 @@ export class Notes2 extends Component {
startNode: null,
}
this.op = signal('')
+ this.treeNative = new TreeNative()
window._sync = new Sync()
window._sync.run()
@@ -76,6 +78,7 @@ export class Notes2 extends Component {
this.nodeUI.current.setNode(node)
this.nodeUI.current.setCrumbs(ancestors)
this.tree.setSelected(node, dontExpand)
+ this.treeNative.setSelected(node, dontExpand)
}//}}}
logout() {//{{{
localStorage.removeItem('session.UUID')
@@ -107,6 +110,7 @@ class Tree extends Component {
this.treeNodeComponents[node.UUID] = createRef()
return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.UUID]} selected=${node.UUID === app.state.startNode?.UUID} />`
})
+
return html`
_notes2.current.goToNode(ROOT_NODE)}>
@@ -118,7 +122,7 @@ class Tree extends Component {
`
}//}}}
componentDidMount() {//{{{
- this.treeDiv.current.addEventListener('keydown', event => this.keyHandler(event))
+ //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
@@ -538,13 +542,13 @@ class OpSearch extends Op {
for (const r of results) {
const ancestors = r.ancestry.reverse().map(a => {
const div = tmpl(`
+ 
+