diff --git a/components/canvas/CLAUDE.md b/components/canvas/CLAUDE.md index 5e7b444..f882a2d 100644 --- a/components/canvas/CLAUDE.md +++ b/components/canvas/CLAUDE.md @@ -109,6 +109,8 @@ Jede Edge bekommt einen `drop-shadow`-Filter entsprechend dem Quell-Node-Typ. Fa Compare-Node hat zusätzlich Handle-spezifische Farben (`left` → Blau, `right` → Smaragd). +Im **Light Mode** wird der eigentliche Edge-`stroke` ebenfalls aus dieser Akzentfarbe abgeleitet und mit **50% Transparenz** gerendert (`rgba(..., 0.5)`), damit Linie und Glow farblich konsistent bleiben. + --- ## Optimistic Updates & Local Persistence diff --git a/lib/canvas-utils.ts b/lib/canvas-utils.ts index 512a526..27d5efb 100644 --- a/lib/canvas-utils.ts +++ b/lib/canvas-utils.ts @@ -153,6 +153,17 @@ function sourceGlowFilterForNodeType( return `drop-shadow(0 0 3px rgba(${r},${g},${b},0.42)) drop-shadow(0 0 7px rgba(${r},${g},${b},0.2))`; } +function sourceEdgeStrokeForNodeType( + type: string | undefined, + colorMode: EdgeGlowColorMode, +): string | undefined { + if (colorMode !== "light" || !type) return undefined; + const rgb = SOURCE_NODE_GLOW_RGB[type]; + if (!rgb) return undefined; + const [r, g, b] = rgb; + return `rgba(${r}, ${g}, ${b}, 0.5)`; +} + /** Wie convexEdgeToRF, setzt zusätzlich filter am Pfad nach Quell-Node-Typ. */ export function convexEdgeToRFWithSourceGlow( edge: Doc<"edges">, @@ -161,10 +172,16 @@ export function convexEdgeToRFWithSourceGlow( ): RFEdge { const base = convexEdgeToRF(edge); const filter = sourceGlowFilterForNodeType(sourceNodeType, colorMode); - if (!filter) return base; + const stroke = sourceEdgeStrokeForNodeType(sourceNodeType, colorMode); + if (!filter && !stroke) return base; + + const style: NonNullable = { ...(base.style ?? {}) }; + if (filter) style.filter = filter; + if (stroke) style.stroke = stroke; + return { ...base, - style: { ...(base.style ?? {}), filter }, + style, }; }