PB 1151: add warning message kml import partially out of bounds

package.json

@@ -38,19 +38,19 @@
         "@vue/eslint-config-prettier": "catalog:",
         "@vue/eslint-config-typescript": "catalog:",
         "@vue/tsconfig": "catalog:",
-        "eslint": "catalog:",
         "eslint-plugin-cypress": "catalog:",
         "eslint-plugin-mocha": "catalog:",
         "eslint-plugin-perfectionist": "catalog:",
         "eslint-plugin-prettier": "catalog:",
         "eslint-plugin-vue": "catalog:",
+        "eslint": "catalog:",
         "globals": "catalog:",
-        "prettier": "catalog:",
         "prettier-plugin-jsdoc": "catalog:",
-        "typescript": "catalog:",
+        "prettier": "catalog:",
         "typescript-eslint": "catalog:",
-        "vite": "catalog:",
+        "typescript": "catalog:",
         "vite-plugin-dts": "catalog:",
+        "vite": "catalog:",
         "vitest": "catalog:",
         "vue-tsc": "catalog:"
     },

packages/mapviewer/package.json

@@ -37,6 +37,7 @@
         "delete:reports:unit": "rimraf tests/results/unit/ || true"
     },
     "dependencies": {
+        "@floating-ui/vue": "catalog:",
         "@fortawesome/fontawesome-svg-core": "catalog:",
         "@fortawesome/free-brands-svg-icons": "catalog:",
         "@fortawesome/free-regular-svg-icons": "catalog:",
@@ -74,11 +75,10 @@
         "proj4": "catalog:",
         "reproject": "catalog:",
         "sortablejs": "catalog:",
-        "tippy.js": "catalog:",
-        "vue": "catalog:",
         "vue-chartjs": "catalog:",
         "vue-i18n": "catalog:",
         "vue-router": "catalog:",
+        "vue": "catalog:",
         "vue3-social-sharing": "catalog:",
         "vuex": "catalog:"
     },
@@ -95,12 +95,12 @@
         "@vue/tsconfig": "catalog:",
         "axios-retry": "catalog:",
         "chai": "catalog:",
-        "cypress": "catalog:",
         "cypress-browser-permissions": "catalog:",
         "cypress-real-events": "catalog:",
         "cypress-recurse": "catalog:",
         "cypress-vite": "catalog:",
         "cypress-wait-until": "catalog:",
+        "cypress": "catalog:",
         "dotenv": "catalog:",
         "git-describe": "catalog:",
         "gitconfig": "catalog:",
@@ -112,7 +112,6 @@
         "sass": "catalog:",
         "sharp": "catalog:",
         "start-server-and-test": "catalog:",
-        "vite": "catalog:",
         "vite-node": "catalog:",
         "vite-plugin-static-copy": "catalog:",
         "vite-plugin-vue-devtools": "catalog:",

packages/mapviewer/src/api/layers/AbstractLayer.class.js

@@ -130,6 +130,9 @@ export default class AbstractLayer {
         /** @type {Set<ErrorMessage>} */
         this.errorMessages = new Set()
         this.hasError = false
+        /** @type {Set<WarningMessage><} */
+        this.warningMessages = new Set()
+        this.hasWarning = false
         this.timeConfig = timeConfig
         this.hasMultipleTimestamps = this.timeConfig?.timeEntries?.length > 1
         this.setCustomAttributes(customAttributes)
@@ -171,6 +174,42 @@ export default class AbstractLayer {
         this.hasError = false
     }
 
+    /**
+     * @param {WarningMessage} warningMessage
+     * @returns {boolean}
+     */
+    containsWarningMessage(warningMessage) {
+        return this.warningMessages.has(warningMessage)
+    }
+
+    /** @returns {WarningMessage} */
+    getFirstWarningMessage() {
+        return this.warningMessages.values().next().value
+    }
+
+    /** @param {WarningMessage} warningMessage */
+    addWarningMessage(warningMessage) {
+        this.warningMessages.add(warningMessage)
+        this.hasWarning = true
+    }
+
+    /** @param {WarningMessage} warningMessage */
+    removeWarningMessage(warningMessage) {
+        // We need to find the error message that equals to remove it
+        for (let msg of this.warningMessages) {
+            if (msg.isEquals(warningMessage)) {
+                this.warningMessages.delete(msg)
+                break
+            }
+        }
+        this.hasWarning = !!this.warningMessages.size
+    }
+
+    clearWarningMessages() {
+        this.warningMessages.clear()
+        this.hasWarning = false
+    }
+
     setCustomAttributes(customAttributes) {
         if (customAttributes !== null) {
             if (typeof customAttributes !== 'object') {

packages/mapviewer/src/main.js

@@ -10,7 +10,6 @@ import { registerProj4 } from '@geoadmin/coordinates'
 import log from '@geoadmin/log'
 import { register } from 'ol/proj/proj4'
 import proj4 from 'proj4'
-import tippy from 'tippy.js'
 import { createApp } from 'vue'
 
 import App from '@/App.vue'
@@ -55,7 +54,6 @@ log.debug('Config is', {
     BREAKPOINT_TABLET,
 })
 
-tippy.setDefaultProps({ theme: 'light-border' })
 setupChartJS()
 
 registerProj4(proj4)

packages/mapviewer/src/modules/drawing/components/AddVertexButton.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { onMounted, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import { EditMode } from '@/store/modules/drawing.store'
-import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
+import GeoadminTooltip from '@/utils/components/GeoadminTooltip.vue'
+
+const { t } = useI18n()
 
 const dispatcher = { dispatcher: 'AddVertexButton.vue' }
 
@@ -24,12 +27,11 @@ const emit = defineEmits(['button-mounted'])
 
 const store = useStore()
 
-const buttonRef = useTemplateRef('buttonRef')
-useTippyTooltip(buttonRef, tooltipText, { placement: 'left' })
+const elementRef = useTemplateRef('elementRef')
 
 onMounted(() => {
     // Emit an event to notify the parent component that the button is mounted
-    emit('button-mounted', buttonRef.value)
+    emit('button-mounted', elementRef.value.tooltipElement)
 })
 
 function addVertex() {
@@ -42,13 +44,18 @@ function addVertex() {
 </script>
 
 <template>
-    <button
-        ref="buttonRef"
-        class="overlay-button d-print-none"
-        @click="addVertex"
+    <GeoadminTooltip
+        ref="elementRef"
+        :tooltip-content="t(tooltipText)"
+        placement="left"
     >
-        <font-awesome-icon :icon="['fas', 'plus']" />
-    </button>
+        <button
+            class="overlay-button d-print-none"
+            @click="addVertex"
+        >
+            <font-awesome-icon :icon="['fas', 'plus']" />
+        </button>
+    </GeoadminTooltip>
 </template>
 
 <style lang="scss" scoped>

packages/mapviewer/src/modules/drawing/components/AddVertexButtonOverlay.vue

@@ -88,6 +88,7 @@ const updateButtonPositions = () => {
 }
 
 const onFirstButtonMounted = (buttonElement) => {
+    buttonElement.setAttribute('data-cy', 'extend-from-first-node-button')
     firstButtonOverlay = new Overlay({
         element: buttonElement,
         positioning: 'center-center',
@@ -98,6 +99,7 @@ const onFirstButtonMounted = (buttonElement) => {
 }
 
 const onLastButtonMounted = (buttonElement) => {
+    buttonElement.setAttribute('data-cy', 'extend-from-last-node-button')
     lastButtonOverlay = new Overlay({
         element: buttonElement,
         positioning: 'center-center',
@@ -126,12 +128,10 @@ onUnmounted(() => {
 <template>
     <AddVertexButton
         :reverse="true"
-        data-cy="extend-from-first-node-button"
         @button-mounted="onFirstButtonMounted"
     />
     <AddVertexButton
         :reverse="false"
-        data-cy="extend-from-last-node-button"
         @button-mounted="onLastButtonMounted"
     />
 </template>

packages/mapviewer/src/modules/drawing/components/DrawingToolbox.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import DOMPurify from 'dompurify'
-import { computed, inject, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
@@ -14,8 +14,8 @@ import ShareWarningPopup from '@/modules/drawing/components/ShareWarningPopup.vu
 import { DrawingState } from '@/modules/drawing/lib/export-utils'
 import useSaveKmlOnChange from '@/modules/drawing/useKmlDataManagement.composable'
 import { EditMode } from '@/store/modules/drawing.store'
+import GeoadminTooltip from '@/utils/components/GeoadminTooltip.vue'
 import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
-import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import debounce from '@/utils/debounce'
 
 const dispatcher = { dispatcher: 'DrawingToolbox.vue' }
@@ -27,14 +27,15 @@ const store = useStore()
 
 const emits = defineEmits(['removeLastPoint', 'closeDrawing'])
 
-const drawingNameContainer = useTemplateRef('drawingNameContainer')
-
 const drawMenuOpen = ref(true)
 const showClearConfirmationModal = ref(false)
 const showShareModal = ref(false)
 const showNotSharedDrawingWarningModal = ref(false)
 const showNotSharedDrawingWarning = computed(() => store.getters.showNotSharedDrawingWarning)
 const isClosingDrawing = ref(false)
+const showNoActiveKmlWarning = computed(() => !activeKmlLayer.value)
+
+const tooltipText = computed(() => t(!activeKmlLayer.value ? 'drawing_empty_cannot_edit_name' : ''))
 const isDesktopMode = computed(() => store.getters.isDesktopMode)
 const isPhoneMode = computed(() => store.getters.isPhoneMode)
 const isDrawingEmpty = computed(() => store.getters.isDrawingEmpty)
@@ -111,24 +112,6 @@ function onCloseClearConfirmation(confirmed) {
     }
 }
 
-const tooltipText = computed(() => (!activeKmlLayer.value ? 'drawing_empty_cannot_edit_name' : ''))
-
-const { removeTippy: removeNoActiveKmlWarning } = useTippyTooltip(drawingNameContainer, tooltipText)
-
-onMounted(() => {
-    // if there's already an active KML layer, we can remove the tippy (as it will be empty, see template below)
-    if (activeKmlLayer.value) {
-        removeNoActiveKmlWarning()
-    }
-})
-
-watch(activeKmlLayer, () => {
-    if (activeKmlLayer.value) {
-        // no need for the message telling the user the drawing is empty, and he can't edit the drawing name
-        removeNoActiveKmlWarning()
-    }
-})
-
 function closeDrawing() {
     isClosingDrawing.value = true
     if (showNotSharedDrawingWarning.value) {
@@ -180,27 +163,32 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                 class="card text-center drawing-toolbox-content shadow-lg rounded-bottom rounded-top-0 rounded-start-0"
                 :class="{ 'rounded-bottom-0': isPhoneMode }"
             >
-                <div
-                    v-if="online"
-                    ref="drawingNameContainer"
-                    class="d-flex justify-content-center align-items-center gap-2 mt-3 mx-4"
+                <GeoadminTooltip
+                    :tooltip-content="tooltipText"
+                    placement="bottom"
+                    :disabled="!showNoActiveKmlWarning"
                 >
-                    <label
-                        for="drawing-name"
-                        class="text-nowrap"
+                    <div
+                        v-if="online"
+                        class="d-flex justify-content-center align-items-center gap-2 mt-3 mx-4"
                     >
-                        {{ t('file_name') }}
-                    </label>
-                    <input
-                        id="drawing-name"
-                        v-model="drawingName"
-                        type="text"
-                        class="form-control"
-                        data-cy="drawing-toolbox-file-name-input"
-                        :placeholder="`${t('draw_layer_label')}`"
-                        :disabled="!activeKmlLayer"
-                    />
-                </div>
+                        <label
+                            for="drawing-name"
+                            class="text-nowrap"
+                        >
+                            {{ t('file_name') }}
+                        </label>
+                        <input
+                            id="drawing-name"
+                            v-model="drawingName"
+                            type="text"
+                            class="form-control"
+                            data-cy="drawing-toolbox-file-name-input"
+                            :placeholder="`${t('draw_layer_label')}`"
+                            :disabled="!activeKmlLayer"
+                        />
+                    </div>
+                </GeoadminTooltip>
 
                 <div class="card-body position-relative container">
                     <div

packages/mapviewer/src/modules/i18n/locales/de.json

@@ -255,6 +255,7 @@
     "feedback_unsupported_format": "Dieser Dateityp wird leider nicht unterstützt. Bitte verwenden Sie eine .pdf, .zip, .jpg, .jpeg, .kml, .kmz oder .gpx Datei.",
     "field_required": "Dieses Feld ist erforderlich",
     "file_imported_success": "Datei erfolgreich importiert",
+    "file_imported_partially_out_of_bounds": "Die importierte Datei '{filename}' befindet sich teilweise außerhalb der Schweizer Grenzen. Einige Funktionalitäten stehen möglicherweise nicht zur Verfügung.",
     "file_is_not_kml": "Dieses File ist keine KML Datei. ",
     "file_name": "Zeichnungsname",
     "file_too_large": "Die Datei ist zu gross (maximal erlaubte Grösse: {maxFileSize}).",
@@ -629,10 +630,10 @@
     "time_hide": "Deaktivieren der Anzeige von Daten-Zeitständen.",
     "time_select_year": "Wählen Sie ein Jahr aus",
     "time_show": "Aktivieren der Anzeige von Daten-Zeitständen.",
-    "time_slider_legend_tippy_full_data": "Vollständige Daten",
-    "time_slider_legend_tippy_intro": "Der Zeitschieber zeigt verschiedene Farben an, je nachdem, ob die Karten Daten für das ausgewählte Jahr enthalten oder nicht.",
-    "time_slider_legend_tippy_no_data": "Keine Daten",
-    "time_slider_legend_tippy_partial_data": "Teilweise Daten",
+    "time_slider_legend_tooltip_full_data": "Vollständige Daten",
+    "time_slider_legend_tooltip_intro": "Der Zeitschieber zeigt verschiedene Farben an, je nachdem, ob die Karten Daten für das ausgewählte Jahr enthalten oder nicht.",
+    "time_slider_legend_tooltip_no_data": "Keine Daten",
+    "time_slider_legend_tooltip_partial_data": "Teilweise Daten",
     "time_slider_no_time_layer_active_url_warning": "Es ist nicht möglich, einen Zeitschieberegler hinzuzufügen, wenn keine aktiven Zeitkarten vorhanden sind",
     "title": "Titel",
     "tooltip": "Tooltip",

packages/mapviewer/src/modules/i18n/locales/en.json

@@ -255,6 +255,7 @@
     "feedback_unsupported_format": "This file format is not supported. Thanks for using another format for you attachment.",
     "field_required": "This field is required",
     "file_imported_success": "File successfully imported",
+    "file_imported_partially_out_of_bounds": "The imported file '{filename}' is partially outside the swiss boundaries. Some functionalities might not be available.",
     "file_is_not_kml": "The file is not a KML file.",
     "file_name": "Drawing name",
     "file_too_large": "The file is too large (max size allowed {maxFileSize}).",
@@ -629,10 +630,10 @@
     "time_hide": "Disable representation of data time stamps.",
     "time_select_year": "Select a year",
     "time_show": "Enable representation of data time stamps.",
-    "time_slider_legend_tippy_full_data": "Complete data",
-    "time_slider_legend_tippy_intro": "The time slider displays different colors depending on whether the maps have data for the selected year or not.",
-    "time_slider_legend_tippy_no_data": "No data.",
-    "time_slider_legend_tippy_partial_data": "Partial data",
+    "time_slider_legend_tooltip_full_data": "Complete data",
+    "time_slider_legend_tooltip_intro": "The time slider displays different colors depending on whether the maps have data for the selected year or not.",
+    "time_slider_legend_tooltip_no_data": "No data.",
+    "time_slider_legend_tooltip_partial_data": "Partial data",
     "time_slider_no_time_layer_active_url_warning": "It is not possible to add a time slider, when there is no active time map available",
     "title": "Title",
     "tooltip": "Tooltip",