From 47cea17703cb431b30c73e0044e7ad2be44d34b7 Mon Sep 17 00:00:00 2001 From: Joseph Caburnay Date: Tue, 6 Jun 2023 09:25:17 +0000 Subject: [PATCH] [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 --- .../web_tour/static/src/tour_pointer/tour_pointer.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/addons/web_tour/static/src/tour_pointer/tour_pointer.js b/addons/web_tour/static/src/tour_pointer/tour_pointer.js index f7a6731192f..5faea7bf50a 100644 --- a/addons/web_tour/static/src/tour_pointer/tour_pointer.js +++ b/addons/web_tour/static/src/tour_pointer/tour_pointer.js @@ -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);