Highlight connections between selected nodes (#26)

l2beat · Feb 8, 2024 · 2119fa3 · 2119fa3
1 parent ddaa9bf
commit 2119fa3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/frontend/src/view/Connection.tsx b/packages/frontend/src/view/Connection.tsx
@@ -9,9 +9,10 @@ export interface ConnectionProps {
     y: number
     direction: 'left' | 'right'
   }
+  isHighlighted?: boolean
 }
 
-export function Connection({ from, to }: ConnectionProps) {
+export function Connection({ from, to, isHighlighted }: ConnectionProps) {
   const minX = Math.min(from.x, to.x) - 200
   const maxX = Math.max(from.x, to.x) + 200
   const minY = Math.min(from.y, to.y) - 200
@@ -43,18 +44,18 @@ export function Connection({ from, to }: ConnectionProps) {
     to.y,
   ]
 
+  const stroke = isHighlighted
+    ? 'stroke-blue-500 stroke-[3]'
+    : 'stroke-slate-400 stroke-2'
+
   return (
     <svg
       viewBox={`${minX} ${minY} ${width} ${height}`}
       fill="none"
       className="pointer-events-none absolute"
       style={{ left: minX, top: minY, width, height }}
     >
-      <path
-        d={path.join(' ')}
-        strokeLinecap="round"
-        className="stroke-slate-400 stroke-2"
-      />
+      <path d={path.join(' ')} strokeLinecap="round" className={stroke} />
     </svg>
   )
 }
diff --git a/packages/frontend/src/view/Viewport.tsx b/packages/frontend/src/view/Viewport.tsx
@@ -40,6 +40,11 @@ export function Viewport(props: ViewportProps) {
                   key={`${node.simpleNode.id}-${i}-${field.connection.nodeId}`}
                   from={field.connection.from}
                   to={field.connection.to}
+                  // Highlight selected node both ways
+                  isHighlighted={
+                    selectedNodeIds.includes(node.simpleNode.id) ||
+                    selectedNodeIds.includes(field.connection.nodeId)
+                  }
                 />
               ),
           ),