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

cognitedata · Aug 28, 2024 · b628157 · b628157
1 parent b86d61f
commit b628157
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -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 };
 
@@ -36,6 +37,7 @@ const DefaultContentWrapper = (props: CustomTopbarContent): ReactElement => {
           highQualitySettings={props.highFidelitySettings}
         />
       </FlexSection>
+      <ResetCameraButton />
     </>
   );
 };