Fix scene pointer events for Firefox

nerfstudio-project · Jun 25, 2024 · 3439b96 · 3439b96
1 parent 817a915
commit 3439b96
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 21 deletions.
diff --git a/src/viser/client/src/App.tsx b/src/viser/client/src/App.tsx
@@ -289,12 +289,8 @@ function ViewerCanvas({ children }: { children: React.ReactNode }) {
         const firstScreenEvent = screenEventList[0];
         const lastScreenEvent = screenEventList![screenEventList.length - 1];
         if (
-          Math.abs(
-            e.nativeEvent.offsetX - lastScreenEvent.nativeEvent.offsetX,
-          ) <= 3 &&
-          Math.abs(
-            e.nativeEvent.offsetY - lastScreenEvent.nativeEvent.offsetY,
-          ) <= 3
+          Math.abs(e.clientX - lastScreenEvent.clientX) <= 3 &&
+          Math.abs(e.clientY - lastScreenEvent.clientY) <= 3
         )
           return;
 
@@ -310,10 +306,10 @@ function ViewerCanvas({ children }: { children: React.ReactNode }) {
           ctx.strokeStyle = "blue";
           ctx.globalAlpha = 0.2;
           ctx.fillRect(
-            firstScreenEvent.nativeEvent.offsetX,
-            firstScreenEvent.nativeEvent.offsetY,
-            e.nativeEvent.offsetX - firstScreenEvent.nativeEvent.offsetX,
-            e.nativeEvent.offsetY - firstScreenEvent.nativeEvent.offsetY,
+            firstScreenEvent.clientX,
+            firstScreenEvent.clientY,
+            e.clientX - firstScreenEvent.clientX,
+            e.clientY - firstScreenEvent.clientY,
           );
           ctx.globalAlpha = 1.0;
           ctx.stroke();

diff --git a/src/viser/client/src/ClickUtils.tsx b/src/viser/client/src/ClickUtils.tsx
@@ -12,15 +12,9 @@ export function clickToNDC(
 ): THREE.Vector2 {
   const mouseVector = new THREE.Vector2();
   mouseVector.x =
-    2 *
-      ((event.nativeEvent.offsetX + 0.5) /
-        viewer.canvasRef.current!.clientWidth) -
-    1;
+    2 * ((event.clientX + 0.5) / viewer.canvasRef.current!.clientWidth) - 1;
   mouseVector.y =
-    1 -
-    2 *
-      ((event.nativeEvent.offsetY + 0.5) /
-        viewer.canvasRef.current!.clientHeight);
+    1 - 2 * ((event.clientY + 0.5) / viewer.canvasRef.current!.clientHeight);
   return mouseVector;
 }
 
@@ -34,10 +28,9 @@ export function clickToOpenCV(
   event: React.PointerEvent<HTMLDivElement>,
 ): THREE.Vector2 {
   const mouseVector = new THREE.Vector2();
-  mouseVector.x =
-    (event.nativeEvent.offsetX + 0.5) / viewer.canvasRef.current!.clientWidth;
+  mouseVector.x = (event.clientX + 0.5) / viewer.canvasRef.current!.clientWidth;
   mouseVector.y =
-    (event.nativeEvent.offsetY + 0.5) / viewer.canvasRef.current!.clientHeight;
+    (event.clientY + 0.5) / viewer.canvasRef.current!.clientHeight;
   return mouseVector;
 }