[WBX-33] Add Keystrokes to Measure Mode (#2033)

* Add onKeyStroke Escape to Controls

* Add onKeyStroke Delete/Backspace on active measurement

* Updates

* Update

* Move keystrokes

* Turn off measurements on esc

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

@@ -244,6 +244,7 @@ import type { AutomationRun } from '~~/lib/common/generated/gql/graphql'
 import { useIsSmallerOrEqualThanBreakpoint } from '~~/composables/browser'
 import { useEmbed } from '~/lib/viewer/composables/setup/embed'
 import { useViewerTour } from '~/lib/viewer/composables/tour'
+import { onKeyStroke } from '@vueuse/core'
 
 const { resourceItems, modelsAndVersionIds } = useInjectedViewerLoadedResources()
 
@@ -441,4 +442,8 @@ onMounted(() => {
 watch(isSmallerOrEqualSm, (newVal) => {
   activeControl.value = newVal ? 'none' : 'models'
 })
+
+onKeyStroke('Escape', () => {
+  activeControl.value = 'none'
+})
 </script>

packages/frontend-2/lib/viewer/composables/setup/postSetup.ts

@@ -45,7 +45,7 @@ import { Vector3 } from 'three'
 import { areVectorsLooselyEqual } from '~~/lib/viewer/helpers/three'
 import type { Nullable } from '@speckle/shared'
 import { useCameraUtilities } from '~~/lib/viewer/composables/ui'
-import { watchTriggerable } from '@vueuse/core'
+import { onKeyStroke, watchTriggerable } from '@vueuse/core'
 import { setupDebugMode } from '~~/lib/viewer/composables/setup/dev'
 import { CameraController } from '@speckle/viewer'
 import type { Reference } from '@apollo/client'
@@ -725,7 +725,8 @@ function useViewerMeasurementIntegration() {
     viewer: { instance }
   } = useInjectedViewerState()
 
-  const { clearMeasurements } = useMeasurementUtilities()
+  const { clearMeasurements, removeMeasurement, enableMeasurements } =
+    useMeasurementUtilities()
 
   onBeforeUnmount(() => {
     clearMeasurements()
@@ -750,6 +751,16 @@ function useViewerMeasurementIntegration() {
     },
     { immediate: true, deep: true }
   )
+
+  onKeyStroke('Delete', () => {
+    removeMeasurement()
+  })
+  onKeyStroke('Backspace', () => {
+    removeMeasurement()
+  })
+  onKeyStroke('Escape', () => {
+    enableMeasurements(false)
+  })
 }
 
 function useDisableZoomOnEmbed() {