+
+ ${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
}//}}}
- isModified() {// {{{
- return this.node?.isModified()
- }// }}}
}
-customElements.define('n2-nodeui', N2NodeUI)
export class Node {
static sort(a, b) {//{{{
@@ -54,22 +337,10 @@ 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.
@@ -83,12 +354,13 @@ 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
@@ -105,10 +377,6 @@ export class Node {
*/
}//}}}
- reset() {// {{{
- this._content = this.data.Content
- this._modified = false
- }// }}}
get(prop) {//{{{
return this.data[prop]
}//}}}
@@ -116,13 +384,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
@@ -140,8 +408,7 @@ export class Node {
}
// Notify the tree that all children are fetched and ready to process.
- //_notes2.current.tree.fetchChildrenOn(this.UUID)
- _mbus.dispatch(`NODE_CHILDREN_FETCHED_${this.UUID}`)
+ _notes2.current.tree.fetchChildrenOn(this.UUID)
return this.Children
}//}}}
@@ -168,12 +435,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
@@ -188,8 +455,6 @@ 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)
@@ -197,30 +462,4 @@ 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 e849e29..80aa758 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
}//}}}
- initializeDB() {//{{{
+ async initializeDB() {//{{{
return new Promise((resolve, reject) => {
const req = indexedDB.open('notes', 7)
@@ -78,7 +78,7 @@ export class NodeStore {
}
})
}//}}}
- initializeRootNode() {//{{{
+ async 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
}//}}}
- getAppState(key) {//{{{
+ async 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)
})
}//}}}
- setAppState(key, value) {//{{{
+ async setAppState(key, value) {//{{{
return new Promise((resolve, reject) => {
try {
const t = this.db.transaction('app_state', 'readwrite')
@@ -159,8 +159,30 @@ export class NodeStore {
})
}//}}}
- /*
- upsertNodeRecords(records) {//{{{
+ 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) {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction('nodes', 'readwrite')
const nodeStore = t.objectStore('nodes')
@@ -188,11 +210,17 @@ 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)
+ }
}
})
}//}}}
- */
- getTreeNodes(parent, newLevel) {//{{{
+ async getTreeNodes(parent, newLevel) {//{{{
return new Promise((resolve, reject) => {
// Parent of toplevel nodes is ROOT_NODE in indexedDB.
// Only the root node has '' as parent.
@@ -214,7 +242,7 @@ export class NodeStore {
req.onerror = (event) => reject(event.target.error)
})
}//}}}
- search(searchfor, parent) {//{{{
+ async search(searchfor, parent) {//{{{
return new Promise((resolve, reject) => {
const trx = this.db.transaction('nodes', 'readonly')
const nodeStore = trx.objectStore('nodes')
@@ -244,55 +272,46 @@ export class NodeStore {
})
}//}}}
- add(records, objstore) {//{{{
+ async add(records) {//{{{
return new Promise((resolve, reject) => {
try {
- // 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)
- }
+ 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)
}
// records is an object, not an array.
+ const promises = []
for (const recordIdx in records) {
const record = records[recordIdx]
- nodeStore.put(record.data)
+ 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)
}
- resolve()
+ Promise.all(promises).then(() => resolve())
} catch (e) {
- console.error(e)
- reject(e)
+ console.log(e)
}
})
}//}}}
- get(uuid, suppliedNodestore) {//{{{
+ async get(uuid) {//{{{
return new Promise((resolve, reject) => {
- // 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 trx = this.db.transaction('nodes', 'readonly')
+ const nodeStore = trx.objectStore('nodes')
const getRequest = nodeStore.get(uuid)
-
getRequest.onsuccess = (event) => {
// Node not found in IndexedDB.
if (event.target.result === undefined) {
@@ -304,7 +323,7 @@ export class NodeStore {
}
})
}//}}}
- getNodeAncestry(node, accumulated) {//{{{
+ async getNodeAncestry(node, accumulated) {//{{{
return new Promise((resolve, reject) => {
if (accumulated === undefined)
accumulated = []
@@ -335,11 +354,8 @@ export class NodeStore {
})
}//}}}
- newTransaction(objectStore, mode) {// {{{
- return this.db.transaction(objectStore, mode)
- }// }}}
- nodeCount() {//{{{
+ async nodeCount() {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction('nodes', 'readwrite')
const nodeStore = t.objectStore('nodes')
@@ -356,7 +372,7 @@ class SimpleNodeStore {
this.db = db
this.storeName = storeName
}//}}}
- add(node) {//{{{
+ async add(node) {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction(['nodes', this.storeName], 'readwrite')
const store = t.objectStore(this.storeName)
@@ -376,7 +392,7 @@ class SimpleNodeStore {
}
})
}//}}}
- retrieve(limit) {//{{{
+ async retrieve(limit) {//{{{
return new Promise((resolve, reject) => {
const cursorReq = this.db
.transaction(['nodes', this.storeName], 'readonly')
@@ -404,7 +420,7 @@ class SimpleNodeStore {
}
})
}//}}}
- delete(keys) {//{{{
+ async delete(keys) {//{{{
const store = this.db
.transaction(['nodes', this.storeName], 'readwrite')
.objectStore(this.storeName)
@@ -421,7 +437,7 @@ class SimpleNodeStore {
}
return Promise.all(promises)
}//}}}
- count() {//{{{
+ async 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 7bef2ad..d73ef53 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -3,7 +3,6 @@ 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 {
@@ -15,7 +14,6 @@ export class Notes2 extends Component {
startNode: null,
}
this.op = signal('')
- this.treeNative = new TreeNative()
window._sync = new Sync()
window._sync.run()
@@ -78,7 +76,6 @@ 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')
@@ -110,7 +107,6 @@ 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)}>
@@ -122,7 +118,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
@@ -542,13 +538,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`
- 
-