Refactor: Update useEffect dependencies to include activeLayer for ReferenceAisle, ReferenceFloor, ReferenceWall; enhance usePointSnapping with zone snapping functionality and add ReferenceZone component for zone management

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

@@ -11,10 +11,11 @@ const ANGLE_SNAP_DISTANCE_THRESHOLD = 0.5;  // Distance threshold for snapping i
 const CAN_ANGLE_SNAP = true; // Whether snapping is enabled or not
 
 export const usePointSnapping = (currentPoint: { uuid: string, pointType: string, position: [number, number, number] } | null) => {
-    const { aisleStore, wallStore, floorStore } = useSceneContext();
+    const { aisleStore, wallStore, floorStore, zoneStore } = useSceneContext();
     const { aisles, getConnectedPoints: getConnectedAislePoints } = aisleStore();
     const { walls, getConnectedPoints: getConnectedWallPoints } = wallStore();
     const { floors, getConnectedPoints: getConnectedFloorPoints } = floorStore();
+    const { zones, getConnectedPoints: getConnectedZonePoints } = zoneStore();
 
     // Wall Snapping
 
@@ -278,6 +279,93 @@ export const usePointSnapping = (currentPoint: { uuid: string, pointType: string
         };
     }, [currentPoint, getConnectedFloorPoints]);
 
+    // Zone Snapping
+
+    const getAllOtherZonePoints = useCallback(() => {
+        if (!currentPoint) return [];
+
+        return zones.flatMap(zone =>
+            zone.points.filter(point => point.pointUuid !== currentPoint.uuid)
+        );
+    }, [zones, currentPoint]);
+
+    const snapZonePoint = useCallback((position: [number, number, number], tempPoints?: Point[] | []) => {
+        if (!currentPoint || !CAN_POINT_SNAP) return { position: position, isSnapped: false, snappedPoint: null };
+
+        const otherPoints = getAllOtherZonePoints();
+        if (tempPoints) {
+            otherPoints.concat(tempPoints);
+        }
+        const currentVec = new THREE.Vector3(...position);
+
+        for (const point of otherPoints) {
+            const pointVec = new THREE.Vector3(...point.position);
+            const distance = currentVec.distanceTo(pointVec);
+
+            if (distance <= POINT_SNAP_THRESHOLD && currentPoint.pointType === 'Zone') {
+                return { position: point.position, isSnapped: true, snappedPoint: point };
+            }
+        }
+
+        return { position: position, isSnapped: false, snappedPoint: null };
+    }, [currentPoint, getAllOtherZonePoints]);
+
+    const snapZoneAngle = useCallback((newPosition: [number, number, number]): {
+        position: [number, number, number],
+        isSnapped: boolean,
+        snapSources: THREE.Vector3[]
+    } => {
+        if (!currentPoint || !CAN_ANGLE_SNAP) return { position: newPosition, isSnapped: false, snapSources: [] };
+
+        const connectedPoints = getConnectedZonePoints(currentPoint.uuid);
+        if (connectedPoints.length === 0) {
+            return { position: newPosition, isSnapped: false, snapSources: [] };
+        }
+
+        const newPos = new THREE.Vector3(...newPosition);
+        let closestX: { pos: THREE.Vector3, dist: number } | null = null;
+        let closestZ: { pos: THREE.Vector3, dist: number } | null = null;
+
+        for (const connectedPoint of connectedPoints) {
+            const cPos = new THREE.Vector3(...connectedPoint.position);
+            const xDist = Math.abs(newPos.x - cPos.x);
+            const zDist = Math.abs(newPos.z - cPos.z);
+
+            if (xDist < ANGLE_SNAP_DISTANCE_THRESHOLD) {
+                if (!closestX || xDist < closestX.dist) {
+                    closestX = { pos: cPos, dist: xDist };
+                }
+            }
+
+            if (zDist < ANGLE_SNAP_DISTANCE_THRESHOLD) {
+                if (!closestZ || zDist < closestZ.dist) {
+                    closestZ = { pos: cPos, dist: zDist };
+                }
+            }
+        }
+
+        const snappedPos = newPos.clone();
+        const snapSources: THREE.Vector3[] = [];
+
+        if (closestX) {
+            snappedPos.x = closestX.pos.x;
+            snapSources.push(closestX.pos.clone());
+        }
+
+        if (closestZ) {
+            snappedPos.z = closestZ.pos.z;
+            snapSources.push(closestZ.pos.clone());
+        }
+
+        const isSnapped = snapSources.length > 0;
+
+        return {
+            position: [snappedPos.x, snappedPos.y, snappedPos.z],
+            isSnapped,
+            snapSources
+        };
+    }, [currentPoint, getConnectedZonePoints]);
+
     return {
         snapAislePoint,
         snapAisleAngle,
@@ -285,5 +373,7 @@ export const usePointSnapping = (currentPoint: { uuid: string, pointType: string
         snapWallAngle,
         snapFloorPoint,
         snapFloorAngle,
+        snapZonePoint,
+        snapZoneAngle,
     };
 };