fix(react-components): Just make a base class for SettingsCommand and add ALT shortcut in the architecture

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

@@ -62,6 +62,10 @@ export abstract class BaseCommand {
     return false;
   }
 
+  public get shortCutKeyOnAlt(): boolean {
+    return false;
+  }
+
   public get shortCutKeyOnShift(): boolean {
     return false;
   }
@@ -179,6 +183,9 @@ export abstract class BaseCommand {
     if (this.shortCutKeyOnCtrl) {
       keys.push('Ctrl');
     }
+    if (this.shortCutKeyOnAlt) {
+      keys.push('Alt');
+    }
     if (this.shortCutKeyOnShift) {
       keys.push('Shift');
     }

react-components/src/architecture/base/commands/SettingsCommand.ts → 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<BaseCommand> {
     if (this._children === undefined) {
       return;
@@ -53,4 +45,8 @@ export class SettingsCommand extends RenderTargetCommand {
     }
     this._children.push(command);
   }
+
+  public clear(): void {
+    clear(this._children);
+  }
 }

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

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';
+  }
+}

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<BaseCommand | undefined> {
-    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,

react-components/src/architecture/index.ts

@@ -2,8 +2,8 @@
  * Copyright 2023 Cognite AS
  */
 // New architecture: commands
-export { BaseCommand } from './base/commands/BaseCommand';
 export type { CommandUpdateDelegate } from './base/commands/BaseCommand';
+export { BaseCommand } from './base/commands/BaseCommand';
 export { BaseFilterCommand } from './base/commands/BaseFilterCommand';
 export { BaseOptionCommand } from './base/commands/BaseOptionCommand';
 export { BaseSliderCommand } from './base/commands/BaseSliderCommand';
@@ -12,7 +12,7 @@ export { DomainObjectCommand } from './base/commands/DomainObjectCommand';
 export { InstanceCommand } from './base/commands/InstanceCommand';
 export { RenderTargetCommand } from './base/commands/RenderTargetCommand';
 export { BaseEditTool } from './base/commands/BaseEditTool';
-export { SettingsCommand } from './base/commands/SettingsCommand';
+export { BaseSettingsCommand } from './base/commands/BaseSettingsCommand';
 export { ShowAllDomainObjectsCommand } from './base/commands/ShowAllDomainObjectsCommand';
 export { ShowDomainObjectsOnTopCommand } from './base/commands/ShowDomainObjectsOnTopCommand';
 
@@ -27,6 +27,7 @@ export { SetPointColorTypeCommand } from './base/concreteCommands/SetPointColorT
 export { SetPointShapeCommand } from './base/concreteCommands/SetPointShapeCommand';
 export { SetPointSizeCommand } from './base/concreteCommands/SetPointSizeCommand';
 export { SetQualityCommand } from './base/concreteCommands/SetQualityCommand';
+export { SettingsCommand } from './base/concreteCommands/SettingsCommand';
 export { ToggleMetricUnitsCommand } from './base/concreteCommands/ToggleMetricUnitsCommand';
 export { UndoCommand } from './base/concreteCommands/UndoCommand';
 

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

@@ -9,15 +9,15 @@ 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';
 
 export function createButton(command: BaseCommand, isHorizontal = false): ReactElement {
   if (command instanceof BaseFilterCommand) {
     return <FilterButton inputCommand={command} isHorizontal={isHorizontal} />;
   }
-  if (command instanceof SettingsCommand) {
+  if (command instanceof BaseSettingsCommand) {
     return <SettingsButton inputCommand={command} isHorizontal={isHorizontal} />;
   }
   if (command instanceof BaseOptionCommand) {

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;
-}

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<SettingsCommand>(
-    () => getDefaultCommand<SettingsCommand>(inputCommand, renderTarget),
+  const command = useMemo<BaseSettingsCommand>(
+    () => getDefaultCommand<BaseSettingsCommand>(inputCommand, renderTarget),
     []
   );