From 7a8f88f22425924e0a161932a33e11fa7235ae9a Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 23 Mar 2025 17:22:42 -0500
Subject: [PATCH] feat: safer drag

---
 .../components/SceneProps/index.tsx           | 59 +++++++++++--------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
index f2e4349ea..11d834c2d 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
@@ -266,7 +266,7 @@ export function SceneProps() {
     return () => {
       dissectEvent.off(handleDissectEvent);
     };
-  }, []);
+  }, [display]);
 
   return (
     <>
@@ -275,37 +275,48 @@ export function SceneProps() {
           <mesh rotation={[-Math.PI / 2, 0, 0]}>
             <planeGeometry args={[GRID_SIZE, GRID_SIZE]} />
             <meshStandardMaterial
-              clippingPlanes={[clippingPlane.current]}
+              clippingPlanes={
+                display === TankopediaDisplay.Dissector
+                  ? [clippingPlane.current]
+                  : []
+              }
               map={gridTexture}
               transparent
             />
           </mesh>
 
-          <group ref={dissector}>
-            <mesh
-              position={[GRID_SIZE / 8, 0, 0]}
-              rotation={[-Math.PI / 2, 0, Math.PI / 2]}
-              onPointerDown={(event) => {
-                if (display !== TankopediaDisplay.Dissector) return;
+          {display === TankopediaDisplay.Dissector && (
+            <group ref={dissector}>
+              <mesh
+                position={[GRID_SIZE / 8, 0, 0]}
+                rotation={[-Math.PI / 2, 0, Math.PI / 2]}
+                onPointerDown={(event) => {
+                  if (
+                    display !== TankopediaDisplay.Dissector ||
+                    !dissector.current ||
+                    event.point.distanceTo(dissector.current.position) > 1.5
+                  )
+                    return;
 
-                event.stopPropagation();
+                  event.stopPropagation();
 
-                position.current.set(
-                  event.nativeEvent.clientX,
-                  event.nativeEvent.clientY,
-                );
-                mutateTankopediaEphemeral((draft) => {
-                  draft.controlsEnabled = false;
-                });
+                  position.current.set(
+                    event.nativeEvent.clientX,
+                    event.nativeEvent.clientY,
+                  );
+                  mutateTankopediaEphemeral((draft) => {
+                    draft.controlsEnabled = false;
+                  });
 
-                window.addEventListener('pointermove', handlePointerMove);
-                window.addEventListener('pointerup', handlePointerUp);
-              }}
-            >
-              <planeGeometry args={[GRID_SIZE / 2, GRID_SIZE / 4]} />
-              <meshStandardMaterial map={dragTexture} transparent />
-            </mesh>
-          </group>
+                  window.addEventListener('pointermove', handlePointerMove);
+                  window.addEventListener('pointerup', handlePointerUp);
+                }}
+              >
+                <planeGeometry args={[GRID_SIZE / 2, GRID_SIZE / 4]} />
+                <meshStandardMaterial map={dragTexture} transparent />
+              </mesh>
+            </group>
+          )}
         </>
       )}