refactor (react-components): Used latest changes in Reveal (OnWheel, movement of Vector3Pool) + Final touch on the course material

react-components/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9.84.3",
-    "@cognite/reveal": "4.14.6",
+    "@cognite/reveal": "4.14.7",
     "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.14.6",
+    "@cognite/reveal": "^4.14.7",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",

react-components/src/architecture/base/commands/BaseEditTool.ts

@@ -95,7 +95,7 @@ export abstract class BaseEditTool extends NavigationTool {
     if (!isDomainObjectIntersection(intersection)) {
       return undefined;
     }
-    const domainObject = this.getIntersectedDomainObject(intersection);
+    const domainObject = this.getIntersectedSelectableDomainObject(intersection);
     if (domainObject === undefined) {
       return undefined;
     }
@@ -171,7 +171,7 @@ export abstract class BaseEditTool extends NavigationTool {
    * @param intersection - The intersection to retrieve the domain object from.
    * @returns The intersected visual domain object, or undefined if no valid domain object is found.
    */
-  protected getIntersectedDomainObject(
+  protected getIntersectedSelectableDomainObject(
     intersection: AnyIntersection | undefined
   ): VisualDomainObject | undefined {
     if (!isDomainObjectIntersection(intersection)) {

react-components/src/architecture/base/commands/BaseTool.ts

@@ -101,7 +101,7 @@ export abstract class BaseTool extends RenderTargetCommand {
     await Promise.resolve();
   }
 
-  public async onWheel(_event: WheelEvent): Promise<void> {
+  public async onWheel(_event: WheelEvent, _delta: number): Promise<void> {
     await Promise.resolve();
   }
 

react-components/src/architecture/base/commands/NavigationTool.ts

@@ -55,8 +55,8 @@ export class NavigationTool extends BaseTool {
     await this.cameraManager.onPointerUp(event, leftButton);
   }
 
-  public override async onWheel(event: WheelEvent): Promise<void> {
-    await this.cameraManager.onWheel(event);
+  public override async onWheel(event: WheelEvent, delta: number): Promise<void> {
+    await this.cameraManager.onWheel(event, delta);
   }
 
   public override onKey(event: KeyboardEvent, down: boolean): void {

react-components/src/architecture/base/domainObjects/DomainObject.ts

@@ -455,9 +455,11 @@ export abstract class DomainObject {
 
   public toggleVisibleInteractive(renderTarget: RevealRenderTarget): void {
     const visibleState = this.getVisibleState(renderTarget);
-    if (visibleState === VisibleState.None) this.setVisibleInteractive(true, renderTarget);
-    else if (visibleState === VisibleState.Some || visibleState === VisibleState.All)
+    if (visibleState === VisibleState.None) {
+      this.setVisibleInteractive(true, renderTarget);
+    } else if (visibleState === VisibleState.Some || visibleState === VisibleState.All) {
       this.setVisibleInteractive(false, renderTarget);
+    }
   }
 
   // ==================================================

react-components/src/architecture/base/domainObjectsHelpers/VisibleState.ts

@@ -7,5 +7,5 @@ export enum VisibleState {
   Some, // Partly visible
   None, // None visible
   CanNotBeVisibleNow, // Can not be checked on, but it can be visible
-  Disabled // Visible disabled
+  Disabled // Visible disabled, none of the children can be visible or no children
 }

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

@@ -3,7 +3,7 @@
  * CommandsController: Holds the tools, the active tool and the previous tool
  */
 
-import { PointerEvents, PointerEventsTarget } from '@cognite/reveal';
+import { PointerEvents, PointerEventsTarget, getWheelEventDelta } from '@cognite/reveal';
 import { type BaseTool } from '../commands/BaseTool';
 import { type BaseCommand } from '../commands/BaseCommand';
 
@@ -215,7 +215,8 @@ export class CommandsController extends PointerEvents {
   };
 
   private readonly _onWheel = async (event: WheelEvent): Promise<void> => {
-    await this.activeTool?.onWheel(event);
+    const delta = getWheelEventDelta(event);
+    await this.activeTool?.onWheel(event, delta);
     event.stopPropagation();
     event.preventDefault();
   };

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

@@ -29,7 +29,7 @@ import {
 import { TrianglesBuffers } from '../../base/utilities/geometry/TrianglesBuffers';
 import { type DomainObjectChange } from '../../base/domainObjectsHelpers/DomainObjectChange';
 import { Changes } from '../../base/domainObjectsHelpers/Changes';
-import { Vector3Pool } from '../../base/utilities/geometry/Vector3Pool';
+import { Vector3Pool } from '@cognite/reveal';
 
 const FACE_INDEX_NAME1 = 'faceIndex1';
 const FACE_INDEX_NAME2 = 'faceIndex2';

react-components/src/architecture/concrete/boxDomainObject/MeasureBoxDragger.ts

@@ -9,7 +9,6 @@ import { FocusType } from '../../base/domainObjectsHelpers/FocusType';
 import { type BoxPickInfo } from '../../base/utilities/box/BoxPickInfo';
 import { forceBetween0AndPi } from '../../base/utilities/extensions/mathExtensions';
 import { horizontalAngle } from '../../base/utilities/extensions/vectorExtensions';
-import { Vector3Pool } from '../../base/utilities/geometry/Vector3Pool';
 import { MeasureType } from './MeasureType';
 import { getClosestPointOnLine } from '../../base/utilities/extensions/rayExtensions';
 import { type MeasureBoxDomainObject } from './MeasureBoxDomainObject';
@@ -18,6 +17,7 @@ import {
   type VisualDomainObject,
   type CreateDraggerProps
 } from '../../base/domainObjects/VisualDomainObject';
+import { Vector3Pool } from '@cognite/reveal';
 
 /**
  * The `BoxDragger` class represents a utility for dragging and manipulating a box in a 3D space.

react-components/src/architecture/concrete/boxDomainObject/MeasureBoxView.ts

@@ -29,13 +29,13 @@ import { GroupThreeView } from '../../base/views/GroupThreeView';
 import {
   CDF_TO_VIEWER_TRANSFORMATION,
   type CustomObjectIntersectInput,
-  type CustomObjectIntersection
+  type CustomObjectIntersection,
+  Vector3Pool
 } from '@cognite/reveal';
 import { type DomainObjectIntersection } from '../../base/domainObjectsHelpers/DomainObjectIntersection';
 import { BoxFace } from '../../base/utilities/box/BoxFace';
 import { FocusType } from '../../base/domainObjectsHelpers/FocusType';
 import { clear } from '../../base/utilities/extensions/arrayExtensions';
-import { Vector3Pool } from '../../base/utilities/geometry/Vector3Pool';
 import { createSpriteWithText } from '../../base/utilities/sprites/createSprite';
 import {
   createLineSegmentsBufferGeometryForBox,