Option for unit preference

resources/assets/js/annotations/annotatorContainer.vue

@@ -86,6 +86,7 @@ export default {
             showScaleLine: false,
             showExampleAnnotations: true,
             draftAnnotationUsesLabelColor: true,
+            preferredUnit: 'auto',
             imagesArea: null,
             openTab: null,
             userUpdatedVolareResolution: false,
@@ -593,6 +594,9 @@ export default {
                 case 'draftAnnotationUsesLabelColor':
                     this.draftAnnotationUsesLabelColor = value;
                     break;
+                case 'preferredUnit':
+                    this.preferredUnit = value;
+                    break;
             }
         },
         handleAnnotationModeChange(mode, data) {

resources/assets/js/annotations/components/measureTooltip.vue

@@ -12,6 +12,8 @@ import MeasureComponent from '../mixins/measureComponent.vue';
 import Polygon from '@biigle/ol/geom/Polygon';
 import Circle from '@biigle/ol/geom/Circle';
 import LineString from '@biigle/ol/geom/LineString';
+import { UnitNames, UnitMultipliers } from '../utils';
+import Settings from '../stores/settings';
 
 /**
  * Tooltip showing length/area of the hovered annotations.
@@ -28,10 +30,13 @@ export default {
     },
     computed: {
         areaUnitMultipliers() {
-            return this.unitMultipliers.map(function (multiplier) {
+            return UnitMultipliers.map(function (multiplier) {
                 return Math.pow(multiplier, 2);
             });
         },
+        preferredUnit() {
+            return Settings.get('preferredUnit');
+        }
     },
     methods: {
         updateGeometries(features) {
@@ -68,7 +73,7 @@ export default {
             if (this.hasArea) {
                 area *= Math.pow(this.pxWidthInMeter, 2);
                 let index = this.unitNearest(area, this.areaUnitMultipliers, 1e-3);
-                unit = this.unitNames[index] + '²';
+                unit = UnitNames[index] + '²';
                 area = area / this.areaUnitMultipliers[index];
             }
 
@@ -79,22 +84,27 @@ export default {
 
             if (this.hasArea) {
                 length = length * this.pxWidthInMeter;
-                let index = this.unitNearest(length, this.unitMultipliers);
-                unit = this.unitNames[index];
-                length = length / this.unitMultipliers[index];
+                let index = this.unitNearest(length, UnitMultipliers);
+                unit = UnitNames[index];
+                length = length / UnitMultipliers[index];
             }
 
-            return this.formatMeasurement(length, unit);
+            return this.formatMeasurement(length, unit, 1);
         },
         formatMeasurement(measurement, unit, decimals) {
-            decimals = Math.pow(10, decimals || 1);
-            return (Math.round(measurement * decimals) / decimals) + ' ' + unit;
+            return new Intl.NumberFormat("en-US", {
+                maximumSignificantDigits: decimals
+            }).format(measurement) + ' ' + unit;
         },
         unitNearest(measurement, multipliers, min) {
             if (measurement === 0) {
                 return multipliers.length - 1;
             }
 
+            if (UnitNames.indexOf(this.preferredUnit) !== -1) {
+                return UnitNames.indexOf(this.preferredUnit);
+            }
+
             min = min || 1;
             let tmpMeasurement;
             let i;
@@ -115,6 +125,11 @@ export default {
                 this.updateGeometries(features);
             }
         },
+        preferredUnit() {
+            if (this.show) {
+                this.updateGeometries(this.features);
+            }
+        }
     }
 };
 </script>

resources/assets/js/annotations/components/scaleLineIndicator.vue

@@ -6,6 +6,7 @@
 <script>
 import MeasureComponent from '../mixins/measureComponent.vue';
 import { ScaleLineProperties } from '../utils';
+import Settings from '../stores/settings';
 
 /**
  * The scale line indicator of the canvas element
@@ -21,7 +22,7 @@ export default {
     },
     computed: {
         scaleLineProperties() {
-            return new ScaleLineProperties(this.resolution, this.hasArea, this.pxWidthInMeter, this.unitMultipliers, this.unitNames);
+            return new ScaleLineProperties(this.resolution, this.hasArea, this.pxWidthInMeter, Settings.get('preferredUnit'));
         },
         width() {
             return this.scaleLineProperties.width();

resources/assets/js/annotations/components/screenshotButton.vue

@@ -82,7 +82,7 @@ export default {
             const x = 10 * ratio;
             const y = canvas.height - 10 * ratio - height;
 
-            const scaleLineProperties = new ScaleLineProperties(this.map.getView().getResolution(), this.hasArea, this.pxWidthInMeter, this.unitMultipliers, this.unitNames);
+            const scaleLineProperties = new ScaleLineProperties(this.map.getView().getResolution(), this.hasArea, this.pxWidthInMeter, Settings.get('preferredUnit'));
             const width = scaleLineProperties.width() * ratio;
             const ctx = canvas.getContext('2d');
 

resources/assets/js/annotations/components/settingsTab.vue

@@ -6,6 +6,7 @@ import ShortcutsButton from './shortcutsButton.vue';
 import ScreenshotButton from './screenshotButton.vue';
 import Settings from '../stores/settings.js';
 import {TIMEOUTS} from '../components/labelbotPopup.vue';
+import { UnitNames } from '../utils.js';
 
 /**
  * Additional components that can be dynamically added by other Biigle modules via
@@ -67,6 +68,7 @@ export default {
                 'exampleAnnotations',
                 'labelbotTimeout',
                 'draftAnnotationUsesLabelColor',
+                'preferredUnit',
             ],
             annotationOpacity: 1.0,
             cachedImagesCount: 1,
@@ -81,6 +83,7 @@ export default {
             labelbotTimeout: TIMEOUTS.length - 1, // off
             labelbotTimeoutMax: TIMEOUTS.length - 1,
             draftAnnotationUsesLabelColor: true,
+            preferredUnit: 'auto'
         };
     },
     computed: {
@@ -96,6 +99,9 @@ export default {
         labelbotTimeoutValue() {
             return TIMEOUTS[this.labelbotTimeout];
         },
+        unitNames() {
+            return ['auto'].concat(UnitNames);
+        },
     },
     methods: {
         showMousePosition() {
@@ -214,6 +220,10 @@ export default {
             this.$emit('change', 'draftAnnotationUsesLabelColor', show);
             this.settings.set('draftAnnotationUsesLabelColor', show);
         },
+        preferredUnit(unit) {
+            this.$emit('change', 'preferredUnit', unit);
+            this.settings.set('preferredUnit', unit);
+        }
     },
     created() {
         this.restoreKeys.forEach((key) => {

resources/assets/js/annotations/mixins/measureComponent.vue

@@ -15,12 +15,6 @@ export default {
             default: null
         },
     },
-    data() {
-        return {
-            unitMultipliers: [1e+3, 1, 1e-2, 1e-3, 1e-6, 1e-9],
-            unitNames: ['km', 'm', 'cm', 'mm', 'µm', 'nm'],
-        };
-    },
     computed: {
         area() {
             if (this.areas && this.image) {

resources/assets/js/annotations/stores/settings.js

@@ -25,6 +25,7 @@ let defaults = {
     regularSamplingColumns: 3,
     labelbotTimeout: TIMEOUTS.length - 1, // off
     draftAnnotationUsesLabelColor: true,
+    preferredUnit: 'auto',
 };
 
 export default new Settings({

resources/assets/js/annotations/utils.js

@@ -100,14 +100,21 @@ function powerOfTen(value) {
     return Math.pow(10, Math.floor(Math.log10(value)));
 }
 
+const UnitMultipliers = [1e+3, 1, 1e-2, 1e-3, 1e-6, 1e-9];
+const UnitNames = ['km', 'm', 'cm', 'mm', 'µm', 'nm'];
+
 class ScaleLineProperties
 {
-    constructor(resolution, hasArea, pxWidthInMeter, unitMultipliers, unitNames) {
+    constructor(resolution, hasArea, pxWidthInMeter, fixedUnit) {
         this._resolution = resolution;
         this._hasArea = hasArea;
         this._pxWidthInMeter = pxWidthInMeter;
-        this._unitMultipliers = unitMultipliers;
-        this._unitNames = unitNames;
+
+        if (fixedUnit && UnitNames.indexOf(fixedUnit) !== -1) {
+            this._fixedUnitIndex = UnitNames.indexOf(fixedUnit);
+        } else {
+            this._fixedUnitIndex = null;
+        }
 
         this._targetWidth = 100;
         this._leadingDigits = [1, 2, 5];
@@ -144,30 +151,41 @@ class ScaleLineProperties
     }
 
     _unitNearest() {
+        if (this._fixedUnitIndex !== null) {
+            return this._fixedUnitIndex;
+        }
+
         let smallestIndex = 0;
         let smallestDistance = Infinity;
-        for (let i = this._unitMultipliers.length - 1; i >= 0; i--) {
-            if (Math.abs(this._unitMultipliers[i] - this._scalePowerOfTen()) < smallestDistance) {
+        for (let i = UnitMultipliers.length - 1; i >= 0; i--) {
+            if (Math.abs(UnitMultipliers[i] - this._scalePowerOfTen()) < smallestDistance) {
                 smallestIndex = i;
-                smallestDistance = Math.abs(this._unitMultipliers[i] - this._scalePowerOfTen());
+                smallestDistance = Math.abs(UnitMultipliers[i] - this._scalePowerOfTen());
             }
         }
 
         return smallestIndex;
     }
 
+    _formatValue(value) {
+        return new Intl.NumberFormat("en-US", {
+            maximumSignificantDigits: 3
+        }).format(value);
+    }
+
     width() {
         return Math.round(this._scaleNearest() / this._scaleMultiplier());
     }
 
     text() {
         if (this._hasArea) {
             const unitNearest = this._unitNearest();
-            return Math.round(this._scaleNearest() / this._unitMultipliers[unitNearest]) + ' ' + this._unitNames[unitNearest];
+            const length = this._scaleNearest() / UnitMultipliers[unitNearest];
+            return this._formatValue(length) + ' ' + UnitNames[unitNearest];
         }
 
-        return Math.round(this._scaleNearest()) + ' px';
+        return this._formatValue(this._scaleNearest()) + ' px';
     }
 }
 
-export {isInvalidShape, clamp, trimCanvas, ScaleLineProperties};
+export {isInvalidShape, clamp, trimCanvas, ScaleLineProperties, UnitMultipliers, UnitNames};

resources/views/annotations/show/tabs/settings.blade.php

@@ -99,6 +99,13 @@
             </power-toggle>
         </div>
 
+        <div class="sidebar-tab__section">
+            <h5 title="Set the preferred unit">Preferred unit</h5>
+            <select class="form-control" v-model="preferredUnit">
+                <option v-for="unit in unitNames" :key="unit" :value="unit" v-text="unit"></option>
+            </select>
+        </div>
+
         @mixin('annotationsSettingsTab')
     </div>
 </script>

resources/views/manual/tutorials/annotations/sidebar.blade.php

@@ -174,6 +174,10 @@
             The draft annotation color switch enables using the selected label's color for the draft annotation. If disabled, a neutral default color is used for draft annotations.
         </p>
 
+        <p>
+            The preferred unit dropdown controls the unit used for displaying lengths and areas. If the default value <b>auto</b> is selected, the most suitable unit is automatically calculated. If a preferred unit other than <b>auto</b> is active, the scale line indicator (including the one in screenshots) will always display the scale using the selected unit. The measure tooltip will also display lengths and areas of annotations during hovering using the preferred unit.
+        </p>
+
         @mixin('annotationsManualSidebarSettings')
     </div>
 @endsection