feat: Implement zone management features including creation, deletion, and updates

- Added zone handling in the Line component for removing and updating zones based on points.
- Enhanced Point component to support snapping and updating zone positions.
- Introduced zone-related API calls for upserting and deleting zones.
- Updated zone store to manage zones more effectively, including methods for removing zones by points and getting zones by point IDs.
- Improved zone instance rendering to handle dynamic point connections.
- Refactored zone creation logic to allow for better interaction and snapping behavior.
- Updated API endpoints for zone operations to use version 1 of the API.

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

@@ -14,6 +14,8 @@ import { getUserData } from '../../../functions/getUserData';
 // import { deleteWallApi } from '../../../services/factoryBuilder/wall/deleteWallApi';
 // import { upsertFloorApi } from '../../../services/factoryBuilder/floor/upsertFloorApi';
 // import { deleteFloorApi } from '../../../services/factoryBuilder/floor/deleteFloorApi';
+// import { deleteZoneApi } from '../../../services/factoryBuilder/zone/deleteZoneApi';
+// import { upsertZoneApi } from '../../../services/factoryBuilder/zone/upsertZoneApi';
 
 interface LineProps {
     points: [Point, Point];
@@ -26,9 +28,10 @@ function Line({ points }: Readonly<LineProps>) {
     const [isDeletable, setIsDeletable] = useState(false);
     const { socket } = useSocketStore();
     const { toolMode } = useToolMode();
-    const { wallStore, floorStore } = useSceneContext();
+    const { wallStore, floorStore, zoneStore } = useSceneContext();
     const { removeWallByPoints, setPosition: setWallPosition, getWallsByPointId } = wallStore();
     const { removeFloorByPoints, setPosition: setFloorPosition, getFloorsByPointId } = floorStore();
+    const { removeZoneByPoints, setPosition: setZonePosition, getZonesByPointId } = zoneStore();
     const { userId, organization } = getUserData();
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
@@ -163,6 +166,53 @@ function Line({ points }: Readonly<LineProps>) {
 
                 setHoveredLine(null);
             }
+            if (points[0].pointType === 'Zone' && points[1].pointType === 'Zone') {
+                const { removedZones, updatedZones } = removeZoneByPoints(points);
+                if (removedZones.length > 0) {
+                    removedZones.forEach(zone => {
+                        if (projectId) {
+
+                            // API
+
+                            // deleteZoneApi(projectId, selectedVersion?.versionId || '', zone.zoneUuid);
+
+                            // SOCKET
+
+                            const data = {
+                                zoneUuid: zone.zoneUuid,
+                                projectId: projectId,
+                                versionId: selectedVersion?.versionId || '',
+                                userId: userId,
+                                organization: organization
+                            }
+
+                            socket.emit('v1:zone:delete', data);
+                        }
+                    });
+                }
+                if (updatedZones.length > 0) {
+                    updatedZones.forEach(zone => {
+                        if (projectId) {
+
+                            // API
+
+                            // upsertZoneApi(projectId, selectedVersion?.versionId || '', zone);
+
+                            // SOCKET
+
+                            const data = {
+                                zoneData: zone,
+                                projectId: projectId,
+                                versionId: selectedVersion?.versionId || '',
+                                userId: userId,
+                                organization: organization
+                            }
+
+                            socket.emit('v1:zone:add', data);
+                        }
+                    });
+                }
+            }
             gl.domElement.style.cursor = 'default';
         }
     }
@@ -194,6 +244,10 @@ function Line({ points }: Readonly<LineProps>) {
                     setFloorPosition(points[0].pointUuid, [newStart.x, newStart.y, newStart.z]);
                     setFloorPosition(points[1].pointUuid, [newEnd.x, newEnd.y, newEnd.z]);
                 }
+                if (points[0].pointType === 'Zone' && points[1].pointType === 'Zone') {
+                    setZonePosition(points[0].pointUuid, [newStart.x, newStart.y, newStart.z]);
+                    setZonePosition(points[1].pointUuid, [newEnd.x, newEnd.y, newEnd.z]);
+                }
             }
         }
     };
@@ -271,6 +325,33 @@ function Line({ points }: Readonly<LineProps>) {
                     socket.emit('v1:model-Floor:add', data);
                 })
             }
+        } else if (points[0].pointType === 'Zone' && points[1].pointType === 'Zone') {
+            const updatedZones1 = getZonesByPointId(points[0].pointUuid);
+            const updatedZones2 = getZonesByPointId(points[1].pointUuid);
+            const updatedZones = [...updatedZones1, ...updatedZones2].filter((zone, index, self) => index === self.findIndex((z) => z.zoneUuid === zone.zoneUuid));
+
+            if (updatedZones.length > 0 && projectId) {
+                updatedZones.forEach(updatedZone => {
+
+                    // API
+
+                    // upsertZoneApi(projectId, selectedVersion?.versionId || '', updatedZone).catch((error) => {
+                    //     console.error('Error updating zone:', error);
+                    // });
+
+                    // SOCKET
+
+                    const data = {
+                        zoneData: updatedZone,
+                        projectId: projectId,
+                        versionId: selectedVersion?.versionId || '',
+                        userId: userId,
+                        organization: organization
+                    }
+
+                    socket.emit('v1:zone:add', data);
+                })
+            }
         }
     }