59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
import { memo, CSSProperties, MouseEvent } from 'react';
|
|
import cc from 'classcat';
|
|
|
|
interface MiniMapNodeProps {
|
|
id: string;
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
borderRadius: number;
|
|
className: string;
|
|
color: string;
|
|
shapeRendering: string;
|
|
strokeColor: string;
|
|
strokeWidth: number;
|
|
style?: CSSProperties;
|
|
onClick?: (event: MouseEvent, id: string) => void;
|
|
}
|
|
|
|
const MiniMapNode = ({
|
|
id,
|
|
x,
|
|
y,
|
|
width,
|
|
height,
|
|
style,
|
|
color,
|
|
strokeColor,
|
|
strokeWidth,
|
|
className,
|
|
borderRadius,
|
|
shapeRendering,
|
|
onClick,
|
|
}: 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}
|
|
onClick={onClick ? (event) => onClick(event, id) : undefined}
|
|
/>
|
|
);
|
|
};
|
|
|
|
MiniMapNode.displayName = 'MiniMapNode';
|
|
|
|
export default memo(MiniMapNode);
|