115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
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, Rect } from '../../types';
|
|
|
|
declare const window: any;
|
|
|
|
const defaultWidth = 200;
|
|
const defaultHeight = 150;
|
|
|
|
const selector = (s: ReactFlowState) => ({
|
|
width: s.width,
|
|
height: s.height,
|
|
transform: s.transform,
|
|
nodeInternals: s.nodeInternals,
|
|
});
|
|
|
|
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, nodeInternals } = useStore(selector, shallow);
|
|
const [tX, tY, tScale] = transform;
|
|
|
|
const mapClasses = cc(['react-flow__minimap', className]);
|
|
const elementWidth = (style?.width || defaultWidth)! as number;
|
|
const elementHeight = (style?.height || defaultHeight)! as number;
|
|
const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as GetMiniMapNodeAttribute;
|
|
const nodeStrokeColorFunc = (
|
|
nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor
|
|
) as GetMiniMapNodeAttribute;
|
|
const nodeClassNameFunc = (
|
|
nodeClassName instanceof Function ? nodeClassName : () => nodeClassName
|
|
) as GetMiniMapNodeAttribute;
|
|
const hasNodes = nodeInternals && nodeInternals.size > 0;
|
|
// @TODO: work with nodeInternals instead of converting it to an array
|
|
const nodes = Array.from(nodeInternals).map(([_, node]) => node);
|
|
const bb = getRectOfNodes(nodes);
|
|
const viewBB: Rect = {
|
|
x: -tX / tScale,
|
|
y: -tY / tScale,
|
|
width: containerWidth / tScale,
|
|
height: containerHeight / 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;
|
|
const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
|
|
|
|
return (
|
|
<svg
|
|
width={elementWidth}
|
|
height={elementHeight}
|
|
viewBox={`${x} ${y} ${width} ${height}`}
|
|
style={style}
|
|
className={mapClasses}
|
|
>
|
|
{Array.from(nodeInternals)
|
|
.filter(([_, node]) => !node.hidden && node.width && node.height)
|
|
.map(([_, node]) => {
|
|
const positionAbsolute = nodeInternals.get(node.id)?.positionAbsolute;
|
|
|
|
return (
|
|
<MiniMapNode
|
|
key={node.id}
|
|
x={positionAbsolute?.x || 0}
|
|
y={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${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);
|