fix(minimap): use abs pos

This commit is contained in:
moklick
2021-11-04 14:14:11 +01:00
parent 1db53e8fe2
commit a3a9249d17
+28 -18
View File
@@ -23,7 +23,13 @@ declare const window: any;
const defaultWidth = 200; const defaultWidth = 200;
const defaultHeight = 150; const defaultHeight = 150;
const selector = (s: ReactFlowState) => ({ width: s.width, height: s.height, transform: s.transform, nodes: s.nodes }); const selector = (s: ReactFlowState) => ({
width: s.width,
height: s.height,
transform: s.transform,
nodes: s.nodes,
nodeLookup: s.nodeLookup,
});
const MiniMap = ({ const MiniMap = ({
style, style,
@@ -35,7 +41,7 @@ const MiniMap = ({
nodeStrokeWidth = 2, nodeStrokeWidth = 2,
maskColor = 'rgb(240, 242, 243, 0.7)', maskColor = 'rgb(240, 242, 243, 0.7)',
}: MiniMapProps) => { }: MiniMapProps) => {
const { width: containerWidth, height: containerHeight, transform, nodes } = useStore(selector, shallow); const { width: containerWidth, height: containerHeight, transform, nodes, nodeLookup } = useStore(selector, shallow);
const [tX, tY, tScale] = transform; const [tX, tY, tScale] = transform;
const mapClasses = cc(['react-flow__minimap', className]); const mapClasses = cc(['react-flow__minimap', className]);
@@ -77,22 +83,26 @@ const MiniMap = ({
> >
{nodes {nodes
.filter((node) => !node.isHidden && node.width && node.height) .filter((node) => !node.isHidden && node.width && node.height)
.map((node) => ( .map((node) => {
<MiniMapNode const positionAbsolute = nodeLookup.get(node.id)?.positionAbsolute;
key={node.id}
x={node.position.x} return (
y={node.position.y} <MiniMapNode
width={node.width!} key={node.id}
height={node.height!} x={positionAbsolute?.x || 0}
style={node.style} y={positionAbsolute?.y || 0}
className={nodeClassNameFunc(node)} width={node.width!}
color={nodeColorFunc(node)} height={node.height!}
borderRadius={nodeBorderRadius} style={node.style}
strokeColor={nodeStrokeColorFunc(node)} className={nodeClassNameFunc(node)}
strokeWidth={nodeStrokeWidth} color={nodeColorFunc(node)}
shapeRendering={shapeRendering} borderRadius={nodeBorderRadius}
/> strokeColor={nodeStrokeColorFunc(node)}
))} strokeWidth={nodeStrokeWidth}
shapeRendering={shapeRendering}
/>
);
})}
<path <path
className="react-flow__minimap-mask" className="react-flow__minimap-mask"
d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z