Skip to content

Commit

Permalink
fix: Remove the highlight on Edge hover to prevent performance degrad…
Browse files Browse the repository at this point in the history
…ation
  • Loading branch information
MH4GF committed Dec 16, 2024
1 parent 30033e7 commit 1ba3f4a
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 21 deletions.
6 changes: 6 additions & 0 deletions frontend/.changeset/violet-chicken-mate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@liam-hq/erd-core": patch
"@liam-hq/cli": patch
---

fix: Removed the highlight on Edge hover to prevent performance degradation
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,11 @@ import {
Background,
BackgroundVariant,
type Edge,
type EdgeMouseHandler,
type Node,
type NodeMouseHandler,
ReactFlow,
useEdgesState,
useNodesState,
useReactFlow,
} from '@xyflow/react'
import { type FC, useCallback, useEffect } from 'react'
import styles from './ERDContent.module.css'
Expand Down Expand Up @@ -63,7 +61,6 @@ export const ERDContent: FC<Props> = ({
const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
const { relationships } = useDBStructureStore()
const { updateEdgeData, updateEdge } = useReactFlow()

useEffect(() => {
setNodes(_nodes)
Expand Down Expand Up @@ -156,22 +153,6 @@ export const ERDContent: FC<Props> = ({
[edges, nodes, setNodes, setEdges, relationships],
)

const handleMouseEnterEdge: EdgeMouseHandler<Edge> = useCallback(
(_, { id }) => {
updateEdge(id, { animated: true })
updateEdgeData(id, { isHighlighted: true })
},
[updateEdge, updateEdgeData],
)

const handleMouseLeaveEdge: EdgeMouseHandler<Edge> = useCallback(
(_, { id }) => {
updateEdge(id, { animated: false })
updateEdgeData(id, { isHighlighted: false })
},
[updateEdge, updateEdgeData],
)

const panOnDrag = [1, 2]

return (
Expand All @@ -187,8 +168,6 @@ export const ERDContent: FC<Props> = ({
onEdgesChange={onEdgesChange}
onNodeMouseEnter={handleMouseEnterNode}
onNodeMouseLeave={handleMouseLeaveNode}
onEdgeMouseEnter={handleMouseEnterEdge}
onEdgeMouseLeave={handleMouseLeaveEdge}
panOnScroll
panOnDrag={panOnDrag}
selectionOnDrag
Expand Down

0 comments on commit 1ba3f4a

Please sign in to comment.