feat(interactive-minimap): add node click handler

examples/vite-app/src/examples/InteractiveMinimap/index.tsx

@@ -118,6 +118,10 @@ const BasicFlow = () => {
     console.log(pos);
   }, []);
 
+  const onMiniMapNodeClick = useCallback((event: MouseEvent, node: Node) => {
+    console.log(node);
+  }, []);
+
   return (
     <ReactFlow
       defaultNodes={initialNodes}
@@ -133,7 +137,7 @@ const BasicFlow = () => {
       fitView
     >
       <Background variant={BackgroundVariant.Dots} />
-      <MiniMap onClick={onMiniMapClick} />
+      <MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} />
       <Controls />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

packages/interactive-minimap/src/MiniMap.tsx

@@ -47,6 +47,7 @@ function MiniMap({
   maskColor = 'rgb(200, 200, 200, 0.9)',
   position = 'bottom-right',
   onClick,
+  onNodeClick,
 }: MiniMapProps) {
   const store = useStoreApi();
   const svg = useRef<SVGSVGElement>(null);
@@ -114,9 +115,20 @@ function MiniMap({
           d3Zoom.transform(d3Selection, nextTransform);
         });
       selection.call(zoomHandler);
+
+      return () => {
+        selection.on('.zoom', null);
+      };
     }
   }, []);
 
+  const onSvgNodeClick = onNodeClick
+    ? (event: MouseEvent, nodeId: string) => {
+        const node = store.getState().nodeInternals.get(nodeId)!;
+        onNodeClick(event, node);
+      }
+    : undefined;
+
   return (
     <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
       <svg
@@ -144,6 +156,8 @@ function MiniMap({
               strokeColor={nodeStrokeColorFunc(node)}
               strokeWidth={nodeStrokeWidth}
               shapeRendering={shapeRendering}
+              onClick={onSvgNodeClick}
+              id={node.id}
             />
           );
         })}

packages/interactive-minimap/src/MiniMapNode.tsx

@@ -1,7 +1,8 @@
-import { memo, CSSProperties } from 'react';
+import { memo, CSSProperties, MouseEvent } from 'react';
 import cc from 'classcat';
 
 interface MiniMapNodeProps {
+  id: string;
   x: number;
   y: number;
   width: number;
@@ -13,9 +14,11 @@ interface MiniMapNodeProps {
   strokeColor: string;
   strokeWidth: number;
   style?: CSSProperties;
+  onClick?: (event: MouseEvent, id: string) => void;
 }
 
 const MiniMapNode = ({
+  id,
   x,
   y,
   width,
@@ -27,6 +30,7 @@ const MiniMapNode = ({
   className,
   borderRadius,
   shapeRendering,
+  onClick,
 }: MiniMapNodeProps) => {
   const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
@@ -44,6 +48,7 @@ const MiniMapNode = ({
       stroke={strokeColor}
       strokeWidth={strokeWidth}
       shapeRendering={shapeRendering}
+      onClick={onClick ? (event) => onClick(event, id) : undefined}
     />
   );
 };

packages/interactive-minimap/src/types.ts

@@ -13,4 +13,5 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
   maskColor?: string;
   position?: PanelPosition;
   onClick?: (event: MouseEvent, position: XYPosition) => void;
+  onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
 };