Add keyboard shortcuts, fix marks for positive elevation

src/components/wms/ElevationSlider.vue

@@ -1,34 +1,11 @@
 <template>
-  <vue-slider
-    class="elevation-slider"
-    :model-value="currentValue"
-    :max="maxValue"
-    :min="minValue"
-    :marks="marks"
-    :interval="interval"
-    @error="onError"
-    @update:model-value="onInputChange"
-    :keydownHook="onSliderKeydown"
-    hideLabel
-    direction="btt"
-    tooltip="always"
-    tooltipPlacement="left"
-    height="200px"
-    ref="sliderComponent"
-  >
+  <vue-slider class="elevation-slider" :model-value="currentValue" :max="maxValue" :min="minValue" :marks="marks"
+    :interval="interval" :keydownHook="onSliderKeydown" hideLabel :silent="true" direction="btt" tooltip="always"
+    tooltipPlacement="left" height="200px" ref="sliderComponent" @update:model-value="onInputChange">
     <template v-slot:tooltip>
-      <div
-        class="vue-slider-dot-tooltip-inner vue-slider-dot-tooltip-inner-left vue-slider-dot-tooltip-text"
-      >
-        <input
-          ref="tooltipInput"
-          v-if="isEditing"
-          v-model.number="editValue"
-          @blur="acceptEdit"
-          @keydown.stop="onKeydown"
-          type="number"
-          class="tooltip-input body-1"
-        />
+      <div class="vue-slider-dot-tooltip-inner vue-slider-dot-tooltip-inner-left vue-slider-dot-tooltip-text">
+        <input ref="tooltipInput" v-if="isEditing" v-model.number="editValue" @blur="acceptEdit" @keydown.stop="onKeydown"
+          type="number" class="tooltip-input body-1" />
         <span v-else class="body-1" @click="activateEdit">{{
           Math.round(currentValue)
         }}</span>
@@ -39,14 +16,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, onMounted, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/antd.css'
-
-function roundToNearest100(x: number) {
-  return Math.round(x / 100) * 100
-}
+import { watchEffect } from 'vue';
+import { scaleLinear } from 'd3-scale'
 
 // Get decimal places of float (e.g. floatPrecision(54.6545) == 4)
 function floatPrecision(a: number) {
@@ -84,19 +59,6 @@ const isEditing = ref(false)
 const tooltipInput = ref<HTMLElement>()
 const sliderComponent = ref<typeof VueSlider>()
 
-const stepSize = (props.maxValue - props.minValue) / numberOfMarks
-
-const onSliderKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Enter') {
-    activateEdit()
-  }
-  return true
-}
-
-const onError = (err: Error) => {
-  console.error(err)
-}
-
 const onInputChange = (value: number) => {
   currentValue.value = value
   emitModelValue(value)
@@ -114,6 +76,26 @@ const onKeydown = (e: KeyboardEvent) => {
   }
 }
 
+function onSliderKeydown(e: KeyboardEvent) {
+  let newValue: number | undefined = 0;
+  switch (e.key) {
+    case "ArrowRight":
+    case "ArrowUp":
+      newValue = marks.value.find((value) => value > currentValue.value)
+      onInputChange(newValue ?? marks.value[marks.value.length - 1])
+      break;
+    case "ArrowLeft":
+    case "ArrowDown":
+      newValue = marks.value.findLast((value) => value < currentValue.value)
+      onInputChange(newValue ?? marks.value[0])
+      break
+    case 'Enter':
+      activateEdit()
+      break
+  }
+  return false
+}
+
 const activateEdit = () => {
   isEditing.value = true
   editValue.value = Math.round(currentValue.value)
@@ -144,14 +126,6 @@ const acceptEdit = () => {
   closeTooltip()
 }
 
-onMounted(() => {
-  const innerMarks = Array.from(
-    { length: numberOfMarks - 1 },
-    (_, i) => (i + 1) * -roundToNearest100(stepSize),
-  )
-  marks.value = [props.maxValue, ...innerMarks, props.minValue]
-})
-
 const interval = computed(() => {
   return 10 ** -floatPrecision(props.maxValue - props.minValue)
 })
@@ -161,6 +135,13 @@ const onValueChange = () => {
 }
 
 watch(() => props.modelValue, onValueChange)
+
+watchEffect(() => {
+  const scale = scaleLinear([props.minValue, props.maxValue], [props.minValue, props.maxValue])
+  const innerMarks = scale.ticks(numberOfMarks)
+  marks.value = [props.minValue, ...innerMarks, props.maxValue]
+})
+
 </script>
 
 <style scoped>