refactor(background): export background as component closes #235

src/additional-components/Background/index.tsx

@@ -0,0 +1,56 @@
+import React, { memo, HTMLAttributes, CSSProperties } from 'react';
+import classnames from 'classnames';
+
+import { useStoreState } from '../../store/hooks';
+import { BackgroundVariant } from '../../types';
+import { createGridLinesPath, createGridDotsPath } from './utils';
+
+interface BackgroundProps extends HTMLAttributes<SVGElement> {
+  variant?: BackgroundVariant;
+  gap?: number;
+  color?: string;
+  size?: number;
+}
+
+const baseStyles: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+};
+
+const defaultColors = {
+  [BackgroundVariant.Dots]: '#999',
+  [BackgroundVariant.Lines]: '#eee',
+};
+
+const Background = memo(
+  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style = {}, className = '' }: BackgroundProps) => {
+    const {
+      width,
+      height,
+      transform: [x, y, scale],
+    } = useStoreState((s) => s);
+
+    const bgClasses = classnames('react-flow__background', className);
+    const bgColor = color ? color : defaultColors[variant];
+    const scaledGap = gap * scale;
+    const xOffset = x % scaledGap;
+    const yOffset = y % scaledGap;
+    const isLines = variant === BackgroundVariant.Lines;
+    const path = isLines
+      ? createGridLinesPath(width, height, xOffset, yOffset, scaledGap)
+      : createGridDotsPath(width, height, xOffset, yOffset, scaledGap, size);
+    const fill = isLines ? 'none' : bgColor;
+    const stroke = isLines ? bgColor : 'none';
+
+    return (
+      <svg width={width} height={height} style={{ ...baseStyles, ...style }} className={bgClasses}>
+        <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
+      </svg>
+    );
+  }
+);
+
+Background.displayName = 'Background';
+
+export default Background;

src/additional-components/Background/utils.ts

@@ -0,0 +1,37 @@
+export const createGridLinesPath = (
+  width: number,
+  height: number,
+  xOffset: number,
+  yOffset: number,
+  gap: number
+): string => {
+  const lineCountX = Math.ceil(width / gap) + 1;
+  const lineCountY = Math.ceil(height / gap) + 1;
+
+  const xValues = Array.from({ length: lineCountX }, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
+  const yValues = Array.from({ length: lineCountY }, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
+
+  return [...xValues, ...yValues].join(' ');
+};
+
+export const createGridDotsPath = (
+  width: number,
+  height: number,
+  xOffset: number,
+  yOffset: number,
+  gap: number,
+  size: number
+): string => {
+  const lineCountX = Math.ceil(width / gap) + 1;
+  const lineCountY = Math.ceil(height / gap) + 1;
+
+  const values = Array.from({ length: lineCountX }, (_, col) => {
+    const x = col * gap + xOffset;
+    return Array.from({ length: lineCountY }, (_, row) => {
+      const y = row * gap + yOffset;
+      return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
+    }).join(' ');
+  });
+
+  return values.join(' ');
+};

src/additional-components/Controls/index.tsx

@@ -0,0 +1,68 @@
+import React, { CSSProperties } from 'react';
+import classnames from 'classnames';
+
+import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import { useStoreState, useStoreActions } from '../../store/hooks';
+
+import PlusIcon from '../../../assets/icons/plus.svg';
+import MinusIcon from '../../../assets/icons/minus.svg';
+import FitviewIcon from '../../../assets/icons/fitview.svg';
+import LockIcon from '../../../assets/icons/lock.svg';
+import UnlockIcon from '../../../assets/icons/unlock.svg';
+
+const baseStyle: CSSProperties = {
+  position: 'absolute',
+  zIndex: 5,
+  bottom: 10,
+  left: 10,
+};
+
+interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
+  showZoom?: boolean;
+  showFitView?: boolean;
+  showInteractive?: boolean;
+}
+
+const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
+  const setInteractive = useStoreActions((actions) => actions.setInteractive);
+  const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
+  const mapClasses: string = classnames('react-flow__controls', className);
+
+  return (
+    <div
+      className={mapClasses}
+      style={{
+        ...baseStyle,
+        ...style,
+      }}
+    >
+      {showZoom && (
+        <>
+          <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={zoomIn}>
+            <PlusIcon />
+          </div>
+          <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={zoomOut}>
+            <MinusIcon />
+          </div>
+        </>
+      )}
+      {showFitView && (
+        <div className="react-flow__controls-button react-flow__controls-fitview" onClick={() => fitView()}>
+          <FitviewIcon />
+        </div>
+      )}
+      {showInteractive && (
+        <div
+          className="react-flow__controls-button react-flow__controls-interactive"
+          onClick={() => setInteractive(!isInteractive)}
+        >
+          {isInteractive ? <UnlockIcon /> : <LockIcon />}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Controls.displayName = 'Controls';
+
+export default Controls;

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Node } from '../../types';
+
+interface MiniMapNodeProps {
+  node: Node;
+  color: string;
+  borderRadius: number;
+}
+
+const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
+  const {
+    position: { x, y },
+    width,
+    height,
+  } = node.__rg;
+  const { background, backgroundColor } = node.style || {};
+  const fill = (background || backgroundColor || color) as string;
+  return (
+    <rect
+      className="react-flow__minimap-node"
+      x={x}
+      y={y}
+      rx={borderRadius}
+      ry={borderRadius}
+      width={width}
+      height={height}
+      fill={fill}
+    />
+  );
+};
+
+MiniMapNode.displayName = 'MiniMapNode';
+
+export default MiniMapNode;

src/additional-components/MiniMap/index.tsx

@@ -0,0 +1,98 @@
+import React, { CSSProperties } from 'react';
+import classnames from 'classnames';
+
+import { useStoreState } from '../../store/hooks';
+import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
+import { Node, Rect } from '../../types';
+import MiniMapNode from './MiniMapNode';
+
+type StringFunc = (node: Node) => string;
+
+interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
+  nodeColor?: string | StringFunc;
+  nodeBorderRadius?: number;
+  maskColor?: string;
+}
+
+const baseStyle: CSSProperties = {
+  position: 'absolute',
+  zIndex: 5,
+  bottom: 10,
+  right: 10,
+  width: 200,
+  height: 150,
+};
+
+const MiniMap = ({
+  style = { backgroundColor: '#f8f8f8' },
+  className,
+  nodeColor = '#ddd',
+  nodeBorderRadius = 5,
+  maskColor = 'rgba(10, 10, 10, .25)',
+}: MiniMapProps) => {
+  const state = useStoreState(({ width, height, nodes, transform: [tX, tY, tScale] }) => ({
+    width,
+    height,
+    nodes,
+    tX,
+    tY,
+    tScale,
+  }));
+
+  const mapClasses = classnames('react-flow__minimap', className);
+  const elementWidth = (style.width || baseStyle.width)! as number;
+  const elementHeight = (style.height || baseStyle.height)! as number;
+  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
+  const hasNodes = state.nodes && state.nodes.length;
+
+  const bb = getRectOfNodes(state.nodes);
+  const viewBB: Rect = {
+    x: -state.tX / state.tScale,
+    y: -state.tY / state.tScale,
+    width: state.width / state.tScale,
+    height: state.height / state.tScale,
+  };
+
+  const boundingRect = hasNodes ? getBoundsofRects(bb, 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;
+
+  return (
+    <svg
+      width={elementWidth}
+      height={elementHeight}
+      viewBox={`${x} ${y} ${width} ${height}`}
+      style={{
+        ...baseStyle,
+        ...style,
+      }}
+      className={mapClasses}
+    >
+      {state.nodes.map((node) => (
+        <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
+      ))}
+      <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 MiniMap;

src/additional-components/index.ts

@@ -0,0 +1,6 @@
+// These components are not used by React Flow directly
+// but the user can add them as a child of a React Flow component
+
+export { default as MiniMap } from './MiniMap';
+export { default as Controls } from './Controls';
+export { default as Background } from './Background';