(feat) Make example code for training and some changes in the archite…

…cture (#4543)

* Initial commit

* Some movements

* Fix linter problems

* Make the axis a tiny better

* Comments only

* Some rafactoring

* Make it better

* Update MeasurementTool.ts

* Fix lint

* Make better axis tick labels, but still not perfect

* handleEscape better

* Changes in RevealRenderTarget

* Update RootDomainObject.ts

* Fix smal bug

* Moving code

* Fix typo

* Set new default value

* Fix typo

* Initial commit

* Update Architecture.stories.tsx

* Update yarn.lock

* Fix MeasureLineView so lines are visible from long distance

* Make a DefaultRevealConfig

* Add override keyword

* Remove some unneccesary code

* Update ExampleTool.ts

* Update react-components/stories/Architecture.stories.tsx

Co-authored-by: Håkon Flatval <70905152+haakonflatval-cognite@users.noreply.github.com>

---------

Co-authored-by: Håkon Flatval <70905152+haakonflatval-cognite@users.noreply.github.com>

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

@@ -55,8 +55,8 @@ export abstract class BaseTool extends RenderTargetCommand {
     return 'default';
   }
 
-  public getToolbar(): Array<BaseCommand | undefined> | undefined {
-    return undefined; // Override this to add extra buttons to a separate toolbar
+  public getToolbar(): Array<BaseCommand | undefined> {
+    return []; // Override this to add extra buttons to a separate toolbar
   }
 
   public getToolbarStyle(): PopupStyle {

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

@@ -17,6 +17,7 @@ import { BLACK_COLOR, WHITE_COLOR } from '../utilities/colors/colorExtensions';
 import { Views } from '../domainObjectsHelpers/Views';
 import { type PanelInfo } from '../domainObjectsHelpers/PanelInfo';
 import { PopupStyle } from '../domainObjectsHelpers/PopupStyle';
+import { RootDomainObject } from './RootDomainObject';
 
 /**
  * Represents an abstract base class for domain objects.
@@ -242,6 +243,22 @@ export abstract class DomainObject {
    */
   protected notifyCore(change: DomainObjectChange): void {
     this.views.notify(this, change);
+
+    // This is a little bit dirty, but will be refacored by using onIdle()
+    if (
+      change.isChanged(
+        Changes.visibleState,
+        Changes.active,
+        Changes.active,
+        Changes.selected,
+        Changes.childAdded,
+        Changes.childDeleted
+      )
+    ) {
+      if (this.root instanceof RootDomainObject) {
+        this.root.renderTarget.toolController.update();
+      }
+    }
   }
 
   // ==================================================
@@ -663,10 +680,12 @@ export abstract class DomainObject {
     return true;
   }
 
-  public removeInteractive(): void {
-    // You may call canBeDeleted() before calling this
+  public removeInteractive(checkCanBeDeleted = true): void {
+    if (checkCanBeDeleted && !this.canBeRemoved) {
+      return;
+    }
     for (const child of this.children) {
-      child.removeInteractive();
+      child.removeInteractive(false); // If parent can be removed, so the children also
     }
     const { parent } = this;
     this.notify(Changes.deleted);

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

@@ -23,6 +23,7 @@ export abstract class BaseDragger {
   // ==================================================
 
   protected constructor(props: CreateDraggerProps) {
+    // Note: that yje point and the ray comes in CDF coordinates
     this.point = props.point;
     this.ray = props.ray;
   }
@@ -38,7 +39,7 @@ export abstract class BaseDragger {
   }
 
   // This must be overriden
-  // Notte that the ray comes in CDF coordinates
+  // Note: that the ray comes in CDF coordinates
   public abstract onPointerDrag(_event: PointerEvent, ray: Ray): boolean;
 
   public onPointerUp(_event: PointerEvent): void {

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

@@ -4,6 +4,7 @@
  */
 
 type PopupProps = {
+  horizontal?: boolean;
   left?: number;
   right?: number;
   top?: number;
@@ -13,6 +14,7 @@ type PopupProps = {
 };
 
 export class PopupStyle {
+  private readonly _horizontal: boolean = true;
   private readonly _left?: number = undefined;
   private readonly _right?: number = undefined;
   private readonly _top?: number = undefined;
@@ -21,6 +23,9 @@ export class PopupStyle {
   private readonly _padding: number = 16; // margin inside the popup
 
   public constructor(props: PopupProps) {
+    if (props.horizontal !== undefined) {
+      this._horizontal = props.horizontal;
+    }
     this._left = props.left;
     this._right = props.right;
     this._top = props.top;
@@ -33,6 +38,14 @@ export class PopupStyle {
     }
   }
 
+  public get flexFlow(): string {
+    return this._horizontal ? 'row' : 'column';
+  }
+
+  public get isDividerHorizontal(): boolean {
+    return !this._horizontal;
+  }
+
   public get leftPx(): string {
     return PopupStyle.getStringWithPx(this._left);
   }

react-components/src/architecture/base/renderTarget/BaseRevealConfig.ts

@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type AxisGizmoTool } from '@cognite/reveal/tools';
+import { type BaseCommand } from '../commands/BaseCommand';
+import { PopupStyle } from '../domainObjectsHelpers/PopupStyle';
+import { NavigationTool } from '../commands/NavigationTool';
+import { type BaseTool } from '../commands/BaseTool';
+
+export abstract class BaseRevealConfig {
+  // ==================================================
+  // VIRTUAL METHODS: Override these to config the viewer
+  // ==================================================
+
+  public createMainToolbar(): Array<BaseCommand | undefined> {
+    return [];
+  }
+
+  public createMainToolbarStyle(): PopupStyle {
+    return new PopupStyle({ right: 0, top: 0, horizontal: false });
+  }
+
+  public createAxisGizmoTool(): AxisGizmoTool | undefined {
+    return undefined;
+  }
+
+  public createDefaultTool(): BaseTool {
+    return new NavigationTool();
+  }
+}

react-components/src/architecture/base/renderTarget/DefaultRevealConfig.ts

@@ -0,0 +1,7 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { BaseRevealConfig } from './BaseRevealConfig';
+
+export class DefaultRevealConfig extends BaseRevealConfig {}

react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts

@@ -9,7 +9,6 @@ import {
   type Cognite3DViewer,
   type IFlexibleCameraManager
 } from '@cognite/reveal';
-import { NavigationTool } from '../commands/NavigationTool';
 import {
   Vector3,
   AmbientLight,
@@ -26,7 +25,9 @@ import { getResizeCursor } from '../utilities/geometry/getResizeCursor';
 import { VisualDomainObject } from '../domainObjects/VisualDomainObject';
 import { ThreeView } from '../views/ThreeView';
 import { type DomainObject } from '../domainObjects/DomainObject';
-import { AxisGizmoTool } from '@cognite/reveal/tools';
+import { type AxisGizmoTool } from '@cognite/reveal/tools';
+import { type BaseRevealConfig } from './BaseRevealConfig';
+import { DefaultRevealConfig } from './DefaultRevealConfig';
 
 const DIRECTIONAL_LIGHT_NAME = 'DirectionalLight';
 
@@ -43,6 +44,7 @@ export class RevealRenderTarget {
   private _cropBoxBoundingBox: Box3 | undefined;
   private _cropBoxName: string | undefined = undefined;
   private _axisGizmoTool: AxisGizmoTool | undefined;
+  private _config: BaseRevealConfig | undefined = undefined;
 
   // ==================================================
   // CONTRUCTORS
@@ -63,10 +65,7 @@ export class RevealRenderTarget {
     this._viewer.on('cameraChange', this.cameraChangeHandler);
     this._viewer.on('beforeSceneRendered', this.beforeSceneRenderedHandler);
 
-    const navigationTool = new NavigationTool();
-    navigationTool.attach(this);
-    this.toolController.add(navigationTool);
-    this.toolController.setDefaultTool(navigationTool);
+    this.setConfig(new DefaultRevealConfig());
   }
 
   // ==================================================
@@ -77,6 +76,10 @@ export class RevealRenderTarget {
     return this._viewer;
   }
 
+  public get config(): BaseRevealConfig | undefined {
+    return this._config;
+  }
+
   public get rootDomainObject(): RootDomainObject {
     return this._rootDomainObject;
   }
@@ -129,9 +132,19 @@ export class RevealRenderTarget {
   // INSTANCE METHODS
   // ==================================================
 
-  public addAxisGizmo(): void {
-    this._axisGizmoTool = new AxisGizmoTool();
-    this._axisGizmoTool.connect(this._viewer);
+  public setConfig(config: BaseRevealConfig): void {
+    this._config = config;
+
+    const defaultTool = config.createDefaultTool();
+    defaultTool.attach(this);
+    this.toolController.add(defaultTool);
+    this.toolController.setDefaultTool(defaultTool);
+
+    const axisGizmoTool = config.createAxisGizmoTool();
+    if (axisGizmoTool !== undefined) {
+      axisGizmoTool.connect(this._viewer);
+      this._axisGizmoTool = axisGizmoTool;
+    }
   }
 
   public dispose(): void {

react-components/src/architecture/concrete/boxDomainObject/MeasureBoxDragger.ts

@@ -83,7 +83,7 @@ export class MeasureBoxDragger extends BaseDragger {
   // OVERRIDES
   // ==================================================
 
-  public get domainObject(): DomainObject {
+  public override get domainObject(): DomainObject {
     return this._domainObject;
   }
 

react-components/src/architecture/concrete/boxDomainObject/MeasureDomainObject.ts

@@ -47,7 +47,7 @@ export abstract class MeasureDomainObject extends VisualDomainObject {
   }
 
   public override getPanelInfoStyle(): PopupStyle {
-    // bottom = 66 because the measurement toolbar is below
+    // bottom = 66 because the toolbar is below
     return new PopupStyle({ bottom: 66, left: 0 });
   }
 

react-components/src/architecture/concrete/boxDomainObject/MeasureLineRenderStyle.ts

@@ -11,8 +11,8 @@ export class MeasureLineRenderStyle extends MeasureRenderStyle {
   // INSTANCE FIELDS
   // ==================================================
 
-  public lineWidth = 2;
-  public pipeRadius = 0.03;
+  public pipeRadius = 0.015;
+  public lineWidth = 1;
   public selectedLineWidth = 2;
 
   // ==================================================

react-components/src/architecture/concrete/boxDomainObject/MeasureLineView.ts

@@ -4,8 +4,12 @@
 
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 import {
+  BufferAttribute,
+  BufferGeometry,
   CylinderGeometry,
   FrontSide,
+  Line,
+  LineBasicMaterial,
   Mesh,
   MeshPhongMaterial,
   Quaternion,
@@ -73,7 +77,8 @@ export class MeasureLineView extends GroupThreeView {
   // ==================================================
 
   protected override addChildren(): void {
-    this.addChild(this.createCylinders());
+    this.addChild(this.createPipe());
+    this.addChild(this.createLines()); // Create a line so it can be seen from long distance
     this.addLabels();
   }
 
@@ -91,17 +96,17 @@ export class MeasureLineView extends GroupThreeView {
   // INSTANCE METHODS:
   // ==================================================
 
-  private createCylinders(): Mesh | undefined {
+  private createPipe(): Mesh | undefined {
     const { domainObject, style } = this;
+    const radius = style.pipeRadius;
+    if (radius <= 0) {
+      return;
+    }
     const { points } = domainObject;
     const { length } = points;
     if (length < 2) {
       return undefined;
     }
-    const radius = style.pipeRadius;
-    if (radius <= 0) {
-      return;
-    }
     const geometries: CylinderGeometry[] = [];
     const loopLength = domainObject.measureType === MeasureType.Polygon ? length + 1 : length;
 
@@ -138,17 +143,20 @@ export class MeasureLineView extends GroupThreeView {
     return new Mesh(mergeGeometries(geometries, false), material);
   }
 
-  private createLines(): Wireframe | undefined {
+  private createWireframe(): Wireframe | undefined {
     const { domainObject, style } = this;
+    const linewidth = domainObject.isSelected ? style.selectedLineWidth : style.lineWidth;
+    if (linewidth === 0) {
+      return undefined;
+    }
     const vertices = createVertices(domainObject);
     if (vertices === undefined) {
       return undefined;
     }
     const color = domainObject.getColorByColorType(style.colorType);
-    const linewidth = domainObject.isSelected ? style.selectedLineWidth : style.lineWidth;
     const geometry = new LineSegmentsGeometry().setPositions(vertices);
     const material = new LineMaterial({
-      linewidth: linewidth / 50,
+      linewidth,
       color,
       resolution: new Vector2(1000, 1000),
       worldUnits: true,
@@ -157,6 +165,30 @@ export class MeasureLineView extends GroupThreeView {
     return new Wireframe(geometry, material);
   }
 
+  private createLines(): Line | undefined {
+    const { domainObject, style } = this;
+    const vertices = createVertices(domainObject);
+    if (vertices === undefined) {
+      return undefined;
+    }
+    const color = domainObject.getColorByColorType(style.colorType);
+    const linewidth = domainObject.isSelected ? style.selectedLineWidth : style.lineWidth;
+    const geometry = createBufferGeometry(vertices);
+    const material = new LineBasicMaterial({
+      linewidth,
+      color,
+      depthTest: style.depthTest
+    });
+    return new Line(geometry, material);
+
+    function createBufferGeometry(vertices: number[]): BufferGeometry {
+      const verticesArray = new Float32Array(vertices);
+      const geometry = new BufferGeometry();
+      geometry.setAttribute('position', new BufferAttribute(verticesArray, 3));
+      return geometry;
+    }
+  }
+
   private addLabels(): void {
     const { domainObject, style } = this;
     const { points } = domainObject;