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/floor/floorCreator/floorCreator.tsx

@@ -30,7 +30,7 @@ function FloorCreator() {
 
     const [tempPoints, setTempPoints] = useState<Point[]>([]);
     const [isCreating, setIsCreating] = useState(false);
-    const { floorDepth, isBeveled, bevelStrength, sideMaterial, topMaterial, snappedPosition, snappedPoint } = useBuilderStore();
+    const { floorDepth, isBeveled, bevelStrength, sideMaterial, topMaterial, snappedPosition, snappedPoint, setSnappedPoint, setSnappedPosition } = useBuilderStore();
 
     useEffect(() => {
         const canvasElement = gl.domElement;
@@ -64,11 +64,11 @@ function FloorCreator() {
 
             const pointIntersects = raycaster.intersectObjects(scene.children).find((intersect) => intersect.object.name === 'Floor-Point');
 
-            const floorIntersect = raycaster.intersectObjects(scene.children).find((intersect) => intersect.object.name === 'Floor-Line');
+            // const floorIntersect = raycaster.intersectObjects(scene.children).find((intersect) => intersect.object.name === 'Floor-Line');
 
-            if (floorIntersect && !pointIntersects) {
+            // if (floorIntersect && !pointIntersects) {
 
-            }
+            // }
 
             const newPoint: Point = {
                 pointUuid: THREE.MathUtils.generateUUID(),
@@ -89,7 +89,45 @@ function FloorCreator() {
                 newPoint.position = snappedPosition;
             }
 
-            if (pointIntersects) {
+            if (tempPoints.length > 2 && isCreating && snappedPoint && snappedPoint.pointUuid === tempPoints[0].pointUuid) {
+                const floor: Floor = {
+                    floorUuid: THREE.MathUtils.generateUUID(),
+                    floorName: "Floor",
+                    points: tempPoints,
+                    topMaterial,
+                    sideMaterial,
+                    floorDepth,
+                    isBeveled,
+                    bevelStrength,
+                    decals: [],
+                };
+
+                addFloor(floor);
+                if (projectId) {
+
+                    // API
+
+                    // upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
+
+                    // SOCKET
+
+                    const data = {
+                        floorData: floor,
+                        projectId: projectId,
+                        versionId: selectedVersion?.versionId || '',
+                        userId: userId,
+                        organization: organization
+                    }
+
+                    socket.emit('v1:model-Floor:add', data);
+
+                }
+                setTempPoints([]);
+                setIsCreating(false);
+            } else if (isCreating && snappedPoint && !tempPoints.some(p => p.pointUuid === snappedPoint.pointUuid)) {
+                setTempPoints(prev => [...prev, newPoint]);
+                setIsCreating(true);
+            } else if (pointIntersects) {
                 if (tempPoints.length > 2 && isCreating && pointIntersects.object.uuid === tempPoints[0].pointUuid) {
                     const floor: Floor = {
                         floorUuid: THREE.MathUtils.generateUUID(),
@@ -125,10 +163,7 @@ function FloorCreator() {
                     }
                     setTempPoints([]);
                     setIsCreating(false);
-                } else if (tempPoints.length === 0 || (tempPoints.length > 1 && pointIntersects.object.uuid !== tempPoints[tempPoints.length - 2].pointUuid)) {
-                    tempPoints.push(pointIntersects.object.userData as Point);
-                    setIsCreating(true);
-                } else {
+                } else if (tempPoints.length === 0 || (tempPoints.length > 1 && !tempPoints.slice(1).some(p => p.pointUuid === pointIntersects.object.uuid))) {
                     tempPoints.push(pointIntersects.object.userData as Point);
                     setIsCreating(true);
                 }
@@ -182,6 +217,10 @@ function FloorCreator() {
         };
 
         if (toolMode === "Floor" && toggleView) {
+            if (tempPoints.length === 0) {
+                setSnappedPosition(null);
+                setSnappedPoint(null);
+            }
             canvasElement.addEventListener("mousedown", onMouseDown);
             canvasElement.addEventListener("mouseup", onMouseUp);
             canvasElement.addEventListener("mousemove", onMouseMove);

app/src/modules/builder/floor/floorCreator/referenceFloor.tsx

@@ -36,7 +36,7 @@ function ReferenceFloor({ tempPoints }: Readonly<ReferenceFloorProps>) {
             setCurrentPosition([intersectionPoint.x, intersectionPoint.y, intersectionPoint.z]);
 
             if (!intersectionPoint) return;
-            const snapped = snapFloorPoint([intersectionPoint.x, intersectionPoint.y, intersectionPoint.z], tempPoints.slice(0, -2));
+            const snapped = snapFloorPoint([intersectionPoint.x, intersectionPoint.y, intersectionPoint.z], [tempPoints[0]]);
 
             if (snapped.isSnapped && snapped.snappedPoint) {
                 finalPosition.current = snapped.position;