diff --git a/src/components/graph/AnimatedEdge.tsx b/src/components/graph/AnimatedEdge.tsx index d782906..de0ae5b 100644 --- a/src/components/graph/AnimatedEdge.tsx +++ b/src/components/graph/AnimatedEdge.tsx @@ -56,7 +56,7 @@ export function AnimatedEdge({ id={startId} markerWidth={DOT_MARKER_R * 2} markerHeight={DOT_MARKER_R * 2} - refX={DOT_MARKER_R + 10} + refX={DOT_MARKER_R - 1} refY={DOT_MARKER_R} orient="auto" > @@ -72,7 +72,7 @@ export function AnimatedEdge({ id={endId} markerWidth={DOT_MARKER_R * 2} markerHeight={DOT_MARKER_R * 2} - refX={DOT_MARKER_R - 10} + refX={DOT_MARKER_R + 1} refY={DOT_MARKER_R} orient="auto" > diff --git a/src/components/graph/RenderingNode.tsx b/src/components/graph/RenderingNode.tsx index 393949f..5484caa 100644 --- a/src/components/graph/RenderingNode.tsx +++ b/src/components/graph/RenderingNode.tsx @@ -1,7 +1,6 @@ import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react' import nunjucks from 'nunjucks' import FlowContext from '../../lib/flowContext' -import { useTheme } from '../../lib/themeContext' import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '../ui/empty' import { BaseNode, @@ -27,49 +26,6 @@ type Props = { style?: React.CSSProperties } -const DARK_SKINPARAMS = ` -skinparam backgroundColor #1e1e1e -skinparam defaultFontColor #e0e0e0 -skinparam shadowing false -skinparam ArrowColor #b0b0b0 -skinparam ArrowFontColor #e0e0e0 -skinparam ActivityBackgroundColor #2d2d2d -skinparam ActivityBorderColor #6b6b6b -skinparam ActivityDiamondBackgroundColor #2d2d2d -skinparam ActivityDiamondBorderColor #6b6b6b -skinparam SequenceParticipantBackgroundColor #2d2d2d -skinparam SequenceParticipantBorderColor #6b6b6b -skinparam SequenceLifeLineBorderColor #6b6b6b -skinparam SequenceBoxBackgroundColor #252525 -skinparam SequenceBoxBorderColor #6b6b6b -skinparam SequenceActorBackgroundColor #2d2d2d -skinparam SequenceActorBorderColor #6b6b6b -skinparam ClassBackgroundColor #2d2d2d -skinparam ClassBorderColor #6b6b6b -skinparam ComponentBackgroundColor #2d2d2d -skinparam ComponentBorderColor #6b6b6b -skinparam StateBackgroundColor #2d2d2d -skinparam StateBorderColor #6b6b6b -skinparam partitionBorderColor #6b6b6b -skinparam sequence { - ArrowColor #b0b0b0 - LifeLineBorderColor #6b6b6b - LifeLineBackgroundColor #2d2d2d - ParticipantBorderColor #6b6b6b - ActorBorderColor #6b6b6b - BoxBorderColor #6b6b6b -} -skinparam activity { - ArrowColor #b0b0b0 - BorderColor #6b6b6b - DiamondBorderColor #6b6b6b -} -skinparam class { - ArrowColor #b0b0b0 - BorderColor #6b6b6b -} -` - export const RenderingNode = memo(function RenderingNode({ id, width, height }: Props) { const [svgContent, setSvgContent] = useState(null) const [error, setError] = useState(null) @@ -77,7 +33,6 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }: const runIdRef = useRef(0) const loadingStartedAtRef = useRef(null) const minLoadingTimeoutRef = useRef | null>(null) - const { theme } = useTheme() const ctx = useContext(FlowContext) const nodes = ctx?.nodes ?? [] @@ -314,13 +269,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }: throw new Error(`Nunjucks: ${nunjucksErr?.message ?? String(nunjucksErr)}`) } - let resolvedPlantuml = afterNunjucks - if (theme === 'dark') { - resolvedPlantuml = resolvedPlantuml.replace( - /^(\s*@startuml\s*\n)/i, - `$1${DARK_SKINPARAMS}\n` - ) - } + const resolvedPlantuml = afterNunjucks const res = await fetch(KROKI_PLANTUML_SVG, { method: 'POST', @@ -369,9 +318,9 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }: minLoadingTimeoutRef.current = null } } - // Only re-run when inputs that affect the resolved diagram change (signatures + source + theme). + // Only re-run when inputs that affect the resolved diagram change (signatures + source). // Do not depend on nodes/edges refs to avoid flicker from unnecessary re-renders. - }, [id, theme, plantumlText, configSignature, edgesSignature, variablesSignature, functionsSignature]) + }, [id, plantumlText, configSignature, edgesSignature, variablesSignature, functionsSignature]) const dimensions = width != null && height != null && width > 0 && height > 0 @@ -479,7 +428,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
Rendering…
) : svgContent ? (
) : null} diff --git a/src/styles.css b/src/styles.css index a9275b8..25f5c9d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -56,6 +56,11 @@ body { pointer-events: none; } +/* Rendering node: diagram is fetched once (light). In dark mode, invert so it stays readable without re-fetching. */ +.dark .rendering-diagram svg { + filter: invert(0.92) hue-rotate(180deg); +} + /* Animated React Flow edges: thicker stroke + path animation */ .react-flow__edge path.animated-edge-path, .animated-edge-path {