@@ -11,7 +11,8 @@ import ReactFlow, {
11
11
NodeChange ,
12
12
OnConnectStartParams ,
13
13
addEdge ,
14
- EdgeChange
14
+ EdgeChange ,
15
+ Edge
15
16
} from 'reactflow' ;
16
17
import { Box , Flex , IconButton , useDisclosure } from '@chakra-ui/react' ;
17
18
import { SmallCloseIcon } from '@chakra-ui/icons' ;
@@ -74,13 +75,16 @@ const Container = React.memo(function Container() {
74
75
} ) ;
75
76
76
77
const { isDowningCtrl } = useKeyboard ( ) ;
77
- const setConnectingEdge = useContextSelector ( WorkflowContext , ( v ) => v . setConnectingEdge ) ;
78
- const reactFlowWrapper = useContextSelector ( WorkflowContext , ( v ) => v . reactFlowWrapper ) ;
79
- const nodes = useContextSelector ( WorkflowContext , ( v ) => v . nodes ) ;
80
- const onNodesChange = useContextSelector ( WorkflowContext , ( v ) => v . onNodesChange ) ;
81
- const edges = useContextSelector ( WorkflowContext , ( v ) => v . edges ) ;
82
- const setEdges = useContextSelector ( WorkflowContext , ( v ) => v . setEdges ) ;
83
- const onEdgesChange = useContextSelector ( WorkflowContext , ( v ) => v . onEdgesChange ) ;
78
+ const {
79
+ setConnectingEdge,
80
+ reactFlowWrapper,
81
+ nodes,
82
+ onNodesChange,
83
+ edges,
84
+ setEdges,
85
+ onEdgesChange,
86
+ setHoverEdgeId
87
+ } = useContextSelector ( WorkflowContext , ( v ) => v ) ;
84
88
85
89
/* node */
86
90
const handleNodesChange = useCallback (
@@ -159,6 +163,17 @@ const Container = React.memo(function Container() {
159
163
[ onConnect , t , toast ]
160
164
) ;
161
165
166
+ /* edge */
167
+ const onEdgeMouseEnter = useCallback (
168
+ ( e : any , edge : Edge ) => {
169
+ setHoverEdgeId ( edge . id ) ;
170
+ } ,
171
+ [ setHoverEdgeId ]
172
+ ) ;
173
+ const onEdgeMouseLeave = useCallback ( ( ) => {
174
+ setHoverEdgeId ( undefined ) ;
175
+ } , [ setHoverEdgeId ] ) ;
176
+
162
177
return (
163
178
< >
164
179
< ReactFlow
@@ -178,6 +193,8 @@ const Container = React.memo(function Container() {
178
193
onConnect = { customOnConnect }
179
194
onConnectStart = { onConnectStart }
180
195
onConnectEnd = { onConnectEnd }
196
+ onEdgeMouseEnter = { onEdgeMouseEnter }
197
+ onEdgeMouseLeave = { onEdgeMouseLeave }
181
198
>
182
199
< FlowController />
183
200
</ ReactFlow >
0 commit comments