* refactor(minimap): use css for default styles * refactor(controls): use css for default styles * refactor(background): use css for default styles * refactor(edges): add edge type class name * refactor(nodes): use css for default styles * refactor(outputnode): add display name * refactor(wrapnode): cleanup * refactor(rollup): minimize css for prod build * refactor(additional-comps): extract css * test(graphs): adjust for new markup
37 lines
711 B
TypeScript
37 lines
711 B
TypeScript
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;
|