Merge refs/heads/master into christjt/BND3D-5419

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

@@ -21,6 +21,7 @@ import { ThreeView } from '../views/ThreeView';
 import { UndoManager } from '../undo/UndoManager';
 import { CommandChanges } from '../domainObjectsHelpers/CommandChanges';
 import { ContextMenuUpdater } from '../reactUpdaters/ContextMenuUpdater';
+import { getToolbar, type Toolbar } from './factory/ToolbarFactory';
 
 /**
  * Base class for interactions in the 3D viewer
@@ -62,10 +63,6 @@ export abstract class BaseTool extends RenderTargetCommand {
     return undefined;
   }
 
-  public getToolbar(): Array<BaseCommand | undefined> {
-    return []; // Override this to add extra buttons to a separate toolbar
-  }
-
   public getToolbarStyle(): PopupStyle {
     // Override this to place the toolbar
     // Default lower left corner
@@ -216,6 +213,10 @@ export abstract class BaseTool extends RenderTargetCommand {
   // INSTANCE METHODS: Getters
   // ==================================================
 
+  public getToolbar(): Toolbar | undefined {
+    return getToolbar(this);
+  }
+
   protected getRaycaster(event: PointerEvent | WheelEvent): Raycaster {
     const { renderTarget } = this;
     const normalizedCoords = this.getNormalizedPixelCoordinates(event);

react-components/src/architecture/base/commands/factory/ToolbarFactory.test.ts

@@ -0,0 +1,42 @@
+/*!
+ * Copyright 2025 Cognite AS
+ */
+
+import { describe, expect, test, beforeAll } from 'vitest';
+import { hasToolbar, getToolbar, installToolbar } from './ToolbarFactory';
+import { BaseTool } from '../BaseTool';
+import { BaseCommand } from '../BaseCommand';
+
+describe('ToolbarFactory', () => {
+  beforeAll(() => {
+    installToolbar(FooTool, [new FooCommand(), new FooCommand()]);
+  });
+
+  test('should test has a toolbar', () => {
+    const tool = new FooTool();
+    expect(hasToolbar(tool)).toBe(true);
+  });
+
+  test('should test has not a toolbar', () => {
+    const tool = new BarTool();
+    expect(hasToolbar(tool)).toBe(false);
+  });
+
+  test('should test get toolbar', () => {
+    const tool = new FooTool();
+    const toolBar = getToolbar(tool);
+    expect(toolBar).not.toBe(undefined);
+    if (toolBar !== undefined) {
+      expect(toolBar.length).toEqual(2);
+    }
+  });
+
+  test('should test can not get toolbar', () => {
+    const tool = new BarTool();
+    expect(getToolbar(tool)).toBe(undefined);
+  });
+});
+
+class FooTool extends BaseTool {}
+class BarTool extends BaseTool {}
+class FooCommand extends BaseCommand {}

react-components/src/architecture/base/commands/factory/ToolbarFactory.ts

@@ -0,0 +1,47 @@
+/*!
+ * Copyright 2025 Cognite AS
+ */
+
+import { type Class } from '../../domainObjectsHelpers/Class';
+import { type BaseCommand } from '../BaseCommand';
+import { type BaseTool } from '../BaseTool';
+
+export type Toolbar = Array<BaseCommand | undefined>;
+
+/**
+ * Determines if a toolbar can be created for the given tool.
+ *
+ * @param tool - The tool to check.
+ * @returns `true` if a toolbar can be created, otherwise `false`.
+ */
+export function hasToolbar(tool: BaseTool): boolean {
+  const toolType = getClassOf(tool);
+  return _toolbar.has(toolType);
+}
+
+/**
+ * Creates a toolbar for the given tool.
+ *
+ * @param tool - The tool which the toolbar is to be created.
+ * @returns A toolbar if creation is successful, otherwise undefined.
+ */
+export function getToolbar(tool: BaseTool): Toolbar | undefined {
+  const toolType = getClassOf(tool);
+  return _toolbar.get(toolType);
+}
+
+/**
+ * Installs a toolbar creator for a given tool.
+ *
+ * @param toolType - The class of the tool for which the toolbar creator is being installed.
+ * @param creator - The toolbar creator to be installed.
+ */
+export function installToolbar(toolType: Class<BaseTool>, toolbar: Toolbar): void {
+  _toolbar.set(toolType, toolbar);
+}
+
+const _toolbar = new Map<Class<BaseTool>, Toolbar>();
+
+function getClassOf(tool: BaseTool): Class<BaseTool> {
+  return tool.constructor as Class<BaseTool>;
+}

react-components/src/architecture/base/views/ThreeViewFactory.ts

@@ -6,7 +6,7 @@ import { type DomainObject } from '../domainObjects/DomainObject';
 import { type Class } from '../domainObjectsHelpers/Class';
 import { type ThreeView } from './ThreeView';
 
-export type ThreeViewCreator = () => ThreeView;
+type ThreeViewCreator = () => ThreeView;
 
 /**
  * Determines if a Three.js view can be created for the given domain object.
@@ -15,7 +15,7 @@ export type ThreeViewCreator = () => ThreeView;
  * @returns `true` if a Three.js view can be created, otherwise `false`.
  */
 export function canCreateThreeView(domainObject: DomainObject): boolean {
-  let domainObjectType: Class<DomainObject> | undefined = getDomainObjectClassOf(domainObject);
+  let domainObjectType: Class<DomainObject> | undefined = getClassOf(domainObject);
   while (domainObjectType !== undefined) {
     if (_products.has(domainObjectType)) {
       return true;
@@ -32,7 +32,7 @@ export function canCreateThreeView(domainObject: DomainObject): boolean {
  * @returns A ThreeView instance if creation is successful, otherwise undefined.
  */
 export function createThreeView(domainObject: DomainObject): ThreeView | undefined {
-  let domainObjectType: Class<DomainObject> | undefined = getDomainObjectClassOf(domainObject);
+  let domainObjectType: Class<DomainObject> | undefined = getClassOf(domainObject);
   while (domainObjectType !== undefined) {
     const product = _products.get(domainObjectType);
     if (product !== undefined) {
@@ -71,7 +71,7 @@ export function installThreeViewCreator(
 
 const _products = new Map<Class<DomainObject>, ThreeViewCreator>();
 
-function getDomainObjectClassOf(domainObject: DomainObject): Class<DomainObject> {
+function getClassOf(domainObject: DomainObject): Class<DomainObject> {
   return domainObject.constructor as Class<DomainObject>;
 }
 

react-components/src/architecture/concrete/annotations/commands/AnnotationsCreateTool.ts

@@ -4,11 +4,8 @@
 
 import { type TranslationInput } from '../../../base/utilities/TranslateInput';
 import { AnnotationsDomainObject } from '../AnnotationsDomainObject';
-import { UndoCommand } from '../../../base/concreteCommands/UndoCommand';
-import { type BaseCommand } from '../../../base/commands/BaseCommand';
 import { PrimitiveType } from '../../../base/utilities/primitives/PrimitiveType';
 import { CommandsUpdater } from '../../../base/reactUpdaters/CommandsUpdater';
-import { AnnotationsSetCreateTypeCommand } from './AnnotationsSetCreateTypeCommand';
 import { type BaseCreator } from '../../../base/domainObjectsHelpers/BaseCreator';
 import { BoxCreator } from '../../primitives/box/BoxCreator';
 import { BoxGizmoDomainObject } from '../BoxGizmoDomainObject';
@@ -169,17 +166,6 @@ export class AnnotationsCreateTool extends NavigationTool {
     this.renderTarget.cursor = 'move';
   }
 
-  public override getToolbar(): Array<BaseCommand | undefined> {
-    return [
-      new AnnotationsSelectTool(),
-      new AnnotationsSetCreateTypeCommand(PrimitiveType.Box),
-      new AnnotationsSetCreateTypeCommand(PrimitiveType.HorizontalCylinder),
-      new AnnotationsSetCreateTypeCommand(PrimitiveType.VerticalCylinder),
-      undefined,
-      new UndoCommand()
-    ];
-  }
-
   // ==================================================
   // OVERRIDES of BaseEditTool
   // ==================================================

react-components/src/architecture/concrete/annotations/commands/AnnotationsSelectTool.ts

@@ -10,14 +10,8 @@ import { BaseEditTool } from '../../../base/commands/BaseEditTool';
 import { isDomainObjectIntersection } from '../../../base/domainObjectsHelpers/DomainObjectIntersection';
 import { FocusType } from '../../../base/domainObjectsHelpers/FocusType';
 import { type DomainObject } from '../../../base/domainObjects/DomainObject';
-import { UndoCommand } from '../../../base/concreteCommands/UndoCommand';
-import { type BaseCommand } from '../../../base/commands/BaseCommand';
-import { AnnotationsCreateMockCommand } from './AnnotationsCreateMockCommand';
 import { type BaseDragger } from '../../../base/domainObjectsHelpers/BaseDragger';
 import { type PrimitivePickInfo } from '../../primitives/common/PrimitivePickInfo';
-import { AnnotationsDeleteCommand } from './AnnotationsDeleteCommand';
-import { AlignSelectedAnnotationCommand } from './AnnotationsAlignCommand';
-import { AnnotationsCreateTool } from './AnnotationsCreateTool';
 import { type AnnotationIntersectInfo } from '../helpers/getClosestAnnotation';
 import { SolidDomainObject } from '../../primitives/common/SolidDomainObject';
 import { isAnnotationsOrGizmo, isGizmo } from './isGizmo';
@@ -127,18 +121,6 @@ export class AnnotationsSelectTool extends BaseEditTool {
     await super.onClick(event);
   }
 
-  public override getToolbar(): Array<BaseCommand | undefined> {
-    return [
-      new AnnotationsCreateTool(),
-      new AnnotationsDeleteCommand(),
-      new AlignSelectedAnnotationCommand(true),
-      new AlignSelectedAnnotationCommand(false),
-      new AnnotationsCreateMockCommand(),
-      undefined,
-      new UndoCommand()
-    ];
-  }
-
   protected override async createDragger(event: PointerEvent): Promise<BaseDragger | undefined> {
     const intersection = await this.getIntersection(event, isGizmo);
     if (intersection === undefined) {

react-components/src/architecture/concrete/clipping/ClipTool.ts

@@ -2,22 +2,15 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type BaseCommand } from '../../base/commands/BaseCommand';
 import { type BaseCreator } from '../../base/domainObjectsHelpers/BaseCreator';
 import { type TranslationInput } from '../../base/utilities/TranslateInput';
 import { PrimitiveEditTool } from '../primitives/tools/PrimitiveEditTool';
 import { PrimitiveType } from '../../base/utilities/primitives/PrimitiveType';
 import { BoxCreator } from '../primitives/box/BoxCreator';
 import { CropBoxDomainObject } from './CropBoxDomainObject';
-import { ApplyClipCommand } from './commands/ApplyClipCommand';
-import { ShowClippingOnTopCommand } from './commands/ShowClippingOnTopCommand';
-import { ShowAllClippingCommand } from './commands/ShowAllClippingCommand';
 import { type VisualDomainObject } from '../../base/domainObjects/VisualDomainObject';
-import { SetClipTypeCommand } from './commands/SetClipTypeCommand';
 import { PlaneCreator } from '../primitives/plane/PlaneCreator';
 import { SliceDomainObject } from './SliceDomainObject';
-import { UndoCommand } from '../../base/concreteCommands/UndoCommand';
-import { NextOrPrevClippingCommand } from './commands/NextClippingCommand';
 import { type IconName } from '../../base/utilities/IconName';
 import { ClipFolder } from './ClipFolder';
 import { type DomainObject } from '../../base/domainObjects/DomainObject';
@@ -43,23 +36,6 @@ export class ClipTool extends PrimitiveEditTool {
     return { key: 'CLIP_TOOL' };
   }
 
-  public override getToolbar(): Array<BaseCommand | undefined> {
-    return [
-      new SetClipTypeCommand(PrimitiveType.PlaneX),
-      new SetClipTypeCommand(PrimitiveType.PlaneY),
-      new SetClipTypeCommand(PrimitiveType.PlaneZ),
-      new SetClipTypeCommand(PrimitiveType.PlaneXY),
-      new SetClipTypeCommand(PrimitiveType.Box),
-      undefined, // Separator
-      new UndoCommand(),
-      new ApplyClipCommand(),
-      new NextOrPrevClippingCommand(false),
-      new NextOrPrevClippingCommand(true),
-      new ShowAllClippingCommand(),
-      new ShowClippingOnTopCommand()
-    ];
-  }
-
   // ==================================================
   // OVERRIDES of BaseTool
   // ==================================================

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

@@ -73,9 +73,6 @@ export class StoryBookConfig extends BaseRevealConfig {
       new MockSettingsCommand(),
       new MockFilterCommand(),
       undefined,
-      new MockSettingsCommand(),
-      new MockFilterCommand(),
-      undefined,
       new AnnotationsSelectTool(),
       new AnnotationsCreateTool(),
       new AnnotationsShowCommand(),

react-components/src/architecture/concrete/example/ExampleTool.ts

@@ -3,19 +3,13 @@
  */
 
 import { ExampleDomainObject } from './ExampleDomainObject';
-import { type BaseCommand } from '../../base/commands/BaseCommand';
 import { BaseEditTool } from '../../base/commands/BaseEditTool';
 import { Changes } from '../../base/domainObjectsHelpers/Changes';
-import { ResetAllExamplesCommand } from './commands/ResetAllExamplesCommand';
-import { DeleteAllExamplesCommand } from './commands/DeleteAllExamplesCommand';
-import { ShowAllExamplesCommand } from './commands/ShowAllExamplesCommand';
 import { clamp } from 'lodash';
 import { type HSL } from 'three';
 import { type TranslationInput } from '../../base/utilities/TranslateInput';
-import { ShowExamplesOnTopCommand } from './commands/ShowExamplesOnTopCommand';
 import { DomainObjectChange } from '../../base/domainObjectsHelpers/DomainObjectChange';
 import { type VisualDomainObject } from '../../base/domainObjects/VisualDomainObject';
-import { UndoCommand } from '../../base/concreteCommands/UndoCommand';
 import { type IconName } from '../../base/utilities/IconName';
 
 export class ExampleTool extends BaseEditTool {
@@ -118,16 +112,6 @@ export class ExampleTool extends BaseEditTool {
     this.renderTarget.cursor = domainObject.getEditToolCursor(this.renderTarget);
   }
 
-  public override getToolbar(): Array<BaseCommand | undefined> {
-    return [
-      new UndoCommand(),
-      new ResetAllExamplesCommand(),
-      new ShowAllExamplesCommand(),
-      new DeleteAllExamplesCommand(),
-      new ShowExamplesOnTopCommand()
-    ];
-  }
-
   // ==================================================
   // OVERRIDES of BaseEditTool
   // ==================================================

react-components/src/architecture/concrete/measurements/MeasurementTool.ts

@@ -2,10 +2,7 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type BaseCommand } from '../../base/commands/BaseCommand';
 import { type BaseCreator } from '../../base/domainObjectsHelpers/BaseCreator';
-import { ShowMeasurementsOnTopCommand } from './commands/ShowMeasurementsOnTopCommand';
-import { SetMeasurementTypeCommand } from './commands/SetMeasurementTypeCommand';
 import { type TranslationInput } from '../../base/utilities/TranslateInput';
 import { PrimitiveEditTool } from '../primitives/tools/PrimitiveEditTool';
 import { MeasureLineDomainObject } from './MeasureLineDomainObject';
@@ -15,7 +12,6 @@ import { BoxCreator } from '../primitives/box/BoxCreator';
 import { LineCreator } from '../primitives/line/LineCreator';
 import { type VisualDomainObject } from '../../base/domainObjects/VisualDomainObject';
 import { CDF_TO_VIEWER_TRANSFORMATION } from '@cognite/reveal';
-import { UndoCommand } from '../../base/concreteCommands/UndoCommand';
 import { type IconName } from '../../base/utilities/IconName';
 import { Box3 } from 'three';
 import { type DomainObject } from '../../base/domainObjects/DomainObject';
@@ -34,20 +30,6 @@ export class MeasurementTool extends PrimitiveEditTool {
     return { key: 'MEASUREMENTS' };
   }
 
-  public override getToolbar(): Array<BaseCommand | undefined> {
-    return [
-      new SetMeasurementTypeCommand(PrimitiveType.Line),
-      new SetMeasurementTypeCommand(PrimitiveType.Polyline),
-      new SetMeasurementTypeCommand(PrimitiveType.Polygon),
-      new SetMeasurementTypeCommand(PrimitiveType.HorizontalArea),
-      new SetMeasurementTypeCommand(PrimitiveType.VerticalArea),
-      new SetMeasurementTypeCommand(PrimitiveType.Box),
-      undefined, // Separator
-      new UndoCommand(),
-      new ShowMeasurementsOnTopCommand()
-    ];
-  }
-
   // ==================================================
   // OVERRIDES of BaseTool
   // ==================================================

react-components/src/architecture/index.ts

@@ -3,6 +3,7 @@
  */
 
 import { installThreeViews } from './installThreeViews';
+import { installToolbars } from './installToolbars';
 
 // New architecture: commands
 export type { CommandUpdateDelegate } from './base/commands/BaseCommand';
@@ -122,3 +123,4 @@ export type { AssetIdentifier } from './concrete/annotation360/types';
 export type { AnnotationStatus } from './concrete/annotation360/types';
 
 installThreeViews();
+installToolbars();