Merge master into hflatval/missing-exports

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.46.2",
+  "version": "0.47.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9",
-    "@cognite/reveal": "4.14.3",
+    "@cognite/reveal": "4.14.5",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.3.0",
-    "@cognite/reveal": "^4.14.3",
+    "@cognite/reveal": "^4.14.5",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",

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

@@ -6,8 +6,8 @@ import { NavigationTool } from './NavigationTool';
 import { type DomainObject } from '../domainObjects/DomainObject';
 import { isDomainObjectIntersection } from '../domainObjectsHelpers/DomainObjectIntersection';
 import { type BaseDragger } from '../domainObjectsHelpers/BaseDragger';
-import { type VisualDomainObject } from '../domainObjects/VisualDomainObject';
-import { CDF_TO_VIEWER_TRANSFORMATION } from '@cognite/reveal';
+import { VisualDomainObject } from '../domainObjects/VisualDomainObject';
+import { type AnyIntersection, CDF_TO_VIEWER_TRANSFORMATION } from '@cognite/reveal';
 
 /**
  * The `BaseEditTool` class is an abstract class that extends the `NavigationTool` class.
@@ -65,10 +65,25 @@ export abstract class BaseEditTool extends NavigationTool {
     }
   }
 
+  public override onDeactivate(): void {
+    super.onDeactivate();
+    this.deselectAll();
+  }
+
   // ==================================================
   // VIRTUAL METHODS
   // ==================================================
 
+  /**
+   * Determines whether the specified domain object can be selected or dragged by this edit tool.
+   *
+   * @param _domainObject - The domain object to be accepted.
+   * @returns `true` if the domain object can be accepted, `false` otherwise.
+   */
+  protected canBeSelected(_domainObject: DomainObject): boolean {
+    return false;
+  }
+
   /**
    * Override this function to create custom dragger
    * with other creation logic. Otherwise createDragger in
@@ -82,7 +97,7 @@ export abstract class BaseEditTool extends NavigationTool {
     if (!isDomainObjectIntersection(intersection)) {
       return undefined;
     }
-    const domainObject = intersection.domainObject as VisualDomainObject;
+    const domainObject = this.getIntersectedDomainObject(intersection);
     if (domainObject === undefined) {
       return undefined;
     }
@@ -98,13 +113,31 @@ export abstract class BaseEditTool extends NavigationTool {
   // INSTANCE METHODS
   // ==================================================
 
-  protected deselectAll(except?: DomainObject | undefined): void {
+  protected deselectAll(except?: VisualDomainObject | undefined): void {
     const { rootDomainObject } = this;
     for (const domainObject of rootDomainObject.getDescendants()) {
+      if (!this.canBeSelected(domainObject)) {
+        continue;
+      }
       if (except !== undefined && domainObject === except) {
         continue;
       }
       domainObject.setSelectedInteractive(false);
     }
   }
+
+  protected getIntersectedDomainObject(
+    intersection: AnyIntersection | undefined
+  ): VisualDomainObject | undefined {
+    if (!isDomainObjectIntersection(intersection)) {
+      return undefined;
+    }
+    if (!this.canBeSelected(intersection.domainObject)) {
+      return undefined;
+    } else if (intersection.domainObject instanceof VisualDomainObject) {
+      return intersection.domainObject;
+    } else {
+      return undefined;
+    }
+  }
 }

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

@@ -35,14 +35,14 @@ export abstract class BaseTool extends RenderTargetCommand {
   }
 
   public override get isChecked(): boolean {
-    return this.renderTarget.toolController.activeTool === this;
+    return this.renderTarget.commandsController.activeTool === this;
   }
 
   protected override invokeCore(): boolean {
     if (this.isChecked) {
-      this.renderTarget.toolController.activateDefaultTool();
+      this.renderTarget.commandsController.activateDefaultTool();
     } else {
-      this.renderTarget.toolController.setActiveTool(this);
+      this.renderTarget.commandsController.setActiveTool(this);
     }
     return true;
   }

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

@@ -5,6 +5,7 @@
 import { BaseCommand } from './BaseCommand';
 import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget';
 import { type RootDomainObject } from '../domainObjects/RootDomainObject';
+import { CommandsUpdater } from '../reactUpdaters/CommandsUpdater';
 
 /**
  * Represents a base class where the render target is known.
@@ -27,7 +28,7 @@ export abstract class RenderTargetCommand extends BaseCommand {
   public override invoke(): boolean {
     const success = this.invokeCore();
     if (success) {
-      this.renderTarget.toolController.update();
+      CommandsUpdater.update(this._renderTarget);
     }
     return success;
   }

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

@@ -18,6 +18,8 @@ import { Views } from '../domainObjectsHelpers/Views';
 import { type PanelInfo } from '../domainObjectsHelpers/PanelInfo';
 import { PopupStyle } from '../domainObjectsHelpers/PopupStyle';
 import { RootDomainObject } from './RootDomainObject';
+import { CommandsUpdater } from '../reactUpdaters/CommandsUpdater';
+import { DomainObjectPanelUpdater } from '../reactUpdaters/DomainObjectPanelUpdater';
 
 /**
  * Represents an abstract base class for domain objects.
@@ -226,7 +228,7 @@ export abstract class DomainObject {
     return true; // to be overridden
   }
 
-  public canBeChecked(_target: RevealRenderTarget): boolean {
+  public canBeSetVisibleNow(_target: RevealRenderTarget): boolean {
     return true; // to be overridden
   }
 
@@ -244,27 +246,32 @@ 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();
+        CommandsUpdater.update(this.root.renderTarget);
       }
     }
+    if (this.hasPanelInfo) {
+      DomainObjectPanelUpdater.notify(this, change);
+    }
   }
 
   // ==================================================
   // VIRTUAL METHODS: For updating the panel
   // ==================================================
 
+  public get hasPanelInfo(): boolean {
+    return false; // to be overridden
+  }
+
   public getPanelInfo(): PanelInfo | undefined {
     return undefined; // to be overridden
   }
@@ -341,7 +348,10 @@ export abstract class DomainObject {
       numCandidates++;
       if (childState === VisibleState.All) {
         numAll++;
-      } else if (childState === VisibleState.None || childState === VisibleState.CanNotBeChecked) {
+      } else if (
+        childState === VisibleState.None ||
+        childState === VisibleState.CanNotBeVisibleNow
+      ) {
         numNone++;
       }
       if (numNone < numCandidates && numCandidates < numAll) {
@@ -355,7 +365,9 @@ export abstract class DomainObject {
       return VisibleState.All;
     }
     if (numCandidates === numNone) {
-      return this.canBeChecked(renderTarget) ? VisibleState.None : VisibleState.CanNotBeChecked;
+      return this.canBeSetVisibleNow(renderTarget)
+        ? VisibleState.None
+        : VisibleState.CanNotBeVisibleNow;
     }
     return VisibleState.Some;
   }
@@ -369,7 +381,7 @@ export abstract class DomainObject {
     if (visibleState === VisibleState.Disabled) {
       return false;
     }
-    if (visibleState === VisibleState.None && !this.canBeChecked(renderTarget)) {
+    if (visibleState === VisibleState.None && !this.canBeSetVisibleNow(renderTarget)) {
       return false;
     }
     let hasChanged = false;
@@ -753,7 +765,7 @@ export abstract class DomainObject {
 
   // ==================================================
   // INSTANCE METHODS: Color type
-  // Used in the renderstyle to determin which of the color a doamin object should have.
+  // Used in the renderstyle to determin which of the color a domain object should have.
   // ==================================================
 
   public supportsColorType(colorType: ColorType, solid: boolean): boolean {

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

@@ -25,10 +25,10 @@ export abstract class VisualDomainObject extends DomainObject {
       return VisibleState.All;
     }
     if (this.canCreateThreeView()) {
-      if (this.canBeChecked(renderTarget)) {
+      if (this.canBeSetVisibleNow(renderTarget)) {
         return VisibleState.None;
       }
-      return VisibleState.CanNotBeChecked;
+      return VisibleState.CanNotBeVisibleNow;
     }
     return VisibleState.Disabled;
   }
@@ -38,7 +38,7 @@ export abstract class VisualDomainObject extends DomainObject {
     renderTarget: RevealRenderTarget,
     topLevel = true
   ): boolean {
-    if (visible && !this.canBeChecked(renderTarget)) {
+    if (visible && !this.canBeSetVisibleNow(renderTarget)) {
       return false;
     }
     if (!this.setVisible(visible, renderTarget)) {

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

@@ -3,27 +3,31 @@
  */
 
 import { Ray, type Vector3 } from 'three';
-import { type DomainObject } from '../domainObjects/DomainObject';
-import { type CreateDraggerProps } from '../domainObjects/VisualDomainObject';
+import {
+  type VisualDomainObject,
+  type CreateDraggerProps
+} from '../domainObjects/VisualDomainObject';
 
 /**
  * The `BaseDragger` class represents a utility for dragging and manipulating any object in 3D space.
  * It provides methods for onPointerDown, onPointerDrag, and onPointerUp based on user interactions.
  */
+
 export abstract class BaseDragger {
   // ==================================================
   // INSTANCE FIELDS
   // ==================================================
-
   protected readonly point: Vector3; // Intersection point at pointer down in CDF coordinates
   protected readonly ray: Ray = new Ray(); // Intersection point at pointer down in CDF coordinates
 
   // ==================================================
   // CONTRUCTOR
   // ==================================================
-
+  /**
+   * Represents a base dragger object.
+   * @param props - Contains the ray amd the clicked point in CDF coordinates
+   */
   protected constructor(props: CreateDraggerProps) {
-    // Note: that yje point and the ray comes in CDF coordinates
     this.point = props.point;
     this.ray = props.ray;
   }
@@ -32,17 +36,28 @@ export abstract class BaseDragger {
   // VIRTUAL METHODS
   // ==================================================
 
-  public abstract get domainObject(): DomainObject;
-
-  public onPointerDown(_event: PointerEvent): void {
-    // Empty, probably not needed
-  }
-
-  // This must be overriden
-  // Note: that the ray comes in CDF coordinates
-  public abstract onPointerDrag(_event: PointerEvent, ray: Ray): boolean;
-
-  public onPointerUp(_event: PointerEvent): void {
-    // Empty, probably not needed
-  }
+  /**
+   * Returns the domain object to be manipulated
+   */
+  public abstract get domainObject(): VisualDomainObject;
+
+  /**
+   * Called just after the dragger is created and the pointer is down.
+   * @param _event - The pointer event object.
+   */
+  public onPointerDown(_event: PointerEvent): void {}
+
+  /**
+   * Called every times the mouse moves during dragging
+   * @param event - The pointer event.
+   * @param ray - The current ray in CDF cooordinates
+   * @returns True if the dragger has changed the domain object, false otherwise.
+   */
+  public abstract onPointerDrag(event: PointerEvent, ray: Ray): boolean;
+
+  /**
+   * Called just before the dragger is deleted.
+   * @param _event - The pointer event.
+   */
+  public onPointerUp(_event: PointerEvent): void {}
 }

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

@@ -14,18 +14,15 @@ 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;
   private readonly _bottom?: number = undefined;
-  private readonly _margin: number = 16; // margin ouside the popup
-  private readonly _padding: number = 16; // margin inside the popup
+  private readonly _margin: number = 16; // margin outside the popup
+  private readonly _padding: number = 8; // margin inside the popup
+  private readonly _horizontal: boolean = true; // Used for toolbars only
 
   public constructor(props: PopupProps) {
-    if (props.horizontal !== undefined) {
-      this._horizontal = props.horizontal;
-    }
     this._left = props.left;
     this._right = props.right;
     this._top = props.top;
@@ -36,14 +33,9 @@ export class PopupStyle {
     if (props.padding !== undefined) {
       this._padding = props.padding;
     }
-  }
-
-  public get flexFlow(): string {
-    return this._horizontal ? 'row' : 'column';
-  }
-
-  public get isDividerHorizontal(): boolean {
-    return !this._horizontal;
+    if (props.horizontal !== undefined) {
+      this._horizontal = props.horizontal;
+    }
   }
 
   public get leftPx(): string {
@@ -73,4 +65,16 @@ export class PopupStyle {
   public static getStringWithPx(value?: number): string {
     return value === undefined ? 'undefined' : value.toString() + 'px';
   }
+
+  public get flexFlow(): string {
+    return this._horizontal ? 'row' : 'column';
+  }
+
+  public get isHorizontal(): boolean {
+    return this._horizontal;
+  }
+
+  public get isHorizontalDivider(): boolean {
+    return !this._horizontal;
+  }
 }