zonr bug fix

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

@@ -4,13 +4,13 @@ import RenameInput from "../inputs/RenameInput";
 import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
 import { getZoneData } from "../../../services/visulization/zone/getZones";
 import useModuleStore, {
-  useSubModuleStore,
+    useSubModuleStore,
 } from "../../../store/useModuleStore";
 import {
-  ArrowIcon,
-  EyeIcon,
-  LockIcon,
-  RemoveIcon,
+    ArrowIcon,
+    EyeIcon,
+    LockIcon,
+    RemoveIcon,
 } from "../../icons/ExportCommonIcons";
 import { useZoneAssetId } from "../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
@@ -21,326 +21,313 @@ import { useSceneContext } from "../../../modules/scene/sceneContext";
 import { useVersionContext } from "../../../modules/builder/version/versionContext";
 
 interface Asset {
-  id: string;
-  name: string;
-  position?: [number, number, number]; // Proper 3D vector
-  rotation?: { x: number; y: number; z: number }; // Proper rotation format
+    id: string;
+    name: string;
+    position?: [number, number, number]; // Proper 3D vector
+    rotation?: { x: number; y: number; z: number }; // Proper rotation format
 }
 
 interface ZoneItem {
-  id: string;
-  name: string;
-  assets?: Asset[];
-  active?: boolean;
+    id: string;
+    name: string;
+    assets?: Asset[];
+    active?: boolean;
 }
 
 interface ListProps {
-  items?: ZoneItem[];
-  remove?: boolean;
+    items?: ZoneItem[];
+    remove?: boolean;
 }
 
 const List: React.FC<ListProps> = ({ items = [], remove }) => {
-  const { activeModule } = useModuleStore();
-  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
+    const { activeModule } = useModuleStore();
+    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+    const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
 
-  const { setSubModule } = useSubModuleStore();
-  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
-    {}
-  );
-  const { projectId } = useParams();
-  const { assetStore } = useSceneContext();
-  const { setName } = assetStore();
-  const { organization } = getUserData();
-  const { selectedVersionStore } = useVersionContext();
-  const { selectedVersion } = selectedVersionStore();
-  const { zoneStore } = useSceneContext();
-  const { zones, setZoneName } = zoneStore();
+    const { setSubModule } = useSubModuleStore();
+    const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
+    const { projectId } = useParams();
+    const { assetStore } = useSceneContext();
+    const { setName } = assetStore();
+    const { organization } = getUserData();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { zoneStore } = useSceneContext();
+    const { zones, setZoneName } = zoneStore();
 
-  useEffect(() => {
-    useSelectedZoneStore.getState().setSelectedZone({
-      zoneName: "",
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      zoneUuid: "",
-      zoneViewPortTarget: [],
-      zoneViewPortPosition: [],
-      widgets: [],
-    });
-  }, [activeModule]);
-
-  const toggleZoneExpansion = (zoneUuid: string) => {
-    setExpandedZones((prev) => ({
-      ...prev,
-      [zoneUuid]: !prev[zoneUuid],
-    }));
-  };
-
-  async function handleSelectZone(id: string) {
-    
-    try {
-      if (selectedZone?.zoneUuid === id || id === 'unassigned-zone') {
-        return;
-      }
-
-      setSubModule("zoneProperties");
-
-      let response = await getZoneData(
-        id,
-        organization,
-        projectId,
-        selectedVersion?.versionId || ""
-      );
-      console.log("response: ", response?.zoneName);
-
-      if (!response) return;
-
-      setSelectedZone({
-        zoneName: response?.zoneName,
-        activeSides: response?.activeSides ?? [],
-        panelOrder: response?.panelOrder ?? [],
-        lockedPanels: response?.lockedPanels ?? [],
-        widgets: response?.widgets ?? [],
-        zoneUuid: response?.zoneUuid,
-        zoneViewPortTarget: response?.viewPortTarget ?? [],
-        zoneViewPortPosition: response?.viewPortPosition ?? [],
-      });
-    } catch (error) {
-      echo.error("Failed to select zone");
-      console.log(error);
-    }
-  }
-
-  function handleAssetClick(asset: Asset) {
-    setZoneAssetId(asset);
-  }
-
-  async function handleZoneNameChange(newName: string) {
-    const isDuplicate = zones.some(
-      (zone: any) =>
-        zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() &&
-        zone.zoneUuid !== selectedZone.zoneUuid
-    );
-
-    if (isDuplicate) {
-      alert("Zone name already exists. Please choose a different name.");
-      return; // DO NOT update state
-    }
-    const zonesdata = {
-      zoneUuid: selectedZone.zoneUuid,
-      zoneName: newName,
-    };
-    const response = await zoneCameraUpdate(
-      zonesdata,
-      organization,
-      projectId,
-      selectedVersion?.versionId || ""
-    );
-    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
-      //   )
-      // );
-    }
-  }
-
-  async function handleZoneAssetName(newName: string) {
-    if (zoneAssetId?.id) {
-      let response = await setAssetsApi({
-        modelUuid: zoneAssetId.id,
-        modelName: newName,
-        projectId,
-      });
-      // console.log("response: ", response);
-
-      setName(zoneAssetId.id, response.modelName);
-    }
-  }
-  const checkZoneNameDuplicate = (name: string) => {
-    return zones.some(
-      (zone: any) =>
-        zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() &&
-        zone.zoneUuid !== selectedZone.zoneUuid
-    );
-  };
-
-  useEffect(() => {
-    let drag = false;
-    let isLeftMouseDown = false;
-
-    const contextClassNames = [
-      "list-wrapper",
-      "zone-properties-container",
-      "list-container",
-    ];
-
-    const isOutsideClick = (target: EventTarget | null) => {
-      if (!(target instanceof HTMLElement)) return true;
-      return !contextClassNames.some((className) =>
-        target.closest(`.${className}`)
-      );
-    };
-
-    const onMouseDown = (evt: MouseEvent) => {
-      if (evt.button === 0) {
-        isLeftMouseDown = true;
-        drag = false;
-      }
-    };
-
-    const onMouseMove = () => {
-      if (isLeftMouseDown) {
-        drag = true;
-      }
-    };
-
-    const onMouseUp = (evt: MouseEvent) => {
-      if (evt.button === 0) {
-        isLeftMouseDown = false;
-        if (drag) return;
-
-        if (isOutsideClick(evt.target)) {
-          // Clear selected zone
-          setSelectedZone({
-            zoneUuid: "",
+    useEffect(() => {
+        useSelectedZoneStore.getState().setSelectedZone({
             zoneName: "",
             activeSides: [],
             panelOrder: [],
             lockedPanels: [],
-            widgets: [],
+            zoneUuid: "",
             zoneViewPortTarget: [],
             zoneViewPortPosition: [],
-          });
-          setZoneAssetId({
-            id: "",
-            name: "",
-          });
-          setSubModule("properties");
-        }
-      }
+            widgets: [],
+        });
+    }, [activeModule]);
+
+    const toggleZoneExpansion = (zoneUuid: string) => {
+        setExpandedZones((prev) => ({
+            ...prev,
+            [zoneUuid]: !prev[zoneUuid],
+        }));
     };
 
-    if (selectedZone.zoneName! === "" && activeModule === "Builder") {
-      document.addEventListener("mousedown", onMouseDown);
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+    async function handleSelectZone(id: string) {
+
+        try {
+            if (selectedZone?.zoneUuid === id || id === 'unassigned-zone') {
+                return;
+            }
+
+            setSubModule("zoneProperties");
+
+            let response = await getZoneData(
+                id,
+                organization,
+                projectId,
+                selectedVersion?.versionId || ""
+            );
+
+            if (!response) return;
+
+            setSelectedZone({
+                zoneName: response?.zoneName,
+                activeSides: response?.activeSides ?? [],
+                panelOrder: response?.panelOrder ?? [],
+                lockedPanels: response?.lockedPanels ?? [],
+                widgets: response?.widgets ?? [],
+                zoneUuid: response?.zoneUuid,
+                zoneViewPortTarget: response?.viewPortTarget ?? [],
+                zoneViewPortPosition: response?.viewPortPosition ?? [],
+            });
+        } catch (error) {
+            echo.error("Failed to select zone");
+        }
     }
 
-    return () => {
-      document.removeEventListener("mousedown", onMouseDown);
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [selectedZone, activeModule]);
+    function handleAssetClick(asset: Asset) {
+        setZoneAssetId(asset);
+    }
 
-  return (
-    <>
-      {items?.length > 0 ? (
-        <ul className="list-wrapper">
-          {items?.map((item) => (
-            <React.Fragment key={`zone-${item.id}`}>
-              <li
-                className="list-container"
-                onClick={() => {
-                  handleSelectZone(item.id);
-                  toggleZoneExpansion(item.id);
-                }}
-              >
-                <div
-                  className={`list-item ${
-                    selectedZone.zoneUuid === item.id ? "active" : ""
-                  }`}
-                >
-                  <div className="zone-header">
-                    <button className="value" id="zone-name">
-                      <RenameInput
-                        value={item.name}
-                        onRename={handleZoneNameChange}
-                        checkDuplicate={checkZoneNameDuplicate}
-                      />
-                    </button>
-                  </div>
-                  <div className="options-container">
-                    <div className="lock option">
-                      <LockIcon isLocked />
-                    </div>
-                    <div className="visibe option">
-                      <EyeIcon isClosed />
-                    </div>
-                    {remove && (
-                      <div className="remove option">
-                        <RemoveIcon />
-                      </div>
-                    )}
-                    {item.assets && item.assets.length > 0 && (
-                      <button
-                        id="expand-btn"
-                        className="expand-icon option"
-                        onClick={() => toggleZoneExpansion(item.id)}
-                      >
-                        <ArrowIcon />
-                      </button>
-                    )}
-                  </div>
-                </div>
-              </li>
-              {/* Nested assets list - only shown when expanded */}
-              {item.assets &&
-                item.assets.length > 0 &&
-                expandedZones[item.id] && (
-                  <ul className="asset-list">
-                    {item.assets.map((asset) => (
-                      <li
-                        key={`asset-${asset.id}`}
-                        className={`list-container asset-item ${
-                          zoneAssetId?.id === asset.id ? "active" : ""
-                        }`}
-                      >
-                        <div className="list-item">
-                          <button
-                            id={`${asset.name}-${asset.id}`}
-                            className="value"
-                            onClick={() => handleAssetClick(asset)}
-                          >
-                            <RenameInput
-                              value={asset.name}
-                              onRename={handleZoneAssetName}
-                            />
-                          </button>
-                          <div className="options-container">
-                            <button className="lock option" id="lock-btn">
-                              <LockIcon isLocked />
-                            </button>
-                            <button className="visibe option" id="visible-btn">
-                              <EyeIcon isClosed />
-                            </button>
-                            {remove && (
-                              <button className="remove option" id="remove-btn">
-                                <RemoveIcon />
-                              </button>
-                            )}
-                          </div>
-                        </div>
-                      </li>
+    async function handleZoneNameChange(newName: string) {
+        const isDuplicate = zones.some(
+            (zone: any) =>
+                zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() &&
+                zone.zoneUuid !== selectedZone.zoneUuid
+        );
+
+        if (isDuplicate) {
+            alert("Zone name already exists. Please choose a different name.");
+            return; // DO NOT update state
+        }
+        const zonesdata = {
+            zoneUuid: selectedZone.zoneUuid,
+            zoneName: newName,
+        };
+        const response = await zoneCameraUpdate(
+            zonesdata,
+            organization,
+            projectId,
+            selectedVersion?.versionId || ""
+        );
+        if (response.message === "zone updated") {
+            setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+            setZoneName(selectedZone.zoneUuid, newName);
+        }
+    }
+
+    async function handleZoneAssetName(newName: string) {
+        if (zoneAssetId?.id) {
+            let response = await setAssetsApi({
+                modelUuid: zoneAssetId.id,
+                modelName: newName,
+                projectId,
+            });
+            // console.log("response: ", response);
+
+            setName(zoneAssetId.id, response.modelName);
+        }
+    }
+    const checkZoneNameDuplicate = (name: string) => {
+        return zones.some(
+            (zone: any) =>
+                zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() &&
+                zone.zoneUuid !== selectedZone.zoneUuid
+        );
+    };
+
+    useEffect(() => {
+        let drag = false;
+        let isLeftMouseDown = false;
+
+        const contextClassNames = [
+            "list-wrapper",
+            "zone-properties-container",
+            "list-container",
+        ];
+
+        const isOutsideClick = (target: EventTarget | null) => {
+            if (!(target instanceof HTMLElement)) return true;
+            return !contextClassNames.some((className) =>
+                target.closest(`.${className}`)
+            );
+        };
+
+        const onMouseDown = (evt: MouseEvent) => {
+            if (evt.button === 0) {
+                isLeftMouseDown = true;
+                drag = false;
+            }
+        };
+
+        const onMouseMove = () => {
+            if (isLeftMouseDown) {
+                drag = true;
+            }
+        };
+
+        const onMouseUp = (evt: MouseEvent) => {
+            if (evt.button === 0) {
+                isLeftMouseDown = false;
+                if (drag) return;
+
+                if (isOutsideClick(evt.target)) {
+                    // Clear selected zone
+                    setSelectedZone({
+                        zoneUuid: "",
+                        zoneName: "",
+                        activeSides: [],
+                        panelOrder: [],
+                        lockedPanels: [],
+                        widgets: [],
+                        zoneViewPortTarget: [],
+                        zoneViewPortPosition: [],
+                    });
+                    setZoneAssetId({
+                        id: "",
+                        name: "",
+                    });
+                    setSubModule("properties");
+                }
+            }
+        };
+
+        if (selectedZone.zoneName! === "" && activeModule === "Builder") {
+            document.addEventListener("mousedown", onMouseDown);
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        }
+
+        return () => {
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [selectedZone, activeModule]);
+
+    return (
+        <>
+            {items?.length > 0 ? (
+                <ul className="list-wrapper">
+                    {items?.map((item) => (
+                        <React.Fragment key={`zone-${item.id}`}>
+                            <li
+                                className="list-container"
+                                onClick={() => {
+                                    handleSelectZone(item.id);
+                                    toggleZoneExpansion(item.id);
+                                }}
+                            >
+                                <div
+                                    className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
+                                        }`}
+                                >
+                                    <div className="zone-header">
+                                        <button className="value" id="zone-name">
+                                            <RenameInput
+                                                value={item.name}
+                                                onRename={handleZoneNameChange}
+                                                checkDuplicate={checkZoneNameDuplicate}
+                                            />
+                                        </button>
+                                    </div>
+                                    <div className="options-container">
+                                        <div className="lock option">
+                                            <LockIcon isLocked />
+                                        </div>
+                                        <div className="visibe option">
+                                            <EyeIcon isClosed />
+                                        </div>
+                                        {remove && (
+                                            <div className="remove option">
+                                                <RemoveIcon />
+                                            </div>
+                                        )}
+                                        {item.assets && item.assets.length > 0 && (
+                                            <button
+                                                id="expand-btn"
+                                                className="expand-icon option"
+                                                onClick={() => toggleZoneExpansion(item.id)}
+                                            >
+                                                <ArrowIcon />
+                                            </button>
+                                        )}
+                                    </div>
+                                </div>
+                            </li>
+                            {/* Nested assets list - only shown when expanded */}
+                            {item.assets &&
+                                item.assets.length > 0 &&
+                                expandedZones[item.id] && (
+                                    <ul className="asset-list">
+                                        {item.assets.map((asset) => (
+                                            <li
+                                                key={`asset-${asset.id}`}
+                                                className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
+                                                    }`}
+                                            >
+                                                <div className="list-item">
+                                                    <button
+                                                        id={`${asset.name}-${asset.id}`}
+                                                        className="value"
+                                                        onClick={() => handleAssetClick(asset)}
+                                                    >
+                                                        <RenameInput
+                                                            value={asset.name}
+                                                            onRename={handleZoneAssetName}
+                                                        />
+                                                    </button>
+                                                    <div className="options-container">
+                                                        <button className="lock option" id="lock-btn">
+                                                            <LockIcon isLocked />
+                                                        </button>
+                                                        <button className="visibe option" id="visible-btn">
+                                                            <EyeIcon isClosed />
+                                                        </button>
+                                                        {remove && (
+                                                            <button className="remove option" id="remove-btn">
+                                                                <RemoveIcon />
+                                                            </button>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                )}
+                        </React.Fragment>
                     ))}
-                  </ul>
-                )}
-            </React.Fragment>
-          ))}
-        </ul>
-      ) : (
-        <div className="list-wrapper">
-          <div className="no-item">No items to display</div>
-        </div>
-      )}
-    </>
-  );
+                </ul>
+            ) : (
+                <div className="list-wrapper">
+                    <div className="no-item">No items to display</div>
+                </div>
+            )}
+        </>
+    );
 };
 
 export default List;

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

@@ -3,101 +3,98 @@ import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
 import {
-  useEditPosition,
-  usezonePosition,
-  usezoneTarget,
+    useEditPosition,
+    usezonePosition,
+    usezoneTarget,
 } from "../../../store/builder/store";
 
 export default function ZoneCentreTarget() {
-  const { selectedZone } = useSelectedZoneStore();
-  // 
-  const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
-    null
-  );
-  const sphereRef = useRef<THREE.Mesh>(null);
-  const { controls }: any = useThree();
-  const { setZonePosition } = usezonePosition();
-  const { setZoneTarget } = usezoneTarget();
-  const { Edit } = useEditPosition();
+    const { selectedZone } = useSelectedZoneStore();
+    const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
+    const sphereRef = useRef<THREE.Mesh>(null);
+    const { controls }: any = useThree();
+    const { setZonePosition } = usezonePosition();
+    const { setZoneTarget } = usezoneTarget();
+    const { Edit } = useEditPosition();
 
-  const TRANSITION_SPEED = 2000;
+    const TRANSITION_SPEED = 2000;
 
-  useEffect(() => {
-    if (
-      selectedZone.zoneViewPortTarget &&
-      JSON.stringify(previousZoneCentre) !==
-        JSON.stringify(selectedZone.zoneViewPortTarget)
-    ) {
-      setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
-    }
-  }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
-
-  const centrePoint = useMemo(() => {
-    if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
-    return previousZoneCentre.map(
-      (value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
-    );
-  }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
-
-  useEffect(() => {
-    if (selectedZone.zoneName !== "") {
-      if (sphereRef.current) {
-        sphereRef.current.position.set(
-          selectedZone.zoneViewPortTarget[0],
-          selectedZone.zoneViewPortTarget[1],
-          selectedZone.zoneViewPortTarget[2]
-        );
-      }
-      if (centrePoint) {
-        if (centrePoint.length > 0) {
-          const setCam = async () => {
-            controls.setLookAt(
-              centrePoint[0],
-              26,
-              centrePoint[2],
-              ...centrePoint,
-              true,
-              TRANSITION_SPEED
-            );
-            setTimeout(() => {
-              controls?.setLookAt(
-                ...selectedZone.zoneViewPortPosition,
-                ...selectedZone.zoneViewPortTarget,
-                true,
-                TRANSITION_SPEED
-              );
-            }, 100);
-          };
-          setCam();
-        } else {
-          const setCam = async () => {
-            controls?.setLookAt(
-              ...selectedZone.zoneViewPortPosition,
-              ...selectedZone.zoneViewPortTarget,
-              true,
-              TRANSITION_SPEED
-            );
-          };
-          setCam();
+    useEffect(() => {
+        if (
+            selectedZone.zoneViewPortTarget &&
+            JSON.stringify(previousZoneCentre) !==
+            JSON.stringify(selectedZone.zoneViewPortTarget)
+        ) {
+            setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
         }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedZone.zoneViewPortTarget]);
+    }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
 
-  useFrame(() => {
-    if (Edit) {
-      setZonePosition([
-        controls.getPosition().x,
-        controls.getPosition().y,
-        controls.getPosition().z,
-      ]);
-      setZoneTarget([
-        controls.getTarget().x,
-        controls.getTarget().y,
-        controls.getTarget().z,
-      ]);
-    }
-  });
-  return <></>;
+    const centrePoint = useMemo(() => {
+        if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
+        return previousZoneCentre.map(
+            (value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
+        );
+    }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
+
+    useEffect(() => {
+        if (selectedZone.zoneName !== "") {
+            if (sphereRef.current) {
+                sphereRef.current.position.set(
+                    selectedZone.zoneViewPortTarget[0],
+                    selectedZone.zoneViewPortTarget[1],
+                    selectedZone.zoneViewPortTarget[2]
+                );
+            }
+            if (centrePoint) {
+                if (centrePoint.length > 0) {
+                    const setCam = async () => {
+                        controls.setLookAt(
+                            centrePoint[0],
+                            26,
+                            centrePoint[2],
+                            ...centrePoint,
+                            true,
+                            TRANSITION_SPEED
+                        );
+                        setTimeout(() => {
+                            controls?.setLookAt(
+                                ...selectedZone.zoneViewPortPosition,
+                                ...selectedZone.zoneViewPortTarget,
+                                true,
+                                TRANSITION_SPEED
+                            );
+                        }, 100);
+                    };
+                    setCam();
+                } else {
+                    const setCam = async () => {
+                        controls?.setLookAt(
+                            ...selectedZone.zoneViewPortPosition,
+                            ...selectedZone.zoneViewPortTarget,
+                            true,
+                            TRANSITION_SPEED
+                        );
+                    };
+                    setCam();
+                }
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedZone.zoneViewPortTarget]);
+
+    useFrame(() => {
+        if (Edit) {
+            setZonePosition([
+                controls.getPosition().x,
+                controls.getPosition().y,
+                controls.getPosition().z,
+            ]);
+            setZoneTarget([
+                controls.getTarget().x,
+                controls.getTarget().y,
+                controls.getTarget().z,
+            ]);
+        }
+    });
+    return <></>;
 }