feat(react-components): Measurement button component in toolbar (#3567)

* Added measurement button component to toolbar

* Update react-components/src/components/RevealToolbar/MeasurementButton.tsx

Co-authored-by: Christopher J. Tannum <christopher.tannum@cognite.com>

* replace numbers with constants & added measurement cleanup when component unmounts

---------

Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>
Co-authored-by: Christopher J. Tannum <christopher.tannum@cognite.com>

react-components/src/components/RevealToolbar/MeasurementButton.tsx

@@ -0,0 +1,73 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useMemo, type ReactElement, useState, useEffect } from 'react';
+import { useReveal } from '../RevealContainer/RevealContext';
+import { Button } from '@cognite/cogs.js';
+import { MeasurementTool } from '@cognite/reveal/tools';
+import { FEET_TO_INCHES, METERS_TO_FEET } from '../../utilities/constants';
+
+const distancesInFeetAndMeters = (distanceInMeters: number): string => {
+  const distanceInFeet = distanceInMeters * METERS_TO_FEET;
+  const distanceInFeetInt = Math.floor(distanceInFeet);
+  const distanceInches = Math.round(FEET_TO_INCHES * (distanceInFeet - distanceInFeetInt));
+  return `${distanceInMeters.toFixed(2)} m\n ${distanceInFeetInt}' ${distanceInches}''`;
+};
+
+export const MeasurementButton = (): ReactElement => {
+  const viewer = useReveal();
+  const [measurementEnabled, setMeasurementEnabled] = useState<boolean>(false);
+
+  const measurementTool = useMemo(() => {
+    return new MeasurementTool(viewer, {
+      distanceToLabelCallback: (distanceInMeters: number) => {
+        return distancesInFeetAndMeters(distanceInMeters);
+      }
+    });
+  }, [viewer]);
+
+  const enterMeasurement = (): void => {
+    viewer.domElement.style.cursor = 'crosshair';
+    measurementTool.enterMeasurementMode();
+    measurementTool.visible(true);
+  };
+
+  const exitMeasurement = (): void => {
+    viewer.domElement.style.cursor = 'default';
+    measurementTool.visible(false);
+    measurementTool.exitMeasurementMode();
+  };
+
+  const handleMeasurement = (enable: boolean): void => {
+    if (viewer.models.length <= 0) {
+      return;
+    }
+    setMeasurementEnabled((prevState) => !prevState);
+    if (enable) {
+      enterMeasurement();
+    } else {
+      exitMeasurement();
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (measurementEnabled) {
+        exitMeasurement();
+      }
+    };
+  }, []);
+
+  return (
+    <Button
+      type="ghost"
+      icon="Ruler"
+      toggled={measurementEnabled}
+      aria-label="Make measurements"
+      onClick={() => {
+        handleMeasurement(!measurementEnabled);
+      }}
+    />
+  );
+};

react-components/src/components/RevealToolbar/RevealToolbar.tsx

@@ -8,6 +8,7 @@ import { FitModelsButton } from './FitModelsButton';
 import { LayersButton } from './LayersButton';
 import { SlicerButton } from './SlicerButton';
 import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents';
+import { MeasurementButton } from './MeasurementButton';
 import { HelpButton } from './HelpButton';
 
 const defaultStyle: ToolBarProps = {
@@ -28,7 +29,7 @@ const defaultContent = (
     <div className="cogs-toolbar-divider" />
 
     <SlicerButton />
-    <Button type="ghost" icon="Ruler" aria-label="Make measurements" />
+    <MeasurementButton />
 
     <div className="cogs-toolbar-divider" />
 
@@ -52,10 +53,12 @@ export const RevealToolbar = withSuppressRevealEvents(
   FitModelsButton: typeof FitModelsButton;
   SlicerButton: typeof SlicerButton;
   LayersButton: typeof LayersButton;
+  MeasurementButton: typeof MeasurementButton;
   HelpButton: typeof HelpButton;
 };
 
 RevealToolbar.FitModelsButton = FitModelsButton;
 RevealToolbar.SlicerButton = SlicerButton;
 RevealToolbar.LayersButton = LayersButton;
+RevealToolbar.MeasurementButton = MeasurementButton;
 RevealToolbar.HelpButton = HelpButton;

react-components/src/utilities/constants.ts

@@ -2,3 +2,5 @@
  * Copyright 2023 Cognite AS
  */
 export const DEFAULT_QUERY_STALE_TIME = 1000 * 60 * 10; // 10 minutes
+export const METERS_TO_FEET = 3.28084;
+export const FEET_TO_INCHES = 12;