fix(react-components): Update fit view so it uses only visual object

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.55.9",
+  "version": "0.55.10",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9.84.3",
-    "@cognite/reveal": "4.16.1",
+    "@cognite/reveal": "4.17.0",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.84.3",
-    "@cognite/reveal": "^4.16.1",
+    "@cognite/reveal": "^4.17.0",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",

react-components/src/architecture/base/concreteCommands/ToggleAllModelsVisibleCommand.ts

@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { RenderTargetCommand } from '../commands/RenderTargetCommand';
+import { type TranslateKey } from '../utilities/TranslateKey';
+
+export class ToggleAllModelsVisibleCommand extends RenderTargetCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Show or hide all models' };
+  }
+
+  public override get icon(): string {
+    return 'EyeShow';
+  }
+
+  public override get isToggle(): boolean {
+    return true;
+  }
+
+  public override get isChecked(): boolean {
+    return this.isAnyVisible();
+  }
+
+  public override get isEnabled(): boolean {
+    return this.renderTarget.viewer.models.length > 0;
+  }
+
+  protected override invokeCore(): boolean {
+    const isVisible = this.isAnyVisible();
+    for (const model of this.renderTarget.viewer.models) {
+      model.visible = !isVisible;
+    }
+    this.renderTarget.invalidate();
+    return true;
+  }
+
+  // ==================================================
+  // INSTANCE METHODS
+  // ==================================================
+
+  private isAnyVisible(): boolean {
+    for (const model of this.renderTarget.viewer.models) {
+      if (model.visible) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

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

@@ -9,7 +9,8 @@ import {
   type Cognite3DViewer,
   type IFlexibleCameraManager,
   CDF_TO_VIEWER_TRANSFORMATION,
-  CognitePointCloudModel
+  CognitePointCloudModel,
+  CogniteCadModel
 } from '@cognite/reveal';
 import {
   Vector3,
@@ -136,11 +137,15 @@ export class RevealRenderTarget {
     return this.cameraManager.getCamera();
   }
 
-  public get clippedSceneBoundingBox(): Box3 {
+  // ==================================================
+  // INSTANCE PROPERTIES: Get bounding box
+  // ==================================================
+
+  public get clippedVisualSceneBoundingBox(): Box3 {
     if (this._clippedBoundingBox === undefined) {
-      return this.sceneBoundingBox;
+      return this.visualSceneBoundingBox;
     }
-    const boundingBox = this.sceneBoundingBox.clone();
+    const boundingBox = this.visualSceneBoundingBox.clone();
     boundingBox.intersect(this._clippedBoundingBox);
     return boundingBox;
   }
@@ -149,6 +154,14 @@ export class RevealRenderTarget {
     return this.viewer.getSceneBoundingBox();
   }
 
+  public get visualSceneBoundingBox(): Box3 {
+    return this.viewer.getVisualSceneBoundingBox();
+  }
+
+  // ==================================================
+  // INSTANCE METHODS
+  // ==================================================
+
   public *getPointClouds(): Generator<CognitePointCloudModel> {
     for (const model of this.viewer.models) {
       if (model instanceof CognitePointCloudModel) {
@@ -157,9 +170,13 @@ export class RevealRenderTarget {
     }
   }
 
-  // ==================================================
-  // INSTANCE METHODS
-  // ==================================================
+  public *getCadModels(): Generator<CogniteCadModel> {
+    for (const model of this.viewer.models) {
+      if (model instanceof CogniteCadModel) {
+        yield model;
+      }
+    }
+  }
 
   public setConfig(config: BaseRevealConfig): void {
     this._config = config;
@@ -178,6 +195,7 @@ export class RevealRenderTarget {
 
   public onStartup(): void {
     this._config?.onStartup(this);
+    CommandsUpdater.update(this);
   }
 
   public dispose(): void {
@@ -237,11 +255,7 @@ export class RevealRenderTarget {
   // ==================================================
 
   public fitView(): boolean {
-    const boundingBox = this.clippedSceneBoundingBox;
-    if (boundingBox.isEmpty()) {
-      return false;
-    }
-    this.viewer.fitCameraToBoundingBox(this.clippedSceneBoundingBox);
+    this.viewer.fitCameraToBoundingBox(this.clippedVisualSceneBoundingBox);
     return true;
   }
 

react-components/src/architecture/base/utilities/geometry/Range1.ts

@@ -181,7 +181,7 @@ export class Range1 {
   // INSTANCE METHODS: Operations
   // ==================================================
 
-  public clear(): void {
+  public makeEmpty(): void {
     this._min = 0;
     this._max = 0;
     this._isEmpty = true;

react-components/src/architecture/base/utilities/geometry/Range3.ts

@@ -220,8 +220,18 @@ export class Range3 {
   // INSTANCE METHODS: Operations
   // ==================================================
 
+  public makeEmpty(): void {
+    this.x.makeEmpty();
+    this.y.makeEmpty();
+    this.z.makeEmpty();
+  }
+
   public copy(box: Box3): void {
-    this.set(box.min, box.max);
+    if (box.isEmpty()) {
+      this.makeEmpty();
+    } else {
+      this.set(box.min, box.max);
+    }
   }
 
   public set(min: Vector3, max: Vector3): void {

react-components/src/architecture/base/views/GroupThreeView.ts

@@ -34,6 +34,7 @@ export abstract class GroupThreeView<DomainObjectType extends DomainObject = Dom
   // ==================================================
 
   protected readonly _group: Group = new Group();
+  private _inNeedsUpdate = false; // True if inside needsUpdate. This is to avoid infinite recursion.
 
   protected get isEmpty(): boolean {
     return this._group.children.length === 0;
@@ -189,14 +190,24 @@ export abstract class GroupThreeView<DomainObjectType extends DomainObject = Dom
    * When it returns true, the view will be rebuild by addChildren().
    * @returns A boolean value indicating whether the view needs to be updated.
    */
-  protected get needsUpdate(): boolean {
+  protected needsUpdateCore(): boolean {
     return false;
   }
 
   // ==================================================
   // INSTANCE METHODS
   // ==================================================
 
+  protected get needsUpdate(): boolean {
+    if (this._inNeedsUpdate) {
+      return false;
+    }
+    this._inNeedsUpdate = true;
+    const result = this.needsUpdateCore();
+    this._inNeedsUpdate = false;
+    return result;
+  }
+
   private makeChildren(): void {
     if (!this.isEmpty) {
       throw Error('Can make the object when it is already made');

react-components/src/architecture/concrete/axis/AxisThreeView.ts

@@ -109,25 +109,24 @@ export class AxisThreeView extends GroupThreeView {
     return false;
   }
 
-  protected override get needsUpdate(): boolean {
+  protected override needsUpdateCore(): boolean {
     const target = this.renderTarget;
 
     // Check if bounding box is different
-    const sceneBoundingBox = target.clippedSceneBoundingBox;
-    if (sceneBoundingBox.equals(this._sceneBoundingBox)) {
+    const boundingBox = target.clippedVisualSceneBoundingBox;
+    if (boundingBox.equals(this._sceneBoundingBox)) {
       return false;
     }
-    this._sceneBoundingBox.copy(sceneBoundingBox);
-    this._expandedSceneBoundingBox.copy(sceneBoundingBox);
-    this._expandedSceneBoundingBox.expandByFraction(0.02);
+    this._sceneBoundingBox.copy(boundingBox);
+    this._expandedSceneBoundingBox.copy(boundingBox);
+    if (!this._expandedSceneBoundingBox.isEmpty) {
+      this._expandedSceneBoundingBox.expandByFraction(0.02);
+    }
     return true;
   }
 
   protected override addChildren(): void {
     const boundingBox = this._expandedSceneBoundingBox;
-    if (boundingBox === undefined) {
-      return;
-    }
     if (boundingBox.isEmpty) {
       return;
     }

react-components/src/architecture/concrete/config/StoryBookConfig.ts

@@ -24,6 +24,7 @@ import { ObservationsTool } from '../observations/ObservationsTool';
 import { SettingsCommand } from '../../base/concreteCommands/SettingsCommand';
 import { MockSettingsCommand } from '../../base/commands/mocks/MockSettingsCommand';
 import { MockFilterCommand } from '../../base/commands/mocks/MockFilterCommand';
+import { ToggleAllModelsVisibleCommand } from '../../base/concreteCommands/ToggleAllModelsVisibleCommand';
 
 export class StoryBookConfig extends BaseRevealConfig {
   // ==================================================
@@ -41,6 +42,7 @@ export class StoryBookConfig extends BaseRevealConfig {
       undefined,
       new FitViewCommand(),
       new SetAxisVisibleCommand(),
+      new ToggleAllModelsVisibleCommand(),
       new ToggleMetricUnitsCommand(),
       new KeyboardSpeedCommand(),
       new SettingsCommand(),

react-components/src/architecture/concrete/measurements/MeasurementTool.ts

@@ -63,7 +63,7 @@ export class MeasurementTool extends PrimitiveEditTool {
       this.setAllVisible(true);
       return;
     }
-    const sceneBoundingBox = this.renderTarget.clippedSceneBoundingBox;
+    const sceneBoundingBox = this.renderTarget.clippedVisualSceneBoundingBox;
     for (const domainObject of this.getSelectable()) {
       if (domainObject instanceof MeasureBoxDomainObject) {
         const boundingBox = domainObject.getBoundingBox();

react-components/src/architecture/concrete/primitives/plane/PlaneView.ts

@@ -89,7 +89,7 @@ export class PlaneView extends GroupThreeView<PlaneDomainObject> {
     return this.style.depthTest;
   }
 
-  protected override get needsUpdate(): boolean {
+  protected override needsUpdateCore(): boolean {
     const target = this.renderTarget;
 
     // Check if bounding box is different
@@ -98,18 +98,21 @@ export class PlaneView extends GroupThreeView<PlaneDomainObject> {
       return false;
     }
     this._sceneBoundingBox.copy(sceneBoundingBox);
-    this._sceneRange.copy(this._sceneBoundingBox);
+    this._sceneRange.copy(sceneBoundingBox);
     return true;
   }
 
   protected override addChildren(): void {
     const { domainObject, style } = this;
     const plane = domainObject.plane;
 
-    const sceneBoundingBox = this._sceneBoundingBox.clone();
-    sceneBoundingBox.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION.clone().invert());
+    if (this._sceneBoundingBox.isEmpty()) {
+      return;
+    }
+    const boundingBox = this._sceneBoundingBox.clone();
+    boundingBox.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION.clone().invert());
     const range = new Range3();
-    range.copy(sceneBoundingBox);
+    range.copy(boundingBox);
 
     let p0: Vector3 | undefined;
     let p1: Vector3 | undefined;

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

@@ -13,7 +13,7 @@ export const FitModelsButton = (): ReactElement => {
   const { t } = useTranslation();
 
   const updateCamera = useCallback(() => {
-    cameraNavigation.fitCameraToAllModels();
+    cameraNavigation.fitCameraToVisualSceneBoundingBox();
   }, []);
 
   return (

react-components/src/hooks/useCameraNavigation.tsx

@@ -8,6 +8,7 @@ import { useFdmNodeCache } from '../components/CacheProvider/NodeCacheProvider';
 import { Box3 } from 'three';
 
 export type CameraNavigationActions = {
+  fitCameraToVisualSceneBoundingBox: (duration?: number) => void;
   fitCameraToAllModels: (duration?: number) => void;
   fitCameraToModelNode: (revisionId: number, nodeId: number) => Promise<void>;
   fitCameraToModelNodes: (revisionId: number, nodeids: number[]) => Promise<void>;
@@ -20,6 +21,10 @@ export const useCameraNavigation = (): CameraNavigationActions => {
   const fdmNodeCache = useFdmNodeCache();
   const viewer = useReveal();
 
+  const fitCameraToVisualSceneBoundingBox = (duration?: number): void => {
+    viewer.fitCameraToVisualSceneBoundingBox(duration);
+  };
+
   const fitCameraToAllModels = (duration?: number): void => {
     const models = viewer.models;
     if (models.length === 0) {
@@ -36,11 +41,11 @@ export const useCameraNavigation = (): CameraNavigationActions => {
     }
 
     const nodeBoundingBoxes = await (model as CogniteCadModel).getBoundingBoxesByNodeIds(nodeIds);
-    const unionedBox = nodeBoundingBoxes.reduce(
+    const boundingBox = nodeBoundingBoxes.reduce(
       (currentBox, nextBox) => currentBox.union(nextBox),
       new Box3()
     );
-    viewer.cameraManager.fitCameraToBoundingBox(unionedBox);
+    viewer.cameraManager.fitCameraToBoundingBox(boundingBox);
   };
 
   const fitCameraToModelNode = async (revisionId: number, nodeId: number): Promise<void> => {
@@ -78,6 +83,7 @@ export const useCameraNavigation = (): CameraNavigationActions => {
   };
 
   return {
+    fitCameraToVisualSceneBoundingBox,
     fitCameraToAllModels,
     fitCameraToInstance,
     fitCameraToInstances,