From a2707e42a6701cacdb1ea021e51fb49775cdd048 Mon Sep 17 00:00:00 2001
From: Adrien Boucaud <adrien.bk@free.fr>
Date: Thu, 22 Apr 2021 17:34:55 +0200
Subject: [PATCH] feat(ruler): add global parameters for the ruler's unit
 symbol and factor

---
 src/components/core/GlobalSettings/script.js  | 26 ++++++++++++
 .../core/GlobalSettings/template.html         | 40 +++++++++++++++++++
 .../tools/RulerMeasurementTool.js             | 12 +++++-
 .../MeasurementTools/tools/ToolTemplate2D.js  |  5 +++
 src/store/widgets.js                          | 11 +++++
 5 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/src/components/core/GlobalSettings/script.js b/src/components/core/GlobalSettings/script.js
index 66900629..2c230873 100644
--- a/src/components/core/GlobalSettings/script.js
+++ b/src/components/core/GlobalSettings/script.js
@@ -55,6 +55,22 @@ export default {
     };
   },
   computed: {
+    distanceUnitSymbolModel: {
+      get() {
+        return this.distanceUnitSymbol;
+      },
+      set(symbol) {
+        this.setDistanceUnitSymbol(symbol);
+      },
+    },
+    distanceUnitFactorModel: {
+      get() {
+        return this.distanceUnitFactor;
+      },
+      set(factor) {
+        this.setDistanceUnitFactor(factor);
+      },
+    },
     collapseDatasetPanelsModel: {
       get() {
         return this.collapseDatasetPanels;
@@ -150,6 +166,10 @@ export default {
       firstPersonMovementSpeed: (state) => state.firstPersonMovementSpeed,
       maxTextureLODSize: (state) => state.maxTextureLODSize,
     }),
+    ...mapState('widgets', {
+      distanceUnitSymbol: (state) => state.distanceUnitSymbol,
+      distanceUnitFactor: (state) => state.distanceUnitFactor,
+    }),
   },
   watch: {
     physicalScale() {
@@ -226,5 +246,11 @@ export default {
       setMaxTextureLODSize: (dispatch, size) =>
         dispatch('setMaxTextureLODSize', size),
     }),
+    ...mapActions('widgets', {
+      setDistanceUnitSymbol: (dispatch, symbol) =>
+        dispatch('setDistanceUnitSymbol', symbol),
+      setDistanceUnitFactor: (dispatch, factor) =>
+        dispatch('setDistanceUnitFactor', factor),
+    }),
   },
 };
diff --git a/src/components/core/GlobalSettings/template.html b/src/components/core/GlobalSettings/template.html
index 38277e1c..7f48f000 100644
--- a/src/components/core/GlobalSettings/template.html
+++ b/src/components/core/GlobalSettings/template.html
@@ -27,6 +27,46 @@
       </v-layout>
     </v-container>
   </v-card>
+
+  <!-- measurement unit selection -->
+  <v-card flat :class="$style.card">
+    <div :class="$style.heading">
+      <span class="subtitle-2">Measurements</span>
+    </div>
+    <v-divider class="mb-4" />
+    <v-container grid-list-xs class="pa-0">
+      <v-layout row align-center class="pt-1">
+        <v-flex xs9>
+          <span class="body-2">Distance unit symbol</span>
+        </v-flex>
+        <v-flex xs3>
+          <v-text-field
+            :class="$style.slimInput"
+            hint="Symbol"
+            hide-details
+            v-model="distanceUnitSymbolModel"
+            required
+          />
+        </v-flex>
+        <v-flex xs9>
+          <span class="body-2">Distance unit factor</span>
+        </v-flex>
+        <v-flex xs3>
+          <v-text-field
+            :class="$style.slimInput"
+            type="number"
+            hint="Factor"
+            hide-details
+            v-model="distanceUnitFactorModel"
+            :min="0"
+            :step="0.1"
+            required
+          />
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </v-card>
+
   <v-card flat :class="$style.card">
     <div :class="$style.heading">
       <span class="subtitle-2">Background</span>
diff --git a/src/components/tools/MeasurementTools/tools/RulerMeasurementTool.js b/src/components/tools/MeasurementTools/tools/RulerMeasurementTool.js
index 215d6a8f..166b7331 100644
--- a/src/components/tools/MeasurementTools/tools/RulerMeasurementTool.js
+++ b/src/components/tools/MeasurementTools/tools/RulerMeasurementTool.js
@@ -16,7 +16,9 @@ const RulerComponent = create2DTool('Ruler', {
     },
     getDisplayedMeasurements() {
       return {
-        Length: `${this.measurements.length.toFixed(2)} mm`,
+        Length: `${(
+          this.measurements.length * (this.distanceUnitFactor || 1.0)
+        ).toFixed(2)} ${this.distanceUnitSymbol || ''}`,
       };
     },
     updateMeasurements() {
@@ -65,6 +67,14 @@ const RulerComponent = create2DTool('Ruler', {
       });
     },
   },
+  watch: {
+    distanceUnitSymbol() {
+      this.widgetProxy.modified();
+    },
+    distanceUnitFactor() {
+      this.widgetProxy.modified();
+    },
+  },
 });
 
 export default RulerComponent;
diff --git a/src/components/tools/MeasurementTools/tools/ToolTemplate2D.js b/src/components/tools/MeasurementTools/tools/ToolTemplate2D.js
index 0a1a5e51..011d9db7 100644
--- a/src/components/tools/MeasurementTools/tools/ToolTemplate2D.js
+++ b/src/components/tools/MeasurementTools/tools/ToolTemplate2D.js
@@ -1,4 +1,5 @@
 import { WIDGETS } from 'paraview-glance/src/palette';
+import { mapState } from 'vuex';
 
 // ----------------------------------------------------------------------------
 
@@ -64,6 +65,10 @@ export default (toolName, extraComponent = {}) => ({
     displayedMeasurements() {
       return this.getDisplayedMeasurements();
     },
+    ...mapState('widgets', {
+      distanceUnitSymbol: (state) => state.distanceUnitSymbol,
+      distanceUnitFactor: (state) => state.distanceUnitFactor,
+    }),
   },
   watch: extraComponent.watch || {},
   proxyManagerHooks: {
diff --git a/src/store/widgets.js b/src/store/widgets.js
index f7b528a1..0ab1aabf 100644
--- a/src/store/widgets.js
+++ b/src/store/widgets.js
@@ -12,6 +12,9 @@ export default ({ proxyManager }) => ({
   state: {
     measurements: {}, // dataset id -> [{component name, ...{measurement info}}]
 
+    distanceUnitSymbol: 'mm',
+    distanceUnitFactor: 1.0,
+
     // paint
     imageToLabelmaps: {}, // image id -> [labelmap ids]
     labelmapStates: {}, // labelmap id -> { selectedLabel, lastColorIndex }
@@ -20,6 +23,12 @@ export default ({ proxyManager }) => ({
     croppingStates: {}, // dataset id -> cropping state
   },
   mutations: {
+    setDistanceUnitSymbol(state, symbol) {
+      state.distanceUnitSymbol = symbol;
+    },
+    setDistanceUnitFactor(state, factor) {
+      state.distanceUnitFactor = factor;
+    },
     addLabelmapToImage(state, { imageId, labelmapId }) {
       if (!(imageId in state.imageToLabelmaps)) {
         Vue.set(state.imageToLabelmaps, imageId, []);
@@ -72,6 +81,8 @@ export default ({ proxyManager }) => ({
     removeMeasurementTool: wrapMutationAsAction('removeMeasurementTool'),
     updateMeasurementTool: wrapMutationAsAction('updateMeasurementTool'),
     setCroppingState: wrapMutationAsAction('setCroppingState'),
+    setDistanceUnitSymbol: wrapMutationAsAction('setDistanceUnitSymbol'),
+    setDistanceUnitFactor: wrapMutationAsAction('setDistanceUnitFactor'),
     rewriteProxyIds: {
       root: true,
       handler: wrapMutationAsAction('rewriteProxyIds'),