-
- `
- }
- 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 `${content}
\n` + return `${content}
\n` }, list(token) { @@ -138,7 +134,7 @@ export class MarkedPosition { }, listitem(token) { - 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 76%
rename from static/js/page_node.mjs
rename to static/js/node.mjs
index 753aa46..7959831 100644
--- a/static/js/page_node.mjs
+++ b/static/js/node.mjs
@@ -1,15 +1,15 @@
-import { ROOT_NODE, uuidv7 } 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 = `