From d7ad488b822ec7fa2e63ab746cbf7e605c8b88b5 Mon Sep 17 00:00:00 2001
From: Pramod S <87521752+pramodcog@users.noreply.github.com>
Date: Wed, 28 Aug 2024 12:49:26 +0530
Subject: [PATCH] fix(react-components): camera state when Home button is
 clicked in active 360 image mode (#4727)

* fixed camera state when Home button is selected in active 360 image mode

* update Home button position in topbar

* bump version to 0.55.8
---
 react-components/package.json                              | 2 +-
 .../src/components/RevealToolbar/ResetCameraButton.tsx     | 7 ++++++-
 .../src/components/RevealTopbar/RevealTopbar.tsx           | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/react-components/package.json b/react-components/package.json
index fce59d94364..5cc1c3eb24c 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.55.7",
+  "version": "0.55.8",
   "exports": {
     ".": {
       "import": "./dist/index.js",
diff --git a/react-components/src/components/RevealToolbar/ResetCameraButton.tsx b/react-components/src/components/RevealToolbar/ResetCameraButton.tsx
index 1407e6636db..7458076938e 100644
--- a/react-components/src/components/RevealToolbar/ResetCameraButton.tsx
+++ b/react-components/src/components/RevealToolbar/ResetCameraButton.tsx
@@ -7,6 +7,7 @@ import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
 import { useCameraNavigation } from '../../hooks/useCameraNavigation';
 import { useSceneDefaultCamera } from '../../hooks/useSceneDefaultCamera';
+import { useReveal } from '../RevealCanvas/ViewerContext';
 
 type ResetCameraButtonProps = {
   sceneExternalId?: string;
@@ -18,16 +19,20 @@ export const ResetCameraButton = ({
   sceneSpaceId
 }: ResetCameraButtonProps): ReactElement => {
   const { t } = useTranslation();
+  const viewer = useReveal();
   const cameraNavigation = useCameraNavigation();
   const resetToDefaultSceneCamera = useSceneDefaultCamera(sceneExternalId, sceneSpaceId);
 
   const resetCameraToHomePosition = useCallback(() => {
+    if (viewer.get360ImageCollections() !== undefined) {
+      viewer.exit360Image();
+    }
     if (sceneExternalId !== undefined && sceneSpaceId !== undefined) {
       resetToDefaultSceneCamera.fitCameraToSceneDefault();
       return;
     }
     cameraNavigation.fitCameraToAllModels();
-  }, [sceneExternalId, sceneSpaceId, cameraNavigation, resetToDefaultSceneCamera]);
+  }, [sceneExternalId, sceneSpaceId, cameraNavigation, resetToDefaultSceneCamera, viewer]);
 
   return (
     <CogsTooltip
diff --git a/react-components/src/components/RevealTopbar/RevealTopbar.tsx b/react-components/src/components/RevealTopbar/RevealTopbar.tsx
index 98483160649..a581e30e152 100644
--- a/react-components/src/components/RevealTopbar/RevealTopbar.tsx
+++ b/react-components/src/components/RevealTopbar/RevealTopbar.tsx
@@ -12,6 +12,7 @@ import { Divider } from '@cognite/cogs.js';
 import { SetOrbitOrFirstPersonControlsType } from '../RevealToolbar/SetFlexibleControlsType';
 import { RuleBasedOutputsButton } from '../RevealToolbar/RuleBasedOutputsButton';
 import { LayersButtonStrip } from '../RevealToolbar/LayersContainer/LayersButtonsStrip';
+import { ResetCameraButton } from '../RevealToolbar/ResetCameraButton';
 
 export type CustomTopbarContent = CustomToolbarContent & { topbarContent?: ReactNode };
 
@@ -35,6 +36,7 @@ const DefaultContentWrapper = (props: CustomTopbarContent): ReactElement => {
           lowQualitySettings={props.lowFidelitySettings}
           highQualitySettings={props.highFidelitySettings}
         />
+        <ResetCameraButton />
       </FlexSection>
     </>
   );