[WBX-110] Improvements to Measurement Mode (specklesystems#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 <[email protected]>
makebimgreatagain · Feb 12, 2024 · f831c2d · f831c2d
1 parent 78891e8
commit f831c2d
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')