Merge pull request #1418 from xeokit/fix-measurement-dot-position

Robust placement of measurement dot
xeokit · Mar 17, 2024 · 3ce3877 · 3ce3877
2 parents f047870 + a1e21ff
commit 3ce3877
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js b/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js
@@ -189,6 +189,10 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
         const mouseWorldPos = math.vec3();
         const mouseHoverCanvasPos = math.vec2();
         this._currentAngleMeasurement = null;
+
+        const getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
+        const getLeft = el => el.offsetLeft + (el.offsetParent && getLeft(el.offsetParent));
+
         this._onMouseHoverSurface = cameraControl.on(
             this._snapping
                 ? "hoverSnapOrSurface"
@@ -220,13 +224,9 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
                 mouseHoverCanvasPos.set(canvasPos);
                 switch (this._mouseState) {
                     case MOUSE_FINDING_ORIGIN:
-                        const canvasBoundRect = canvas.getBoundingClientRect();
-                        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-                        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                        const canvasLeftEdge = canvasBoundRect.left + scrollLeft;
-                        const canvasTopEdge = canvasBoundRect.top + scrollTop;
-                        this.markerDiv.style.left = `${canvasLeftEdge + canvasPos[0] - 5}px`;
-                        this.markerDiv.style.top = `${canvasTopEdge + canvasPos[1] - 5}px`;
+                        this.markerDiv.style.left = `${getLeft(canvas) + canvasPos[0] - 5}px`;
+                        this.markerDiv.style.top = `${getTop(canvas) + canvasPos[1] - 5}px`;
+
                         break;
                     case MOUSE_FINDING_CORNER:
                         if (this._currentAngleMeasurement) {

diff --git a/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js b/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js
@@ -197,6 +197,9 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
 
         this._mouseState = MOUSE_FIRST_CLICK_EXPECTED;
 
+        const getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
+        const getLeft = el => el.offsetLeft + (el.offsetParent && getLeft(el.offsetParent));
+
         this._onCameraControlHoverSnapOrSurface = cameraControl.on(
             this._snapping
                 ? "hoverSnapOrSurface"
@@ -207,16 +210,8 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
                 pointerCanvasPos.set(event.canvasPos);
                 if (this._mouseState === MOUSE_FIRST_CLICK_EXPECTED) {
 
-                   // const canvasBoundary = getCanvasBoundary();
-
-                    const canvasBoundRect = canvas.getBoundingClientRect();
-                    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                    const canvasLeftEdge = canvasBoundRect.left + scrollLeft;
-                    const canvasTopEdge = canvasBoundRect.top + scrollTop;
-
-                    this._markerDiv.style.left = `${canvasLeftEdge + canvasPos[0] - 5}px`;
-                    this._markerDiv.style.top = `${canvasTopEdge + canvasPos[1] - 5}px`;
+                    this._markerDiv.style.left = `${getLeft(canvas) + canvasPos[0] - 5}px`;
+                    this._markerDiv.style.top = `${getTop(canvas) + canvasPos[1] - 5}px`;
 
                     this._markerDiv.style.background = "pink";
                     if (event.snappedToVertex || event.snappedToEdge) {