Merge branch 'master' into hflatval/poi-functionality

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.65.5",
+  "version": "0.66.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs-lab": "^9.0.0-alpha.111",
-    "@cognite/reveal": "4.20.1",
+    "@cognite/reveal": "4.21.1",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -46,7 +46,7 @@
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs-lab": "^9.0.0-alpha.113",
     "@cognite/cogs.js": "^10.25.0",
-    "@cognite/reveal": "^4.20.1",
+    "@cognite/reveal": "^4.21.1",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "1.48.2",
     "@storybook/addon-essentials": "8.4.2",

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

@@ -118,6 +118,13 @@ export abstract class BaseCommand {
 
   protected *getChildren(): Generator<BaseCommand> {}
 
+  public *getDescendants(): Generator<BaseCommand> {
+    for (const child of this.getChildren()) {
+      yield child;
+      yield* child.getDescendants();
+    }
+  }
+
   /*
    * Called when the command is invoked
    * Return true if successful, false otherwise

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

@@ -99,7 +99,7 @@ export abstract class BaseTool extends RenderTargetCommand {
     // Override this to clear any temporary objects in the tool, like the dragger
   }
 
-  public onHover(_event: MouseEvent): void {
+  public onHover(_event: PointerEvent): void {
     // Fast. Use this for hover effects when not
     // doing intersection with CAD models and other large models
   }

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

@@ -35,8 +35,8 @@ export class NavigationTool extends BaseTool {
 
   public override onHoverByDebounce(_event: PointerEvent): void {}
 
-  public override onHover(event: MouseEvent): void {
-    this.renderTarget.viewer.onHover360Images(event as PointerEvent);
+  public override onHover(event: PointerEvent): void {
+    this.renderTarget.viewer.onHover360Images(event);
   }
 
   public override async onClick(event: PointerEvent): Promise<void> {
@@ -90,7 +90,7 @@ export class NavigationTool extends BaseTool {
   }
 
   public override onEscapeKey(): void {
-    if (this.renderTarget.viewer.canDoImage360Action(Image360Action.Exit)) {
+    if (this.renderTarget.isInside360Image) {
       void this.renderTarget.viewer.image360Action(Image360Action.Exit).then(() => {
         CommandsUpdater.update(this.renderTarget);
       });

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

@@ -33,6 +33,12 @@ export class SetOrbitOrFirstPersonModeCommand extends BaseOptionCommand {
     flexibleCameraManager.addControlsTypeChangeListener(this._controlsTypeChangeHandler);
   }
 
+  public override dispose(): void {
+    super.dispose();
+    const { flexibleCameraManager } = this.renderTarget;
+    flexibleCameraManager.removeControlsTypeChangeListener(this._controlsTypeChangeHandler);
+  }
+
   // ==================================================
   // INSTANCE METHODS
   // ==================================================

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

@@ -22,6 +22,7 @@ import { Set360IconsOccludedVisibleCommand } from './image360Collection/Set360Ic
 import { SetPointsOfInterestVisibleCommand } from '../../concrete/pointsOfInterest/SetPointsOfInterestVisibleCommand';
 import { PointsOfInterestDividerCommand } from '../../concrete/pointsOfInterest/PointsOfInterestDividerCommand';
 import { PointsOfInterestSectionCommand } from '../../concrete/pointsOfInterest/PointsOfInterestSectionCommand';
+import { SetGhostModeCommand } from './cad/SetGhostModeCommand';
 
 export class SettingsCommand extends BaseSettingsCommand {
   // ==================================================
@@ -32,6 +33,7 @@ export class SettingsCommand extends BaseSettingsCommand {
     super();
 
     this.add(new SetQualityCommand());
+    this.add(new SetGhostModeCommand());
 
     if (includePois) {
       this.add(new PointsOfInterestDividerCommand());

react-components/src/architecture/base/concreteCommands/cad/CadDividerCommand.ts

@@ -0,0 +1,10 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { DividerCommand } from '../../commands/DividerCommand';
+
+export class CadDividerCommand extends DividerCommand {
+  public override get isVisible(): boolean {
+    return this.renderTarget.getCadModels().next().value !== undefined;
+  }
+}

react-components/src/architecture/base/concreteCommands/cad/SetGhostModeCommand.ts

@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { RenderTargetCommand } from '../../commands/RenderTargetCommand';
+import { type TranslateKey } from '../../utilities/TranslateKey';
+
+export class SetGhostModeCommand extends RenderTargetCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { key: 'GHOST_MODE', fallback: 'Ghost mode' };
+  }
+
+  public override get isEnabled(): boolean {
+    return true;
+  }
+
+  public override get isToggle(): boolean {
+    return true;
+  }
+
+  public override get isChecked(): boolean {
+    return this.renderTarget.ghostMode;
+  }
+
+  protected override invokeCore(): boolean {
+    this.renderTarget.ghostMode = !this.renderTarget.ghostMode;
+    return true;
+  }
+}

react-components/src/architecture/base/concreteCommands/pointCloud/SetPointColorTypeCommand.ts

@@ -80,9 +80,9 @@ function getTranslateKey(type: PointColorType): TranslateKey {
     case PointColorType.Rgb:
       return { key: 'RGB', fallback: 'RGB' };
     case PointColorType.Depth:
-      return { key: 'MEASUREMENTS_DEPTH', fallback: 'Depth' };
+      return { key: 'DEPTH', fallback: 'Depth' };
     case PointColorType.Height:
-      return { key: 'MEASUREMENTS_HEIGHT', fallback: 'Height' };
+      return { key: 'HEIGHT', fallback: 'Height' };
     case PointColorType.Classification:
       return { key: 'CLASSIFICATION', fallback: 'Classification' };
     case PointColorType.Intensity:

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

@@ -136,11 +136,7 @@ export abstract class BaseCreator {
     return this.notPendingPointCount >= this.maximumPointCount;
   }
 
-  public addPoint(
-    ray: Ray,
-    intersection: AnyIntersection | undefined,
-    isPending: boolean = false
-  ): boolean {
+  public addPoint(ray: Ray, intersection?: AnyIntersection, isPending: boolean = false): boolean {
     const point = intersection?.point.clone();
     this.convertToCdfCoords(ray, point);
     return this.addPointCore(ray, point, isPending);

react-components/src/architecture/base/reactUpdaters/DomainObjectPanelUpdater.ts

@@ -29,6 +29,9 @@ export class DomainObjectPanelUpdater {
       return;
     }
     if (domainObject !== undefined) {
+      if (!domainObject.hasPanelInfo) {
+        return;
+      }
       this._setDomainObject({ domainObject });
     } else {
       this.hide();
@@ -43,6 +46,9 @@ export class DomainObjectPanelUpdater {
   }
 
   public static notify(domainObject: DomainObject, change: DomainObjectChange): void {
+    if (!domainObject.hasPanelInfo) {
+      return;
+    }
     if (this._setDomainObject === undefined) {
       return;
     }

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

@@ -133,7 +133,20 @@ export class CommandsController extends PointerEvents {
         return tool;
       }
     }
+    return undefined;
+  }
 
+  public getCommandByTypeRecursive<T extends BaseCommand>(classType: Class<T>): T | undefined {
+    for (const command of this._commands) {
+      if (isInstanceOf(command, classType)) {
+        return command;
+      }
+      for (const descendant of command.getDescendants()) {
+        if (isInstanceOf(descendant, classType)) {
+          return descendant;
+        }
+      }
+    }
     return undefined;
   }
 
@@ -217,7 +230,7 @@ export class CommandsController extends PointerEvents {
   public addEventListeners(): void {
     // https://www.w3schools.com/jsref/obj_mouseevent.asp
     const domElement = this._domElement;
-    domElement.addEventListener('mousemove', this._onMouseMove);
+    domElement.addEventListener('pointermove', this._onPointerMove);
     domElement.addEventListener('keydown', this._onKeyDown);
     domElement.addEventListener('keyup', this._onKeyUp);
     domElement.addEventListener('wheel', this._onWheel);
@@ -229,7 +242,7 @@ export class CommandsController extends PointerEvents {
 
   public removeEventListeners(): void {
     const domElement = this._domElement;
-    domElement.removeEventListener('mousemove', this._onMouseMove);
+    domElement.removeEventListener('pointermove', this._onPointerMove);
     domElement.removeEventListener('keydown', this._onKeyDown);
     domElement.removeEventListener('keyup', this._onKeyUp);
     domElement.removeEventListener('wheel', this._onWheel);
@@ -246,7 +259,7 @@ export class CommandsController extends PointerEvents {
   // INSTANCE METHODS: Events
   // ==================================================
 
-  private readonly _onMouseMove = (event: MouseEvent): void => {
+  private readonly _onPointerMove = (event: PointerEvent): void => {
     if (event.buttons === 0) {
       this.activeTool?.onHover(event);
     }

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

@@ -11,7 +11,8 @@ import {
   CDF_TO_VIEWER_TRANSFORMATION,
   CognitePointCloudModel,
   CogniteCadModel,
-  type Image360Collection
+  type Image360Collection,
+  Image360Action
 } from '@cognite/reveal';
 import {
   Vector3,
@@ -57,6 +58,7 @@ export class RevealRenderTarget {
 
   public readonly toViewerMatrix = CDF_TO_VIEWER_TRANSFORMATION.clone();
   public readonly fromViewerMatrix = CDF_TO_VIEWER_TRANSFORMATION.clone().invert();
+  public ghostMode = false;
 
   // ==================================================
   // CONSTRUCTOR
@@ -88,6 +90,10 @@ export class RevealRenderTarget {
     return this._viewer;
   }
 
+  public get isInside360Image(): boolean {
+    return this._viewer.canDoImage360Action(Image360Action.Exit);
+  }
+
   public get config(): BaseRevealConfig | undefined {
     return this._config;
   }