Refactor Vue tooltip positioning to use shared pointer state

Author: Azornes

js/interaction/resolution_master_interaction_methods.js

@@ -522,6 +522,15 @@ export const interactionMethods = {
             }
         }
         this.tooltipMousePos = { x: e.canvasX, y: e.canvasY };
+        if (this.isVueNodesMode?.()) {
+            this._vueCompatTooltipPointerPosition = {
+                clientX: e.clientX,
+                clientY: e.clientY
+            };
+            if (newHover === this.hoverElement && this.showTooltip && this.tooltipElement === newHover) {
+                this.positionVueCompatTooltip?.(this._vueCompatTooltipPointerPosition);
+            }
+        }
         if (newHover !== this.hoverElement) {
             this.hoverElement = newHover;
             this.handleTooltipHover(newHover, e);
@@ -542,13 +551,12 @@ export const interactionMethods = {
         }
         if (element && this.tooltips[element]) {
             const initialMousePos = { x: e.canvasX, y: e.canvasY };
-            const initialClientPos = { clientX: e.clientX, clientY: e.clientY };
             this.tooltipTimer = setTimeout(() => {
                 this.tooltipElement = element;
                 this.showTooltip = true;
                 this.tooltipFixedPos = initialMousePos;
                 if (this.isVueNodesMode?.()) {
-                    this.showVueCompatTooltip?.(element, initialClientPos);
+                    this.showVueCompatTooltip?.(element, this._vueCompatTooltipPointerPosition);
                 } else {
                     this.requestCanvasUpdate(true);
                 }

js/node/resolution_master_node_lifecycle.js

@@ -507,6 +507,7 @@ export const nodeLifecycleMethods = {
                 this.tooltipTimer = null;
             }
             this.hideVueCompatTooltip();
+            this._vueCompatTooltipPointerPosition = null;
             this.hoverElement = null;
             this.tooltipElement = null;
             this.showTooltip = false;
@@ -557,6 +558,18 @@ export const nodeLifecycleMethods = {
         tooltip.style.left = "0px";
         tooltip.style.top = "0px";
 
+        this.positionVueCompatTooltip(pointerPosition);
+        tooltip.style.visibility = "visible";
+    },
+
+    positionVueCompatTooltip(pointerPosition) {
+        const tooltip = this._vueCompatTooltip;
+        const clientX = Number(pointerPosition?.clientX);
+        const clientY = Number(pointerPosition?.clientY);
+        if (!tooltip || !Number.isFinite(clientX) || !Number.isFinite(clientY) || typeof document === "undefined") {
+            return;
+        }
+
         const tooltipRect = tooltip.getBoundingClientRect();
         const viewportWidth = document.documentElement?.clientWidth || globalThis.innerWidth || 0;
         const viewportHeight = document.documentElement?.clientHeight || globalThis.innerHeight || 0;
@@ -579,7 +592,6 @@ export const nodeLifecycleMethods = {
 
         tooltip.style.left = `${Math.round(left)}px`;
         tooltip.style.top = `${Math.round(top)}px`;
-        tooltip.style.visibility = "visible";
     },
 
     hideVueCompatTooltip() {
@@ -591,6 +603,7 @@ export const nodeLifecycleMethods = {
     teardownVueCompatTooltip() {
         this._vueCompatTooltip?.remove?.();
         this._vueCompatTooltip = null;
+        this._vueCompatTooltipPointerPosition = null;
     },
 
     teardownVueCompatCanvasEvents() {

tests/js/node_lifecycle.test.mjs

@@ -210,6 +210,10 @@ test("Vue tooltip is rendered in the document overlay and constrained to the vie
         assert.equal(tooltip.style.top, "40px");
         assert.equal(tooltip.style.visibility, "visible");
 
+        controller.positionVueCompatTooltip({ clientX: 20, clientY: 150 });
+        assert.equal(tooltip.style.left, "35px");
+        assert.equal(tooltip.style.top, "100px");
+
         controller.hideVueCompatTooltip();
         assert.equal(tooltip.style.display, "none");