From d8a7f3b2daf1257c65338e6e22451a5f9103590b Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Fri, 22 Aug 2025 14:37:49 +0530 Subject: [PATCH] zonr bug fix --- app/src/components/ui/list/List.tsx | 591 +++++++++--------- .../model/eventHandlers/useEventHandlers.ts | 22 +- .../builder/asset/models/model/model.tsx | 2 +- .../modules/visualization/visualization.tsx | 3 - .../modules/visualization/zone/zoneAssets.tsx | 78 --- .../visualization/zone/zoneCameraTarget.tsx | 177 +++--- 6 files changed, 396 insertions(+), 477 deletions(-) delete mode 100644 app/src/modules/visualization/zone/zoneAssets.tsx diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 912e0e9..84f319e 100644 --- a/app/src/components/ui/list/List.tsx +++ b/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 = ({ 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>( - {} - ); - 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>({}); + 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 ? ( -
    - {items?.map((item) => ( - -
  • { - handleSelectZone(item.id); - toggleZoneExpansion(item.id); - }} - > -
    -
    - -
    -
    -
    - -
    -
    - -
    - {remove && ( -
    - -
    - )} - {item.assets && item.assets.length > 0 && ( - - )} -
    -
    -
    • - {/* Nested assets list - only shown when expanded */} - {item.assets && - item.assets.length > 0 && - expandedZones[item.id] && ( -
      - {item.assets.map((asset) => ( -
    • -
      - -
      - - - {remove && ( - - )} -
      -
      -
      • + 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 ? ( +
        + {items?.map((item) => ( + +
      • { + handleSelectZone(item.id); + toggleZoneExpansion(item.id); + }} + > +
        +
        + +
        +
        +
        + +
        +
        + +
        + {remove && ( +
        + +
        + )} + {item.assets && item.assets.length > 0 && ( + + )} +
        +
        +
        • + {/* Nested assets list - only shown when expanded */} + {item.assets && + item.assets.length > 0 && + expandedZones[item.id] && ( +
          + {item.assets.map((asset) => ( +
        • +
          + +
          + + + {remove && ( + + )} +
          +
          +
          • + ))} +
        + )} +         ))} -
      - )} - - ))} -
    - ) : ( -
    -
    No items to display
    -
    - )} - - ); +
+ ) : ( +
+
No items to display
+
+ )} + + ); }; export default List; diff --git a/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts b/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts index 1fc26ae..5c02a2c 100644 --- a/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts +++ b/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, + 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') { diff --git a/app/src/modules/builder/asset/models/model/model.tsx b/app/src/modules/builder/asset/models/model/model.tsx index 3f128bb..2f5f77c 100644 --- a/app/src/modules/builder/asset/models/model/model.tsx +++ b/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 ( { @@ -12,8 +11,6 @@ const Visualization:React.FC = () => { - - {/* */} diff --git a/app/src/modules/visualization/zone/zoneAssets.tsx b/app/src/modules/visualization/zone/zoneAssets.tsx deleted file mode 100644 index a5fed54..0000000 --- a/app/src/modules/visualization/zone/zoneAssets.tsx +++ /dev/null @@ -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 ( - <> - - ) -} \ No newline at end of file diff --git a/app/src/modules/visualization/zone/zoneCameraTarget.tsx b/app/src/modules/visualization/zone/zoneCameraTarget.tsx index 82f014a..f9e3a9c 100644 --- a/app/src/modules/visualization/zone/zoneCameraTarget.tsx +++ b/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( - null - ); - const sphereRef = useRef(null); - const { controls }: any = useThree(); - const { setZonePosition } = usezonePosition(); - const { setZoneTarget } = usezoneTarget(); - const { Edit } = useEditPosition(); + const { selectedZone } = useSelectedZoneStore(); + const [previousZoneCentre, setPreviousZoneCentre] = useState(null); + const sphereRef = useRef(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 <>; }