Add visual graph editor for entity interconnections
SVG-based node graph with ELK.js autolayout showing all 13 entity types and their relationships. Features include: - Pan/zoom canvas with bounds clamping and dead-zone click detection - Interactive minimap with viewport rectangle, click-to-pan, drag-to-move, and dual resize handles (bottom-left/bottom-right) - Movable toolbar with drag handle and inline zoom percentage indicator - Entity-type SVG icons from Lucide icon set with subtype-specific overrides - Command palette search (/) with keyboard navigation and fly-to - Node selection with upstream/downstream chain highlighting - Double-click to zoom-to-card, edit/delete overlay on hover - Legend panel, orphan node detection, running state indicators - Full i18n support with languageChanged re-render - Catmull-Rom-to-cubic bezier edge routing for smooth curves Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
656
server/src/wled_controller/static/js/features/graph-editor.js
Normal file
656
server/src/wled_controller/static/js/features/graph-editor.js
Normal file
@@ -0,0 +1,656 @@
|
||||
/**
|
||||
* Graph editor — visual entity graph with autolayout, pan/zoom, search.
|
||||
*/
|
||||
|
||||
import { GraphCanvas } from '../core/graph-canvas.js';
|
||||
import { computeLayout, ENTITY_COLORS, ENTITY_LABELS } from '../core/graph-layout.js';
|
||||
import { renderNodes, highlightNode, markOrphans, updateSelection } from '../core/graph-nodes.js';
|
||||
import { renderEdges, highlightChain, clearEdgeHighlights } from '../core/graph-edges.js';
|
||||
import {
|
||||
devicesCache, captureTemplatesCache, ppTemplatesCache,
|
||||
streamsCache, audioSourcesCache, audioTemplatesCache,
|
||||
valueSourcesCache, colorStripSourcesCache, syncClocksCache,
|
||||
outputTargetsCache, patternTemplatesCache, scenePresetsCache,
|
||||
automationsCacheObj,
|
||||
} from '../core/state.js';
|
||||
import { t } from '../core/i18n.js';
|
||||
|
||||
let _canvas = null;
|
||||
let _nodeMap = null;
|
||||
let _edges = null;
|
||||
let _bounds = null;
|
||||
let _selectedIds = new Set();
|
||||
let _initialized = false;
|
||||
let _legendVisible = false;
|
||||
let _minimapVisible = true;
|
||||
let _searchVisible = false;
|
||||
let _searchIndex = -1;
|
||||
let _searchItems = [];
|
||||
let _loading = false;
|
||||
|
||||
// Minimap position/size persisted in localStorage
|
||||
const _MM_KEY = 'graph_minimap';
|
||||
function _loadMinimapRect() {
|
||||
try { return JSON.parse(localStorage.getItem(_MM_KEY)); } catch { return null; }
|
||||
}
|
||||
function _saveMinimapRect(r) {
|
||||
localStorage.setItem(_MM_KEY, JSON.stringify(r));
|
||||
}
|
||||
|
||||
// Toolbar position persisted in localStorage
|
||||
const _TB_KEY = 'graph_toolbar';
|
||||
function _loadToolbarPos() {
|
||||
try { return JSON.parse(localStorage.getItem(_TB_KEY)); } catch { return null; }
|
||||
}
|
||||
function _saveToolbarPos(r) {
|
||||
localStorage.setItem(_TB_KEY, JSON.stringify(r));
|
||||
}
|
||||
|
||||
/* ── Public API ── */
|
||||
|
||||
export async function loadGraphEditor() {
|
||||
const container = document.getElementById('graph-editor-content');
|
||||
if (!container) return;
|
||||
if (_loading) return;
|
||||
_loading = true;
|
||||
|
||||
// First load: replace with spinner. Re-layout: overlay spinner on top.
|
||||
if (!_initialized) {
|
||||
container.innerHTML = '<div class="loading-spinner"></div>';
|
||||
} else {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'graph-loading-overlay';
|
||||
overlay.innerHTML = '<div class="loading-spinner"></div>';
|
||||
const gc = container.querySelector('.graph-container');
|
||||
if (gc) gc.appendChild(overlay);
|
||||
}
|
||||
|
||||
try {
|
||||
const entities = await _fetchAllEntities();
|
||||
const { nodes, edges, bounds } = await computeLayout(entities);
|
||||
_nodeMap = nodes;
|
||||
_edges = edges;
|
||||
_bounds = bounds;
|
||||
_renderGraph(container);
|
||||
} finally {
|
||||
_loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
export function openGraphSearch() {
|
||||
if (!_nodeMap) return;
|
||||
const panel = document.querySelector('.graph-search');
|
||||
if (!panel) return;
|
||||
|
||||
_searchItems = [];
|
||||
for (const node of _nodeMap.values()) _searchItems.push(node);
|
||||
|
||||
_searchIndex = -1;
|
||||
_searchVisible = true;
|
||||
panel.classList.add('visible');
|
||||
const input = panel.querySelector('.graph-search-input');
|
||||
input.value = '';
|
||||
input.focus();
|
||||
_renderSearchResults('');
|
||||
}
|
||||
|
||||
export function closeGraphSearch() {
|
||||
_searchVisible = false;
|
||||
const panel = document.querySelector('.graph-search');
|
||||
if (panel) panel.classList.remove('visible');
|
||||
}
|
||||
|
||||
export function toggleGraphLegend() {
|
||||
_legendVisible = !_legendVisible;
|
||||
const legend = document.querySelector('.graph-legend');
|
||||
if (legend) legend.classList.toggle('visible', _legendVisible);
|
||||
}
|
||||
|
||||
export function toggleGraphMinimap() {
|
||||
_minimapVisible = !_minimapVisible;
|
||||
const mm = document.querySelector('.graph-minimap');
|
||||
if (mm) mm.classList.toggle('visible', _minimapVisible);
|
||||
}
|
||||
|
||||
export function graphFitAll() {
|
||||
if (_canvas && _bounds) _canvas.fitAll(_bounds);
|
||||
}
|
||||
|
||||
export function graphZoomIn() { if (_canvas) _canvas.zoomIn(); }
|
||||
export function graphZoomOut() { if (_canvas) _canvas.zoomOut(); }
|
||||
|
||||
export async function graphRelayout() {
|
||||
await loadGraphEditor();
|
||||
}
|
||||
|
||||
/* ── Data fetching ── */
|
||||
|
||||
async function _fetchAllEntities() {
|
||||
const [
|
||||
devices, captureTemplates, ppTemplates, pictureSources,
|
||||
audioSources, audioTemplates, valueSources, colorStripSources,
|
||||
syncClocks, outputTargets, patternTemplates, scenePresets, automations,
|
||||
] = await Promise.all([
|
||||
devicesCache.fetch(), captureTemplatesCache.fetch(), ppTemplatesCache.fetch(),
|
||||
streamsCache.fetch(), audioSourcesCache.fetch(), audioTemplatesCache.fetch(),
|
||||
valueSourcesCache.fetch(), colorStripSourcesCache.fetch(), syncClocksCache.fetch(),
|
||||
outputTargetsCache.fetch(), patternTemplatesCache.fetch(), scenePresetsCache.fetch(),
|
||||
automationsCacheObj.fetch(),
|
||||
]);
|
||||
return {
|
||||
devices, captureTemplates, ppTemplates, pictureSources,
|
||||
audioSources, audioTemplates, valueSources, colorStripSources,
|
||||
syncClocks, outputTargets, patternTemplates, scenePresets, automations,
|
||||
};
|
||||
}
|
||||
|
||||
/* ── Rendering ── */
|
||||
|
||||
function _renderGraph(container) {
|
||||
container.innerHTML = _graphHTML();
|
||||
|
||||
const svgEl = container.querySelector('.graph-svg');
|
||||
_canvas = new GraphCanvas(svgEl);
|
||||
|
||||
const nodeGroup = svgEl.querySelector('.graph-nodes');
|
||||
const edgeGroup = svgEl.querySelector('.graph-edges');
|
||||
|
||||
renderEdges(edgeGroup, _edges);
|
||||
renderNodes(nodeGroup, _nodeMap, {
|
||||
onNodeClick: _onNodeClick,
|
||||
onNodeDblClick: _onNodeDblClick,
|
||||
onEditNode: _onEditNode,
|
||||
onDeleteNode: _onDeleteNode,
|
||||
});
|
||||
markOrphans(nodeGroup, _nodeMap, _edges);
|
||||
|
||||
// Set bounds for view clamping, then fit
|
||||
if (_bounds) _canvas.setBounds(_bounds);
|
||||
requestAnimationFrame(() => {
|
||||
if (_canvas && _bounds) _canvas.fitAll(_bounds, false);
|
||||
});
|
||||
|
||||
_canvas.onZoomChange = (z) => {
|
||||
const label = container.querySelector('.graph-zoom-label');
|
||||
if (label) label.textContent = `${Math.round(z * 100)}%`;
|
||||
};
|
||||
|
||||
_canvas.onViewChange = (vp) => {
|
||||
_updateMinimapViewport(container.querySelector('.graph-minimap'), vp);
|
||||
};
|
||||
|
||||
_renderLegend(container.querySelector('.graph-legend'));
|
||||
_initMinimap(container.querySelector('.graph-minimap'));
|
||||
_initToolbarDrag(container.querySelector('.graph-toolbar'));
|
||||
|
||||
const searchInput = container.querySelector('.graph-search-input');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', (e) => _renderSearchResults(e.target.value));
|
||||
searchInput.addEventListener('keydown', _onSearchKeydown);
|
||||
}
|
||||
|
||||
// Deselect on click on empty space (not after a pan gesture)
|
||||
svgEl.addEventListener('click', (e) => {
|
||||
if (_canvas.wasPanning) return;
|
||||
if (!e.target.closest('.graph-node')) {
|
||||
_deselect(nodeGroup, edgeGroup);
|
||||
}
|
||||
});
|
||||
|
||||
// Double-click empty → fit all
|
||||
svgEl.addEventListener('dblclick', (e) => {
|
||||
if (!e.target.closest('.graph-node')) graphFitAll();
|
||||
});
|
||||
|
||||
// Prevent text selection on SVG drag
|
||||
svgEl.addEventListener('mousedown', (e) => {
|
||||
// Prevent default only on the SVG background / edges, not on inputs
|
||||
if (!e.target.closest('input, textarea, select')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
container.addEventListener('keydown', _onKeydown);
|
||||
container.setAttribute('tabindex', '0');
|
||||
_initialized = true;
|
||||
}
|
||||
|
||||
function _deselect(nodeGroup, edgeGroup) {
|
||||
_selectedIds.clear();
|
||||
if (nodeGroup) {
|
||||
updateSelection(nodeGroup, _selectedIds);
|
||||
nodeGroup.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
|
||||
}
|
||||
if (edgeGroup) clearEdgeHighlights(edgeGroup);
|
||||
}
|
||||
|
||||
function _graphHTML() {
|
||||
const mmRect = _loadMinimapRect();
|
||||
// Default: bottom-right corner with 12px margin (computed after render via _initMinimap)
|
||||
const mmStyle = mmRect ? `left:${mmRect.left}px;top:${mmRect.top}px;width:${mmRect.width}px;height:${mmRect.height}px;` : '';
|
||||
const tbPos = _loadToolbarPos();
|
||||
const tbStyle = tbPos ? `left:${tbPos.left}px;top:${tbPos.top}px;` : '';
|
||||
|
||||
return `
|
||||
<div class="graph-container">
|
||||
<div class="graph-toolbar" style="${tbStyle}">
|
||||
<span class="graph-toolbar-drag" title="Drag to move">⠿</span>
|
||||
<button class="btn-icon" onclick="graphFitAll()" title="${t('graph.fit_all')}">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/></svg>
|
||||
</button>
|
||||
<button class="btn-icon" onclick="graphZoomIn()" title="${t('graph.zoom_in')}">
|
||||
<svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/><path d="M11 8v6"/><path d="M8 11h6"/></svg>
|
||||
</button>
|
||||
<span class="graph-zoom-label">100%</span>
|
||||
<button class="btn-icon" onclick="graphZoomOut()" title="${t('graph.zoom_out')}">
|
||||
<svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/><path d="M8 11h6"/></svg>
|
||||
</button>
|
||||
<span class="graph-toolbar-sep"></span>
|
||||
<button class="btn-icon" onclick="openGraphSearch()" title="${t('graph.search')} (/)">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
|
||||
</button>
|
||||
<button class="btn-icon" onclick="toggleGraphLegend()" title="${t('graph.legend')}">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>
|
||||
</button>
|
||||
<button class="btn-icon" onclick="toggleGraphMinimap()" title="${t('graph.minimap')}">
|
||||
<svg class="icon" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><rect width="7" height="5" x="14" y="14" rx="1" fill="currentColor" opacity="0.3"/></svg>
|
||||
</button>
|
||||
<span class="graph-toolbar-sep"></span>
|
||||
<button class="btn-icon" onclick="graphRelayout()" title="${t('graph.relayout')}">
|
||||
<svg class="icon" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="graph-legend">
|
||||
<div class="graph-legend-title">${t('graph.legend')}</div>
|
||||
</div>
|
||||
|
||||
<div class="graph-minimap${_minimapVisible ? ' visible' : ''}" style="${mmStyle}">
|
||||
<div class="graph-minimap-header"><span>${t('graph.minimap')}</span></div>
|
||||
<div class="graph-minimap-resize graph-minimap-resize-br"></div>
|
||||
<div class="graph-minimap-resize graph-minimap-resize-bl"></div>
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
||||
<div class="graph-search">
|
||||
<input class="graph-search-input" placeholder="${t('graph.search_placeholder')}" autocomplete="off">
|
||||
<div class="graph-search-results"></div>
|
||||
</div>
|
||||
|
||||
<svg class="graph-svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="running-gradient" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stop-color="var(--primary-color)"/>
|
||||
<stop offset="50%" stop-color="var(--success-color)"/>
|
||||
<stop offset="100%" stop-color="var(--primary-color)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect class="graph-bg" width="100%" height="100%" fill="transparent"/>
|
||||
<g class="graph-root">
|
||||
<g class="graph-edges"></g>
|
||||
<g class="graph-nodes"></g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* ── Legend ── */
|
||||
|
||||
function _renderLegend(legendEl) {
|
||||
if (!legendEl) return;
|
||||
let html = `<div class="graph-legend-title">${t('graph.legend')}</div>`;
|
||||
for (const [kind, color] of Object.entries(ENTITY_COLORS)) {
|
||||
const label = ENTITY_LABELS[kind] || kind;
|
||||
html += `<div class="graph-legend-item">
|
||||
<span class="graph-legend-dot" style="background:${color}"></span>
|
||||
<span>${label}</span>
|
||||
</div>`;
|
||||
}
|
||||
legendEl.innerHTML = html;
|
||||
}
|
||||
|
||||
/* ── Minimap (draggable header & resize handle) ── */
|
||||
|
||||
function _initMinimap(mmEl) {
|
||||
if (!mmEl || !_nodeMap || !_bounds) return;
|
||||
const svg = mmEl.querySelector('svg');
|
||||
if (!svg) return;
|
||||
const container = mmEl.closest('.graph-container');
|
||||
|
||||
const pad = 10;
|
||||
const vb = `${_bounds.x - pad} ${_bounds.y - pad} ${_bounds.width + pad * 2} ${_bounds.height + pad * 2}`;
|
||||
svg.setAttribute('viewBox', vb);
|
||||
|
||||
let html = '';
|
||||
for (const node of _nodeMap.values()) {
|
||||
const color = ENTITY_COLORS[node.kind] || '#666';
|
||||
html += `<rect class="graph-minimap-node" x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" fill="${color}" opacity="0.7"/>`;
|
||||
}
|
||||
// Add viewport rect (updated live via _updateMinimapViewport)
|
||||
html += `<rect class="graph-minimap-viewport" x="0" y="0" width="0" height="0"/>`;
|
||||
svg.innerHTML = html;
|
||||
|
||||
// Set default position (bottom-right corner) if no saved position
|
||||
if (!mmEl.style.left) {
|
||||
const cr = container.getBoundingClientRect();
|
||||
mmEl.style.left = (cr.width - mmEl.offsetWidth - 12) + 'px';
|
||||
mmEl.style.top = (cr.height - mmEl.offsetHeight - 12) + 'px';
|
||||
mmEl.style.width = '200px';
|
||||
mmEl.style.height = '130px';
|
||||
}
|
||||
|
||||
// Initial viewport update
|
||||
if (_canvas) {
|
||||
_updateMinimapViewport(mmEl, _canvas.getViewport());
|
||||
}
|
||||
|
||||
// Helper to clamp minimap within container
|
||||
function _clampMinimap() {
|
||||
const cr = container.getBoundingClientRect();
|
||||
const mw = mmEl.offsetWidth, mh = mmEl.offsetHeight;
|
||||
let l = parseFloat(mmEl.style.left) || 0;
|
||||
let t = parseFloat(mmEl.style.top) || 0;
|
||||
l = Math.max(0, Math.min(cr.width - mw, l));
|
||||
t = Math.max(0, Math.min(cr.height - mh, t));
|
||||
mmEl.style.left = l + 'px';
|
||||
mmEl.style.top = t + 'px';
|
||||
}
|
||||
|
||||
// ── Click on minimap SVG → pan main canvas to that point ──
|
||||
let mmDraggingViewport = false;
|
||||
svg.addEventListener('pointerdown', (e) => {
|
||||
if (!_canvas || !_bounds) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
mmDraggingViewport = true;
|
||||
svg.setPointerCapture(e.pointerId);
|
||||
_panToMinimapPoint(svg, e);
|
||||
});
|
||||
svg.addEventListener('pointermove', (e) => {
|
||||
if (!mmDraggingViewport) return;
|
||||
_panToMinimapPoint(svg, e);
|
||||
});
|
||||
svg.addEventListener('pointerup', () => { mmDraggingViewport = false; });
|
||||
|
||||
// ── Drag via header ──
|
||||
const header = mmEl.querySelector('.graph-minimap-header');
|
||||
let dragStart = null, dragStartPos = null;
|
||||
|
||||
header.addEventListener('pointerdown', (e) => {
|
||||
e.preventDefault();
|
||||
dragStart = { x: e.clientX, y: e.clientY };
|
||||
dragStartPos = { left: mmEl.offsetLeft, top: mmEl.offsetTop };
|
||||
header.classList.add('dragging');
|
||||
header.setPointerCapture(e.pointerId);
|
||||
});
|
||||
header.addEventListener('pointermove', (e) => {
|
||||
if (!dragStart) return;
|
||||
const cr = container.getBoundingClientRect();
|
||||
const mw = mmEl.offsetWidth, mh = mmEl.offsetHeight;
|
||||
let l = dragStartPos.left + (e.clientX - dragStart.x);
|
||||
let t = dragStartPos.top + (e.clientY - dragStart.y);
|
||||
l = Math.max(0, Math.min(cr.width - mw, l));
|
||||
t = Math.max(0, Math.min(cr.height - mh, t));
|
||||
mmEl.style.left = l + 'px';
|
||||
mmEl.style.top = t + 'px';
|
||||
});
|
||||
header.addEventListener('pointerup', () => {
|
||||
if (dragStart) { dragStart = null; header.classList.remove('dragging'); _saveMinimapRect(_mmRect(mmEl)); }
|
||||
});
|
||||
|
||||
// ── Resize handles ──
|
||||
_initResizeHandle(mmEl.querySelector('.graph-minimap-resize-br'), 'br');
|
||||
_initResizeHandle(mmEl.querySelector('.graph-minimap-resize-bl'), 'bl');
|
||||
|
||||
function _initResizeHandle(rh, corner) {
|
||||
if (!rh) return;
|
||||
let rs = null, rss = null;
|
||||
rh.addEventListener('pointerdown', (e) => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
rs = { x: e.clientX, y: e.clientY };
|
||||
rss = { w: mmEl.offsetWidth, h: mmEl.offsetHeight, left: mmEl.offsetLeft };
|
||||
rh.setPointerCapture(e.pointerId);
|
||||
});
|
||||
rh.addEventListener('pointermove', (e) => {
|
||||
if (!rs) return;
|
||||
const cr = container.getBoundingClientRect();
|
||||
const dy = e.clientY - rs.y;
|
||||
const newH = Math.max(80, Math.min(cr.height - 20, rss.h + dy));
|
||||
mmEl.style.height = newH + 'px';
|
||||
|
||||
if (corner === 'br') {
|
||||
// Bottom-right: grow width rightward, left stays fixed
|
||||
const dx = e.clientX - rs.x;
|
||||
const maxW = cr.width - mmEl.offsetLeft - 4;
|
||||
mmEl.style.width = Math.max(120, Math.min(maxW, rss.w + dx)) + 'px';
|
||||
} else {
|
||||
// Bottom-left: grow width leftward, right edge stays fixed
|
||||
const dx = rs.x - e.clientX;
|
||||
const newW = Math.max(120, Math.min(cr.width - 20, rss.w + dx));
|
||||
const newLeft = rss.left - (newW - rss.w);
|
||||
mmEl.style.width = newW + 'px';
|
||||
mmEl.style.left = Math.max(0, newLeft) + 'px';
|
||||
}
|
||||
_clampMinimap();
|
||||
});
|
||||
rh.addEventListener('pointerup', () => { if (rs) { rs = null; _saveMinimapRect(_mmRect(mmEl)); } });
|
||||
}
|
||||
}
|
||||
|
||||
function _panToMinimapPoint(svg, e) {
|
||||
if (!_canvas || !_bounds) return;
|
||||
const svgRect = svg.getBoundingClientRect();
|
||||
const pad = 10;
|
||||
const bx = _bounds.x - pad, by = _bounds.y - pad;
|
||||
const bw = _bounds.width + pad * 2, bh = _bounds.height + pad * 2;
|
||||
const gx = bx + ((e.clientX - svgRect.left) / svgRect.width) * bw;
|
||||
const gy = by + ((e.clientY - svgRect.top) / svgRect.height) * bh;
|
||||
_canvas.panTo(gx, gy, false);
|
||||
}
|
||||
|
||||
function _updateMinimapViewport(mmEl, vp) {
|
||||
if (!mmEl) return;
|
||||
const rect = mmEl.querySelector('.graph-minimap-viewport');
|
||||
if (!rect) return;
|
||||
rect.setAttribute('x', vp.x);
|
||||
rect.setAttribute('y', vp.y);
|
||||
rect.setAttribute('width', vp.width);
|
||||
rect.setAttribute('height', vp.height);
|
||||
}
|
||||
|
||||
function _mmRect(mmEl) {
|
||||
return { left: mmEl.offsetLeft, top: mmEl.offsetTop, width: mmEl.offsetWidth, height: mmEl.offsetHeight };
|
||||
}
|
||||
|
||||
/* ── Toolbar drag ── */
|
||||
|
||||
function _initToolbarDrag(tbEl) {
|
||||
if (!tbEl) return;
|
||||
const container = tbEl.closest('.graph-container');
|
||||
const handle = tbEl.querySelector('.graph-toolbar-drag');
|
||||
if (!handle) return;
|
||||
|
||||
let dragStart = null, dragStartPos = null;
|
||||
|
||||
handle.addEventListener('pointerdown', (e) => {
|
||||
e.preventDefault();
|
||||
dragStart = { x: e.clientX, y: e.clientY };
|
||||
dragStartPos = { left: tbEl.offsetLeft, top: tbEl.offsetTop };
|
||||
handle.setPointerCapture(e.pointerId);
|
||||
});
|
||||
handle.addEventListener('pointermove', (e) => {
|
||||
if (!dragStart) return;
|
||||
const cr = container.getBoundingClientRect();
|
||||
const tw = tbEl.offsetWidth, th = tbEl.offsetHeight;
|
||||
let l = dragStartPos.left + (e.clientX - dragStart.x);
|
||||
let t = dragStartPos.top + (e.clientY - dragStart.y);
|
||||
l = Math.max(0, Math.min(cr.width - tw, l));
|
||||
t = Math.max(0, Math.min(cr.height - th, t));
|
||||
tbEl.style.left = l + 'px';
|
||||
tbEl.style.top = t + 'px';
|
||||
});
|
||||
handle.addEventListener('pointerup', () => {
|
||||
if (dragStart) {
|
||||
dragStart = null;
|
||||
_saveToolbarPos({ left: tbEl.offsetLeft, top: tbEl.offsetTop });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Search ── */
|
||||
|
||||
function _renderSearchResults(query) {
|
||||
const results = document.querySelector('.graph-search-results');
|
||||
if (!results) return;
|
||||
|
||||
const q = query.toLowerCase().trim();
|
||||
const filtered = q
|
||||
? _searchItems.filter(n => n.name.toLowerCase().includes(q) || n.kind.includes(q) || (n.subtype || '').includes(q))
|
||||
: _searchItems.slice(0, 20);
|
||||
|
||||
_searchIndex = filtered.length > 0 ? 0 : -1;
|
||||
|
||||
results.innerHTML = filtered.map((n, i) => {
|
||||
const color = ENTITY_COLORS[n.kind] || '#666';
|
||||
return `<div class="graph-search-item${i === _searchIndex ? ' active' : ''}" data-id="${n.id}">
|
||||
<span class="graph-search-item-dot" style="background:${color}"></span>
|
||||
<span class="graph-search-item-name">${_escHtml(n.name)}</span>
|
||||
<span class="graph-search-item-type">${n.kind.replace(/_/g, ' ')}</span>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
results.querySelectorAll('.graph-search-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
_navigateToNode(item.getAttribute('data-id'));
|
||||
closeGraphSearch();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _onSearchKeydown(e) {
|
||||
const results = document.querySelectorAll('.graph-search-item');
|
||||
if (e.key === 'ArrowDown') { e.preventDefault(); _searchIndex = Math.min(_searchIndex + 1, results.length - 1); _updateSearchActive(results); }
|
||||
else if (e.key === 'ArrowUp') { e.preventDefault(); _searchIndex = Math.max(_searchIndex - 1, 0); _updateSearchActive(results); }
|
||||
else if (e.key === 'Enter') { e.preventDefault(); if (results[_searchIndex]) { _navigateToNode(results[_searchIndex].getAttribute('data-id')); closeGraphSearch(); } }
|
||||
else if (e.key === 'Escape') { closeGraphSearch(); }
|
||||
}
|
||||
|
||||
function _updateSearchActive(items) {
|
||||
items.forEach((el, i) => el.classList.toggle('active', i === _searchIndex));
|
||||
if (items[_searchIndex]) items[_searchIndex].scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
|
||||
function _navigateToNode(nodeId) {
|
||||
const node = _nodeMap?.get(nodeId);
|
||||
if (!node || !_canvas) return;
|
||||
_canvas.panTo(node.x + node.width / 2, node.y + node.height / 2, true);
|
||||
|
||||
const nodeGroup = document.querySelector('.graph-nodes');
|
||||
if (nodeGroup) { highlightNode(nodeGroup, nodeId); setTimeout(() => highlightNode(nodeGroup, null), 3000); }
|
||||
|
||||
const edgeGroup = document.querySelector('.graph-edges');
|
||||
if (edgeGroup && _edges) { highlightChain(edgeGroup, nodeId, _edges); setTimeout(() => clearEdgeHighlights(edgeGroup), 5000); }
|
||||
}
|
||||
|
||||
/* ── Node callbacks ── */
|
||||
|
||||
function _onNodeClick(node, e) {
|
||||
const nodeGroup = document.querySelector('.graph-nodes');
|
||||
const edgeGroup = document.querySelector('.graph-edges');
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (_selectedIds.has(node.id)) _selectedIds.delete(node.id);
|
||||
else _selectedIds.add(node.id);
|
||||
} else {
|
||||
_selectedIds.clear();
|
||||
_selectedIds.add(node.id);
|
||||
}
|
||||
if (nodeGroup) updateSelection(nodeGroup, _selectedIds);
|
||||
|
||||
if (_selectedIds.size === 1 && edgeGroup && _edges) {
|
||||
const chain = highlightChain(edgeGroup, node.id, _edges);
|
||||
if (nodeGroup) {
|
||||
nodeGroup.querySelectorAll('.graph-node').forEach(n => {
|
||||
n.style.opacity = chain.has(n.getAttribute('data-id')) ? '1' : '0.25';
|
||||
});
|
||||
}
|
||||
} else if (edgeGroup) {
|
||||
clearEdgeHighlights(edgeGroup);
|
||||
if (nodeGroup) nodeGroup.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
|
||||
}
|
||||
}
|
||||
|
||||
function _onNodeDblClick(node) {
|
||||
// Zoom to node and center it in one step
|
||||
if (_canvas) {
|
||||
_canvas.zoomToPoint(1.5, node.x + node.width / 2, node.y + node.height / 2);
|
||||
}
|
||||
}
|
||||
|
||||
function _onEditNode(node) {
|
||||
const fnMap = {
|
||||
device: () => window.showSettings?.(node.id),
|
||||
capture_template: () => window.editTemplate?.(node.id),
|
||||
pp_template: () => window.editPPTemplate?.(node.id),
|
||||
audio_template: () => window.editAudioTemplate?.(node.id),
|
||||
pattern_template: () => window.showPatternTemplateEditor?.(node.id),
|
||||
picture_source: () => window.editStream?.(node.id),
|
||||
audio_source: () => window.editAudioSource?.(node.id),
|
||||
value_source: () => window.editValueSource?.(node.id),
|
||||
color_strip_source: () => window.showCSSEditor?.(node.id),
|
||||
sync_clock: () => {},
|
||||
output_target: () => window.showTargetEditor?.(node.id),
|
||||
scene_preset: () => window.editScenePreset?.(node.id),
|
||||
automation: () => window.openAutomationEditor?.(node.id),
|
||||
};
|
||||
fnMap[node.kind]?.();
|
||||
}
|
||||
|
||||
function _onDeleteNode(node) {
|
||||
const fnMap = {
|
||||
device: () => window.removeDevice?.(node.id),
|
||||
capture_template: () => window.deleteTemplate?.(node.id),
|
||||
pp_template: () => window.deletePPTemplate?.(node.id),
|
||||
audio_template: () => window.deleteAudioTemplate?.(node.id),
|
||||
pattern_template: () => window.deletePatternTemplate?.(node.id),
|
||||
picture_source: () => window.deleteStream?.(node.id),
|
||||
audio_source: () => window.deleteAudioSource?.(node.id),
|
||||
value_source: () => window.deleteValueSource?.(node.id),
|
||||
color_strip_source: () => window.deleteColorStrip?.(node.id),
|
||||
output_target: () => window.deleteTarget?.(node.id),
|
||||
scene_preset: () => window.deleteScenePreset?.(node.id),
|
||||
automation: () => window.deleteAutomation?.(node.id),
|
||||
};
|
||||
fnMap[node.kind]?.();
|
||||
}
|
||||
|
||||
/* ── Keyboard ── */
|
||||
|
||||
function _onKeydown(e) {
|
||||
if (e.key === '/' && !_searchVisible) { e.preventDefault(); openGraphSearch(); }
|
||||
if (e.key === 'Escape') {
|
||||
if (_searchVisible) { closeGraphSearch(); }
|
||||
else {
|
||||
const ng = document.querySelector('.graph-nodes');
|
||||
const eg = document.querySelector('.graph-edges');
|
||||
_deselect(ng, eg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Helpers ── */
|
||||
|
||||
function _escHtml(s) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
// Re-render graph when language changes (toolbar titles, legend, search placeholder use t())
|
||||
document.addEventListener('languageChanged', () => {
|
||||
if (_initialized && _nodeMap) {
|
||||
const container = document.getElementById('graph-editor-content');
|
||||
if (container) _renderGraph(container);
|
||||
}
|
||||
});
|
||||
@@ -70,6 +70,8 @@ export function switchTab(name, { updateHash = true, skipLoad = false } = {}) {
|
||||
if (typeof window.loadTargetsTab === 'function') window.loadTargetsTab();
|
||||
} else if (name === 'automations') {
|
||||
if (typeof window.loadAutomations === 'function') window.loadAutomations();
|
||||
} else if (name === 'graph') {
|
||||
if (typeof window.loadGraphEditor === 'function') window.loadGraphEditor();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user