From 0c86cb0e6d359fcabb6bc6535f6c7c56f9e63767 Mon Sep 17 00:00:00 2001 From: Lukas Joss Date: Thu, 5 Sep 2024 17:13:58 +0200 Subject: [PATCH 1/5] PB-303: Add reading of icon size from api --- src/api/icon.api.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/api/icon.api.js b/src/api/icon.api.js index 5716a8fae..a13237bfa 100644 --- a/src/api/icon.api.js +++ b/src/api/icon.api.js @@ -107,13 +107,15 @@ export class DrawingIcon { * belong to one icon set) * @param {Number[]} anchor Offset to apply to this icon when placed on a coordinate ([x,y] * format) + * @param {Number[]} size Size of the icons in pixel assuming a scaling factor of 1 */ - constructor(name, imageURL, imageTemplateURL, iconSetName, anchor) { + constructor(name, imageURL, imageTemplateURL, iconSetName, anchor, size) { this._name = name this._imageURL = imageURL this._imageTemplateURL = imageTemplateURL this._iconSetName = iconSetName this._anchor = anchor + this._size = size } /** @returns {String} Name of this icon in the backend (lower cased) */ @@ -139,6 +141,11 @@ export class DrawingIcon { return this._anchor } + /** @returns {Number[]} Size of the icons in pixel assuming a scaling factor of 1 */ + get size() { + return this._size + } + /** * @returns {String} Name of the {@link DrawingIconSet} in which belongs this icon (an icon can * only belong to one icon set) @@ -225,7 +232,8 @@ async function loadIconsForIconSet(iconSet) { rawIcon.url, rawIcon.template_url, iconSet.name, - rawIcon.anchor + rawIcon.anchor, + rawIcon.size ) ) } catch (error) { From b348c1ba494035d23539e5870db87d87a90911f1 Mon Sep 17 00:00:00 2001 From: Lukas Joss Date: Fri, 6 Sep 2024 17:48:02 +0200 Subject: [PATCH 2/5] PB-303: Replace hard-coded icon size with metadata of icon --- src/api/features/EditableFeature.class.js | 2 +- src/api/icon.api.js | 10 +--------- .../infobox/components/styling/FeatureStyleEdit.vue | 3 +-- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/api/features/EditableFeature.class.js b/src/api/features/EditableFeature.class.js index 7b0d85cb3..989eac4c9 100644 --- a/src/api/features/EditableFeature.class.js +++ b/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 } diff --git a/src/api/icon.api.js b/src/api/icon.api.js index a13237bfa..e2013b9f0 100644 --- a/src/api/icon.api.js +++ b/src/api/icon.api.js @@ -4,15 +4,7 @@ import { getViewerDedicatedServicesBaseUrl } from '@/config/baseUrl.config' import { calculateTextOffset, MEDIUM, RED } from '@/utils/featureStyleUtils' import log from '@/utils/logging' -/** - * Default Icon parameters for the URL. - * - * NOTE: The size should match the received size for the scale from the backend. It is needed to - * avoid race condition when exporting/saving KML. Openlayer requires the size to compute the - * scale. - * - * TODO: take the default size from the backend icon API - */ +/** Default Icon parameters for the URL. */ export const DEFAULT_ICON_URL_PARAMS = { scale: 1, size: [48, 48], diff --git a/src/modules/infobox/components/styling/FeatureStyleEdit.vue b/src/modules/infobox/components/styling/FeatureStyleEdit.vue index ce1fe053f..c3dfd0855 100644 --- a/src/modules/infobox/components/styling/FeatureStyleEdit.vue +++ b/src/modules/infobox/components/styling/FeatureStyleEdit.vue @@ -6,7 +6,6 @@ import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue' import { useStore } from 'vuex' import EditableFeature, { EditableFeatureTypes } from '@/api/features/EditableFeature.class' -import { DEFAULT_ICON_URL_PARAMS } from '@/api/icon.api' 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' @@ -158,7 +157,7 @@ function updateTextOffset() { feature.value.textSize.textScale, feature.value.iconSize.iconScale, feature.value.icon.anchor, - DEFAULT_ICON_URL_PARAMS.size //TODO: PB-303 Use icon size from backend + feature.value.icon.size ) store.dispatch('changeFeatureTextOffset', { From 9dc8e4cd64a83caba9f6db6122dbfd3d59106653 Mon Sep 17 00:00:00 2001 From: Lukas Joss Date: Fri, 6 Sep 2024 17:49:59 +0200 Subject: [PATCH 3/5] PB-303: Remove cypress test necessary due to hard-coded icon size --- tests/cypress/support/drawing.js | 31 --------------------------- tests/cypress/tests-e2e/drawing.cy.js | 2 +- 2 files changed, 1 insertion(+), 32 deletions(-) diff --git a/tests/cypress/support/drawing.js b/tests/cypress/support/drawing.js index cf297537b..7efaef1a2 100644 --- a/tests/cypress/support/drawing.js +++ b/tests/cypress/support/drawing.js @@ -222,34 +222,3 @@ export function kmlMetadataTemplate(data) { } return metadata } - -/** - * Wait until all defaults red icons have been loaded - * - * This wait is required when checking the KML XML content, because openlayer requires the icon size - * from the icon request in order to compute the icon scale in KML, if the icon is not loaded when - * saving the KML, openlayer uses a default size of 64 pixel which defer from our icon size of 48 - * pixel. - * - * So before doing an action that would change the icon size, we need to make sure that all icons - * have been already loaded to avoid any race condition. - * - * This wait is only needed in cypress as in real life the save has a debouncing of at least 2 - * seconds which ensure that we have the icons. - */ -Cypress.Commands.add('waitOnAllIconsDefault', () => { - cy.get('@icon-set-default').then((interception) => { - cy.wait(Array(interception.response.body.items.length).fill('@icon-default')) - }) -}) - -/** - * Wait until all defaults green icons have been loaded - * - * @see waitOnAllIconsDefault for more infos - */ -Cypress.Commands.add('waitOnAllIconsDefaultGreen', () => { - cy.get('@icon-set-default').then((interception) => { - cy.wait(Array(interception.response.body.items.length).fill('@icon-default-green')) - }) -}) diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js index a3b0090b0..5f2489810 100644 --- a/tests/cypress/tests-e2e/drawing.cy.js +++ b/tests/cypress/tests-e2e/drawing.cy.js @@ -122,7 +122,7 @@ describe('Drawing module tests', () => { `[data-cy="drawing-style-marker-popup"] [data-cy="drawing-style-color-select-box"] [data-cy="color-selector-${GREEN.name}"]:visible` ).click() // it should load all icons with the green color - cy.waitOnAllIconsDefaultGreen() + cy.wait('@icon-default-green') // the color of the marker already placed on the map must switch to green cy.wait('@update-kml') From 46dd3bd300e4b6c034271a4e70a5013a5b268c9a Mon Sep 17 00:00:00 2001 From: Lukas Joss Date: Mon, 9 Sep 2024 15:45:33 +0200 Subject: [PATCH 4/5] PB-303: Update kml test file for cypress --- .../service-icons/set-default.fixture.json | 140 +++++++++++------- 1 file changed, 84 insertions(+), 56 deletions(-) diff --git a/tests/cypress/fixtures/service-icons/set-default.fixture.json b/tests/cypress/fixtures/service-icons/set-default.fixture.json index b45839395..50e6819ee 100644 --- a/tests/cypress/fixtures/service-icons/set-default.fixture.json +++ b/tests/cypress/fixtures/service-icons/set-default.fixture.json @@ -4,170 +4,198 @@ "icon_set": "default", "name": "001-marker", "url": "http://localhost:8080/api/icons/sets/default/icons/001-marker-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "002-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/002-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "003-square", "url": "http://localhost:8080/api/icons/sets/default/icons/003-square-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "004-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/004-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "005-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/005-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "006-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/006-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "007-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/007-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "008-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/008-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "009-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/009-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "010-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/010-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "011-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/011-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "012-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/012-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "013-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/013-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "014-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/014-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "015-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/015-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "016-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/016-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "017-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/017-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "018-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/018-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "019-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/019-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "020-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/020-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "021-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/021-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "022-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/022-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "023-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/023-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "024-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/024-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "025-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/025-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "026-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/026-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "027-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/027-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "028-placeholder", "url": "http://localhost:8080/api/icons/sets/default/icons/028-placeholder-255,0,0.png", - "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png" - }, + "template_url": "http://localhost:8080/api/icons/sets/{icon_set_name}/icons/{icon_name}@{icon_scale}-{r},{g},{b}.png", + "size": [48, 48] + }, { "icon_set": "default", "name": "029-placeholder", From 38046961425d80ed784fcc97a2020679fdb3462e Mon Sep 17 00:00:00 2001 From: Lukas Joss Date: Tue, 10 Sep 2024 17:39:13 +0200 Subject: [PATCH 5/5] PB-303: Icon default size is no longer exported --- src/api/icon.api.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/api/icon.api.js b/src/api/icon.api.js index e2013b9f0..7a906c615 100644 --- a/src/api/icon.api.js +++ b/src/api/icon.api.js @@ -7,18 +7,20 @@ import log from '@/utils/logging' /** Default Icon parameters for the URL. */ export const DEFAULT_ICON_URL_PARAMS = { scale: 1, - size: [48, 48], } /** Default offset of title for any feature */ export const DEFAULT_TITLE_OFFSET = [0, 0] +/** Default size of icon for any feature */ +const DEFAULT_ICON_SIZE = [48, 48] + /** Default offset of title for the default marker */ export const DEFAULT_MARKER_TITLE_OFFSET = calculateTextOffset( MEDIUM.textScale, MEDIUM.iconScale, [0, 0.875], - DEFAULT_ICON_URL_PARAMS.size + DEFAULT_ICON_SIZE ) /**