PB-1297: make position of text labels configurable

src/api/features/EditableFeature.class.js

@@ -4,7 +4,14 @@ import { extractOlFeatureGeodesicCoordinates } from '@/api/features/features.api
 import SelectableFeature from '@/api/features/SelectableFeature.class'
 import { DEFAULT_ICON_URL_PARAMS } from '@/api/icon.api'
 import { DEFAULT_TITLE_OFFSET } from '@/api/icon.api'
-import { allStylingColors, allStylingSizes, MEDIUM, RED } from '@/utils/featureStyleUtils'
+import {
+    allStylingColors,
+    allStylingSizes,
+    allStylingTextPlacementsWithUnknown,
+    MEDIUM,
+    RED,
+    TOP,
+} from '@/utils/featureStyleUtils'
 
 /** @enum */
 export const EditableFeatureTypes = {
@@ -33,6 +40,19 @@ export default class EditableFeature extends SelectableFeature {
      * @param {DrawingIcon} featureData.icon Icon that will be covering this feature, can be null
      * @param {FeatureStyleSize} featureData.iconSize Size of the icon (if defined) that will be
      *   covering this feature
+     *
+     * @typedef {'top-left'
+     *     | 'top'
+     *     | 'top-right'
+     *     | 'left'
+     *     | 'center'
+     *     | 'right'
+     *     | 'bottom-left'
+     *     | 'bottom'
+     *     | 'bottom-right'
+     *     | 'unknown'} TextPlacement
+     * @param {TextPlacement} featureData.textPlacement Size of the icon (if defined) that will be
+     *   covering this feature
      */
     constructor(featureData) {
         const {
@@ -48,6 +68,7 @@ export default class EditableFeature extends SelectableFeature {
             fillColor = RED,
             icon = null,
             iconSize = MEDIUM,
+            textPlacement = TOP,
         } = featureData
         super({ id, coordinates, title, description, geometry, isEditable: true })
         this._featureType = featureType
@@ -59,6 +80,7 @@ export default class EditableFeature extends SelectableFeature {
         this._iconSize = iconSize
         this._geodesicCoordinates = null
         this._isDragged = false
+        this._textPlacement = textPlacement
     }
 
     /**
@@ -108,6 +130,22 @@ export default class EditableFeature extends SelectableFeature {
         }
     }
 
+    /** @returns {TextPlacement} */
+    get textPlacement() {
+        return this._textPlacement
+    }
+
+    /** @param newPlacement {TextPlacement} */
+    set textPlacement(newPlacement) {
+        if (
+            newPlacement &&
+            allStylingTextPlacementsWithUnknown.find((placement) => placement === newPlacement)
+        ) {
+            this._textPlacement = newPlacement
+            this.emitStylingChangeEvent('textPlacement')
+        }
+    }
+
     /** @returns {FeatureStyleSize} */
     get textSize() {
         return this._textSize

src/modules/i18n/locales/de.json

@@ -419,6 +419,7 @@
     "modify_new_vertex_measure": "Klicke, um einen Punkt hinzuzufügen.<br/> Punkt verschieben: klicken und ziehen ",
     "modify_text_color_label": "Textfarbe",
     "modify_text_label": "Text",
+    "modify_text_placement_label": "Platzierung",
     "modify_text_size_label": "Grösse",
     "more_info": "Mehr dazu ...",
     "movie": "Zeitreihen (Multi-PDF)",

src/modules/i18n/locales/en.json

@@ -419,6 +419,7 @@
     "modify_new_vertex_measure": "Click to add a point<br/>Click then drag to move the point",
     "modify_text_color_label": "Text color",
     "modify_text_label": "Text",
+    "modify_text_placement_label": "Platzierung",
     "modify_text_size_label": "Size",
     "more_info": "More info ...",
     "movie": "Time serie (Mutliple PDF)",

src/modules/i18n/locales/fr.json

@@ -419,6 +419,7 @@
     "modify_new_vertex_measure": " Cliquer pour ajouter un point<br/>Cliquer puis bouger le curseur pour déplacer le point",
     "modify_text_color_label": "Couleur du texte",
     "modify_text_label": "Texte",
+    "modify_text_placement_label": "Emplacement",
     "modify_text_size_label": "Taille",
     "more_info": "Plus d'informations ...",
     "movie": "Série temporelle (Multi-PDF)",

src/modules/i18n/locales/it.json

@@ -419,6 +419,7 @@
     "modify_new_vertex_measure": "Cliccare per aggiungere un punto.<br/>Cliccare quindi trascinare per spostare il punto",
     "modify_text_color_label": "Colore del testo",
     "modify_text_label": "Nota",
+    "modify_text_placement_label": "Posizione",
     "modify_text_size_label": "Grandezza",
     "more_info": "Più informazioni ...",
     "movie": "Serie storica (Multi-PDF)",

src/modules/i18n/locales/rm.json

@@ -417,6 +417,7 @@
     "modify_new_vertex_measure": "Cliccar per agiuntar punct. Spustar punct :cliccar e trair",
     "modify_text_color_label": "Colur dal text",
     "modify_text_label": "Etichetta",
+    "modify_text_placement_label": "Plazzament",
     "modify_text_size_label": "Grondezza",
     "more_info": "Ulteriuras infurmaziuns ...",
     "movie": "Seria temporala (Multi-PDF)",

src/modules/infobox/components/styling/DrawingStyleIconSelector.vue

@@ -18,7 +18,6 @@
                 />
             </div>
         </div>
-
         <DrawingStyleColorSelector
             v-if="currentIconSet && currentIconSet.isColorable"
             class="mb-3"

src/modules/infobox/components/styling/DrawingStylePlacementSelector.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <label class="form-label" for="drawing-style-text-placement-selector">
+            {{ i18n.t('modify_text_placement_label') }}
+        </label>
+        <div class="grid-container">
+            <div class="grid">
+                <button
+                    v-for="pos in allStylingTextPlacements"
+                    :key="pos"
+                    :data-cy="`drawing-style-placement-selector-${pos}`"
+                    class="placement-button btn btn-sm btn-light btn-outline-secondary"
+                    :class="{ active: currentPlacement === pos }"
+                    @click="onPlacementSelect(pos)"
+                ></button>
+            </div>
+            <div class="floating-box"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { allStylingTextPlacements } from '@/utils/featureStyleUtils'
+
+const props = defineProps({
+    currentPlacement: {
+        type: String,
+        required: true,
+    },
+})
+
+const { currentPlacement } = toRefs(props)
+
+const emit = defineEmits(['change'])
+
+const i18n = useI18n()
+
+const onPlacementSelect = (placement) => {
+    emit('change', placement)
+}
+</script>
+
+<style>
+.grid-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: 5px;
+}
+
+.floating-box {
+    width: 52px;
+    height: 52px;
+    position: absolute;
+    top: 12%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    border: 2px solid black;
+}
+
+.placement-button {
+    z-index: 2;
+    height: 20px;
+    width: 20px;
+    position: relative;
+}
+</style>

src/modules/infobox/components/styling/FeatureStyleEdit.vue

@@ -10,6 +10,7 @@ import FeatureAreaInfo from '@/modules/infobox/components/FeatureAreaInfo.vue'
 import DrawingStyleColorSelector from '@/modules/infobox/components/styling/DrawingStyleColorSelector.vue'
 import DrawingStyleIconSelector from '@/modules/infobox/components/styling/DrawingStyleIconSelector.vue'
 import DrawingStyleMediaLink from '@/modules/infobox/components/styling/DrawingStyleMediaLink.vue'
+import DrawingStylePositionSelector from '@/modules/infobox/components/styling/DrawingStylePlacementSelector.vue'
 import DrawingStylePopoverButton from '@/modules/infobox/components/styling/DrawingStylePopoverButton.vue'
 import DrawingStyleSizeSelector from '@/modules/infobox/components/styling/DrawingStyleSizeSelector.vue'
 import DrawingStyleTextColorSelector from '@/modules/infobox/components/styling/DrawingStyleTextColorSelector.vue'
@@ -36,7 +37,6 @@ const { feature, readOnly } = toRefs(props)
 const title = ref(feature.value.title)
 const description = ref(feature.value.description)
 const mediaPopovers = ref(null)
-
 const isEditingText = computed(() => {
     const titleElement = document.getElementById('drawing-style-feature-title')
     const descriptionElement = document.getElementById('drawing-style-feature-description')
@@ -95,6 +95,10 @@ function updateFeatureTitle() {
         title: title.value.trim(),
         ...dispatcher,
     })
+    // Update the text offset if the feature is a marker
+    if (feature.value.featureType === EditableFeatureTypes.MARKER) {
+        updateTextOffset()
+    }
 }
 
 function updateFeatureDescription() {
@@ -129,6 +133,14 @@ function onTextSizeChange(textSize) {
     store.dispatch('changeFeatureTextSize', { feature: feature.value, textSize, ...dispatcher })
     updateTextOffset()
 }
+function onPlacementChange(textPlacement) {
+    store.dispatch('changeFeatureTextPlacement', {
+        feature: feature.value,
+        textPlacement,
+        ...dispatcher,
+    })
+    updateTextOffset()
+}
 function onTextColorChange(textColor) {
     store.dispatch('changeFeatureTextColor', { feature: feature.value, textColor, ...dispatcher })
 }
@@ -157,7 +169,9 @@ function updateTextOffset() {
             feature.value.textSize.textScale,
             feature.value.iconSize.iconScale,
             feature.value.icon.anchor,
-            feature.value.icon.size
+            feature.value.icon.size,
+            feature.value.textPlacement,
+            title.value
         )
 
         store.dispatch('changeFeatureTextOffset', {
@@ -275,6 +289,12 @@ function mediaTypes() {
                             :current-size="feature.textSize"
                             @change="onTextSizeChange"
                         />
+                        <DrawingStylePositionSelector
+                            v-if="isFeatureMarker"
+                            class="mb-3"
+                            :current-placement="feature.textPlacement"
+                            @change="onPlacementChange"
+                        />
                         <DrawingStyleTextColorSelector
                             :current-color="feature.textColor"
                             @change="onTextColorChange"

src/store/modules/features.store.js

@@ -13,7 +13,11 @@ import {
     GPX_GEOMETRY_SIMPLIFICATION_TOLERANCE,
 } from '@/config/map.config'
 import { flattenExtent } from '@/utils/extentUtils'
-import { allStylingColors, allStylingSizes } from '@/utils/featureStyleUtils'
+import {
+    allStylingColors,
+    allStylingSizes,
+    allStylingTextPlacementsWithUnknown,
+} from '@/utils/featureStyleUtils'
 import { transformIntoTurfEquivalent } from '@/utils/geoJsonUtils'
 import log from '@/utils/logging'
 
@@ -474,6 +478,30 @@ export default {
                 })
             }
         },
+
+        /**
+         * Changes the text placement of the title of the feature. Only changes the text placement
+         * if the feature is editable and part of the currently selected features
+         *
+         * @param commit
+         * @param state
+         * @param {EditableFeature} feature
+         * @param {TextPlacement} textPlacement
+         * @param dispatcher
+         */
+        changeFeatureTextPlacement({ commit, state }, { feature, textPlacement, dispatcher }) {
+            const selectedFeature = getEditableFeatureWithId(state, feature.id)
+            const wantedPlacement = allStylingTextPlacementsWithUnknown.find(
+                (position) => position === textPlacement
+            )
+            if (wantedPlacement && selectedFeature && selectedFeature.isEditable) {
+                commit('changeFeatureTextPlacement', {
+                    feature: selectedFeature,
+                    textPlacement: wantedPlacement,
+                    dispatcher,
+                })
+            }
+        },
         /**
          * Changes the text offset of the feature. Only change the text offset if the feature is
          * editable and part of the currently selected features
@@ -735,6 +763,9 @@ export default {
         changeFeatureTextSize(state, { feature, textSize }) {
             feature.textSize = textSize
         },
+        changeFeatureTextPlacement(state, { feature, textPlacement }) {
+            feature.textPlacement = textPlacement
+        },
         changeFeatureTextOffset(state, { feature, textOffset }) {
             feature.textOffset = textOffset
         },