Merge pull request #61 from antvis/fix/active-edge-state

fix: edge selection state
antvis · Dec 5, 2022 · af40f73 · af40f73
2 parents 74ee63f + 6ce9b66
commit af40f73
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/packages/gi-assets-basic/src/components/ActivateRelations/ActiveEdge.tsx b/packages/gi-assets-basic/src/components/ActivateRelations/ActiveEdge.tsx
@@ -8,18 +8,20 @@ const ActiveEdge: React.FunctionComponent<ActiveEdgeProps> = props => {
   React.useEffect(() => {
     const handleClick = e => {
       const { item } = e;
+
+      graph.getNodes().forEach(node => {
+        graph.clearItemStates(node);
+      });
+
       graph.getEdges().forEach(edge => {
+        graph.clearItemStates(edge);
+
         const sourceNode = edge.get('sourceNode');
         const targetNode = edge.get('targetNode');
-        if (edge.getID() === item.getID()) {
-          graph.setItemState(edge, 'active', true);
-          graph.setItemState(sourceNode, 'active', true);
-          graph.setItemState(targetNode, 'active', true);
-        } else {
-          graph.setItemState(edge, 'active', false);
-          graph.setItemState(sourceNode, 'active', false);
-          graph.setItemState(targetNode, 'active', false);
-        }
+        const isSelectedEdge = edge.getID() === item.getID();
+        graph.setItemState(edge, 'selected', isSelectedEdge);
+        graph.setItemState(sourceNode, 'active', isSelectedEdge);
+        graph.setItemState(targetNode, 'active', isSelectedEdge);
       });
     };
     graph.on('edge:click', handleClick);