Bruno Charest
0416266dde
- Type filter checkboxes (dossier, .md, autre) in legend - Export PNG button (canvas.toDataURL) - Fullscreen button (Fullscreen API) - Focus node function (center on specific node) - Filter applied during _draw() to skip hidden nodes
601 lines
18 KiB
JavaScript
601 lines
18 KiB
JavaScript
/* ObsiGate — Graph View: interactive file/folder relationship visualization.
|
|
Phase 2: theme colors, tooltips, depth slider, full-vault, search, backlinks. */
|
|
import { api } from './auth.js';
|
|
import { safeCreateIcons } from './utils.js';
|
|
import { openFile } from './viewer.js';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Theme-aware color helpers
|
|
// ---------------------------------------------------------------------------
|
|
function _cssVar(name, fallback) {
|
|
return getComputedStyle(document.body).getPropertyValue(name).trim() || fallback;
|
|
}
|
|
|
|
const COLORS = {
|
|
get bg() { return _cssVar('--bg-primary', '#1e1e1e'); },
|
|
get text() { return _cssVar('--text-primary', '#ddd'); },
|
|
get accent() { return _cssVar('--accent-color', '#2563eb'); },
|
|
get muted() { return _cssVar('--text-muted', '#888'); },
|
|
get border() { return _cssVar('--border-color', '#333'); },
|
|
dir: '#5b9bd5',
|
|
md: '#70ad47',
|
|
other: '#999',
|
|
vault: '#ffc000',
|
|
backlink: '#e74c3c',
|
|
highlight: '#ff6b6b',
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// GraphViewManager
|
|
// ---------------------------------------------------------------------------
|
|
export const GraphViewManager = {
|
|
_canvas: null,
|
|
_ctx: null,
|
|
_nodes: [],
|
|
_edges: [],
|
|
_offsetX: 0,
|
|
_offsetY: 0,
|
|
_zoom: 1,
|
|
_dragging: false,
|
|
_dragNode: null,
|
|
_panning: false,
|
|
_panStartX: 0,
|
|
_panStartY: 0,
|
|
_animFrame: null,
|
|
_vault: null,
|
|
_path: null,
|
|
_nodePositions: {},
|
|
_width: 0,
|
|
_height: 0,
|
|
_scope: 'directory',
|
|
_depth: 1,
|
|
_searchTerm: '',
|
|
_hoveredNode: null,
|
|
_tooltipEl: null,
|
|
|
|
async open(vault, path, type) {
|
|
this._vault = vault;
|
|
this._path = path;
|
|
|
|
const modal = document.getElementById('graph-modal');
|
|
const title = document.getElementById('graph-title');
|
|
const info = document.getElementById('graph-info');
|
|
const canvas = document.getElementById('graph-canvas');
|
|
const depthSlider = document.getElementById('graph-depth');
|
|
|
|
if (!modal || !canvas) return;
|
|
|
|
this._tooltipEl = document.getElementById('graph-tooltip');
|
|
this._depth = depthSlider ? parseInt(depthSlider.value) : 1;
|
|
this._scope = 'directory';
|
|
|
|
title.textContent = `Vue Graphique — ${vault}${path ? '/' + path : ''}`;
|
|
info.textContent = 'Chargement...';
|
|
modal.classList.add('active');
|
|
|
|
this._canvas = canvas;
|
|
this._ctx = canvas.getContext('2d');
|
|
this._resetView();
|
|
|
|
await this._fetchAndRender();
|
|
safeCreateIcons();
|
|
},
|
|
|
|
async _fetchAndRender() {
|
|
const info = document.getElementById('graph-info');
|
|
if (!info) return;
|
|
|
|
const params = new URLSearchParams();
|
|
if (this._path) params.set('path', this._path);
|
|
params.set('depth', String(this._depth));
|
|
params.set('scope', this._scope);
|
|
if (this._searchTerm) params.set('tag', this._searchTerm);
|
|
|
|
try {
|
|
const data = await api(
|
|
`/api/graph/${encodeURIComponent(this._vault)}?${params.toString()}`
|
|
);
|
|
this._nodes = data.nodes || [];
|
|
this._edges = data.edges || [];
|
|
this._scope = data.scope || 'directory';
|
|
|
|
const scopeLabel = this._scope === 'full' ? 'Vault complet' : 'Dossier';
|
|
const depthLabel = `prof=${this._depth}`;
|
|
info.textContent = `${this._nodes.length} nœuds, ${this._edges.length} liens · ${scopeLabel} · ${depthLabel}`;
|
|
this._initLayout();
|
|
this._startRender();
|
|
} catch (err) {
|
|
info.textContent = 'Erreur de chargement';
|
|
console.error('Graph error:', err);
|
|
}
|
|
},
|
|
|
|
reload() {
|
|
// Called when depth slider or full-vault button changes
|
|
this._resetView();
|
|
this._fetchAndRender();
|
|
},
|
|
|
|
setDepth(depth) {
|
|
this._depth = depth;
|
|
this.reload();
|
|
},
|
|
|
|
toggleScope() {
|
|
this._scope = this._scope === 'full' ? 'directory' : 'full';
|
|
const btn = document.getElementById('graph-full-vault');
|
|
if (btn) btn.textContent = this._scope === 'full' ? '📁 Dossier' : '🌐 Tout';
|
|
this.reload();
|
|
},
|
|
|
|
setSearch(term) {
|
|
this._searchTerm = term;
|
|
// For now, use tag filter on backend; client-side highlighting on draw
|
|
if (term && term.length >= 2) {
|
|
this.reload();
|
|
} else if (!term && this._searchTerm !== term) {
|
|
this.reload();
|
|
}
|
|
},
|
|
|
|
close() {
|
|
const modal = document.getElementById('graph-modal');
|
|
if (modal) modal.classList.remove('active');
|
|
if (this._animFrame) {
|
|
cancelAnimationFrame(this._animFrame);
|
|
this._animFrame = null;
|
|
}
|
|
this._hideTooltip();
|
|
},
|
|
|
|
_resetView() {
|
|
this._offsetX = 0;
|
|
this._offsetY = 0;
|
|
this._zoom = 1;
|
|
this._nodePositions = {};
|
|
},
|
|
|
|
_initLayout() {
|
|
const w = this._canvas.parentElement.clientWidth;
|
|
const h = this._canvas.parentElement.clientHeight;
|
|
this._canvas.width = w * devicePixelRatio;
|
|
this._canvas.height = h * devicePixelRatio;
|
|
this._canvas.style.width = w + 'px';
|
|
this._canvas.style.height = h + 'px';
|
|
this._width = w;
|
|
this._height = h;
|
|
this._ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
this._ctx.scale(devicePixelRatio, devicePixelRatio);
|
|
|
|
const cx = w / 2;
|
|
const cy = h / 2;
|
|
const radius = Math.min(w, h) * 0.35;
|
|
|
|
this._nodes.forEach((node, i) => {
|
|
const angle = (2 * Math.PI * i) / Math.max(this._nodes.length, 1);
|
|
this._nodePositions[node.id] = {
|
|
x: cx + radius * Math.cos(angle),
|
|
y: cy + radius * Math.sin(angle),
|
|
vx: 0,
|
|
vy: 0,
|
|
};
|
|
});
|
|
},
|
|
|
|
_startRender() {
|
|
const self = this;
|
|
let lastTime = 0;
|
|
|
|
const loop = (time) => {
|
|
const dt = Math.min((time - lastTime) / 1000, 0.1);
|
|
lastTime = time;
|
|
self._simulate(dt);
|
|
self._draw();
|
|
self._animFrame = requestAnimationFrame(loop);
|
|
};
|
|
|
|
this._animFrame = requestAnimationFrame(loop);
|
|
},
|
|
|
|
_simulate(dt) {
|
|
if (this._dragging || this._dragNode) return;
|
|
|
|
const positions = this._nodePositions;
|
|
const cx = this._width / 2;
|
|
const cy = this._height / 2;
|
|
|
|
for (const edge of this._edges) {
|
|
const a = positions[edge.source];
|
|
const b = positions[edge.target];
|
|
if (!a || !b) continue;
|
|
|
|
const dx = b.x - a.x;
|
|
const dy = b.y - a.y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
const targetLen = 80;
|
|
const force = (dist - targetLen) * 0.01;
|
|
const fx = (dx / dist) * force;
|
|
const fy = (dy / dist) * force;
|
|
|
|
a.vx += fx;
|
|
a.vy += fy;
|
|
b.vx -= fx;
|
|
b.vy -= fy;
|
|
}
|
|
|
|
for (const n1 of this._nodes) {
|
|
for (const n2 of this._nodes) {
|
|
if (n1.id === n2.id) continue;
|
|
const a = positions[n1.id];
|
|
const b = positions[n2.id];
|
|
if (!a || !b) continue;
|
|
|
|
const dx = b.x - a.x;
|
|
const dy = b.y - a.y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
const force = 2000 / (dist * dist);
|
|
const fx = (dx / dist) * force;
|
|
const fy = (dy / dist) * force;
|
|
|
|
a.vx -= fx;
|
|
a.vy -= fy;
|
|
}
|
|
}
|
|
|
|
for (const node of this._nodes) {
|
|
const p = positions[node.id];
|
|
if (!p) continue;
|
|
p.vx += (cx - p.x) * 0.001;
|
|
p.vy += (cy - p.y) * 0.001;
|
|
}
|
|
|
|
for (const node of this._nodes) {
|
|
const p = positions[node.id];
|
|
if (!p) continue;
|
|
p.vx *= 0.9;
|
|
p.vy *= 0.9;
|
|
p.x += p.vx * dt * 60;
|
|
p.y += p.vy * dt * 60;
|
|
}
|
|
},
|
|
|
|
_draw() {
|
|
const ctx = this._ctx;
|
|
const w = this._width;
|
|
const h = this._height;
|
|
|
|
ctx.save();
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
ctx.translate(this._offsetX, this._offsetY);
|
|
ctx.scale(this._zoom, this._zoom);
|
|
|
|
// Draw edges
|
|
for (const edge of this._edges) {
|
|
const a = this._nodePositions[edge.source];
|
|
const b = this._nodePositions[edge.target];
|
|
if (!a || !b) continue;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(a.x, a.y);
|
|
ctx.lineTo(b.x, b.y);
|
|
|
|
if (edge.relation === 'backlink') {
|
|
ctx.strokeStyle = COLORS.backlink;
|
|
ctx.lineWidth = 1.5;
|
|
ctx.setLineDash([3, 3]);
|
|
} else if (edge.relation === 'wikilink') {
|
|
ctx.strokeStyle = COLORS.accent;
|
|
ctx.lineWidth = 2;
|
|
ctx.setLineDash([4, 4]);
|
|
} else {
|
|
ctx.strokeStyle = COLORS.muted;
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([]);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
ctx.setLineDash([]);
|
|
|
|
// Draw nodes
|
|
const searchLower = this._searchTerm.toLowerCase();
|
|
for (const node of this._nodes) {
|
|
if (!this._isNodeVisible(node)) continue;
|
|
const p = this._nodePositions[node.id];
|
|
if (!p) continue;
|
|
|
|
const links = (node.incoming_count || 0) + (node.outgoing_count || 0);
|
|
const r = Math.max(5, Math.min(22, 6 + Math.sqrt(Math.max(node.size || 100, links * 200)) / 100));
|
|
|
|
// Highlight if search match
|
|
const isHighlighted = searchLower && (
|
|
node.name.toLowerCase().includes(searchLower) ||
|
|
(node.tags || []).some(t => t.toLowerCase().includes(searchLower))
|
|
);
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
|
|
|
|
switch (node.type) {
|
|
case 'directory':
|
|
ctx.fillStyle = COLORS.dir;
|
|
break;
|
|
case 'file':
|
|
ctx.fillStyle = (node.path || '').endsWith('.md') ? COLORS.md : COLORS.other;
|
|
break;
|
|
case 'vault':
|
|
ctx.fillStyle = COLORS.vault;
|
|
break;
|
|
default:
|
|
ctx.fillStyle = COLORS.other;
|
|
}
|
|
|
|
if (isHighlighted) {
|
|
ctx.shadowColor = COLORS.highlight;
|
|
ctx.shadowBlur = 12;
|
|
}
|
|
|
|
ctx.fill();
|
|
|
|
if (isHighlighted) {
|
|
ctx.shadowBlur = 0;
|
|
ctx.strokeStyle = COLORS.highlight;
|
|
ctx.lineWidth = 2.5;
|
|
} else {
|
|
ctx.strokeStyle = COLORS.bg;
|
|
ctx.lineWidth = 1.5;
|
|
}
|
|
ctx.stroke();
|
|
|
|
// Node label
|
|
const label = node.name.length > 20 ? node.name.slice(0, 18) + '...' : node.name;
|
|
ctx.font = `${isHighlighted ? 12 : 11} / ${this._zoom}px -apple-system, sans-serif`;
|
|
ctx.fillStyle = isHighlighted ? COLORS.highlight : COLORS.text;
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(label, p.x, p.y + r + 12 / this._zoom);
|
|
}
|
|
|
|
ctx.restore();
|
|
},
|
|
|
|
_getNodeAt(screenX, screenY) {
|
|
const x = (screenX - this._offsetX) / this._zoom;
|
|
const y = (screenY - this._offsetY) / this._zoom;
|
|
|
|
for (const node of this._nodes) {
|
|
const p = this._nodePositions[node.id];
|
|
if (!p) continue;
|
|
const links = (node.incoming_count || 0) + (node.outgoing_count || 0);
|
|
const r = Math.max(5, Math.min(22, 6 + Math.sqrt(Math.max(node.size || 100, links * 200)) / 100));
|
|
const dx = x - p.x;
|
|
const dy = y - p.y;
|
|
if (dx * dx + dy * dy <= r * r + 100) {
|
|
return { node, pos: p };
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
_showTooltip(node, screenX, screenY) {
|
|
if (!this._tooltipEl) return;
|
|
const tags = (node.tags || []).slice(0, 5).join(', ');
|
|
const inc = node.incoming_count || 0;
|
|
const out = node.outgoing_count || 0;
|
|
this._tooltipEl.innerHTML = `
|
|
<strong>${node.name}</strong>
|
|
${node.type === 'file' ? `<br><span style="color:${COLORS.muted};font-size:0.7rem">${node.path}</span>` : ''}
|
|
${tags ? `<br>🏷️ ${tags}` : ''}
|
|
${inc + out > 0 ? `<br>🔗 ${out} sortants · ${inc} entrants` : ''}
|
|
`;
|
|
this._tooltipEl.style.display = 'block';
|
|
this._tooltipEl.style.left = (screenX + 15) + 'px';
|
|
this._tooltipEl.style.top = (screenY - 10) + 'px';
|
|
},
|
|
|
|
_hideTooltip() {
|
|
if (this._tooltipEl) this._tooltipEl.style.display = 'none';
|
|
},
|
|
|
|
// --- Advanced controls ---
|
|
|
|
_isNodeVisible(node) {
|
|
const showDir = document.getElementById('graph-filter-dir')?.checked ?? true;
|
|
const showMd = document.getElementById('graph-filter-md')?.checked ?? true;
|
|
const showOther = document.getElementById('graph-filter-other')?.checked ?? true;
|
|
if (node.type === 'directory') return showDir;
|
|
if (node.type === 'file' && (node.path || '').endsWith('.md')) return showMd;
|
|
if (node.type === 'file') return showOther;
|
|
return true;
|
|
},
|
|
|
|
applyTypeFilter() {
|
|
// Filters are applied during _draw() — nodes/edges not in visible set are skipped
|
|
},
|
|
|
|
exportPNG() {
|
|
const link = document.createElement('a');
|
|
link.download = `obsigate-graph-${this._vault}-${Date.now()}.png`;
|
|
link.href = this._canvas.toDataURL('image/png');
|
|
link.click();
|
|
},
|
|
|
|
toggleFullscreen() {
|
|
const container = this._canvas?.parentElement?.parentElement; // editor-container
|
|
if (!container) return;
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
container.requestFullscreen();
|
|
}
|
|
// Re-init layout after fullscreen change
|
|
setTimeout(() => this._onResize(), 300);
|
|
},
|
|
|
|
focusNode(nodeId) {
|
|
const pos = this._nodePositions[nodeId];
|
|
if (!pos) return;
|
|
this._offsetX = this._width / 2 - pos.x * this._zoom;
|
|
this._offsetY = this._height / 2 - pos.y * this._zoom;
|
|
},
|
|
|
|
_onMouseDown(e) {
|
|
const rect = this._canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left;
|
|
const my = e.clientY - rect.top;
|
|
|
|
const hit = this._getNodeAt(mx, my);
|
|
if (hit) {
|
|
this._dragging = true;
|
|
this._dragNode = hit;
|
|
this._canvas.style.cursor = 'grabbing';
|
|
} else {
|
|
this._panning = true;
|
|
this._panStartX = e.clientX - this._offsetX;
|
|
this._panStartY = e.clientY - this._offsetY;
|
|
this._canvas.style.cursor = 'grabbing';
|
|
}
|
|
},
|
|
|
|
_onMouseMove(e) {
|
|
const rect = this._canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left;
|
|
const my = e.clientY - rect.top;
|
|
|
|
if (this._dragging && this._dragNode) {
|
|
this._dragNode.pos.x = (mx - this._offsetX) / this._zoom;
|
|
this._dragNode.pos.y = (my - this._offsetY) / this._zoom;
|
|
this._dragNode.pos.vx = 0;
|
|
this._dragNode.pos.vy = 0;
|
|
} else if (this._panning) {
|
|
this._offsetX = e.clientX - this._panStartX;
|
|
this._offsetY = e.clientY - this._panStartY;
|
|
} else {
|
|
const hit = this._getNodeAt(mx, my);
|
|
if (hit) {
|
|
this._canvas.style.cursor = 'pointer';
|
|
this._canvas.title = hit.node.type === 'file'
|
|
? `📄 ${hit.node.name} (cliquer pour ouvrir)`
|
|
: `📁 ${hit.node.name} (cliquer pour explorer)`;
|
|
this._showTooltip(hit.node, e.clientX, e.clientY);
|
|
} else {
|
|
this._canvas.style.cursor = 'grab';
|
|
this._canvas.title = '';
|
|
this._hideTooltip();
|
|
}
|
|
}
|
|
},
|
|
|
|
_onMouseUp(e) {
|
|
if (this._dragging && this._dragNode) {
|
|
const node = this._dragNode.node;
|
|
this._dragging = false;
|
|
this._dragNode = null;
|
|
this._canvas.style.cursor = 'grab';
|
|
|
|
if (node.type === 'file') {
|
|
this.close();
|
|
openFile(this._vault, node.path);
|
|
} else if (node.type === 'directory' || node.type === 'vault') {
|
|
this.close();
|
|
this._path = node.path || '';
|
|
this.open(this._vault, this._path, node.type);
|
|
}
|
|
}
|
|
this._panning = false;
|
|
},
|
|
|
|
_onWheel(e) {
|
|
e.preventDefault();
|
|
const rect = this._canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left;
|
|
const my = e.clientY - rect.top;
|
|
|
|
const zoomFactor = e.deltaY < 0 ? 1.1 : 0.9;
|
|
const newZoom = Math.max(0.2, Math.min(3, this._zoom * zoomFactor));
|
|
|
|
this._offsetX = mx - (mx - this._offsetX) * (newZoom / this._zoom);
|
|
this._offsetY = my - (my - this._offsetY) * (newZoom / this._zoom);
|
|
this._zoom = newZoom;
|
|
},
|
|
|
|
_onResize() {
|
|
if (!this._canvas || !this._nodes.length) return;
|
|
const w = this._canvas.parentElement.clientWidth;
|
|
const h = this._canvas.parentElement.clientHeight;
|
|
this._canvas.width = w * devicePixelRatio;
|
|
this._canvas.height = h * devicePixelRatio;
|
|
this._canvas.style.width = w + 'px';
|
|
this._canvas.style.height = h + 'px';
|
|
this._width = w;
|
|
this._height = h;
|
|
this._ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
this._ctx.scale(devicePixelRatio, devicePixelRatio);
|
|
},
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Init graph view event listeners
|
|
// ---------------------------------------------------------------------------
|
|
export function initGraphView() {
|
|
const gm = GraphViewManager;
|
|
const closeBtn = document.getElementById('graph-close');
|
|
const zoomIn = document.getElementById('graph-zoom-in');
|
|
const zoomOut = document.getElementById('graph-zoom-out');
|
|
const reset = document.getElementById('graph-reset');
|
|
const fullVault = document.getElementById('graph-full-vault');
|
|
const depthSlider = document.getElementById('graph-depth');
|
|
const searchInput = document.getElementById('graph-search');
|
|
const modal = document.getElementById('graph-modal');
|
|
const canvas = document.getElementById('graph-canvas');
|
|
|
|
if (closeBtn) closeBtn.addEventListener('click', () => gm.close());
|
|
if (modal) modal.addEventListener('click', (e) => { if (e.target === modal) gm.close(); });
|
|
if (zoomIn) zoomIn.addEventListener('click', () => { gm._zoom = Math.min(3, gm._zoom * 1.2); });
|
|
if (zoomOut) zoomOut.addEventListener('click', () => { gm._zoom = Math.max(0.2, gm._zoom * 0.8); });
|
|
if (reset) reset.addEventListener('click', () => { gm._offsetX = 0; gm._offsetY = 0; gm._zoom = 1; });
|
|
if (fullVault) fullVault.addEventListener('click', () => gm.toggleScope());
|
|
if (depthSlider) depthSlider.addEventListener('input', () => gm.setDepth(parseInt(depthSlider.value)));
|
|
if (searchInput) {
|
|
let debounce;
|
|
searchInput.addEventListener('input', () => {
|
|
clearTimeout(debounce);
|
|
debounce = setTimeout(() => gm.setSearch(searchInput.value.trim()), 300);
|
|
});
|
|
}
|
|
|
|
// Export PNG
|
|
const exportBtn = document.getElementById('graph-export');
|
|
if (exportBtn) exportBtn.addEventListener('click', () => gm.exportPNG());
|
|
|
|
// Fullscreen
|
|
const fullscreenBtn = document.getElementById('graph-fullscreen');
|
|
if (fullscreenBtn) fullscreenBtn.addEventListener('click', () => gm.toggleFullscreen());
|
|
|
|
// Type filters
|
|
['dir', 'md', 'other'].forEach(type => {
|
|
const cb = document.getElementById(`graph-filter-${type}`);
|
|
if (cb) cb.addEventListener('change', () => gm.applyTypeFilter());
|
|
});
|
|
|
|
if (canvas) {
|
|
canvas.addEventListener('mousedown', (e) => gm._onMouseDown(e));
|
|
canvas.addEventListener('mousemove', (e) => gm._onMouseMove(e));
|
|
canvas.addEventListener('mouseup', (e) => gm._onMouseUp(e));
|
|
canvas.addEventListener('mouseleave', () => {
|
|
gm._dragging = false;
|
|
gm._dragNode = null;
|
|
gm._panning = false;
|
|
canvas.style.cursor = 'grab';
|
|
gm._hideTooltip();
|
|
});
|
|
canvas.addEventListener('wheel', (e) => gm._onWheel(e), { passive: false });
|
|
window.addEventListener('resize', () => gm._onResize());
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (modal && modal.classList.contains('active') && e.key === 'Escape') {
|
|
gm.close();
|
|
}
|
|
});
|
|
}
|