From 93bac8df03934186b8f9fd3b2bfc576a8637577f Mon Sep 17 00:00:00 2001 From: Nils Petter Fremming Date: Tue, 20 Aug 2024 16:05:39 +0200 Subject: [PATCH] Initial commit --- .../architecture/base/commands/BaseCommand.ts | 7 ++++ ...tingsCommand.ts => BaseSettingsCommand.ts} | 16 +++----- .../commands/mocks/MockSettingsCommand.ts | 6 +-- .../base/concreteCommands/SettingsCommand.ts | 39 +++++++++++++++++++ .../concrete/config/StoryBookConfig.ts | 16 +------- .../Architecture/CommandButtons.tsx | 4 +- .../components/Architecture/RevealButtons.tsx | 20 ++-------- .../Architecture/SettingsButton.tsx | 8 ++-- 8 files changed, 66 insertions(+), 50 deletions(-) rename react-components/src/architecture/base/commands/{SettingsCommand.ts => BaseSettingsCommand.ts} (79%) create mode 100644 react-components/src/architecture/base/concreteCommands/SettingsCommand.ts diff --git a/react-components/src/architecture/base/commands/BaseCommand.ts b/react-components/src/architecture/base/commands/BaseCommand.ts index 8b73bb262af..4b8aeda4e06 100644 --- a/react-components/src/architecture/base/commands/BaseCommand.ts +++ b/react-components/src/architecture/base/commands/BaseCommand.ts @@ -55,6 +55,10 @@ export abstract class BaseCommand { return false; } + public get shortCutKeyOnAlt(): boolean { + return false; + } + public get shortCutKeyOnShift(): boolean { return false; } @@ -172,6 +176,9 @@ export abstract class BaseCommand { if (this.shortCutKeyOnCtrl) { keys.push('Ctrl'); } + if (this.shortCutKeyOnAlt) { + keys.push('Alt'); + } if (this.shortCutKeyOnShift) { keys.push('Shift'); } diff --git a/react-components/src/architecture/base/commands/SettingsCommand.ts b/react-components/src/architecture/base/commands/BaseSettingsCommand.ts similarity index 79% rename from react-components/src/architecture/base/commands/SettingsCommand.ts rename to react-components/src/architecture/base/commands/BaseSettingsCommand.ts index 594b8b38f72..1a10cafcbf2 100644 --- a/react-components/src/architecture/base/commands/SettingsCommand.ts +++ b/react-components/src/architecture/base/commands/BaseSettingsCommand.ts @@ -2,11 +2,11 @@ * Copyright 2024 Cognite AS */ -import { type TranslateKey } from '../utilities/TranslateKey'; +import { clear } from '../utilities/extensions/arrayExtensions'; import { type BaseCommand } from './BaseCommand'; import { RenderTargetCommand } from './RenderTargetCommand'; -export class SettingsCommand extends RenderTargetCommand { +export abstract class BaseSettingsCommand extends RenderTargetCommand { // ================================================== // INSTANCE FIELDS/PROPERTIES // ================================================== @@ -25,14 +25,6 @@ export class SettingsCommand extends RenderTargetCommand { // OVERRIDES // ================================================== - public override get tooltip(): TranslateKey { - return { key: 'SETTINGS_TOOLTIP', fallback: 'Settings' }; - } - - public override get icon(): string | undefined { - return 'Settings'; - } - protected override *getChildren(): Generator { if (this._children === undefined) { return; @@ -53,4 +45,8 @@ export class SettingsCommand extends RenderTargetCommand { } this._children.push(command); } + + public clear(): void { + clear(this._children); + } } diff --git a/react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts b/react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts index aed7c42fdaa..185e31650c6 100644 --- a/react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts +++ b/react-components/src/architecture/base/commands/mocks/MockSettingsCommand.ts @@ -2,17 +2,17 @@ * Copyright 2024 Cognite AS */ +import { BaseSettingsCommand } from '../BaseSettingsCommand'; import { MockActionCommand } from './MockActionCommand'; import { MockToggleCommand } from './MockToggleCommand'; import { MockCheckableCommand } from './MockCheckableCommand'; import { MockEnumOptionCommand } from './MockEnumOptionCommand'; import { MockSliderCommand } from './MockSliderCommand'; -import { SettingsCommand } from '../SettingsCommand'; import { MockFilterCommand } from './MockFilterCommand'; -import { type TranslateKey } from '../../utilities/TranslateKey'; import { MockNumberOptionCommand } from './MockNumberOptionCommand'; +import { type TranslateKey } from '../../utilities/TranslateKey'; -export class MockSettingsCommand extends SettingsCommand { +export class MockSettingsCommand extends BaseSettingsCommand { // ================================================== // INSTANCE FIELDS // ================================================== diff --git a/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts b/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts new file mode 100644 index 00000000000..80977a70a97 --- /dev/null +++ b/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts @@ -0,0 +1,39 @@ +/*! + * 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'; + +export class SettingsCommand extends BaseSettingsCommand { + // ================================================== + // CONSTRUCTOR + // ================================================== + + public constructor() { + super(); + + this.add(new SetQualityCommand()); + this.add(new SetPointSizeCommand()); + this.add(new SetPointColorTypeCommand()); + this.add(new SetPointShapeCommand()); + this.add(new PointCloudFilterCommand()); + } + + // ================================================== + // OVERRIDES + // ================================================== + + public override get tooltip(): TranslateKey { + return { key: 'SETTINGS_TOOLTIP', fallback: 'Settings' }; + } + + public override get icon(): string | undefined { + return 'Settings'; + } +} diff --git a/react-components/src/architecture/concrete/config/StoryBookConfig.ts b/react-components/src/architecture/concrete/config/StoryBookConfig.ts index 5889ecd90fb..2e5a9cac38e 100644 --- a/react-components/src/architecture/concrete/config/StoryBookConfig.ts +++ b/react-components/src/architecture/concrete/config/StoryBookConfig.ts @@ -21,13 +21,8 @@ import { MeasurementTool } from '../measurements/MeasurementTool'; import { ClipTool } from '../clipping/ClipTool'; import { KeyboardSpeedCommand } from '../../base/concreteCommands/KeyboardSpeedCommand'; import { ObservationsTool } from '../observations/ObservationsTool'; -import { SettingsCommand } from '../../base/commands/SettingsCommand'; -import { SetQualityCommand } from '../../base/concreteCommands/SetQualityCommand'; -import { SetPointSizeCommand } from '../../base/concreteCommands/SetPointSizeCommand'; -import { SetPointColorTypeCommand } from '../../base/concreteCommands/SetPointColorTypeCommand'; -import { SetPointShapeCommand } from '../../base/concreteCommands/SetPointShapeCommand'; +import { SettingsCommand } from '../../base/concreteCommands/SettingsCommand'; import { MockSettingsCommand } from '../../base/commands/mocks/MockSettingsCommand'; -import { PointCloudFilterCommand } from '../../base/concreteCommands/PointCloudFilterCommand'; import { MockFilterCommand } from '../../base/commands/mocks/MockFilterCommand'; export class StoryBookConfig extends BaseRevealConfig { @@ -40,13 +35,6 @@ export class StoryBookConfig extends BaseRevealConfig { } public override createMainToolbar(): Array { - const settings = new SettingsCommand(); - settings.add(new SetQualityCommand()); - settings.add(new SetPointSizeCommand()); - settings.add(new SetPointColorTypeCommand()); - settings.add(new SetPointShapeCommand()); - settings.add(new PointCloudFilterCommand()); - return [ new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit), new SetFlexibleControlsTypeCommand(FlexibleControlsType.FirstPerson), @@ -55,7 +43,7 @@ export class StoryBookConfig extends BaseRevealConfig { new SetAxisVisibleCommand(), new ToggleMetricUnitsCommand(), new KeyboardSpeedCommand(), - settings, + new SettingsCommand(), new MockSettingsCommand(), new MockFilterCommand(), undefined, diff --git a/react-components/src/components/Architecture/CommandButtons.tsx b/react-components/src/components/Architecture/CommandButtons.tsx index b6a94678c5c..a813e4cd761 100644 --- a/react-components/src/components/Architecture/CommandButtons.tsx +++ b/react-components/src/components/Architecture/CommandButtons.tsx @@ -9,7 +9,7 @@ import { OptionButton } from './OptionButton'; import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand'; import { CommandButton } from './CommandButton'; import { SettingsButton } from './SettingsButton'; -import { SettingsCommand } from '../../architecture/base/commands/SettingsCommand'; +import { BaseSettingsCommand } from '../../architecture/base/commands/BaseSettingsCommand'; import { BaseFilterCommand } from '../../architecture/base/commands/BaseFilterCommand'; import { FilterButton } from './FilterButton'; @@ -17,7 +17,7 @@ export function createButton(command: BaseCommand, isHorizontal = false): ReactE if (command instanceof BaseFilterCommand) { return ; } - if (command instanceof SettingsCommand) { + if (command instanceof BaseSettingsCommand) { return ; } if (command instanceof BaseOptionCommand) { diff --git a/react-components/src/components/Architecture/RevealButtons.tsx b/react-components/src/components/Architecture/RevealButtons.tsx index 3bd16695867..8355b47be2a 100644 --- a/react-components/src/components/Architecture/RevealButtons.tsx +++ b/react-components/src/components/Architecture/RevealButtons.tsx @@ -13,15 +13,11 @@ import { MeasurementTool } from '../../architecture/concrete/measurements/Measur import { KeyboardSpeedCommand } from '../../architecture/base/concreteCommands/KeyboardSpeedCommand'; import { ObservationsTool } from '../../architecture/concrete/observations/ObservationsTool'; import { createButtonFromCommandConstructor } from './CommandButtons'; -import { SettingsCommand } from '../../architecture/base/commands/SettingsCommand'; -import { SetPointColorTypeCommand } from '../../architecture/base/concreteCommands/SetPointColorTypeCommand'; -import { SetPointShapeCommand } from '../../architecture/base/concreteCommands/SetPointShapeCommand'; -import { SetPointSizeCommand } from '../../architecture/base/concreteCommands/SetPointSizeCommand'; -import { SetQualityCommand } from '../../architecture/base/concreteCommands/SetQualityCommand'; -import { PointCloudFilterCommand } from '../../architecture/base/concreteCommands/PointCloudFilterCommand'; +import { SettingsCommand } from '../../architecture/base/concreteCommands/SettingsCommand'; export class RevealButtons { - static Settings = (): ReactElement => createButtonFromCommandConstructor(() => createSettings()); + static Settings = (): ReactElement => + createButtonFromCommandConstructor(() => new SettingsCommand()); static FitView = (): ReactElement => createButtonFromCommandConstructor(() => new FitViewCommand()); @@ -54,13 +50,3 @@ export class RevealButtons { static KeyboardSpeed = (): ReactElement => createButtonFromCommandConstructor(() => new KeyboardSpeedCommand()); } - -function createSettings(): SettingsCommand { - const settings = new SettingsCommand(); - settings.add(new SetQualityCommand()); - settings.add(new SetPointSizeCommand()); - settings.add(new SetPointColorTypeCommand()); - settings.add(new SetPointShapeCommand()); - settings.add(new PointCloudFilterCommand()); - return settings; -} diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx index 72ae1845e33..5b08ae0df96 100644 --- a/react-components/src/components/Architecture/SettingsButton.tsx +++ b/react-components/src/components/Architecture/SettingsButton.tsx @@ -24,7 +24,7 @@ import { import { LabelWithShortcut } from './LabelWithShortcut'; import { type TranslateDelegate } from '../../architecture/base/utilities/TranslateKey'; import styled from 'styled-components'; -import { type SettingsCommand } from '../../architecture/base/commands/SettingsCommand'; +import { type BaseSettingsCommand } from '../../architecture/base/commands/BaseSettingsCommand'; import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand'; import { OptionButton } from './OptionButton'; import { BaseSliderCommand } from '../../architecture/base/commands/BaseSliderCommand'; @@ -35,13 +35,13 @@ export const SettingsButton = ({ inputCommand, isHorizontal = false }: { - inputCommand: SettingsCommand; + inputCommand: BaseSettingsCommand; isHorizontal: boolean; }): ReactElement => { const renderTarget = useRenderTarget(); const { t } = useTranslation(); - const command = useMemo( - () => getDefaultCommand(inputCommand, renderTarget), + const command = useMemo( + () => getDefaultCommand(inputCommand, renderTarget), [] );