Merge pull request #1703 from xeokit/XCD-175-fix-measurementControl-m…

…arker XCD-175 Fix {Angle,Distance}MeasurementsMouseControl green/red marker's misplacement
xeokit · Oct 18, 2024 · 8b80b50 · 8b80b50
2 parents b0389cf + 5f5fc12
commit 8b80b50
Show file tree

Hide file tree

Showing 8 changed files with 288 additions and 286 deletions.
diff --git a/dist/xeokit-sdk.cjs.js b/dist/xeokit-sdk.cjs.js
diff --git a/dist/xeokit-sdk.es.js b/dist/xeokit-sdk.es.js
diff --git a/dist/xeokit-sdk.es5.js b/dist/xeokit-sdk.es5.js
diff --git a/dist/xeokit-sdk.min.cjs.js b/dist/xeokit-sdk.min.cjs.js
diff --git a/dist/xeokit-sdk.min.es.js b/dist/xeokit-sdk.min.es.js
diff --git a/dist/xeokit-sdk.min.es5.js b/dist/xeokit-sdk.min.es5.js
diff --git a/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js b/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js
@@ -1,4 +1,5 @@
 import {math} from "../../viewer/scene/math/math.js";
+import {transformToNode} from "../lib/ui/index.js";
 import {AngleMeasurementsControl} from "./AngleMeasurementsControl.js";
 
 const MOUSE_FINDING_ORIGIN = 0;
@@ -172,9 +173,6 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         const mouseHoverCanvasPos = math.vec2();
         this._currentAngleMeasurement = null;
 
-        const getTop = el => el.offsetTop + (el.offsetParent && (el.offsetParent !== canvas.parentNode) && getTop(el.offsetParent));
-        const getLeft = el => el.offsetLeft + (el.offsetParent && (el.offsetParent !== canvas.parentNode) && getLeft(el.offsetParent));
-
         const pagePos = math.vec2();
 
         const hoverOn = event => {
@@ -209,8 +207,10 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
                             this.markerDiv.style.left = `${pagePos[0] - 5}px`;
                             this.markerDiv.style.top = `${pagePos[1] - 5}px`;
                         } else {
-                            this.markerDiv.style.left = `${getLeft(canvas) + canvasPos[0] - 5}px`;
-                            this.markerDiv.style.top = `${getTop(canvas) + canvasPos[1] - 5}px`;
+                            const markerPos = math.vec2(canvasPos);
+                            transformToNode(canvas, this.markerDiv.parentNode, markerPos);
+                            this.markerDiv.style.left = `${markerPos[0] - 5}px`;
+                            this.markerDiv.style.top = `${markerPos[1] - 5}px`;
                         }
                         break;
                     case MOUSE_FINDING_CORNER:

diff --git a/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js b/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js
@@ -1,4 +1,5 @@
 import {math} from "../../viewer/scene/math/math.js";
+import {transformToNode} from "../lib/ui/index.js";
 import {DistanceMeasurementsControl} from "./DistanceMeasurementsControl.js";
 
 const MOUSE_FIRST_CLICK_EXPECTED = 0;
@@ -181,9 +182,6 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
 
         this._mouseState = MOUSE_FIRST_CLICK_EXPECTED;
 
-        const getTop = el => el.offsetTop + (el.offsetParent && (el.offsetParent !== canvas.parentNode) && getTop(el.offsetParent));
-        const getLeft = el => el.offsetLeft + (el.offsetParent && (el.offsetParent !== canvas.parentNode) && getLeft(el.offsetParent));
-
         const pagePos = math.vec2();
 
         const hoverOn = event => {
@@ -198,8 +196,10 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
                         this._markerDiv.style.left = `${pagePos[0] - 5}px`;
                         this._markerDiv.style.top = `${pagePos[1] - 5}px`;
                     } else {
-                        this._markerDiv.style.left = `${getLeft(canvas) + canvasPos[0] - 5}px`;
-                        this._markerDiv.style.top = `${getTop(canvas) + canvasPos[1] - 5}px`;
+                        const markerPos = math.vec2(canvasPos);
+                        transformToNode(canvas, this._markerDiv.parentNode, markerPos);
+                        this._markerDiv.style.left = `${markerPos[0] - 5}px`;
+                        this._markerDiv.style.top = `${markerPos[1] - 5}px`;
                     }
 
                     this._markerDiv.style.background = "pink";