-
- `
- }
- constructor() {
- super(true)
-
- this.addEventListener('click', event => {
- event.preventDefault()
- event.stopPropagation()
-
- window.open(
- URL.createObjectURL(this.file),
- (event.ctrlKey || event.shiftKey) ? '_blank' : '_self',
- )
- })
-
- this.render()
- }
-
- async render() {
- const src = this.getAttribute('src')
-
- // N2's db:// URLs are fetched from IndexedDB.
- if (src.toLowerCase().match('^db://[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$')) {
- // image population has to happen asynchronously,
- // while Marked lib has to be returned a string when exiting this function.
- // populateImg makes sure this returned img element exists and then populates it
- // with the image from IndexedDB.
- const file = await globalThis.nodeStore.files.get(src.slice(5))
- if (!file)
- return
- this.file = file.file
-
- if (file.file.type.startsWith('image/'))
- this.elImage.src = URL.createObjectURL(file.file)
- else {
- // Check for and use an existing MIME type icon.
- // Place them in static/images/file_icons/ and replace the slash with an underscore.
- const url = `/images/${_VERSION}/file_icons/${file.file.type.replaceAll('/', '_')}.svg`
- const res = await fetch(url)
- if (res.ok)
- this.elImage.src = url
-
- this.elFilename.innerText = file.file.name
- this.elFilename.style.display = 'block'
- }
- } else
- this.elImage.src = src
- }
-}
-customElements.define('n2-file', N2File)
diff --git a/static/js/lib/css_colorize.mjs b/static/js/lib/css_colorize.mjs
deleted file mode 100644
index f0fdb37..0000000
--- a/static/js/lib/css_colorize.mjs
+++ /dev/null
@@ -1,207 +0,0 @@
-export class Color {
- constructor(r, g, b) { this.set(r, g, b); }
- toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; }
-
- set(r, g, b) {
- this.r = this.clamp(r);
- this.g = this.clamp(g);
- this.b = this.clamp(b);
- }
-
- hueRotate(angle = 0) {
- angle = angle / 180 * Math.PI;
- let sin = Math.sin(angle);
- let cos = Math.cos(angle);
-
- this.multiply([
- 0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928,
- 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283,
- 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072
- ]);
- }
-
- grayscale(value = 1) {
- this.multiply([
- 0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value),
- 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value),
- 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value)
- ]);
- }
-
- sepia(value = 1) {
- this.multiply([
- 0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value),
- 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value),
- 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value)
- ]);
- }
-
- saturate(value = 1) {
- this.multiply([
- 0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value,
- 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value,
- 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value
- ]);
- }
-
- multiply(matrix) {
- let newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
- let newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
- let newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
- this.r = newR; this.g = newG; this.b = newB;
- }
-
- brightness(value = 1) { this.linear(value); }
- contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); }
-
- linear(slope = 1, intercept = 0) {
- this.r = this.clamp(this.r * slope + intercept * 255);
- this.g = this.clamp(this.g * slope + intercept * 255);
- this.b = this.clamp(this.b * slope + intercept * 255);
- }
-
- invert(value = 1) {
- this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
- this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
- this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
- }
-
- hsl() { // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
- let r = this.r / 255;
- let g = this.g / 255;
- let b = this.b / 255;
- let max = Math.max(r, g, b);
- let min = Math.min(r, g, b);
- let h, s, l = (max + min) / 2;
-
- if (max === min) {
- h = s = 0;
- } else {
- let d = max - min;
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
- switch (max) {
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- case g: h = (b - r) / d + 2; break;
- case b: h = (r - g) / d + 4; break;
- } h /= 6;
- }
-
- return {
- h: h * 100,
- s: s * 100,
- l: l * 100
- };
- }
-
- clamp(value) {
- if (value > 255) { value = 255; }
- else if (value < 0) { value = 0; }
- return value;
- }
-}
-
-export class Solver {
- constructor(target) {
- this.target = target;
- this.targetHSL = target.hsl();
- this.reusedColor = new Color(0, 0, 0); // Object pool
- }
-
- solve() {
- let result = this.solveNarrow(this.solveWide());
- return {
- values: result.values,
- loss: result.loss,
- filter: this.css(result.values)
- };
- }
-
- solveWide() {
- const A = 5;
- const c = 15;
- const a = [60, 180, 18000, 600, 1.2, 1.2];
-
- let best = { loss: Infinity };
- for (let i = 0; best.loss > 25 && i < 3; i++) {
- let initial = [50, 20, 3750, 50, 100, 100];
- let result = this.spsa(A, a, c, initial, 1000);
- if (result.loss < best.loss) { best = result; }
- } return best;
- }
-
- solveNarrow(wide) {
- const A = wide.loss;
- const c = 2;
- const A1 = A + 1;
- const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
- return this.spsa(A, a, c, wide.values, 500);
- }
-
- spsa(A, a, c, values, iters) {
- const alpha = 1;
- const gamma = 0.16666666666666666;
-
- let best = null;
- let bestLoss = Infinity;
- let deltas = new Array(6);
- let highArgs = new Array(6);
- let lowArgs = new Array(6);
-
- for (let k = 0; k < iters; k++) {
- let ck = c / Math.pow(k + 1, gamma);
- for (let i = 0; i < 6; i++) {
- deltas[i] = Math.random() > 0.5 ? 1 : -1;
- highArgs[i] = values[i] + ck * deltas[i];
- lowArgs[i] = values[i] - ck * deltas[i];
- }
-
- let lossDiff = this.loss(highArgs) - this.loss(lowArgs);
- for (let i = 0; i < 6; i++) {
- let g = lossDiff / (2 * ck) * deltas[i];
- let ak = a[i] / Math.pow(A + k + 1, alpha);
- values[i] = fix(values[i] - ak * g, i);
- }
-
- let loss = this.loss(values);
- if (loss < bestLoss) { best = values.slice(0); bestLoss = loss; }
- } return { values: best, loss: bestLoss };
-
- function fix(value, idx) {
- let max = 100;
- if (idx === 2 /* saturate */) { max = 7500; }
- else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; }
-
- if (idx === 3 /* hue-rotate */) {
- if (value > max) { value = value % max; }
- else if (value < 0) { value = max + value % max; }
- } else if (value < 0) { value = 0; }
- else if (value > max) { value = max; }
- return value;
- }
- }
-
- loss(filters) { // Argument is array of percentages.
- let color = this.reusedColor;
- color.set(0, 0, 0);
-
- color.invert(filters[0] / 100);
- color.sepia(filters[1] / 100);
- color.saturate(filters[2] / 100);
- color.hueRotate(filters[3] * 3.6);
- color.brightness(filters[4] / 100);
- color.contrast(filters[5] / 100);
-
- let colorHSL = color.hsl();
- return Math.abs(color.r - this.target.r)
- + Math.abs(color.g - this.target.g)
- + Math.abs(color.b - this.target.b)
- + Math.abs(colorHSL.h - this.targetHSL.h)
- + Math.abs(colorHSL.s - this.targetHSL.s)
- + Math.abs(colorHSL.l - this.targetHSL.l);
- }
-
- css(filters) {
- function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); }
- return `invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%)`;
- }
-}
diff --git a/static/js/lib/custom_html_element.mjs b/static/js/lib/custom_html_element.mjs
index 2cec808..dedb5d8 100644
--- a/static/js/lib/custom_html_element.mjs
+++ b/static/js/lib/custom_html_element.mjs
@@ -1,10 +1,10 @@
export class CustomHTMLElement extends HTMLElement {
- constructor(useShadow) {// {{{
+ constructor() {// {{{
super()
- const workOn = useShadow ? this.attachShadow({ mode: 'open' }) : this
- workOn.appendChild(this.constructor.tmpl.content.cloneNode(true))
- workOn.querySelectorAll('*').forEach(el => {
+ this.appendChild(this.constructor.tmpl.content.cloneNode(true))
+
+ this.querySelectorAll('*').forEach(el => {
const field = el.dataset.field
if (field !== undefined) {
const fieldName = this.toElementName('field', field)
diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 62a6996..ca85d3e 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -92,34 +92,30 @@ function escapeHtmlEntities(html, encode) {// {{{
export class MarkedPosition {
constructor() {// {{{
- window.setpos = (event) => this.setpos(event)
- this.render()
- }// }}}
- setpos(event) {// {{{
- event.stopPropagation()
- event.preventDefault()
+ window.setpos = (event) => {
+ event.stopPropagation()
+ event.preventDefault()
+
+ _mbus.dispatch('MARKDOWN_EDIT', {
+ position: {
+ start: event.target.dataset.offsetStart,
+ end: event.target.dataset.offsetEnd,
+ }
+ })
+ }
- _mbus.dispatch('MARKDOWN_EDIT', {
- position: {
- start: event.target.closest('[data-offset-start]').dataset.offsetStart,
- end: event.target.closest('[data-offset-start]').dataset.offsetEnd,
- }
- })
- }// }}}
- render() {// {{{
- const markedObject = this
this.marked = new Marked()
this.marked.use(markedTokenPosition())
this.marked.use({
renderer: {
heading(token) {
const content = this.parser.parseInline(token.tokens)
- return `
-
-
-
-
-
-
- `
+ return ``
+ (token.escaped ? code : escapeHtmlEntities(code, true))
+ '
\n'
}
- return `'
+ (token.escaped ? code : escapeHtmlEntities(code, true))
@@ -161,7 +157,7 @@ export class MarkedPosition {
blockquote(token) {
const body = this.parser.parse(token.tokens)
- return `\n${body}
\n`
+ return `\n${body}
\n`
},
html(token) {
@@ -173,11 +169,11 @@ export class MarkedPosition {
},
hr(token) {
- return `
\n`
+ return `
\n`
},
checkbox(token) {
- return ` '
},
@@ -222,7 +218,7 @@ export class MarkedPosition {
if (token.tokens.length > 0) {
const start = token.tokens[0].position.start.offset
const end = token.tokens[0].position.end.offset
- ofs = `ondblclick="setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
+ ofs = `onclick="setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
}
const content = this.parser.parseInline(token.tokens);
@@ -234,23 +230,23 @@ export class MarkedPosition {
},
strong(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
em(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
codespan(token) {
- return `${escapeHtmlEntities(token.text, true)}`
+ return `${escapeHtmlEntities(token.text, true)}`
},
br(token) {
- return `
`
+ return `
`
},
del(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
link(token) {
@@ -260,7 +256,7 @@ export class MarkedPosition {
return text
}
token.href = cleanHref
- let out = ' {
- const target = document.getElementById(id)
- if (target) {
- observer.disconnect()
- return target
- }
- })
-
- observer.observe(document.documentElement, {
- childList: true,
- subtree: true
- })
- }// }}}
- async populateImg(fileID, elementID) {// {{{
- let img = await globalThis.nodeStore.files.get(fileID)
- const el = await this.whenElementExist(elementID)
-
- el.src = URL.createObjectURL(img.file)
- }// }}}
}
diff --git a/static/js/page_node.mjs b/static/js/node.mjs
similarity index 83%
rename from static/js/page_node.mjs
rename to static/js/node.mjs
index 86c29c0..7959831 100644
--- a/static/js/page_node.mjs
+++ b/static/js/node.mjs
@@ -1,8 +1,8 @@
-import { ROOT_NODE, uuidv7, StoreFile } from 'node_store'
+import { ROOT_NODE } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
import { MarkedPosition } from './marked_position.mjs'
-export class N2PageNodeUI extends CustomHTMLElement {
+export class N2NodeUI extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
@@ -72,7 +72,6 @@ export class N2PageNodeUI extends CustomHTMLElement {
}
})
this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
- this.elNodeContent.addEventListener('paste', async (event) => this.pasteHandler(event))
this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown()))
this.showMarkdown(true)
@@ -119,47 +118,6 @@ export class N2PageNodeUI extends CustomHTMLElement {
return this.classList.contains('show-markdown')
}
}// }}}
- async pasteHandler(event) {
- const clipboardItems = event.clipboardData?.items
- if (!clipboardItems)
- return
-
- for (const item of clipboardItems) {
- switch (item.kind) {
- case 'string':
- continue
-
- case 'file':
- const file = item.getAsFile()
- if (!file)
- throw new Error("Couldn't convert image to file object.")
- const uuid = uuidv7()
- await globalThis.nodeStore.files.add({ data: { UUID: uuid, file: file }})
-
- const [start, end] = [this.elNodeContent.selectionStart, this.elNodeContent.selectionEnd]
- this.elNodeContent.setRangeText(``, start, end, 'select');
-
- break
-
- default:
- alert(`Unknown paste type of '${item.kind}'`)
- }
- }
- }
-
- // Example usage: Displaying the image or preparing it for upload
- handleImageBlob(blob) {
- // 1. Create a local URL to preview it in an ![]()
tag if needed
- const localUrl = URL.createObjectURL(blob)
- console.log('Local preview URL:', localUrl)
-
- // 2. Or prepare it for a FormData upload
- const formData = new FormData()
- formData.append('image', blob, 'pasted-image.png')
-
- // fetch('/upload', { method: 'POST', body: formData })
- }
-
editMarkdown(data) {// {{{
this.showMarkdown(false)
this.elNodeContent.selectionStart = data.position.start
@@ -167,7 +125,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
this.elNodeContent.focus()
}// }}}
}
-customElements.define('n2-nodeui', N2PageNodeUI)
+customElements.define('n2-nodeui', N2NodeUI)
export class Node {
static sort(a, b) {//{{{
@@ -302,4 +260,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 d29923f..e849e29 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -12,11 +12,10 @@ export class NodeStore {
this.nodes = {}
this.sendQueue = null
this.nodesHistory = null
- this.files = null
}//}}}
initializeDB() {//{{{
return new Promise((resolve, reject) => {
- const req = indexedDB.open('notes', 8)
+ const req = indexedDB.open('notes', 7)
// Schema upgrades for IndexedDB.
// These can start from different points depending on updates to Notes2 since a device was online.
@@ -25,7 +24,6 @@ export class NodeStore {
let appState
let sendQueue
let nodesHistory
- let files
const db = event.target.result
const trx = event.target.transaction
@@ -63,10 +61,6 @@ export class NodeStore {
case 7:
trx.objectStore('nodes_history').createIndex('byUUID', 'UUID', { unique: false })
break
-
- case 8:
- files = db.createObjectStore('files', { keyPath: 'UUID' })
- break
}
}
}
@@ -75,7 +69,6 @@ export class NodeStore {
this.db = event.target.result
this.sendQueue = new SimpleNodeStore(this.db, 'send_queue')
this.nodesHistory = new SimpleNodeStore(this.db, 'nodes_history')
- this.files = new SimpleNodeStore(this.db, 'files')
this.initializeRootNode()
.then(() => resolve())
}
@@ -166,6 +159,39 @@ export class NodeStore {
})
}//}}}
+ /*
+ upsertNodeRecords(records) {//{{{
+ 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()
+ }
+
+ // records is an object, not an array.
+ for (const i in records) {
+ const record = records[i]
+
+ let addReq
+ let op
+ if (record.Deleted) {
+ op = 'deleting'
+ addReq = nodeStore.delete(record.UUID)
+ } else {
+ op = 'upserting'
+ // 'modified' is a local property for tracking
+ // nodes needing to be synced to backend.
+ record.modified = 0
+ addReq = nodeStore.put(record)
+ }
+ }
+ })
+ }//}}}
+ */
getTreeNodes(parent, newLevel) {//{{{
return new Promise((resolve, reject) => {
// Parent of toplevel nodes is ROOT_NODE in indexedDB.
@@ -350,20 +376,8 @@ class SimpleNodeStore {
}
})
}//}}}
- get(key) {//{{{
- return new Promise((resolve, _reject) => {
- const req = this.db
- .transaction(['nodes', this.storeName], 'readonly')
- .objectStore(this.storeName)
- .get(key)
-
- req.onsuccess = (event) => {
- resolve(event.target.result)
- }
- })
- }//}}}
retrieve(limit) {//{{{
- return new Promise((resolve, _reject) => {
+ return new Promise((resolve, reject) => {
const cursorReq = this.db
.transaction(['nodes', this.storeName], 'readonly')
.objectStore(this.storeName)
@@ -419,51 +433,4 @@ class SimpleNodeStore {
}//}}}
}
-export class StoreFile {
- static createFromFileObject(f) {
- const obj = new StoreFile()
- obj.name = f.name
- obj.size = f.size
- obj.mime = f.type
- return obj
- }
- constructor() {
- this.name = ''
- this.size = 0
- this.mime = ''
-
- this.objectURL = null // URL.createObjectURL(blob)
- }
- data() {
- return {
- }
- }
-}
-
-export 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/notes2.mjs b/static/js/notes2.mjs
index ddaf891..50286af 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -86,6 +86,404 @@ export class Notes2 extends Component {
}//}}}
}
+class Tree extends Component {
+ constructor(props) {//{{{
+ super(props)
+ console.log('new tree')
+ this.treeNodeComponents = {}
+ this.treeTrunk = []
+ this.selectedNode = null
+ this.expandedNodes = {} // keyed on UUID
+ this.treeDiv = createRef()
+
+ // childrenFetchedCallbacks is keyed on a UUID and each
+ // item is an array with callbacks called when a UUID has
+ // had all children fetched.
+ this.childrenFetchedCallbacks = {}
+
+ this.props.app.tree = this
+
+ this.populateFirstLevel()
+ }//}}}
+ render({ app }) {//{{{
+ const renderedTreeTrunk = this.treeTrunk.map(node => {
+ 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)}>
+
+ 
_mbus.dispatch('op-search')} />
+ 
_sync.run()} />
+
+ ${renderedTreeTrunk}
+ `
+ }//}}}
+ componentDidMount() {//{{{
+ //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
+ if (node === null)
+ return
+ _notes2.current.tree.expandToTrunk(node)
+ this.setSelected(node)
+ }//}}}
+
+ fetchChildrenNotify(uuid, fn) {//{{{
+ if (this.childrenFetchedCallbacks[uuid] === undefined)
+ this.childrenFetchedCallbacks[uuid] = [fn]
+ else
+ this.childrenFetchedCallbacks[uuid].push(fn)
+ }//}}}
+ fetchChildrenOn(uuid) {//{{{
+ if (this.childrenFetchedCallbacks[uuid] === undefined)
+ return
+ for (const fn of this.childrenFetchedCallbacks[uuid])
+ fn(uuid)
+ delete this.childrenFetchedCallbacks[uuid]
+ }//}}}
+
+ populateFirstLevel(callback = null) {//{{{
+ nodeStore.get(ROOT_NODE)
+ .then(node => node.fetchChildren())
+ .then(children => {
+ this.treeNodeComponents = {}
+ this.treeTrunk = []
+ for (const node of children) {
+ // The root node isn't supposed to be shown in the tree.
+ if (node.UUID === ROOT_NODE)
+ continue
+ if (node.ParentUUID === ROOT_NODE)
+ this.treeTrunk.push(node)
+ }
+ this.forceUpdate()
+ if (callback)
+ callback()
+
+ })
+ .catch(e => { console.log(e); console.log(e.type, e.error); alert(e.error) })
+ }//}}}
+ setSelected(node, dontExpand) {//{{{
+ // The previously selected node, if any, needs to be rerendered
+ // to not retain its 'selected' class.
+ const prevUUID = this.selectedNode?.UUID
+ this.selectedNode = node
+ if (prevUUID)
+ this.treeNodeComponents[prevUUID]?.current.forceUpdate()
+
+ // And now the newly selected node is rerendered.
+ this.treeNodeComponents[node.UUID]?.current.forceUpdate()
+
+ if (!dontExpand)
+ this.setNodeExpanded(node, true)
+ }//}}}
+ isSelected(node) {//{{{
+ return this.selectedNode?.UUID === node.UUID
+ }//}}}
+ async expandToTrunk(node) {//{{{
+ // Get all ancestors from a certain node up to the highest grandparent.
+ const ancestry = await nodeStore.getNodeAncestry(node, [])
+ for (const i in ancestry) {
+ await nodeStore.node(ancestry[i].UUID).fetchChildren()
+ this.setNodeExpanded(ancestry[i], true)
+ }
+
+ // Already a top node, no need to expand anything.
+ if (ancestry.length === 0)
+ return
+
+ // Start the chain of by expanding the top node.
+ this.setNodeExpanded(ancestry[ancestry.length - 1], true)
+ }//}}}
+ getNodeExpanded(UUID) {//{{{
+ if (this.expandedNodes[UUID] === undefined)
+ this.expandedNodes[UUID] = signal(false)
+ return this.expandedNodes[UUID].value
+ }//}}}
+ async setNodeExpanded(node, value) {//{{{
+ return new Promise((resolve, reject) => {
+ const work = uuid => {
+ // Creating a default value if it doesn't exist already.
+ this.getNodeExpanded(uuid)
+ this.expandedNodes[uuid].value = value
+ resolve()
+ }
+
+ if (node.hasFetchedChildren()) {
+ work(node.UUID)
+ return
+ } else {
+ this.fetchChildrenNotify(node.UUID, uuid => work(uuid))
+ }
+ })
+ }//}}}
+ getParentWithNextSibling(node) {//{{{
+ let currNode = node
+ while (currNode !== null && currNode.UUID !== ROOT_NODE && currNode.getSiblingAfter() === null) {
+ currNode = currNode.getParent()
+ }
+ return currNode?.getSiblingAfter()
+ }//}}}
+ getLastExpandedNode(node) {//{{{
+ let currNode = node
+ while (this.getNodeExpanded(currNode.UUID) && currNode.hasChildren()) {
+ currNode = currNode.Children[currNode.Children.length - 1]
+ }
+ return currNode
+ }//}}}
+
+ async recursiveExpand(node, state) {//{{{
+ if (state)
+ await this.setNodeExpanded(node, true)
+
+ for (const child of node.Children)
+ await this.recursiveExpand(child, state)
+
+ if (!state)
+ await this.setNodeExpanded(node, false)
+ }//}}}
+
+ async keyHandler(event) {//{{{
+ let handled = true
+ const n = this.selectedNode
+ const Space = ' '
+
+ // This handler would otherwise react to stuff like Ctrl+L.
+ if (event.ctrlKey || event.altKey)
+ return
+
+ switch (event.key) {
+ // Space and enter is toggling expansion.
+ // Holding shift down does it recursively.
+ case Space:
+ case 'Enter':
+ const expanded = this.getNodeExpanded(n.UUID)
+ if (event.shiftKey) {
+ this.recursiveExpand(n, !expanded)
+ } else {
+ this.setNodeExpanded(n, !expanded)
+ }
+ break
+
+ case 'g':
+ case 'Home':
+ this.navigateTop()
+ break
+
+ case 'G':
+ case 'End':
+ this.navigateBottom()
+ break
+
+ case 'j':
+ case 'ArrowDown':
+ await this.navigateDown(this.selectedNode)
+ break
+
+ case 'k':
+ case 'ArrowUp':
+ await this.navigateUp(this.selectedNode)
+ break
+
+ case 'h':
+ case 'ArrowLeft':
+ await this.navigateLeft(this.selectedNode)
+ break
+
+ case 'l':
+ case 'ArrowRight':
+ await this.navigateRight(this.selectedNode)
+ break
+
+ default:
+ // nonsole.log(event.key)
+ handled = false
+ }
+
+ if (handled) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+ }//}}}
+ async navigateLeft(n) {//{{{
+ if (n === null)
+ return
+
+ const expanded = this.getNodeExpanded(n.UUID)
+ if (expanded && n.hasChildren()) {
+ this.setNodeExpanded(n, false)
+ return
+ }
+
+ if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) {
+ await _notes2.current.goToNode(n.getParent()?.UUID, true, true)
+ return
+ }
+
+ const siblingBefore = n.getSiblingBefore()
+ const siblingExpanded = this.getNodeExpanded(siblingBefore?.UUID)
+ if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
+ const siblingAbove = this.getLastExpandedNode(siblingBefore)
+ await _notes2.current.goToNode(siblingAbove?.UUID, true, true)
+ return
+ }
+
+ await _notes2.current.goToNode(n.getSiblingBefore()?.UUID, true, true)
+ }//}}}
+ async navigateRight(n) {//{{{
+ if (n === null)
+ return
+
+ const siblingAfter = n.getSiblingAfter()
+ const expanded = this.getNodeExpanded(n.UUID)
+
+ if (!expanded && n.hasChildren()) {
+ this.setNodeExpanded(n, true)
+ return
+ }
+
+ if (expanded && n.hasChildren()) {
+ await _notes2.current.goToNode(n.Children[0]?.UUID, true, true)
+ return
+ }
+
+ if (n.isLastSibling()) {
+ const nextNode = this.getParentWithNextSibling(n)
+ await _notes2.current.goToNode(nextNode?.UUID, true, true)
+ return
+ }
+
+ await _notes2.current.goToNode(n.getSiblingAfter()?.UUID, true, true)
+ }//}}}
+ async navigateUp(n) {//{{{
+ if (n === null)
+ return
+
+ let parent = null
+ const siblingBefore = n.getSiblingBefore()
+ let siblingExpanded = false
+ if (siblingBefore !== null)
+ siblingExpanded = this.getNodeExpanded(siblingBefore.UUID)
+
+ if (n.isFirstSibling()) {
+ parent = n.getParent()
+ if (parent?.UUID === ROOT_NODE)
+ return
+ await _notes2.current.goToNode(parent?.UUID, true, true)
+ return
+ }
+
+ if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
+ await _notes2.current.goToNode(siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, true, true)
+ return
+ }
+
+ if (siblingBefore) {
+ await _notes2.current.goToNode(siblingBefore.UUID, true, true)
+ return
+ }
+ }//}}}
+ async navigateDown(n) {//{{{
+ if (n === null)
+ return
+
+ const nodeExpanded = this.getNodeExpanded(n.UUID)
+
+ // Last node, not expanded, so it matters not whether it has children or not.
+ // Traverse upward to nearest parent with next sibling.
+ if (!nodeExpanded && n.isLastSibling()) {
+ const wantedNode = this.getParentWithNextSibling(n)
+ await _notes2.current.goToNode(wantedNode?.UUID, true, true)
+ return
+ }
+
+ if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
+ const wantedNode = this.getParentWithNextSibling(n)
+ await _notes2.current.goToNode(wantedNode?.UUID, true, true)
+ return
+ }
+
+ // Node not expanded. Go to this node's next sibling.
+ // GoToNode will abort if given null.
+ if (!nodeExpanded || !n.hasChildren()) {
+ await _notes2.current.goToNode(n.getSiblingAfter()?.UUID, true, true)
+ return
+ }
+
+ // Node is expanded.
+ // Children will be visually beneath this node, if any.
+ if (nodeExpanded && n.hasChildren()) {
+ await _notes2.current.goToNode(n.Children[0].UUID, true, true)
+ return
+ }
+ }//}}}
+ async navigateTop() {//{{{
+ const root = await nodeStore.get(ROOT_NODE)
+ if (root.Children.length === 0)
+ return
+ await _notes2.current.goToNode(root.Children[0]?.UUID, true, true)
+ }//}}}
+ async navigateBottom() {//{{{
+ const root = await nodeStore.get(ROOT_NODE)
+ if (root.Children.length === 0)
+ return
+
+ const toplevel = root.Children[root.Children.length - 1]
+ const toplevelExpanded = this.getNodeExpanded(toplevel?.UUID)
+
+ if (toplevelExpanded) {
+ const lastnode = this.getLastExpandedNode(toplevel)
+ await _notes2.current.goToNode(lastnode?.UUID, true, true)
+ } else
+ await _notes2.current.goToNode(root.Children[root.Children.length - 1]?.UUID, true, true)
+ }//}}}
+}
+
+class TreeNode extends Component {
+ constructor(props) {//{{{
+ super(props)
+ this.children_populated = signal(false)
+ if (this.props.node.Level === 0 || this.props.tree.getNodeExpanded(this.props.node.UUID))
+ this.fetchChildren()
+ }//}}}
+ render({ tree, node, parent }) {//{{{
+ // Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
+ const selected = tree.isSelected(node) ? 'selected' : ''
+
+ if (!this.children_populated.value && tree.getNodeExpanded(parent?.props.node.UUID))
+ this.fetchChildren()
+
+ const children = node.Children.map(node => {
+ tree.treeNodeComponents[node.UUID] = createRef()
+ return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${tree} node=${node} parent=${this} ref=${tree.treeNodeComponents[node.UUID]} selected=${node.UUID === tree.props.app.startNode?.UUID} />`
+ })
+
+ let expandImg = ''
+ if (node.Children.length === 0)
+ expandImg = html`
`
+ else {
+ if (tree.getNodeExpanded(node.UUID))
+ expandImg = html`
`
+ else
+ expandImg = html`
`
+ }
+
+ return html`
+
+
+ window._notes2.current.goToNode(node.UUID)}>${node.get('Name')}
+
+ `
+ }//}}}
+ async fetchChildren() {//{{{
+ await this.props.node.fetchChildren()
+ this.children_populated.value = true
+ }//}}}
+}
+
class Op {
constructor(id) {
this.id = id
diff --git a/static/js/page_storage.mjs b/static/js/page_storage.mjs
deleted file mode 100644
index 931a718..0000000
--- a/static/js/page_storage.mjs
+++ /dev/null
@@ -1,28 +0,0 @@
-import { CustomHTMLElement } from "./lib/custom_html_element.mjs"
-
-export class N2PageStorage extends CustomHTMLElement {
- static {
- this.tmpl = document.createElement('template')
- this.tmpl.innerHTML = `
- Local storage
-
-
-
- `
- }
- constructor() {
- super()
-
- window._mbus.subscribe('SHOW_PAGE', () => this.render())
- }
- async render() {
- const countNodes = await globalThis.nodeStore.nodeCount()
- const countQueuedNodes = await globalThis.nodeStore.sendQueue.count()
- const countHistoryNodes = await globalThis.nodeStore.nodesHistory.count()
-
- this.elCountNodes.innerText = countNodes
- this.elCountQueuedNodes.innerText = countQueuedNodes
- this.elCountHistoryNodes.innerText = countHistoryNodes
- }
-}
-customElements.define('n2-pagestorage', N2PageStorage)
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index e432f15..9b58cf7 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -9,9 +9,6 @@ export class Sync {
}//}}}
async run() {//{{{
- // XXX - Delete me
- return
-
try {
let duration = 0 // in ms
@@ -166,13 +163,13 @@ export class Sync {
}
export class N2SyncProgress extends CustomHTMLElement {
- static {// {{{
+ static {
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
0 / 0
`
- }// }}}
+ }
constructor() {//{{{
super()
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index b672742..3732fc5 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -1,19 +1,14 @@
import { ROOT_NODE } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
-import { Color, Solver } from './lib/css_colorize.mjs'
export class N2Tree extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
-
- 
-
-
-
+
-
- 
+
+
`
@@ -36,7 +31,7 @@ export class N2Tree extends CustomHTMLElement {
this.elSync.addEventListener('click', () => _sync.run())
this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
- _mbus.subscribe('NODE_MODIFIED', ({ detail }) => {
+ _mbus.subscribe('NODE_MODIFIED', ({ detail })=>{
const node = detail.data.node
const treenode = this.treeNodeComponents[node.get('UUID')]
@@ -48,12 +43,6 @@ export class N2Tree extends CustomHTMLElement {
})
this.populateFirstLevel()
-
- /* XXX - set color */
- let color = new Color(255, 96, 80)
- let solver = new Solver(color)
- let result = solver.solve()
- this.elSettings.style.filter = result.filter
}// }}}
render() {// {{{
if (this.rendered)
diff --git a/static/service_worker.js b/static/service_worker.js
index 80b79a1..4a5f71d 100644
--- a/static/service_worker.js
+++ b/static/service_worker.js
@@ -24,13 +24,13 @@ const CACHED_ASSETS = [
'/js/{{ .VERSION }}/crypto.mjs',
'/js/{{ .VERSION }}/key.mjs',
'/js/{{ .VERSION }}/lib/custom_html_element.mjs',
+ '/js/{{ .VERSION }}/lib/fullcalendar.min.js',
'/js/{{ .VERSION }}/lib/node_modules/marked/lib/marked.esm.js',
'/js/{{ .VERSION }}/lib/node_modules/marked-token-position/lib/index.esm.js',
'/js/{{ .VERSION }}/lib/sjcl.js',
'/js/{{ .VERSION }}/marked_position.mjs',
'/js/{{ .VERSION }}/mbus.mjs',
- '/js/{{ .VERSION }}/page_node.mjs',
- '/js/{{ .VERSION }}/page_storage.mjs',
+ '/js/{{ .VERSION }}/node.mjs',
'/js/{{ .VERSION }}/node_store.mjs',
'/js/{{ .VERSION }}/notes2.mjs',
'/js/{{ .VERSION }}/sync.mjs',
diff --git a/views/layouts/main.gotmpl b/views/layouts/main.gotmpl
index ead95a9..c744166 100644
--- a/views/layouts/main.gotmpl
+++ b/views/layouts/main.gotmpl
@@ -14,7 +14,7 @@
"checklist": "/js/{{ .VERSION }}/checklist.mjs",
"crypto": "/js/{{ .VERSION }}/crypto.mjs",
"node_store": "/js/{{ .VERSION }}/node_store.mjs",
- "node": "/js/{{ .VERSION }}/page_node.mjs",
+ "node": "/js/{{ .VERSION }}/node.mjs",
"tree": "/js/{{ .VERSION }}/tree.mjs"
}
}
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 80c084a..77b74a6 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -1,34 +1,18 @@
{{ define "page" }}
-
-
-
-
+
+