refactor(minimap): cleanup

packages/minimap/src/MiniMap.tsx

@@ -13,8 +13,8 @@ import {
 import { injectStyle } from '@react-flow/css-utils';
 
 import MiniMapNode from './MiniMapNode';
-import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 import baseStyle from './style';
+import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
 injectStyle(baseStyle);
 
@@ -23,12 +23,24 @@ declare const window: any;
 const defaultWidth = 200;
 const defaultHeight = 150;
 
-const selector = (s: ReactFlowState) => ({
+const selector = (s: ReactFlowState) => {
-  width: s.width,
+  const nodes = Array.from(s.nodeInternals.values());
-  height: s.height,
+  const viewBB: Rect = {
-  transform: s.transform,
+    x: -s.transform[0] / s.transform[2],
-  nodes: Array.from(s.nodeInternals.values()),
+    y: -s.transform[1] / s.transform[2],
-});
+    width: s.width / s.transform[2],
+    height: s.height / s.transform[2],
+  };
+
+  return {
+    nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
+    viewBB,
+    boundingRect:
+      nodes.length > 0
+        ? getBoundsOfRects(getRectOfNodes(nodes), viewBB)
+        : viewBB,
+  };
+};
 
 const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
   func instanceof Function ? func : () => func;
@@ -47,25 +59,12 @@ function MiniMap({
   position = 'bottom-right',
 }: MiniMapProps) {
   const minimapId = useId();
-  const {
+  const { boundingRect, viewBB, nodes } = useStore(selector, shallow);
-    width: containerWidth,
-    height: containerHeight,
-    transform,
-    nodes,
-  } = useStore(selector, shallow);
   const elementWidth = (style?.width as number) ?? defaultWidth;
   const elementHeight = (style?.height as number) ?? defaultHeight;
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
-  const viewBB: Rect = {
-    x: -transform[0] / transform[2],
-    y: -transform[1] / transform[2],
-    width: containerWidth / transform[2],
-    height: containerHeight / transform[2],
-  };
-  const boundingRect =
-    nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB;
   const scaledWidth = boundingRect.width / elementWidth;
   const scaledHeight = boundingRect.height / elementHeight;
   const viewScale = Math.max(scaledWidth, scaledHeight);
@@ -96,26 +95,24 @@ function MiniMap({
         aria-labelledby={labelledBy}
       >
         <title id={labelledBy}>React Flow mini map</title>
-        {nodes
+        {nodes.map((node) => {
-          .filter((node) => !node.hidden && node.width && node.height)
+          return (
-          .map((node) => {
+            <MiniMapNode
-            return (
+              key={node.id}
-              <MiniMapNode
+              x={node.positionAbsolute?.x ?? 0}
-                key={node.id}
+              y={node.positionAbsolute?.y ?? 0}
-                x={node.positionAbsolute?.x ?? 0}
+              width={node.width!}
-                y={node.positionAbsolute?.y ?? 0}
+              height={node.height!}
-                width={node.width!}
+              style={node.style}
-                height={node.height!}
+              className={nodeClassNameFunc(node)}
-                style={node.style}
+              color={nodeColorFunc(node)}
-                className={nodeClassNameFunc(node)}
+              borderRadius={nodeBorderRadius}
-                color={nodeColorFunc(node)}
+              strokeColor={nodeStrokeColorFunc(node)}
-                borderRadius={nodeBorderRadius}
+              strokeWidth={nodeStrokeWidth}
-                strokeColor={nodeStrokeColorFunc(node)}
+              shapeRendering={shapeRendering}
-                strokeWidth={nodeStrokeWidth}
+            />
-                shapeRendering={shapeRendering}
+          );
-              />
+        })}
-            );
-          })}
         <path
           className="react-flow__minimap-mask"
           d={`M${x - offset},${y - offset}h${width + offset * 2}v${

packages/minimap/src/index.tsx

@@ -1,2 +1,2 @@
-export * from './types';
 export { default as MiniMap } from './MiniMap';
+export * from './types';