React -> Class

Author: asmith26

packages/base/src/3dview/mainview.tsx

@@ -1409,7 +1409,7 @@ export class MainView extends React.Component<IProps, IStates> {
         const box = new THREE.Box3().setFromObject(mesh);
         combinedBox.union(box);
       }
-      const measurement = new Measurement({ box: combinedBox });
+      const measurement = new Measurement(combinedBox);
       this._measurementGroup = measurement.group;
       this._scene.add(this._measurementGroup);
     }

packages/base/src/3dview/measurement.tsx renamed to packages/base/src/3dview/measurement.ts

@@ -1,58 +1,28 @@
 /**
- * This file defines a React component for rendering measurements of a 3D object.
+ * This file defines a class for rendering measurements of a 3D object.
  * It uses `three.js` to create dimension lines and labels for a given bounding box.
  */
-import * as React from 'react';
 import * as THREE from 'three';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
 /**
- * Props for the Measurement component.
- */
-interface IMeasurementProps {
-  /**
-   * The bounding box to measure.
-   */
-  box: THREE.Box3;
-}
-
-/**
- * A React component that displays the dimensions of a THREE.Box3.
+ * A class that displays the dimensions of a THREE.Box3.
  * It creates visual annotations (lines and labels) for the X, Y, and Z dimensions.
  */
-export class Measurement extends React.Component<IMeasurementProps> {
+export class Measurement {
   private _group: THREE.Group;
+  private _box: THREE.Box3;
 
   /**
-   * Constructor for the Measurement component.
-   * @param props The component props.
+   * Constructor for the Measurement class.
+   * @param box The bounding box to measure.
    */
-  constructor(props: IMeasurementProps) {
-    super(props);
+  constructor(box: THREE.Box3) {
+    this._box = box;
     this._group = new THREE.Group();
     this.createAnnotations();
   }
 
-  /**
-   * Called when the component updates.
-   * If the bounding box has changed, it clears the old annotations and creates new ones.
-   * @param prevProps The previous component props.
-   */
-  componentDidUpdate(prevProps: IMeasurementProps) {
-    if (this.props.box !== prevProps.box) {
-      this.clearAnnotations();
-      this.createAnnotations();
-    }
-  }
-
-  /**
-   * Called when the component is about to be unmounted.
-   * It clears any existing annotations.
-   */
-  componentWillUnmount() {
-    this.clearAnnotations();
-  }
-
   /**
    * Removes all annotations from the scene.
    */
@@ -64,16 +34,15 @@ export class Measurement extends React.Component<IMeasurementProps> {
    * Creates the dimension lines and labels for the bounding box.
    */
   createAnnotations() {
-    const { box } = this.props;
-    if (!box) {
+    if (!this._box) {
       return;
     }
 
     const size = new THREE.Vector3();
-    box.getSize(size);
+    this._box.getSize(size);
 
-    const min = box.min;
-    const max = box.max;
+    const min = this._box.min;
+    const max = this._box.max;
 
     // Create dimension lines for X, Y, and Z axes
     this.createDimensionLine(
@@ -143,14 +112,6 @@ export class Measurement extends React.Component<IMeasurementProps> {
     this._group.add(label);
   }
 
-  /**
-   * This component does not render any DOM elements itself.
-   * The measurements are rendered in the 3D scene.
-   */
-  render(): null {
-    return null;
-  }
-
   /**
    * Getter for the THREE.Group containing the measurement annotations.
    * This group can be added to a THREE.Scene to be rendered.