refactor(background): move background to own package, replace example import

examples/nextjs/package.json

@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
+    "@react-flow/background": "11.0.0",
     "@react-flow/core": "11.0.0",
     "@react-flow/minimap": "11.0.0",
     "dagre": "^0.8.5",
+    "localforage": "^1.10.0",
     "next": "12.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/nextjs/pages/ControlledUncontrolled/index.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 
 import ReactFlow, {
   useReactFlow,
-  Background,
-  BackgroundVariant,
   Node,
   Edge,
   ReactFlowProvider,
@@ -11,6 +9,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 const defaultNodes: Node[] = [
   {
     id: '1',

examples/nextjs/pages/CustomConnectionLine/index.tsx

@@ -2,14 +2,14 @@ import React, { useCallback } from 'react';
 import ReactFlow, {
   Node,
   addEdge,
-  Background,
-  BackgroundVariant,
   Connection,
   Edge,
   useNodesState,
   useEdgesState,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 import ConnectionLine from './ConnectionLine';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/DefaultNodes/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import ReactFlow, {
   useReactFlow,
-  Background,
-  BackgroundVariant,
   Node,
   Edge,
   ReactFlowProvider,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 const defaultNodes: Node[] = [
   {
     id: '1',

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import ReactFlow, {
   addEdge,
   Controls,
-  Background,
   ReactFlowInstance,
   Connection,
   Edge,
@@ -14,6 +13,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import MiniMap from '@react-flow/minimap';
 
 import { getElements } from './utils';

examples/nextjs/pages/Edges/index.tsx

@@ -1,7 +1,6 @@
 import React, { MouseEvent } from 'react';
 import ReactFlow, {
   addEdge,
-  Background,
   Connection,
   Controls,
   Edge,
@@ -13,6 +12,8 @@ import ReactFlow, {
   useNodesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import MiniMap from '@react-flow/minimap';
 
 import CustomEdge from './CustomEdge';

examples/nextjs/pages/Empty/index.tsx

@@ -3,9 +3,7 @@ import React, { MouseEvent, CSSProperties } from 'react';
 import ReactFlow, {
   addEdge,
   Controls,
-  Background,
   Node,
-  BackgroundVariant,
   Connection,
   Edge,
   useNodesState,
@@ -13,6 +11,8 @@ import ReactFlow, {
   ReactFlowInstance,
 } from '@react-flow/core';
 
+import Background, { BackgroundVariant } from '@react-flow/background';
+
 const onInit = (reactFlowInstance: ReactFlowInstance) =>
   console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/nextjs/pages/FloatingEdges/index.tsx

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   ReactFlowInstance,
   EdgeTypes,
   Connection,
@@ -10,6 +9,8 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import styles from './style.module.css';
 
 import FloatingConnectionLine from './FloatingConnectionLine';

examples/nextjs/pages/MultiFlows/index.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   Node,
   Edge,
   Connection,
@@ -12,6 +11,8 @@ import ReactFlow, {
   MarkerType,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
+
 import styles from './multiflows.module.css';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/NestedNodes/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   useNodesState,
   useEdgesState,
   Controls,
@@ -13,6 +12,7 @@ import ReactFlow, {
 } from '@react-flow/core';
 
 import MiniMap from '@react-flow/minimap';
+import Background from '@react-flow/background';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) =>
   console.log('drag stop', node);

examples/nextjs/pages/Overview/index.tsx

@@ -7,7 +7,6 @@ import React, {
 import ReactFlow, {
   addEdge,
   Controls,
-  Background,
   Node,
   Viewport,
   SnapGrid,
@@ -19,6 +18,7 @@ import ReactFlow, {
   OnSelectionChangeParams,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>

examples/nextjs/pages/Stress/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
   Controls,
-  Background,
   ReactFlowInstance,
   Edge,
   Node,
@@ -13,6 +12,7 @@ import ReactFlow, {
   EdgeChange,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 import { getNodesAndEdges } from './utils';

examples/nextjs/pages/Subflow/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
-  Background,
   Controls,
   Node,
   Edge,
@@ -13,6 +12,7 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 import DebugNode from './DebugNode';

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, MouseEvent, useEffect } from 'react';
 import ReactFlow, {
   Node,
   addEdge,
-  Background,
   useReactFlow,
   ReactFlowProvider,
   Connection,
@@ -12,6 +11,7 @@ import ReactFlow, {
   useEdgesState,
 } from '@react-flow/core';
 
+import Background from '@react-flow/background';
 import MiniMap from '@react-flow/minimap';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/index.tsx

@@ -2,14 +2,13 @@ import React, { MouseEvent } from 'react';
 
 import ReactFlow, {
   ReactFlowProvider,
-  Background,
-  BackgroundVariant,
   Node,
   Edge,
   useReactFlow,
 } from '@react-flow/core';
 
 import Minimap from '@react-flow/minimap';
+import Background, { BackgroundVariant } from '@react-flow/background';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) =>

packages/background/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@react-flow/background",
+  "version": "11.0.0",
+  "description": "A background component for React Flow",
+  "main": "dist/react-flow-background.cjs.js",
+  "module": "dist/react-flow-background.esm.js",
+  "license": "MIT",
+  "dependencies": {
+    "@react-flow/core": "11.0.0"
+  },
+  "peerDependencies": {
+    "classcat": "^5.0.3",
+    "react": "^18.1.0"
+  }
+}

packages/background/src/Background.tsx

@@ -1,9 +1,9 @@
 import React, { memo, FC, useEffect, useState, useRef } from 'react';
 import cc from 'classcat';
+import { useStore, ReactFlowState } from '@react-flow/core';
 
-import { useStore } from '../../store';
+import { BackgroundProps, BackgroundVariant } from './types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
-import { BackgroundVariant, ReactFlowState, BackgroundProps } from '../../types';
 
 const defaultColors = {
   [BackgroundVariant.Dots]: '#81818a',
@@ -37,11 +37,17 @@ const Background: FC<BackgroundProps> = ({
 
   const isLines = variant === BackgroundVariant.Lines;
   const bgColor = color ? color : defaultColors[variant];
-  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * tScale, bgColor);
+  const path = isLines
+    ? createGridLinesPath(scaledGap, size, bgColor)
+    : createGridDotsPath(size * tScale, bgColor);
 
   return (
     <svg
-      className={cc(['react-flow__background', 'react-flow__container', className])}
+      className={cc([
+        'react-flow__background',
+        'react-flow__container',
+        className,
+      ])}
       style={{
         ...style,
         width: '100%',
@@ -57,11 +63,17 @@ const Background: FC<BackgroundProps> = ({
             y={yOffset}
             width={scaledGap}
             height={scaledGap}
-            patternUnits="userSpaceOnUse"
+            patternUnits='userSpaceOnUse'
           >
             {path}
           </pattern>
-          <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
+          <rect
+            x='0'
+            y='0'
+            width='100%'
+            height='100%'
+            fill={`url(#${patternId})`}
+          />
         </>
       )}
     </svg>

packages/background/src/index.tsx

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

packages/background/src/types.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+
+export enum BackgroundVariant {
+  Lines = 'lines',
+  Dots = 'dots',
+}
+
+export interface BackgroundProps extends HTMLAttributes<SVGElement> {
+  variant?: BackgroundVariant;
+  gap?: number;
+  color?: string;
+  size?: number;
+}

packages/core/package.json

@@ -29,6 +29,7 @@
     "nocss"
   ],
   "devDependencies": {
+    "@types/d3": "^7.4.0",
     "@types/react": "^18.0.15"
   }
 }

packages/core/src/additional-components/MiniMap/MiniMapNode.tsx

@@ -1,53 +0,0 @@
-import React, { memo, CSSProperties } from 'react';
-import cc from 'classcat';
-
-interface MiniMapNodeProps {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  borderRadius: number;
-  className: string;
-  color: string;
-  shapeRendering: string;
-  strokeColor: string;
-  strokeWidth: number;
-  style?: CSSProperties;
-}
-
-const MiniMapNode = ({
-  x,
-  y,
-  width,
-  height,
-  style,
-  color,
-  strokeColor,
-  strokeWidth,
-  className,
-  borderRadius,
-  shapeRendering,
-}: MiniMapNodeProps) => {
-  const { background, backgroundColor } = style || {};
-  const fill = (color || background || backgroundColor) as string;
-
-  return (
-    <rect
-      className={cc(['react-flow__minimap-node', className])}
-      x={x}
-      y={y}
-      rx={borderRadius}
-      ry={borderRadius}
-      width={width}
-      height={height}
-      fill={fill}
-      stroke={strokeColor}
-      strokeWidth={strokeWidth}
-      shapeRendering={shapeRendering}
-    />
-  );
-};
-
-MiniMapNode.displayName = 'MiniMapNode';
-
-export default memo(MiniMapNode);

packages/core/src/additional-components/index.ts

@@ -1,7 +1,5 @@
 // These components are not used by React Flow directly
 // They can be added as children of a React Flow component
 
-export { default as MiniMap } from './MiniMap';
 export { default as Controls, ControlButton } from './Controls';
-export { default as Background } from './Background';
 export { default as ReactFlowProvider } from './ReactFlowProvider';

packages/core/src/types/component-props.ts

@@ -28,7 +28,6 @@ import {
   AttributionPosition,
   DefaultEdgeOptions,
   FitViewOptions,
-  BackgroundVariant,
   OnNodesDelete,
   OnEdgesDelete,
   OnNodesChange,
@@ -136,17 +135,6 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
 
 export type ReactFlowRefType = HTMLDivElement;
 
-export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
-
-export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGElement> {
-  nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
-  nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
-  nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
-  nodeBorderRadius?: number;
-  nodeStrokeWidth?: number;
-  maskColor?: string;
-}
-
 export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;
   showFitView?: boolean;
@@ -159,10 +147,3 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export interface ControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
-
-export interface BackgroundProps extends HTMLAttributes<SVGElement> {
-  variant?: BackgroundVariant;
-  gap?: number;
-  color?: string;
-  size?: number;
-}

packages/core/src/types/general.ts

@@ -81,11 +81,6 @@ export type OnConnectStop = (event: MouseEvent) => void;
 
 export type OnConnectEnd = (event: MouseEvent) => void;
 
-export enum BackgroundVariant {
-  Lines = 'lines',
-  Dots = 'dots',
-}
-
 export type Viewport = {
   x: number;
   y: number;

packages/minimap/src/MiniMap.tsx

@@ -1,13 +1,17 @@
 import React, { memo } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
+import {
+  useStore,
+  getRectOfNodes,
+  Box,
+  ReactFlowState,
+  Rect,
+} from '@react-flow/core';
 
 import MiniMapNode from './MiniMapNode';
-import { useStore } from '../../store';
-import { getRectOfNodes } from '../../utils/graph';
-import { getBoundsofRects } from '../../utils';
-
-import { MiniMapProps, GetMiniMapNodeAttribute, ReactFlowState } from '../../types';
+import MiniMapDrag from './MiniMapDrag';
+import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
 
 declare const window: any;
 
@@ -15,16 +19,38 @@ const defaultWidth = 200;
 const defaultHeight = 150;
 
 const selector = (s: ReactFlowState) => ({
-  viewBBox: {
-    x: -s.transform[0] / s.transform[2],
-    y: -s.transform[1] / s.transform[2],
-    width: s.width / s.transform[2],
-    height: s.height / s.transform[2],
-  },
+  width: s.width,
+  height: s.height,
+  transform: s.transform,
   nodes: Array.from(s.nodeInternals.values()),
 });
 
-const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
+const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
+  func instanceof Function ? func : () => func;
+
+export const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
+  x: Math.min(box1.x, box2.x),
+  y: Math.min(box1.y, box2.y),
+  x2: Math.max(box1.x2, box2.x2),
+  y2: Math.max(box1.y2, box2.y2),
+});
+
+export const rectToBox = ({ x, y, width, height }: Rect): Box => ({
+  x,
+  y,
+  x2: x + width,
+  y2: y + height,
+});
+
+export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
+  x,
+  y,
+  width: x2 - x,
+  height: y2 - y,
+});
+
+export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
+  boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
 
 const MiniMap = ({
   style,
@@ -36,13 +62,25 @@ const MiniMap = ({
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 242, 243, 0.7)',
 }: MiniMapProps) => {
-  const { viewBBox, nodes } = useStore(selector, shallow);
+  const {
+    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 boundingRect = nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBBox) : viewBBox;
+  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);
@@ -53,7 +91,10 @@ const MiniMap = ({
   const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
   const width = viewWidth + offset * 2;
   const height = viewHeight + offset * 2;
-  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+  const shapeRendering =
+    typeof window === 'undefined' || !!window.chrome
+      ? 'crispEdges'
+      : 'geometricPrecision';
 
   return (
     <svg
@@ -83,12 +124,22 @@ const MiniMap = ({
             />
           );
         })}
+      <MiniMapDrag
+        x={viewBB.x}
+        y={viewBB.y}
+        width={viewBB.width}
+        height={viewBB.height}
+      />
       <path
-        className="react-flow__minimap-mask"
-        d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
-        M${viewBBox.x},${viewBBox.y}h${viewBBox.width}v${viewBBox.height}h${-viewBBox.width}z`}
+        className='react-flow__minimap-mask'
+        d={`M${x - offset},${y - offset}h${width + offset * 2}v${
+          height + offset * 2
+        }h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${
+          viewBB.height
+        }h${-viewBB.width}z`}
         fill={maskColor}
-        fillRule="evenodd"
+        fillRule='evenodd'
       />
     </svg>
   );

packages/minimap/src/index.tsx

@@ -1,151 +1,2 @@
-import React, { memo } from 'react';
-import cc from 'classcat';
-import shallow from 'zustand/shallow';
-import {
-  useStore,
-  getRectOfNodes,
-  Box,
-  MiniMapProps,
-  GetMiniMapNodeAttribute,
-  ReactFlowState,
-  Rect,
-} from '@react-flow/core';
-
-import MiniMapNode from './MiniMapNode';
-import MiniMapDrag from './MiniMapDrag';
-
-declare const window: any;
-
-const defaultWidth = 200;
-const defaultHeight = 150;
-
-const selector = (s: ReactFlowState) => ({
-  width: s.width,
-  height: s.height,
-  transform: s.transform,
-  nodes: Array.from(s.nodeInternals.values()),
-});
-
-const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
-  func instanceof Function ? func : () => func;
-
-export const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
-  x: Math.min(box1.x, box2.x),
-  y: Math.min(box1.y, box2.y),
-  x2: Math.max(box1.x2, box2.x2),
-  y2: Math.max(box1.y2, box2.y2),
-});
-
-export const rectToBox = ({ x, y, width, height }: Rect): Box => ({
-  x,
-  y,
-  x2: x + width,
-  y2: y + height,
-});
-
-export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
-  x,
-  y,
-  width: x2 - x,
-  height: y2 - y,
-});
-
-export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
-  boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
-
-const MiniMap = ({
-  style,
-  className,
-  nodeStrokeColor = '#555',
-  nodeColor = '#fff',
-  nodeClassName = '',
-  nodeBorderRadius = 5,
-  nodeStrokeWidth = 2,
-  maskColor = 'rgb(240, 242, 243, 0.7)',
-}: MiniMapProps) => {
-  const {
-    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);
-  const viewWidth = viewScale * elementWidth;
-  const viewHeight = viewScale * elementHeight;
-  const offset = 5 * viewScale;
-  const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
-  const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
-  const width = viewWidth + offset * 2;
-  const height = viewHeight + offset * 2;
-  const shapeRendering =
-    typeof window === 'undefined' || !!window.chrome
-      ? 'crispEdges'
-      : 'geometricPrecision';
-
-  return (
-    <svg
-      width={elementWidth}
-      height={elementHeight}
-      viewBox={`${x} ${y} ${width} ${height}`}
-      style={style}
-      className={cc(['react-flow__minimap', className])}
-    >
-      {nodes
-        .filter((node) => !node.hidden && node.width && node.height)
-        .map((node) => {
-          return (
-            <MiniMapNode
-              key={node.id}
-              x={node.positionAbsolute?.x ?? 0}
-              y={node.positionAbsolute?.y ?? 0}
-              width={node.width!}
-              height={node.height!}
-              style={node.style}
-              className={nodeClassNameFunc(node)}
-              color={nodeColorFunc(node)}
-              borderRadius={nodeBorderRadius}
-              strokeColor={nodeStrokeColorFunc(node)}
-              strokeWidth={nodeStrokeWidth}
-              shapeRendering={shapeRendering}
-            />
-          );
-        })}
-      <MiniMapDrag
-        x={viewBB.x}
-        y={viewBB.y}
-        width={viewBB.width}
-        height={viewBB.height}
-      />
-      <path
-        className='react-flow__minimap-mask'
-        d={`M${x - offset},${y - offset}h${width + offset * 2}v${
-          height + offset * 2
-        }h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${
-          viewBB.height
-        }h${-viewBB.width}z`}
-        fill={maskColor}
-        fillRule='evenodd'
-      />
-    </svg>
-  );
-};
-
-MiniMap.displayName = 'MiniMap';
-
-export default memo(MiniMap);
+export * from './types';
+export { default as MiniMap, default } from './MiniMap';

packages/minimap/src/types.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import { Node } from '@react-flow/core';
+
+export type GetMiniMapNodeAttribute<NodeData = any> = (
+  node: Node<NodeData>
+) => string;
+
+export interface MiniMapProps<NodeData = any>
+  extends HTMLAttributes<SVGSVGElement> {
+  nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+  nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
+  nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
+  nodeBorderRadius?: number;
+  nodeStrokeWidth?: number;
+  maskColor?: string;
+}

yarn.lock

@@ -1284,18 +1284,216 @@
   dependencies:
     tslib "^2.4.0"
 
-"@types/d3-drag@^3.0.1":
+"@types/d3-array@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.3.tgz#87d990bf504d14ad6b16766979d04e943c046dac"
+  integrity sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==
+
+"@types/d3-axis@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.1.tgz#6afc20744fa5cc0cbc3e2bd367b140a79ed3e7a8"
+  integrity sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-brush@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.1.tgz#ae5f17ce391935ca88b29000e60ee20452c6357c"
+  integrity sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-chord@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.1.tgz#54c8856c19c8e4ab36a53f73ba737de4768ad248"
+  integrity sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==
+
+"@types/d3-color@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
+  integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
+
+"@types/d3-contour@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.1.tgz#9ff4e2fd2a3910de9c5097270a7da8a6ef240017"
+  integrity sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/geojson" "*"
+
+"@types/d3-delaunay@*":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41"
+  integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==
+
+"@types/d3-dispatch@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz#a1b18ae5fa055a6734cb3bd3cbc6260ef19676e3"
+  integrity sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==
+
+"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.1.tgz#fb1e3d5cceeee4d913caa59dedf55c94cb66e80f"
   integrity sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==
   dependencies:
     "@types/d3-selection" "*"
 
+"@types/d3-dsv@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.0.tgz#f3c61fb117bd493ec0e814856feb804a14cfc311"
+  integrity sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==
+
+"@types/d3-ease@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0"
+  integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==
+
+"@types/d3-fetch@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.1.tgz#f9fa88b81aa2eea5814f11aec82ecfddbd0b8fe0"
+  integrity sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==
+  dependencies:
+    "@types/d3-dsv" "*"
+
+"@types/d3-force@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.3.tgz#76cb20d04ae798afede1ea6e41750763ff5a9c82"
+  integrity sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==
+
+"@types/d3-format@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d"
+  integrity sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==
+
+"@types/d3-geo@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.0.2.tgz#e7ec5f484c159b2c404c42d260e6d99d99f45d9a"
+  integrity sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/d3-hierarchy@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz#4561bb7ace038f247e108295ef77b6a82193ac25"
+  integrity sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==
+
+"@types/d3-interpolate@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
+  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
+  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
+
+"@types/d3-polygon@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.0.tgz#5200a3fa793d7736fa104285fa19b0dbc2424b93"
+  integrity sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==
+
+"@types/d3-quadtree@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz#433112a178eb7df123aab2ce11c67f51cafe8ff5"
+  integrity sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==
+
+"@types/d3-random@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.1.tgz#5c8d42b36cd4c80b92e5626a252f994ca6bfc953"
+  integrity sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==
+
+"@types/d3-scale-chromatic@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#103124777e8cdec85b20b51fd3397c682ee1e954"
+  integrity sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==
+
+"@types/d3-scale@*":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.2.tgz#41be241126af4630524ead9cb1008ab2f0f26e69"
+  integrity sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==
+  dependencies:
+    "@types/d3-time" "*"
+
 "@types/d3-selection@*", "@types/d3-selection@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.2.tgz#23e48a285b24063630bbe312cc0cfe2276de4a59"
   integrity sha512-d29EDd0iUBrRoKhPndhDY6U/PYxOWqgIZwKTooy2UkBfU7TNZNpRho0yLWPxlatQrFWk2mnTu71IZQ4+LRgKlQ==
 
+"@types/d3-shape@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.0.tgz#1d87a6ddcf28285ef1e5c278ca4bdbc0658f3505"
+  integrity sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time-format@*":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.0.tgz#ee7b6e798f8deb2d9640675f8811d0253aaa1946"
+  integrity sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==
+
+"@types/d3-time@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
+"@types/d3-timer@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce"
+  integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
+
+"@types/d3-transition@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.1.tgz#c9a96125567173d6163a6985b874f79154f4cc3d"
+  integrity sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-zoom@*":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.1.tgz#4bfc7e29625c4f79df38e2c36de52ec3e9faf826"
+  integrity sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
+"@types/d3@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.4.0.tgz#fc5cac5b1756fc592a3cf1f3dc881bf08225f515"
+  integrity sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/d3-axis" "*"
+    "@types/d3-brush" "*"
+    "@types/d3-chord" "*"
+    "@types/d3-color" "*"
+    "@types/d3-contour" "*"
+    "@types/d3-delaunay" "*"
+    "@types/d3-dispatch" "*"
+    "@types/d3-drag" "*"
+    "@types/d3-dsv" "*"
+    "@types/d3-ease" "*"
+    "@types/d3-fetch" "*"
+    "@types/d3-force" "*"
+    "@types/d3-format" "*"
+    "@types/d3-geo" "*"
+    "@types/d3-hierarchy" "*"
+    "@types/d3-interpolate" "*"
+    "@types/d3-path" "*"
+    "@types/d3-polygon" "*"
+    "@types/d3-quadtree" "*"
+    "@types/d3-random" "*"
+    "@types/d3-scale" "*"
+    "@types/d3-scale-chromatic" "*"
+    "@types/d3-selection" "*"
+    "@types/d3-shape" "*"
+    "@types/d3-time" "*"
+    "@types/d3-time-format" "*"
+    "@types/d3-timer" "*"
+    "@types/d3-transition" "*"
+    "@types/d3-zoom" "*"
+
 "@types/dagre@^0.7.47":
   version "0.7.47"
   resolved "https://registry.yarnpkg.com/@types/dagre/-/dagre-0.7.47.tgz#1d1b89e1fac36aaf5ef5ed6274bb123073095ac5"
@@ -1311,6 +1509,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/geojson@*":
+  version "7946.0.10"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
+  integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -2499,6 +2702,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2789,11 +2997,25 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
+  dependencies:
+    immediate "~3.0.5"
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"