[FIX] Fix interference between ContextMenus on measurements and Canvas

examples/measurement/distance_createWithMouse_snapping.html

@@ -134,7 +134,7 @@ <h3>Assets</h3>
     // Import the modules we need for this example
     //------------------------------------------------------------------------------------------------------------------
 
-    import {Viewer, XKTLoaderPlugin, ContextMenu, DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.min.es.js";
+    import {Viewer, XKTLoaderPlugin, ContextMenu, DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.es.js";
 
     //------------------------------------------------------------------------------------------------------------------
     // Create a Viewer and arrange the camera
@@ -282,10 +282,13 @@ <h3>Assets</h3>
         ]
     });
 
-    // viewer.cameraControl.on("rightClick", function (e) {
-    //     canvasContextMenu.show(e.pagePos[0], e.pagePos[1]);
-    //     e.event.preventDefault();
-    // });
+    viewer.scene.canvas.canvas.addEventListener('contextmenu', (event) => {
+       const canvasPos = getCanvasPosFromEvent(event);
+        console.log("canvas context menu")
+        canvasContextMenu.show(canvasPos[0], canvasPos[1]);
+        event.event.preventDefault();
+        event.event.stopPropagation();
+    });
 
     //------------------------------------------------------------------------------------------------------------------
     // Create an DistanceMeasurementsPlugin, activate its DistanceMeasuremntsControl
@@ -312,6 +315,31 @@ <h3>Assets</h3>
         e.event.preventDefault();
     });
 
+    const getCanvasPosFromEvent = function (event) {
+        const canvasPos = [];
+        if (!event) {
+            event = window.event;
+            canvasPos[0] = event.x;
+            canvasPos[1] = event.y;
+        } else {
+            let element = event.target;
+            let totalOffsetLeft = 0;
+            let totalOffsetTop = 0;
+            let totalScrollX = 0;
+            let totalScrollY = 0;
+            while (element.offsetParent) {
+                totalOffsetLeft += element.offsetLeft;
+                totalOffsetTop += element.offsetTop;
+                totalScrollX += element.scrollLeft;
+                totalScrollY += element.scrollTop;
+                element = element.offsetParent;
+            }
+            canvasPos[0] = event.pageX + totalScrollX - totalOffsetLeft;
+            canvasPos[1] = event.pageY + totalScrollY - totalOffsetTop;
+        }
+        return canvasPos;
+    };
+
     window.viewer = viewer;
 
 </script>

src/plugins/lib/html/Dot.js

@@ -100,6 +100,7 @@ class Dot {
             dotClickable.addEventListener('contextmenu', (event) => {
                 cfg.onContextMenu(event, this);
                 event.preventDefault();
+                event.stopPropagation();
             });
         }
 

src/plugins/lib/html/Label.js

@@ -66,12 +66,14 @@ class Label {
         if (cfg.onMouseDown) {
             label.addEventListener('mousedown', (event) => {
                 cfg.onMouseDown(event, this);
+                event.stopPropagation();
             });
         }
 
         if (cfg.onMouseUp) {
             label.addEventListener('mouseup', (event) => {
                 cfg.onMouseUp(event, this);
+                event.stopPropagation();
             });
         }
 
@@ -85,6 +87,8 @@ class Label {
             label.addEventListener('contextmenu', (event) => {
                 cfg.onContextMenu(event, this);
                 event.preventDefault();
+                event.stopPropagation();
+                console.log("Label context menu")
             });
         }
     }

src/plugins/lib/html/Wire.js

@@ -117,6 +117,7 @@ class Wire {
             wireClickable.addEventListener('contextmenu', (event) => {
                 cfg.onContextMenu(event, this);
                 event.preventDefault();
+                event.stopPropagation();
             });
         }