alexei.dolgolyov
bbe42ee0a2
- Unified graph node colors with card color system (shared localStorage) - Added color picker palette button to node overlay toolbar - Auto-focus graph container for keyboard shortcuts to work immediately - Trap Tab key to prevent focus escaping to footer - Added mandatory bundle rebuild note to CLAUDE.md files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2248 lines
89 KiB
JavaScript
2248 lines
89 KiB
JavaScript
/**
|
|
* Graph editor — visual entity graph with autolayout, pan/zoom, search.
|
|
*/
|
|
|
|
import { GraphCanvas } from '../core/graph-canvas.js';
|
|
import { computeLayout, computePorts, ENTITY_COLORS, ENTITY_LABELS } from '../core/graph-layout.js';
|
|
import { renderNodes, patchNodeRunning, highlightNode, markOrphans, updateSelection, getNodeDisplayColor } from '../core/graph-nodes.js';
|
|
import { renderEdges, highlightChain, clearEdgeHighlights, updateEdgesForNode, renderFlowDots, updateFlowDotsForNode } from '../core/graph-edges.js';
|
|
import {
|
|
devicesCache, captureTemplatesCache, ppTemplatesCache,
|
|
streamsCache, audioSourcesCache, audioTemplatesCache,
|
|
valueSourcesCache, colorStripSourcesCache, syncClocksCache,
|
|
outputTargetsCache, patternTemplatesCache, scenePresetsCache,
|
|
automationsCacheObj, csptCache,
|
|
} from '../core/state.js';
|
|
import { fetchWithAuth } from '../core/api.js';
|
|
import { showToast, showConfirm } from '../core/ui.js';
|
|
import { t } from '../core/i18n.js';
|
|
import { findConnection, getCompatibleInputs, getConnectionByField, updateConnection, detachConnection, isEditableEdge } from '../core/graph-connections.js';
|
|
import { showTypePicker } from '../core/icon-select.js';
|
|
import * as P from '../core/icon-paths.js';
|
|
|
|
let _canvas = null;
|
|
let _nodeMap = null;
|
|
let _edges = null;
|
|
let _bounds = null;
|
|
let _selectedIds = new Set();
|
|
let _initialized = false;
|
|
let _legendVisible = (() => { try { return localStorage.getItem('graph_legend_visible') === '1'; } catch { return false; } })();
|
|
let _minimapVisible = true;
|
|
let _loading = false;
|
|
let _filterVisible = false;
|
|
let _filterQuery = ''; // current active filter text
|
|
let _filterKinds = new Set(); // empty = all kinds shown
|
|
let _filterRunning = null; // null = all, true = running only, false = stopped only
|
|
|
|
// Node drag state
|
|
let _dragState = null; // { nodeId, el, startClient, startNode, dragging }
|
|
let _justDragged = false;
|
|
let _dragListenersAdded = false;
|
|
|
|
// Manual position overrides (persisted in memory; cleared on relayout)
|
|
let _manualPositions = new Map();
|
|
|
|
// Rubber-band selection state
|
|
let _rubberBand = null;
|
|
let _rubberBandListenersAdded = false;
|
|
|
|
// Port-drag connection state
|
|
let _connectState = null; // { sourceNodeId, sourceKind, portType, startPos, dragPath }
|
|
let _connectListenersAdded = false;
|
|
|
|
// Edge context menu
|
|
let _edgeContextMenu = null;
|
|
|
|
// Selected edge for Delete key detach
|
|
let _selectedEdge = null; // { from, to, field, targetKind }
|
|
|
|
// Minimap position/size persisted in localStorage (with anchor corner)
|
|
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));
|
|
}
|
|
/**
|
|
* Anchor-based positioning: detect closest corner, store offset from that corner,
|
|
* and reposition from that corner on resize. Works for minimap, toolbar, etc.
|
|
*/
|
|
function _anchorCorner(el, container) {
|
|
const cr = container.getBoundingClientRect();
|
|
const cx = el.offsetLeft + el.offsetWidth / 2;
|
|
const cy = el.offsetTop + el.offsetHeight / 2;
|
|
return (cy > cr.height / 2 ? 'b' : 't') + (cx > cr.width / 2 ? 'r' : 'l');
|
|
}
|
|
function _saveAnchored(el, container, saveFn) {
|
|
const cr = container.getBoundingClientRect();
|
|
const anchor = _anchorCorner(el, container);
|
|
const data = {
|
|
width: el.offsetWidth,
|
|
height: el.offsetHeight,
|
|
anchor,
|
|
offsetX: anchor.includes('r') ? cr.width - el.offsetLeft - el.offsetWidth : el.offsetLeft,
|
|
offsetY: anchor.includes('b') ? cr.height - el.offsetTop - el.offsetHeight : el.offsetTop,
|
|
};
|
|
saveFn(data);
|
|
return data;
|
|
}
|
|
function _applyAnchor(el, container, saved) {
|
|
if (!saved?.anchor) return;
|
|
const cr = container.getBoundingClientRect();
|
|
const w = saved.width || el.offsetWidth;
|
|
const h = saved.height || el.offsetHeight;
|
|
const ox = Math.max(0, saved.offsetX || 0);
|
|
const oy = Math.max(0, saved.offsetY || 0);
|
|
let l = saved.anchor.includes('r') ? cr.width - w - ox : ox;
|
|
let t = saved.anchor.includes('b') ? cr.height - h - oy : oy;
|
|
l = Math.max(0, Math.min(cr.width - el.offsetWidth, l));
|
|
t = Math.max(0, Math.min(cr.height - el.offsetHeight, t));
|
|
el.style.left = l + 'px';
|
|
el.style.top = t + 'px';
|
|
}
|
|
/** True when the graph container is in fullscreen — suppress anchor persistence. */
|
|
function _isFullscreen() { return !!document.fullscreenElement; }
|
|
|
|
// Toolbar position persisted in localStorage
|
|
const _TB_KEY = 'graph_toolbar';
|
|
const _TB_MARGIN = 12;
|
|
|
|
// 8 dock positions: tl, tc, tr, cl, cr, bl, bc, br
|
|
function _computeDockPositions(container, el) {
|
|
const cr = container.getBoundingClientRect();
|
|
const w = el.offsetWidth, h = el.offsetHeight;
|
|
const m = _TB_MARGIN;
|
|
return {
|
|
tl: { x: m, y: m },
|
|
tc: { x: (cr.width - w) / 2, y: m },
|
|
tr: { x: cr.width - w - m, y: m },
|
|
cl: { x: m, y: (cr.height - h) / 2 },
|
|
cr: { x: cr.width - w - m, y: (cr.height - h) / 2 },
|
|
bl: { x: m, y: cr.height - h - m },
|
|
bc: { x: (cr.width - w) / 2, y: cr.height - h - m },
|
|
br: { x: cr.width - w - m, y: cr.height - h - m },
|
|
};
|
|
}
|
|
|
|
function _nearestDock(container, el) {
|
|
const docks = _computeDockPositions(container, el);
|
|
const cx = el.offsetLeft + el.offsetWidth / 2;
|
|
const cy = el.offsetTop + el.offsetHeight / 2;
|
|
let best = 'tl', bestDist = Infinity;
|
|
for (const [key, pos] of Object.entries(docks)) {
|
|
const dx = (pos.x + el.offsetWidth / 2) - cx;
|
|
const dy = (pos.y + el.offsetHeight / 2) - cy;
|
|
const dist = dx * dx + dy * dy;
|
|
if (dist < bestDist) { bestDist = dist; best = key; }
|
|
}
|
|
return best;
|
|
}
|
|
|
|
function _isVerticalDock(dock) {
|
|
return dock === 'cl' || dock === 'cr';
|
|
}
|
|
|
|
function _applyToolbarDock(el, container, dock, animate = false) {
|
|
const isVert = _isVerticalDock(dock);
|
|
el.classList.toggle('vertical', isVert);
|
|
// Recompute positions after layout change
|
|
requestAnimationFrame(() => {
|
|
const docks = _computeDockPositions(container, el);
|
|
const pos = docks[dock];
|
|
if (!pos) return;
|
|
if (animate) {
|
|
el.style.transition = 'left 0.25s ease, top 0.25s ease';
|
|
el.style.left = pos.x + 'px';
|
|
el.style.top = pos.y + 'px';
|
|
setTimeout(() => { el.style.transition = ''; }, 260);
|
|
} else {
|
|
el.style.left = pos.x + 'px';
|
|
el.style.top = pos.y + 'px';
|
|
}
|
|
});
|
|
}
|
|
|
|
function _loadToolbarPos() {
|
|
try { return JSON.parse(localStorage.getItem(_TB_KEY)); } catch { return null; }
|
|
}
|
|
function _saveToolbarPos(r) {
|
|
localStorage.setItem(_TB_KEY, JSON.stringify(r));
|
|
}
|
|
|
|
// Legend position persisted in localStorage
|
|
const _LG_KEY = 'graph_legend';
|
|
function _loadLegendPos() {
|
|
try { return JSON.parse(localStorage.getItem(_LG_KEY)); } catch { return null; }
|
|
}
|
|
function _saveLegendPos(r) {
|
|
localStorage.setItem(_LG_KEY, JSON.stringify(r));
|
|
}
|
|
|
|
/**
|
|
* Generic draggable panel setup.
|
|
* @param {HTMLElement} el - The panel element
|
|
* @param {HTMLElement} handle - The drag handle element
|
|
* @param {object} opts - { loadFn, saveFn }
|
|
*/
|
|
function _makeDraggable(el, handle, { loadFn, saveFn }) {
|
|
if (!el || !handle) return;
|
|
const container = el.closest('.graph-container');
|
|
if (!container) return;
|
|
|
|
// Apply saved anchor position or clamp
|
|
const saved = loadFn();
|
|
if (saved?.anchor) {
|
|
_applyAnchor(el, container, saved);
|
|
} else {
|
|
_clampElementInContainer(el, container);
|
|
}
|
|
|
|
let dragStart = null, dragStartPos = null;
|
|
|
|
handle.addEventListener('pointerdown', (e) => {
|
|
e.preventDefault();
|
|
dragStart = { x: e.clientX, y: e.clientY };
|
|
dragStartPos = { left: el.offsetLeft, top: el.offsetTop };
|
|
handle.classList.add('dragging');
|
|
handle.setPointerCapture(e.pointerId);
|
|
});
|
|
handle.addEventListener('pointermove', (e) => {
|
|
if (!dragStart) return;
|
|
const cr = container.getBoundingClientRect();
|
|
const ew = el.offsetWidth, eh = el.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 - ew, l));
|
|
t = Math.max(0, Math.min(cr.height - eh, t));
|
|
el.style.left = l + 'px';
|
|
el.style.top = t + 'px';
|
|
});
|
|
handle.addEventListener('pointerup', () => {
|
|
if (dragStart) {
|
|
dragStart = null;
|
|
handle.classList.remove('dragging');
|
|
if (!_isFullscreen()) _saveAnchored(el, container, saveFn);
|
|
}
|
|
});
|
|
}
|
|
|
|
/* ── 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);
|
|
|
|
// Apply manual position overrides from previous drag operations
|
|
_applyManualPositions(nodes, edges);
|
|
|
|
computePorts(nodes, edges);
|
|
_nodeMap = nodes;
|
|
_edges = edges;
|
|
_bounds = _calcBounds(nodes);
|
|
_renderGraph(container);
|
|
} finally {
|
|
_loading = false;
|
|
}
|
|
// Ensure keyboard focus whenever the graph is (re-)loaded
|
|
container.focus();
|
|
}
|
|
|
|
export function toggleGraphLegend() {
|
|
_legendVisible = !_legendVisible;
|
|
try { localStorage.setItem('graph_legend_visible', _legendVisible ? '1' : '0'); } catch {}
|
|
const legend = document.querySelector('.graph-legend');
|
|
if (!legend) return;
|
|
legend.classList.toggle('visible', _legendVisible);
|
|
const legendBtn = document.getElementById('graph-legend-toggle');
|
|
if (legendBtn) legendBtn.classList.toggle('active', _legendVisible);
|
|
if (_legendVisible) {
|
|
const container = legend.closest('.graph-container');
|
|
if (container) {
|
|
const saved = _loadLegendPos();
|
|
if (saved?.anchor) {
|
|
_applyAnchor(legend, container, saved);
|
|
} else if (!legend.style.left) {
|
|
// Default to top-right
|
|
const cr = container.getBoundingClientRect();
|
|
legend.style.left = (cr.width - legend.offsetWidth - 12) + 'px';
|
|
legend.style.top = '12px';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export function toggleGraphMinimap() {
|
|
_minimapVisible = !_minimapVisible;
|
|
const mm = document.querySelector('.graph-minimap');
|
|
if (mm) mm.classList.toggle('visible', _minimapVisible);
|
|
const mmBtn = document.getElementById('graph-minimap-toggle');
|
|
if (mmBtn) mmBtn.classList.toggle('active', _minimapVisible);
|
|
}
|
|
|
|
/* ── Filter type groups ── */
|
|
|
|
const _FILTER_GROUPS = [
|
|
{ key: 'capture', kinds: ['picture_source', 'capture_template', 'pp_template'] },
|
|
{ key: 'strip', kinds: ['color_strip_source', 'cspt'] },
|
|
{ key: 'audio', kinds: ['audio_source', 'audio_template'] },
|
|
{ key: 'targets', kinds: ['device', 'output_target', 'pattern_template'] },
|
|
{ key: 'other', kinds: ['value_source', 'sync_clock', 'automation', 'scene_preset'] },
|
|
];
|
|
|
|
function _buildFilterGroupsHTML() {
|
|
const groupLabels = {
|
|
capture: t('graph.filter_group.capture') || 'Capture',
|
|
strip: t('graph.filter_group.strip') || 'Color Strip',
|
|
audio: t('graph.filter_group.audio') || 'Audio',
|
|
targets: t('graph.filter_group.targets') || 'Targets',
|
|
other: t('graph.filter_group.other') || 'Other',
|
|
};
|
|
return _FILTER_GROUPS.map(g => {
|
|
const items = g.kinds.map(kind => {
|
|
const label = ENTITY_LABELS[kind] || kind;
|
|
const color = ENTITY_COLORS[kind] || '#666';
|
|
return `<label class="graph-filter-type-item" data-kind="${kind}">
|
|
<input type="checkbox" value="${kind}">
|
|
<span class="graph-filter-type-dot" style="background:${color}"></span>
|
|
<span>${label}</span>
|
|
</label>`;
|
|
}).join('');
|
|
return `<div class="graph-filter-type-group" data-group="${g.key}">
|
|
<div class="graph-filter-type-group-header" data-group-toggle="${g.key}">${groupLabels[g.key]}</div>
|
|
${items}
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function _updateFilterBadge() {
|
|
const badge = document.querySelector('.graph-filter-types-badge');
|
|
if (!badge) return;
|
|
const count = _filterKinds.size;
|
|
badge.textContent = count > 0 ? String(count) : '';
|
|
badge.classList.toggle('visible', count > 0);
|
|
// Also update toolbar button
|
|
const btn = document.querySelector('.graph-filter-btn');
|
|
if (btn) btn.classList.toggle('active', count > 0 || _filterRunning !== null || !!_filterQuery);
|
|
}
|
|
|
|
function _syncPopoverCheckboxes() {
|
|
const popover = document.querySelector('.graph-filter-types-popover');
|
|
if (!popover) return;
|
|
popover.querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
|
cb.checked = _filterKinds.has(cb.value);
|
|
});
|
|
}
|
|
|
|
export function toggleGraphFilterTypes(btn) {
|
|
const popover = document.querySelector('.graph-filter-types-popover');
|
|
if (!popover) return;
|
|
const isOpen = popover.classList.contains('visible');
|
|
if (isOpen) {
|
|
popover.classList.remove('visible');
|
|
} else {
|
|
_syncPopoverCheckboxes();
|
|
popover.classList.add('visible');
|
|
}
|
|
}
|
|
|
|
export function toggleGraphFilter() {
|
|
_filterVisible = !_filterVisible;
|
|
const bar = document.querySelector('.graph-filter');
|
|
if (!bar) return;
|
|
bar.classList.toggle('visible', _filterVisible);
|
|
if (_filterVisible) {
|
|
const input = bar.querySelector('.graph-filter-input');
|
|
if (input) { input.value = _filterQuery; input.focus(); }
|
|
// Restore running pill states
|
|
bar.querySelectorAll('.graph-filter-pill[data-running]').forEach(p => {
|
|
p.classList.toggle('active', _filterRunning !== null && String(_filterRunning) === p.dataset.running);
|
|
});
|
|
_syncPopoverCheckboxes();
|
|
_updateFilterBadge();
|
|
} else {
|
|
_filterKinds.clear();
|
|
_filterRunning = null;
|
|
// Close types popover
|
|
const popover = bar.querySelector('.graph-filter-types-popover');
|
|
if (popover) popover.classList.remove('visible');
|
|
_applyFilter('');
|
|
_updateFilterBadge();
|
|
}
|
|
}
|
|
|
|
function _applyFilter(query) {
|
|
if (query !== undefined) _filterQuery = query;
|
|
const q = _filterQuery.toLowerCase().trim();
|
|
const nodeGroup = document.querySelector('.graph-nodes');
|
|
const edgeGroup = document.querySelector('.graph-edges');
|
|
const mm = document.querySelector('.graph-minimap');
|
|
|
|
if (!_nodeMap) return;
|
|
|
|
// Parse structured filters: type:device, tag:foo, running:true
|
|
let textPart = q;
|
|
const parsedKinds = new Set();
|
|
const parsedTags = [];
|
|
const tokens = q.split(/\s+/);
|
|
const plainTokens = [];
|
|
for (const tok of tokens) {
|
|
if (tok.startsWith('type:')) { parsedKinds.add(tok.slice(5)); }
|
|
else if (tok.startsWith('tag:')) { parsedTags.push(tok.slice(4)); }
|
|
else { plainTokens.push(tok); }
|
|
}
|
|
textPart = plainTokens.join(' ');
|
|
|
|
const hasTextFilter = !!textPart;
|
|
const hasParsedKinds = parsedKinds.size > 0;
|
|
const hasParsedTags = parsedTags.length > 0;
|
|
const hasKindFilter = _filterKinds.size > 0;
|
|
const hasRunningFilter = _filterRunning !== null;
|
|
const hasAny = hasTextFilter || hasKindFilter || hasRunningFilter || hasParsedKinds || hasParsedTags;
|
|
|
|
// Build set of matching node IDs
|
|
const matchIds = new Set();
|
|
for (const node of _nodeMap.values()) {
|
|
const textMatch = !hasTextFilter || node.name.toLowerCase().includes(textPart) || node.kind.includes(textPart) || (node.subtype || '').toLowerCase().includes(textPart);
|
|
const kindMatch = !hasKindFilter || _filterKinds.has(node.kind);
|
|
const parsedKindMatch = !hasParsedKinds || parsedKinds.has(node.kind) || parsedKinds.has((node.subtype || ''));
|
|
const tagMatch = !hasParsedTags || parsedTags.every(t => (node.tags || []).some(nt => nt.toLowerCase().includes(t)));
|
|
const runMatch = !hasRunningFilter || (node.running === _filterRunning);
|
|
if (textMatch && kindMatch && parsedKindMatch && tagMatch && runMatch) matchIds.add(node.id);
|
|
}
|
|
|
|
// Apply filtered-out class to nodes
|
|
if (nodeGroup) {
|
|
nodeGroup.querySelectorAll('.graph-node').forEach(el => {
|
|
el.classList.toggle('graph-filtered-out', hasAny && !matchIds.has(el.getAttribute('data-id')));
|
|
});
|
|
}
|
|
|
|
// Dim edges where either endpoint is filtered out
|
|
if (edgeGroup) {
|
|
edgeGroup.querySelectorAll('.graph-edge').forEach(el => {
|
|
const from = el.getAttribute('data-from');
|
|
const to = el.getAttribute('data-to');
|
|
el.classList.toggle('graph-filtered-out', hasAny && (!matchIds.has(from) || !matchIds.has(to)));
|
|
});
|
|
}
|
|
|
|
// Dim minimap nodes
|
|
if (mm) {
|
|
mm.querySelectorAll('.graph-minimap-node').forEach(el => {
|
|
const id = el.getAttribute('data-id');
|
|
el.setAttribute('opacity', (!hasAny || matchIds.has(id)) ? '0.7' : '0.07');
|
|
});
|
|
}
|
|
|
|
// Update filter button active state
|
|
const btn = document.querySelector('.graph-filter-btn');
|
|
if (btn) btn.classList.toggle('active', hasAny);
|
|
}
|
|
|
|
export function graphFitAll() {
|
|
if (_canvas && _bounds) _canvas.fitAll(_bounds);
|
|
}
|
|
|
|
export function graphZoomIn() { if (_canvas) _canvas.zoomIn(); }
|
|
export function graphZoomOut() { if (_canvas) _canvas.zoomOut(); }
|
|
|
|
export function graphToggleFullscreen() {
|
|
const container = document.querySelector('#graph-editor-content .graph-container');
|
|
if (!container) return;
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
// Move bg-anim canvas into container so it's visible in fullscreen
|
|
const bgCanvas = document.getElementById('bg-anim-canvas');
|
|
if (bgCanvas && !container.contains(bgCanvas)) {
|
|
container.insertBefore(bgCanvas, container.firstChild);
|
|
}
|
|
container.requestFullscreen().catch(() => {});
|
|
}
|
|
}
|
|
|
|
// Restore bg-anim canvas to body when exiting fullscreen
|
|
document.addEventListener('fullscreenchange', () => {
|
|
if (!document.fullscreenElement) {
|
|
const bgCanvas = document.getElementById('bg-anim-canvas');
|
|
if (bgCanvas && bgCanvas.parentElement !== document.body) {
|
|
document.body.insertBefore(bgCanvas, document.body.firstChild);
|
|
}
|
|
}
|
|
});
|
|
|
|
export async function graphRelayout() {
|
|
if (_manualPositions.size > 0) {
|
|
const ok = await showConfirm(t('graph.relayout_confirm'));
|
|
if (!ok) return;
|
|
}
|
|
_manualPositions.clear();
|
|
await loadGraphEditor();
|
|
}
|
|
|
|
// Entity kind → window function to open add/create modal + icon path
|
|
const _ico = (d) => `<svg class="icon" viewBox="0 0 24 24">${d}</svg>`;
|
|
const ADD_ENTITY_MAP = [
|
|
{ kind: 'device', fn: () => window.showAddDevice?.(), icon: _ico(P.monitor) },
|
|
{ kind: 'capture_template', fn: () => window.showAddTemplateModal?.(), icon: _ico(P.camera) },
|
|
{ kind: 'pp_template', fn: () => window.showAddPPTemplateModal?.(), icon: _ico(P.wrench) },
|
|
{ kind: 'cspt', fn: () => window.showAddCSPTModal?.(), icon: _ico(P.wrench) },
|
|
{ kind: 'audio_template', fn: () => window.showAddAudioTemplateModal?.(),icon: _ico(P.music) },
|
|
{ kind: 'picture_source', fn: () => window.showAddStreamModal?.(), icon: _ico(P.tv) },
|
|
{ kind: 'audio_source', fn: () => window.showAudioSourceModal?.(), icon: _ico(P.music) },
|
|
{ kind: 'value_source', fn: () => window.showValueSourceModal?.(), icon: _ico(P.hash) },
|
|
{ kind: 'color_strip_source', fn: () => window.showCSSEditor?.(), icon: _ico(P.film) },
|
|
{ kind: 'output_target', fn: () => window.showTargetEditor?.(), icon: _ico(P.zap) },
|
|
{ kind: 'automation', fn: () => window.openAutomationEditor?.(), icon: _ico(P.clipboardList) },
|
|
{ kind: 'sync_clock', fn: () => window.showSyncClockModal?.(), icon: _ico(P.clock) },
|
|
{ kind: 'scene_preset', fn: () => window.editScenePreset?.(), icon: _ico(P.sparkles) },
|
|
{ kind: 'pattern_template', fn: () => window.showPatternTemplateEditor?.(),icon: _ico(P.fileText) },
|
|
];
|
|
|
|
// All caches to watch for new entity creation
|
|
const ALL_CACHES = [
|
|
devicesCache, captureTemplatesCache, ppTemplatesCache,
|
|
streamsCache, audioSourcesCache, audioTemplatesCache,
|
|
valueSourcesCache, colorStripSourcesCache, syncClocksCache,
|
|
outputTargetsCache, patternTemplatesCache, scenePresetsCache,
|
|
automationsCacheObj, csptCache,
|
|
];
|
|
|
|
export function graphAddEntity() {
|
|
const items = ADD_ENTITY_MAP.map(item => ({
|
|
value: item.kind,
|
|
icon: item.icon,
|
|
label: ENTITY_LABELS[item.kind] || item.kind.replace(/_/g, ' '),
|
|
}));
|
|
showTypePicker({
|
|
title: t('graph.add_entity') || 'Add Entity',
|
|
items,
|
|
onPick: (kind) => {
|
|
const entry = ADD_ENTITY_MAP.find(e => e.kind === kind);
|
|
if (entry) {
|
|
_watchForNewEntity();
|
|
entry.fn();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
// Watch for new entity creation after add-entity menu action
|
|
let _entityWatchCleanup = null;
|
|
|
|
function _watchForNewEntity() {
|
|
// Cleanup any previous watcher
|
|
if (_entityWatchCleanup) _entityWatchCleanup();
|
|
|
|
// Snapshot all current IDs
|
|
const knownIds = new Set();
|
|
for (const cache of ALL_CACHES) {
|
|
for (const item of (cache.data || [])) {
|
|
if (item.id) knownIds.add(item.id);
|
|
}
|
|
}
|
|
|
|
const handler = (data) => {
|
|
if (!Array.isArray(data)) return;
|
|
for (const item of data) {
|
|
if (item.id && !knownIds.has(item.id)) {
|
|
// Found a new entity — reload graph and zoom to it
|
|
const newId = item.id;
|
|
cleanup();
|
|
loadGraphEditor().then(() => {
|
|
const node = _nodeMap?.get(newId);
|
|
if (node && _canvas) {
|
|
// Animate zoom + pan together in one transition
|
|
_canvas.zoomToPoint(1.5, node.x + node.width / 2, node.y + node.height / 2);
|
|
}
|
|
// Highlight the node and its chain (without re-panning)
|
|
const nodeGroup = document.querySelector('.graph-nodes');
|
|
if (nodeGroup) { highlightNode(nodeGroup, newId); setTimeout(() => highlightNode(nodeGroup, null), 3000); }
|
|
const edgeGroup = document.querySelector('.graph-edges');
|
|
if (edgeGroup && _edges) { highlightChain(edgeGroup, newId, _edges); setTimeout(() => clearEdgeHighlights(edgeGroup), 5000); }
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
|
|
for (const cache of ALL_CACHES) cache.subscribe(handler);
|
|
|
|
// Auto-cleanup after 2 minutes (user might cancel the modal)
|
|
const timeout = setTimeout(cleanup, 120_000);
|
|
|
|
function cleanup() {
|
|
clearTimeout(timeout);
|
|
for (const cache of ALL_CACHES) cache.unsubscribe(handler);
|
|
_entityWatchCleanup = null;
|
|
}
|
|
|
|
_entityWatchCleanup = cleanup;
|
|
}
|
|
|
|
/* ── Data fetching ── */
|
|
|
|
async function _fetchAllEntities() {
|
|
const [
|
|
devices, captureTemplates, ppTemplates, pictureSources,
|
|
audioSources, audioTemplates, valueSources, colorStripSources,
|
|
syncClocks, outputTargets, patternTemplates, scenePresets, automations,
|
|
csptTemplates, batchStatesResp,
|
|
] = 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(), csptCache.fetch(),
|
|
fetchWithAuth('/output-targets/batch/states').catch(() => null),
|
|
]);
|
|
|
|
// Enrich output targets with running state from batch states
|
|
let batchStates = {};
|
|
if (batchStatesResp && batchStatesResp.ok) {
|
|
const data = await batchStatesResp.json().catch(() => ({}));
|
|
batchStates = data.states || {};
|
|
}
|
|
const enrichedTargets = (outputTargets || []).map(t => ({
|
|
...t,
|
|
running: batchStates[t.id]?.processing || false,
|
|
}));
|
|
|
|
return {
|
|
devices, captureTemplates, ppTemplates, pictureSources,
|
|
audioSources, audioTemplates, valueSources, colorStripSources,
|
|
syncClocks, outputTargets: enrichedTargets, patternTemplates, scenePresets, automations,
|
|
csptTemplates,
|
|
};
|
|
}
|
|
|
|
/* ── Rendering ── */
|
|
|
|
function _renderGraph(container) {
|
|
// Destroy previous canvas to clean up window event listeners
|
|
if (_canvas) { _canvas.destroy(); _canvas = null; }
|
|
|
|
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,
|
|
onStartStopNode: _onStartStopNode,
|
|
onTestNode: _onTestNode,
|
|
onNotificationTest: _onNotificationTest,
|
|
onCloneNode: _onCloneNode,
|
|
onActivatePreset: _onActivatePreset,
|
|
});
|
|
markOrphans(nodeGroup, _nodeMap, _edges);
|
|
|
|
// Animated flow dots for running nodes
|
|
const runningIds = new Set();
|
|
for (const node of _nodeMap.values()) {
|
|
if (node.running) runningIds.add(node.id);
|
|
}
|
|
renderFlowDots(edgeGroup, _edges, runningIds);
|
|
|
|
// 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);
|
|
};
|
|
|
|
const legendEl = container.querySelector('.graph-legend');
|
|
_renderLegend(legendEl);
|
|
_initLegendDrag(legendEl);
|
|
_initMinimap(container.querySelector('.graph-minimap'));
|
|
_initToolbarDrag(container.querySelector('.graph-toolbar'));
|
|
_initResizeClamp(container);
|
|
_initNodeDrag(nodeGroup, edgeGroup);
|
|
_initPortDrag(svgEl, nodeGroup, edgeGroup);
|
|
_initRubberBand(svgEl);
|
|
|
|
// Edge click: select edge and its endpoints
|
|
edgeGroup.addEventListener('click', (e) => {
|
|
const edgePath = e.target.closest('.graph-edge');
|
|
if (!edgePath) return;
|
|
e.stopPropagation();
|
|
_onEdgeClick(edgePath, nodeGroup, edgeGroup);
|
|
});
|
|
|
|
// Edge right-click: detach connection
|
|
edgeGroup.addEventListener('contextmenu', (e) => {
|
|
const edgePath = e.target.closest('.graph-edge');
|
|
if (!edgePath) return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
_onEdgeContextMenu(edgePath, e, container);
|
|
});
|
|
|
|
const filterInput = container.querySelector('.graph-filter-input');
|
|
if (filterInput) {
|
|
filterInput.addEventListener('input', (e) => _applyFilter(e.target.value));
|
|
filterInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') toggleGraphFilter();
|
|
});
|
|
}
|
|
const filterClear = container.querySelector('.graph-filter-clear');
|
|
if (filterClear) {
|
|
filterClear.addEventListener('click', () => {
|
|
if (filterInput) filterInput.value = '';
|
|
_filterKinds.clear();
|
|
_filterRunning = null;
|
|
container.querySelectorAll('.graph-filter-pill').forEach(p => p.classList.remove('active'));
|
|
_applyFilter('');
|
|
});
|
|
}
|
|
|
|
// Entity type checkboxes in popover
|
|
container.querySelectorAll('.graph-filter-type-item input[type="checkbox"]').forEach(cb => {
|
|
cb.addEventListener('change', () => {
|
|
if (cb.checked) _filterKinds.add(cb.value);
|
|
else _filterKinds.delete(cb.value);
|
|
_updateFilterBadge();
|
|
_applyFilter();
|
|
});
|
|
});
|
|
|
|
// Group header toggles (click group label → toggle all in group)
|
|
container.querySelectorAll('[data-group-toggle]').forEach(header => {
|
|
header.addEventListener('click', () => {
|
|
const groupKey = header.dataset.groupToggle;
|
|
const group = _FILTER_GROUPS.find(g => g.key === groupKey);
|
|
if (!group) return;
|
|
const allActive = group.kinds.every(k => _filterKinds.has(k));
|
|
group.kinds.forEach(k => { if (allActive) _filterKinds.delete(k); else _filterKinds.add(k); });
|
|
_syncPopoverCheckboxes();
|
|
_updateFilterBadge();
|
|
_applyFilter();
|
|
});
|
|
});
|
|
|
|
// Close popover when clicking outside
|
|
container.addEventListener('click', (e) => {
|
|
const popover = container.querySelector('.graph-filter-types-popover');
|
|
if (!popover || !popover.classList.contains('visible')) return;
|
|
if (!e.target.closest('.graph-filter-types-popover') && !e.target.closest('.graph-filter-types-btn')) {
|
|
popover.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
// Running/stopped pills
|
|
container.querySelectorAll('.graph-filter-pill[data-running]').forEach(pill => {
|
|
pill.addEventListener('click', () => {
|
|
const val = pill.dataset.running === 'true';
|
|
if (_filterRunning === val) {
|
|
_filterRunning = null;
|
|
pill.classList.remove('active');
|
|
} else {
|
|
_filterRunning = val;
|
|
container.querySelectorAll('.graph-filter-pill[data-running]').forEach(p => p.classList.remove('active'));
|
|
pill.classList.add('active');
|
|
}
|
|
_updateFilterBadge();
|
|
_applyFilter();
|
|
});
|
|
});
|
|
|
|
// Restore active filter if re-rendering
|
|
if ((_filterQuery || _filterKinds.size || _filterRunning !== null) && _filterVisible) {
|
|
const bar = container.querySelector('.graph-filter');
|
|
if (bar) {
|
|
bar.classList.add('visible');
|
|
_syncPopoverCheckboxes();
|
|
bar.querySelectorAll('.graph-filter-pill[data-running]').forEach(p => {
|
|
p.classList.toggle('active', _filterRunning !== null && String(_filterRunning) === p.dataset.running);
|
|
});
|
|
}
|
|
_updateFilterBadge();
|
|
_applyFilter(_filterQuery);
|
|
}
|
|
|
|
// Deselect on click on empty space (not after a pan gesture)
|
|
svgEl.addEventListener('click', (e) => {
|
|
_dismissEdgeContextMenu();
|
|
if (_canvas.wasPanning) return;
|
|
if (e.shiftKey) return; // Shift+click reserved for rubber-band
|
|
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');
|
|
container.style.outline = 'none';
|
|
// Focus the container so keyboard shortcuts work immediately
|
|
container.focus();
|
|
// Re-focus when clicking inside the graph
|
|
svgEl.addEventListener('pointerdown', () => container.focus());
|
|
_initialized = true;
|
|
}
|
|
|
|
function _deselect(nodeGroup, edgeGroup) {
|
|
_selectedIds.clear();
|
|
_selectedEdge = null;
|
|
if (nodeGroup) {
|
|
updateSelection(nodeGroup, _selectedIds);
|
|
nodeGroup.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
|
|
}
|
|
if (edgeGroup) clearEdgeHighlights(edgeGroup);
|
|
}
|
|
|
|
function _graphHTML() {
|
|
const mmRect = _loadMinimapRect();
|
|
// Only set size from saved state; position is applied in _initMinimap via anchor logic
|
|
const mmStyle = mmRect?.width ? `width:${mmRect.width}px;height:${mmRect.height}px;` : '';
|
|
return `
|
|
<div class="graph-container">
|
|
<div class="graph-toolbar">
|
|
<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="openCommandPalette()" 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 graph-filter-btn" onclick="toggleGraphFilter()" title="${t('graph.filter')} (F)">
|
|
<svg class="icon" viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
|
|
</button>
|
|
<button class="btn-icon${_legendVisible ? ' active' : ''}" id="graph-legend-toggle" 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${_minimapVisible ? ' active' : ''}" id="graph-minimap-toggle" 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" id="graph-undo-btn" onclick="graphUndo()" title="${t('graph.help.undo') || 'Undo'} (Ctrl+Z)" disabled>
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>
|
|
</button>
|
|
<button class="btn-icon" id="graph-redo-btn" onclick="graphRedo()" title="${t('graph.help.redo') || 'Redo'} (Ctrl+Shift+Z)" disabled>
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></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>
|
|
<button class="btn-icon" onclick="graphToggleFullscreen()" title="${t('graph.fullscreen')} (F11)">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
|
|
</button>
|
|
<span class="graph-toolbar-sep"></span>
|
|
<button class="btn-icon" onclick="graphAddEntity()" title="${t('graph.add_entity')} (+)">
|
|
<svg class="icon" viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
|
|
</button>
|
|
<button class="btn-icon${_helpVisible ? ' active' : ''}" id="graph-help-toggle" onclick="toggleGraphHelp()" title="${t('graph.help_title') || 'Shortcuts'} (?)">
|
|
<svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="graph-legend${_legendVisible ? ' visible' : ''}">
|
|
<div class="graph-legend-header">
|
|
<span class="graph-legend-title">${t('graph.legend')}</span>
|
|
</div>
|
|
<div class="graph-legend-body"></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-filter">
|
|
<div class="graph-filter-row">
|
|
<svg class="graph-filter-icon" viewBox="0 0 24 24" width="16" height="16"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
|
|
<input class="graph-filter-input" placeholder="${t('graph.filter_placeholder')}" autocomplete="off">
|
|
<button class="graph-filter-clear" title="${t('graph.filter_clear')}">×</button>
|
|
</div>
|
|
<div class="graph-filter-row graph-filter-actions">
|
|
<button class="graph-filter-types-btn" onclick="toggleGraphFilterTypes(this)">
|
|
${t('graph.filter_types') || 'Types'} <span class="graph-filter-types-badge"></span>
|
|
</button>
|
|
<button class="graph-filter-pill graph-filter-running" data-running="true" style="--pill-color:var(--success-color)" title="${t('graph.filter_running') || 'Running'}">${t('graph.filter_running') || 'Running'}</button>
|
|
<button class="graph-filter-pill graph-filter-running" data-running="false" style="--pill-color:var(--text-muted)" title="${t('graph.filter_stopped') || 'Stopped'}">${t('graph.filter_stopped') || 'Stopped'}</button>
|
|
</div>
|
|
<div class="graph-filter-types-popover">
|
|
${_buildFilterGroupsHTML()}
|
|
</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>
|
|
<rect class="graph-selection-rect" x="0" y="0" width="0" height="0" style="display:none"/>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>`;
|
|
}
|
|
|
|
/* ── Legend ── */
|
|
|
|
function _renderLegend(legendEl) {
|
|
if (!legendEl) return;
|
|
const body = legendEl.querySelector('.graph-legend-body');
|
|
if (!body) return;
|
|
let html = '';
|
|
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>`;
|
|
}
|
|
body.innerHTML = html;
|
|
}
|
|
|
|
function _initLegendDrag(legendEl) {
|
|
if (!legendEl) return;
|
|
const handle = legendEl.querySelector('.graph-legend-header');
|
|
_makeDraggable(legendEl, handle, { loadFn: _loadLegendPos, saveFn: _saveLegendPos });
|
|
}
|
|
|
|
/* ── 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 = getNodeDisplayColor(node.id, node.kind);
|
|
html += `<rect class="graph-minimap-node" data-id="${node.id}" 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;
|
|
|
|
// Apply saved anchored position or default to bottom-right
|
|
const saved = _loadMinimapRect();
|
|
if (saved?.anchor) {
|
|
if (saved.width) mmEl.style.width = saved.width + 'px';
|
|
if (saved.height) mmEl.style.height = saved.height + 'px';
|
|
_applyAnchor(mmEl, container, saved);
|
|
} else if (!mmEl.style.left || mmEl.style.left === '0px') {
|
|
const cr = container.getBoundingClientRect();
|
|
mmEl.style.width = '200px';
|
|
mmEl.style.height = '130px';
|
|
mmEl.style.left = (cr.width - mmEl.offsetWidth - 12) + 'px';
|
|
mmEl.style.top = (cr.height - mmEl.offsetHeight - 12) + 'px';
|
|
}
|
|
|
|
// Initial viewport update
|
|
if (_canvas) {
|
|
_updateMinimapViewport(mmEl, _canvas.getViewport());
|
|
}
|
|
|
|
// Helper to clamp minimap within container
|
|
function _clampMinimap() {
|
|
_clampElementInContainer(mmEl, container);
|
|
}
|
|
|
|
// ── 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 (uses shared _makeDraggable) ──
|
|
const header = mmEl.querySelector('.graph-minimap-header');
|
|
_makeDraggable(mmEl, header, { loadFn: () => null, saveFn: _saveMinimapRect });
|
|
|
|
// ── 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; if (!_isFullscreen()) _saveAnchored(mmEl, container, _saveMinimapRect); } });
|
|
}
|
|
}
|
|
|
|
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 };
|
|
}
|
|
|
|
/* ── Shared element clamping ── */
|
|
|
|
/** Clamp an absolutely-positioned element within its container. */
|
|
function _clampElementInContainer(el, container) {
|
|
if (!el || !container) return;
|
|
const cr = container.getBoundingClientRect();
|
|
const ew = el.offsetWidth, eh = el.offsetHeight;
|
|
if (!ew || !eh) return;
|
|
let l = el.offsetLeft, t = el.offsetTop;
|
|
const cl = Math.max(0, Math.min(cr.width - ew, l));
|
|
const ct = Math.max(0, Math.min(cr.height - eh, t));
|
|
if (cl !== l || ct !== t) {
|
|
el.style.left = cl + 'px';
|
|
el.style.top = ct + 'px';
|
|
}
|
|
return { left: cl, top: ct };
|
|
}
|
|
|
|
let _resizeObserver = null;
|
|
|
|
function _reanchorPanel(el, container, loadFn) {
|
|
if (!el) return;
|
|
if (_isFullscreen()) {
|
|
_clampElementInContainer(el, container);
|
|
} else {
|
|
const saved = loadFn();
|
|
if (saved?.anchor) {
|
|
_applyAnchor(el, container, saved);
|
|
} else {
|
|
_clampElementInContainer(el, container);
|
|
}
|
|
}
|
|
}
|
|
|
|
function _initResizeClamp(container) {
|
|
if (_resizeObserver) _resizeObserver.disconnect();
|
|
_resizeObserver = new ResizeObserver(() => {
|
|
_reanchorPanel(container.querySelector('.graph-minimap'), container, _loadMinimapRect);
|
|
_reanchorPanel(container.querySelector('.graph-legend.visible'), container, _loadLegendPos);
|
|
_reanchorPanel(container.querySelector('.graph-help-panel.visible'), container, _loadHelpPos);
|
|
// Toolbar uses dock system, not anchor system
|
|
const tb = container.querySelector('.graph-toolbar');
|
|
if (tb) {
|
|
const saved = _loadToolbarPos();
|
|
const dock = saved?.dock || 'tl';
|
|
_applyToolbarDock(tb, container, dock, false);
|
|
}
|
|
});
|
|
_resizeObserver.observe(container);
|
|
}
|
|
|
|
/* ── Toolbar drag ── */
|
|
|
|
let _dockIndicators = null;
|
|
|
|
function _showDockIndicators(container) {
|
|
_hideDockIndicators();
|
|
const cr = container.getBoundingClientRect();
|
|
const m = _TB_MARGIN + 16; // offset from edges
|
|
// 8 dock positions as percentage-based fixed points
|
|
const positions = {
|
|
tl: { x: m, y: m },
|
|
tc: { x: cr.width / 2, y: m },
|
|
tr: { x: cr.width - m, y: m },
|
|
cl: { x: m, y: cr.height / 2 },
|
|
cr: { x: cr.width - m, y: cr.height / 2 },
|
|
bl: { x: m, y: cr.height - m },
|
|
bc: { x: cr.width / 2, y: cr.height - m },
|
|
br: { x: cr.width - m, y: cr.height - m },
|
|
};
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'graph-dock-indicators';
|
|
for (const [key, pos] of Object.entries(positions)) {
|
|
const dot = document.createElement('div');
|
|
dot.className = 'graph-dock-dot';
|
|
dot.dataset.dock = key;
|
|
dot.style.left = pos.x + 'px';
|
|
dot.style.top = pos.y + 'px';
|
|
wrap.appendChild(dot);
|
|
}
|
|
container.appendChild(wrap);
|
|
_dockIndicators = wrap;
|
|
}
|
|
|
|
function _updateDockHighlight(container, tbEl) {
|
|
if (!_dockIndicators) return;
|
|
const nearest = _nearestDock(container, tbEl);
|
|
_dockIndicators.querySelectorAll('.graph-dock-dot').forEach(d => {
|
|
d.classList.toggle('nearest', d.dataset.dock === nearest);
|
|
});
|
|
}
|
|
|
|
function _hideDockIndicators() {
|
|
if (_dockIndicators) { _dockIndicators.remove(); _dockIndicators = null; }
|
|
}
|
|
|
|
function _initToolbarDrag(tbEl) {
|
|
if (!tbEl) return;
|
|
const container = tbEl.closest('.graph-container');
|
|
if (!container) return;
|
|
const handle = tbEl.querySelector('.graph-toolbar-drag');
|
|
if (!handle) return;
|
|
|
|
// Restore saved dock position
|
|
const saved = _loadToolbarPos();
|
|
const dock = saved?.dock || 'tl';
|
|
_applyToolbarDock(tbEl, container, dock, false);
|
|
|
|
let dragStart = null, dragStartPos = null;
|
|
|
|
handle.addEventListener('pointerdown', (e) => {
|
|
e.preventDefault();
|
|
// If vertical, temporarily switch to horizontal for free dragging
|
|
tbEl.classList.remove('vertical');
|
|
requestAnimationFrame(() => {
|
|
dragStart = { x: e.clientX, y: e.clientY };
|
|
dragStartPos = { left: tbEl.offsetLeft, top: tbEl.offsetTop };
|
|
handle.classList.add('dragging');
|
|
handle.setPointerCapture(e.pointerId);
|
|
_showDockIndicators(container);
|
|
});
|
|
});
|
|
handle.addEventListener('pointermove', (e) => {
|
|
if (!dragStart) return;
|
|
const cr = container.getBoundingClientRect();
|
|
const ew = tbEl.offsetWidth, eh = 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 - ew, l));
|
|
t = Math.max(0, Math.min(cr.height - eh, t));
|
|
tbEl.style.left = l + 'px';
|
|
tbEl.style.top = t + 'px';
|
|
_updateDockHighlight(container, tbEl);
|
|
});
|
|
handle.addEventListener('pointerup', () => {
|
|
if (!dragStart) return;
|
|
dragStart = null;
|
|
handle.classList.remove('dragging');
|
|
_hideDockIndicators();
|
|
// Snap to nearest dock position
|
|
const newDock = _nearestDock(container, tbEl);
|
|
_applyToolbarDock(tbEl, container, newDock, true);
|
|
_saveToolbarPos({ dock: newDock });
|
|
});
|
|
}
|
|
|
|
|
|
/* ── Node callbacks ── */
|
|
|
|
function _onNodeClick(node, e) {
|
|
if (_justDragged) return; // suppress click after node drag
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
/** Navigate graph to a node by entity ID — zoom + highlight. */
|
|
export function graphNavigateToNode(entityId) {
|
|
const node = _nodeMap?.get(entityId);
|
|
if (!node || !_canvas) return false;
|
|
_canvas.zoomToPoint(1.5, node.x + node.width / 2, node.y + node.height / 2);
|
|
const nodeGroup = document.querySelector('.graph-nodes');
|
|
if (nodeGroup) { highlightNode(nodeGroup, entityId); setTimeout(() => highlightNode(nodeGroup, null), 3000); }
|
|
const edgeGroup = document.querySelector('.graph-edges');
|
|
if (edgeGroup && _edges) { highlightChain(edgeGroup, entityId, _edges); setTimeout(() => clearEdgeHighlights(edgeGroup), 5000); }
|
|
return true;
|
|
}
|
|
|
|
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: () => window.editSyncClock?.(node.id),
|
|
output_target: () => window.showTargetEditor?.(node.id),
|
|
cspt: () => window.editCSPT?.(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),
|
|
cspt: () => window.deleteCSPT?.(node.id),
|
|
sync_clock: () => window.deleteSyncClock?.(node.id),
|
|
};
|
|
fnMap[node.kind]?.();
|
|
}
|
|
|
|
async function _bulkDeleteSelected() {
|
|
const count = _selectedIds.size;
|
|
if (count < 2) return;
|
|
const ok = await showConfirm(
|
|
(t('graph.bulk_delete_confirm') || 'Delete {count} selected entities?').replace('{count}', String(count))
|
|
);
|
|
if (!ok) return;
|
|
for (const id of _selectedIds) {
|
|
const node = _nodeMap.get(id);
|
|
if (node) _onDeleteNode(node);
|
|
}
|
|
_selectedIds.clear();
|
|
}
|
|
|
|
function _onCloneNode(node) {
|
|
const fnMap = {
|
|
device: () => window.cloneDevice?.(node.id),
|
|
capture_template: () => window.cloneCaptureTemplate?.(node.id),
|
|
pp_template: () => window.clonePPTemplate?.(node.id),
|
|
audio_template: () => window.cloneAudioTemplate?.(node.id),
|
|
pattern_template: () => window.clonePatternTemplate?.(node.id),
|
|
picture_source: () => window.cloneStream?.(node.id),
|
|
audio_source: () => window.cloneAudioSource?.(node.id),
|
|
value_source: () => window.cloneValueSource?.(node.id),
|
|
color_strip_source: () => window.cloneColorStrip?.(node.id),
|
|
output_target: () => window.cloneTarget?.(node.id),
|
|
scene_preset: () => window.cloneScenePreset?.(node.id),
|
|
automation: () => window.cloneAutomation?.(node.id),
|
|
cspt: () => window.cloneCSPT?.(node.id),
|
|
sync_clock: () => window.cloneSyncClock?.(node.id),
|
|
};
|
|
_watchForNewEntity();
|
|
fnMap[node.kind]?.();
|
|
}
|
|
|
|
async function _onActivatePreset(node) {
|
|
if (node.kind !== 'scene_preset') return;
|
|
try {
|
|
const resp = await fetchWithAuth(`/scene-presets/${node.id}/activate`, { method: 'POST' });
|
|
if (resp.ok) {
|
|
showToast(t('scene_preset.activated') || 'Preset activated', 'success');
|
|
setTimeout(() => loadGraphEditor(), 500);
|
|
} else {
|
|
const err = await resp.json().catch(() => ({}));
|
|
showToast(err.detail || 'Activation failed', 'error');
|
|
}
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
}
|
|
}
|
|
|
|
function _onStartStopNode(node) {
|
|
const newRunning = !node.running;
|
|
// Optimistic update — toggle UI immediately
|
|
_updateNodeRunning(node.id, newRunning);
|
|
|
|
if (node.kind === 'output_target') {
|
|
const action = newRunning ? 'start' : 'stop';
|
|
fetchWithAuth(`/output-targets/${node.id}/${action}`, { method: 'POST' }).then(resp => {
|
|
if (resp.ok) {
|
|
showToast(t(action === 'start' ? 'device.started' : 'device.stopped'), 'success');
|
|
} else {
|
|
resp.json().catch(() => ({})).then(err => {
|
|
showToast(err.detail || t(`target.error.${action}_failed`), 'error');
|
|
});
|
|
_updateNodeRunning(node.id, !newRunning); // revert
|
|
}
|
|
}).catch(() => { _updateNodeRunning(node.id, !newRunning); });
|
|
} else if (node.kind === 'sync_clock') {
|
|
const action = newRunning ? 'resume' : 'pause';
|
|
fetchWithAuth(`/sync-clocks/${node.id}/${action}`, { method: 'POST' }).then(resp => {
|
|
if (resp.ok) {
|
|
showToast(t(action === 'pause' ? 'sync_clock.paused' : 'sync_clock.resumed'), 'success');
|
|
} else {
|
|
_updateNodeRunning(node.id, !newRunning); // revert
|
|
}
|
|
}).catch(() => { _updateNodeRunning(node.id, !newRunning); });
|
|
} else if (node.kind === 'automation') {
|
|
fetchWithAuth(`/automations/${node.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ enabled: newRunning }),
|
|
}).then(resp => {
|
|
if (resp.ok) {
|
|
showToast(t(newRunning ? 'automation.enabled' : 'automation.disabled') || (newRunning ? 'Enabled' : 'Disabled'), 'success');
|
|
} else {
|
|
_updateNodeRunning(node.id, !newRunning);
|
|
}
|
|
}).catch(() => { _updateNodeRunning(node.id, !newRunning); });
|
|
}
|
|
}
|
|
|
|
/** Update a node's running state in the model and patch it in-place (no re-render). */
|
|
function _updateNodeRunning(nodeId, running) {
|
|
const node = _nodeMap?.get(nodeId);
|
|
if (!node) return;
|
|
node.running = running;
|
|
const nodeGroup = document.querySelector('.graph-nodes');
|
|
const edgeGroup = document.querySelector('.graph-edges');
|
|
if (nodeGroup) {
|
|
patchNodeRunning(nodeGroup, node);
|
|
}
|
|
// Update flow dots since running set changed
|
|
if (edgeGroup) {
|
|
const runningIds = new Set();
|
|
for (const n of _nodeMap.values()) {
|
|
if (n.running) runningIds.add(n.id);
|
|
}
|
|
renderFlowDots(edgeGroup, _edges, runningIds);
|
|
}
|
|
}
|
|
|
|
function _onTestNode(node) {
|
|
const fnMap = {
|
|
capture_template: () => window.showTestTemplateModal?.(node.id),
|
|
pp_template: () => window.showTestPPTemplateModal?.(node.id),
|
|
audio_template: () => window.showTestAudioTemplateModal?.(node.id),
|
|
picture_source: () => window.showTestStreamModal?.(node.id),
|
|
audio_source: () => window.testAudioSource?.(node.id),
|
|
value_source: () => window.testValueSource?.(node.id),
|
|
color_strip_source: () => window.testColorStrip?.(node.id),
|
|
cspt: () => window.testCSPT?.(node.id),
|
|
output_target: () => window.testKCTarget?.(node.id),
|
|
};
|
|
fnMap[node.kind]?.();
|
|
}
|
|
|
|
function _onNotificationTest(node) {
|
|
if (node.kind === 'color_strip_source' && node.subtype === 'notification') {
|
|
window.testNotification?.(node.id);
|
|
}
|
|
}
|
|
|
|
/* ── Keyboard ── */
|
|
|
|
function _onKeydown(e) {
|
|
// Trap Tab inside the graph to prevent focus escaping to footer
|
|
if (e.key === 'Tab') { e.preventDefault(); return; }
|
|
|
|
// Skip when typing in search input (except Escape/F11)
|
|
const inInput = e.target.matches('input, textarea, select');
|
|
|
|
if (e.key === '/' && !inInput) { e.preventDefault(); window.openCommandPalette?.(); }
|
|
if ((e.key === 'f' || e.key === 'F') && !inInput && !e.ctrlKey && !e.metaKey) { e.preventDefault(); toggleGraphFilter(); }
|
|
if (e.key === 'Escape') {
|
|
if (_filterVisible) { toggleGraphFilter(); }
|
|
else {
|
|
const ng = document.querySelector('.graph-nodes');
|
|
const eg = document.querySelector('.graph-edges');
|
|
_deselect(ng, eg);
|
|
}
|
|
}
|
|
// Delete key → detach selected edge or delete selected node(s)
|
|
if (e.key === 'Delete' && !inInput) {
|
|
if (_selectedEdge) {
|
|
_detachSelectedEdge();
|
|
} else if (_selectedIds.size === 1) {
|
|
const nodeId = [..._selectedIds][0];
|
|
const node = _nodeMap.get(nodeId);
|
|
if (node) _onDeleteNode(node);
|
|
} else if (_selectedIds.size > 1) {
|
|
_bulkDeleteSelected();
|
|
}
|
|
}
|
|
// Ctrl+A → select all
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a' && !inInput) {
|
|
e.preventDefault();
|
|
_selectAll();
|
|
}
|
|
// F11 → fullscreen
|
|
if (e.key === 'F11') {
|
|
e.preventDefault();
|
|
graphToggleFullscreen();
|
|
}
|
|
// + → add entity
|
|
if ((e.key === '+' || (e.key === '=' && !e.ctrlKey && !e.metaKey)) && !inInput) {
|
|
graphAddEntity();
|
|
}
|
|
// ? → keyboard shortcuts help
|
|
if (e.key === '?' && !inInput) {
|
|
e.preventDefault();
|
|
toggleGraphHelp();
|
|
}
|
|
// Ctrl+Z / Ctrl+Shift+Z → undo/redo
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !inInput) {
|
|
e.preventDefault();
|
|
if (e.shiftKey) _redo(); else _undo();
|
|
}
|
|
// Arrow keys / WASD → spatial navigation between nodes
|
|
if (_selectedIds.size <= 1 && !inInput) {
|
|
const dir = _arrowDir(e);
|
|
if (dir) {
|
|
e.preventDefault();
|
|
_navigateDirection(dir);
|
|
}
|
|
}
|
|
}
|
|
|
|
function _arrowDir(e) {
|
|
if (e.ctrlKey || e.metaKey) return null;
|
|
switch (e.key) {
|
|
case 'ArrowLeft': case 'a': case 'A': return 'left';
|
|
case 'ArrowRight': case 'd': case 'D': return 'right';
|
|
case 'ArrowUp': case 'w': case 'W': return 'up';
|
|
case 'ArrowDown': case 's': case 'S': return 'down';
|
|
default: return null;
|
|
}
|
|
}
|
|
|
|
function _navigateDirection(dir) {
|
|
if (!_nodeMap || _nodeMap.size === 0) return;
|
|
|
|
// Get current anchor node
|
|
let anchor = null;
|
|
if (_selectedIds.size === 1) {
|
|
anchor = _nodeMap.get([..._selectedIds][0]);
|
|
}
|
|
if (!anchor) {
|
|
// Select first visible node (topmost-leftmost)
|
|
let best = null;
|
|
for (const n of _nodeMap.values()) {
|
|
if (!best || n.y < best.y || (n.y === best.y && n.x < best.x)) best = n;
|
|
}
|
|
if (best) {
|
|
_selectedIds.clear();
|
|
_selectedIds.add(best.id);
|
|
const ng = document.querySelector('.graph-nodes');
|
|
const eg = document.querySelector('.graph-edges');
|
|
if (ng) updateSelection(ng, _selectedIds);
|
|
if (eg) clearEdgeHighlights(eg);
|
|
if (_canvas) _canvas.panTo(best.x + best.width / 2, best.y + best.height / 2, true);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const cx = anchor.x + anchor.width / 2;
|
|
const cy = anchor.y + anchor.height / 2;
|
|
let bestNode = null;
|
|
let bestDist = Infinity;
|
|
|
|
for (const n of _nodeMap.values()) {
|
|
if (n.id === anchor.id) continue;
|
|
const nx = n.x + n.width / 2;
|
|
const ny = n.y + n.height / 2;
|
|
const dx = nx - cx;
|
|
const dy = ny - cy;
|
|
|
|
// Check direction constraint
|
|
let valid = false;
|
|
if (dir === 'right' && dx > 10) valid = true;
|
|
if (dir === 'left' && dx < -10) valid = true;
|
|
if (dir === 'down' && dy > 10) valid = true;
|
|
if (dir === 'up' && dy < -10) valid = true;
|
|
if (!valid) continue;
|
|
|
|
// Distance with directional bias (favor the primary axis)
|
|
const primaryDist = dir === 'left' || dir === 'right' ? Math.abs(dx) : Math.abs(dy);
|
|
const crossDist = dir === 'left' || dir === 'right' ? Math.abs(dy) : Math.abs(dx);
|
|
const dist = primaryDist + crossDist * 2;
|
|
|
|
if (dist < bestDist) {
|
|
bestDist = dist;
|
|
bestNode = n;
|
|
}
|
|
}
|
|
|
|
if (bestNode) {
|
|
_selectedIds.clear();
|
|
_selectedIds.add(bestNode.id);
|
|
const ng = document.querySelector('.graph-nodes');
|
|
const eg = document.querySelector('.graph-edges');
|
|
if (ng) updateSelection(ng, _selectedIds);
|
|
if (eg && _edges) {
|
|
const chain = highlightChain(eg, bestNode.id, _edges);
|
|
// Dim non-chain nodes like _onNodeClick does
|
|
if (ng) {
|
|
ng.querySelectorAll('.graph-node').forEach(n => {
|
|
n.style.opacity = chain.has(n.getAttribute('data-id')) ? '1' : '0.25';
|
|
});
|
|
}
|
|
}
|
|
if (_canvas) _canvas.panTo(bestNode.x + bestNode.width / 2, bestNode.y + bestNode.height / 2, true);
|
|
}
|
|
}
|
|
|
|
function _selectAll() {
|
|
if (!_nodeMap) return;
|
|
_selectedIds.clear();
|
|
for (const id of _nodeMap.keys()) _selectedIds.add(id);
|
|
const ng = document.querySelector('.graph-nodes');
|
|
if (ng) {
|
|
updateSelection(ng, _selectedIds);
|
|
ng.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
|
|
}
|
|
const eg = document.querySelector('.graph-edges');
|
|
if (eg) clearEdgeHighlights(eg);
|
|
}
|
|
|
|
/* ── Edge click ── */
|
|
|
|
function _onEdgeClick(edgePath, nodeGroup, edgeGroup) {
|
|
const fromId = edgePath.getAttribute('data-from');
|
|
const toId = edgePath.getAttribute('data-to');
|
|
const field = edgePath.getAttribute('data-field') || '';
|
|
|
|
// Track selected edge for Delete key detach
|
|
const toNode = _nodeMap?.get(toId);
|
|
if (toNode && isEditableEdge(field)) {
|
|
_selectedEdge = { from: fromId, to: toId, field, targetKind: toNode.kind };
|
|
} else {
|
|
_selectedEdge = null;
|
|
}
|
|
|
|
_selectedIds.clear();
|
|
_selectedIds.add(fromId);
|
|
_selectedIds.add(toId);
|
|
|
|
if (nodeGroup) {
|
|
updateSelection(nodeGroup, _selectedIds);
|
|
nodeGroup.querySelectorAll('.graph-node').forEach(n => {
|
|
n.style.opacity = _selectedIds.has(n.getAttribute('data-id')) ? '1' : '0.25';
|
|
});
|
|
}
|
|
if (edgeGroup) {
|
|
edgeGroup.querySelectorAll('.graph-edge').forEach(p => {
|
|
const isThis = p === edgePath;
|
|
p.classList.toggle('highlighted', isThis);
|
|
p.classList.toggle('dimmed', !isThis);
|
|
});
|
|
}
|
|
}
|
|
|
|
/* ── Node dragging (supports multi-node) ── */
|
|
|
|
const DRAG_DEAD_ZONE = 4;
|
|
|
|
function _initNodeDrag(nodeGroup, edgeGroup) {
|
|
nodeGroup.addEventListener('pointerdown', (e) => {
|
|
if (e.button !== 0) return;
|
|
const nodeEl = e.target.closest('.graph-node');
|
|
if (!nodeEl) return;
|
|
if (e.target.closest('.graph-node-overlay-btn')) return;
|
|
if (e.target.closest('.graph-port-out')) return; // handled by port drag
|
|
|
|
const nodeId = nodeEl.getAttribute('data-id');
|
|
const node = _nodeMap.get(nodeId);
|
|
if (!node) return;
|
|
|
|
// Multi-node drag: if dragged node is part of a multi-selection
|
|
if (_selectedIds.size > 1 && _selectedIds.has(nodeId)) {
|
|
_dragState = {
|
|
multi: true,
|
|
nodes: [..._selectedIds].map(id => ({
|
|
id,
|
|
el: nodeGroup.querySelector(`.graph-node[data-id="${id}"]`),
|
|
startX: _nodeMap.get(id)?.x || 0,
|
|
startY: _nodeMap.get(id)?.y || 0,
|
|
})).filter(n => n.el),
|
|
startClient: { x: e.clientX, y: e.clientY },
|
|
dragging: false,
|
|
};
|
|
} else {
|
|
_dragState = {
|
|
multi: false,
|
|
nodeId,
|
|
el: nodeEl,
|
|
startClient: { x: e.clientX, y: e.clientY },
|
|
startNode: { x: node.x, y: node.y },
|
|
dragging: false,
|
|
};
|
|
}
|
|
|
|
e.stopPropagation();
|
|
});
|
|
|
|
if (!_dragListenersAdded) {
|
|
window.addEventListener('pointermove', _onDragPointerMove);
|
|
window.addEventListener('pointerup', _onDragPointerUp);
|
|
_dragListenersAdded = true;
|
|
}
|
|
}
|
|
|
|
function _onDragPointerMove(e) {
|
|
if (!_dragState) return;
|
|
|
|
const dx = e.clientX - _dragState.startClient.x;
|
|
const dy = e.clientY - _dragState.startClient.y;
|
|
|
|
if (!_dragState.dragging) {
|
|
if (Math.abs(dx) < DRAG_DEAD_ZONE && Math.abs(dy) < DRAG_DEAD_ZONE) return;
|
|
_dragState.dragging = true;
|
|
if (_canvas) _canvas.blockPan = true;
|
|
if (_dragState.multi) {
|
|
_dragState.nodes.forEach(n => n.el?.classList.add('dragging'));
|
|
} else {
|
|
_dragState.el.classList.add('dragging');
|
|
// Clear chain highlights during single-node drag
|
|
const eg = document.querySelector('.graph-edges');
|
|
if (eg) clearEdgeHighlights(eg);
|
|
const ng = document.querySelector('.graph-nodes');
|
|
if (ng) ng.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
|
|
}
|
|
}
|
|
|
|
if (!_canvas) return;
|
|
const gdx = dx / _canvas.zoom;
|
|
const gdy = dy / _canvas.zoom;
|
|
|
|
const edgeGroup = document.querySelector('.graph-edges');
|
|
|
|
if (_dragState.multi) {
|
|
for (const item of _dragState.nodes) {
|
|
const node = _nodeMap.get(item.id);
|
|
if (!node) continue;
|
|
node.x = item.startX + gdx;
|
|
node.y = item.startY + gdy;
|
|
if (item.el) item.el.setAttribute('transform', `translate(${node.x}, ${node.y})`);
|
|
if (edgeGroup) updateEdgesForNode(edgeGroup, item.id, _nodeMap, _edges);
|
|
_updateMinimapNode(item.id, node);
|
|
}
|
|
if (edgeGroup) updateFlowDotsForNode(edgeGroup, null, _nodeMap, _edges);
|
|
} else {
|
|
const node = _nodeMap.get(_dragState.nodeId);
|
|
if (!node) return;
|
|
node.x = _dragState.startNode.x + gdx;
|
|
node.y = _dragState.startNode.y + gdy;
|
|
_dragState.el.setAttribute('transform', `translate(${node.x}, ${node.y})`);
|
|
if (edgeGroup) {
|
|
updateEdgesForNode(edgeGroup, _dragState.nodeId, _nodeMap, _edges);
|
|
updateFlowDotsForNode(edgeGroup, _dragState.nodeId, _nodeMap, _edges);
|
|
}
|
|
_updateMinimapNode(_dragState.nodeId, node);
|
|
}
|
|
}
|
|
|
|
function _onDragPointerUp() {
|
|
if (!_dragState) return;
|
|
|
|
if (_dragState.dragging) {
|
|
if (_canvas) _canvas.blockPan = false;
|
|
_justDragged = true;
|
|
requestAnimationFrame(() => { _justDragged = false; });
|
|
|
|
if (_dragState.multi) {
|
|
_dragState.nodes.forEach(n => {
|
|
if (n.el) n.el.classList.remove('dragging');
|
|
const node = _nodeMap.get(n.id);
|
|
if (node) _manualPositions.set(n.id, { x: node.x, y: node.y });
|
|
});
|
|
} else {
|
|
_dragState.el.classList.remove('dragging');
|
|
const node = _nodeMap.get(_dragState.nodeId);
|
|
if (node) _manualPositions.set(_dragState.nodeId, { x: node.x, y: node.y });
|
|
}
|
|
|
|
_bounds = _calcBounds(_nodeMap);
|
|
if (_canvas && _bounds) _canvas.setBounds(_bounds);
|
|
|
|
// Re-render flow dots (paths changed)
|
|
const edgeGroup = document.querySelector('.graph-edges');
|
|
if (edgeGroup && _edges && _nodeMap) {
|
|
const runningIds = new Set();
|
|
for (const n of _nodeMap.values()) { if (n.running) runningIds.add(n.id); }
|
|
renderFlowDots(edgeGroup, _edges, runningIds);
|
|
}
|
|
}
|
|
|
|
_dragState = null;
|
|
}
|
|
|
|
/* ── Rubber-band selection (Shift+drag on empty space) ── */
|
|
|
|
function _initRubberBand(svgEl) {
|
|
// Capture-phase: intercept Shift+click on empty space before canvas panning
|
|
svgEl.addEventListener('pointerdown', (e) => {
|
|
if (e.button !== 0 || !e.shiftKey) return;
|
|
if (e.target.closest('.graph-node')) return;
|
|
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
_rubberBand = {
|
|
startGraph: _canvas.screenToGraph(e.clientX, e.clientY),
|
|
startClient: { x: e.clientX, y: e.clientY },
|
|
active: false,
|
|
};
|
|
}, true); // capture phase
|
|
|
|
if (!_rubberBandListenersAdded) {
|
|
window.addEventListener('pointermove', _onRubberBandMove);
|
|
window.addEventListener('pointerup', _onRubberBandUp);
|
|
_rubberBandListenersAdded = true;
|
|
}
|
|
}
|
|
|
|
function _onRubberBandMove(e) {
|
|
if (!_rubberBand || !_canvas) return;
|
|
|
|
if (!_rubberBand.active) {
|
|
const dx = e.clientX - _rubberBand.startClient.x;
|
|
const dy = e.clientY - _rubberBand.startClient.y;
|
|
if (Math.abs(dx) < DRAG_DEAD_ZONE && Math.abs(dy) < DRAG_DEAD_ZONE) return;
|
|
_rubberBand.active = true;
|
|
}
|
|
|
|
const gp = _canvas.screenToGraph(e.clientX, e.clientY);
|
|
const s = _rubberBand.startGraph;
|
|
const x = Math.min(s.x, gp.x), y = Math.min(s.y, gp.y);
|
|
const w = Math.abs(gp.x - s.x), h = Math.abs(gp.y - s.y);
|
|
|
|
const rect = document.querySelector('.graph-selection-rect');
|
|
if (rect) {
|
|
rect.setAttribute('x', x);
|
|
rect.setAttribute('y', y);
|
|
rect.setAttribute('width', w);
|
|
rect.setAttribute('height', h);
|
|
rect.style.display = '';
|
|
}
|
|
}
|
|
|
|
function _onRubberBandUp() {
|
|
if (!_rubberBand) return;
|
|
|
|
const rect = document.querySelector('.graph-selection-rect');
|
|
|
|
if (_rubberBand.active && rect && _nodeMap) {
|
|
const rx = parseFloat(rect.getAttribute('x'));
|
|
const ry = parseFloat(rect.getAttribute('y'));
|
|
const rw = parseFloat(rect.getAttribute('width'));
|
|
const rh = parseFloat(rect.getAttribute('height'));
|
|
|
|
_selectedIds.clear();
|
|
for (const node of _nodeMap.values()) {
|
|
if (node.x + node.width > rx && node.x < rx + rw &&
|
|
node.y + node.height > ry && node.y < ry + rh) {
|
|
_selectedIds.add(node.id);
|
|
}
|
|
}
|
|
|
|
const ng = document.querySelector('.graph-nodes');
|
|
const eg = document.querySelector('.graph-edges');
|
|
if (ng) {
|
|
updateSelection(ng, _selectedIds);
|
|
ng.querySelectorAll('.graph-node').forEach(n => n.style.opacity = '1');
|
|
}
|
|
if (eg) clearEdgeHighlights(eg);
|
|
}
|
|
|
|
if (rect) {
|
|
rect.style.display = 'none';
|
|
rect.setAttribute('width', '0');
|
|
rect.setAttribute('height', '0');
|
|
}
|
|
_rubberBand = null;
|
|
}
|
|
|
|
function _updateMinimapNode(nodeId, node) {
|
|
const mm = document.querySelector('.graph-minimap');
|
|
if (!mm) return;
|
|
const mmNode = mm.querySelector(`rect.graph-minimap-node[data-id="${nodeId}"]`);
|
|
if (mmNode) {
|
|
mmNode.setAttribute('x', node.x);
|
|
mmNode.setAttribute('y', node.y);
|
|
}
|
|
}
|
|
|
|
/* ── Manual position helpers ── */
|
|
|
|
function _applyManualPositions(nodeMap, edges) {
|
|
if (_manualPositions.size === 0) return;
|
|
for (const [id, pos] of _manualPositions) {
|
|
const node = nodeMap.get(id);
|
|
if (node) {
|
|
node.x = pos.x;
|
|
node.y = pos.y;
|
|
}
|
|
}
|
|
// Invalidate ELK edge routing for edges connected to moved nodes
|
|
for (const edge of edges) {
|
|
if (_manualPositions.has(edge.from) || _manualPositions.has(edge.to)) {
|
|
edge.points = null; // forces default bezier
|
|
}
|
|
}
|
|
}
|
|
|
|
function _calcBounds(nodeMap) {
|
|
if (!nodeMap || nodeMap.size === 0) return { x: 0, y: 0, width: 400, height: 300 };
|
|
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
for (const n of nodeMap.values()) {
|
|
minX = Math.min(minX, n.x);
|
|
minY = Math.min(minY, n.y);
|
|
maxX = Math.max(maxX, n.x + n.width);
|
|
maxY = Math.max(maxY, n.y + n.height);
|
|
}
|
|
return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
|
|
}
|
|
|
|
/* ── Port drag (connect/reconnect) ── */
|
|
|
|
const SVG_NS = 'http://www.w3.org/2000/svg';
|
|
|
|
function _initPortDrag(svgEl, nodeGroup, edgeGroup) {
|
|
// Capture-phase on output ports to prevent node drag
|
|
nodeGroup.addEventListener('pointerdown', (e) => {
|
|
const port = e.target.closest('.graph-port-out');
|
|
if (!port || e.button !== 0) return;
|
|
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
const sourceNodeId = port.getAttribute('data-node-id');
|
|
const sourceKind = port.getAttribute('data-node-kind');
|
|
const portType = port.getAttribute('data-port-type');
|
|
const sourceNode = _nodeMap?.get(sourceNodeId);
|
|
if (!sourceNode) return;
|
|
|
|
// Compute start position in graph coords (output port = right side of node)
|
|
const portY = sourceNode.outputPorts?.ports?.[portType] ?? sourceNode.height / 2;
|
|
const startX = sourceNode.x + sourceNode.width;
|
|
const startY = sourceNode.y + portY;
|
|
|
|
// Create temporary drag edge in SVG
|
|
const dragPath = document.createElementNS(SVG_NS, 'path');
|
|
dragPath.setAttribute('class', 'graph-drag-edge');
|
|
dragPath.setAttribute('d', `M ${startX} ${startY} L ${startX} ${startY}`);
|
|
const root = svgEl.querySelector('.graph-root');
|
|
root.appendChild(dragPath);
|
|
|
|
_connectState = { sourceNodeId, sourceKind, portType, startX, startY, dragPath };
|
|
|
|
if (_canvas) _canvas.blockPan = true;
|
|
svgEl.classList.add('connecting');
|
|
|
|
// Highlight compatible input ports
|
|
const compatible = getCompatibleInputs(sourceKind);
|
|
const compatibleSet = new Set(compatible.map(c => `${c.targetKind}:${c.edgeType}`));
|
|
|
|
nodeGroup.querySelectorAll('.graph-port-in').forEach(p => {
|
|
const nKind = p.getAttribute('data-node-kind');
|
|
const pType = p.getAttribute('data-port-type');
|
|
const nId = p.getAttribute('data-node-id');
|
|
// Don't connect to self
|
|
if (nId === sourceNodeId) {
|
|
p.classList.add('graph-port-incompatible');
|
|
return;
|
|
}
|
|
if (compatibleSet.has(`${nKind}:${pType}`)) {
|
|
p.classList.add('graph-port-compatible');
|
|
} else {
|
|
p.classList.add('graph-port-incompatible');
|
|
}
|
|
});
|
|
}, true); // capture phase to beat node drag
|
|
|
|
if (!_connectListenersAdded) {
|
|
window.addEventListener('pointermove', _onConnectPointerMove);
|
|
window.addEventListener('pointerup', _onConnectPointerUp);
|
|
_connectListenersAdded = true;
|
|
}
|
|
}
|
|
|
|
function _onConnectPointerMove(e) {
|
|
if (!_connectState || !_canvas) return;
|
|
|
|
const gp = _canvas.screenToGraph(e.clientX, e.clientY);
|
|
const { startX, startY, dragPath } = _connectState;
|
|
const dx = Math.abs(gp.x - startX) * 0.4;
|
|
dragPath.setAttribute('d',
|
|
`M ${startX} ${startY} C ${startX + dx} ${startY} ${gp.x - dx} ${gp.y} ${gp.x} ${gp.y}`
|
|
);
|
|
|
|
// Highlight drop target port
|
|
const svgEl = document.querySelector('.graph-svg');
|
|
if (!svgEl) return;
|
|
const elem = document.elementFromPoint(e.clientX, e.clientY);
|
|
const port = elem?.closest?.('.graph-port-compatible');
|
|
|
|
svgEl.querySelectorAll('.graph-port-drop-target').forEach(p => p.classList.remove('graph-port-drop-target'));
|
|
if (port) port.classList.add('graph-port-drop-target');
|
|
}
|
|
|
|
function _onConnectPointerUp(e) {
|
|
if (!_connectState) return;
|
|
|
|
const { sourceNodeId, sourceKind, portType, dragPath } = _connectState;
|
|
|
|
// Clean up drag edge
|
|
dragPath.remove();
|
|
const svgEl = document.querySelector('.graph-svg');
|
|
if (svgEl) svgEl.classList.remove('connecting');
|
|
if (_canvas) _canvas.blockPan = false;
|
|
|
|
// Clean up port highlights
|
|
const nodeGroup = document.querySelector('.graph-nodes');
|
|
if (nodeGroup) {
|
|
nodeGroup.querySelectorAll('.graph-port-compatible, .graph-port-incompatible, .graph-port-drop-target').forEach(p => {
|
|
p.classList.remove('graph-port-compatible', 'graph-port-incompatible', 'graph-port-drop-target');
|
|
});
|
|
}
|
|
|
|
// Check if dropped on a compatible input port
|
|
const elem = document.elementFromPoint(e.clientX, e.clientY);
|
|
const targetPort = elem?.closest?.('.graph-port-in');
|
|
if (targetPort) {
|
|
const targetNodeId = targetPort.getAttribute('data-node-id');
|
|
const targetKind = targetPort.getAttribute('data-node-kind');
|
|
const targetPortType = targetPort.getAttribute('data-port-type');
|
|
|
|
if (targetNodeId !== sourceNodeId) {
|
|
// Find the matching connection
|
|
const matches = findConnection(targetKind, sourceKind, targetPortType);
|
|
if (matches.length === 1) {
|
|
_doConnect(targetNodeId, targetKind, matches[0].field, sourceNodeId);
|
|
} else if (matches.length > 1) {
|
|
// Multiple possible fields (e.g., template → picture_source could be capture or pp template)
|
|
// Resolve by source kind
|
|
const exact = matches.find(m => m.sourceKind === sourceKind);
|
|
if (exact) {
|
|
_doConnect(targetNodeId, targetKind, exact.field, sourceNodeId);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
_connectState = null;
|
|
}
|
|
|
|
async function _doConnect(targetId, targetKind, field, sourceId) {
|
|
const ok = await updateConnection(targetId, targetKind, field, sourceId);
|
|
if (ok) {
|
|
showToast(t('graph.connection_updated') || 'Connection updated', 'success');
|
|
await loadGraphEditor();
|
|
} else {
|
|
showToast(t('graph.connection_failed') || 'Failed to update connection', 'error');
|
|
}
|
|
}
|
|
|
|
/* ── Undo / Redo ── */
|
|
|
|
const _undoStack = [];
|
|
const _redoStack = [];
|
|
const _MAX_UNDO = 30;
|
|
|
|
/** Record an undoable action. action = { undo: async fn, redo: async fn, label: string } */
|
|
export function pushUndoAction(action) {
|
|
_undoStack.push(action);
|
|
if (_undoStack.length > _MAX_UNDO) _undoStack.shift();
|
|
_redoStack.length = 0;
|
|
_updateUndoRedoButtons();
|
|
}
|
|
|
|
function _updateUndoRedoButtons() {
|
|
const undoBtn = document.getElementById('graph-undo-btn');
|
|
const redoBtn = document.getElementById('graph-redo-btn');
|
|
if (undoBtn) undoBtn.disabled = _undoStack.length === 0;
|
|
if (redoBtn) redoBtn.disabled = _redoStack.length === 0;
|
|
}
|
|
|
|
export async function graphUndo() { await _undo(); }
|
|
export async function graphRedo() { await _redo(); }
|
|
|
|
async function _undo() {
|
|
if (_undoStack.length === 0) { showToast(t('graph.nothing_to_undo') || 'Nothing to undo', 'info'); return; }
|
|
const action = _undoStack.pop();
|
|
try {
|
|
await action.undo();
|
|
_redoStack.push(action);
|
|
showToast(t('graph.undone') || `Undone: ${action.label}`, 'info');
|
|
_updateUndoRedoButtons();
|
|
await loadGraphEditor();
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
_updateUndoRedoButtons();
|
|
}
|
|
}
|
|
|
|
async function _redo() {
|
|
if (_redoStack.length === 0) { showToast(t('graph.nothing_to_redo') || 'Nothing to redo', 'info'); return; }
|
|
const action = _redoStack.pop();
|
|
try {
|
|
await action.redo();
|
|
_undoStack.push(action);
|
|
showToast(t('graph.redone') || `Redone: ${action.label}`, 'info');
|
|
_updateUndoRedoButtons();
|
|
await loadGraphEditor();
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
_updateUndoRedoButtons();
|
|
}
|
|
}
|
|
|
|
/* ── Keyboard shortcuts help ── */
|
|
|
|
let _helpVisible = false;
|
|
|
|
function _loadHelpPos() {
|
|
try {
|
|
const saved = JSON.parse(localStorage.getItem('graph_help_pos'));
|
|
return saved || { anchor: 'br', offsetX: 12, offsetY: 12 };
|
|
} catch { return { anchor: 'br', offsetX: 12, offsetY: 12 }; }
|
|
}
|
|
function _saveHelpPos(pos) {
|
|
localStorage.setItem('graph_help_pos', JSON.stringify(pos));
|
|
}
|
|
|
|
export function toggleGraphHelp() {
|
|
_helpVisible = !_helpVisible;
|
|
const helpBtn = document.getElementById('graph-help-toggle');
|
|
if (helpBtn) helpBtn.classList.toggle('active', _helpVisible);
|
|
let panel = document.querySelector('.graph-help-panel');
|
|
if (_helpVisible) {
|
|
if (!panel) {
|
|
const container = document.querySelector('#graph-editor-content .graph-container');
|
|
if (!container) return;
|
|
panel = document.createElement('div');
|
|
panel.className = 'graph-help-panel visible';
|
|
panel.innerHTML = `
|
|
<div class="graph-help-header">
|
|
<span>${t('graph.help_title')}</span>
|
|
</div>
|
|
<div class="graph-help-body">
|
|
<div class="graph-help-row"><kbd>/</kbd> <span>${t('graph.help.search')}</span></div>
|
|
<div class="graph-help-row"><kbd>F</kbd> <span>${t('graph.help.filter')}</span></div>
|
|
<div class="graph-help-row"><kbd>+</kbd> <span>${t('graph.help.add')}</span></div>
|
|
<div class="graph-help-row"><kbd>?</kbd> <span>${t('graph.help.shortcuts')}</span></div>
|
|
<div class="graph-help-row"><kbd>Del</kbd> <span>${t('graph.help.delete')}</span></div>
|
|
<div class="graph-help-row"><kbd>Ctrl+A</kbd> <span>${t('graph.help.select_all')}</span></div>
|
|
<div class="graph-help-row"><kbd>Ctrl+Z</kbd> <span>${t('graph.help.undo')}</span></div>
|
|
<div class="graph-help-row"><kbd>Ctrl+Shift+Z</kbd> <span>${t('graph.help.redo')}</span></div>
|
|
<div class="graph-help-row"><kbd>F11</kbd> <span>${t('graph.help.fullscreen')}</span></div>
|
|
<div class="graph-help-row"><kbd>Esc</kbd> <span>${t('graph.help.deselect')}</span></div>
|
|
<div class="graph-help-row"><kbd>\u2190\u2191\u2192\u2193</kbd> <span>${t('graph.help.navigate')}</span></div>
|
|
<div class="graph-help-sep"></div>
|
|
<div class="graph-help-row"><span class="graph-help-mouse">${t('graph.help.click')}</span> <span>${t('graph.help.click_desc')}</span></div>
|
|
<div class="graph-help-row"><span class="graph-help-mouse">${t('graph.help.dblclick')}</span> <span>${t('graph.help.dblclick_desc')}</span></div>
|
|
<div class="graph-help-row"><span class="graph-help-mouse">${t('graph.help.shift_click')}</span> <span>${t('graph.help.shift_click_desc')}</span></div>
|
|
<div class="graph-help-row"><span class="graph-help-mouse">${t('graph.help.shift_drag')}</span> <span>${t('graph.help.shift_drag_desc')}</span></div>
|
|
<div class="graph-help-row"><span class="graph-help-mouse">${t('graph.help.drag_node')}</span> <span>${t('graph.help.drag_node_desc')}</span></div>
|
|
<div class="graph-help-row"><span class="graph-help-mouse">${t('graph.help.drag_port')}</span> <span>${t('graph.help.drag_port_desc')}</span></div>
|
|
<div class="graph-help-row"><span class="graph-help-mouse">${t('graph.help.right_click')}</span> <span>${t('graph.help.right_click_desc')}</span></div>
|
|
</div>`;
|
|
container.appendChild(panel);
|
|
// Make draggable with anchor persistence
|
|
const header = panel.querySelector('.graph-help-header');
|
|
_makeDraggable(panel, header, { loadFn: _loadHelpPos, saveFn: _saveHelpPos });
|
|
} else {
|
|
panel.classList.add('visible');
|
|
}
|
|
} else if (panel) {
|
|
panel.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
/* ── Edge context menu (right-click to detach) ── */
|
|
|
|
function _onEdgeContextMenu(edgePath, e, container) {
|
|
_dismissEdgeContextMenu();
|
|
|
|
const field = edgePath.getAttribute('data-field') || '';
|
|
if (!isEditableEdge(field)) return; // nested fields can't be detached from graph
|
|
|
|
const toId = edgePath.getAttribute('data-to');
|
|
const toNode = _nodeMap?.get(toId);
|
|
if (!toNode) return;
|
|
|
|
const menu = document.createElement('div');
|
|
menu.className = 'graph-edge-menu';
|
|
menu.style.left = `${e.clientX - container.getBoundingClientRect().left}px`;
|
|
menu.style.top = `${e.clientY - container.getBoundingClientRect().top}px`;
|
|
|
|
const btn = document.createElement('button');
|
|
btn.className = 'graph-edge-menu-item danger';
|
|
btn.textContent = t('graph.disconnect') || 'Disconnect';
|
|
btn.addEventListener('click', async () => {
|
|
_dismissEdgeContextMenu();
|
|
const ok = await detachConnection(toId, toNode.kind, field);
|
|
if (ok) {
|
|
showToast(t('graph.connection_removed') || 'Connection removed', 'success');
|
|
await loadGraphEditor();
|
|
} else {
|
|
showToast(t('graph.disconnect_failed') || 'Failed to disconnect', 'error');
|
|
}
|
|
});
|
|
menu.appendChild(btn);
|
|
|
|
container.querySelector('.graph-container').appendChild(menu);
|
|
_edgeContextMenu = menu;
|
|
}
|
|
|
|
function _dismissEdgeContextMenu() {
|
|
if (_edgeContextMenu) {
|
|
_edgeContextMenu.remove();
|
|
_edgeContextMenu = null;
|
|
}
|
|
}
|
|
|
|
async function _detachSelectedEdge() {
|
|
if (!_selectedEdge) return;
|
|
const { to, field, targetKind } = _selectedEdge;
|
|
_selectedEdge = null;
|
|
|
|
const ok = await detachConnection(to, targetKind, field);
|
|
if (ok) {
|
|
showToast(t('graph.connection_removed') || 'Connection removed', 'success');
|
|
await loadGraphEditor();
|
|
} else {
|
|
showToast(t('graph.disconnect_failed') || 'Failed to disconnect', 'error');
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
});
|