(feat) Adding unit to measurments + fixing picking on the measurment …

…views + Renaming (#4563)

* Generalize more on Commands

* Update MeasureBoxDomainObject.ts

* Update CommandButton.tsx

* Update and fix react stuff

* Make implement line intersection

* Add comment

* Add a simple unit system

* The final touch. Clean up some command issues and made it simpler

* Smaller adjustments

react-components/package.json

@@ -29,7 +29,7 @@
     "sort-keys": "cdf-i18n-utils-cli sort-local-keys --namespace reveal-react-components --path ./src/common/i18n"
   },
   "peerDependencies": {
-    "@cognite/cogs.js": ">=9",
+    "@cognite/cogs.js": ">=9.84.3",
     "@cognite/reveal": "4.14.5",
     "react": ">=18",
     "react-dom": ">=18",
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
-    "@cognite/cogs.js": "^9.3.0",
+    "@cognite/cogs.js": "^9.84.3",
     "@cognite/reveal": "^4.14.5",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",

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

@@ -2,31 +2,43 @@
  * Copyright 2024 Cognite AS
  */
 
+import { type TranslateKey } from '../utilities/TranslateKey';
 import { clear, remove } from '../utilities/extensions/arrayExtensions';
 
 type UpdateDelegate = (command: BaseCommand) => void;
 
-export type Tooltip = {
-  key: string;
-  fallback?: string;
-};
-
 /**
  * Base class for all command and tools. Thses are object that can do a
  * user interaction with the system. It also have enough information to
  * generate the UI for the command.
  */
+
 export abstract class BaseCommand {
+  private static _counter: number = 0; // Counter for the unique index
+
   // ==================================================
   // INSTANCE FIELDS
   // ==================================================
 
   private readonly _listeners: UpdateDelegate[] = [];
 
+  // Unique index for the command, used by in React to force rerender
+  // when the command changes for a button.
+  public readonly _uniqueIndex: number;
+
+  public get uniqueIndex(): number {
+    return this._uniqueIndex;
+  }
+
   // ==================================================
   // VIRTUAL METHODS (To be override)
   // =================================================
 
+  constructor() {
+    BaseCommand._counter++;
+    this._uniqueIndex = BaseCommand._counter;
+  }
+
   public get name(): string {
     return this.tooltip.fallback ?? this.tooltip.key;
   }
@@ -35,7 +47,7 @@ export abstract class BaseCommand {
     return undefined;
   }
 
-  public get tooltip(): Tooltip {
+  public get tooltip(): TranslateKey {
     return { key: '' };
   }
 
@@ -51,11 +63,18 @@ export abstract class BaseCommand {
     return this.isEnabled;
   }
 
-  public get isCheckable(): boolean {
+  public get isChecked(): boolean {
     return false;
   }
 
-  public get isChecked(): boolean {
+  /**
+   * Gets a value indicating whether the command has data, for instance a reference
+   * to a specific domain object. Then the command cannot be reused or shared in the user interface.
+   * These command will not be added to the commandsController for updating, so update will
+   * not be done automatically. Typically used when the command is created for a specific domain object
+   * in the DomainObjectPanel.
+   */
+  public get hasData(): boolean {
     return false;
   }
 

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

@@ -30,10 +30,6 @@ export abstract class BaseTool extends RenderTargetCommand {
   // OVERRIDES
   // =================================================
 
-  public override get isCheckable(): boolean {
-    return true;
-  }
-
   public override get isChecked(): boolean {
     return this.renderTarget.commandsController.activeTool === this;
   }

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

@@ -4,8 +4,8 @@
  */
 
 import { BaseTool } from './BaseTool';
-import { type Tooltip } from './BaseCommand';
 import { type IFlexibleCameraManager } from '@cognite/reveal';
+import { type TranslateKey } from '../utilities/TranslateKey';
 
 /**
  * Represents a tool navigation tool used for camera manipulation.
@@ -32,7 +32,7 @@ export class NavigationTool extends BaseTool {
     return 'Grab';
   }
 
-  public override get tooltip(): Tooltip {
+  public override get tooltip(): TranslateKey {
     return { key: 'NAVIGATION', fallback: 'Navigation' };
   }
 

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

@@ -0,0 +1,57 @@
+/*!
+ * Copyright 2024 Cognite AS
+ * BaseTool: Base class for the tool are used to interact with the render target.
+ */
+
+import { BaseCommand } from '../commands/BaseCommand';
+import { type TranslateKey } from '../utilities/TranslateKey';
+
+type GetStringDelegate = () => string;
+
+export class CopyToClipboardCommand extends BaseCommand {
+  private readonly _getString: GetStringDelegate;
+
+  // ==================================================
+  // CONSTRUCTOR
+  // ==================================================
+
+  public constructor(getString: GetStringDelegate) {
+    super();
+    this._getString = getString;
+  }
+
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { key: 'COPY_TO_CLIPBOARD', fallback: 'Copy to clipboard' };
+  }
+
+  public override get icon(): string {
+    return 'Copy';
+  }
+
+  public override get isEnabled(): boolean {
+    return this._getString !== undefined;
+  }
+
+  public override get hasData(): boolean {
+    return true;
+  }
+
+  protected override invokeCore(): boolean {
+    if (this._getString === undefined) {
+      return false;
+    }
+    navigator.clipboard
+      .writeText(this._getString())
+      .then((_result) => {
+        return true;
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+    return true;
+  }
+}

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

@@ -0,0 +1,42 @@
+/*!
+ * Copyright 2024 Cognite AS
+ * BaseTool: Base class for the tool are used to interact with the render target.
+ */
+
+import { BaseCommand } from '../commands/BaseCommand';
+import { type TranslateKey } from '../utilities/TranslateKey';
+import { type DomainObject } from '../domainObjects/DomainObject';
+
+export class DeleteDomainObjectCommand extends BaseCommand {
+  private readonly _domainObject: DomainObject | undefined = undefined;
+  public constructor(domainObject: DomainObject) {
+    super();
+    this._domainObject = domainObject;
+  }
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { key: 'DELETE', fallback: 'Delete' };
+  }
+
+  public override get icon(): string {
+    return 'Delete';
+  }
+
+  public override get isEnabled(): boolean {
+    return this._domainObject !== undefined && this._domainObject.canBeRemoved;
+  }
+
+  public override get hasData(): boolean {
+    return true;
+  }
+
+  protected override invokeCore(): boolean {
+    if (this._domainObject === undefined) {
+      return false;
+    }
+    return this._domainObject.removeInteractive();
+  }
+}

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

@@ -3,14 +3,14 @@
  */
 
 import { RenderTargetCommand } from '../commands/RenderTargetCommand';
-import { type Tooltip } from '../commands/BaseCommand';
+import { type TranslateKey } from '../utilities/TranslateKey';
 
 export class FitViewCommand extends RenderTargetCommand {
   public override get icon(): string {
     return 'ExpandAlternative';
   }
 
-  public override get tooltip(): Tooltip {
+  public override get tooltip(): TranslateKey {
     return { key: 'FIT_VIEW_TOOLTIP', fallback: 'Fit view' };
   }
 

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

@@ -5,7 +5,8 @@
 import { RenderTargetCommand } from '../commands/RenderTargetCommand';
 import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget';
 import { FlexibleControlsType } from '@cognite/reveal';
-import { type BaseCommand, type Tooltip } from '../commands/BaseCommand';
+import { type BaseCommand } from '../commands/BaseCommand';
+import { type TranslateKey } from '../utilities/TranslateKey';
 
 export class SetFlexibleControlsTypeCommand extends RenderTargetCommand {
   private readonly _controlsType: FlexibleControlsType;
@@ -49,7 +50,7 @@ export class SetFlexibleControlsTypeCommand extends RenderTargetCommand {
     }
   }
 
-  public override get tooltip(): Tooltip {
+  public override get tooltip(): TranslateKey {
     switch (this._controlsType) {
       case FlexibleControlsType.FirstPerson:
         return { key: 'CONTROLS_TYPE_FIRST_PERSON', fallback: 'Fly' };
@@ -62,10 +63,6 @@ export class SetFlexibleControlsTypeCommand extends RenderTargetCommand {
     }
   }
 
-  public override get isCheckable(): boolean {
-    return true;
-  }
-
   public override get isChecked(): boolean {
     const { renderTarget } = this;
     const { flexibleCameraManager } = renderTarget;

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

@@ -0,0 +1,35 @@
+/*!
+ * Copyright 2024 Cognite AS
+ * BaseTool: Base class for the tool are used to interact with the render target.
+ */
+
+import { RenderTargetCommand } from '../commands/RenderTargetCommand';
+import { Changes } from '../domainObjectsHelpers/Changes';
+import { type TranslateKey } from '../utilities/TranslateKey';
+
+export class ToogleMetricUnitsCommand extends RenderTargetCommand {
+  // ==================================================
+  // OVERRIDES of BaseCommand
+  // ==================================================
+
+  public override get icon(): string {
+    return 'RulerAlternative';
+  }
+
+  public override get tooltip(): TranslateKey {
+    return { key: 'TOGGLE_METRIC_UNITS', fallback: 'm/ft' }; // Note: m/ft do not need to be translated!
+  }
+
+  public override get isChecked(): boolean {
+    const { renderTarget } = this;
+    return renderTarget.rootDomainObject.unitSystem.isMetric;
+  }
+
+  protected override invokeCore(): boolean {
+    const { renderTarget } = this;
+    const unitSystem = renderTarget.rootDomainObject.unitSystem;
+    unitSystem.isMetric = !unitSystem.isMetric;
+    renderTarget.rootDomainObject.notifyRecursive(Changes.unit);
+    return true;
+  }
+}

react-components/src/architecture/base/domainObjects/DomainObject.ts

@@ -256,10 +256,13 @@ export abstract class DomainObject {
       )
     ) {
       if (this.root instanceof RootDomainObject) {
+        // Update all the command buttons (in the toolbars).
+        // This goes fast and will not slow the system down.
         CommandsUpdater.update(this.root.renderTarget);
       }
     }
     if (this.hasPanelInfo) {
+      // Update the DomainObjectPanel if any
       DomainObjectPanelUpdater.notify(this, change);
     }
   }
@@ -461,9 +464,16 @@ export abstract class DomainObject {
   }
 
   public get root(): DomainObject {
+    // Returns the root of the hierarcy, regardless what it is
     return this.parent === undefined ? this : this.parent.root;
   }
 
+  public get rootDomainObject(): RootDomainObject | undefined {
+    // Returns a RootDomainObject only if the root is a RootDomainObject, otherwise undefined
+    const root = this.root;
+    return root instanceof RootDomainObject ? root : undefined;
+  }
+
   public get hasParent(): boolean {
     return this._parent !== undefined;
   }
@@ -692,9 +702,9 @@ export abstract class DomainObject {
     return true;
   }
 
-  public removeInteractive(checkCanBeDeleted = true): void {
+  public removeInteractive(checkCanBeDeleted = true): boolean {
     if (checkCanBeDeleted && !this.canBeRemoved) {
-      return;
+      return false;
     }
     for (const child of this.children) {
       child.removeInteractive(false); // If parent can be removed, so the children also
@@ -703,6 +713,7 @@ export abstract class DomainObject {
     this.notify(Changes.deleted);
     this.remove();
     parent?.notify(Changes.childDeleted);
+    return true;
   }
 
   public sortChildrenByName(): void {

react-components/src/architecture/base/domainObjects/RootDomainObject.ts

@@ -3,10 +3,20 @@
  */
 
 import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget';
+import { UnitSystem } from '../renderTarget/UnitSystem';
 import { DomainObject } from './DomainObject';
 
 export class RootDomainObject extends DomainObject {
+  // ==================================================
+  // INSTANCE FIELDS
+  // ==================================================
+
   private readonly _renderTarget: RevealRenderTarget;
+  public readonly unitSystem = new UnitSystem();
+
+  // ==================================================
+  // INSTANCE PROPERTIES
+  // ==================================================
 
   public get renderTarget(): RevealRenderTarget {
     return this._renderTarget;

react-components/src/architecture/base/domainObjectsHelpers/Changes.ts

@@ -16,6 +16,7 @@ export class Changes {
   public static readonly icon: symbol = Symbol('icon');
   public static readonly colorMap: symbol = Symbol('colorMap');
   public static readonly renderStyle: symbol = Symbol('renderStyle');
+  public static readonly unit: symbol = Symbol('unit');
 
   // Something in the geometry changed
   public static readonly geometry: symbol = Symbol('geometry');