GraphNG: Fix exemplars window position (#33427)

This commit is contained in:
Zoltán Bedi 2021-04-28 09:37:35 +02:00 committed by GitHub
parent 3a93313f75
commit 70bafc2725
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -25,7 +25,7 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
...otherProps
}) => {
const tooltipRef = useRef<HTMLDivElement>(null);
const tooltipMeasurementRef = useRef<Dimensions2D>({ width: 0, height: 0 });
const [tooltipMeasurement, setTooltipMeasurement] = useState<Dimensions2D>({ width: 0, height: 0 });
const { width, height } = useWindowSize();
const [placement, setPlacement] = useState({
x: positionX + offsetX,
@ -41,15 +41,15 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
const tW = Math.floor(entry.contentRect.width + 2 * 8); // adding padding until Safari supports borderBoxSize
const tH = Math.floor(entry.contentRect.height + 2 * 8);
if (tooltipMeasurementRef.current.width !== tW || tooltipMeasurementRef.current.height !== tH) {
tooltipMeasurementRef.current = {
if (tooltipMeasurement.width !== tW || tooltipMeasurement.height !== tH) {
setTooltipMeasurement({
width: tW,
height: tH,
};
});
}
}
}),
[]
[tooltipMeasurement.height, tooltipMeasurement.width]
);
useLayoutEffect(() => {
@ -67,15 +67,14 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
let xO = 0,
yO = 0;
if (tooltipRef && tooltipRef.current) {
const measurement = tooltipMeasurementRef.current;
const xOverflow = width - (positionX + measurement.width);
const yOverflow = height - (positionY + measurement.height);
const xOverflow = width - (positionX + tooltipMeasurement.width);
const yOverflow = height - (positionY + tooltipMeasurement.height);
if (xOverflow < 0) {
xO = measurement.width;
xO = tooltipMeasurement.width;
}
if (yOverflow < 0) {
yO = measurement.height;
yO = tooltipMeasurement.height;
}
}
@ -83,7 +82,7 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
x: positionX + offsetX - xO,
y: positionY + offsetY - yO,
});
}, [width, height, positionX, offsetX, positionY, offsetY]);
}, [width, height, positionX, offsetX, positionY, offsetY, tooltipMeasurement.width, tooltipMeasurement.height]);
const styles = useStyles(getStyles);