Measurements Units Fixes (#3741)

* Handles new measurements reverting to meters even if a different unit was previously set. Handles units not changing properly when changing the unit value

* Remove transition to fix select

* Remove unsused import

* Added back snow

---------

Co-authored-by: Mike Tasset <mike.tasset@gmail.com>

packages/frontend-2/components/viewer/Controls.vue

@@ -183,10 +183,8 @@
     </div>
     <div
       ref="scrollableControlsContainer"
-      :class="`simple-scrollbar absolute z-10 pl-12 pr-2 md:pr-0 md:pl-14 mb-4 max-h-[calc(100dvh-4.5rem)] overflow-y-auto px-[2px] py-[2px] transition ${
-        activePanel !== 'none'
-          ? 'translate-x-0 opacity-100'
-          : '-translate-x-[100%] opacity-0'
+      :class="`simple-scrollbar absolute z-10 pl-12 pr-2 md:pr-0 md:pl-14 mb-4 max-h-[calc(100dvh-4.5rem)] overflow-y-auto px-[2px] py-[2px] ${
+        activePanel !== 'none' ? 'opacity-100' : 'opacity-0'
       } ${isEmbedEnabled ? 'mt-1.5' : 'mt-[3.7rem]'}`"
       :style="`width: ${isMobile ? '100%' : `${width + 4}px`};`"
     >

packages/viewer/src/modules/extensions/measurements/Measurement.ts

@@ -61,7 +61,7 @@ export abstract class Measurement extends Object3D {
     this.renderingSize.copy(size)
   }
 
-  public abstract update(): void
+  public abstract update(): Promise<void>
   public abstract raycast(_raycaster: Raycaster, _intersects: Array<Intersection>): void
   public abstract highlight(_value: boolean): void
   public abstract updateClippingPlanes(_planes: Plane[]): void

packages/viewer/src/modules/extensions/measurements/MeasurementPointGizmo.ts

@@ -27,6 +27,7 @@ import { SpeckleText } from '../../objects/SpeckleText.js'
 import SpeckleTextMaterial from '../../materials/SpeckleTextMaterial.js'
 import SpeckleBasicMaterial from '../../materials/SpeckleBasicMaterial.js'
 import { ObjectLayers } from '../../../IViewer.js'
+import Logger from '../../utils/Logger.js'
 
 export interface MeasurementPointGizmoStyle {
   fixedSize?: number | boolean
@@ -325,8 +326,8 @@ export class MeasurementPointGizmo extends Group {
     position?: Vector3,
     quaternion?: Quaternion,
     scale?: Vector3
-  ) {
-    void this.text
+  ): Promise<void> {
+    return this.text
       .update({
         textValue: value,
         height: 1,
@@ -343,6 +344,9 @@ export class MeasurementPointGizmo extends Group {
         if (this.text.backgroundMesh) this.text.backgroundMesh.renderOrder = 3
         this.text.textMesh.renderOrder = 4
       })
+      .catch((reason) => {
+        Logger.log(`Could not update text: ${reason}`)
+      })
   }
 
   public updateStyle() {

packages/viewer/src/modules/extensions/measurements/MeasurementsExtension.ts

@@ -63,7 +63,7 @@ export class MeasurementsExtension extends Extension {
     this._enabled = value
     if (this._activeMeasurement) {
       this._activeMeasurement.isVisible = value
-      this._activeMeasurement.update()
+      void this._activeMeasurement.update()
       if (!value) this.cancelMeasurement()
     }
     this.viewer.requestRender()
@@ -180,9 +180,10 @@ export class MeasurementsExtension extends Extension {
       this._activeMeasurement.endPoint.copy(this.pointBuff)
       this._activeMeasurement.endNormal.copy(this.normalBuff)
     }
-    this._activeMeasurement.update()
+    void this._activeMeasurement.update().then(() => {
+      this.viewer.requestRender()
+    })
 
-    this.viewer.requestRender()
     this._frameLock = true
     this._sceneHit = true
     // console.log('Time -> ', performance.now() - start)
@@ -282,8 +283,9 @@ export class MeasurementsExtension extends Extension {
     this._activeMeasurement.endPoint.copy(perpResult[0].point)
     this._activeMeasurement.endNormal.copy(perpResult[0].face.normal)
     this._activeMeasurement.state = MeasurementState.DANGLING_END
-    this._activeMeasurement.update()
-    this.finishMeasurement()
+    void this._activeMeasurement.update().then(() => {
+      this.finishMeasurement()
+    })
   }
 
   protected startMeasurement(): Measurement {
@@ -295,12 +297,21 @@ export class MeasurementsExtension extends Extension {
     else throw new Error('Unsupported measurement type!')
 
     measurement.state = MeasurementState.DANGLING_START
+    measurement.units =
+      this._options.units !== undefined
+        ? this._options.units
+        : DefaultMeasurementsOptions.units
+    measurement.precision =
+      this._options.precision !== undefined
+        ? this._options.precision
+        : DefaultMeasurementsOptions.precision
     measurement.frameUpdate(
       this.renderer.renderingCamera,
       this.screenBuff0,
       this.renderer.sceneBox
     )
     this.renderer.scene.add(measurement)
+
     return measurement
   }
 
@@ -314,7 +325,7 @@ export class MeasurementsExtension extends Extension {
     if (!this._activeMeasurement) return
 
     this._activeMeasurement.state = MeasurementState.COMPLETE
-    this._activeMeasurement.update()
+    void this._activeMeasurement.update()
     if (this._activeMeasurement.value > 0) {
       this.measurements.push(this._activeMeasurement)
     } else {
@@ -421,6 +432,7 @@ export class MeasurementsExtension extends Extension {
 
   protected applyOptions() {
     const all = [this._activeMeasurement, ...this.measurements]
+    const updatePromises: Promise<void>[] = []
     all.forEach((value) => {
       if (value) {
         value.units =
@@ -431,7 +443,7 @@ export class MeasurementsExtension extends Extension {
           this._options.precision !== undefined
             ? this._options.precision
             : DefaultMeasurementsOptions.precision
-        value.update()
+        updatePromises.push(value.update())
       }
     })
     this.viewer
@@ -440,18 +452,19 @@ export class MeasurementsExtension extends Extension {
 
     if (this._options.visible) this.raycaster.layers.enable(ObjectLayers.MEASUREMENTS)
     else this.raycaster.layers.disable(ObjectLayers.MEASUREMENTS)
-
-    this.viewer.requestRender()
+    void Promise.all(updatePromises).then(() => {
+      this.viewer.requestRender()
+    })
   }
 
-  public fromMeasurementData(startPoint: Vector3, endPoint: Vector3) {
+  public async fromMeasurementData(startPoint: Vector3, endPoint: Vector3) {
     const measurement = new PointToPointMeasurement()
     measurement.startPoint.copy(startPoint)
     measurement.endPoint.copy(endPoint)
     measurement.state = MeasurementState.DANGLING_END
-    measurement.update()
+    await measurement.update()
     measurement.state = MeasurementState.COMPLETE
-    measurement.update()
+    await measurement.update()
     this.measurements.push(measurement)
   }
 }

packages/viewer/src/modules/extensions/measurements/PerpendicularMeasurement.ts

@@ -50,13 +50,15 @@ export class PerpendicularMeasurement extends Measurement {
      *  won't look correct while zooming
      */
     if (this._state === MeasurementState.DANGLING_START) {
-      this.update()
+      void this.update()
     }
   }
 
-  public update() {
-    if (isNaN(this.startPoint.length())) return
-    if (!this.renderingCamera) return
+  public update(): Promise<void> {
+    let ret = Promise.resolve()
+
+    if (isNaN(this.startPoint.length())) return ret
+    if (!this.renderingCamera) return ret
 
     this.startGizmo?.updateDisc(this.startPoint, this.startNormal)
     this.startGizmo?.updatePoint(this.startPoint)
@@ -180,23 +182,27 @@ export class PerpendicularMeasurement extends Measurement {
         )
 
       this.value = this.midPoint.distanceTo(this.startPoint)
-      this.startGizmo?.updateText(
-        `${(this.value * getConversionFactor('m', this.units)).toFixed(
-          this.precision
-        )} ${this.units}`,
-        textPos
-      )
+      if (this.startGizmo)
+        ret = this.startGizmo.updateText(
+          `${(this.value * getConversionFactor('m', this.units)).toFixed(
+            this.precision
+          )} ${this.units}`,
+          textPos
+        )
       this.endGizmo?.enable(true, true, true, true)
     }
     if (this._state === MeasurementState.COMPLETE) {
-      this.startGizmo?.updateText(
-        `${(this.value * getConversionFactor('m', this.units)).toFixed(
-          this.precision
-        )} ${this.units}`
-      )
+      if (this.startGizmo)
+        ret = this.startGizmo.updateText(
+          `${(this.value * getConversionFactor('m', this.units)).toFixed(
+            this.precision
+          )} ${this.units}`
+        )
       this.startGizmo?.enable(false, true, true, true)
       this.endGizmo?.enable(false, false, true, false)
     }
+
+    return ret
   }
 
   public raycast(raycaster: Raycaster, intersects: Array<Intersection>) {

packages/viewer/src/modules/extensions/measurements/PointToPointMeasurement.ts

@@ -30,7 +30,8 @@ export class PointToPointMeasurement extends Measurement {
     this.endGizmo?.frameUpdate(camera, bounds)
   }
 
-  public update() {
+  public update(): Promise<void> {
+    let ret: Promise<void> = Promise.resolve()
     this.startGizmo?.updateDisc(this.startPoint, this.startNormal)
     this.startGizmo?.updatePoint(this.startPoint)
     this.endGizmo?.updateDisc(this.endPoint, this.endNormal)
@@ -71,23 +72,26 @@ export class PointToPointMeasurement extends Measurement {
 
       this.startGizmo?.updateLine([this.startPoint, lineEndPoint])
       this.endGizmo?.updatePoint(lineEndPoint)
-      this.startGizmo?.updateText(
-        `${(this.value * getConversionFactor('m', this.units)).toFixed(
-          this.precision
-        )} ${this.units}`,
-        textPos
-      )
+      if (this.startGizmo)
+        ret = this.startGizmo.updateText(
+          `${(this.value * getConversionFactor('m', this.units)).toFixed(
+            this.precision
+          )} ${this.units}`,
+          textPos
+        )
       this.endGizmo?.enable(true, true, true, true)
     }
     if (this._state === MeasurementState.COMPLETE) {
       this.startGizmo?.enable(false, true, true, true)
       this.endGizmo?.enable(false, false, true, false)
-      this.startGizmo?.updateText(
-        `${(this.value * getConversionFactor('m', this.units)).toFixed(
-          this.precision
-        )} ${this.units}`
-      )
+      if (this.startGizmo)
+        ret = this.startGizmo.updateText(
+          `${(this.value * getConversionFactor('m', this.units)).toFixed(
+            this.precision
+          )} ${this.units}`
+        )
     }
+    return ret
   }
 
   public raycast(raycaster: Raycaster, intersects: Array<Intersection>) {