502 lines
16 KiB
JavaScript
502 lines
16 KiB
JavaScript
// ==========================================
|
|
// Chat Switchboard — Note Graph (Canvas)
|
|
// ==========================================
|
|
// Force-directed graph visualization of note
|
|
// connections. Lazy-loaded — initializes only
|
|
// when the graph view is opened.
|
|
// ==========================================
|
|
//
|
|
// Exports: window.openNoteGraph,window.closeNoteGraph,window._render,window._graphResetZoom,window._graphToggleOrphans,window.invalidateNoteGraph
|
|
|
|
|
|
var _graphData = null; // cached { nodes, edges, unresolved }
|
|
var _graphState = null; // { panX, panY, zoom, animId, canvas, ctx }
|
|
var _graphDirty = true; // invalidation flag
|
|
|
|
// ── Force Simulation Parameters ─────────────
|
|
|
|
const SIM = {
|
|
repulsion: 800,
|
|
attraction: 0.006,
|
|
edgeLength: 130,
|
|
damping: 0.88,
|
|
centerGravity: 0.012,
|
|
maxVelocity: 8,
|
|
ticksPerFrame: 3,
|
|
coolThreshold: 0.5, // total KE below this → stop sim
|
|
};
|
|
|
|
const BASE_RADIUS = 6;
|
|
|
|
// ── Color Palette for Folders ───────────────
|
|
|
|
const FOLDER_COLORS = [
|
|
'#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6',
|
|
'#8b5cf6', '#ef4444', '#06b6d4', '#84cc16', '#f97316',
|
|
];
|
|
|
|
var _folderColorMap = {};
|
|
|
|
function folderColor(path) {
|
|
if (!path || path === '/') return '#6b7280';
|
|
if (!_folderColorMap[path]) {
|
|
const idx = Object.keys(_folderColorMap).length % FOLDER_COLORS.length;
|
|
_folderColorMap[path] = FOLDER_COLORS[idx];
|
|
}
|
|
return _folderColorMap[path];
|
|
}
|
|
|
|
// ── Graph Initialization ────────────────────
|
|
|
|
async function openNoteGraph() {
|
|
const listView = document.getElementById('notesListView');
|
|
const editorView = document.getElementById('notesEditorView');
|
|
const graphView = document.getElementById('notesGraphView');
|
|
if (!graphView) return;
|
|
|
|
listView.style.display = 'none';
|
|
editorView.style.display = 'none';
|
|
graphView.style.display = '';
|
|
|
|
const canvas = document.getElementById('noteGraphCanvas');
|
|
if (!canvas) return;
|
|
|
|
// Size canvas to panel
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
canvas.width = rect.width;
|
|
canvas.height = rect.height - 40; // toolbar height
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
_graphState = {
|
|
panX: 0, panY: 0, zoom: 1,
|
|
animId: null, canvas, ctx,
|
|
hoveredNode: null, dragNode: null,
|
|
isDragging: false, lastMouse: null,
|
|
showOrphans: true,
|
|
};
|
|
|
|
// Load data
|
|
try {
|
|
_graphData = await API.getNoteGraph();
|
|
_prepareGraphNodes(canvas);
|
|
_updateGraphStats();
|
|
_startSimulation();
|
|
_attachGraphListeners(canvas);
|
|
} catch (e) {
|
|
ctx.fillStyle = 'var(--text, #ccc)';
|
|
ctx.font = '14px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('Failed to load graph: ' + e.message, canvas.width / 2, canvas.height / 2);
|
|
}
|
|
}
|
|
|
|
function closeNoteGraph() {
|
|
if (_graphState?.animId) {
|
|
cancelAnimationFrame(_graphState.animId);
|
|
_graphState.animId = null;
|
|
}
|
|
const graphView = document.getElementById('notesGraphView');
|
|
if (graphView) graphView.style.display = 'none';
|
|
document.getElementById('notesListView').style.display = '';
|
|
}
|
|
|
|
// ── Prepare Nodes with Physics State ────────
|
|
|
|
function _prepareGraphNodes(canvas) {
|
|
if (!_graphData) return;
|
|
|
|
const cx = canvas.width / 2;
|
|
const cy = canvas.height / 2;
|
|
|
|
// Build lookup for edge source/target
|
|
const nodeMap = {};
|
|
for (const n of _graphData.nodes) {
|
|
n.x = cx + (Math.random() - 0.5) * canvas.width * 0.5;
|
|
n.y = cy + (Math.random() - 0.5) * canvas.height * 0.5;
|
|
n.vx = 0; n.vy = 0;
|
|
n.ax = 0; n.ay = 0;
|
|
n.pinned = false;
|
|
n.hovered = false;
|
|
nodeMap[n.id] = n;
|
|
}
|
|
|
|
// Resolve edge references
|
|
for (const e of _graphData.edges) {
|
|
e.sourceNode = nodeMap[e.source];
|
|
e.targetNode = nodeMap[e.target];
|
|
}
|
|
|
|
// Optionally include ghost nodes for unresolved links
|
|
_graphData._ghostNodes = [];
|
|
if (_graphData.unresolved) {
|
|
const ghostMap = {};
|
|
for (const d of _graphData.unresolved) {
|
|
const key = d.title.toLowerCase();
|
|
if (!ghostMap[key]) {
|
|
const ghost = {
|
|
id: '__ghost_' + key, title: d.title,
|
|
folder_path: '', tags: [], link_count: 0,
|
|
x: cx + (Math.random() - 0.5) * canvas.width * 0.4,
|
|
y: cy + (Math.random() - 0.5) * canvas.height * 0.4,
|
|
vx: 0, vy: 0, ax: 0, ay: 0,
|
|
pinned: false, hovered: false, isGhost: true,
|
|
};
|
|
ghostMap[key] = ghost;
|
|
_graphData._ghostNodes.push(ghost);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function _updateGraphStats() {
|
|
const nc = document.getElementById('graphNodeCount');
|
|
const ec = document.getElementById('graphEdgeCount');
|
|
if (nc) nc.textContent = _graphData?.nodes?.length || 0;
|
|
if (ec) ec.textContent = _graphData?.edges?.length || 0;
|
|
}
|
|
|
|
// ── Force Simulation Loop ───────────────────
|
|
|
|
function _startSimulation() {
|
|
if (!_graphData || !_graphState) return;
|
|
|
|
function frame() {
|
|
for (let t = 0; t < SIM.ticksPerFrame; t++) {
|
|
_tick();
|
|
}
|
|
_render();
|
|
|
|
// Check convergence
|
|
let totalKE = 0;
|
|
for (const n of _allNodes()) {
|
|
totalKE += n.vx * n.vx + n.vy * n.vy;
|
|
}
|
|
if (totalKE > SIM.coolThreshold || _graphState.dragNode) {
|
|
_graphState.animId = requestAnimationFrame(frame);
|
|
} else {
|
|
_graphState.animId = null;
|
|
// One final render
|
|
_render();
|
|
}
|
|
}
|
|
|
|
if (_graphState.animId) cancelAnimationFrame(_graphState.animId);
|
|
_graphState.animId = requestAnimationFrame(frame);
|
|
}
|
|
|
|
function _allNodes() {
|
|
if (!_graphData) return [];
|
|
const nodes = [..._graphData.nodes];
|
|
if (_graphState?.showOrphans !== false && _graphData._ghostNodes) {
|
|
nodes.push(..._graphData._ghostNodes);
|
|
}
|
|
return nodes;
|
|
}
|
|
|
|
function _tick() {
|
|
const nodes = _allNodes();
|
|
const edges = _graphData?.edges || [];
|
|
const canvas = _graphState?.canvas;
|
|
if (!canvas || nodes.length === 0) return;
|
|
|
|
// Reset accelerations
|
|
for (const n of nodes) { n.ax = 0; n.ay = 0; }
|
|
|
|
// 1. Repulsion (all pairs)
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
for (let j = i + 1; j < nodes.length; j++) {
|
|
const dx = nodes[j].x - nodes[i].x;
|
|
const dy = nodes[j].y - nodes[i].y;
|
|
const dist = Math.max(Math.sqrt(dx * dx + dy * dy), 1);
|
|
const f = SIM.repulsion / (dist * dist);
|
|
const fx = (dx / dist) * f;
|
|
const fy = (dy / dist) * f;
|
|
nodes[i].ax -= fx; nodes[i].ay -= fy;
|
|
nodes[j].ax += fx; nodes[j].ay += fy;
|
|
}
|
|
}
|
|
|
|
// 2. Attraction (edges)
|
|
for (const e of edges) {
|
|
const s = e.sourceNode, t = e.targetNode;
|
|
if (!s || !t) continue;
|
|
const dx = t.x - s.x, dy = t.y - s.y;
|
|
const dist = Math.max(Math.sqrt(dx * dx + dy * dy), 1);
|
|
const f = SIM.attraction * (dist - SIM.edgeLength);
|
|
const fx = (dx / dist) * f;
|
|
const fy = (dy / dist) * f;
|
|
s.ax += fx; s.ay += fy;
|
|
t.ax -= fx; t.ay -= fy;
|
|
}
|
|
|
|
// 3. Center gravity + integration
|
|
const cx = canvas.width / 2, cy = canvas.height / 2;
|
|
for (const n of nodes) {
|
|
if (n.pinned) continue;
|
|
n.ax += (cx - n.x) * SIM.centerGravity;
|
|
n.ay += (cy - n.y) * SIM.centerGravity;
|
|
n.vx = _clamp((n.vx + n.ax) * SIM.damping, -SIM.maxVelocity, SIM.maxVelocity);
|
|
n.vy = _clamp((n.vy + n.ay) * SIM.damping, -SIM.maxVelocity, SIM.maxVelocity);
|
|
n.x += n.vx;
|
|
n.y += n.vy;
|
|
}
|
|
}
|
|
|
|
function _clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }
|
|
|
|
// ── Canvas Rendering ────────────────────────
|
|
|
|
function _render() {
|
|
const { ctx, canvas, panX, panY, zoom, hoveredNode, showOrphans } = _graphState;
|
|
if (!ctx || !_graphData) return;
|
|
|
|
const nodes = _allNodes();
|
|
const edges = _graphData.edges || [];
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.save();
|
|
ctx.translate(panX, panY);
|
|
ctx.scale(zoom, zoom);
|
|
|
|
// Edges
|
|
for (const e of edges) {
|
|
const s = e.sourceNode, t = e.targetNode;
|
|
if (!s || !t) continue;
|
|
|
|
const isHighlighted = hoveredNode &&
|
|
(s.id === hoveredNode.id || t.id === hoveredNode.id);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(s.x, s.y);
|
|
ctx.lineTo(t.x, t.y);
|
|
|
|
if (e.is_transclusion) {
|
|
ctx.setLineDash([4, 4]);
|
|
ctx.strokeStyle = isHighlighted
|
|
? 'rgba(99, 102, 241, 0.8)' : 'rgba(99, 102, 241, 0.3)';
|
|
} else {
|
|
ctx.setLineDash([]);
|
|
ctx.strokeStyle = isHighlighted
|
|
? 'rgba(160, 160, 160, 0.8)' : 'rgba(120, 120, 120, 0.25)';
|
|
}
|
|
ctx.lineWidth = isHighlighted ? 2 : 1;
|
|
ctx.stroke();
|
|
}
|
|
ctx.setLineDash([]);
|
|
|
|
// Nodes
|
|
for (const n of nodes) {
|
|
if (n.isGhost && !showOrphans) continue;
|
|
|
|
const r = n.isGhost
|
|
? BASE_RADIUS * 0.6
|
|
: BASE_RADIUS + Math.sqrt(n.link_count || 0) * 2;
|
|
|
|
const isHovered = hoveredNode && n.id === hoveredNode.id;
|
|
const isNeighbor = hoveredNode && _isNeighbor(hoveredNode, n);
|
|
const isDimmed = hoveredNode && !isHovered && !isNeighbor;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(n.x, n.y, r, 0, Math.PI * 2);
|
|
|
|
if (n.isGhost) {
|
|
ctx.fillStyle = isDimmed ? 'rgba(200, 50, 50, 0.1)' : 'rgba(200, 50, 50, 0.4)';
|
|
ctx.setLineDash([2, 2]);
|
|
ctx.strokeStyle = 'rgba(200, 50, 50, 0.5)';
|
|
} else if (isHovered) {
|
|
ctx.fillStyle = '#6366f1';
|
|
} else {
|
|
const color = folderColor(n.folder_path);
|
|
ctx.fillStyle = isDimmed ? _withAlpha(color, 0.15) : _withAlpha(color, 0.7);
|
|
ctx.strokeStyle = isDimmed ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.15)';
|
|
}
|
|
|
|
ctx.fill();
|
|
if (!n.isGhost) {
|
|
ctx.setLineDash([]);
|
|
ctx.lineWidth = isHovered ? 2 : 1;
|
|
ctx.stroke();
|
|
} else {
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
|
|
// Labels
|
|
if (zoom > 0.5 && (isHovered || isNeighbor || !hoveredNode)) {
|
|
const fontSize = Math.max(10, 11 / zoom);
|
|
ctx.font = `${n.isGhost ? 'italic ' : ''}${fontSize}px var(--font, system-ui, sans-serif)`;
|
|
ctx.fillStyle = isDimmed ? 'rgba(200,200,200,0.2)' : 'rgba(220,220,220,0.9)';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'top';
|
|
|
|
const label = n.title.length > 30 ? n.title.slice(0, 28) + '…' : n.title;
|
|
ctx.fillText(label, n.x, n.y + r + 4);
|
|
}
|
|
}
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
function _isNeighbor(hovered, candidate) {
|
|
if (!_graphData) return false;
|
|
for (const e of _graphData.edges) {
|
|
if ((e.source === hovered.id && e.target === candidate.id) ||
|
|
(e.target === hovered.id && e.source === candidate.id)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function _withAlpha(hex, alpha) {
|
|
const r = parseInt(hex.slice(1, 3), 16);
|
|
const g = parseInt(hex.slice(3, 5), 16);
|
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
return `rgba(${r},${g},${b},${alpha})`;
|
|
}
|
|
|
|
// ── Interaction: Pan, Zoom, Drag, Click ─────
|
|
|
|
function _attachGraphListeners(canvas) {
|
|
// Mouse → canvas coordinates (accounting for pan/zoom)
|
|
function toGraph(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left - _graphState.panX) / _graphState.zoom;
|
|
const y = (e.clientY - rect.top - _graphState.panY) / _graphState.zoom;
|
|
return { x, y };
|
|
}
|
|
|
|
function hitTest(gx, gy) {
|
|
const nodes = _allNodes();
|
|
for (let i = nodes.length - 1; i >= 0; i--) {
|
|
const n = nodes[i];
|
|
const r = n.isGhost ? BASE_RADIUS * 0.6 : BASE_RADIUS + Math.sqrt(n.link_count || 0) * 2;
|
|
const dx = n.x - gx, dy = n.y - gy;
|
|
if (dx * dx + dy * dy <= (r + 4) * (r + 4)) return n;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// Mousedown
|
|
canvas.addEventListener('mousedown', (e) => {
|
|
const g = toGraph(e);
|
|
const node = hitTest(g.x, g.y);
|
|
if (node && !node.isGhost) {
|
|
_graphState.dragNode = node;
|
|
node.pinned = true;
|
|
_graphState.isDragging = false;
|
|
}
|
|
_graphState.lastMouse = { x: e.clientX, y: e.clientY };
|
|
});
|
|
|
|
// Mousemove
|
|
canvas.addEventListener('mousemove', (e) => {
|
|
const g = toGraph(e);
|
|
|
|
if (_graphState.dragNode) {
|
|
_graphState.isDragging = true;
|
|
_graphState.dragNode.x = g.x;
|
|
_graphState.dragNode.y = g.y;
|
|
_graphState.dragNode.vx = 0;
|
|
_graphState.dragNode.vy = 0;
|
|
if (!_graphState.animId) _startSimulation();
|
|
} else if (_graphState.lastMouse && e.buttons === 1) {
|
|
// Pan
|
|
_graphState.panX += e.clientX - _graphState.lastMouse.x;
|
|
_graphState.panY += e.clientY - _graphState.lastMouse.y;
|
|
_graphState.lastMouse = { x: e.clientX, y: e.clientY };
|
|
_render();
|
|
} else {
|
|
// Hover
|
|
const node = hitTest(g.x, g.y);
|
|
if (node !== _graphState.hoveredNode) {
|
|
_graphState.hoveredNode = node;
|
|
canvas.style.cursor = node ? 'pointer' : 'default';
|
|
_render();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Mouseup
|
|
canvas.addEventListener('mouseup', (e) => {
|
|
if (_graphState.dragNode) {
|
|
_graphState.dragNode.pinned = false;
|
|
|
|
// Click (not drag) → open note
|
|
if (!_graphState.isDragging && !_graphState.dragNode.isGhost) {
|
|
openNoteEditor(_graphState.dragNode.id);
|
|
}
|
|
_graphState.dragNode = null;
|
|
}
|
|
_graphState.lastMouse = null;
|
|
_graphState.isDragging = false;
|
|
});
|
|
|
|
// Wheel → zoom
|
|
canvas.addEventListener('wheel', (e) => {
|
|
e.preventDefault();
|
|
const factor = e.deltaY > 0 ? 0.92 : 1.08;
|
|
const newZoom = _clamp(_graphState.zoom * factor, 0.15, 4.0);
|
|
|
|
// Zoom toward cursor
|
|
const rect = canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left;
|
|
const my = e.clientY - rect.top;
|
|
|
|
_graphState.panX = mx - (mx - _graphState.panX) * (newZoom / _graphState.zoom);
|
|
_graphState.panY = my - (my - _graphState.panY) * (newZoom / _graphState.zoom);
|
|
_graphState.zoom = newZoom;
|
|
|
|
_render();
|
|
}, { passive: false });
|
|
|
|
// Resize observer — debounced to prevent notification loop
|
|
let _roFrame = null;
|
|
const ro = new ResizeObserver(() => {
|
|
if (_roFrame) return; // already scheduled
|
|
_roFrame = requestAnimationFrame(() => {
|
|
_roFrame = null;
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
const w = Math.round(rect.width);
|
|
const h = Math.round(rect.height - 40);
|
|
if (canvas.width !== w || canvas.height !== h) {
|
|
canvas.width = w;
|
|
canvas.height = h;
|
|
_render();
|
|
}
|
|
});
|
|
});
|
|
ro.observe(canvas.parentElement);
|
|
}
|
|
|
|
function _graphResetZoom() {
|
|
if (!_graphState) return;
|
|
_graphState.panX = 0;
|
|
_graphState.panY = 0;
|
|
_graphState.zoom = 1;
|
|
_render();
|
|
}
|
|
|
|
function _graphToggleOrphans() {
|
|
if (!_graphState) return;
|
|
_graphState.showOrphans = !_graphState.showOrphans;
|
|
_render();
|
|
}
|
|
|
|
// ── Invalidation ────────────────────────────
|
|
|
|
function invalidateNoteGraph() {
|
|
_graphData = null;
|
|
_graphDirty = true;
|
|
_folderColorMap = {};
|
|
}
|
|
|
|
// ── Exports ─────────────────────────────────
|
|
sb.register('openNoteGraph', openNoteGraph);
|
|
sb.register('closeNoteGraph', closeNoteGraph);
|
|
sb.register('_render', _render);
|
|
sb.register('_graphResetZoom', _graphResetZoom);
|
|
sb.register('_graphToggleOrphans', _graphToggleOrphans);
|
|
sb.register('invalidateNoteGraph', invalidateNoteGraph);
|