Merge pull request #2906 from wbkd/feat/custom-minimap-nodes

feat: add prop to render custom node inside minimap

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

@@ -5,6 +5,7 @@ import Basic from '../examples/Basic';
 import Backgrounds from '../examples/Backgrounds';
 import ControlledUncontrolled from '../examples/ControlledUncontrolled';
 import CustomConnectionLine from '../examples/CustomConnectionLine';
+import CustomMiniMapNode from '../examples/CustomMiniMapNode';
 import CustomNode from '../examples/CustomNode';
 import DefaultNodes from '../examples/DefaultNodes';
 import DragHandle from '../examples/DragHandle';
@@ -77,6 +78,11 @@ const routes: IRoute[] = [
     path: '/custom-connectionline',
     component: CustomConnectionLine,
   },
+  {
+    name: 'Custom Minimap Node',
+    path: '/custom-minimap-node',
+    component: CustomMiniMapNode,
+  },
   {
     name: 'Custom Node',
     path: '/custom-node',

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

@@ -0,0 +1,74 @@
+import { MouseEvent, CSSProperties, useCallback } from 'react';
+
+import ReactFlow, {
+  addEdge,
+  Background,
+  BackgroundVariant,
+  Connection,
+  Controls,
+  Edge,
+  MiniMap,
+  MiniMapNodeProps,
+  Node,
+  ReactFlowInstance,
+  useEdgesState,
+  useNodesState,
+} from 'reactflow';
+
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+
+const buttonStyle: CSSProperties = {
+  position: 'absolute',
+  left: 10,
+  top: 10,
+  zIndex: 4,
+};
+
+const CustomMiniMapNode = ({ x, y, width, height, color }: MiniMapNodeProps) => (
+  <circle cx={x} cy={y} r={Math.max(width, height) / 2} fill={color} />
+);
+
+const CustomMiniMapNodeFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
+  const addRandomNode = () => {
+    const nodeId = (nodes.length + 1).toString();
+    const newNode: Node = {
+      id: nodeId,
+      data: { label: `Node: ${nodeId}` },
+      position: {
+        x: Math.random() * window.innerWidth,
+        y: Math.random() * window.innerHeight,
+      },
+    };
+    setNodes((nds) => nds.concat(newNode));
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onConnect={(p) => onConnect(p)}
+      onNodeDragStop={onNodeDragStop}
+      onlyRenderVisibleElements={false}
+    >
+      <Controls />
+      <Background variant={BackgroundVariant.Lines} />
+      <MiniMap nodeComponent={CustomMiniMapNode} />
+
+      <button type="button" onClick={addRandomNode} style={buttonStyle}>
+        add node
+      </button>
+    </ReactFlow>
+  );
+};
+
+export default CustomMiniMapNodeFlow;