[FIX] web_tour: do not reposition pointer if the anchor didn't move

Before this fix, the tour pointer is always repositioned and the animation is
behaving very poorly. Like it's suffering from epilepsy. This is because
`reposition` method relies on dom mutation to calculate the correct position
which is detected by the tour runner and the tour runner thinks that it needs to
check the current step which eventually calls the `reposition` method again,
being stuck in a loop.

In this commit, we introduce and additional check before calling `reposition`.
If the last x and y of the anchor (current step's element) changed by less than
a pixel, we consider it as static, and we don't call the `reposition` function.

Task-id: 3369617
X-original-commit: cf42ed86220a397f24fca497bf5a77e2b72ba4e2
Part-of: odoo/odoo#125262
This commit is contained in:
Joseph Caburnay
2023-06-16 10:52:48 +02:00
parent 6958f719e8
commit 47cea17703
@@ -54,6 +54,7 @@ export class TourPointer extends Component {
let dimensions = null;
let lastMeasuredContent = null;
let lastOpenState = this.isOpen;
let [anchorX, anchorY] = [0, 0];
useEffect(
() => {
@@ -90,7 +91,16 @@ export class TourPointer extends Component {
if (!this.isOpen) {
const { anchor } = this.props.pointerState;
if (anchor) {
const { x, width } = anchor.getBoundingClientRect();
const { x, y, width } = anchor.getBoundingClientRect();
const [lastAnchorX, lastAnchorY] = [anchorX, anchorY];
[anchorX, anchorY] = [x, y];
// Let's just say that the anchor is static if it moved less than 1px.
const delta = Math.sqrt(
Math.pow(x - lastAnchorX, 2) + Math.pow(y - lastAnchorY, 2)
);
if (delta < 1) {
return;
}
const wouldOverflow =
window.innerWidth - x - width / 2 < dimensions?.width;
el.classList.toggle("o_expand_left", wouldOverflow);