Joren/pwweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: merged duplex nodes get blue border instead of confusing green/red

Browse Source 
- When merge rules combine input+output nodes, mode is set to 'duplex'
- Duplex nodes: blue border (#49a), blue-tinted bg, dark blue header
- Visually distinct from green=output, red=input nodes
This commit is contained in:
joren
2026-03-30 01:14:46 +02:00
parent f76583a33e
commit c586f63e8a
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/GraphCanvas.svelte
View File

@@ -144,9 +144,14 @@
const mergedName = getMergedName(nd.name); const mergedName = getMergedName(nd.name);
const existing = merged.get(mergedName); const existing = merged.get(mergedName);
if (existing) { if (existing) {
// Merge port IDs
existing.port_ids = [...new Set([...existing.port_ids, ...nd.port_ids])]; existing.port_ids = [...new Set([...existing.port_ids, ...nd.port_ids])];
existing.name = mergedName; existing.name = mergedName;
// If merged node has both input and output ports, mark as duplex
const mergedInPorts = existing.port_ids.map(pid => portMap.get(pid)).filter((p): p is Port => !!p && p.mode === 'input');
const mergedOutPorts = existing.port_ids.map(pid => portMap.get(pid)).filter((p): p is Port => !!p && p.mode === 'output');
if (mergedInPorts.length > 0 && mergedOutPorts.length > 0) {
existing.mode = 'duplex';
}
} else { } else {
merged.set(mergedName, { ...nd, name: mergedName }); merged.set(mergedName, { ...nd, name: mergedName });
} }
@@ -573,9 +578,10 @@
{#each graphNodes as nd (nd.id)} {#each graphNodes as nd (nd.id)}
{@const isSource = nd.mode === 'output'} {@const isSource = nd.mode === 'output'}
{@const isSink = nd.mode === 'input'} {@const isSink = nd.mode === 'input'}
{@const bg = isSource ? '#1a2a1a' : isSink ? '#2a1a1a' : '#1e1e2e'} {@const isDuplex = nd.mode === 'duplex'}
{@const border = isSource ? '#4a9' : isSink ? '#a44' : '#555'} {@const bg = isSource ? '#1a2a1a' : isSink ? '#2a1a1a' : isDuplex ? '#1a1a2a' : '#1e1e2e'}
{@const headerBg = isSource ? '#263826' : isSink ? '#382626' : '#262638'} {@const border = isSource ? '#4a9' : isSink ? '#a44' : isDuplex ? '#49a' : '#555'}
{@const headerBg = isSource ? '#263826' : isSink ? '#382626' : isDuplex ? '#262638' : '#262638'}
<g class="node-group" data-node-id={String(nd.id)} filter="url(#shadow)"> <g class="node-group" data-node-id={String(nd.id)} filter="url(#shadow)">
<rect x={nd.x} y={nd.y} width={nd.width} height={nd.height} rx="4" fill={bg} stroke={border} stroke-width="1" /> <rect x={nd.x} y={nd.y} width={nd.width} height={nd.height} rx="4" fill={bg} stroke={border} stroke-width="1" />