fix(minimap): use abs pos
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user