feat: Enhance cursor handling and mouse action notes in the footer and builder components

app/src/modules/builder/line/line.tsx

@@ -9,6 +9,7 @@ import * as Constants from '../../../types/world/worldConstants';
 import { useVersionContext } from '../version/versionContext';
 import { useParams } from 'react-router-dom';
 import { getUserData } from '../../../functions/getUserData';
+import { handleCanvasCursors } from '../../../utils/mouseUtils/handleCanvasCursors';
 
 // import { upsertWallApi } from '../../../services/factoryBuilder/wall/upsertWallApi';
 // import { deleteWallApi } from '../../../services/factoryBuilder/wall/deleteWallApi';
@@ -23,7 +24,7 @@ interface LineProps {
 
 function Line({ points }: Readonly<LineProps>) {
     const [isHovered, setIsHovered] = useState(false);
-    const { raycaster, camera, pointer, gl } = useThree();
+    const { raycaster, camera, pointer } = useThree();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isDeletable, setIsDeletable] = useState(false);
     const { socket } = useSocketStore();
@@ -213,7 +214,7 @@ function Line({ points }: Readonly<LineProps>) {
                     });
                 }
             }
-            gl.domElement.style.cursor = 'default';
+            handleCanvasCursors('default');
         }
     }
 
@@ -224,7 +225,7 @@ function Line({ points }: Readonly<LineProps>) {
             const hit = raycaster.ray.intersectPlane(plane, intersectionPoint);
 
             if (hit) {
-                gl.domElement.style.cursor = 'move';
+                handleCanvasCursors('grabbing');
                 const positionWithOffset = new THREE.Vector3().addVectors(hit, dragOffset);
 
                 const start = new THREE.Vector3(...points[0].position);
@@ -269,7 +270,7 @@ function Line({ points }: Readonly<LineProps>) {
 
     const handleDragEnd = (points: [Point, Point]) => {
         if (toolMode !== 'move' || !dragOffset) return;
-        gl.domElement.style.cursor = 'default';
+        handleCanvasCursors('default');
         setDragOffset(null);
         if (points[0].pointType === 'Wall' && points[1].pointType === 'Wall') {
             const updatedWalls1 = getWallsByPointId(points[0].pointUuid);
@@ -377,14 +378,14 @@ function Line({ points }: Readonly<LineProps>) {
                         setHoveredLine(points);
                         setIsHovered(true)
                         if (toolMode === 'move' && !hoveredPoint) {
-                            gl.domElement.style.cursor = 'pointer';
+                            handleCanvasCursors('grab');
                         }
                     }
                 }}
                 onPointerOut={() => {
                     if (hoveredLine) {
                         setHoveredLine(null);
-                        gl.domElement.style.cursor = 'default';
+                        handleCanvasCursors('default');
                     }
                     setIsHovered(false)
                 }}

app/src/modules/builder/point/point.tsx

@@ -20,10 +20,11 @@ import { useSceneContext } from '../../scene/sceneContext';
 // import { deleteZoneApi } from '../../../services/factoryBuilder/zone/deleteZoneApi';
 
 import { getUserData } from '../../../functions/getUserData';
+import { handleCanvasCursors } from '../../../utils/mouseUtils/handleCanvasCursors';
 
 function Point({ point }: { readonly point: Point }) {
     const materialRef = useRef<THREE.ShaderMaterial>(null);
-    const { raycaster, camera, pointer, gl } = useThree();
+    const { raycaster, camera, pointer } = useThree();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isHovered, setIsHovered] = useState(false);
     const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
@@ -44,7 +45,7 @@ function Point({ point }: { readonly point: Point }) {
     const colors = getColor(point);
 
     useEffect(() => {
-        gl.domElement.style.cursor = 'default';
+        handleCanvasCursors('default');
     }, [toolMode])
 
     function getColor(point: Point) {
@@ -114,7 +115,7 @@ function Point({ point }: { readonly point: Point }) {
             const hit = raycaster.ray.intersectPlane(plane, intersectionPoint);
 
             if (hit) {
-                gl.domElement.style.cursor = 'move';
+                handleCanvasCursors('grabbing');
                 const positionWithOffset = new THREE.Vector3().addVectors(hit, dragOffset);
                 const newPosition: [number, number, number] = [positionWithOffset.x, positionWithOffset.y, positionWithOffset.z];
 
@@ -152,7 +153,7 @@ function Point({ point }: { readonly point: Point }) {
     };
 
     const handleDragEnd = (point: Point) => {
-        gl.domElement.style.cursor = 'default';
+        handleCanvasCursors('default');
         setDragOffset(null);
         if (toolMode !== 'move') return;
         if (point.pointType === 'Aisle') {
@@ -396,7 +397,7 @@ function Point({ point }: { readonly point: Point }) {
                     });
                 }
             }
-            gl.domElement.style.cursor = 'default';
+            handleCanvasCursors('default');
         }
     }
 
@@ -431,14 +432,14 @@ function Point({ point }: { readonly point: Point }) {
                         setHoveredPoint(point);
                         setIsHovered(true);
                         if (toolMode === 'move') {
-                            gl.domElement.style.cursor = 'pointer';
+                            handleCanvasCursors('grab');
                         }
                     }
                 }}
                 onPointerOut={() => {
                     if (hoveredPoint) {
                         setHoveredPoint(null);
-                        gl.domElement.style.cursor = 'default';
+                        handleCanvasCursors('default');
                     }
                     setIsHovered(false)
                 }}