chore(fe): upgrade to measurements extension

packages/frontend-2/components/viewer/measurements/Menu.vue

@@ -21,14 +21,14 @@
         />
       </span>
 
-      <span class="flex items-center pt-2">
+      <span class="flex items-center">
         <FormCheckbox
-          name="Chain Measurements"
+          name="Chain measurements"
           hide-label
           :model-value="measurementOptions.chain"
           @update:model-value="toggleMeasurementsChaining"
         />
-        <label class="text-body-2xs" for="chain">Chain Measurements</label>
+        <span class="text-body-2xs mt-3">Chain measurements</span>
       </span>
 
       <span class="flex items-center pt-1">
@@ -38,7 +38,7 @@
           :model-value="measurementOptions.vertexSnap"
           @update:model-value="toggleMeasurementsSnap"
         />
-        <label class="text-body-2xs" for="snap">Snap to vertices</label>
+        <span class="text-body-2xs mt-3">Snap to vertices</span>
       </span>
     </ViewerLayoutPanel>
     <ViewerLayoutPanel class="mt-1 p-1 pr-2">

packages/frontend-2/lib/viewer/composables/ui.ts

@@ -1,5 +1,5 @@
 import { SpeckleViewer } from '@speckle/shared'
-import type { TreeNode, ViewMode } from '@speckle/viewer'
+import { MeasurementsExtension, type TreeNode, type ViewMode } from '@speckle/viewer'
 import { until } from '@vueuse/shared'
 import { useActiveElement } from '@vueuse/core'
 import { isString } from 'lodash-es'
@@ -283,6 +283,8 @@ export function useThreadUtilities() {
 
 export function useMeasurementUtilities() {
   const state = useInjectedViewerState()
+  const measurementsExtension =
+    state.viewer.instance.getExtension(MeasurementsExtension)
 
   const measurementOptions = computed(() => state.ui.measurement.options.value)
   const hasMeasurements = computed(
@@ -298,9 +300,7 @@ export function useMeasurementUtilities() {
   }
 
   const removeActiveMeasurement = () => {
-    if (state.viewer.instance?.removeMeasurement) {
-      state.viewer.instance.removeMeasurement()
-    }
+    measurementsExtension.removeMeasurement()
   }
 
   const clearMeasurements = () => {