-
- ${page}
- `
- }//}}}
- async componentDidMount() {//{{{
- _notes2.current.goToNode(this.props.startNode.UUID, true)
- _notes2.current.tree.expandToTrunk(this.props.startNode)
- }//}}}
- setNode(node) {//{{{
- this.nodeModified.value = false
- this.node.value = node
- }//}}}
- setCrumbs(nodes) {//{{{
- this.crumbs = nodes
- }//}}}
- async saveNode() {//{{{
- if (!this.nodeModified.value)
- return
-
- /* The node history is a local store for node history.
- * This could be provisioned from the server or cleared if
- * deemed unnecessary.
- *
- * The send queue is what will be sent back to the server
- * to have a recorded history of the notes.
- *
- * A setting to be implemented in the future could be to
- * not save the history locally at all. */
- const node = this.node.value
-
- // The node is still in its old state and will present
- // the unmodified content to the node store.
- const history = nodeStore.nodesHistory.add(node)
-
- // Prepares the node object for saving.
- // Sets Updated value to current date and time.
- await node.save()
-
- // Updated node is added to the send queue to be stored on server.
- const sendQueue = nodeStore.sendQueue.add(this.node.value)
-
- // Updated node is saved to the primary node store.
- const nodeStoreAdding = nodeStore.add([node])
-
- await Promise.all([history, sendQueue, nodeStoreAdding])
- this.nodeModified.value = false
- }//}}}
-
- keyHandler(evt) {//{{{
- let handled = true
-
- // All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
- // Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
- // Thus, the exception is acceptable to consequent use of alt+shift.
- if (!(evt.shiftKey && evt.altKey) && !(evt.key.toUpperCase() === 'S' && evt.ctrlKey))
- return
-
- switch (evt.key.toUpperCase()) {
- case 'T':
- if (document.activeElement.id === 'tree')
- document.getElementById('node-content').focus()
- else
- document.getElementById('tree').focus()
- break
-
- case 'F':
- _mbus.dispatch('op-search')
- break
- /*
- case 'C':
- this.showPage('node')
- break
-
- case 'E':
- this.showPage('keys')
- break
-
- case 'M':
- this.toggleMarkdown()
- break
-
- case 'N':
- this.createNode()
- break
-
- case 'P':
- this.showPage('node-properties')
- break
-
- */
- case 'S':
- if (this.page.value === 'node')
- this.saveNode()
- else if (this.page.value === 'node-properties')
- this.nodeProperties.current.save()
- break
- /*
-
- case 'U':
- this.showPage('upload')
- break
-
- case 'F':
- this.showPage('search')
- break
- */
-
- default:
- handled = false
- }
-
- if (handled) {
- evt.preventDefault()
- evt.stopPropagation()
- }
- }//}}}
-}
-
-class NodeContent extends Component {
- constructor(props) {//{{{
- super(props)
- this.contentDiv = createRef()
- this.state = {
- modified: false,
- }
- }//}}}
- render({ node }) {//{{{
- let content = ''
- try {
- content = node.content()
- } catch (err) {
- return html`
-
${err.message}
- `
- }
-
- /*
- let element
- if (node.RenderMarkdown.value)
- element = html`<${MarkdownContent} key='markdown-content' content=${content} />`
- else
- */
- const element = html`
-
-
-
- `
-
- return element
- }//}}}
- componentDidMount() {//{{{
- this.resize()
- window.addEventListener('resize', () => this.resize())
-
- const contentResizeObserver = new ResizeObserver(entries => {
- for (const idx in entries) {
- const w = entries[idx].contentRect.width
- document.querySelector('#crumbs .crumbs').style.width = `${w}px`
- }
- });
-
- const nodeContent = document.getElementById('node-content')
- contentResizeObserver.observe(nodeContent);
-
- }//}}}
- componentDidUpdate() {//{{{
- this.resize()
- }//}}}
- contentChanged(evt) {//{{{
- _notes2.current.nodeUI.current.nodeModified.value = true
- this.props.node.setContent(evt.target.value)
- this.resize()
- }//}}}
- resize() {//{{{
- const textarea = document.getElementById('node-content')
- if (textarea)
- textarea.parentNode.dataset.replicatedValue = textarea.value
+ _mbus.subscribe('NODE_MODIFIED', () => {
+ document.querySelector('#crumbs .crumbs')?.classList.add('node-modified')
+ })
+
+ _mbus.subscribe('NODE_UNMODIFIED', () => {
+ document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified')
+ })
+
+ this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
+ }// }}}
+ render() {// {{{
+ this.elName.innerText = this.node?.get('Name') ?? ''
+ this.elNodeContent.value = this.node?.get('Content') ?? ''
+ }// }}}
+ takeFocus() {// {{{
+ this.elNodeContent.focus()
+ }// }}}
+
+ contentChanged(event) {//{{{
+ this.node.setContent(event.target.value)
}//}}}
+ isModified() {// {{{
+ return this.node?.isModified()
+ }// }}}
}
+customElements.define('n2-nodeui', N2NodeUI)
export class Node {
static sort(a, b) {//{{{
@@ -337,10 +54,22 @@ export class Node {
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 +83,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 +105,10 @@ export class Node {
*/
}//}}}
+ reset() {// {{{
+ this._content = this.data.Content
+ this._modified = false
+ }// }}}
get(prop) {//{{{
return this.data[prop]
}//}}}
@@ -384,13 +116,13 @@ 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
}//}}}
async fetchChildren() {//{{{
- if (this._children_fetched)
- return this.Children
-
this.Children = await nodeStore.getTreeNodes(this.UUID, this.Level + 1)
this._children_fetched = true
@@ -408,7 +140,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 +168,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 +188,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 +197,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..e849e29 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -13,7 +13,7 @@ export class NodeStore {
this.sendQueue = null
this.nodesHistory = null
}//}}}
- async initializeDB() {//{{{
+ initializeDB() {//{{{
return new Promise((resolve, reject) => {
const req = indexedDB.open('notes', 7)
@@ -78,7 +78,7 @@ export class NodeStore {
}
})
}//}}}
- async initializeRootNode() {//{{{
+ initializeRootNode() {//{{{
return new Promise((resolve, reject) => {
// The root node is a magical node which displays as the first node if none is specified.
// If not already existing, it will be created.
@@ -120,7 +120,7 @@ export class NodeStore {
return n
}//}}}
- async getAppState(key) {//{{{
+ getAppState(key) {//{{{
return new Promise((resolve, reject) => {
const trx = this.db.transaction('app_state', 'readonly')
const appState = trx.objectStore('app_state')
@@ -135,7 +135,7 @@ export class NodeStore {
getRequest.onerror = (event) => reject(event.target.error)
})
}//}}}
- async setAppState(key, value) {//{{{
+ setAppState(key, value) {//{{{
return new Promise((resolve, reject) => {
try {
const t = this.db.transaction('app_state', 'readwrite')
@@ -159,30 +159,8 @@ export class NodeStore {
})
}//}}}
- async storeNode(node) {//{{{
- return new Promise((resolve, reject) => {
- const t = this.db.transaction('nodes', 'readwrite')
- const nodeStore = t.objectStore('nodes')
- t.onerror = (event) => {
- console.log('transaction error', event.target.error)
- reject(event.target.error)
- }
- t.oncomplete = () => {
- resolve()
- }
-
- const nodeReq = nodeStore.put(node.data)
- nodeReq.onsuccess = () => {
- console.debug(`Storing ${node.UUID} (${node.get('Name')})`)
- }
- queueReq.onerror = (event) => {
- console.log(`Error storing ${node.UUID}`, event.target.error)
- reject(event.target.error)
- }
- })
- }//}}}
-
- async upsertNodeRecords(records) {//{{{
+ /*
+ upsertNodeRecords(records) {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction('nodes', 'readwrite')
const nodeStore = t.objectStore('nodes')
@@ -210,17 +188,11 @@ export class NodeStore {
record.modified = 0
addReq = nodeStore.put(record)
}
- addReq.onsuccess = () => {
- console.debug(`${op} ${record.UUID} (${record.Name})`)
- }
- addReq.onerror = (event) => {
- console.log(`error ${op} ${record.UUID}`, event.target.error)
- reject(event.target.error)
- }
}
})
}//}}}
- async getTreeNodes(parent, newLevel) {//{{{
+ */
+ getTreeNodes(parent, newLevel) {//{{{
return new Promise((resolve, reject) => {
// Parent of toplevel nodes is ROOT_NODE in indexedDB.
// Only the root node has '' as parent.
@@ -242,7 +214,7 @@ export class NodeStore {
req.onerror = (event) => reject(event.target.error)
})
}//}}}
- async search(searchfor, parent) {//{{{
+ search(searchfor, parent) {//{{{
return new Promise((resolve, reject) => {
const trx = this.db.transaction('nodes', 'readonly')
const nodeStore = trx.objectStore('nodes')
@@ -272,46 +244,55 @@ export class NodeStore {
})
}//}}}
- async add(records) {//{{{
+ add(records, objstore) {//{{{
return new Promise((resolve, reject) => {
try {
- const t = this.db.transaction('nodes', 'readwrite')
- const nodeStore = t.objectStore('nodes')
- t.onerror = (event) => {
- console.log('transaction error', event.target.error)
- reject(event.target.error)
+ // A nodestore can be provided in order to
+ // avoid creating new transactions.
+ let nodeStore = objstore
+ let t
+
+ if (nodeStore === undefined) {
+ t = this.db.transaction('nodes', 'readwrite')
+ nodeStore = t.objectStore('nodes')
+
+ t.oncomplete = (_event) => {
+ resolve()
+ }
+
+ t.onerror = (event) => {
+ console.error('transaction error', event.target.error)
+ reject(event.target.error)
+ }
}
// records is an object, not an array.
- const promises = []
for (const recordIdx in records) {
const record = records[recordIdx]
- const addReq = nodeStore.put(record.data)
-
- const promise = new Promise((resolve, reject) => {
- addReq.onsuccess = () => {
- console.debug('OK!', record.ID, record.Name)
- resolve()
- }
- addReq.onerror = (event) => {
- console.log('Error!', event.target.error, record.ID)
- reject(event.target.error)
- }
- })
- promises.push(promise)
+ nodeStore.put(record.data)
}
- Promise.all(promises).then(() => resolve())
+ resolve()
} catch (e) {
- console.log(e)
+ console.error(e)
+ reject(e)
}
})
}//}}}
- async get(uuid) {//{{{
+ get(uuid, suppliedNodestore) {//{{{
return new Promise((resolve, reject) => {
- const trx = this.db.transaction('nodes', 'readonly')
- const nodeStore = trx.objectStore('nodes')
+ // A nodestore can be provided in order to
+ // avoid creating new transactions.
+ let trx
+ let nodeStore = suppliedNodestore
+
+ if (nodeStore === undefined) {
+ trx = this.db.transaction('nodes', 'readonly')
+ nodeStore = trx.objectStore('nodes')
+ }
+
const getRequest = nodeStore.get(uuid)
+
getRequest.onsuccess = (event) => {
// Node not found in IndexedDB.
if (event.target.result === undefined) {
@@ -323,7 +304,7 @@ export class NodeStore {
}
})
}//}}}
- async getNodeAncestry(node, accumulated) {//{{{
+ getNodeAncestry(node, accumulated) {//{{{
return new Promise((resolve, reject) => {
if (accumulated === undefined)
accumulated = []
@@ -354,8 +335,11 @@ export class NodeStore {
})
}//}}}
+ newTransaction(objectStore, mode) {// {{{
+ return this.db.transaction(objectStore, mode)
+ }// }}}
- async nodeCount() {//{{{
+ nodeCount() {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction('nodes', 'readwrite')
const nodeStore = t.objectStore('nodes')
@@ -372,7 +356,7 @@ class SimpleNodeStore {
this.db = db
this.storeName = storeName
}//}}}
- async add(node) {//{{{
+ add(node) {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction(['nodes', this.storeName], 'readwrite')
const store = t.objectStore(this.storeName)
@@ -392,7 +376,7 @@ class SimpleNodeStore {
}
})
}//}}}
- async retrieve(limit) {//{{{
+ retrieve(limit) {//{{{
return new Promise((resolve, reject) => {
const cursorReq = this.db
.transaction(['nodes', this.storeName], 'readonly')
@@ -420,7 +404,7 @@ class SimpleNodeStore {
}
})
}//}}}
- async delete(keys) {//{{{
+ delete(keys) {//{{{
const store = this.db
.transaction(['nodes', this.storeName], 'readwrite')
.objectStore(this.storeName)
@@ -437,7 +421,7 @@ class SimpleNodeStore {
}
return Promise.all(promises)
}//}}}
- async count() {//{{{
+ count() {//{{{
const store = this.db
.transaction(['nodes', this.storeName], 'readonly')
.objectStore(this.storeName)
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(`
 ? 'checklist-on.svg' : 'checklist-off.svg'})
- 
`
-
- page = html`
- ${children.length > 0 ? html`
+ 
+