feat(react-components): Add buttons for 360 image actions (#4830)

* Initial commit

* Update package.json

* Update package.json

* Update package.json

* Fixes

* Rename

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.61.1",
+  "version": "0.62.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs-lab": "^9.0.0-alpha.111",
-    "@cognite/reveal": "4.19.0",
+    "@cognite/reveal": "4.20.0",
     "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.19.0",
+    "@cognite/reveal": "^4.20.0",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "1.48.0",
     "@storybook/addon-essentials": "8.3.5",

react-components/src/architecture/base/concreteCommands/image360Collection/Image360ActionCommand.ts

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { Image360Action } from '@cognite/reveal';
+import { RenderTargetCommand } from '../../commands/RenderTargetCommand';
+import { type TranslateKey } from '../../utilities/TranslateKey';
+import { type IconName } from '../../utilities/IconName';
+import { type BaseCommand } from '../../commands/BaseCommand';
+
+export class Image360ActionCommand extends RenderTargetCommand {
+  private readonly _action: Image360Action;
+
+  public constructor(action: Image360Action) {
+    super();
+    this._action = action;
+  }
+
+  public override equals(other: BaseCommand): boolean {
+    if (!(other instanceof Image360ActionCommand)) {
+      return false;
+    }
+    return this._action === other._action;
+  }
+
+  public override get icon(): IconName {
+    switch (this._action) {
+      case Image360Action.Backward:
+        return 'ArrowLeft';
+      case Image360Action.Forward:
+        return 'ArrowRight';
+      case Image360Action.Enter:
+        return 'View360';
+      case Image360Action.Exit:
+        return 'CloseLarge';
+      default:
+        throw new Error('Unknown action');
+    }
+  }
+
+  public override get tooltip(): TranslateKey {
+    switch (this._action) {
+      case Image360Action.Backward:
+        return { fallback: 'Go one 360 image back' };
+      case Image360Action.Forward:
+        return { fallback: 'Go one 360 image forward' };
+      case Image360Action.Enter:
+        return { fallback: 'Enter last exited 360 image' };
+      case Image360Action.Exit:
+        return { fallback: 'Exit 360 image' };
+      default:
+        throw new Error('Unknown action');
+    }
+  }
+
+  public override get isEnabled(): boolean {
+    return this.renderTarget.viewer.canDo360Action(this._action);
+  }
+
+  public override invokeCore(): boolean {
+    void this.renderTarget.viewer.do360Action(this._action);
+    return true;
+  }
+}

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

@@ -29,6 +29,8 @@ import { AnnotationsShowOnTopCommand } from '../annotations/commands/Annotations
 import { AnnotationsSelectTool } from '../annotations/commands/AnnotationsSelectTool';
 import { type DmsUniqueIdentifier } from '../../../data-providers';
 import { PointsOfInterestTool } from '../pointsOfInterest/PointsOfInterestTool';
+import { Image360ActionCommand } from '../../base/concreteCommands/image360Collection/Image360ActionCommand';
+import { Image360Action } from '@cognite/reveal';
 
 export class StoryBookConfig extends BaseRevealConfig {
   // ==================================================
@@ -44,7 +46,12 @@ export class StoryBookConfig extends BaseRevealConfig {
       new SetOrbitOrFirstPersonModeCommand(),
       new FitViewCommand(),
       new SetAxisVisibleCommand(),
-      new KeyboardSpeedCommand()
+      new KeyboardSpeedCommand(),
+      undefined,
+      new Image360ActionCommand(Image360Action.Enter),
+      new Image360ActionCommand(Image360Action.Backward),
+      new Image360ActionCommand(Image360Action.Forward),
+      new Image360ActionCommand(Image360Action.Exit)
     ];
   }
 

react-components/src/components/Architecture/IconComponentMapper.tsx

@@ -12,6 +12,7 @@ import {
   BugIcon,
   CircleIcon,
   ClearAllIcon,
+  CloseLargeIcon,
   CoordinatesIcon,
   CopyIcon,
   CropIcon,
@@ -68,6 +69,7 @@ const defaultMappings: Array<[IconName, IconType]> = [
   ['BorderVertical', BorderVerticalIcon],
   ['Circle', CircleIcon],
   ['ClearAll', ClearAllIcon],
+  ['CloseLarge', CloseLargeIcon],
   ['Coordinates', CoordinatesIcon],
   ['Copy', CopyIcon],
   ['Crop', CropIcon],

react-components/src/components/Architecture/RevealButtons.tsx

@@ -5,7 +5,7 @@
 import { type ReactElement } from 'react';
 import { NavigationTool } from '../../architecture/base/concreteCommands/NavigationTool';
 import { FitViewCommand } from '../../architecture/base/concreteCommands/FitViewCommand';
-import { FlexibleControlsType } from '@cognite/reveal';
+import { FlexibleControlsType, type Image360Action } from '@cognite/reveal';
 import { SetFlexibleControlsTypeCommand } from '../../architecture/base/concreteCommands/SetFlexibleControlsTypeCommand';
 import { SetAxisVisibleCommand } from '../../architecture/concrete/axis/SetAxisVisibleCommand';
 import { ClipTool } from '../../architecture/concrete/clipping/ClipTool';
@@ -21,6 +21,7 @@ import { AnnotationsShowCommand } from '../../architecture/concrete/annotations/
 import { AnnotationsShowOnTopCommand } from '../../architecture/concrete/annotations/commands/AnnotationsShowOnTopCommand';
 import { AnnotationsCreateTool } from '../../architecture/concrete/annotations/commands/AnnotationsCreateTool';
 import { AnnotationsSelectTool } from '../../architecture/concrete/annotations/commands/AnnotationsSelectTool';
+import { Image360ActionCommand } from '../../architecture/base/concreteCommands/image360Collection/Image360ActionCommand';
 
 export class RevealButtons {
   static Settings = ({ include360Images = true }: { include360Images?: boolean }): ReactElement =>
@@ -63,6 +64,9 @@ export class RevealButtons {
   static KeyboardSpeed = (): ReactElement =>
     createButtonFromCommandConstructor(() => new KeyboardSpeedCommand());
 
+  static Do360Action = ({ action }: { action: Image360Action }): ReactElement =>
+    createButtonFromCommandConstructor(() => new Image360ActionCommand(action));
+
   // Annotations
   static AnnotationsSelect = (): ReactElement =>
     createButtonFromCommandConstructor(() => new AnnotationsSelectTool());