- ADD: Added new navigational mode both for perfomance reasons on low…

…-spec devices as well as to ensure no accidental navigation is executed.

src/components/tables/GridTableCanvas.vue

@@ -141,7 +141,8 @@ export default {
       'storeTraits',
       'storeTraitColors',
       'storeUseGps',
-      'storeVisibleTraits'
+      'storeVisibleTraits',
+      'storeNavigationMode'
     ]),
     /** The row the user is currently in */
     highlightRow: function () {
@@ -359,15 +360,22 @@ export default {
             y: 0
           }
 
-          c.onmousedown = this.onMouseDown
-          c.ontouchstart = this.onMouseDown
-          c.onmouseup = this.onMouseUp
-          c.ontouchend = this.onMouseUp
-          c.onmouseleave = this.onMouseLeave
-          c.ontouchleave = this.onMouseLeave
-          c.onmousemove = this.onMouseMove
-          c.ontouchmove = this.onMouseMove
-          c.onwheel = this.onMouseWheel
+          if (this.storeNavigationMode === 'scroll') {
+            c.onmousedown = this.onMouseDown
+            c.ontouchstart = this.onMouseDown
+            c.onmouseup = this.onMouseUp
+            c.ontouchend = this.onMouseUp
+            c.onmouseleave = this.onMouseLeave
+            c.ontouchleave = this.onMouseLeave
+            c.onmousemove = this.onMouseMove
+            c.ontouchmove = this.onMouseMove
+            c.onwheel = this.onMouseWheel
+          } else {
+            c.onmousedown = this.onMouseDown
+            c.ontouchstart = this.onMouseDown
+            c.onmouseup = this.onMouseUp
+            c.ontouchend = this.onMouseUp
+          }
 
           this.update()
 
@@ -435,7 +443,7 @@ export default {
             col
           })
         }
-      } else if (e.type === 'touchend' || e.type === 'touchcancel') {
+      } else if (this.storeNavigationMode === 'scroll' && (e.type === 'touchend' || e.type === 'touchcancel')) {
         const deltaT = Math.abs(Date.now() - this.dragStartTime)
         // We have to use dragPosition here, because the end/cancel events don't provide location information
         const deltaX = Math.round((this.dragPosition.x - this.dragStart.x) / deltaT * 10)
@@ -523,8 +531,6 @@ export default {
       }
       this.isDrawing = true
 
-      console.log('redraw-all')
-
       this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
 
       if (!this.data || this.data.size < 1) {
@@ -752,6 +758,40 @@ export default {
 
       this.update()
     },
+    scrollBy: function (x, y) {
+      this.origin.x = Math.round(Math.max(Math.min(0, this.origin.x + x), -(this.storeCols * this.cellWidth - this.canvasWidth)))
+      this.origin.y = Math.round(Math.max(Math.min(0, this.origin.y + y), -(this.storeRows * this.cellHeight - this.canvasHeight)))
+
+      this.update()
+    },
+    moveInDirection: function (direction) {
+      switch (direction) {
+        case 'topleft':
+          this.scrollBy(this.cellWidth, this.cellHeight)
+          break
+        case 'top':
+          this.scrollBy(0, this.cellHeight)
+          break
+        case 'topright':
+          this.scrollBy(-this.cellWidth, this.cellHeight)
+          break
+        case 'left':
+          this.scrollBy(this.cellWidth, 0)
+          break
+        case 'right':
+          this.scrollBy(-this.cellWidth, 0)
+          break
+        case 'bottomleft':
+          this.scrollBy(this.cellWidth, -this.cellHeight)
+          break
+        case 'bottom':
+          this.scrollBy(0, -this.cellHeight)
+          break
+        case 'bottomright':
+          this.scrollBy(-this.cellWidth, -this.cellHeight)
+          break
+      }
+    },
     scrollToCorner: function (corner) {
       switch (corner) {
         case 'topleft':

src/plugins/i18n/de_DE.json

@@ -95,6 +95,7 @@
   "formDescriptionSettingsInvertNumberingX": "Umkehrung der Spaltennummerierung nummeriert diese von rechts nach links.",
   "formDescriptionSettingsInvertNumberingY": "Umkehrung der Zeilennummerierung nummeriert diese von unten nach oben.",
   "formDescriptionSettingsInvertView": "Die Invertierung der Ansicht hebt fehlende Daten/Beete hervor statt aufgezeichnete Daten hervorzuheben.",
+  "formDescriptionSettingsNavigationMode": "Wechsel zwischen 'Zieh-/Scroll-' oder 'Sprung-' Navigation. Diese erlauben das Verschieben der Hauptanzeige von GridScore entweder per Ziehen/Scrollen oder durch Sprungbewegungen per Steuerkreuz.",
   "formDescriptionSettingsRow": "Anzahl an Reihen im Feld-Layout.",
   "formDescriptionSettingsShowStatsInTable": "Zeige Statistiken pro Merkmal in der Haupt-Eingabetabelle pro Spalte und Zeile an.",
   "formDescriptionSettingsTraits": "Kennung/Namen des Merkmals eingeben.",
@@ -120,6 +121,7 @@
   "formLabelSettingsInvertNumberingX": "Umgekehrte Spaltennummerierung",
   "formLabelSettingsInvertNumberingY": "Umgekehrte Zeilennummerierung",
   "formLabelSettingsInvertView": "Invertierte Ansicht",
+  "formLabelSettingsNavigationMode": "Navigationsmodus",
   "formLabelSettingsRowMode": "Zeilenmodus",
   "formLabelSettingsRows": "Zeilen",
   "formLabelSettingsShowStatsInTable": "Merkmalsstatistiken in Tabelle",
@@ -140,6 +142,8 @@
   "formPlaceholderFlatDataImport": "\t\tMerkm1\tMerkm2\tMerkm3\nSorte 1\tValue\tValue\tValue\nSorte 2\tValue\tValue\tValue\netc.",
   "formSelectCategory": "Kategorie auswählen",
   "formSelectOption": "Option auswählen",
+  "formSelectOptionNavigationModeScroll": "Ziehen/Scrollen",
+  "formSelectOptionNavigationModeJump": "Springen",
   "formSelectMarkersTopLeft": "Oben links",
   "formSelectMarkersTopRight": "Oben rechts",
   "formSelectMarkersBottomLeft": "Unten links",

src/plugins/i18n/en_GB.json

@@ -95,6 +95,7 @@
   "formDescriptionSettingsInvertNumberingX": "Inverting the column numbering will number them from right to left.",
   "formDescriptionSettingsInvertNumberingY": "Inverting the row numbering will number them from bottom to top.",
   "formDescriptionSettingsInvertView": "Inverting the view will highlight plots that still need to be scored instead of the ones that have been scored already.",
+  "formDescriptionSettingsNavigationMode": "Switch between 'drag/scroll' navigation or 'jump' navigation. These allow you to move the main data display of GridScore either by dragging/scrolling or by jumping in any direction with a directional pad.",
   "formDescriptionSettingsRow": "The number of rows in the field layout.",
   "formDescriptionSettingsShowStatsInTable": "Show statistics per trait in the main data entry table for each column and row.",
   "formDescriptionSettingsTraits": "Enter the trait identifier/name.",
@@ -120,6 +121,7 @@
   "formLabelSettingsInvertNumberingX": "Inverted column numbering",
   "formLabelSettingsInvertNumberingY": "Inverted row numbering",
   "formLabelSettingsInvertView": "Inverted view",
+  "formLabelSettingsNavigationMode": "Navigation mode",
   "formLabelSettingsRowMode": "Row mode",
   "formLabelSettingsRows": "Rows",
   "formLabelSettingsShowStatsInTable": "Trait statistics in table",
@@ -141,6 +143,8 @@
   "formPlaceholderFlatDataImport": "\t\t\tTrait 1\tTrait 2\tTrait 3\nVariety 1\tValue\tValue\tValue\nVariety 2\tValue\tValue\tValue\netc.",
   "formSelectCategory": "Select category",
   "formSelectOption": "Select option",
+  "formSelectOptionNavigationModeScroll": "Drag/Scroll",
+  "formSelectOptionNavigationModeJump": "Jump",
   "formSelectMultiTraitVizTypeLast": "Use last value per plot",
   "formSelectMultiTraitVizTypeAvg": "Use average value per plot",
   "formSelectMultiTraitVizTypeSum": "Use sum per plot",

src/store/index.js

@@ -47,6 +47,7 @@ const storeState = {
     hideMarkers: false,
     showStatsInTable: false,
     visibleTraits: null,
+    navigationMode: 'scroll',
     ignoreEmptyCells: true,
     traitColors: ['#910080', '#ff7c00', '#5ec418', '#00a0f1', '#c5e000', '#ff007a', '#222183', '#c83831', '#fff600'],
     plausible: {
@@ -87,7 +88,8 @@ const storeState = {
     storeHideMarkers: (state) => state.hideMarkers,
     storeTraitColors: (state) => state.traitColors,
     storeVisibleTraits: (state) => state.visibleTraits,
-    storePlausible: (state) => state.plausible
+    storePlausible: (state) => state.plausible,
+    storeNavigationMode: (state) => state.navigationMode
   },
   mutations: {
     ON_RUN_COUNT_CHANGED_MUTATION: function (state, newRunCount) {
@@ -380,6 +382,13 @@ const storeState = {
     },
     ON_DARK_MODE_CHANGED_MUTATION: function (state, newDarkMode) {
       state.darkMode = newDarkMode
+    },
+    ON_NAVIGATION_MODE_CHANGED_MUTATION: function (state, newNavigationMode) {
+      if (!state.navigationMode) {
+        Vue.set(state, 'navigationMode', newNavigationMode)
+      } else {
+        state.navigationMode = newNavigationMode
+      }
     }
   },
   actions: {
@@ -515,13 +524,16 @@ const storeState = {
     },
     setDarkMode: function ({ commit }, darkMode) {
       commit('ON_DARK_MODE_CHANGED_MUTATION', darkMode)
+    },
+    setNavigationMode: function ({ commit }, navigationMode) {
+      commit('ON_NAVIGATION_MODE_CHANGED_MUTATION', navigationMode)
     }
   },
   plugins: [createPersistedState({
     key: name,
     storage: {
       getItem: key => {
-        const result = JSON.parse(localStorage.getItem(key))
+        let result = JSON.parse(localStorage.getItem(key))
 
         if (result && result.datasets && result.datasets.length > 0) {
           result.datasets.forEach(d => {
@@ -566,6 +578,8 @@ const storeState = {
           setTimeout(() => store.dispatch('addDataset', result.datasets[0]), 5000)
         }
 
+        result = Object.assign(JSON.parse(JSON.stringify(storeState.state)), result)
+
         return JSON.stringify(result)
       },
       setItem: (key, value) => {

src/views/DataView.vue

@@ -22,6 +22,23 @@
         </VueTypeaheadBootstrap>
       </b-form>
     </div>
+    <template v-if="storeNavigationMode === 'jump'">
+      <b-button class="btn-circle" id="jump-navigation" variant="primary"><BIconArrowsMove /></b-button>
+
+      <b-popover ref="navigationPopover" target="jump-navigation" triggers="click blur" placement="left" :variant="storeDarkMode ? 'dark' : null">
+        <div class="grid-direction-grid p-2">
+          <div><b-button @click="moveCanvas('topleft')"><BIconArrowUpLeft /></b-button></div>
+          <div><b-button @click="moveCanvas('top')"><BIconArrowUp /></b-button></div>
+          <div><b-button @click="moveCanvas('topright')"><BIconArrowUpRight /></b-button></div>
+          <div><b-button @click="moveCanvas('left')"><BIconArrowLeft /></b-button></div>
+          <div><b-button @click="$refs.navigationPopover.$emit('close')"><BIconSlashCircle /></b-button></div>
+          <div><b-button @click="moveCanvas('right')"><BIconArrowRight /></b-button></div>
+          <div><b-button @click="moveCanvas('bottomleft')"><BIconArrowDownLeft /></b-button></div>
+          <div><b-button @click="moveCanvas('bottom')"><BIconArrowDown /></b-button></div>
+          <div><b-button @click="moveCanvas('bottomright')"><BIconArrowDownRight /></b-button></div>
+        </div>
+      </b-popover>
+    </template>
     <div class="d-flex flex-row align-items-end top-banner">
       <b-button @click="$router.push({ name: 'settings' })" class="mr-1" v-b-tooltip="$t('tooltipSettings')" v-if="storeTraits && storeTraits.length > 0">
         <BIconGearFill /> <span class="d-none d-lg-inline-block">{{ $t('tooltipSettings') }}</span>
@@ -104,7 +121,7 @@ import GridTableCanvas from '@/components/tables/GridTableCanvas'
 import DataPointModal from '@/components/modals/DataPointModal'
 import BarcodeScannerModal from '@/components/modals/BarcodeScannerModal'
 import BarcodeViewerModal from '@/components/modals/BarcodeViewerModal'
-import { BIconCircleFill, BIconGearFill, BIconSearch, BIconCloudDownloadFill, BIconCircleHalf, BIconCircle, BIconCloudUploadFill, BIconDownload, BIconShareFill, BIconArrowsFullscreen, BIconGeoAltFill, BIconArrowUpLeft, BIconArrowUp, BIconArrowUpRight, BIconArrowLeft, BIconArrowRight, BIconArrowDownLeft, BIconArrowDown, BIconArrowDownRight } from 'bootstrap-vue'
+import { BIconCircleFill, BIconGearFill, BIconSearch, BIconArrowsMove, BIconSlashCircle, BIconCloudDownloadFill, BIconCircleHalf, BIconCircle, BIconCloudUploadFill, BIconDownload, BIconShareFill, BIconArrowsFullscreen, BIconGeoAltFill, BIconArrowUpLeft, BIconArrowUp, BIconArrowUpRight, BIconArrowLeft, BIconArrowRight, BIconArrowDownLeft, BIconArrowDown, BIconArrowDownRight } from 'bootstrap-vue'
 import { mapGetters } from 'vuex'
 import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap'
 
@@ -148,9 +165,11 @@ export default {
   },
   components: {
     BIconCircleFill,
+    BIconSlashCircle,
     BIconGearFill,
     BIconCircleHalf,
     BIconCircle,
+    BIconArrowsMove,
     BIconSearch,
     BIconShareFill,
     BIconArrowsFullscreen,
@@ -178,6 +197,7 @@ export default {
       'storeCols',
       'storeContinuousInput',
       'storeCornerPoints',
+      'storeDarkMode',
       'storeDatasetId',
       'storeDatasetUuid',
       'storeGeolocation',
@@ -186,7 +206,8 @@ export default {
       'storeTraitColors',
       'storeTraits',
       'storeUseGps',
-      'storeVisibleTraits'
+      'storeVisibleTraits',
+      'storeNavigationMode'
     ]),
     searchTermLowerCase: function () {
       if (this.searchTerm) {
@@ -226,6 +247,9 @@ export default {
       this.$refs.canvas.scrollToCorner(corner)
       this.$refs.cornerDropdown.hide()
     },
+    moveCanvas: function (direction) {
+      this.$refs.canvas.moveInDirection(direction)
+    },
     openDataInput: function () {
       this.$nextTick(() => {
         if (this.searchTermLowerCase === null) {
@@ -438,4 +462,22 @@ export default {
 .grid-direction-grid .gps-button {
   grid-column: 1 / span 3;
 }
+#jump-navigation {
+  position: fixed;
+  right: 1em;
+  bottom: 20%;
+  transition: opacity linear 0.1s;
+  opacity: 0.5;
+}
+#jump-navigation:hover,
+#jump-navigation:focus {
+  opacity: 1;
+}
+.btn-circle {
+  width: 50px;
+  height: 50px;
+  padding: 7px 10px;
+  border-radius: 25px;
+  text-align: center;
+}
 </style>

src/views/Settings.vue

@@ -15,6 +15,9 @@
           <b-form-group :label="$t('formLabelSettingsContinuousInput')" label-for="continuous-input" :description="$t('formDescriptionSettingsContinuousInput')">
             <b-form-checkbox v-model="tempContinuousInput" switch id="continuous-input">{{ $t('buttonToggleContinuousInput') }}</b-form-checkbox>
           </b-form-group>
+          <b-form-group :label="$t('formLabelSettingsNavigationMode')" label-for="navigation-mode" :description="$t('formDescriptionSettingsNavigationMode')">
+            <b-form-select :options="navigationModeOptions" v-model="tempNavigationMode" id="navigation-mode" />
+          </b-form-group>
 
           <div class="settings-colors">
             <h2>{{ $t('pageSettingsColorsTitle') }} <b-button size="sm" variant="light" v-b-tooltip="$t('tooltipSettingsResetColors')" @click="resetColors"><BIconArrowClockwise /></b-button></h2>
@@ -115,6 +118,7 @@ export default {
       tempGridLinesEvery: 5,
       tempColumnWidth: null,
       tempColors: [],
+      tempNavigationMode: null,
       newColor: 'black',
       validGridLines: [2, 3, 4, 5]
     }
@@ -135,8 +139,21 @@ export default {
       'storeShowStatsInTable',
       'storeTraitColors',
       'storeUseGps',
-      'storeUseSpeech'
-    ])
+      'storeUseSpeech',
+      'storeNavigationMode'
+    ]),
+    navigationModeOptions: function () {
+      return [
+        {
+          text: this.$t('formSelectOptionNavigationModeScroll'),
+          value: 'scroll'
+        },
+        {
+          text: this.$t('formSelectOptionNavigationModeJump'),
+          value: 'jump'
+        }
+      ]
+    }
   },
   methods: {
     /**
@@ -155,6 +172,7 @@ export default {
       this.tempHideToggledTraits = this.storeHideToggledTraits
       this.tempHideMarkers = this.storeHideMarkers
       this.tempIgnoreEmptyCells = this.storeIgnoreEmptyCells
+      this.tempNavigationMode = this.storeNavigationMode
       this.tempColors = JSON.parse(JSON.stringify(this.storeTraitColors))
     },
     resetApp: function () {
@@ -231,6 +249,9 @@ export default {
       if (this.tempIgnoreEmptyCells !== this.storeIgnoreEmptyCells) {
         this.$store.dispatch('setIgnoreEmptyCells', this.tempIgnoreEmptyCells)
       }
+      if (this.tempNavigationMode !== this.storeNavigationMode) {
+        this.$store.dispatch('setNavigationMode', this.tempNavigationMode)
+      }
 
       if (this.tempColors.length !== this.storeTraitColors.length || !this.tempColors.every((value, index) => value === this.storeTraitColors[index])) {
         this.$store.dispatch('setTraitColors', this.tempColors)