From 0b9a6ae791f38239538cd786549edff62626df07 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Fri, 16 Feb 2024 10:28:13 +0000
Subject: [PATCH] [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
---
 .../frontend-2/components/viewer/Controls.vue     |  5 +++++
 .../lib/viewer/composables/setup/postSetup.ts     | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/viewer/Controls.vue b/packages/frontend-2/components/viewer/Controls.vue
index 597d877fc8..aa0136da7d 100644
--- a/packages/frontend-2/components/viewer/Controls.vue
+++ b/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>
diff --git a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts b/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
index 09eed9cc1a..53be5dd489 100644
--- a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
+++ b/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() {