New Release v1.47.0 - #minor

package.json

@@ -73,6 +73,7 @@
         "geographiclib-geodesic": "^2.1.1",
         "hammerjs": "^2.0.8",
         "jquery": "^3.7.1",
+        "jszip": "^3.10.1",
         "liang-barsky": "^1.0.5",
         "lodash": "^4.17.21",
         "maplibre-gl": "^4.6.0",

scripts/generate-i18n-files.js

@@ -50,6 +50,13 @@ sheets.spreadsheets.values.get(
                     })
                 }
             })
+            // ordering all keys alphabetically
+            Object.keys(translations).forEach((lang) => {
+                const translationForLang = translations[lang]
+                translations[lang] = Object.keys(translationForLang)
+                    .sort()
+                    .reduce((acc, key) => ({ ...acc, [key]: translationForLang[key] }), {})
+            })
             // we now export each lang as a separate JSON file in our i18n modules' folder
             langByIndex.forEach((lang, index) => {
                 if (index > 0) {

src/App.vue

@@ -21,8 +21,12 @@ const i18n = useI18n()
 const dispatcher = { dispatcher: 'App.vue' }
 
 let debouncedOnResize
-
-const errorText = computed(() => store.state.ui.errorText)
+const error = computed(() => {
+    if (store.state.ui.errors.size > 0) {
+        return store.state.ui.errors.values().next().value
+    }
+    return null
+})
 const warning = computed(() => {
     if (store.state.ui.warnings.size > 0) {
         return store.state.ui.warnings.values().next().value
@@ -62,11 +66,13 @@ function refreshPageTitle() {
     >
         <router-view />
         <ErrorWindow
-            v-if="errorText"
+            v-if="error"
             title="error"
-            @close="store.dispatch('setErrorText', { errorText: null, ...dispatcher })"
+            @close="store.dispatch('removeError', { error, ...dispatcher })"
         >
-            <div>{{ i18n.t(errorText) }}</div>
+            <div>
+                {{ i18n.t(error.msg, error.params) }}
+            </div>
         </ErrorWindow>
         <WarningWindow
             v-if="warning"

src/api/__tests__/print.api.spec.js

@@ -2,6 +2,8 @@ import { expect } from 'chai'
 import { describe, it } from 'vitest'
 
 import { PrintLayout, PrintLayoutAttribute } from '@/api/print.api.js'
+import { PRINT_DPI_COMPENSATION } from '@/config/print.config'
+import { adjustWidth } from '@/utils/styleUtils'
 
 describe('Print API unit tests', () => {
     describe('PrintLayoutAttribute tests', () => {
@@ -61,5 +63,22 @@ describe('Print API unit tests', () => {
             )
             expect(scalesInMapAttr.scales).to.eql(scales)
         })
+        it('calculate the width correctly with the "adjustWidth" function', () => {
+            // invalid values should return 0
+            expect(adjustWidth(100, 'invalid value')).to.eql(0)
+            expect(adjustWidth(100, null)).to.eql(0)
+            expect(adjustWidth(100, undefined)).to.eql(0)
+            expect(adjustWidth(null, 254)).to.eql(0)
+            expect(adjustWidth(undefined, 254)).to.eql(0)
+            expect(adjustWidth('invalid value', 254)).to.eql(0)
+            // the dpi parameter should be a positive number
+            expect(adjustWidth(100, 0)).to.eql(0)
+            expect(adjustWidth(100, -15)).to.eql(0)
+            // checking with a slight margin for float rounding errors.
+            expect(adjustWidth(100, 254)).to.be.closeTo(
+                (100 * PRINT_DPI_COMPENSATION) / 254,
+                1 / 254
+            )
+        })
     })
 })

src/api/features/EditableFeature.class.js

@@ -157,7 +157,7 @@ export default class EditableFeature extends SelectableFeature {
                   crossOrigin: 'Anonymous',
                   anchor: this.icon.anchor,
                   scale: this.iconSizeScale,
-                  size: DEFAULT_ICON_URL_PARAMS.size,
+                  size: this.icon.size,
               })
             : null
     }

src/api/files.api.js

@@ -301,7 +301,7 @@ export function loadKmlMetadata(kmlLayer) {
  * Loads the XML data from the file of a given KML layer, using the KML file URL of the layer.
  *
  * @param {KMLLayer} kmlLayer
- * @returns {Promise<String>}
+ * @returns {Promise<ArrayBuffer>}
  */
 export function loadKmlData(kmlLayer) {
     return new Promise((resolve, reject) => {
@@ -313,7 +313,9 @@ export function loadKmlData(kmlLayer) {
                 new Error(`No file URL defined in this KML layer, cannot load data ${kmlLayer.id}`)
             )
         }
-        getFileFromUrl(kmlLayer.kmlFileUrl)
+        // The file might be a KMZ file, which is a zip archive. Reading zip archive as text
+        // is asking for trouble therefore we use ArrayBuffer
+        getFileFromUrl(kmlLayer.kmlFileUrl, { responseType: 'arraybuffer' })
             .then((response) => {
                 if (response.status === 200 && response.data) {
                     resolve(response.data)
@@ -339,16 +341,18 @@ export function loadKmlData(kmlLayer) {
  *
  * @param {string} url URL to fetch
  * @param {Number} [options.timeout] How long should the call wait before timing out
+ * @param {string} [options.responseType] Type of data that the server will respond with. Options
+ *   are 'arraybuffer', 'document', 'json', 'text', 'stream'. Default is `json`
  * @returns {Promise<AxiosResponse<any, any>>}
  */
 export async function getFileFromUrl(url, options = {}) {
-    const { timeout = null } = options
+    const { timeout = null, responseType = null } = options
     if (/^https?:\/\/localhost/.test(url) || isInternalUrl(url)) {
         // don't go through proxy if it is on localhost or the internal server
-        return axios.get(url, { timeout })
+        return axios.get(url, { timeout, responseType })
     } else if (url.startsWith('http://')) {
         // HTTP request goes through the proxy
-        return axios.get(proxifyUrl(url), { timeout })
+        return axios.get(proxifyUrl(url), { timeout, responseType })
     }
 
     // For other urls we need to check if they support CORS
@@ -370,8 +374,8 @@ export async function getFileFromUrl(url, options = {}) {
 
     if (supportCORS) {
         // Server support CORS
-        return axios.get(url, { timeout })
+        return axios.get(url, { timeout, responseType })
     }
     // server don't support CORS use proxy
-    return axios.get(proxifyUrl(url), { timeout })
+    return axios.get(proxifyUrl(url), { timeout, responseType })
 }