feat(react-components): Add tool and domain obect for making Image360Annotation

react-components/package.json

@@ -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/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/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

@@ -217,7 +217,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 +229,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 +246,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,
@@ -88,6 +89,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;
   }

react-components/src/architecture/concrete/measurements/getIconByPrimitiveType.ts → react-components/src/architecture/base/utilities/primitives/getIconByPrimitiveType.ts

@@ -2,8 +2,8 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type IconName } from '../../base/utilities/IconName';
-import { PrimitiveType } from '../../base/utilities/primitives/PrimitiveType';
+import { type IconName } from '../IconName';
+import { PrimitiveType } from './PrimitiveType';
 
 export function getIconByPrimitiveType(primitiveType: PrimitiveType): IconName {
   switch (primitiveType) {
@@ -34,7 +34,7 @@ export function getIconByPrimitiveType(primitiveType: PrimitiveType): IconName {
     case PrimitiveType.HorizontalCylinder:
       return 'CylinderHorizontal';
     case PrimitiveType.None:
-      return 'Edit';
+      return 'Cursor';
     default:
       throw new Error('Unrecognized PrimitiveType');
   }

react-components/src/architecture/concrete/annotation360/DeleteSelectedImage360AnnotationCommand.ts

@@ -0,0 +1,51 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { InstanceCommand } from '../../base/commands/InstanceCommand';
+import { type DomainObject } from '../../base/domainObjects/DomainObject';
+import { Changes } from '../../base/domainObjectsHelpers/Changes';
+import { FocusType } from '../../base/domainObjectsHelpers/FocusType';
+import { type IconName } from '../../base/utilities/IconName';
+import { type TranslateKey } from '../../base/utilities/TranslateKey';
+import { Image360AnnotationDomainObject } from './Image360AnnotationDomainObject';
+
+export class DeleteSelectedImage360AnnotationCommand extends InstanceCommand {
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Remove selected polygon' };
+  }
+
+  public override get icon(): IconName {
+    return 'Delete';
+  }
+
+  public override get buttonType(): string {
+    return 'ghost-destructive';
+  }
+
+  public override get shortCutKey(): string {
+    return 'DEL';
+  }
+
+  public override get isEnabled(): boolean {
+    return this.getFirstInstance() !== undefined;
+  }
+
+  protected override invokeCore(): boolean {
+    const array = Array.from(this.getInstances());
+    array.reverse();
+    for (const domainObject of array) {
+      this.addTransaction(domainObject.createTransaction(Changes.deleted));
+      domainObject.removeInteractive();
+    }
+    return true;
+  }
+
+  protected override isInstance(domainObject: DomainObject): boolean {
+    return (
+      domainObject instanceof Image360AnnotationDomainObject &&
+      domainObject.isSelected &&
+      domainObject.focusType !== FocusType.Pending
+    );
+  }
+}

react-components/src/architecture/concrete/annotation360/Image360AnnotationCreator.ts

@@ -0,0 +1,56 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type Ray, type Vector3 } from 'three';
+import { Image360AnnotationDomainObject } from './Image360AnnotationDomainObject';
+import { type BaseTool } from '../../base/commands/BaseTool';
+import { LineCreator } from '../primitives/line/LineCreator';
+import assert from 'assert';
+
+export class Image360AnnotationCreator extends LineCreator {
+  // ==================================================
+  // CONSTRUCTOR
+  // ==================================================
+
+  public constructor(tool: BaseTool) {
+    const image360Id = tool.renderTarget.viewer.getActive360ImageInfo()?.image360.id;
+    assert(image360Id !== undefined, 'Image360AnnotationCreator: image360Id is undefined');
+
+    // Get the camera position in CDF coordinates
+    const { position } = tool.renderTarget.cameraManager.getCameraState();
+    assert(position !== undefined, 'Camera position unknown');
+
+    const center = position.clone();
+    center.applyMatrix4(tool.renderTarget.fromViewerMatrix);
+
+    const domainObject = new Image360AnnotationDomainObject(image360Id);
+    domainObject.center.copy(center);
+
+    super(tool, domainObject);
+  }
+
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get preferIntersection(): boolean {
+    return false;
+  }
+
+  public override get minimumPointCount(): number {
+    return 3;
+  }
+
+  public override get maximumPointCount(): number {
+    return Number.MAX_SAFE_INTEGER;
+  }
+
+  protected override transformInputPoint(
+    ray: Ray,
+    _point: Vector3 | undefined,
+    _isPending: boolean
+  ): Vector3 | undefined {
+    return ray.direction.clone();
+  }
+}