@@ -90,12 +90,10 @@ export const Flow = (props: { nodes: FlowNode[]; graph?: Record<string, any> })
9090 ranksep : 32 ,
9191 marginx : 32 ,
9292 marginy : 32 ,
93- // graph: 'tight-tree',
93+ graph : 'tight-tree' ,
9494 } )
9595 . setDefaultEdgeLabel ( ( ) => ( { } ) ) ;
9696
97- console . log ( props . nodes ) ;
98-
9997 const groups = [ ...new Set ( props . nodes . map ( node => node . parent ) ) ] . filter ( Boolean ) ;
10098
10199 for ( const node of props . nodes ) {
@@ -162,8 +160,6 @@ export const Flow = (props: { nodes: FlowNode[]; graph?: Record<string, any> })
162160 ] ;
163161 } , [ nodeSizes , props . nodes , props . graph ] ) ;
164162
165- console . log ( { nodes, edges } ) ;
166-
167163 const findFollowers = useCallback (
168164 ( nodeId : string ) : FlowNode [ ] => {
169165 const node = nodes . find ( node => node . id === nodeId ) ;
@@ -194,46 +190,7 @@ export const Flow = (props: { nodes: FlowNode[]; graph?: Record<string, any> })
194190 return (
195191 < div className = { cn ( 'bg-background size-full' ) } >
196192 < div className = { cn ( 'relative size-full overflow-auto' ) } >
197- < svg
198- className = "absolute left-0 top-0"
199- style = { { width : graphSize . width , height : graphSize . height } }
200- >
201- { edges . map ( edge => {
202- const fromNode = nodes . find ( node => node . id === edge . from ) ;
203- const toNode = nodes . find ( node => node . id === edge . to ) ;
204-
205- if ( ! fromNode || ! toNode ) {
206- return null ;
207- }
208-
209- const isHovered = hoveredNodeId === edge . from ;
210- const isFollowingHoveredNode = hoveredNodeFollowers . some (
211- follower => follower . id === edge . from ,
212- ) ;
213-
214- return (
215- < path
216- key = { edge . from + edge . to }
217- className = { cn ( 'stroke-border fill-none stroke-2 transition-all' , {
218- 'stroke-primary' : isHovered || isFollowingHoveredNode ,
219- } ) }
220- d = { roundedOrthogonalPath (
221- orthogonalPoints (
222- {
223- x : fromNode . x - fromNode . width / 2 ,
224- y : fromNode . y ,
225- } ,
226- {
227- x : toNode . x - toNode . width / 2 ,
228- y : toNode . y ,
229- } ,
230- ) ,
231- 12 ,
232- ) }
233- />
234- ) ;
235- } ) }
236- </ svg >
193+ < div className = "absolute inset-0 h-full w-full bg-[radial-gradient(hsl(var(--border))_1px,transparent_1px)] bg-size-[16px_16px] opacity-50" />
237194 { nodes . map ( node => {
238195 const isHovered = hoveredNodeId === node . id ;
239196 const isFollowingHoveredNode = hoveredNodeFollowers . some (
@@ -254,11 +211,11 @@ export const Flow = (props: { nodes: FlowNode[]; graph?: Record<string, any> })
254211 }
255212 } }
256213 className = { cn (
257- 'bg-card absolute flex w-64 flex-col justify-start gap-2 rounded-lg border p-2 text-sm shadow-sm transition-all' ,
214+ 'bg-card absolute z-20 flex w-64 flex-col justify-start gap-2 rounded-lg border p-2 text-sm shadow-sm transition-all' ,
258215 {
259216 'border-primary shadow-primary/5 shadow-xl' :
260217 ( isHovered || isFollowingHoveredNode ) && ! node . isCluster ,
261- 'pointer-events-none - mt-[10px] w-auto rounded-2xl border-dashed bg-transparent ' :
218+ 'bg-card/50 pointer-events-none z-10 - mt-[10px] w-auto rounded-2xl border-dashed' :
262219 node . isCluster ,
263220 } ,
264221 ) }
@@ -281,7 +238,7 @@ export const Flow = (props: { nodes: FlowNode[]; graph?: Record<string, any> })
281238 { hasFollowers && ! node . isCluster && (
282239 < div
283240 className = { cn (
284- 'border-border bg-background absolute left-full top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-all' ,
241+ 'border-border bg-background absolute top-1/2 left-full size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-all' ,
285242 {
286243 'bg-primary' : isHovered || isFollowingHoveredNode ,
287244 } ,
@@ -291,7 +248,7 @@ export const Flow = (props: { nodes: FlowNode[]; graph?: Record<string, any> })
291248 { hasPrevious && ! node . isCluster && (
292249 < div
293250 className = { cn (
294- 'border-border bg-background absolute left-0 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-all' ,
251+ 'border-border bg-background absolute top-1/2 left-0 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-all' ,
295252 {
296253 'bg-primary' : isFollowingHoveredNode ,
297254 } ,
@@ -301,6 +258,74 @@ export const Flow = (props: { nodes: FlowNode[]; graph?: Record<string, any> })
301258 </ div >
302259 ) ;
303260 } ) }
261+ < svg
262+ className = "pointer-events-none absolute top-0 left-0 z-10"
263+ style = { { width : graphSize . width , height : graphSize . height } }
264+ >
265+ { edges
266+ . sort ( ( a , b ) => {
267+ const isHoveredA = hoveredNodeId === a . from ;
268+ const isHoveredB = hoveredNodeId === b . from ;
269+ const isFollowingHoveredNodeA = hoveredNodeFollowers . some (
270+ follower => follower . id === a . from ,
271+ ) ;
272+ const isFollowingHoveredNodeB = hoveredNodeFollowers . some (
273+ follower => follower . id === b . from ,
274+ ) ;
275+
276+ if (
277+ ( isHoveredA || isFollowingHoveredNodeA ) &&
278+ ( ! isHoveredB || ! isFollowingHoveredNodeB )
279+ ) {
280+ return 1 ;
281+ }
282+
283+ if (
284+ ( ! isHoveredA || ! isFollowingHoveredNodeA ) &&
285+ ( isHoveredB || isFollowingHoveredNodeB )
286+ ) {
287+ return - 1 ;
288+ }
289+
290+ return 0 ;
291+ } )
292+ . filter ( Boolean )
293+ . map ( edge => {
294+ const fromNode = nodes . find ( node => node . id === edge . from ) ;
295+ const toNode = nodes . find ( node => node . id === edge . to ) ;
296+
297+ if ( ! fromNode || ! toNode ) {
298+ return null ;
299+ }
300+
301+ const isHovered = hoveredNodeId === edge . from ;
302+ const isFollowingHoveredNode = hoveredNodeFollowers . some (
303+ follower => follower . id === edge . from ,
304+ ) ;
305+
306+ return (
307+ < path
308+ key = { edge . from + edge . to }
309+ className = { cn ( 'stroke-border fill-none stroke-2 transition-all' , {
310+ 'stroke-primary' : isHovered || isFollowingHoveredNode ,
311+ } ) }
312+ d = { roundedOrthogonalPath (
313+ orthogonalPoints (
314+ {
315+ x : fromNode . x + fromNode . width / 2 ,
316+ y : fromNode . y ,
317+ } ,
318+ {
319+ x : toNode . x - toNode . width / 2 ,
320+ y : toNode . y ,
321+ } ,
322+ ) ,
323+ 4 ,
324+ ) }
325+ />
326+ ) ;
327+ } ) }
328+ </ svg >
304329 </ div >
305330 </ div >
306331 ) ;
0 commit comments