From 4ad3a9e9d7e8e48bf5585c02714f183a00386a29 Mon Sep 17 00:00:00 2001 From: Nils Petter Fremming <35219649+nilscognite@users.noreply.github.com> Date: Tue, 22 Oct 2024 13:05:01 +0200 Subject: [PATCH 1/2] feat(react-components): Add 360 images/icons settings (#4811) * Move some files * Add 360 settings * Add comments * Fix versions * Fix yarn * Fix * Make code safer to use * Update CommandButtons.tsx * Make it better * Fix imports * Upgrade Reveal * Fix lint * Update Set360IconsOccludedVisibleCommand.ts * Renaming part 1 * Renaming part 2 * Fix for nest release * Update cad-model-container-storybook-1.png * Update SettingsCommand.ts * Upgrade with new icons * Update IconComponentMapper.tsx * Fix icons * Change icon * Fix accoring to code requiw * Final touch --- react-components/package.json | 4 +- .../base/commands/BaseSliderCommand.ts | 4 ++ .../base/commands/DividerCommand.ts | 9 ++++ .../base/commands/FractionSliderCommand.ts | 26 ++++++++++++ .../base/commands/SectionCommand.ts | 19 +++++++++ .../commands/mocks/MockCheckableCommand.ts | 8 ++-- .../base/commands/mocks/MockSectionCommand.ts | 11 +++++ .../commands/mocks/MockSettingsCommand.ts | 12 ++++-- .../base/commands/mocks/MockSliderCommand.ts | 14 ++----- .../base/concreteCommands/SettingsCommand.ts | 38 +++++++++++++---- .../Image360CollectionDividerCommand.ts | 10 +++++ .../Set360IconsOccludedVisibleCommand.ts | 41 +++++++++++++++++++ .../Set360IconsOpacityCommand.ts | 35 ++++++++++++++++ .../Set360IconsSectionCommand.ts | 15 +++++++ .../Set360IconsVisibleCommand.ts | 41 +++++++++++++++++++ .../Set360ImagesOpacityCommand.ts | 35 ++++++++++++++++ .../Set360ImagesSectionCommand.ts | 15 +++++++ .../PointCloudDividerCommand.ts | 7 +--- .../PointCloudFilterCommand.ts | 6 +-- .../SetPointColorTypeCommand.ts | 6 +-- .../{ => pointCloud}/SetPointShapeCommand.ts | 6 +-- .../{ => pointCloud}/SetPointSizeCommand.ts | 6 +-- .../base/renderTarget/RevealRenderTarget.ts | 9 +++- .../AnnotationsSetCreateTypeCommand.ts | 4 +- .../measurements/getIconByPrimitiveType.ts | 10 +++-- .../concrete/terrain/UpdateTerrainCommand.ts | 2 +- react-components/src/architecture/index.ts | 8 ++-- .../Architecture/CommandButtons.tsx | 8 +++- .../Architecture/IconComponentMapper.tsx | 20 ++++++++- .../components/Architecture/RevealButtons.tsx | 4 +- .../Architecture/SettingsButton.tsx | 15 ++++++- react-components/yarn.lock | 12 +++--- 32 files changed, 391 insertions(+), 69 deletions(-) create mode 100644 react-components/src/architecture/base/commands/FractionSliderCommand.ts create mode 100644 react-components/src/architecture/base/commands/SectionCommand.ts create mode 100644 react-components/src/architecture/base/commands/mocks/MockSectionCommand.ts create mode 100644 react-components/src/architecture/base/concreteCommands/image360Collection/Image360CollectionDividerCommand.ts create mode 100644 react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOccludedVisibleCommand.ts create mode 100644 react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOpacityCommand.ts create mode 100644 react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsSectionCommand.ts create mode 100644 react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsVisibleCommand.ts create mode 100644 react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesOpacityCommand.ts create mode 100644 react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesSectionCommand.ts rename react-components/src/architecture/base/concreteCommands/{ => pointCloud}/PointCloudDividerCommand.ts (51%) rename react-components/src/architecture/base/concreteCommands/{ => pointCloud}/PointCloudFilterCommand.ts (96%) rename react-components/src/architecture/base/concreteCommands/{ => pointCloud}/SetPointColorTypeCommand.ts (92%) rename react-components/src/architecture/base/concreteCommands/{ => pointCloud}/SetPointShapeCommand.ts (90%) rename react-components/src/architecture/base/concreteCommands/{ => pointCloud}/SetPointSizeCommand.ts (83%) diff --git a/react-components/package.json b/react-components/package.json index 568545a2b59..112203f9547 100644 --- a/react-components/package.json +++ b/react-components/package.json @@ -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", diff --git a/react-components/src/architecture/base/commands/BaseSliderCommand.ts b/react-components/src/architecture/base/commands/BaseSliderCommand.ts index dd7f4c3f33c..52404cd8533 100644 --- a/react-components/src/architecture/base/commands/BaseSliderCommand.ts +++ b/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(); + } } diff --git a/react-components/src/architecture/base/commands/DividerCommand.ts b/react-components/src/architecture/base/commands/DividerCommand.ts index db05b5aaae0..abdda121b22 100644 --- a/react-components/src/architecture/base/commands/DividerCommand.ts +++ b/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.'); + } } diff --git a/react-components/src/architecture/base/commands/FractionSliderCommand.ts b/react-components/src/architecture/base/commands/FractionSliderCommand.ts new file mode 100644 index 00000000000..182670dcb47 --- /dev/null +++ b/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) + '%'; + } +} diff --git a/react-components/src/architecture/base/commands/SectionCommand.ts b/react-components/src/architecture/base/commands/SectionCommand.ts new file mode 100644 index 00000000000..38fc809266e --- /dev/null +++ b/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.'); + } +} diff --git a/react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts b/react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts index 968a1bb1039..4bd872a778e 100644 --- a/react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts +++ b/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; - } } diff --git a/react-components/src/architecture/base/commands/mocks/MockSectionCommand.ts b/react-components/src/architecture/base/commands/mocks/MockSectionCommand.ts new file mode 100644 index 00000000000..f72d198fbec --- /dev/null +++ b/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' }; + } +} diff --git a/react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts b/react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts index 355268e00d5..dc653a50e4e 100644 --- a/react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts +++ b/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()); } // ================================================== diff --git a/react-components/src/architecture/base/commands/mocks/MockSliderCommand.ts b/react-components/src/architecture/base/commands/mocks/MockSliderCommand.ts index c1876a469ee..9fbf122e74a 100644 --- a/react-components/src/architecture/base/commands/mocks/MockSliderCommand.ts +++ b/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 diff --git a/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts b/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts index 4a17a20d603..c7225c311e1 100644 --- a/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts +++ b/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()); diff --git a/react-components/src/architecture/base/concreteCommands/image360Collection/Image360CollectionDividerCommand.ts b/react-components/src/architecture/base/concreteCommands/image360Collection/Image360CollectionDividerCommand.ts new file mode 100644 index 00000000000..73190b19d35 --- /dev/null +++ b/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; + } +} diff --git a/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOccludedVisibleCommand.ts b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOccludedVisibleCommand.ts new file mode 100644 index 00000000000..cb2ae99a9f6 --- /dev/null +++ b/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; + } +} diff --git a/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOpacityCommand.ts b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOpacityCommand.ts new file mode 100644 index 00000000000..f496de5a92e --- /dev/null +++ b/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; + } +} diff --git a/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsSectionCommand.ts b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsSectionCommand.ts new file mode 100644 index 00000000000..fc079b417bc --- /dev/null +++ b/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 + } +} diff --git a/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsVisibleCommand.ts b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsVisibleCommand.ts new file mode 100644 index 00000000000..d046030abbd --- /dev/null +++ b/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; + } +} diff --git a/react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesOpacityCommand.ts b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesOpacityCommand.ts new file mode 100644 index 00000000000..391fd29b134 --- /dev/null +++ b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesOpacityCommand.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 Set360ImagesOpacityCommand extends FractionSliderCommand { + // ================================================== + // OVERRIDES + // ================================================== + + public override get tooltip(): TranslateKey { + return { fallback: 'Image Transparency' }; // @need-translation + } + + public override get isEnabled(): boolean { + return this.firstCollection !== undefined; + } + + public override get value(): number { + return this.firstCollection?.getImagesOpacity() ?? 1; + } + + public override set value(value: number) { + for (const collection of this.renderTarget.get360ImageCollections()) { + collection.setImagesOpacity(value); + } + } + + private get firstCollection(): Image360Collection | undefined { + return this.renderTarget.get360ImageCollections().next().value; + } +} diff --git a/react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesSectionCommand.ts b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesSectionCommand.ts new file mode 100644 index 00000000000..ba2d064c9d9 --- /dev/null +++ b/react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesSectionCommand.ts @@ -0,0 +1,15 @@ +/*! + * Copyright 2024 Cognite AS + */ +import { SectionCommand } from '../../commands/SectionCommand'; +import { type TranslateKey } from '../../utilities/TranslateKey'; + +export class Set360ImagesSectionCommand extends SectionCommand { + public override get isVisible(): boolean { + return this.renderTarget.get360ImageCollections().next().value !== undefined; + } + + public override get tooltip(): TranslateKey { + return { fallback: '360 Images' }; // @need-translation + } +} diff --git a/react-components/src/architecture/base/concreteCommands/PointCloudDividerCommand.ts b/react-components/src/architecture/base/concreteCommands/pointCloud/PointCloudDividerCommand.ts similarity index 51% rename from react-components/src/architecture/base/concreteCommands/PointCloudDividerCommand.ts rename to react-components/src/architecture/base/concreteCommands/pointCloud/PointCloudDividerCommand.ts index 99dc3fb336e..ee0dacd99ea 100644 --- a/react-components/src/architecture/base/concreteCommands/PointCloudDividerCommand.ts +++ b/react-components/src/architecture/base/concreteCommands/pointCloud/PointCloudDividerCommand.ts @@ -1,15 +1,10 @@ /*! * Copyright 2024 Cognite AS */ -import { type BaseCommand } from '../commands/BaseCommand'; -import { DividerCommand } from '../commands/DividerCommand'; +import { DividerCommand } from '../../commands/DividerCommand'; export class PointCloudDividerCommand extends DividerCommand { public override get isVisible(): boolean { return this.renderTarget.getPointClouds().next().value !== undefined; } - - public override equals(other: BaseCommand): boolean { - return this === other; - } } diff --git a/react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts b/react-components/src/architecture/base/concreteCommands/pointCloud/PointCloudFilterCommand.ts similarity index 96% rename from react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts rename to react-components/src/architecture/base/concreteCommands/pointCloud/PointCloudFilterCommand.ts index c3f73b5a839..e6b7bcd6245 100644 --- a/react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts +++ b/react-components/src/architecture/base/concreteCommands/pointCloud/PointCloudFilterCommand.ts @@ -3,10 +3,10 @@ */ import { type CognitePointCloudModel, type WellKnownAsprsPointClassCodes } from '@cognite/reveal'; -import { type TranslateKey } from '../utilities/TranslateKey'; +import { type TranslateKey } from '../../utilities/TranslateKey'; import { type Color } from 'three'; -import { BaseFilterCommand, BaseFilterItemCommand } from '../commands/BaseFilterCommand'; -import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget'; +import { BaseFilterCommand, BaseFilterItemCommand } from '../../commands/BaseFilterCommand'; +import { type RevealRenderTarget } from '../../renderTarget/RevealRenderTarget'; export class PointCloudFilterCommand extends BaseFilterCommand { // ================================================== diff --git a/react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts b/react-components/src/architecture/base/concreteCommands/pointCloud/SetPointColorTypeCommand.ts similarity index 92% rename from react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts rename to react-components/src/architecture/base/concreteCommands/pointCloud/SetPointColorTypeCommand.ts index 11f5715e5f3..790b6a1ebdd 100644 --- a/react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts +++ b/react-components/src/architecture/base/concreteCommands/pointCloud/SetPointColorTypeCommand.ts @@ -3,9 +3,9 @@ */ import { PointColorType } from '@cognite/reveal'; -import { BaseOptionCommand } from '../commands/BaseOptionCommand'; -import { RenderTargetCommand } from '../commands/RenderTargetCommand'; -import { type TranslateKey } from '../utilities/TranslateKey'; +import { BaseOptionCommand } from '../../commands/BaseOptionCommand'; +import { RenderTargetCommand } from '../../commands/RenderTargetCommand'; +import { type TranslateKey } from '../../utilities/TranslateKey'; const DEFAULT_OPTIONS: PointColorType[] = [ PointColorType.Rgb, diff --git a/react-components/src/architecture/base/concreteCommands/SetPointShapeCommand.ts b/react-components/src/architecture/base/concreteCommands/pointCloud/SetPointShapeCommand.ts similarity index 90% rename from react-components/src/architecture/base/concreteCommands/SetPointShapeCommand.ts rename to react-components/src/architecture/base/concreteCommands/pointCloud/SetPointShapeCommand.ts index 9393bb86e3f..a1dd5edab06 100644 --- a/react-components/src/architecture/base/concreteCommands/SetPointShapeCommand.ts +++ b/react-components/src/architecture/base/concreteCommands/pointCloud/SetPointShapeCommand.ts @@ -3,9 +3,9 @@ */ import { PointShape } from '@cognite/reveal'; -import { BaseOptionCommand } from '../commands/BaseOptionCommand'; -import { RenderTargetCommand } from '../commands/RenderTargetCommand'; -import { type TranslateKey } from '../utilities/TranslateKey'; +import { BaseOptionCommand } from '../../commands/BaseOptionCommand'; +import { RenderTargetCommand } from '../../commands/RenderTargetCommand'; +import { type TranslateKey } from '../../utilities/TranslateKey'; const DEFAULT_OPTIONS: PointShape[] = [PointShape.Circle, PointShape.Square, PointShape.Paraboloid]; diff --git a/react-components/src/architecture/base/concreteCommands/SetPointSizeCommand.ts b/react-components/src/architecture/base/concreteCommands/pointCloud/SetPointSizeCommand.ts similarity index 83% rename from react-components/src/architecture/base/concreteCommands/SetPointSizeCommand.ts rename to react-components/src/architecture/base/concreteCommands/pointCloud/SetPointSizeCommand.ts index 765edc4ad7e..b49b8a307c1 100644 --- a/react-components/src/architecture/base/concreteCommands/SetPointSizeCommand.ts +++ b/react-components/src/architecture/base/concreteCommands/pointCloud/SetPointSizeCommand.ts @@ -2,12 +2,12 @@ * Copyright 2024 Cognite AS */ -import { type TranslateKey } from '../utilities/TranslateKey'; -import { BaseSliderCommand } from '../commands/BaseSliderCommand'; +import { type TranslateKey } from '../../utilities/TranslateKey'; +import { BaseSliderCommand } from '../../commands/BaseSliderCommand'; const DEFAULT_POINT_SIZE = 2; const MIN_POINT_SIZE = 0.0; -const MAX_POINT_SIZE = 4; // Default seems be be 2, but the user probably wants lower values +const MAX_POINT_SIZE = 4; const STEP_POINT_SIZE = 0.1; export class SetPointSizeCommand extends BaseSliderCommand { diff --git a/react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts b/react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts index 2a1689c595c..8cbbbae3ce7 100644 --- a/react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts +++ b/react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts @@ -10,7 +10,8 @@ import { type IFlexibleCameraManager, CDF_TO_VIEWER_TRANSFORMATION, CognitePointCloudModel, - CogniteCadModel + CogniteCadModel, + type Image360Collection } from '@cognite/reveal'; import { Vector3, @@ -169,6 +170,12 @@ export class RevealRenderTarget { } } + public *get360ImageCollections(): Generator { + for (const collection of this.viewer.get360ImageCollections()) { + yield collection; + } + } + // ================================================== // INSTANCE METHODS: Convert back and from Viewer coordinates // ================================================== diff --git a/react-components/src/architecture/concrete/annotations/commands/AnnotationsSetCreateTypeCommand.ts b/react-components/src/architecture/concrete/annotations/commands/AnnotationsSetCreateTypeCommand.ts index a7e06718a6e..fe25ff0a84e 100644 --- a/react-components/src/architecture/concrete/annotations/commands/AnnotationsSetCreateTypeCommand.ts +++ b/react-components/src/architecture/concrete/annotations/commands/AnnotationsSetCreateTypeCommand.ts @@ -33,9 +33,9 @@ export class AnnotationsSetCreateTypeCommand extends RenderTargetCommand { case PrimitiveType.Box: return 'Cube'; case PrimitiveType.HorizontalCylinder: - return 'SplitViewHorizontal'; + return 'CylinderHorizontal'; case PrimitiveType.VerticalCylinder: - return 'SplitView'; + return 'CylinderVertical'; default: throw new Error('Unknown PrimitiveType'); } diff --git a/react-components/src/architecture/concrete/measurements/getIconByPrimitiveType.ts b/react-components/src/architecture/concrete/measurements/getIconByPrimitiveType.ts index d497c5b72e4..2d65bffff96 100644 --- a/react-components/src/architecture/concrete/measurements/getIconByPrimitiveType.ts +++ b/react-components/src/architecture/concrete/measurements/getIconByPrimitiveType.ts @@ -22,16 +22,20 @@ export function getIconByPrimitiveType(primitiveType: PrimitiveType): IconName { case PrimitiveType.PlaneXY: return 'Perspective'; case PrimitiveType.HorizontalArea: - return 'FrameTool'; // TODO: Change to 'PerspectiveAlt' when new version of Cogs + return 'PerspectiveAlt'; case PrimitiveType.VerticalArea: return 'Perspective'; case PrimitiveType.Box: return 'Cube'; case PrimitiveType.Cylinder: - return 'DataSource'; + return 'CylinderArbitrary'; + case PrimitiveType.VerticalCylinder: + return 'CylinderVertical'; + case PrimitiveType.HorizontalCylinder: + return 'CylinderHorizontal'; case PrimitiveType.None: return 'Edit'; default: - throw new Error('Unrecognized PrimitiveType ' + primitiveType); + throw new Error('Unrecognized PrimitiveType'); } } diff --git a/react-components/src/architecture/concrete/terrain/UpdateTerrainCommand.ts b/react-components/src/architecture/concrete/terrain/UpdateTerrainCommand.ts index cd32e838ef0..e6859c10ed4 100644 --- a/react-components/src/architecture/concrete/terrain/UpdateTerrainCommand.ts +++ b/react-components/src/architecture/concrete/terrain/UpdateTerrainCommand.ts @@ -17,7 +17,7 @@ export class UpdateTerrainCommand extends RenderTargetCommand { // ================================================== public override get icon(): IconName { - return 'Refresh'; + return 'Sync'; } public override get tooltip(): TranslateKey { diff --git a/react-components/src/architecture/index.ts b/react-components/src/architecture/index.ts index e41562fcd04..93dc486da5e 100644 --- a/react-components/src/architecture/index.ts +++ b/react-components/src/architecture/index.ts @@ -23,10 +23,10 @@ export { DeleteDomainObjectCommand } from './base/concreteCommands/DeleteDomainO export { FitViewCommand } from './base/concreteCommands/FitViewCommand'; export { KeyboardSpeedCommand } from './base/concreteCommands/KeyboardSpeedCommand'; export { NavigationTool } from './base/concreteCommands/NavigationTool'; -export { PointCloudFilterCommand } from './base/concreteCommands/PointCloudFilterCommand'; -export { SetPointColorTypeCommand } from './base/concreteCommands/SetPointColorTypeCommand'; -export { SetPointShapeCommand } from './base/concreteCommands/SetPointShapeCommand'; -export { SetPointSizeCommand } from './base/concreteCommands/SetPointSizeCommand'; +export { PointCloudFilterCommand } from './base/concreteCommands/pointCloud/PointCloudFilterCommand'; +export { SetPointColorTypeCommand } from './base/concreteCommands/pointCloud/SetPointColorTypeCommand'; +export { SetPointShapeCommand } from './base/concreteCommands/pointCloud/SetPointShapeCommand'; +export { SetPointSizeCommand } from './base/concreteCommands/pointCloud/SetPointSizeCommand'; export { SetQualityCommand } from './base/concreteCommands/SetQualityCommand'; export { SettingsCommand } from './base/concreteCommands/SettingsCommand'; export { ToggleMetricUnitsCommand } from './base/concreteCommands/ToggleMetricUnitsCommand'; diff --git a/react-components/src/components/Architecture/CommandButtons.tsx b/react-components/src/components/Architecture/CommandButtons.tsx index 1d909b3bde0..cd5a3bfe1d9 100644 --- a/react-components/src/components/Architecture/CommandButtons.tsx +++ b/react-components/src/components/Architecture/CommandButtons.tsx @@ -13,6 +13,8 @@ import { BaseSettingsCommand } from '../../architecture/base/commands/BaseSettin import { BaseFilterCommand } from '../../architecture/base/commands/BaseFilterCommand'; import { FilterButton } from './FilterButton'; import { SegmentedButtons } from './SegmentedButtons'; +import { DividerCommand } from '../../architecture/base/commands/DividerCommand'; +import { SectionCommand } from '../../architecture/base/commands/SectionCommand'; export function createButton(command: BaseCommand, isHorizontal = false): ReactElement { if (command instanceof BaseFilterCommand) { @@ -78,7 +80,11 @@ function CommandButtonWrapper({ command: BaseCommand | undefined; isHorizontal: boolean; }): ReactElement { - if (command === undefined) { + if ( + command instanceof DividerCommand || + command instanceof SectionCommand || + command === undefined + ) { const direction = !isHorizontal ? 'horizontal' : 'vertical'; return ; } diff --git a/react-components/src/components/Architecture/IconComponentMapper.tsx b/react-components/src/components/Architecture/IconComponentMapper.tsx index 1d121f19286..9c15c5dda58 100644 --- a/react-components/src/components/Architecture/IconComponentMapper.tsx +++ b/react-components/src/components/Architecture/IconComponentMapper.tsx @@ -7,6 +7,8 @@ import { ArrowLeftIcon, ArrowRightIcon, Axis3DIcon, + BorderHorizontalIcon, + BorderVerticalIcon, BugIcon, CircleIcon, ClearAllIcon, @@ -17,6 +19,10 @@ import { CubeFrontRightIcon, CubeIcon, CubeTopIcon, + CursorIcon, + CylinderArbitraryIcon, + CylinderHorizontalIcon, + CylinderVerticalIcon, DeleteIcon, ExpandAlternativeIcon, EyeShowIcon, @@ -24,10 +30,10 @@ import { FlagIcon, FlipHorizontalIcon, FlipVerticalIcon, - FrameToolIcon, GrabIcon, type IconProps, LocationIcon, + PerspectiveAltIcon, PerspectiveIcon, PlaneIcon, PlusIcon, @@ -39,8 +45,10 @@ import { RulerIcon, SaveIcon, SettingsIcon, + ShapesIcon, SnowIcon, SunIcon, + SyncIcon, VectorLineIcon, VectorZigzagIcon, View360Icon @@ -56,6 +64,8 @@ const defaultMappings: Array<[IconName, IconType]> = [ ['ArrowRight', ArrowRightIcon], ['Axis3D', Axis3DIcon], ['Bug', BugIcon], + ['BorderHorizontal', BorderHorizontalIcon], + ['BorderVertical', BorderVerticalIcon], ['Circle', CircleIcon], ['ClearAll', ClearAllIcon], ['Coordinates', CoordinatesIcon], @@ -65,6 +75,10 @@ const defaultMappings: Array<[IconName, IconType]> = [ ['CubeFrontLeft', CubeFrontLeftIcon], ['CubeFrontRight', CubeFrontRightIcon], ['CubeTop', CubeTopIcon], + ['Cursor', CursorIcon], + ['CylinderHorizontal', CylinderHorizontalIcon], + ['CylinderVertical', CylinderVerticalIcon], + ['CylinderArbitrary', CylinderArbitraryIcon], ['Delete', DeleteIcon], ['ExpandAlternative', ExpandAlternativeIcon], ['EyeShow', EyeShowIcon], @@ -72,10 +86,10 @@ const defaultMappings: Array<[IconName, IconType]> = [ ['Flag', FlagIcon], ['FlipHorizontal', FlipHorizontalIcon], ['FlipVertical', FlipVerticalIcon], - ['FrameTool', FrameToolIcon], ['Grab', GrabIcon], ['Location', LocationIcon], ['Perspective', PerspectiveIcon], + ['PerspectiveAlt', PerspectiveAltIcon], ['Plane', PlaneIcon], ['Plus', PlusIcon], ['PointCloud', PointCloudIcon], @@ -85,9 +99,11 @@ const defaultMappings: Array<[IconName, IconType]> = [ ['Ruler', RulerIcon], ['RulerAlternative', RulerAlternativeIcon], ['Save', SaveIcon], + ['Shapes', ShapesIcon], ['Settings', SettingsIcon], ['Snow', SnowIcon], ['Sun', SunIcon], + ['Sync', SyncIcon], ['VectorLine', VectorLineIcon], ['VectorZigzag', VectorZigzagIcon], ['View360', View360Icon] diff --git a/react-components/src/components/Architecture/RevealButtons.tsx b/react-components/src/components/Architecture/RevealButtons.tsx index 5ae28b19307..8c3bdcc54f3 100644 --- a/react-components/src/components/Architecture/RevealButtons.tsx +++ b/react-components/src/components/Architecture/RevealButtons.tsx @@ -23,8 +23,8 @@ import { AnnotationsCreateTool } from '../../architecture/concrete/annotations/c import { AnnotationsSelectTool } from '../../architecture/concrete/annotations/commands/AnnotationsSelectTool'; export class RevealButtons { - static Settings = (): ReactElement => - createButtonFromCommandConstructor(() => new SettingsCommand()); + static Settings = ({ include360Images = true }: { include360Images?: boolean }): ReactElement => + createButtonFromCommandConstructor(() => new SettingsCommand(include360Images)); static PointCloudFilter = (): ReactElement => createButtonFromCommandConstructor(() => new PointCloudFilterCommand()); diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx index 45d9d143d52..a35c1c44ffa 100644 --- a/react-components/src/components/Architecture/SettingsButton.tsx +++ b/react-components/src/components/Architecture/SettingsButton.tsx @@ -32,6 +32,7 @@ import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants'; import { offset } from '@floating-ui/dom'; import { DividerCommand } from '../../architecture/base/commands/DividerCommand'; +import { SectionCommand } from '../../architecture/base/commands/SectionCommand'; export const SettingsButton = ({ inputCommand, @@ -131,6 +132,9 @@ function createMenuItem(command: BaseCommand, t: TranslateDelegate): ReactElemen if (command instanceof DividerCommand) { return createDivider(command); } + if (command instanceof SectionCommand) { + return createSection(command, t); + } return createButton(command, t); } @@ -141,6 +145,14 @@ function createDivider(command: BaseCommand): ReactElement | undefined { return ; } +function createSection(command: BaseCommand, t: TranslateDelegate): ReactElement | undefined { + if (!command.isVisible) { + return <>; + } + const label = command.getLabel(t); + return ; +} + function createToggle(command: BaseCommand, t: TranslateDelegate): ReactElement { const [isChecked, setChecked] = useState(command.isChecked); if (!command.isVisible) { @@ -191,9 +203,10 @@ function createSlider(command: BaseSliderCommand, t: TranslateDelegate): ReactEl if (!command.isVisible) { return <>; } + const label = command.getLabel(t) + ': ' + command.getValueLabel(); return ( - + =18" react-dom: ">=18" styled-components: ">=5" languageName: unknown linkType: soft -"@cognite/reveal@npm:^4.18.0": - version: 4.18.0 - resolution: "@cognite/reveal@npm:4.18.0" +"@cognite/reveal@npm:^4.19.0": + version: 4.19.0 + resolution: "@cognite/reveal@npm:4.19.0" dependencies: "@rajesh896/broprint.js": "npm:^2.1.1" "@tweenjs/tween.js": "npm:^25.0.0" @@ -693,7 +693,7 @@ __metadata: peerDependencies: "@cognite/sdk": ^7.16.0 || ^8.0.0 three: 0.166.1 - checksum: 10/444f0df4097042506ee1dfb6b98274d68a5432227443ec115d094ca73adcbfce20a0ee9a57f8961575e186cab6feb4ea8d5f951befc59b8cf99e8f9d560a7430 + checksum: 10/0e02879b7ba6b55fa13ec22f8693543a59e6c958c3cf2d0d4cbc624dda5fe333c1ee12c3b634f694de608c9462b33a3ba940459591ac696297bee7dafbc3e8cd languageName: node linkType: hard From b7343de6968a1efc1d335d8c4fd74dc2a8476e7f Mon Sep 17 00:00:00 2001 From: Nils Petter Fremming <35219649+nilscognite@users.noreply.github.com> Date: Tue, 22 Oct 2024 13:14:32 +0200 Subject: [PATCH 2/2] Update package.json (#4817) --- react-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-components/package.json b/react-components/package.json index 112203f9547..d8c1188703b 100644 --- a/react-components/package.json +++ b/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",