fenglee/miaojingAI
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make canvas connections visible

Browse Source
This commit is contained in:
Codex
2026-05-11 22:06:42 +08:00
parent 73134516a9
commit 9def9d8664
1 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/canvas/react-flow-canvas.tsx
View File

@@ -99,6 +99,7 @@ const SNAP_GRID: [number, number] = [20, 20];
const MULTI_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
const FLOW_FIT_VIEW_OPTIONS = { padding: 0.2 };
const CANVAS_NODE_TYPES = { canvasNode: CanvasNodeCard };
const CANVAS_EDGE_CLASS_NAME = 'canvas-flow-edge';
const NODE_TYPE_META: Record<CanvasNode['type'], { label: string; accent: string; bg: string }> = {
text: { label: 'TEXT', accent: '#2563eb', bg: 'rgba(37, 99, 235, 0.1)' },
image: { label: 'ASSET', accent: '#2563eb', bg: 'rgba(37, 99, 235, 0.1)' },
@@ -763,6 +764,7 @@ function FlowCanvasInner({
const edgeStroke = isDarkTheme ? 'rgb(255 255 255 / 0.72)' : 'hsl(var(--foreground) / 0.62)';
const dotColor = isDarkTheme ? 'rgb(255 255 255 / 0.42)' : 'hsl(var(--foreground) / 0.16)';
const dotAccentColor = isDarkTheme ? 'rgb(255 255 255 / 0.24)' : 'hsl(var(--primary) / 0.28)';
const edgeZIndex = useMemo(() => Math.max(1, ...nodes.map(node => node.zIndex)) + 20, [nodes]);
const incomingNodes = useMemo<CanvasFlowNode[]>(() => nodes.map(node => ({
id: node.id,
@@ -813,12 +815,14 @@ function FlowCanvasInner({
targetHandle: 'input',
type: 'smoothstep',
markerEnd: { type: MarkerType.ArrowClosed, color: edgeStroke },
className: CANVAS_EDGE_CLASS_NAME,
zIndex: edgeZIndex,
style: {
stroke: edgeStroke,
strokeWidth: 3,
},
interactionWidth: 24,
})), [connections, edgeStroke]);
})), [connections, edgeStroke, edgeZIndex]);
const visibleEdges = useMemo(() => {
const realIds = new Set(flowEdges.map(edge => edge.id));
return [...flowEdges, ...localEdges.filter(edge => !realIds.has(edge.id))];
@@ -913,12 +917,14 @@ function FlowCanvasInner({
targetHandle: connection.targetHandle || 'input',
type: 'smoothstep',
markerEnd: { type: MarkerType.ArrowClosed, color: edgeStroke },
className: CANVAS_EDGE_CLASS_NAME,
zIndex: edgeZIndex,
style: { stroke: edgeStroke, strokeWidth: 3 },
interactionWidth: 24,
},
]);
onConnect(connection.source, connection.target);
}, [edgeStroke, onConnect]);
}, [edgeStroke, edgeZIndex, onConnect]);
const handleMoveEnd = useCallback((_event: MouseEvent | TouchEvent | null, nextViewport: FlowViewport) => {
if (!movingRef.current) return;
@@ -1014,6 +1020,27 @@ function FlowCanvasInner({
>
<Background gap={20} size={1.15} color={dotColor} />
<Background gap={100} size={1.8} color={dotAccentColor} />
<style jsx global>{`
.canvas-flow .react-flow__edges {
z-index: ${edgeZIndex};
}
.canvas-flow .canvas-flow-edge .react-flow__edge-path {
stroke: ${edgeStroke};
stroke-width: 3px;
opacity: 1;
}
.canvas-flow .canvas-flow-edge .react-flow__edge-interaction {
stroke-width: 24px;
}
.canvas-flow .react-flow__connection-path {
stroke: ${edgeStroke};
stroke-width: 3px;
opacity: 1;
}
`}</style>
<Controls showInteractive={false} position="bottom-left" />
<MiniMap
position="bottom-right"