Skip to content

Commit

Permalink
Merge pull request #1059 from geoadmin/feat-PB-303-use-icon-size-from…
Browse files Browse the repository at this point in the history 
…-backend

PB-303: use icon size from backend
  • Loading branch information
@LukasJoss
LukasJoss committed Sep 10, 2024
2 parents f3ef410 + 3804696 commit d1cb44c
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 104 deletions.
2 changes: 1 addition & 1 deletion src/api/features/EditableFeature.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
28 changes: 15 additions & 13 deletions src/api/icon.api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,23 @@ 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],
}

/** 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
)

/**
Expand Down Expand Up @@ -107,13 +101,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) */
Expand All @@ -139,6 +135,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)
Expand Down Expand Up @@ -225,7 +226,8 @@ async function loadIconsForIconSet(iconSet) {
rawIcon.url,
rawIcon.template_url,
iconSet.name,
rawIcon.anchor
rawIcon.anchor,
rawIcon.size
)
)
} catch (error) {
Expand Down
3 changes: 1 addition & 2 deletions src/modules/infobox/components/styling/FeatureStyleEdit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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', {
Expand Down
140 changes: 84 additions & 56 deletions tests/cypress/fixtures/service-icons/set-default.fixture.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
31 changes: 0 additions & 31 deletions tests/cypress/support/drawing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'))
})
})
2 changes: 1 addition & 1 deletion tests/cypress/tests-e2e/drawing.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down

0 comments on commit d1cb44c

Please sign in to comment.