benjivers/notes Public Public: anyone can read this; nobody can change it.

// The graph: every note a point, every [[link]] a line, laid out by a

// small force simulation — notes push each other apart, links pull their

// ends together, and the whole drifts to the middle. Drag a note to move

// it, drag the space to pan, scroll or pinch to zoom, click to open.

// A canvas with data-graph="local" and data-focus="<id>" draws only that

// note and its neighbours. Colours are the tokens', read from the page.

const charts = new WeakSet();

function data() {

  try {

    return JSON.parse(document.getElementById("graph")?.textContent ?? "");

  } catch {

    return { nodes: [], edges: [] };

  }

}

function colours() {

  const css = getComputedStyle(document.documentElement);

  const v = (name) => css.getPropertyValue(name).trim();

  return {

    node: v("--color-graph-node"),

    edge: v("--color-graph-edge"),

    accent: v("--color-accent"),

    label: v("--color-fg"),

    quiet: v("--color-muted"),

    bg: v("--color-bg"),

  };

}

/** A small deterministic spread, so the same vault opens the same way. */

const jitter = (id, k) => {

  const x = Math.sin(id * 12.9898 + k * 78.233) * 43758.5453;

  return x - Math.floor(x) - 0.5;

};

function chart(canvas) {

  if (charts.has(canvas)) return;

  charts.add(canvas);

  const all = data();

  const focus = canvas.dataset.focus ? Number(canvas.dataset.focus) : null;

  let nodes = all.nodes;

  let edges = all.edges;

  if (focus !== null) {

    const near = new Set([focus]);

    for (const [a, b] of edges) {

      if (a === focus) near.add(b);

      if (b === focus) near.add(a);

    }

    nodes = nodes.filter((n) => near.has(n.id));

    edges = edges.filter(([a, b]) => near.has(a) && near.has(b));

  }

  const local = focus !== null;

  const byId = new Map();

  const ps = nodes.map((n, i) => {

    const angle = (i / Math.max(1, nodes.length)) * Math.PI * 2;

    const r = 40 + Math.sqrt(nodes.length) * 18;

    const p = {

      ...n,

      x: n.id === focus ? 0 : Math.cos(angle) * r + jitter(n.id, 1) * 30,

      y: n.id === focus ? 0 : Math.sin(angle) * r + jitter(n.id, 2) * 30,

      vx: 0,

      vy: 0,

      r: (local ? 4 : 3) + Math.sqrt(n.links) * 1.7,

      fixed: false,

    };

    byId.set(n.id, p);

    return p;

  });

  const links = edges.map(([a, b]) => [byId.get(a), byId.get(b)]).filter(([a, b]) => a && b);

  const neighbours = new Map(ps.map((p) => [p.id, new Set()]));

  for (const [a, b] of links) {

    neighbours.get(a.id).add(b.id);

    neighbours.get(b.id).add(a.id);

  }

  const ctx = canvas.getContext("2d");

  let c = colours();

  let w = 0;

  let h = 0;

  let view = { x: 0, y: 0, k: local ? 1.1 : 1 };

  let hover = null;

  let alpha = 1;

  let running = false;

  const still = matchMedia("(prefers-reduced-motion: reduce)").matches;

  function size() {

    const r = canvas.getBoundingClientRect();

    const dpr = devicePixelRatio || 1;

    w = r.width;

    h = r.height;

    canvas.width = Math.round(w * dpr);

    canvas.height = Math.round(h * dpr);

    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

    draw();

  }

  function tick() {

    const n = ps.length;

    const repel = local ? 900 : 2600 + ps.length * 40;

    for (let i = 0; i < n; i++) {

      const a = ps[i];

      for (let j = i + 1; j < n; j++) {

        const b = ps[j];

        let dx = a.x - b.x;

        let dy = a.y - b.y;

        let d2 = dx * dx + dy * dy;

        if (d2 < 0.01) {

          dx = jitter(a.id, j);

          dy = jitter(b.id, i);

          d2 = 0.01;

        }

        if (d2 > 1_000_000) continue;

        const f = (repel * alpha) / d2;

        const d = Math.sqrt(d2);

        a.vx += (dx / d) * f;

        a.vy += (dy / d) * f;

        b.vx -= (dx / d) * f;

        b.vy -= (dy / d) * f;

      }

    }

    const rest = local ? 70 : 95;

    for (const [a, b] of links) {

      const dx = b.x - a.x;

      const dy = b.y - a.y;

      const d = Math.sqrt(dx * dx + dy * dy) || 1;

      const f = (d - rest) * 0.04 * alpha;

      a.vx += (dx / d) * f;

      a.vy += (dy / d) * f;

      b.vx -= (dx / d) * f;

      b.vy -= (dy / d) * f;

    }

    for (const p of ps) {

      p.vx -= p.x * 0.006 * alpha;

      p.vy -= p.y * 0.006 * alpha;

      if (p.fixed || (local && p.id === focus)) {

        p.vx = p.vy = 0;

        if (local && p.id === focus && !p.fixed) p.x = p.y = 0;

        continue;

      }

      p.vx *= 0.82;

      p.vy *= 0.82;

      p.x += Math.max(-30, Math.min(30, p.vx));

      p.y += Math.max(-30, Math.min(30, p.vy));

    }

    alpha = Math.max(0, alpha * 0.985 - 0.0005);

  }

  // Once the layout has mostly settled, frame it: the whole vault in view,

  // never blown up past a comfortable size. Only once — after that the

  // view is yours.

  let framed = false;

  function fit() {

    framed = true;

    if (ps.length === 0 || w === 0) return;

    let [x0, y0, x1, y1] = [Infinity, Infinity, -Infinity, -Infinity];

    for (const p of ps) {

      x0 = Math.min(x0, p.x - p.r);

      y0 = Math.min(y0, p.y - p.r);

      x1 = Math.max(x1, p.x + p.r);

      y1 = Math.max(y1, p.y + p.r + 18);

    }

    const k = Math.min((w * 0.8) / Math.max(1, x1 - x0), (h * 0.75) / Math.max(1, y1 - y0), local ? 1.6 : 1.5);

    view = { x: -(x0 + x1) / 2, y: -(y0 + y1) / 2, k: Math.max(0.25, k) };

  }

  function loop() {

    if (!framed && alpha < 0.3 && !drag) fit();

    if (alpha <= 0.002) {

      running = false;

      draw();

      return;

    }

    tick();

    draw();

    requestAnimationFrame(loop);

  }

  function heat(to = 0.6) {

    alpha = Math.max(alpha, to);

    if (still) {

      for (let i = 0; i < 400 && alpha > 0.002; i++) tick();

      if (!framed) fit();

      draw();

      return;

    }

    if (!running) {

      running = true;

      requestAnimationFrame(loop);

    }

  }

  const screen = (p) => ({ x: w / 2 + (p.x + view.x) * view.k, y: h / 2 + (p.y + view.y) * view.k });

  const world = (x, y) => ({ x: (x - w / 2) / view.k - view.x, y: (y - h / 2) / view.k - view.y });

  function draw() {

    ctx.clearRect(0, 0, w, h);

    const lit = hover ?? (local ? byId.get(focus) : null);

    const near = lit ? neighbours.get(lit.id) : null;

    ctx.lineWidth = 1;

    for (const [a, b] of links) {

      const on = lit && (a === lit || b === lit);

      ctx.strokeStyle = on ? c.accent : c.edge;

      ctx.globalAlpha = lit && !on ? 0.35 : on ? 0.9 : 0.75;

      const p = screen(a);

      const q = screen(b);

      ctx.beginPath();

      ctx.moveTo(p.x, p.y);

      ctx.lineTo(q.x, q.y);

      ctx.stroke();

    }

    // Labels: all of them when few or zoomed in; otherwise the hubs, and

    // whatever the pointer is near, so a big vault reads as a map, not a smudge.

    const all = local || ps.length <= 24 || view.k > 1.8;

    const hub = Math.max(5, [...ps].map((p) => p.links).sort((a, b) => b - a)[Math.min(9, ps.length - 1)] ?? 0);

    ctx.font = `${local ? 11 : 12}px system-ui, -apple-system, sans-serif`;

    ctx.textAlign = "center";

    ctx.textBaseline = "top";

    for (const p of ps) {

      const s = screen(p);

      const r = p.r * Math.sqrt(view.k);

      const on = lit && (p === lit || near.has(p.id));

      ctx.globalAlpha = lit && !on ? 0.35 : 1;

      ctx.fillStyle = p === lit || p.id === focus ? c.accent : c.node;

      ctx.beginPath();

      ctx.arc(s.x, s.y, r, 0, Math.PI * 2);

      ctx.fill();

      if (all || on || p.links >= hub) {

        const t = p.title.length > 28 ? `${p.title.slice(0, 27)}…` : p.title;

        ctx.globalAlpha = lit && !on ? 0.3 : 1;

        ctx.fillStyle = p === lit ? c.label : c.quiet;

        ctx.fillText(t, s.x, s.y + r + 4);

      }

    }

    ctx.globalAlpha = 1;

  }

  function at(x, y) {

    let best = null;

    let bestD = Infinity;

    for (const p of ps) {

      const s = screen(p);

      const d = Math.hypot(s.x - x, s.y - y);

      const reach = Math.max(10, p.r * Math.sqrt(view.k) + 4);

      if (d < reach && d < bestD) {

        best = p;

        bestD = d;

      }

    }

    return best;

  }

  // Pointers: one drags a note or pans; two pinch.

  const pointers = new Map();

  let drag = null;

  let moved = 0;

  let pinch = null;

  const local2 = (e) => {

    const r = canvas.getBoundingClientRect();

    return { x: e.clientX - r.left, y: e.clientY - r.top };

  };

  canvas.addEventListener("pointerdown", (e) => {

    canvas.setPointerCapture(e.pointerId);

    const p = local2(e);

    pointers.set(e.pointerId, p);

    moved = 0;

    if (pointers.size === 2) {

      const [a, b] = [...pointers.values()];

      pinch = { d: Math.hypot(a.x - b.x, a.y - b.y), k: view.k };

      drag = null;

      return;

    }

    const node = at(p.x, p.y);

    drag = node ? { node, ...p } : { pan: true, ...p, vx: view.x, vy: view.y };

    if (node) {

      node.fixed = true;

      heat(0.3);

    }

  });

  canvas.addEventListener("pointermove", (e) => {

    const p = local2(e);

    if (pointers.has(e.pointerId)) pointers.set(e.pointerId, p);

    if (pinch && pointers.size === 2) {

      const [a, b] = [...pointers.values()];

      view.k = Math.max(0.2, Math.min(5, (pinch.k * Math.hypot(a.x - b.x, a.y - b.y)) / pinch.d));

      draw();

      return;

    }

    if (drag) {

      moved += Math.abs(e.movementX) + Math.abs(e.movementY);

      if (drag.node) {

        const q = world(p.x, p.y);

        drag.node.x = q.x;

        drag.node.y = q.y;

        heat(0.3);

      } else {

        view.x = drag.vx + (p.x - drag.x) / view.k;

        view.y = drag.vy + (p.y - drag.y) / view.k;

      }

      draw();

      return;

    }

    const over = at(p.x, p.y);

    if (over !== hover) {

      hover = over;

      canvas.style.cursor = over ? "pointer" : "grab";

      draw();

    }

  });

  const up = (e) => {

    pointers.delete(e.pointerId);

    if (pointers.size < 2) pinch = null;

    if (!drag) return;

    if (drag.node) {

      drag.node.fixed = false;

      if (moved < 6) location.href = `/n/${drag.node.id}`;

    }

    drag = null;

  };

  canvas.addEventListener("pointerup", up);

  canvas.addEventListener("pointercancel", up);

  canvas.addEventListener("pointerleave", () => {

    if (hover && !drag) {

      hover = null;

      draw();

    }

  });

  canvas.addEventListener(

    "wheel",

    (e) => {

      e.preventDefault();

      const p = local2(e);

      const before = world(p.x, p.y);

      view.k = Math.max(0.2, Math.min(5, view.k * Math.exp(-e.deltaY * 0.0015)));

      const after = world(p.x, p.y);

      view.x += after.x - before.x;

      view.y += after.y - before.y;

      draw();

    },

    { passive: false },

  );

  // The keyboard reaches what the mouse does: Tab focuses the canvas, arrows

  // pan, + and - zoom.

  canvas.tabIndex = 0;

  canvas.addEventListener("keydown", (e) => {

    const step = 40 / view.k;

    const moves = { ArrowLeft: [step, 0], ArrowRight: [-step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] };

    if (moves[e.key]) {

      view.x += moves[e.key][0];

      view.y += moves[e.key][1];

    } else if (e.key === "+" || e.key === "=") view.k = Math.min(5, view.k * 1.2);

    else if (e.key === "-") view.k = Math.max(0.2, view.k / 1.2);

    else return;

    e.preventDefault();

    draw();

  });

  canvas.style.cursor = "grab";

  new ResizeObserver(size).observe(canvas);

  document.addEventListener("theme", () => {

    c = colours();

    draw();

  });

  matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {

    c = colours();

    draw();

  });

  size();

  heat(1);

}

const start = () => document.querySelectorAll("canvas[data-graph]").forEach(chart);

start();

document.addEventListener("live:swapped", start);