Update getInternalNodesBounds and examples

examples/react/src/examples/CustomMiniMapNode/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, CSSProperties, useCallback } from 'react';
+import { MouseEvent, CSSProperties, useCallback, useState } from 'react';
 
 import {
   ReactFlow,
@@ -14,19 +14,13 @@ import {
   ReactFlowInstance,
   useEdgesState,
   useNodesState,
+  Panel,
 } from '@xyflow/react';
 
 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 }: MiniMapNodeProps) => {
   return <circle cx={x} cy={y} r={Math.max(width, height) / 2} fill="#ffcc00" />;
 };
@@ -34,6 +28,7 @@ const CustomMiniMapNode = ({ x, y, width, height }: MiniMapNodeProps) => {
 const CustomMiniMapNodeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const [hideAllNodes, setHideAllNodes] = useState(false);
 
   const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const addRandomNode = () => {
@@ -45,10 +40,17 @@ const CustomMiniMapNodeFlow = () => {
         x: Math.random() * window.innerWidth,
         y: Math.random() * window.innerHeight,
       },
+      hidden: hideAllNodes,
     };
     setNodes((nds) => nds.concat(newNode));
   };
 
+  const toggleHideAllNodes = () => {
+    setHideAllNodes(!hideAllNodes);
+    setNodes((nds) => nds.map((n) => ({ ...n, hidden: hideAllNodes })));
+    setEdges((eds) => eds.map((e) => ({ ...e, hidden: hideAllNodes })));
+  };
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -65,9 +67,14 @@ const CustomMiniMapNodeFlow = () => {
       <Background variant={BackgroundVariant.Lines} />
       <MiniMap nodeComponent={CustomMiniMapNode} />
 
-      <button type="button" onClick={addRandomNode} style={buttonStyle}>
-        add node
-      </button>
+      <Panel position="top-left">
+        <button type="button" onClick={addRandomNode}>
+          add node
+        </button>
+        <button type="button" onClick={toggleHideAllNodes}>
+          {hideAllNodes ? 'show all nodes' : 'hide all nodes'}
+        </button>
+      </Panel>
     </ReactFlow>
   );
 };

examples/svelte/src/components/Header/Header.svelte

@@ -17,6 +17,7 @@
 		'handle-connect',
 		'interaction',
 		'intersections',
+		'minimap-bug',
 		'node-toolbar',
 		'node-resizer',
 		'overview',

examples/svelte/src/routes/examples/custom-minimap/+page.svelte

@@ -4,15 +4,17 @@
 		Background,
 		Controls,
 		MiniMap,
+		Panel,
 		type Node,
-		type Edge,
+		type Edge
 	} from '@xyflow/svelte';
-	
+
 	import '@xyflow/svelte/dist/style.css';
 	import CustomMiniMapNode from './CustomMiniMapNode.svelte';
 
 	let nodes = $state.raw<Node[]>([]);
 	let edges = $state.raw<Edge[]>([]);
+	let hideAllNodes = $state(false);
 
 	function addRandomNode() {
 		const nodeId = (nodes.length + 1).toString();
@@ -21,28 +23,33 @@
 			data: { label: `Node: ${nodeId}` },
 			position: {
 				x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 800),
-				y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 600),
+				y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 600)
 			},
-			type: 'default'
+			type: 'default',
+			hidden: hideAllNodes
 		};
 		nodes = [...nodes, newNode];
 	}
+
+	function toggleHideAllNodes() {
+		hideAllNodes = !hideAllNodes;
+		nodes = nodes.map((node) => ({
+			...node,
+			hidden: hideAllNodes
+		}));
+	}
 </script>
 
-<SvelteFlow
-	bind:nodes
-	bind:edges
-	onlyRenderVisibleElements={true}
->
+<SvelteFlow bind:nodes bind:edges onlyRenderVisibleElements={true}>
 	<Controls />
 	<Background />
 	<MiniMap nodeComponent={CustomMiniMapNode} />
 
-	<button 
-		type="button" 
-		onclick={addRandomNode}
-		style="position: absolute; left: 10px; top: 10px; z-index: 4;"
-	>
-		add node
-	</button>
+	<Panel position="top-left">
+		<button type="button" onclick={addRandomNode}> add node </button>
+
+		<button type="button" onclick={toggleHideAllNodes}>
+			{hideAllNodes ? 'show all nodes' : 'hide all nodes'}
+		</button>
+	</Panel>
 </SvelteFlow>