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

Render canvas connections above flow

Browse Source
This commit is contained in:
Codex
2026-05-11 22:25:32 +08:00
parent eb7e5fd97e
commit 46cca0d4e1
1 changed files with 70 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1075,79 +1075,81 @@ function FlowCanvasInner({
}, [maxZoom, minZoom, onReady]);
return (
<ReactFlow
className="canvas-flow"
nodes={flowNodes}
edges={visibleEdges}
nodeTypes={CANVAS_NODE_TYPES}
minZoom={minZoom}
maxZoom={maxZoom}
snapToGrid
snapGrid={SNAP_GRID}
defaultViewport={viewport}
zoomOnScroll
zoomOnPinch
panOnScroll={false}
panOnDrag={[0, 1]}
selectionOnDrag={false}
multiSelectionKeyCode={MULTI_SELECTION_KEYS}
deleteKeyCode={null}
zoomOnDoubleClick={false}
nodesDraggable={editable}
nodesConnectable={editable}
nodesFocusable={false}
edgesFocusable={false}
connectionLineType={ConnectionLineType.SmoothStep}
fitViewOptions={FLOW_FIT_VIEW_OPTIONS}
onNodesChange={handleNodesChange}
onEdgesChange={handleEdgesChange}
onConnect={handleConnect}
onNodeDragStart={handleNodeDragStart}
onNodeDragStop={handleNodeDragStop}
onMoveStart={handleMoveStart}
onMoveEnd={handleMoveEnd}
onPaneClick={handlePaneReactFlowClick}
onSelectionChange={handleSelectionChange}
onInit={handleInit}
>
<Background gap={20} size={1.15} color={dotColor} />
<Background gap={100} size={1.8} color={dotAccentColor} />
<div className="relative h-full w-full">
<ReactFlow
className="canvas-flow h-full w-full"
nodes={flowNodes}
edges={visibleEdges}
nodeTypes={CANVAS_NODE_TYPES}
minZoom={minZoom}
maxZoom={maxZoom}
snapToGrid
snapGrid={SNAP_GRID}
defaultViewport={viewport}
zoomOnScroll
zoomOnPinch
panOnScroll={false}
panOnDrag={[0, 1]}
selectionOnDrag={false}
multiSelectionKeyCode={MULTI_SELECTION_KEYS}
deleteKeyCode={null}
zoomOnDoubleClick={false}
nodesDraggable={editable}
nodesConnectable={editable}
nodesFocusable={false}
edgesFocusable={false}
connectionLineType={ConnectionLineType.SmoothStep}
fitViewOptions={FLOW_FIT_VIEW_OPTIONS}
onNodesChange={handleNodesChange}
onEdgesChange={handleEdgesChange}
onConnect={handleConnect}
onNodeDragStart={handleNodeDragStart}
onNodeDragStop={handleNodeDragStop}
onMoveStart={handleMoveStart}
onMoveEnd={handleMoveEnd}
onPaneClick={handlePaneReactFlowClick}
onSelectionChange={handleSelectionChange}
onInit={handleInit}
>
<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"
pannable
zoomable
nodeColor={getMiniMapNodeColor}
maskColor="hsl(var(--background) / 0.58)"
/>
</ReactFlow>
<CanvasConnectionOverlay
nodes={nodes}
connections={connections}
edgeStroke={edgeStroke}
edgeZIndex={edgeZIndex}
edgeZIndex={50}
/>
<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"
pannable
zoomable
nodeColor={getMiniMapNodeColor}
maskColor="hsl(var(--background) / 0.58)"
/>
</ReactFlow>
</div>
);
}