fix(react-components): preserve the camera state in URL that includes position, the target as the pivot point and the camera rotation (#5116)

* add direction optional when setting the camera state that would be coming from the url param mostly

It separates the concerns of flexible camera that uses the target as the custom marker

* refactor the camera state type definition and keep only the required and the direction in the state updates

* update camera state control unit test to support direction as well

* clean up

* linter

* cleanup assertion

* remove unnecessary clone for direction in the default camera manager

* revert viewer changes to keep it only in the viewer pr

* bump react-components version to 0.77.3 and update viewer version to 4.25.1 to ship in the related changes

* replace direction with the current rotation value

* remove old mock with direction

* add a comment for the camera state parameter type definition

* update comment

* refactor: using Pick instead of the manual type's incremental

* update devdependency for reveal and use the identity when rotations are undefined

* update lock file with reveal 4.25.1

* lint fix

Author: danpriori

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.77.2",
+  "version": "0.77.3",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -37,7 +37,7 @@
     "sort-keys": "cdf-i18n-utils-cli sort-local-keys --namespace reveal-react-components --path ./src/common/i18n"
   },
   "peerDependencies": {
-    "@cognite/reveal": "4.25.0",
+    "@cognite/reveal": "4.25.1",
     "@cognite/sdk": "^10.0.0",
     "react": ">=18",
     "react-dom": ">=18",
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
-    "@cognite/reveal": "^4.24.0",
+    "@cognite/reveal": "4.25.1",
     "@cognite/sdk": "^10.0.0",
     "@playwright/test": "1.49.0",
     "@storybook/addon-essentials": "8.4.5",

react-components/src/components/RevealCanvas/hooks/useCameraStateControl.test.ts

@@ -5,7 +5,7 @@ import { describe, expect, test, vi, beforeEach, beforeAll, afterAll } from 'vit
 
 import { renderHook } from '@testing-library/react';
 
-import { Vector3 } from 'three';
+import { Quaternion, Vector3 } from 'three';
 import { cameraManagerGlobalCameraEvents } from '#test-utils/fixtures/cameraManager';
 import { viewerMock } from '#test-utils/fixtures/viewer';
 import { useCameraStateControl, type CameraStateParameters } from './useCameraStateControl';
@@ -59,7 +59,14 @@ describe(useCameraStateControl.name, () => {
 
     const { rerender } = renderHook(
       ({ position }: { position: Vector3 }) => {
-        useCameraStateControl({ position: position.clone(), target: new Vector3(1, 1, 1) }, setter);
+        useCameraStateControl(
+          {
+            position: position.clone(),
+            target: new Vector3(1, 1, 1),
+            rotation: new Quaternion(0, 0, 0, 1)
+          },
+          setter
+        );
       },
       { initialProps: { position: new Vector3(0, 0, 0) } }
     );
@@ -75,28 +82,50 @@ describe(useCameraStateControl.name, () => {
     });
   });
 
-  test('provided setter is called after updating camera state internally', () => {
+  test('provided setter is called after updating camera state internally for each parameter', () => {
     const setter = vi.fn<(cameraState?: CameraStateParameters) => void>();
 
     const { rerender } = renderHook(() => {
       useCameraStateControl(
-        { position: new Vector3(0, 0, 0), target: new Vector3(1, 1, 1) },
+        {
+          position: new Vector3(0, 0, 0),
+          target: new Vector3(1, 1, 1),
+          rotation: new Quaternion(0, 0, 0, 1)
+        },
         setter
       );
     });
 
     vi.runAllTimers();
 
+    // position
     viewerMock.cameraManager.setCameraState({
       position: new Vector3(1, 0, 0),
-      target: new Vector3(1, 1, 1)
+      target: new Vector3(1, 1, 1),
+      rotation: new Quaternion(0, 0, 0, 1)
     });
 
-    vi.runAllTimers();
+    rerender();
+
+    // target
+    viewerMock.cameraManager.setCameraState({
+      position: new Vector3(0, 0, 0),
+      target: new Vector3(0, 0, 1),
+      rotation: new Quaternion(0, 0, 0, 1)
+    });
+
+    rerender();
+
+    // rotation
+    viewerMock.cameraManager.setCameraState({
+      position: new Vector3(0, 0, 0),
+      target: new Vector3(1, 1, 1),
+      rotation: new Quaternion(0.1, 0.01, 0, 0.995)
+    });
 
     rerender();
     vi.runAllTimers();
 
-    expect(setter).toHaveBeenCalled();
+    expect(setter).toHaveBeenCalledTimes(3);
   });
 });

react-components/src/components/RevealCanvas/hooks/useCameraStateControl.ts

@@ -5,8 +5,11 @@
 import { type MutableRefObject, useEffect, useRef } from 'react';
 import { useReveal } from '../ViewerContext';
 import { type CameraState } from '@cognite/reveal';
+import { Quaternion } from 'three';
 
-export type CameraStateParameters = Omit<Required<CameraState>, 'rotation'>;
+// Camera state parameters type with position and target as requires but rotation as optional
+export type CameraStateParameters = Omit<Required<CameraState>, 'rotation'> &
+  Pick<CameraState, 'rotation'>;
 
 export const useCameraStateControl = (
   externalCameraState?: CameraStateParameters,
@@ -17,7 +20,8 @@ export const useCameraStateControl = (
       ? undefined
       : {
           position: externalCameraState.position.clone(),
-          target: externalCameraState.target.clone()
+          target: externalCameraState.target.clone(),
+          rotation: externalCameraState.rotation?.clone()
         }
   );
 
@@ -63,7 +67,8 @@ const useSetExternalCameraStateOnCameraMove = (
 
       lastSetExternalState.current = {
         position: currentCameraManagerState.position.clone(),
-        target: currentCameraManagerState.target.clone()
+        target: currentCameraManagerState.target.clone(),
+        rotation: currentCameraManagerState.rotation.clone()
       };
 
       setCameraState?.(currentCameraManagerState);
@@ -89,10 +94,19 @@ function isCameraStatesEqual(
   }
 
   const epsilon = 0.001;
-  const { position: previousPosition, target: previousTarget } = previous;
-  const { position: currentPosition, target: currentTarget } = current;
-  return (
-    previousPosition.distanceToSquared(currentPosition) <= epsilon &&
-    previousTarget.distanceToSquared(currentTarget) <= epsilon
-  );
+  const {
+    position: previousPosition,
+    target: previousTarget,
+    rotation: previousRotation
+  } = previous;
+  const { position: currentPosition, target: currentTarget, rotation: currentRotation } = current;
+
+  const isPositionStateEqual = previousPosition.distanceToSquared(currentPosition) <= epsilon;
+  const isTargetStateEqual = previousTarget.distanceToSquared(currentTarget) <= epsilon;
+
+  const nonNullCurrentRotation = currentRotation ?? new Quaternion().identity();
+  const nonNullPreviousRotation = previousRotation ?? new Quaternion().identity();
+  const isRotationStateEqual = nonNullPreviousRotation.angleTo(nonNullCurrentRotation) <= epsilon;
+
+  return isPositionStateEqual && isTargetStateEqual && isRotationStateEqual;
 }

react-components/tests/tests-utilities/fixtures/cameraManager.ts

@@ -26,9 +26,10 @@ export const cameraManagerMock = new Mock<CameraManager>()
     )
   )
   .setup((p) => p.setCameraState)
-  .returns(({ position, target }) => {
+  .returns(({ position, target, rotation }) => {
     cameraManagerGlobalCurrentCameraState.position = position;
     cameraManagerGlobalCurrentCameraState.target = target;
+    cameraManagerGlobalCurrentCameraState.rotation = rotation;
     setTimeout(() => {
       cameraManagerGlobalCameraEvents.cameraStop.forEach((callback) => {
         callback(position!, target!);