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/asset/models/model/model.tsx

@@ -4,7 +4,7 @@ import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { ThreeEvent, useFrame, useThree } from '@react-three/fiber';
-import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store';
+import { useActiveTool, useDeletableFloorItem, useLimitDistance, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store';
 import { AssetBoundingBox } from '../../functions/assetBoundingBox';
 import { CameraControls } from '@react-three/drei';
 import useModuleStore, { useSubModuleStore } from '../../../../../store/useModuleStore';
@@ -34,6 +34,7 @@ function Model({ asset }: { readonly asset: Asset }) {
     const { socket } = useSocketStore();
     const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
     const { setSelectedFloorItem } = useSelectedFloorItem();
+    const { limitDistance } = useLimitDistance();
     const { renderDistance } = useRenderDistance();
     const [isRendered, setIsRendered] = useState(false);
     const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
@@ -125,10 +126,16 @@ function Model({ asset }: { readonly asset: Asset }) {
 
     useFrame(() => {
         const assetPosition = new THREE.Vector3(...asset.position);
-        if (!isRendered && assetPosition.distanceTo(camera.position) <= renderDistance) {
-            setIsRendered(true);
-        } else if (isRendered && assetPosition.distanceTo(camera.position) > renderDistance) {
-            setIsRendered(false);
+        if (limitDistance) {
+            if (!isRendered && assetPosition.distanceTo(camera.position) <= renderDistance) {
+                setIsRendered(true);
+            } else if (isRendered && assetPosition.distanceTo(camera.position) > renderDistance) {
+                setIsRendered(false);
+            }
+        } else {
+            if (!isRendered) {
+                setIsRendered(true);
+            }
         }
     })