feat: edge click focus to connected node

Author: AykutSarac

src/features/editor/views/GraphView/CustomEdge/index.tsx

@@ -2,15 +2,32 @@ import React from "react";
 import { useComputedColorScheme } from "@mantine/core";
 import type { EdgeProps } from "reaflow";
 import { Edge } from "reaflow";
+import useGraph from "../stores/useGraph";
 
 const CustomEdgeWrapper = (props: EdgeProps) => {
   const colorScheme = useComputedColorScheme();
+  const viewPort = useGraph(state => state.viewPort);
+  const targetNodeId = props.id.split("-")[props.id.split("-").length - 1];
+  const [hovered, setHovered] = React.useState(false);
+
+  const handeClick = () => {
+    const targetNode = document.querySelector(`[data-id="node-${targetNodeId}"]`) as HTMLElement;
+    if (targetNode && targetNode.parentElement) {
+      viewPort?.camera.centerFitElementIntoView(targetNode.parentElement, {
+        elementExtraMarginForZoom: 150,
+      });
+    }
+  };
 
   return (
     <Edge
       containerClassName={`edge-${props.id}`}
+      onClick={handeClick}
+      onEnter={() => setHovered(true)}
+      onLeave={() => setHovered(false)}
       style={{
         stroke: colorScheme === "dark" ? "#444444" : "#BCBEC0",
+        ...(hovered && { stroke: "#3B82F6" }),
         strokeWidth: 1.5,
       }}
       {...props}

src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx

@@ -29,7 +29,14 @@ const Row = ({ val, x, y, index }: RowProps) => {
 };
 
 const Node = ({ node, x, y }: CustomNodeProps) => (
-  <Styled.StyledForeignObject width={node.width} height={node.height} x={0} y={0} $isObject>
+  <Styled.StyledForeignObject
+    data-id={`node-${node.id}`}
+    width={node.width}
+    height={node.height}
+    x={0}
+    y={0}
+    $isObject
+  >
     {(node.text as Value[]).map((val, idx) => (
       <Row val={val} index={idx} x={x} y={y} key={idx} />
     ))}

src/features/editor/views/GraphView/CustomNode/TextNode.tsx

@@ -79,7 +79,13 @@ const Node = ({ node, x, y, hasCollapse = false }: CustomNodeProps) => {
   }, [childrenCount, type]);
 
   return (
-    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
+    <Styled.StyledForeignObject
+      data-id={`node-${node.id}`}
+      width={width}
+      height={height}
+      x={0}
+      y={0}
+    >
       {isImage ? (
         <StyledImageWrapper>
           <StyledImage src={text as string} width="70" height="70" loading="lazy" />

src/features/editor/views/GraphView/CustomNode/index.tsx

@@ -50,7 +50,7 @@ const CustomNodeWrapper = (nodeProps: NodeProps<NodeData["data"]>) => {
       style={{
         fill: colorScheme === "dark" ? "#292929" : "#ffffff",
         stroke: colorScheme === "dark" ? "#424242" : "#BCBEC0",
-        strokeWidth: 1.5,
+        strokeWidth: 1,
       }}
     >
       {({ node, x, y }) => {