Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Brain: dots where a connection meets a neuron, inbound hollow and outbound filled

Browse Source 
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XC2jX6Hdj7pxGGKzBTrbqB
This commit is contained in:
stroblme
2026-08-17 12:52:31 +02:00
co-authored by Claude Opus 5
parent 02d841e10c
commit 1a589570b1
4 changed files with 111 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Flow/flow.css
+45 -11
View File
@@ -114,8 +114,10 @@
}
/*
* Brain graph. Both ends of a connection sit at the neuron's centre, which is
* what `BrainEdge` measures its rim trim and its arrowhead from.
* Brain graph. A neuron meets its connections all round its rim, so these two
* handles are only there to make React Flow treat the node as wired at all —
* where a connection actually lands is `BrainEdge`'s own geometry, measured
* from the centre they sit at.
*/
.brain-handle {
opacity: 0;
@@ -213,24 +215,56 @@
visibility: visible;
}
/* The same falloff as the neurons, on the line instead of the disc. */
/*
* The same falloff as the neurons, on the connection instead of the disc. It
* carries the line and its two end dots alike, so the ink is a variable on the
* group they share rather than a stroke on each.
*/
.brain-wire {
--brain-ink: color-mix(in srgb, var(--muted-foreground) 38%, transparent);
}
.brain-wire.brain-idle {
--brain-ink: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
}
/* Snapped into, decayed out of — never the other way round. */
.brain-wire.brain-hot {
--brain-ink: color-mix(in srgb, var(--muted-foreground) 85%, transparent);
}
.react-flow__edge-path.brain-edge {
stroke: color-mix(in srgb, var(--muted-foreground) 38%, transparent);
stroke: var(--brain-ink);
stroke-linecap: round;
stroke-linejoin: round;
}
.react-flow__edge-path.brain-edge.brain-idle {
stroke: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
/*
* Where a connection meets a neuron: a flow node's port, sat on the rim the same
* way, but told apart by direction — filled at the end the value leaves, hollow
* at the end it arrives. The hollow one takes the surface the band sits flat on,
* so it reads as a hole rather than as a disc of its own.
*/
.brain-dot {
fill: var(--card);
stroke: var(--brain-ink);
stroke-width: 1.5;
}
.react-flow__edge-path.brain-edge.brain-hot {
stroke: color-mix(in srgb, var(--muted-foreground) 85%, transparent);
transition: none;
.brain-dot.brain-dot-out {
fill: var(--brain-ink);
}
@media (prefers-reduced-motion: no-preference) {
.react-flow__edge-path.brain-edge {
transition: stroke var(--brain-decay) linear;
.react-flow__edge-path.brain-edge,
.brain-dot {
transition:
stroke var(--brain-decay) linear,
fill var(--brain-decay) linear;
}
.brain-wire.brain-hot .react-flow__edge-path.brain-edge,
.brain-wire.brain-hot .brain-dot {
transition: none;
}
}