-
{/if}
+ {#if store.isCanvas}
+
{/if}
{#key store.doc.version}
+ {:else}
+ 0}
+ bind:this={el}
+ tabindex="0"
+ role="application"
+ aria-label="Canvas"
+ style="--gs:{gridStep}px;--gx:{view.x}px;--gy:{view.y}px;--iz:{1 / view.z}"
+ onpointerdown={onDown}
+ ondblclick={onDouble}
+ oncontextmenu={onContext}
+ onkeydown={onKey}
+ ondragover={onDragOver}
+ ondrop={onDrop}
+>
+ {#if broken}
+
diff --git a/src/lib/components/ClipDialog.svelte b/src/lib/components/ClipDialog.svelte
new file mode 100644
index 0000000..56ef59d
--- /dev/null
+++ b/src/lib/components/ClipDialog.svelte
@@ -0,0 +1,35 @@
+
+
+
+
+ {:else}
+ This canvas file can’t be read. It is left exactly as it is.
+{broken}
+
+ {#each groups as n (n.id)}
+
+
+ {#if !data.nodes.length}
+
+
+ {#if n.collapsed}{heldBy.get(n.id) || 0} {(heldBy.get(n.id) || 0) === 1 ? 'item' : 'items'}{/if}
+ {#if editing?.id === n.id && editing.what === 'label'}
+
+ {:else}
+
+ {/each}
+
+
+
+ {#each data.edges as e (e.id)}
+ {#if e.label || (editing?.id === e.id && editing.what === 'edge')}
+ {@const g = edgeGeo(e)}
+ {#if g}
+ {#if editing?.id === e.id}
+
+ {:else}
+ {n.label || 'Group'}
+ {/if}
+ {#each C.SIDES as s (s)}{/each}
+ {#if !n.collapsed}{/if}
+ {e.label}
+ {/if}
+ {/if}
+ {/if}
+ {/each}
+
+ {#each cards as n (n.id)}
+ {@const kind = n.type === 'file' ? C.fileKind(n.file) : n.type}
+
+ {#if n.type === 'text'}
+ {#if editing?.id === n.id}
+
+ })
+ {:else if kind === 'canvas' || kind === 'other'}
+
+ {/each}
+
+ {#each guides as g, i (i)}
+
+ {/each}
+
+ {#if box}{/if}
+
+ {:else}
+
{#if String(n.text || '').trim()}{@html md(n.text)}{:else}Empty card{/if}
+ {/if}
+ {:else if kind === 'note'}
+ {@const p = previews[previewKey(n)]}
+ {@const page = pageOf(n.file)}
+
+
+
+ {#if !p || p.state === 'loading'}Loading…
+ {:else if p.state === 'missing'}This note isn’t in your notes folder.
+ {:else if p.state === 'board'}A board. Double-click to open it.
+ {:else if p.html}{@html p.html}
+ {:else}An empty note.{/if}
+
+ {:else if kind === 'image'}
+
+ {:else if kind === 'canvas' || kind === 'other'}
+ {kind === 'canvas' ? 'A canvas. Double-click to open it.' : n.file}
+ {:else if n.type === 'link'}
+ {@const meta = webMeta[n.url]}
+
+ {#if meta?.description}
+ {:else}
+ {meta.description}
{/if} + {meta ? hostOf(n.url) : n.url} +{n.type}
+ {/if}
+ {#each C.SIDES as s (s)}{/each}
+
+ Double-click anywhere to add a card,
or add notes and pictures from the bar below.
+
+ {/if}
+
+
+
+
+
+
+
+
+
+ {/if}
+
+ {#each Object.entries(COVERS) as [key, colors]}
+
+ {/each}
+ {#if onupload}
+
+ {/if}
+ {#if onurl}
+ {#if linking}
+
+
+
diff --git a/src/lib/components/CsvImportDialog.svelte b/src/lib/components/CsvImportDialog.svelte
new file mode 100644
index 0000000..05e8e3e
--- /dev/null
+++ b/src/lib/components/CsvImportDialog.svelte
@@ -0,0 +1,122 @@
+
+
+
+ { if (e.key === 'Enter') { e.preventDefault(); useAddress(); } if (e.key === 'Escape') { e.stopPropagation(); linking = false; problem = ''; } }}
+ />
+
+ {#if problem}
+ {:else}
+
+ {/if}
+ {/if}
+ {#if hasImage}
+
+ {/if}
+{problem}
{/if} +
+ {sel.length} selected
+ p.type !== 'files').map((p) => ({ value: p.key, label: `Set ${p.name}` }))} value={bulk.key} placeholder="Set a property…" onchange={pickBulk} />
+ {#if bulkProp}
+
+ (bulk.value = v)} onaddoption={(n) => addOption(bulkProp, n)} />
+
+
+ {/if}
+
+
+
+ {/if}
+
+
+
+ {#if !rows.length && records.length}
+
+ {:else if view.type === 'board'}
+ {#if !groupProp}
+ | + + | ++ + {#if !isEmbed} startResize(e, 'title')}>{/if} + | + {#each shownProps as p (p.key)} +{ dragProp = p.key; e.dataTransfer.setData('text/plain', p.key); e.dataTransfer.effectAllowed = 'move'; }} + ondragover={(e) => { if (dragProp) { e.preventDefault(); overProp = p.key; } }} + ondragleave={() => (overProp = null)} + ondrop={(e) => { e.preventDefault(); dropProp(p.key); }} + ondragend={() => { dragProp = null; overProp = null; }} + > + + {#if !isEmbed} startResize(e, p.key)}>{/if} + | + {/each} ++ {#if !isEmbed}{/if} + | +
|---|---|---|---|
| + + | ++ + + rename(rec, e.currentTarget.value)} /> + + + | + {#each shownProps as p (p.key)} ++ | |
| + | |||
| + | {@render calcCell('title', { type: 'text', key: 'title', name: 'Name' })} | + {#each shownProps as p (p.key)}{@render calcCell(p.key, p)} | {/each} ++ |
No records match this view's filters.
{/if} +A board groups records by a select or checkbox property.
+ {:else} +
+ {#each columns as col (col.id)}
+ {@const named = typeof col.value === 'string' && col.value !== ''}
+ {
+ if (dragCol) { if (named) { e.preventDefault(); overGroup = col.value; } }
+ else if (dragRec) { e.preventDefault(); overKey = 'c' + col.id; }
+ }}
+ ondragleave={() => { overKey = null; overGroup = null; }}
+ ondrop={(e) => { e.preventDefault(); drop(col); }}
+ >
+ { if (!(canEditGroups && named)) return; dragCol = col.value; e.dataTransfer.setData('text/plain', col.value); e.dataTransfer.effectAllowed = 'move'; }}
+ ondragend={() => { dragCol = null; overGroup = null; overKey = null; }}
+ oncontextmenu={(e) => openMenuAt('col', e, { name: col.value, title: col.title })}
+ >
+ {#if editCol && named && editCol.name === col.value}
+ { if (e.key === 'Enter') { e.preventDefault(); finishGroupName(); } if (e.key === 'Escape') { e.preventDefault(); editCol = null; } }}
+ onblur={finishGroupName}
+ />
+ {:else}
+
+ {/if}
+ {col.records.length}
+
+
+
+
+ {/each}
+ {#if canEditGroups}
+
+ {/if}
+
+ {/if}
+
+ {:else if view.type === 'calendar'}
+ {#if !dateProp}
+
+ {#each col.records as rec (rec.id)}
+
+
+ { dragRec = rec.id; e.dataTransfer.setData('text/plain', rec.id); e.dataTransfer.effectAllowed = 'move'; }}
+ ondragend={() => { dragRec = null; overKey = null; }}
+ onclick={(e) => { if (editCard?.id !== rec.id && !e.target.closest('.kmore')) open(rec); }}
+ onkeydown={(e) => e.key === 'Enter' && e.target === e.currentTarget && open(rec)}
+ oncontextmenu={(e) => openMenuAt('card', e, { id: rec.id })}
+ >
+
+ {/each}
+
+ {#if editCard?.id === rec.id}
+ e.stopPropagation()}
+ onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); finishCardName(); } if (e.key === 'Escape') { e.preventDefault(); editCard = null; } }}
+ onblur={finishCardName}
+ />
+ {:else}
+
+
+ A calendar needs a date property.
+ {:else} +
+
+ {/if}
+
+ {:else if view.type === 'gallery'}
+
+
+ {calTitle}
+
+
+
+
+
+
+
+
+ {#each weekdayNames(sunday) as d (d)}
+ {#if records.some((r) => !valueOf(r, dateProp))}
+ {d}
{/each}
+ {#each grid as week}
+ {#each week as day (day.iso)}
+ {@const items = days.get(day.iso) || []}
+ = reach.start && day.iso <= reach.to}
+ data-iso={day.iso}
+ role="group"
+ aria-label={fmtDate(day.iso)}
+ ondragover={(e) => { if (dragRec) { e.preventDefault(); overKey = 'd' + day.iso; } }}
+ ondragleave={() => (overKey = null)}
+ ondrop={(e) => { e.preventDefault(); dropDay(day.iso); }}
+ >
+
+ {/each}
+ {/each}
+
+ {day.day}
+
+
+ {#each items.slice(0, weekly ? 99 : 3) as rec (rec.id)}
+ {@const end = endOf(rec)}
+
+
+ {#if !end || end === day.iso}
+ e.preventDefault()} onpointerdown={(e) => grabEnd(e, rec)}>
+ {/if}
+
+ {/each}
+ {#if !weekly && items.length > 3}+{items.length - 3} more{/if}
+ {records.filter((r) => !valueOf(r, dateProp)).length} without a date aren't shown.
+ {/if} +
+ {#each rows as rec (rec.id)}
+ {@const img = firstImage(rec, props)}
+
+
+ {:else if view.type === 'timeline'}
+ {#if !dateProp}
+ open(rec)} onkeydown={(e) => e.key === 'Enter' && open(rec)}>
+
+ {/each}
+
+
+ {#if img}
{:else if isImageCover(rec.cover)}{:else}
+
+ {rec.title}
+ {@render recordProps(rec)}
+
+ A timeline needs a date property.
+ {:else} +
+
+
+
+
+
+ {/if}
+
+ {:else}
+
+
+ {#if tl.undated.length}
+
+ {#each monthsRow as m (m.key)}{px >= 8 ? m.label : m.label.slice(0, 3)}{/each}
+
+
+ {#each { length: span } as _, i}
+ {@const n = tl.from + i}
+ {@const iso = isoOfDay(n)}
+ 4}>{px >= 14 || (new Date(n * 864e5).getUTCDay() === 1) ? +iso.slice(8) : ''}
+ {/each}
+
+
+ {#if todayNum >= tl.from && todayNum <= tl.to}{/if}
+ {#if arrows.length}
+
+ {/if}
+ {#each tl.bars as b (b.rec.id)}
+ {@const r = barRange(b)}
+
+
+
+ {#if (r.to - r.from + 1) * px < 110}
+ {b.rec.title}
+ {/if}
+
+ {/each}
+
+ No date
+ {#each tl.undated as rec (rec.id)}
+
+
+
+
+ {/each}
+
+ {/if}
+
+ {#each rows as rec (rec.id)}
+
+ {/if}
+
+ {#if !records.length && view.type !== 'table'}
+ open(rec)} onkeydown={(e) => e.key === 'Enter' && open(rec)}>
+
+ {/each}
+
+ No records yet.
+ {/if} +
+
+
+{#if open}
+
+ e.preventDefault()}>
+ {#each rows as row, i (row.kind + (row.p ? row.p.id : row.id || ''))}
+ {#if row.kind === 'auto'}
+
+ {:else if row.kind === 'page'}
+ {@const [a, m, b] = mark(row.p.title)}
+
+ {:else}
+
+ {/if}
+ {:else}
+
+{/if}
diff --git a/src/lib/components/GraphView.svelte b/src/lib/components/GraphView.svelte
index cba0943..1a09a5b 100644
--- a/src/lib/components/GraphView.svelte
+++ b/src/lib/components/GraphView.svelte
@@ -5,6 +5,7 @@
import Icon from './Icon.svelte';
import WindowControls from './WindowControls.svelte';
import { store } from '$lib/state.svelte.js';
+ import { nodeColor } from '$lib/graphColors.js';
import { api, errorText } from '$lib/api.js';
import { toast } from '$lib/toast.svelte.js';
import { createSimulation, neighbourhood } from '$lib/graph.js';
@@ -49,6 +50,18 @@
const ids = new Set(nodes.map((n) => n.id));
let edges = data.edges.filter(([a, b]) => ids.has(a) && ids.has(b)).map((e) => [...e, 'link']);
if (g.folders) for (const n of nodes) if (n.parent && ids.has(n.parent)) edges.push([n.id, n.parent, 'tree']);
+ if (g.tags) {
+ // each tag becomes a node its pages hang from
+ const tagNodes = new Map();
+ for (const n of nodes) {
+ if (n.ghost) continue;
+ for (const t of n.tags || []) {
+ if (!tagNodes.has(t)) tagNodes.set(t, { id: '#' + t, title: '#' + t, tags: [], ghost: true, tag: t });
+ edges.push([n.id, '#' + t, 'tree']);
+ }
+ }
+ nodes = nodes.concat([...tagNodes.values()]);
+ }
if (g.local && cur && ids.has(cur)) {
const keep = neighbourhood(cur, edges, g.depth || 1);
nodes = nodes.filter((n) => keep.has(n.id));
@@ -62,12 +75,14 @@
sim.params.repel = (store.graph.repel || 420) * g.spacing;
sim.params.linkDistance = (store.graph.linkDistance || 96) * g.spacing;
sim.setData(nodes, edges);
+ // a big graph cools faster (about 120 ticks to rest instead of 300)
+ sim.alphaDecay = 1 - Math.pow(0.002, 1 / (nodes.length > 3000 ? 120 : 300));
const kind = new Map(edges.map(([a, b, k]) => [a + '\u0000' + b, k]));
for (const l of sim.links) l.kind = kind.get(l.source.id + '\u0000' + l.target.id) || 'link';
counts = { nodes: nodes.filter((n) => !n.ghost).length, links: sim.links.filter((l) => l.kind === 'link').length };
if (!fitted) {
// A head start so the first frame isn't a tangle; then frame it.
- sim.tick(Math.min(220, Math.max(60, 120000 / Math.max(1, nodes.length))));
+ sim.tickFor(Math.min(220, Math.max(60, 120000 / Math.max(1, nodes.length))), 350);
fitted = fit(false);
}
sim.reheat(0.5);
@@ -86,17 +101,12 @@
};
}
$effect(() => { store.theme; readColors(); draw(); });
+ // colouring a tag while the graph is open
+ $effect(() => { store.tagColors; redraw(); });
- const colorForNode = (n) => {
- if (n.tags && n.tags.length > 0) {
- // Pick a consistent color based on the first tag's name
- let hash = 0;
- for (let i = 0; i < n.tags[0].length; i++) hash = (hash << 5) - hash + n.tags[0].charCodeAt(i);
- return colors.tags[Math.abs(hash) % colors.tags.length];
- }
- return colors.ink3; // Default
- };
+ // A tag with a colour (see the sidebar's tag menu) gives its pages that colour here; the rest are plain.
+ const colorForNode = (n) => nodeColor(n.tags, store.tagColors, colors.ink3);
const radius = (n) => (n.ghost ? 3.5 : 3.6 + Math.sqrt(n.degree) * 1.7);
@@ -185,7 +195,7 @@
/* animation: run the simulation while it's warm or something is being dragged */
function frame() {
raf = 0;
- if (sim.running) sim.tick(sim.nodes.length > 1500 ? 1 : 2);
+ if (sim.running) sim.tickFor(sim.nodes.length > 1500 ? 1 : 2, 14);
draw();
if (sim.running || gesture?.kind === 'drag') start();
}
@@ -279,6 +289,7 @@
}
}
function open(n) {
+ if (n.tag) { store.filterTag = n.tag; store.closeGraph(); return; }
if (n.ghost) store.openLink(n.title);
else store.openPage(n.id);
}
@@ -375,6 +386,7 @@
{/if}
+
No pages yet.
+ {/each} +
Spacing
diff --git a/src/lib/components/HistoryDialog.svelte b/src/lib/components/HistoryDialog.svelte
new file mode 100644
index 0000000..64e91e0
--- /dev/null
+++ b/src/lib/components/HistoryDialog.svelte
@@ -0,0 +1,85 @@
+
+
+ e.key === 'Escape' && close()} />
+
+
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
new file mode 100644
index 0000000..c02946f
--- /dev/null
+++ b/src/lib/components/Icon.svelte
@@ -0,0 +1,13 @@
+
+
+{#if !PATHS[name] && isEmoji(name)}
+
+{:else}
+
+{/if}
diff --git a/src/lib/components/IconPicker.svelte b/src/lib/components/IconPicker.svelte
new file mode 100644
index 0000000..0d54c3f
--- /dev/null
+++ b/src/lib/components/IconPicker.svelte
@@ -0,0 +1,110 @@
+
+
+ { if (typeMenu && !e.target.closest?.('.ptype, .pk-type')) typeMenu = null; }} />
+
(open = false)} onpointerdown={(e) => { if (open && !box?.contains(e.target) && !trigger?.contains(e.target)) close(false); }} />
+
+
+
+{#if open}
+ e.key === 'Escape' && !capturing && close()} />
+
+{#snippet toggle(label, desc, on, flip)}
+
+
+
+
+
+
+ {#if doc && kind === 'canvas'}
+ {#key version}
diff --git a/src/lib/components/TagsDialog.svelte b/src/lib/components/TagsDialog.svelte
new file mode 100644
index 0000000..6aa0438
--- /dev/null
+++ b/src/lib/components/TagsDialog.svelte
@@ -0,0 +1,68 @@
+
+
+ e.key === 'Escape' && (editing ? (editing = null) : close())} />
+
+
diff --git a/src/lib/components/TasksDialog.svelte b/src/lib/components/TasksDialog.svelte
new file mode 100644
index 0000000..992a1b5
--- /dev/null
+++ b/src/lib/components/TasksDialog.svelte
@@ -0,0 +1,139 @@
+
+
+ e.key === 'Escape' && close()} />
+
+
diff --git a/src/lib/components/TemplateDialog.svelte b/src/lib/components/TemplateDialog.svelte
new file mode 100644
index 0000000..58edf2f
--- /dev/null
+++ b/src/lib/components/TemplateDialog.svelte
@@ -0,0 +1,127 @@
+
+
+
+
+ {#if store.currentDay}
+
+
diff --git a/src/lib/components/Outline.svelte b/src/lib/components/Outline.svelte
new file mode 100644
index 0000000..1d0a126
--- /dev/null
+++ b/src/lib/components/Outline.svelte
@@ -0,0 +1,103 @@
+
+
+
diff --git a/src/lib/components/PageView.svelte b/src/lib/components/PageView.svelte
index e7fa6b2..4bb3eb0 100644
--- a/src/lib/components/PageView.svelte
+++ b/src/lib/components/PageView.svelte
@@ -6,9 +6,14 @@
import Board from './Board.svelte';
import Outline from './Outline.svelte';
import { store, iconOf, coverOf } from '$lib/state.svelte.js';
- import { COVERS } from '$lib/icons.js';
+ import { COVERS, isImageCover } from '$lib/icons.js';
+ import { tagHex } from '$lib/tagColors.js';
import IconPicker from './IconPicker.svelte';
- import { api } from '$lib/api.js';
+ import Database from './Database.svelte';
+ import PropCell from './PropCell.svelte';
+ import { api, errorText } from '$lib/api.js';
+ import { toast } from '$lib/toast.svelte.js';
+ import { read, write, typeInfo, computeFormulas, TYPES } from '$lib/database.js';
let doc = $derived(store.doc);
let page = $derived(store.current);
@@ -17,6 +22,27 @@
let tags = $derived(Array.isArray(doc?.meta.tags) ? doc.meta.tags : []);
let created = $derived(doc?.meta.created || page?.created || null);
+ // When this page is a record of a database: that database's properties, shown here with their own editors.
+ let schema = $state(null); // { dbId, properties }
+ $effect(() => {
+ const parent = page && page.parent;
+ const owner = parent && store.pages.find((x) => x.id === parent);
+ const mine = doc && doc.id;
+ if (!owner || !owner.db || store.isDatabase) { schema = null; return; }
+ store.readSchema(parent).then((s) => { if (store.doc && store.doc.id === mine) schema = s ? { dbId: parent, properties: s.properties } : null; });
+ });
+ const schemaKeys = $derived(new Set((schema ? schema.properties : []).map((p) => p.key)));
+ // formula properties of the database, worked out for this record
+ const formulas = $derived(schema && doc ? computeFormulas(schema.properties, { title: doc.title, props: doc.meta }) : {});
+ async function addSchemaOption(p, name) {
+ const s = await store.readSchema(schema.dbId);
+ const q = s && s.properties.find((x) => x.key === p.key);
+ if (!q || (q.options || []).includes(name)) return;
+ (q.options ||= []).push(name);
+ await store.saveSchema(schema.dbId, s);
+ schema = { dbId: schema.dbId, properties: s.properties };
+ }
+
let scrollerEl = $state();
let titleEl = $state();
let iconEl = $state();
@@ -40,7 +66,7 @@
const fmtDate = (d) => {
if (!d) return '—';
const t = new Date(String(d).length === 10 ? d + 'T12:00:00' : d);
- return isNaN(t) ? String(d) : t.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+ return isNaN(t) ? String(d) : t.toLocaleDateString(store.prefs.locale || undefined, { month: 'short', day: 'numeric', year: 'numeric' });
};
function restart(el, cls) {
@@ -55,6 +81,37 @@
restart(iconEl, 'spin');
iconEl?.focus();
}
+ let coverBroken = $state(false);
+ const coverImage = $derived(isImageCover(doc?.meta.cover) ? doc.meta.cover : null);
+ $effect(() => { coverImage; coverBroken = false; });
+ // Pick a picture with the file dialog, or take a dropped one: it is saved next to the page like any image.
+ async function uploadCover() {
+ try {
+ const name = await api.pickImage(doc.id);
+ if (name) setCover(name);
+ } catch (err) {
+ toast(errorText(err), 'x');
+ }
+ }
+ // A picture from a web address: downloaded by the app and saved next to the page. Throws a message for the picker.
+ async function coverFromUrl(address) {
+ const name = await api.saveImageFromUrl(doc.id, address);
+ if (name) setCover(name);
+ }
+ async function dropCover(e) {
+ const file = [...(e.dataTransfer?.files || [])].find((f) => /^image\//.test(f.type));
+ if (!file) return;
+ e.preventDefault();
+ coverOver = false;
+ try {
+ if (file.size > 50 * 1024 * 1024) throw new Error('That image is too big (50 MB at most).');
+ const name = await api.saveImage(doc.id, file.name || 'cover.png', new Uint8Array(await file.arrayBuffer()));
+ if (name) setCover(name);
+ } catch (err) {
+ toast(errorText(err), 'x');
+ }
+ }
+ let coverOver = $state(false);
function setCover(v) {
pickingCover = false;
store.setMeta({ cover: v });
@@ -113,6 +170,52 @@
let addingProp = $state(false);
let newPropEl = $state();
+ /* A plain page's own properties are typed by their value: true/false is a checkbox, a number a number, YYYY-MM-DD a
+ date, a list a multi-select, an address a link. Nothing but the value is stored, so Obsidian reads them as is. */
+ const PLAIN_TYPES = ['text', 'number', 'date', 'checkbox', 'multiselect', 'url'];
+ const HIDDEN_KEYS = ['icon', 'cover', 'tags', 'created', 'ink-colors', 'kanban-plugin', 'ink-database', 'source'];
+ function inferType(v) {
+ if (typeof v === 'boolean' || /^(true|false)$/i.test(String(v))) return 'checkbox';
+ if (Array.isArray(v)) return 'multiselect';
+ if (typeof v === 'number' || /^-?\d+(\.\d+)?$/.test(String(v).trim())) return 'number';
+ if (/^\d{4}-\d{2}-\d{2}/.test(String(v))) return 'date';
+ if (/^https?:\/\/\S+$/i.test(String(v).trim())) return 'url';
+ return 'text';
+ }
+ const customKeys = $derived(doc ? Object.keys(doc.meta).filter((k) => doc.meta[k] !== undefined && !HIDDEN_KEYS.includes(k) && !schemaKeys.has(k)) : []);
+ // the values other pages give this key, as the choices of a list property
+ function optionsFor(k) {
+ const seen = new Set();
+ for (const p of store.pages) {
+ const v = p.props && p.props[k];
+ for (const x of Array.isArray(v) ? v : []) if (typeof x === 'string' && x.trim()) seen.add(x.trim());
+ }
+ const mine = doc.meta[k];
+ for (const x of Array.isArray(mine) ? mine : []) seen.add(String(x));
+ return [...seen].sort((a, b) => a.localeCompare(b));
+ }
+ const propFor = (k) => {
+ const type = inferType(doc.meta[k]);
+ return { key: k, name: k, type, options: type === 'multiselect' ? optionsFor(k) : [] };
+ };
+ const DEFAULTS = { text: '', number: '0', date: () => new Date().toISOString().slice(0, 10), checkbox: 'false', multiselect: [], url: '' };
+ const startValue = (t) => (typeof DEFAULTS[t] === 'function' ? DEFAULTS[t]() : DEFAULTS[t]);
+ function convertValue(v, from, to) {
+ if (to === 'multiselect') return Array.isArray(v) ? v : String(v ?? '').split(',').map((x) => x.trim()).filter(Boolean);
+ const plain = Array.isArray(v) ? v.join(', ') : String(v ?? '');
+ if (to === 'checkbox') return /^(true|yes|1|x|on)$/i.test(plain) ? 'true' : 'false';
+ if (to === 'number') { const n = Number(plain.replace(',', '.')); return Number.isFinite(n) && plain.trim() ? String(n) : '0'; }
+ if (to === 'date') return /^\d{4}-\d{2}-\d{2}/.test(plain) ? plain.slice(0, 10) : startValue('date');
+ return plain;
+ }
+ let typeMenu = $state(null); // { key, x, y } for changing a property's type
+ let newType = $state('text');
+ function setType(k, to) {
+ const from = inferType(doc.meta[k]);
+ typeMenu = null;
+ if (from !== to) store.setMeta({ [k]: convertValue(doc.meta[k], from, to) });
+ }
+
function updateMeta(k, v) {
if (Array.isArray(doc.meta[k])) {
store.setMeta({ [k]: v.split(',').map(s => s.trim()).filter(Boolean) });
@@ -141,13 +244,15 @@
function commitNewProp(k) {
k = k.trim().replace(/[^a-zA-Z0-9_-]/g, '-');
- if (k && !doc.meta[k] && !['icon', 'cover', 'tags', 'created'].includes(k)) {
- store.setMeta({ [k]: '' });
+ if (k && doc.meta[k] === undefined && !HIDDEN_KEYS.includes(k)) {
+ store.setMeta({ [k]: startValue(newType) });
}
addingProp = false;
}
+
+
+
+
+
+
+
+
+
+
+
+ {#each items as [v, words] (v)}
+
+ {:else}
+
+Nothing matches “{q}”.
+ {/each} +
{#if doc}
@@ -157,12 +262,26 @@
{/each}
{#key doc.version}
-
diff --git a/src/lib/components/Palette.svelte b/src/lib/components/Palette.svelte
new file mode 100644
index 0000000..8da78c1
--- /dev/null
+++ b/src/lib/components/Palette.svelte
@@ -0,0 +1,170 @@
+
+
+
diff --git a/src/lib/components/PropCell.svelte b/src/lib/components/PropCell.svelte
new file mode 100644
index 0000000..2deb87e
--- /dev/null
+++ b/src/lib/components/PropCell.svelte
@@ -0,0 +1,192 @@
+
+
+
+
+
-{#if store.outlineOpen && doc && !store.isBoard} { if ([...(e.dataTransfer?.items || [])].some((i) => i.kind === 'file')) { e.preventDefault(); coverOver = true; } }}
+ ondragleave={() => (coverOver = false)}
+ ondrop={dropCover}
+ >
+ {#if coverImage}
+ 
(coverBroken = true)} />
+ {/if}
-
+
+
+ {/if}
+{:else if prop.type === 'people'}
+
+ {#if prop.type === 'select' && value}
+
+ {/if}
+ {#each shown as o (o)}
+
+ {/each}
+ {#if canCreate}
+
+ {:else if !shown.length}
+
+ {isRelation ? 'No other records.' : 'No options yet. Type a name and press Enter.'}
+ {/if}
+
+ {#each chosen as n (n)}
+ {n.slice(0, 1).toUpperCase()}{n}
+ {/each}
+ {#if adding}
+ { if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addPerson(); } if (e.key === 'Escape') { draft = ''; adding = false; } }}
+ onblur={addPerson}
+ />
+
+ {:else}
+
+ {/if}
+
+{:else if prop.type === 'files'}
+
+ {#each chosen as f (f)}
+
+ {/each}
+
+
+{:else if showsFormat && !editingNumber}
+
+{:else if prop.type === 'number'}
+ (editingNumber = false)}
+ onchange={(e) => onchange(e.currentTarget.value === '' ? null : Number(e.currentTarget.value))}
+ />
+{:else if prop.type === 'date'}
+ onchange(e.currentTarget.value)} />
+{:else}
+ onchange(e.currentTarget.value)} />
+{/if}
diff --git a/src/lib/components/SelectMenu.svelte b/src/lib/components/SelectMenu.svelte
new file mode 100644
index 0000000..505fb1c
--- /dev/null
+++ b/src/lib/components/SelectMenu.svelte
@@ -0,0 +1,127 @@
+
+
+
+ {#if searchable}
+
+{/if}
diff --git a/src/lib/components/SettingsDialog.svelte b/src/lib/components/SettingsDialog.svelte
new file mode 100644
index 0000000..a921c36
--- /dev/null
+++ b/src/lib/components/SettingsDialog.svelte
@@ -0,0 +1,587 @@
+
+
+
+
+ {/if}
+
+ {#each shown as o, i (o.value)}
+ {@const [a, m, b] = mark(o.label)}
+
+ {:else}
+
+ Nothing matches.
+ {/each} +
+
+{/snippet}
+
+{#snippet seg(label, desc, options, value, pick)}
+ {label}{#if desc}{desc}{/if}
+
+
+
+{/snippet}
+
+
+
+{#snippet spellcheck()}
+ {label}{#if desc}{desc}{/if}
+
+ {#each options as [v, text] (v)}
+
+ {/each}
+
+
+
+ {#if spell?.enabled}
+ {#if spell.system}
+ Check spellingUnderlines misspelled words; right-click one for suggestions.
+
+ Spelling follows your system's languages here.
+ {:else} +
+ ({ value: l.code, label: l.name, detail: l.code }))}
+ onchange={setMain}
+ />
+
+ Language
+
+ l.code !== spell.languages[0]).map((l) => ({ value: l.code, label: l.name, detail: l.code }))]}
+ onchange={setSecond}
+ />
+
+ Also checkA second language, for notes that mix two.
+ Dictionaries are downloaded once per language, then work offline.
+ {/if} + {/if} + {#if isDesktop} +
+
+ {/if}
+{/snippet}
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
new file mode 100644
index 0000000..3c648aa
--- /dev/null
+++ b/src/lib/components/Sidebar.svelte
@@ -0,0 +1,302 @@
+
+
+
diff --git a/src/lib/components/SplitPane.svelte b/src/lib/components/SplitPane.svelte
new file mode 100644
index 0000000..3e25ab1
--- /dev/null
+++ b/src/lib/components/SplitPane.svelte
@@ -0,0 +1,176 @@
+
+
+Custom dictionaryWords you added with “Add to dictionary”. They are never underlined.
+
+ {#if words.length}
+
+ {#each words as w (w)}
+ {w}
+ {/each}
+
+ {/if}
+
+ {#if doc && kind !== 'page'}
+
+
+ {/if}
+
+ {/if}
+
+
+ {#key version}
+ {#if kind === 'board'}
+ {page ? page.title : id}
+{page ? page.title : id}
+ +
+
diff --git a/src/lib/components/Topbar.svelte b/src/lib/components/Topbar.svelte
index ab4fbc6..54fce1c 100644
--- a/src/lib/components/Topbar.svelte
+++ b/src/lib/components/Topbar.svelte
@@ -12,6 +12,9 @@
let trail = $derived(store.currentId ? [...store.ancestors(store.currentId), store.current].filter(Boolean) : []);
+ // the database this page is a record of
+ let owner = $derived(store.current && store.current.parent ? store.pages.find((p) => p.id === store.current.parent && p.db) || null : null);
+
function toggleMenu() {
menuOpen = !menuOpen;
armed = false;
@@ -25,7 +28,11 @@
}
menuOpen = false;
if (kind === 'md' || kind === 'html' || kind === 'pdf') store.exportFormat = kind;
+ if (kind === 'png' || kind === 'svg' || kind === 'cpdf') store.canvasView?.export(kind === 'cpdf' ? 'pdf' : kind);
if (kind === 'board') store.setBoard(!store.isBoard);
+ if (kind === 'csv') store.exportCsv();
+ if (kind === 'importCsv') store.pickCsv(store.currentId);
+ if (kind === 'moveOut' && owner) store.movePage(store.currentId, owner.parent);
if (kind === 'reveal') api.reveal(store.currentId);
if (kind === 'history') { store.historyOpen = store.currentId; }
if (kind === 'path') {
@@ -43,29 +50,64 @@
+
+
+
+
+ {/if}
{#if store.saving || store.justSaved}
{store.saving ? 'Saving…' : 'Saved to disk'}
{/if}
- {store.words} {store.words === 1 ? 'word' : 'words'}
+ {#if !store.isCanvas && !store.isDatabase}
+ {store.words} {store.words === 1 ? 'word' : 'words'}{#if store.words >= 100} · {Math.max(1, Math.round(store.words / 230))} min{/if}
+ {/if}
+
{#if menuOpen}
+ {#if !store.isCanvas}
+ {#if !store.isDatabase}
+ {/if}
+ {#if store.isDatabase}
+
+
+ {:else}
-
+ {/if}
+ {#if owner}
+
+ {/if}
+ {:else}
+
+
+
+
+ {/if}
{#if isDesktop}
{/if}
diff --git a/src/lib/components/TrashDialog.svelte b/src/lib/components/TrashDialog.svelte
new file mode 100644
index 0000000..f6e11a8
--- /dev/null
+++ b/src/lib/components/TrashDialog.svelte
@@ -0,0 +1,89 @@
+
+
+ e.key === 'Escape' && close()} />
+
+
diff --git a/src/lib/components/TreeNode.svelte b/src/lib/components/TreeNode.svelte
new file mode 100644
index 0000000..3403556
--- /dev/null
+++ b/src/lib/components/TreeNode.svelte
@@ -0,0 +1,133 @@
+
+
+ window.innerWidth > 760 && (store.drawer = false)} />
+ !e.relatedTarget && store.peekWindowLeft()} onblur={() => store.peekWindowLeft()} onpointermove={(e) => store.collapsed && store.peekMoved(e.clientX, e.clientY)} onresize={() => window.innerWidth > 760 && (store.drawer = false)} />
{#if store.vault}
-
+
diff --git a/src/lib/components/Welcome.svelte b/src/lib/components/Welcome.svelte
new file mode 100644
index 0000000..a2fd7fc
--- /dev/null
+++ b/src/lib/components/Welcome.svelte
@@ -0,0 +1,18 @@
+
+
+ { if (renaming) return; if (e.altKey && page.exists) store.openSplit(page.id); else store.openPage(page.id); }}
+ {onkeydown}
+ {oncontextmenu}
+ >
+
+
+ {#if kids.length && (open || seen)}
+
+
+ {/if}
+
+ {#each shown as kid (kid.id)}
+
+
+
diff --git a/src/lib/components/WindowControls.svelte b/src/lib/components/WindowControls.svelte
new file mode 100644
index 0000000..e4f4794
--- /dev/null
+++ b/src/lib/components/WindowControls.svelte
@@ -0,0 +1,25 @@
+
+
+{#if show}
+
+ 
+
+
+ Where should your notes live?
+Every page is a plain Markdown file in a folder you pick. Nothing leaves this computer, and an existing Obsidian vault works too.
+
+
+
+
+
+
+
+
+
+{/if}
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
new file mode 100644
index 0000000..6f10b29
--- /dev/null
+++ b/src/routes/+layout.js
@@ -0,0 +1,3 @@
+// Desktop SPA: no server rendering, no prerendering. adapter-static writes index.html as the fallback.
+export const ssr = false;
+export const prerender = false;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..764f102
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,11 @@
+
+
+{@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b89c7fe..db805eb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
import Sidebar from '$lib/components/Sidebar.svelte';
import Topbar from '$lib/components/Topbar.svelte';
import PageView from '$lib/components/PageView.svelte';
+ import SplitPane from '$lib/components/SplitPane.svelte';
import Palette from '$lib/components/Palette.svelte';
import ExportDialog from '$lib/components/ExportDialog.svelte';
import Toast from '$lib/components/Toast.svelte';
@@ -10,9 +11,17 @@
import TextMenu from '$lib/components/TextMenu.svelte';
import FindBar from '$lib/components/FindBar.svelte';
import GraphView from '$lib/components/GraphView.svelte';
+ import CanvasView from '$lib/components/CanvasView.svelte';
import TrashDialog from '$lib/components/TrashDialog.svelte';
+ import { actionFor } from '$lib/shortcuts.js';
+ import { installDialogFocus } from '$lib/a11y.js';
+ import TasksDialog from '$lib/components/TasksDialog.svelte';
+ import TagsDialog from '$lib/components/TagsDialog.svelte';
+ import DailyCalendar from '$lib/components/DailyCalendar.svelte';
+ import ClipDialog from '$lib/components/ClipDialog.svelte';
import HistoryDialog from '$lib/components/HistoryDialog.svelte';
import TemplateDialog from '$lib/components/TemplateDialog.svelte';
+ import CsvImportDialog from '$lib/components/CsvImportDialog.svelte';
import SettingsDialog from '$lib/components/SettingsDialog.svelte';
import Welcome from '$lib/components/Welcome.svelte';
import { store } from '$lib/state.svelte.js';
@@ -21,45 +30,127 @@
onMount(() => {
store.init();
+ const offDialogs = installDialogFocus();
// Right-click: remember what was clicked; if nothing in the page handled it, Electron reports it back and
// the app's own menu opens (the browser preview keeps the browser's menu).
let target = null;
const remember = (e) => { target = e.target; };
window.addEventListener('contextmenu', remember, true);
const off = api.onContextMenu?.((info) => { store.textMenu = { ...info, target }; });
- return () => { window.removeEventListener('contextmenu', remember, true); off?.(); };
+
+ // Mouse back / forward buttons (buttons 3 and 4)
+ const onMouseNav = (e) => {
+ if (e.button === 3) {
+ e.preventDefault();
+ e.stopPropagation();
+ store.back();
+ } else if (e.button === 4) {
+ e.preventDefault();
+ e.stopPropagation();
+ store.forward();
+ }
+ };
+ const onMousePrevent = (e) => {
+ if (e.button === 3 || e.button === 4) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ };
+ window.addEventListener('mouseup', onMouseNav, true);
+ window.addEventListener('mousedown', onMousePrevent, true);
+ window.addEventListener('pointerdown', onMousePrevent, true);
+ window.addEventListener('auxclick', onMousePrevent, true);
+
+ const offNav = api.onNav?.((dir) => {
+ if (dir === 'back') store.back();
+ else if (dir === 'forward') store.forward();
+ });
+
+ return () => {
+ window.removeEventListener('contextmenu', remember, true);
+ window.removeEventListener('mouseup', onMouseNav, true);
+ window.removeEventListener('mousedown', onMousePrevent, true);
+ window.removeEventListener('pointerdown', onMousePrevent, true);
+ window.removeEventListener('auxclick', onMousePrevent, true);
+ off?.();
+ offNav?.();
+ offDialogs?.();
+ };
});
function onkeydown(e) {
+ if (e.key === 'Escape' && store.peek) store.peekEscape();
+
+ // Back / Forward keyboard shortcuts
+ if (e.altKey && !e.ctrlKey && !e.metaKey && e.key === 'ArrowLeft') {
+ e.preventDefault();
+ store.back();
+ return;
+ }
+ if (e.altKey && !e.ctrlKey && !e.metaKey && e.key === 'ArrowRight') {
+ e.preventDefault();
+ store.forward();
+ return;
+ }
+ if (platform === 'darwin' && e.metaKey && !e.altKey && !e.ctrlKey && e.key === '[') {
+ e.preventDefault();
+ store.back();
+ return;
+ }
+ if (platform === 'darwin' && e.metaKey && !e.altKey && !e.ctrlKey && e.key === ']') {
+ e.preventDefault();
+ store.forward();
+ return;
+ }
const mod = e.ctrlKey || e.metaKey;
if (!mod || !store.vault) return;
- const k = e.key.toLowerCase();
- if (k === 'k') { e.preventDefault(); store.paletteOpen = !store.paletteOpen; }
- else if (k === 'o' && e.shiftKey) { e.preventDefault(); if (store.doc && !store.isBoard && store.view === 'page') store.toggleOutline(); }
- else if (k === 'g' && !e.shiftKey) { e.preventDefault(); store.view === 'graph' ? store.closeGraph() : store.openGraph(); }
- else if (k === ',') { e.preventDefault(); store.settingsOpen = !store.settingsOpen; }
- else if (k === 'd' && e.shiftKey) { e.preventDefault(); store.openDaily(); }
- else if (k === 'n') { e.preventDefault(); store.templatesOpen = { parent: null }; }
- else if (k === '\\') { e.preventDefault(); store.toggleSidebar(); }
- else if (k === 'f' && store.doc && store.view === 'page') { e.preventDefault(); store.findOpen = (store.findOpen || 0) + 1; }
- else if (k === 's' && !e.shiftKey) { e.preventDefault(); store.flush().then(() => toast('Saved to disk')); }
+ switch (actionFor(e, store.prefs.shortcuts)) {
+ case 'palette': e.preventDefault(); store.paletteOpen = !store.paletteOpen; break;
+ case 'outline': e.preventDefault(); if (store.doc && !store.isBoard && !store.isDatabase && !store.isCanvas && store.view === 'page') store.toggleOutline(); break;
+ case 'tasks': e.preventDefault(); store.tasksOpen = !store.tasksOpen; break;
+ case 'graph': e.preventDefault(); store.view === 'graph' ? store.closeGraph() : store.openGraph(); break;
+ case 'settings': e.preventDefault(); store.settingsOpen = !store.settingsOpen; break;
+ case 'daily': e.preventDefault(); store.openDaily(); break;
+ case 'newPage': e.preventDefault(); store.templatesOpen = { parent: null }; break;
+ case 'split': e.preventDefault(); if (store.doc && store.view === 'page') store.toggleSplit(); break;
+ case 'sidebar': e.preventDefault(); store.toggleSidebar(); break;
+ case 'find': if (store.doc && store.view === 'page' && !store.isCanvas) { e.preventDefault(); store.findOpen = (store.findOpen || 0) + 1; } break;
+ case 'save': e.preventDefault(); store.flush().then(() => toast('Saved to disk')); break;
+ }
}
-
+
+ {#if store.collapsed && !store.focusMode}
+
+
+ {#if store.splitHint && store.view === 'page'}
+
+ {/if}
{#if store.view === 'graph'}
@@ -72,7 +163,12 @@
{#if store.menu} store.peekOn()}>
+ {/if}
(store.drawer = false)}>