zonr bug fix

app/src/components/ui/list/List.tsx

@@ -45,9 +45,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
 
     const { setSubModule } = useSubModuleStore();
-  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
+    const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
-    {}
-  );
     const { projectId } = useParams();
     const { assetStore } = useSceneContext();
     const { setName } = assetStore();
@@ -92,7 +90,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                 projectId,
                 selectedVersion?.versionId || ""
             );
-      console.log("response: ", response?.zoneName);
 
             if (!response) return;
 
@@ -108,7 +105,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
             });
         } catch (error) {
             echo.error("Failed to select zone");
-      console.log(error);
         }
     }
 
@@ -140,13 +136,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         if (response.message === "zone updated") {
             setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
             setZoneName(selectedZone.zoneUuid, newName);
-      // setZones((prevZones: any[]) =>
-      //   prevZones.map((zone) =>
-      //     zone.zoneUuid === selectedZone.zoneUuid
-      //       ? { ...zone, zoneName: newName }
-      //       : zone
-      //   )
-      // );
         }
     }
 
@@ -253,8 +242,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                                 }}
                             >
                                 <div
-                  className={`list-item ${
+                                    className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
-                    selectedZone.zoneUuid === item.id ? "active" : ""
                                         }`}
                                 >
                                     <div className="zone-header">
@@ -298,8 +286,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                                         {item.assets.map((asset) => (
                                             <li
                                                 key={`asset-${asset.id}`}
-                        className={`list-container asset-item ${
+                                                className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
-                          zoneAssetId?.id === asset.id ? "active" : ""
                                                     }`}
                                             >
                                                 <div className="list-item">

app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts

@@ -3,7 +3,7 @@ import { CameraControls } from '@react-three/drei';
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView } from '../../../../../../store/builder/store';
+import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
 import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
 import { useSocketStore } from '../../../../../../store/builder/store';
 import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -20,9 +20,11 @@ import { upsertProductOrEventApi } from '../../../../../../services/simulation/p
 export function useModelEventHandlers({
     boundingBox,
     groupRef,
+    asset
 }: {
     boundingBox: THREE.Box3 | null,
     groupRef: React.RefObject<THREE.Group>,
+    asset: Asset
 }) {
     const { controls, gl, camera } = useThree();
     const { activeTool } = useActiveTool();
@@ -32,12 +34,13 @@ export function useModelEventHandlers({
     const { socket } = useSocketStore();
     const { eventStore, productStore, assetStore, undoRedo3DStore } = useSceneContext();
     const { push3D } = undoRedo3DStore();
-    const { removeAsset } = assetStore();
+    const { getAssetById, removeAsset } = assetStore();
+    const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
     const { removeEvent, getEventByModelUuid } = eventStore();
     const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
     const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
     const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
-    const { setSelectedFloorItem } = useSelectedFloorItem();
+    const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { selectedVersionStore } = useVersionContext();
@@ -66,6 +69,19 @@ export function useModelEventHandlers({
         });
     };
 
+    useEffect(() => {
+        if (!zoneAssetId) return
+        if (zoneAssetId.id === asset.modelUuid) {
+            handleDblClick(asset);
+        }
+    }, [zoneAssetId])
+
+    useEffect(() => {
+        if (!selectedFloorItem) {
+            setZoneAssetId(null);
+        }
+    }, [selectedFloorItem])
+
     const handleDblClick = (asset: Asset) => {
         if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
 

app/src/modules/builder/asset/models/model/model.tsx

@@ -158,7 +158,7 @@ function Model({ asset, isRendered, loader }: { readonly asset: Asset, isRendere
         });
     }, []);
 
-    const { handleDblClick, handleClick, handlePointerOver, handlePointerOut, handleContextMenu } = useModelEventHandlers({ boundingBox, groupRef });
+    const { handleDblClick, handleClick, handlePointerOver, handlePointerOut, handleContextMenu } = useModelEventHandlers({ boundingBox, groupRef, asset });
 
     return (
         <group

app/src/modules/visualization/visualization.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
 import ZoneCentreTarget from './zone/zoneCameraTarget'
-import ZoneAssets from './zone/zoneAssets'
 import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
 
 const Visualization:React.FC = () => {
@@ -12,8 +11,6 @@ const Visualization:React.FC = () => {
 
             <ZoneCentreTarget />
 
-            <ZoneAssets />
-
             <MqttEvents />
 
             {/* <DrieHtmlTemp /> */}

app/src/modules/visualization/zone/zoneAssets.tsx

@@ -1,78 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { useSelectedFloorItem, useZoneAssetId } from '../../../store/builder/store';
-import * as THREE from "three";
-import { useThree } from '@react-three/fiber';
-import * as Types from "../../../types/world/worldTypes";
-export default function ZoneAssets() {
-    const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-    const { setSelectedFloorItem } = useSelectedFloorItem();
-    const { raycaster, controls, scene }: any = useThree();
-
-    useEffect(() => {
-        // console.log('zoneAssetId: ', zoneAssetId);
-        if (!zoneAssetId) return
-        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
-        if (AssetMesh) {
-            const bbox = new THREE.Box3().setFromObject(AssetMesh);
-            const size = bbox.getSize(new THREE.Vector3());
-            const center = bbox.getCenter(new THREE.Vector3());
-
-            const front = new THREE.Vector3(0, 0, 1);
-            AssetMesh.localToWorld(front);
-            front.sub(AssetMesh.position).normalize();
-
-            const distance = Math.max(size.x, size.y, size.z) * 2;
-            const newPosition = center.clone().addScaledVector(front, distance);
-
-            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
-            controls.setTarget(center.x, center.y, center.z, true);
-            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
-
-            setSelectedFloorItem(AssetMesh);
-        } else {
-            if (Array.isArray(zoneAssetId.position) && zoneAssetId.position.length >= 3) {
-                let selectedAssetPosition = [
-                    zoneAssetId.position[0],
-                    10,
-                    zoneAssetId.position[2]
-                ];
-                let selectedAssetTarget = [
-                    zoneAssetId.position[0],
-                    zoneAssetId.position[1],
-                    zoneAssetId.position[2]
-                ];
-                const setCam = async () => {
-                    await controls?.setLookAt(...selectedAssetPosition, ...selectedAssetTarget, true);
-                    setTimeout(() => {
-                        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
-                        if (AssetMesh) {
-                            const bbox = new THREE.Box3().setFromObject(AssetMesh);
-                            const size = bbox.getSize(new THREE.Vector3());
-                            const center = bbox.getCenter(new THREE.Vector3());
-
-                            const front = new THREE.Vector3(0, 0, 1);
-                            AssetMesh.localToWorld(front);
-                            front.sub(AssetMesh.position).normalize();
-
-                            const distance = Math.max(size.x, size.y, size.z) * 2;
-                            const newPosition = center.clone().addScaledVector(front, distance);
-
-                            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
-                            controls.setTarget(center.x, center.y, center.z, true);
-                            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
-
-                            setSelectedFloorItem(AssetMesh);
-                        }
-                    }, 500)
-
-                };
-                setCam();
-            }
-        }
-    }, [zoneAssetId, scene, controls])
-
-    return (
-        <>
-        </>
-    )
-}

app/src/modules/visualization/zone/zoneCameraTarget.tsx

@@ -10,10 +10,7 @@ import {
 
 export default function ZoneCentreTarget() {
     const { selectedZone } = useSelectedZoneStore();
-  // 
+    const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
-  const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
-    null
-  );
     const sphereRef = useRef<THREE.Mesh>(null);
     const { controls }: any = useThree();
     const { setZonePosition } = usezonePosition();