diff --git a/frontend/src/components/Flow/BrainNode.tsx b/frontend/src/components/Flow/BrainNode.tsx index 2f980d3..f9d5d5d 100644 --- a/frontend/src/components/Flow/BrainNode.tsx +++ b/frontend/src/components/Flow/BrainNode.tsx @@ -22,14 +22,22 @@ export type BrainNodeData = { /** * The mark's own proportions, measured off `fluksio-light.svg`: a 1.4545 ring - * and a 0.4848 gap on a 6.303 outer diameter, leaving the disc the 38.5% in - * the middle. + * and a 0.4848 gap on a 6.303 outer diameter, which puts the ring at 0.231 and + * leaves the disc the 38.5% in the middle. + * + * The ring here is drawn a little thinner than the wordmark's, on purpose. The + * mark is read at wordmark size, where 0.231 is one confident stroke; a graph + * of 32px neurons under connections heavier than the mark ever draws reads that + * same stroke as a blob, and thinning it gives the disc room to be a dot. * * Shares rather than fixed widths because the neurons run from 32px to 96px: * the same ring in pixels would swallow the smallest and read as a hairline on * the largest, and it is the proportion that makes a circle look like the mark. + * Rounded where they are applied, though, because the browser snaps a + * fractional border to the device pixels one edge at a time: 7.392px lands as 7 + * on one side and 8 on the other, and the disc sits off centre. */ -const RING = 0.231 +const RING = 0.18 const GAP = 0.077 function BrainNodeComponent({ data }: NodeProps) { @@ -69,8 +77,8 @@ function BrainNodeComponent({ data }: NodeProps) { style={{ width: size, height: size, - borderWidth: size * RING, - boxShadow: `inset 0 0 0 ${size * GAP}px var(--brain-gap)`, + borderWidth: Math.round(size * RING), + boxShadow: `inset 0 0 0 ${Math.round(size * GAP)}px var(--brain-gap)`, }} title={`${label} · ${kind} · ${members.join(", ")}${issue ? ` · ${issue}` : ""}`} > diff --git a/frontend/src/components/Flow/flow.css b/frontend/src/components/Flow/flow.css index 283ff44..00c5e53 100644 --- a/frontend/src/components/Flow/flow.css +++ b/frontend/src/components/Flow/flow.css @@ -20,6 +20,11 @@ ); --xy-edge-stroke-selected: var(--primary); --xy-edge-stroke-width: 1.5; + /* + * What a pulse widens to on its way in; the width above is where it settles + * back. Per canvas, because the brain draws its connections heavier. + */ + --edge-pulse-width: 2.5; --xy-handle-background-color: var(--card); --xy-handle-border-color: var(--muted-foreground); --xy-selection-background-color: color-mix( @@ -59,7 +64,7 @@ @keyframes edge-pulse { from { stroke: var(--primary); - stroke-width: 2.5; + stroke-width: var(--edge-pulse-width); } to { stroke: var(--edge-rest); @@ -137,8 +142,13 @@ .react-flow.brain-flat { --xy-background-color: transparent; --brain-decay: 90s; - /* Thicker than the editor's, to match the weight the mark draws them at. */ - --xy-edge-stroke-width: 2; + /* + * Thicker than the editor's, to match the weight the mark draws them at — and + * the pulse widens with it, or a message would leave its edge looking thinner + * than it rests. + */ + --xy-edge-stroke-width: 3; + --edge-pulse-width: 4; --xy-background-pattern-dots-color: color-mix( in srgb, var(--muted-foreground) 22%, @@ -296,7 +306,7 @@ .brain-dot { fill: var(--card); stroke: var(--brain-ink); - stroke-width: 1.5; + stroke-width: 2; } .brain-dot.brain-dot-out {