Allow to pass a string of FuncString for Minimap node className
This commit is contained in:
@@ -6,17 +6,18 @@ interface MiniMapNodeProps {
|
|||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
color: string;
|
color: string;
|
||||||
|
className: string;
|
||||||
borderRadius: number;
|
borderRadius: number;
|
||||||
style?: CSSProperties;
|
style?: CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
const MiniMapNode = ({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
|
const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadius }: MiniMapNodeProps) => {
|
||||||
const { background, backgroundColor } = style || {};
|
const { background, backgroundColor } = style || {};
|
||||||
const fill = (color || background || backgroundColor) as string;
|
const fill = (color || background || backgroundColor) as string;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<rect
|
<rect
|
||||||
className="react-flow__minimap-node"
|
className={`react-flow__minimap-node ${className}`}
|
||||||
x={x}
|
x={x}
|
||||||
y={y}
|
y={y}
|
||||||
rx={borderRadius}
|
rx={borderRadius}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ type StringFunc = (node: Node) => string;
|
|||||||
|
|
||||||
interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
|
interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
|
||||||
nodeColor?: string | StringFunc;
|
nodeColor?: string | StringFunc;
|
||||||
|
nodeClassName?: string | StringFunc;
|
||||||
nodeBorderRadius?: number;
|
nodeBorderRadius?: number;
|
||||||
maskColor?: string;
|
maskColor?: string;
|
||||||
}
|
}
|
||||||
@@ -23,6 +24,7 @@ const MiniMap = ({
|
|||||||
style = { backgroundColor: '#f8f8f8' },
|
style = { backgroundColor: '#f8f8f8' },
|
||||||
className,
|
className,
|
||||||
nodeColor = '#ddd',
|
nodeColor = '#ddd',
|
||||||
|
nodeClassName = '',
|
||||||
nodeBorderRadius = 5,
|
nodeBorderRadius = 5,
|
||||||
maskColor = 'rgba(10, 10, 10, .25)',
|
maskColor = 'rgba(10, 10, 10, .25)',
|
||||||
}: MiniMapProps) => {
|
}: MiniMapProps) => {
|
||||||
@@ -35,6 +37,7 @@ const MiniMap = ({
|
|||||||
const elementWidth = (style.width || defaultWidth)! as number;
|
const elementWidth = (style.width || defaultWidth)! as number;
|
||||||
const elementHeight = (style.height || defaultHeight)! as number;
|
const elementHeight = (style.height || defaultHeight)! as number;
|
||||||
const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
|
const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
|
||||||
|
const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc;
|
||||||
const hasNodes = nodes && nodes.length;
|
const hasNodes = nodes && nodes.length;
|
||||||
const bb = getRectOfNodes(nodes);
|
const bb = getRectOfNodes(nodes);
|
||||||
const viewBB: Rect = {
|
const viewBB: Rect = {
|
||||||
@@ -73,6 +76,7 @@ const MiniMap = ({
|
|||||||
width={node.__rf.width}
|
width={node.__rf.width}
|
||||||
height={node.__rf.height}
|
height={node.__rf.height}
|
||||||
style={node.style}
|
style={node.style}
|
||||||
|
className={nodeClassNameFunc(node)}
|
||||||
color={nodeColorFunc(node)}
|
color={nodeColorFunc(node)}
|
||||||
borderRadius={nodeBorderRadius}
|
borderRadius={nodeBorderRadius}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user