Merge branch 'master' into hflatval/expected-resource-count-hook

react-components/package.json

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

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

@@ -31,4 +31,8 @@ export abstract class BaseSliderCommand extends RenderTargetCommand {
   public abstract get value(): number;
 
   public abstract set value(value: number);
+
+  public getValueLabel(): string {
+    return this.value.toString();
+  }
 }

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

@@ -1,10 +1,19 @@
 /*!
  * Copyright 2024 Cognite AS
  */
+import { type BaseCommand } from './BaseCommand';
 import { RenderTargetCommand } from './RenderTargetCommand';
 
 export class DividerCommand extends RenderTargetCommand {
   public override get isVisible(): boolean {
     return true;
   }
+
+  public override equals(other: BaseCommand): boolean {
+    return this === other;
+  }
+
+  protected override invokeCore(): boolean {
+    throw Error('invoke should never be called on a divider.');
+  }
 }

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

@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { BaseSliderCommand } from './BaseSliderCommand';
+
+const MIN_VALUE = 0;
+const MAX_VALUE = 1;
+const STEP_VALUE = 1;
+export abstract class FractionSliderCommand extends BaseSliderCommand {
+  // ==================================================
+  // CONSTRUCTOR
+  // ==================================================
+
+  public constructor() {
+    super(MIN_VALUE, MAX_VALUE, STEP_VALUE);
+  }
+
+  // ==================================================
+  // OVERRIDES
+  // =================================================
+
+  public override getValueLabel(): string {
+    return Math.round(100 * this.value) + '%';
+  }
+}

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

@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type BaseCommand } from './BaseCommand';
+import { RenderTargetCommand } from './RenderTargetCommand';
+
+export class SectionCommand extends RenderTargetCommand {
+  public override get isVisible(): boolean {
+    return true;
+  }
+
+  public override equals(other: BaseCommand): boolean {
+    return this === other;
+  }
+
+  protected override invokeCore(): boolean {
+    throw Error('invoke should never be called on a section.');
+  }
+}

react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts

@@ -20,6 +20,10 @@ export class MockCheckableCommand extends RenderTargetCommand {
     return 'Snow';
   }
 
+  public override get isToggle(): boolean {
+    return true;
+  }
+
   public override get isChecked(): boolean {
     return this.value;
   }
@@ -28,8 +32,4 @@ export class MockCheckableCommand extends RenderTargetCommand {
     this.value = !this.value;
     return true;
   }
-
-  public override get isToggle(): boolean {
-    return true;
-  }
 }

react-components/src/architecture/base/commands/mocks/MockSectionCommand.ts

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type TranslateKey } from '../../utilities/TranslateKey';
+import { SectionCommand } from '../SectionCommand';
+
+export class MockSectionCommand extends SectionCommand {
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Slider section' };
+  }
+}

react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts

@@ -2,6 +2,9 @@
  * Copyright 2024 Cognite AS
  */
 
+import { type TranslateKey } from '../../utilities/TranslateKey';
+import { type IconName } from '../../utilities/IconName';
+
 import { BaseSettingsCommand } from '../BaseSettingsCommand';
 import { MockActionCommand } from './MockActionCommand';
 import { MockToggleCommand } from './MockToggleCommand';
@@ -10,8 +13,8 @@ import { MockEnumOptionCommand } from './MockEnumOptionCommand';
 import { MockSliderCommand } from './MockSliderCommand';
 import { MockFilterCommand } from './MockFilterCommand';
 import { MockNumberOptionCommand } from './MockNumberOptionCommand';
-import { type TranslateKey } from '../../utilities/TranslateKey';
-import { type IconName } from '../../utilities/IconName';
+import { MockSectionCommand } from './MockSectionCommand';
+import { DividerCommand } from '../DividerCommand';
 
 export class MockSettingsCommand extends BaseSettingsCommand {
   // ==================================================
@@ -21,12 +24,15 @@ export class MockSettingsCommand extends BaseSettingsCommand {
   constructor() {
     super();
     this.add(new MockToggleCommand());
-    this.add(new MockSliderCommand());
     this.add(new MockEnumOptionCommand());
     this.add(new MockNumberOptionCommand());
     this.add(new MockActionCommand());
     this.add(new MockCheckableCommand());
     this.add(new MockFilterCommand());
+
+    this.add(new DividerCommand());
+    this.add(new MockSectionCommand());
+    this.add(new MockSliderCommand());
   }
 
   // ==================================================

react-components/src/architecture/base/commands/mocks/MockSliderCommand.ts

@@ -3,18 +3,10 @@
  */
 
 import { type TranslateKey } from '../../utilities/TranslateKey';
-import { BaseSliderCommand } from '../BaseSliderCommand';
+import { FractionSliderCommand } from '../FractionSliderCommand';
 
-export class MockSliderCommand extends BaseSliderCommand {
-  public _value = 5;
-
-  // ==================================================
-  // CONSTRUCTOR
-  // ==================================================
-
-  public constructor() {
-    super(1, 10, 1);
-  }
+export class MockSliderCommand extends FractionSliderCommand {
+  public _value = 0.5;
 
   // ==================================================
   // OVERRIDES

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

@@ -2,25 +2,47 @@
  * Copyright 2024 Cognite AS
  */
 
-import { BaseSettingsCommand } from '../commands/BaseSettingsCommand';
-import { SetQualityCommand } from './SetQualityCommand';
-import { SetPointSizeCommand } from './SetPointSizeCommand';
-import { SetPointColorTypeCommand } from './SetPointColorTypeCommand';
-import { SetPointShapeCommand } from './SetPointShapeCommand';
-import { PointCloudFilterCommand } from './PointCloudFilterCommand';
 import { type TranslateKey } from '../utilities/TranslateKey';
 import { type IconName } from '../utilities/IconName';
-import { PointCloudDividerCommand } from './PointCloudDividerCommand';
+
+import { BaseSettingsCommand } from '../commands/BaseSettingsCommand';
+import { SetQualityCommand } from './SetQualityCommand';
+import { SetPointSizeCommand } from './pointCloud/SetPointSizeCommand';
+import { SetPointColorTypeCommand } from './pointCloud/SetPointColorTypeCommand';
+import { SetPointShapeCommand } from './pointCloud/SetPointShapeCommand';
+import { PointCloudFilterCommand } from './pointCloud/PointCloudFilterCommand';
+import { PointCloudDividerCommand } from './pointCloud/PointCloudDividerCommand';
+import { Image360CollectionDividerCommand } from './image360Collection/Image360CollectionDividerCommand';
+import { Set360ImagesSectionCommand } from './image360Collection/Set360ImagesSectionCommand';
+import { Set360ImagesOpacityCommand } from './image360Collection/Set360ImagesOpacityCommand';
+import { Set360IconsSectionCommand } from './image360Collection/Set360IconsSectionCommand';
+import { Set360IconsVisibleCommand } from './image360Collection/Set360IconsVisibleCommand';
+import { Set360IconsOpacityCommand } from './image360Collection/Set360IconsOpacityCommand';
+import { Set360IconsOccludedVisibleCommand } from './image360Collection/Set360IconsOccludedVisibleCommand';
 
 export class SettingsCommand extends BaseSettingsCommand {
   // ==================================================
   // CONSTRUCTOR
   // ==================================================
 
-  public constructor() {
+  public constructor(include360Images: boolean = true) {
     super();
 
     this.add(new SetQualityCommand());
+
+    if (include360Images) {
+      // 360 Images
+      this.add(new Image360CollectionDividerCommand());
+      this.add(new Set360ImagesSectionCommand());
+      this.add(new Set360ImagesOpacityCommand());
+
+      // 360 Markers
+      this.add(new Set360IconsSectionCommand());
+      this.add(new Set360IconsVisibleCommand());
+      this.add(new Set360IconsOccludedVisibleCommand());
+      this.add(new Set360IconsOpacityCommand());
+    }
+    // Point clouds
     this.add(new PointCloudDividerCommand());
     this.add(new SetPointSizeCommand());
     this.add(new SetPointColorTypeCommand());

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

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

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

@@ -0,0 +1,41 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type Image360Collection } from '@cognite/reveal';
+import { RenderTargetCommand } from '../../commands/RenderTargetCommand';
+import { type TranslateKey } from '../../utilities/TranslateKey';
+
+export class Set360IconsOccludedVisibleCommand extends RenderTargetCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'X-ray' }; // @need-translation
+  }
+
+  public override get isEnabled(): boolean {
+    return this.firstCollection?.getIconsVisibility() ?? false;
+  }
+
+  public override get isToggle(): boolean {
+    return true;
+  }
+
+  public override get isChecked(): boolean {
+    return this.firstCollection?.isOccludedIconsVisible() ?? true;
+  }
+
+  protected override invokeCore(): boolean {
+    const visible = !this.isChecked;
+    for (const collection of this.renderTarget.get360ImageCollections()) {
+      collection.setOccludedIconsVisible(visible);
+    }
+    return true;
+  }
+
+  private get firstCollection(): Image360Collection | undefined {
+    return this.renderTarget.get360ImageCollections().next().value;
+  }
+}

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

@@ -0,0 +1,35 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type TranslateKey } from '../../utilities/TranslateKey';
+import { FractionSliderCommand } from '../../commands/FractionSliderCommand';
+import { type Image360Collection } from '@cognite/reveal';
+
+export class Set360IconsOpacityCommand extends FractionSliderCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Marker transparency' }; // @need-translation
+  }
+
+  public override get isEnabled(): boolean {
+    return this.firstCollection?.getIconsVisibility() ?? false;
+  }
+
+  public override get value(): number {
+    return this.firstCollection?.getIconsOpacity() ?? 1;
+  }
+
+  public override set value(value: number) {
+    for (const collection of this.renderTarget.get360ImageCollections()) {
+      collection.setIconsOpacity(value);
+    }
+  }
+
+  private get firstCollection(): Image360Collection | undefined {
+    return this.renderTarget.get360ImageCollections().next().value;
+  }
+}

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

@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { SectionCommand } from '../../commands/SectionCommand';
+import { type TranslateKey } from '../../utilities/TranslateKey';
+
+export class Set360IconsSectionCommand extends SectionCommand {
+  public override get isVisible(): boolean {
+    return this.renderTarget.get360ImageCollections().next().value !== undefined;
+  }
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: '360 Markers' }; // @need-translation
+  }
+}

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

@@ -0,0 +1,41 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type Image360Collection } from '@cognite/reveal';
+import { RenderTargetCommand } from '../../commands/RenderTargetCommand';
+import { type TranslateKey } from '../../utilities/TranslateKey';
+
+export class Set360IconsVisibleCommand extends RenderTargetCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Visible' }; // @need-translation
+  }
+
+  public override get isEnabled(): boolean {
+    return this.firstCollection !== undefined;
+  }
+
+  public override get isToggle(): boolean {
+    return true;
+  }
+
+  public override get isChecked(): boolean {
+    return this.firstCollection?.getIconsVisibility() ?? true;
+  }
+
+  protected override invokeCore(): boolean {
+    const visible = !this.isChecked;
+    for (const collection of this.renderTarget.get360ImageCollections()) {
+      collection.setIconsVisibility(visible);
+    }
+    return true;
+  }
+
+  private get firstCollection(): Image360Collection | undefined {
+    return this.renderTarget.get360ImageCollections().next().value;
+  }
+}