improvements of useability:

- sync line direction with feature value
- refactor line styles into mini-component
- sync button state with line style
- fix unselect behavior when clicking on map away from features

src/assets/main.css

@@ -130,6 +130,11 @@
     color: rgb(51, 51, 51);
   }
 
+  .lux-btn-grey.pressed {
+    background-color: rgb(133, 168, 233);
+    color: rgb(51, 51, 181);
+  }
+
   .lux-close-cross {
     @apply after:content-['\e02c'];
   }

src/components/draw/feature-edit-linestyle-item.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+
+const { t } = useTranslation()
+
+const props = defineProps<{
+  linestyle: String
+  feature: DrawnFeature
+}>()
+const emit = defineEmits(['changeLinestyle'])
+
+function onClickChangeLineStyle(linestyle) {
+  emit('changeLinestyle', linestyle)
+}
+</script>
+
+<template>
+  <button
+    :class="`lux-btn-grey rounded${
+      props.feature.featureStyle.linestyle === props.linestyle ? ' pressed' : ''
+    }`"
+    @click="onClickChangeLineStyle(props.linestyle)"
+  >
+    {{ t(props.linestyle) }}
+  </button>
+</template>

src/components/draw/feature-edit-style.vue

@@ -14,6 +14,8 @@ import FeatureEditStylePolygon from './feature-edit-style-polygon.vue'
 import FeatureEditStyleLabel from './feature-edit-style-label.vue'
 import FeatureEditStyleSymbole from './feature-edit-style-symbole.vue'
 
+import FeatureEditLinestyleItem from './feature-edit-linestyle-item.vue'
+
 const { t } = useTranslation()
 const feature: DrawnFeature = inject('feature')!
 const popupOpen: Ref<boolean> = ref(false)
@@ -27,6 +29,8 @@ const styleComponents = {
   FeatureEditStyleLabel,
 }
 
+const linestyles = ['plain', 'dashed', 'dotted']
+
 const currentStyleComponent = computed(() =>
   feature?.featureType.replace('drawn', 'FeatureEditStyle')
 )
@@ -164,21 +168,13 @@ function onClickChangeLineStyle(style: string) {
           {{ t('Style') }}
         </label>
         <div class="flex gap-1">
-          <button class="lux-btn-grey" @click="onClickChangeLineStyle('plain')">
-            {{ t('Plain') }}
-          </button>
-          <button
-            class="lux-btn-grey"
-            @click="onClickChangeLineStyle('dashed')"
-          >
-            {{ t('Dashed') }}
-          </button>
-          <button
-            class="lux-btn-grey"
-            @click="onClickChangeLineStyle('dotted')"
-          >
-            {{ t('Dotted') }}
-          </button>
+          <FeatureEditLinestyleItem
+            v-for="(linestyle, i) in linestyles"
+            :key="i"
+            :linestyle="linestyle"
+            :feature="feature"
+            @changeLinestyle="onClickChangeLineStyle"
+          />
         </div>
       </div>
     </template>
@@ -189,7 +185,6 @@ function onClickChangeLineStyle(style: string) {
           {{ t('Stroke width') }}
         </label>
         <RangeInput
-          class="md:w-2/3"
           data-cy="featStyleLineWidth"
           :value="feature.featureStyle.stroke"
           @change="onWidthChange"
@@ -217,7 +212,12 @@ function onClickChangeLineStyle(style: string) {
         <label class="font-bold block" for="showOrientation">
           {{ t('Show orientation') }}
         </label>
-        <input type="checkbox" id="showOrientation" @change="onShowDirection" />
+        <input
+          type="checkbox"
+          id="showOrientation"
+          @change="onShowDirection"
+          :checked="feature.featureStyle.showOrientation"
+        />
       </div>
 
       <div class="flex gap-1 items-center mt-1 mb-2">

src/composables/draw/draw-select.composable.ts

@@ -18,6 +18,7 @@ export default function useDrawSelect() {
   listen(map, 'click', event => handleClick(event))
 
   watch(activeFeatureId, (newId, oldId) => {
+    editingFeatureId.value = undefined
     drawnFeatures.value
       .filter(f => getUid(f) == oldId)
       .forEach(oldFeature => {
@@ -36,14 +37,14 @@ export default function useDrawSelect() {
   const handleClick = function (event: any) {
     const pixel = event.pixel
 
+    activeFeatureId.value = undefined
     const feature = map.forEachFeatureAtPixel(
       pixel,
       feature => {
         const featureMatch = olArray.includes(drawnFeatures.value, feature)
         if (featureMatch) {
           appStore.toggleMyMapsOpen(true)
           activeFeatureId.value = getUid(feature)
-          editingFeatureId.value = undefined
 
           return
         }