fix(react-components): don't add axis gizmo and use event listeners i…

…f no flexible camera manager (#4540)

* chore(react-components): remove default axis gizmo tool

* fix: register event listeners if not using flexible camera

* Add gizmo in a function

* chore: lint fix

---------

Co-authored-by: Nils Petter Fremming <nils.fremming@cognite.com>

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",

react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts

@@ -9,7 +9,6 @@ import {
   type Cognite3DViewer,
   type IFlexibleCameraManager
 } from '@cognite/reveal';
-import { AxisGizmoTool } from '@cognite/reveal/tools';
 import { NavigationTool } from '../commands/NavigationTool';
 import {
   Vector3,
@@ -27,6 +26,7 @@ import { getResizeCursor } from '../utilities/geometry/getResizeCursor';
 import { VisualDomainObject } from '../domainObjects/VisualDomainObject';
 import { ThreeView } from '../views/ThreeView';
 import { type DomainObject } from '../domainObjects/DomainObject';
+import { AxisGizmoTool } from '@cognite/reveal/tools';
 
 const DIRECTIONAL_LIGHT_NAME = 'DirectionalLight';
 
@@ -38,11 +38,11 @@ export class RevealRenderTarget {
   private readonly _viewer: Cognite3DViewer;
   private readonly _toolController: ToolControllers;
   private readonly _rootDomainObject: RootDomainObject;
-  private _axisGizmoTool: AxisGizmoTool | undefined;
   private _ambientLight: AmbientLight | undefined;
   private _directionalLight: DirectionalLight | undefined;
   private _cropBoxBoundingBox: Box3 | undefined;
   private _cropBoxName: string | undefined = undefined;
+  private _axisGizmoTool: AxisGizmoTool | undefined;
 
   // ==================================================
   // CONTRUCTORS
@@ -62,6 +62,11 @@ export class RevealRenderTarget {
     this.initializeLights();
     this._viewer.on('cameraChange', this.cameraChangeHandler);
     this._viewer.on('beforeSceneRendered', this.beforeSceneRenderedHandler);
+
+    const navigationTool = new NavigationTool();
+    navigationTool.attach(this);
+    this.toolController.add(navigationTool);
+    this.toolController.setDefaultTool(navigationTool);
   }
 
   // ==================================================
@@ -124,14 +129,9 @@ export class RevealRenderTarget {
   // INSTANCE METHODS
   // ==================================================
 
-  public initialize(): void {
+  public addAxisGizmo(): void {
     this._axisGizmoTool = new AxisGizmoTool();
     this._axisGizmoTool.connect(this._viewer);
-
-    const navigationTool = new NavigationTool();
-    navigationTool.attach(this);
-    this.toolController.add(navigationTool);
-    this.toolController.setDefaultTool(navigationTool);
   }
 
   public dispose(): void {

react-components/src/components/RevealContext/RevealContext.tsx

@@ -101,14 +101,17 @@ const useRevealFromKeepAlive = ({
   function getOrInitializeRenderTarget(): RevealRenderTarget {
     let renderTarget = revealKeepAliveData?.renderTargetRef.current;
     if (renderTarget === undefined) {
-      const viewer = new Cognite3DViewer({ ...viewerOptions, sdk, hasEventListeners: false });
+      const viewer = new Cognite3DViewer({
+        ...viewerOptions,
+        sdk,
+        hasEventListeners: !(viewerOptions?.useFlexibleCameraManager ?? false)
+      });
       renderTarget = new RevealRenderTarget(viewer);
       if (revealKeepAliveData !== undefined) {
         revealKeepAliveData.renderTargetRef.current = renderTarget;
       }
     }
     renderTarget.viewer.setBackgroundColor({ color, alpha: 1 });
-    renderTarget.initialize();
     setRenderTarget(renderTarget);
     return renderTarget;
   }

react-components/stories/utilities/RevealStoryContainer.tsx

@@ -51,7 +51,7 @@ export const RevealStoryContext = ({
         useFlexibleCameraManager: true
       });
       const renderTarget = new RevealRenderTarget(newViewer);
-      renderTarget.initialize();
+      renderTarget.addAxisGizmo();
       return renderTarget;
     }
   }, [viewer]);