From f831c2d640c9c4d27f41b000adb8071edd2e9523 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:07:43 +0000
Subject: [PATCH] [WBX-110] Improvements to Measurement Mode (#2031)

* Added clearMeasurements functionality to the measurements extension

* Add tip & descriptions to measure mode

* Add clearMeasurements

* Clear measurements onMount

* onMount to onBeforeUnmount

* Small alignment fix

* Change from Alex

---------

Co-authored-by: AlexandruPopovici <alexandrupopoviciioan@gmail.com>
---
 .../frontend-2/components/viewer/Controls.vue |  2 +-
 .../components/viewer/GlobalFilterReset.vue   |  3 +--
 .../components/viewer/PreSetupWrapper.vue     | 13 ++++++++++--
 packages/frontend-2/components/viewer/Tip.vue | 20 ++++++++++++++++++
 .../viewer/measurements/Options.vue           | 21 ++++++++++++++++---
 .../lib/viewer/composables/setup/postSetup.ts |  7 +++++++
 .../frontend-2/lib/viewer/composables/ui.ts   |  9 ++++++--
 .../src/components/form/Radio.stories.ts      |  3 ++-
 .../src/components/form/Radio.vue             | 21 +++++++++++++++----
 9 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 packages/frontend-2/components/viewer/Tip.vue

diff --git a/packages/frontend-2/components/viewer/Controls.vue b/packages/frontend-2/components/viewer/Controls.vue
index a263b1c58a..597d877fc8 100644
--- a/packages/frontend-2/components/viewer/Controls.vue
+++ b/packages/frontend-2/components/viewer/Controls.vue
@@ -147,7 +147,7 @@
           : '-translate-x-[100%] opacity-0'
       } ${isEmbedEnabled ? 'mt-1.5' : 'mt-[4rem]'}`"
     >
-      <div v-show="activeControl.length !== 0 && activeControl === 'measurements'">
+      <div v-if="activeControl.length !== 0 && activeControl === 'measurements'">
         <KeepAlive>
           <div><ViewerMeasurementsOptions @close="toggleMeasurements" /></div>
         </KeepAlive>
diff --git a/packages/frontend-2/components/viewer/GlobalFilterReset.vue b/packages/frontend-2/components/viewer/GlobalFilterReset.vue
index 78485e7164..c76582e120 100644
--- a/packages/frontend-2/components/viewer/GlobalFilterReset.vue
+++ b/packages/frontend-2/components/viewer/GlobalFilterReset.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     v-show="hasAnyFiltersApplied"
-    class="absolute left-0 w-screen p-2 bg-pink-300/0 flex justify-center pointer-events-none"
-    :class="isEmbedEnabled ? 'bottom-16 mb-2' : 'bottom-4'"
+    class="bg-pink-300/0 flex justify-center items-center pointer-events-none"
   >
     <Transition
       enter-active-class="transform ease-out duration-300 transition"
diff --git a/packages/frontend-2/components/viewer/PreSetupWrapper.vue b/packages/frontend-2/components/viewer/PreSetupWrapper.vue
index f9a77b0f3d..862d62f93b 100644
--- a/packages/frontend-2/components/viewer/PreSetupWrapper.vue
+++ b/packages/frontend-2/components/viewer/PreSetupWrapper.vue
@@ -62,8 +62,17 @@
               <ViewerSelectionSidebar class="z-20" />
             </div>
           </Transition>
-          <!-- Shows up when filters are applied for an easy return to normality -->
-          <ViewerGlobalFilterReset class="z-20" :embed="!!isEmbedEnabled" />
+          <div
+            class="absolute z-10 w-screen flex flex-col items-center justify-center gap-2"
+            :class="isEmbedEnabled ? 'bottom-16 mb-1' : 'bottom-6'"
+          >
+            <PortalTarget name="pocket-tip"></PortalTarget>
+            <div class="flex gap-3">
+              <PortalTarget name="pocket-actions"></PortalTarget>
+              <!-- Shows up when filters are applied for an easy return to normality -->
+              <ViewerGlobalFilterReset class="z-20" :embed="!!isEmbedEnabled" />
+            </div>
+          </div>
         </ClientOnly>
       </div>
     </ViewerPostSetupWrapper>
diff --git a/packages/frontend-2/components/viewer/Tip.vue b/packages/frontend-2/components/viewer/Tip.vue
new file mode 100644
index 0000000000..d45af6c322
--- /dev/null
+++ b/packages/frontend-2/components/viewer/Tip.vue
@@ -0,0 +1,20 @@
+<template>
+  <div
+    class="group flex items-center select-none opacity-70 hover:opacity-90 transition"
+  >
+    <div
+      class="relative z-10 h-7 w-7 rounded-full bg-foundation-2 shadow-xl flex items-center justify-center"
+    >
+      <LightBulbIcon
+        class="h-5 w-5 text-foreground opacity-60 shrink-0 group-hover:text-warning group-hover:opacity-80 transition"
+      />
+    </div>
+    <div class="text-xs bg-foundation-2 rounded-r-md p-[3px] pl-4 pr-2 -ml-3 shadow-xl">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LightBulbIcon } from '@heroicons/vue/24/outline'
+</script>
diff --git a/packages/frontend-2/components/viewer/measurements/Options.vue b/packages/frontend-2/components/viewer/measurements/Options.vue
index 2487902593..d3048404b2 100644
--- a/packages/frontend-2/components/viewer/measurements/Options.vue
+++ b/packages/frontend-2/components/viewer/measurements/Options.vue
@@ -28,6 +28,7 @@
           v-for="option in measurementTypeOptions"
           :key="option.value"
           :label="option.title"
+          :description="option.description"
           :value="option.value.toString()"
           name="measurementType"
           :icon="option.icon"
@@ -73,6 +74,17 @@
         </div>
       </div>
     </div>
+    <Portal to="pocket-tip">
+      <ViewerTip>
+        <strong>Tip:</strong>
+        Right click to cancel measurement
+      </ViewerTip>
+    </Portal>
+    <Portal to="pocket-actions">
+      <FormButton size="sm" @click="() => clearMeasurements()">
+        Reset Measurements
+      </FormButton>
+    </Portal>
   </ViewerLayoutPanel>
 </template>
 <script setup lang="ts">
@@ -101,7 +113,8 @@ const measurementParams = ref({
   precision: measurementPrecision.value
 })
 
-const { setMeasurementOptions, removeMeasurement } = useMeasurementUtilities()
+const { setMeasurementOptions, removeMeasurement, clearMeasurements } =
+  useMeasurementUtilities()
 
 const updateMeasurementsType = (selectedOption: MeasurementTypeOption) => {
   measurementParams.value.type = selectedOption.value
@@ -135,12 +148,14 @@ const measurementTypeOptions = [
   {
     title: 'Point to Point',
     icon: IconPointToPoint,
-    value: MeasurementType.POINTTOPOINT
+    value: MeasurementType.POINTTOPOINT,
+    description: 'Choose two points for precise measurements'
   },
   {
     title: 'Perpendicular',
     icon: IconPerpendicular,
-    value: MeasurementType.PERPENDICULAR
+    value: MeasurementType.PERPENDICULAR,
+    description: 'Tip: Double-click to quick-measure'
   }
 ]
 </script>
diff --git a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts b/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
index ad929fb6b3..09eed9cc1a 100644
--- a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
+++ b/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
@@ -51,6 +51,7 @@ import { CameraController } from '@speckle/viewer'
 import type { Reference } from '@apollo/client'
 import type { Modifier } from '@apollo/client/cache'
 import { useEmbed } from '~/lib/viewer/composables/setup/embed'
+import { useMeasurementUtilities } from '~~/lib/viewer/composables/ui'
 
 function useViewerIsBusyEventHandler() {
   const state = useInjectedViewerState()
@@ -724,6 +725,12 @@ function useViewerMeasurementIntegration() {
     viewer: { instance }
   } = useInjectedViewerState()
 
+  const { clearMeasurements } = useMeasurementUtilities()
+
+  onBeforeUnmount(() => {
+    clearMeasurements()
+  })
+
   watch(
     () => measurement.enabled.value,
     (newVal, oldVal) => {
diff --git a/packages/frontend-2/lib/viewer/composables/ui.ts b/packages/frontend-2/lib/viewer/composables/ui.ts
index 1e8d65dfbf..307653454c 100644
--- a/packages/frontend-2/lib/viewer/composables/ui.ts
+++ b/packages/frontend-2/lib/viewer/composables/ui.ts
@@ -1,6 +1,6 @@
 import { SpeckleViewer, timeoutAt } from '@speckle/shared'
 import type { TreeNode } from '@speckle/viewer'
-import { CameraController } from '@speckle/viewer'
+import { CameraController, MeasurementsExtension } from '@speckle/viewer'
 import type { MeasurementOptions, PropertyInfo } from '@speckle/viewer'
 import { until } from '@vueuse/shared'
 import { difference, isString, uniq } from 'lodash-es'
@@ -357,10 +357,15 @@ export function useMeasurementUtilities() {
     }
   }
 
+  const clearMeasurements = () => {
+    state.viewer.instance.getExtension(MeasurementsExtension).clearMeasurements()
+  }
+
   return {
     enableMeasurements,
     setMeasurementOptions,
-    removeMeasurement
+    removeMeasurement,
+    clearMeasurements
   }
 }
 
diff --git a/packages/ui-components/src/components/form/Radio.stories.ts b/packages/ui-components/src/components/form/Radio.stories.ts
index 012ae95eeb..43cdabb90d 100644
--- a/packages/ui-components/src/components/form/Radio.stories.ts
+++ b/packages/ui-components/src/components/form/Radio.stories.ts
@@ -175,7 +175,8 @@ export const WithIcon: StoryObj<typeof defaultArgs> = {
   args: {
     name: 'withIcon',
     label: 'Example radio with Icon',
-    icon: ArrowRightIcon
+    icon: ArrowRightIcon,
+    description: 'Example discription'
   }
 }
 
diff --git a/packages/ui-components/src/components/form/Radio.vue b/packages/ui-components/src/components/form/Radio.vue
index b199188d7e..02879cd988 100644
--- a/packages/ui-components/src/components/form/Radio.vue
+++ b/packages/ui-components/src/components/form/Radio.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="relative flex gap-2 mb-2 last:mb-0"
-    :class="description ? 'items-start' : 'items-center'"
+    :class="description && inlineDescription ? 'items-start' : 'items-center'"
   >
     <div class="flex h-6 items-center">
       <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
@@ -31,10 +31,23 @@
         <div v-if="icon" class="text-sm">
           <component :is="icon" class="h-8 sm:h-10 w-8 sm:w-10"></component>
         </div>
-        <span>{{ title }}</span>
+        <div class="flex flex-col">
+          <span>{{ title }}</span>
+          <p
+            v-if="descriptionText && !inlineDescription"
+            :id="descriptionId"
+            :class="descriptionClasses"
+          >
+            {{ descriptionText }}
+          </p>
+        </div>
         <span v-if="showRequired" class="text-danger ml-1">*</span>
       </label>
-      <p v-if="descriptionText" :id="descriptionId" :class="descriptionClasses">
+      <p
+        v-if="descriptionText && inlineDescription"
+        :id="descriptionId"
+        :class="descriptionClasses"
+      >
         {{ descriptionText }}
       </p>
     </div>
@@ -186,7 +199,7 @@ const computedClasses = computed((): string => {
 const descriptionText = computed(() => props.description || errorMessage.value)
 const descriptionId = computed(() => `${props.name}-description`)
 const descriptionClasses = computed((): string => {
-  const classParts: string[] = []
+  const classParts: string[] = ['text-xs']
 
   if (errorMessage.value) {
     classParts.push('text-danger')