feat (react-components): Use primary button for cropping and do not show measurements completely outside the bounding box

react-components/src/architecture/concrete/clipping/commands/ApplyClipCommand.ts

@@ -26,6 +26,10 @@ export class ApplyClipCommand extends RenderTargetCommand {
     return 'Crop';
   }
 
+  public override get buttonType(): string {
+    return 'primary';
+  }
+
   public override get isEnabled(): boolean {
     if (this.getSelectedCropBoxDomainObject() !== undefined) {
       return true;

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

@@ -15,6 +15,7 @@ import { PrimitiveType } from '../primitives/PrimitiveType';
 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';
 
 export class MeasurementTool extends PrimitiveEditTool {
   // ==================================================
@@ -57,7 +58,28 @@ export class MeasurementTool extends PrimitiveEditTool {
 
   public override onActivate(): void {
     super.onActivate();
-    this.setAllVisible(true);
+
+    if (!this.renderTarget.isGlobalClippingActive) {
+      this.setAllVisible(true);
+      return;
+    }
+    const sceneBoundingBox = this.renderTarget.clippedSceneBoundingBox;
+    for (const domainObject of this.getSelectable()) {
+      if (domainObject instanceof MeasureBoxDomainObject) {
+        const boundingBox = domainObject.getBoundingBox();
+        boundingBox.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
+        if (!sceneBoundingBox.intersectsBox(boundingBox)) {
+          continue;
+        }
+      } else if (domainObject instanceof MeasureLineDomainObject) {
+        const boundingBox = domainObject.getBoundingBox();
+        boundingBox.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
+        if (!sceneBoundingBox.intersectsBox(boundingBox)) {
+          continue;
+        }
+      }
+      domainObject.setVisibleInteractive(true, this.renderTarget);
+    }
   }
 
   public override onDeactivate(): void {

react-components/src/architecture/concrete/primitives/line/LineDomainObject.ts

@@ -5,7 +5,7 @@
 import { type RenderStyle } from '../../../base/renderStyles/RenderStyle';
 import { type ThreeView } from '../../../base/views/ThreeView';
 import { LineView } from './LineView';
-import { Vector3 } from 'three';
+import { Box3, Vector3 } from 'three';
 import { PrimitiveType } from '../PrimitiveType';
 import { LineRenderStyle } from './LineRenderStyle';
 import {
@@ -197,6 +197,14 @@ export abstract class LineDomainObject extends VisualDomainObject {
     return Math.abs(sum) / 2;
   }
 
+  public getBoundingBox(): Box3 {
+    const boundingBox = new Box3().makeEmpty();
+    for (const point of this.points) {
+      boundingBox.expandByPoint(point);
+    }
+    return boundingBox;
+  }
+
   public setFocusInteractive(focusType: FocusType): boolean {
     if (this.focusType === focusType) {
       return false;

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

@@ -69,7 +69,7 @@ export const CommandButton = ({
   const { key, fallback } = newCommand.tooltip;
   // This was the only way it went through compiler: (more button types will be added in the future)
   const type = newCommand.buttonType;
-  if (type !== 'ghost' && type !== 'ghost-destructive') {
+  if (type !== 'ghost' && type !== 'ghost-destructive' && type !== 'primary') {
     return <></>;
   }
   const text = key === undefined ? fallback : t(key, fallback);