fix: preventDefault onContext & react only on button=0 clicks

pmndrs · Apr 22, 2024 · 399eb62 · 399eb62
1 parent 153607d
commit 399eb62
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/src/web/pivotControls/AxisArrow.tsx b/src/web/pivotControls/AxisArrow.tsx
@@ -68,6 +68,10 @@ export const AxisArrow: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2 }>
 
   const onPointerDown = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.innerText = `${translation.current[axis].toFixed(2)}`
         divRef.current.style.display = 'block'
@@ -116,6 +120,10 @@ export const AxisArrow: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2 }>
 
   const onPointerUp = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.style.display = 'none'
       }
@@ -154,6 +162,10 @@ export const AxisArrow: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2 }>
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
         onPointerOut={onPointerOut}
+        onContextMenu={(e) => {
+          e.stopPropagation()
+          e.nativeEvent.preventDefault()
+        }}
       >
         {annotations && (
           <Html position={[0, -coneLength, 0]}>

diff --git a/src/web/pivotControls/AxisRotator.tsx b/src/web/pivotControls/AxisRotator.tsx
@@ -97,6 +97,10 @@ export const AxisRotator: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
 
   const onPointerDown = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`
         divRef.current.style.display = 'block'
@@ -163,6 +167,10 @@ export const AxisRotator: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
 
   const onPointerUp = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.style.display = 'none'
       }
@@ -207,6 +215,10 @@ export const AxisRotator: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
       onPointerMove={onPointerMove}
       onPointerUp={onPointerUp}
       onPointerOut={onPointerOut}
+      onContextMenu={(e) => {
+        e.stopPropagation()
+        e.nativeEvent.preventDefault()
+      }}
       matrix={matrixL}
       matrixAutoUpdate={false}
     >

diff --git a/src/web/pivotControls/PlaneSlider.tsx b/src/web/pivotControls/PlaneSlider.tsx
@@ -70,6 +70,10 @@ export const PlaneSlider: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
 
   const onPointerDown = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.innerText = `${translation.current[(axis + 1) % 3].toFixed(2)}, ${translation.current[
           (axis + 2) % 3
@@ -144,6 +148,10 @@ export const PlaneSlider: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
 
   const onPointerUp = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.style.display = 'none'
       }
@@ -208,6 +216,10 @@ export const PlaneSlider: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
           onPointerMove={onPointerMove}
           onPointerUp={onPointerUp}
           onPointerOut={onPointerOut}
+          onContextMenu={(e) => {
+            e.stopPropagation()
+            e.nativeEvent.preventDefault()
+          }}
           scale={length}
           userData={userData}
         >

diff --git a/src/web/pivotControls/ScalingSphere.tsx b/src/web/pivotControls/ScalingSphere.tsx
@@ -80,6 +80,10 @@ export const ScalingSphere: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2
 
   const onPointerDown = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.innerText = `${scaleCur.current.toFixed(2)}`
         divRef.current.style.display = 'block'
@@ -142,6 +146,10 @@ export const ScalingSphere: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2
 
   const onPointerUp = React.useCallback(
     (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) {
+        e.stopPropagation()
+        return
+      }
       if (annotations) {
         divRef.current.style.display = 'none'
       }
@@ -180,6 +188,10 @@ export const ScalingSphere: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
         onPointerOut={onPointerOut}
+        onContextMenu={(e) => {
+          e.stopPropagation()
+          e.nativeEvent.preventDefault()
+        }}
       >
         {annotations && (
           <Html position={[0, position / 2, 0]}>