feat(react-components): added reset camera position to scene data pos…

…ition (#4040)

* Added button for reset camera position to default as config in scene

* update camera reset button to use useCameraFromScene hook

* enabled fallback for camera to  fit to all models if scene externalId is not provided

* exported useCameraFromScene hook

* fixed merge error

* update visual test iage

* moved reset camera to Scene story, reverted visual image & updated the reset camera hook to be called outside conditional loop

* updated variable name

---------

Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>

react-components/src/components/RevealToolbar/ResetCameraButton.tsx

@@ -0,0 +1,48 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement, useCallback } from 'react';
+import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
+import { useTranslation } from '../i18n/I18n';
+import { useCameraNavigation } from '../../hooks/useCameraNavigation';
+import { useSceneDefaultCamera } from '../../hooks/useSceneDefaultCamera';
+
+type ResetCameraButtonProps = {
+  sceneExternalId?: string;
+  sceneSpaceId?: string;
+};
+
+export const ResetCameraButton = ({
+  sceneExternalId,
+  sceneSpaceId
+}: ResetCameraButtonProps): ReactElement => {
+  const { t } = useTranslation();
+  const cameraNavigation = useCameraNavigation();
+  const resetToDefaultSceneCamera = useSceneDefaultCamera(
+    sceneExternalId ?? '',
+    sceneSpaceId ?? ''
+  );
+
+  const resetCameraToHomePosition = useCallback(() => {
+    if (sceneExternalId !== undefined && sceneSpaceId !== undefined) {
+      resetToDefaultSceneCamera.fitCameraToSceneDefault();
+      return;
+    }
+    cameraNavigation.fitCameraToAllModels();
+  }, [sceneExternalId, sceneSpaceId, cameraNavigation, resetToDefaultSceneCamera]);
+
+  return (
+    <CogsTooltip
+      content={t('RESET_CAMERA_TO_HOME', 'Reset camera to home')}
+      placement="right"
+      appendTo={document.body}>
+      <Button
+        type="ghost"
+        icon="Restore"
+        aria-label="Reset camera to home"
+        onClick={resetCameraToHomePosition}
+      />
+    </CogsTooltip>
+  );
+};

react-components/src/components/RevealToolbar/RevealToolbar.tsx

@@ -12,6 +12,7 @@ import { withSuppressRevealEvents } from '../../higher-order-components/withSupp
 import { MeasurementButton } from './MeasurementButton';
 import { HelpButton } from './HelpButton';
 import { ShareButton } from './ShareButton';
+import { ResetCameraButton } from './ResetCameraButton';
 import { type QualitySettings } from './SettingsContainer/types';
 import styled from 'styled-components';
 
@@ -101,6 +102,7 @@ export const RevealToolbar = withSuppressRevealEvents(
   ShareButton: typeof ShareButton;
   SettingsButton: typeof SettingsButton;
   HelpButton: typeof HelpButton;
+  ResetCameraButton: typeof ResetCameraButton;
 };
 
 RevealToolbar.FitModelsButton = FitModelsButton;
@@ -110,3 +112,4 @@ RevealToolbar.MeasurementButton = MeasurementButton;
 RevealToolbar.ShareButton = ShareButton;
 RevealToolbar.SettingsButton = SettingsButton;
 RevealToolbar.HelpButton = HelpButton;
+RevealToolbar.ResetCameraButton = ResetCameraButton;

react-components/src/hooks/useSceneDefaultCamera.tsx

@@ -47,8 +47,6 @@ export const useSceneDefaultCamera = (
     position.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
     target.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
 
-    console.log('position', position, 'target', target);
-
     return {
       fitCameraToSceneDefault: () => {
         viewer.cameraManager.setCameraState({ position, target });

react-components/stories/SceneContainer.stories.tsx

@@ -7,8 +7,10 @@ import { SceneContainer } from '../src/components/SceneContainer/SceneContainer'
 import { Color } from 'three';
 import { useEffect, type ReactElement } from 'react';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
-import { useReveal, useSceneDefaultCamera } from '../src';
+import { RevealToolbar, useReveal, useSceneDefaultCamera, withSuppressRevealEvents } from '../src';
 import { type DefaultCameraManager } from '@cognite/reveal';
+import { ToolBar } from '@cognite/cogs.js';
+import styled from 'styled-components';
 
 const meta = {
   title: 'Example/PrimitiveWrappers/SceneContainer',
@@ -21,6 +23,12 @@ type Story = StoryObj<typeof meta>;
 
 const sdk = createSdkByUrlToken();
 
+const MyCustomToolbar = styled(withSuppressRevealEvents(ToolBar))`
+  position: absolute;
+  right: 20px;
+  top: 70px;
+`;
+
 export const Main: Story = {
   args: {
     sceneExternalId: 'savelii_scene1',
@@ -29,6 +37,12 @@ export const Main: Story = {
   render: ({ sceneExternalId, sceneSpaceId }) => {
     return (
       <RevealStoryContainer color={new Color(0x4a4a4a)} sdk={sdk}>
+        <MyCustomToolbar>
+          <RevealToolbar.ResetCameraButton
+            sceneExternalId={sceneExternalId}
+            sceneSpaceId={sceneSpaceId}
+          />
+        </MyCustomToolbar>
         <SceneContainerStoryContent sceneExternalId={sceneExternalId} sceneSpaceId={sceneSpaceId} />
       </RevealStoryContainer>
     );