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

packages/core/src/additional-components/Background/index.tsx

@@ -1,73 +0,0 @@
-import React, { memo, FC, useEffect, useState, useRef } from 'react';
-import cc from 'classcat';
-
-import { useStore } from '../../store';
-import { createGridLinesPath, createGridDotsPath } from './utils';
-import { BackgroundVariant, ReactFlowState, BackgroundProps } from '../../types';
-
-const defaultColors = {
-  [BackgroundVariant.Dots]: '#81818a',
-  [BackgroundVariant.Lines]: '#eee',
-};
-
-const transformSelector = (s: ReactFlowState) => s.transform;
-
-const Background: FC<BackgroundProps> = ({
-  variant = BackgroundVariant.Dots,
-  gap = 15,
-  size = 0.4,
-  color,
-  style,
-  className,
-}) => {
-  const ref = useRef<SVGSVGElement>(null);
-  const [patternId, setPatternId] = useState<string | null>(null);
-  const [tX, tY, tScale] = useStore(transformSelector);
-
-  useEffect(() => {
-    // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
-    const bgs = document.querySelectorAll('.react-flow__background');
-    const index = Array.from(bgs).findIndex((bg) => bg === ref.current);
-    setPatternId(`pattern-${index}`);
-  }, []);
-
-  const scaledGap = gap * tScale || 1;
-  const xOffset = tX % scaledGap;
-  const yOffset = tY % scaledGap;
-
-  const isLines = variant === BackgroundVariant.Lines;
-  const bgColor = color ? color : defaultColors[variant];
-  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * tScale, bgColor);
-
-  return (
-    <svg
-      className={cc(['react-flow__background', 'react-flow__container', className])}
-      style={{
-        ...style,
-        width: '100%',
-        height: '100%',
-      }}
-      ref={ref}
-    >
-      {patternId && (
-        <>
-          <pattern
-            id={patternId}
-            x={xOffset}
-            y={yOffset}
-            width={scaledGap}
-            height={scaledGap}
-            patternUnits="userSpaceOnUse"
-          >
-            {path}
-          </pattern>
-          <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
-        </>
-      )}
-    </svg>
-  );
-};
-
-Background.displayName = 'Background';
-
-export default memo(Background);

packages/core/src/additional-components/Background/utils.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string): React.ReactElement => {
-  return <path stroke={stroke} strokeWidth={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`} />;
-};
-
-export const createGridDotsPath = (size: number, fill: string): React.ReactElement => {
-  return <circle cx={size} cy={size} r={size} fill={fill} />;
-};

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/MiniMap/index.tsx

@@ -1,99 +0,0 @@
-import React, { memo } from 'react';
-import cc from 'classcat';
-import shallow from 'zustand/shallow';
-
-import MiniMapNode from './MiniMapNode';
-import { useStore } from '../../store';
-import { getRectOfNodes } from '../../utils/graph';
-import { getBoundsofRects } from '../../utils';
-
-import { MiniMapProps, GetMiniMapNodeAttribute, ReactFlowState } from '../../types';
-
-declare const window: any;
-
-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],
-  },
-  nodes: Array.from(s.nodeInternals.values()),
-});
-
-const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
-
-const MiniMap = ({
-  style,
-  className,
-  nodeStrokeColor = '#555',
-  nodeColor = '#fff',
-  nodeClassName = '',
-  nodeBorderRadius = 5,
-  nodeStrokeWidth = 2,
-  maskColor = 'rgb(240, 242, 243, 0.7)',
-}: MiniMapProps) => {
-  const { viewBBox, 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 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}
-            />
-          );
-        })}
-      <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`}
-        fill={maskColor}
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};
-
-MiniMap.displayName = 'MiniMap';
-
-export default memo(MiniMap);

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;