PB-2027: only request icon in LARGE size, and resize them with the scale

icons were doubly scaled because the scale was applied on top of a smaller icon URL. Reverting back to what was the use-case before the TS migration, which is that icons are always requested in the same size to the backend, and are scaled on the map (could we get rid of the scaling on the backend?)

Author: pakb

packages/viewer/src/api/icon.api.ts

@@ -3,12 +3,7 @@ import axios from 'axios'
 import { fromString } from 'ol/color'
 
 import { getViewerDedicatedServicesBaseUrl } from '@/config/baseUrl.config'
-import {
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    LARGE,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { type FeatureStyleColor, LARGE, RED } from '@/utils/featureStyleUtils'
 
 /**
  * Generate an icon URL from its template. If no iconScale is given, the default scale 1 will be
@@ -17,19 +12,18 @@ import {
  *
  * @returns A full URL to this icon on the service-icons backend
  */
-export function generateIconURL(
-    icon: DrawingIcon,
-    iconColor: FeatureStyleColor = RED,
-    iconSize: FeatureStyleSize = LARGE
-) {
+export function generateIconURL(icon: DrawingIcon, iconColor: FeatureStyleColor = RED) {
     const rgb = fromString(iconColor.fill)
-    return icon.imageTemplateURL
-        .replace('{icon_set_name}', icon.iconSetName)
-        .replace('{icon_name}', icon.name)
-        .replace('{icon_scale}', iconSize.iconScale + 'x')
-        .replace('{r}', `${rgb[0]}`)
-        .replace('{g}', `${rgb[1]}`)
-        .replace('{b}', `${rgb[2]}`)
+    return (
+        icon.imageTemplateURL
+            .replace('{icon_set_name}', icon.iconSetName)
+            .replace('{icon_name}', icon.name)
+            // we always use the LARGE icon scale and resize the icon with the <IconStyle><scale> property in KMLs
+            .replace('{icon_scale}', LARGE.iconScale + 'x')
+            .replace('{r}', `${rgb[0]}`)
+            .replace('{g}', `${rgb[1]}`)
+            .replace('{b}', `${rgb[2]}`)
+    )
 }
 
 /**

packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts

@@ -8,13 +8,7 @@ import { generateIconURL } from '@/api/icon.api'
 import { DrawingSaveState } from '@/store/modules/drawing/types/DrawingSaveState.enum'
 import debounceSaveDrawing from '@/store/modules/drawing/utils/debounceSaveDrawing'
 import useProfileStore from '@/store/modules/profile'
-import {
-    calculateTextOffset,
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    MEDIUM,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { calculateTextOffset } from '@/utils/featureStyleUtils'
 
 export default function updateCurrentDrawingFeature(
     this: DrawingStore,
@@ -24,21 +18,24 @@ export default function updateCurrentDrawingFeature(
     if (this.feature.current) {
         this.save.state = DrawingSaveState.UnsavedChanges
 
-        let needIconUrlRefresh = false
-
         Object.assign(this.feature.current, valuesToUpdate)
 
         // keeping values as preferred, if present, so that the next time the user draws, the values are used
         if (valuesToUpdate.iconSize) {
             this.edit.preferred.size = valuesToUpdate.iconSize
-            needIconUrlRefresh = true
         }
         if (valuesToUpdate.textSize) {
             this.edit.preferred.size = valuesToUpdate.textSize
         }
         if (valuesToUpdate.fillColor) {
             this.edit.preferred.color = valuesToUpdate.fillColor
-            needIconUrlRefresh = true
+            // refreshing the icon color if present
+            if (this.feature.current.icon) {
+                this.feature.current.icon.imageURL = generateIconURL(
+                    this.feature.current.icon,
+                    valuesToUpdate.fillColor
+                )
+            }
         }
         if (valuesToUpdate.textColor) {
             this.edit.preferred.color = valuesToUpdate.textColor
@@ -62,18 +59,6 @@ export default function updateCurrentDrawingFeature(
             }
         }
 
-        if (this.feature.current.icon && needIconUrlRefresh) {
-            const newIconSize: FeatureStyleSize =
-                valuesToUpdate.iconSize ?? this.feature.current.iconSize ?? MEDIUM
-            const newIconColor: FeatureStyleColor =
-                valuesToUpdate.fillColor ?? this.feature.current.fillColor ?? RED
-            this.feature.current.icon.imageURL = generateIconURL(
-                this.feature.current.icon,
-                newIconColor,
-                newIconSize
-            )
-        }
-
         const profileStore = useProfileStore()
         // updating the profile feature if the currently drawn feature is the profile feature
         if (profileStore.feature?.id === this.feature.current.id) {

packages/viewer/src/utils/__tests__/kmlUtils.spec.ts

@@ -12,7 +12,7 @@ import type { EditableFeature } from '@/api/features.api'
 import { type DrawingIconSet, generateIconURL } from '@/api/icon.api'
 import { getServiceKmlBaseUrl } from '@/config/baseUrl.config'
 import { fakeIconSets } from '@/utils/__tests__/legacyKmlUtils.spec'
-import { BLUE, EXTRA_LARGE } from '@/utils/featureStyleUtils'
+import { BLUE } from '@/utils/featureStyleUtils'
 import {
     getIcon,
     getKmlExtent,
@@ -350,7 +350,7 @@ describe('Test KML utils', () => {
                 'https://fake.image.url/api/icons/sets/default/icons/001-marker@1x-255,0,0.png'
             )
         })
-        it('get icon with standard arguments from the set with scale and color', () => {
+        it('get icon with standard arguments from the set with color', () => {
             const icon = getIcon(
                 {
                     set: 'default',
@@ -363,8 +363,8 @@ describe('Test KML utils', () => {
             expect(icon).toBeDefined()
             expect(icon!.name).to.be.equal('001-marker')
             expect(icon!.iconSetName).to.be.equal('default')
-            expect(generateIconURL(icon!, BLUE, EXTRA_LARGE)).to.be.equal(
-                'https://fake.image.url/api/icons/sets/default/icons/001-marker@1.25x-0,0,255.png'
+            expect(generateIconURL(icon!, BLUE)).to.be.equal(
+                'https://fake.image.url/api/icons/sets/default/icons/001-marker@1x-0,0,255.png'
             )
         })
         it('get icon with standard arguments from the babs set', () => {

packages/viewer/src/utils/featureStyleUtils.ts

@@ -398,13 +398,10 @@ export function geoadminStyleFunction(
     let image: Icon | undefined
     if (editableFeature?.icon) {
         image = new Icon({
-            src: generateIconURL(
-                editableFeature.icon,
-                editableFeature.fillColor,
-                editableFeature.iconSize
-            ),
+            src: generateIconURL(editableFeature.icon, editableFeature.fillColor),
             crossOrigin: 'Anonymous',
             anchor: editableFeature.icon.anchor,
+            scale: editableFeature.iconSize?.iconScale,
         })
     }
     const styles = [

packages/viewer/src/utils/kmlUtils.ts

@@ -1,11 +1,10 @@
 import type { CoordinateSystem, FlatExtent } from '@swissgeo/coordinates'
+import { WGS84 } from '@swissgeo/coordinates'
 import type { KMLLayer } from '@swissgeo/layers'
+import { KMLStyle } from '@swissgeo/layers'
 import type { Geometry } from 'ol/geom'
 import type { Type as GeometryType } from 'ol/geom/Geometry'
 import type { Size } from 'ol/size'
-
-import { WGS84 } from '@swissgeo/coordinates'
-import { KMLStyle } from '@swissgeo/layers'
 import log, { LogPreDefinedColor } from '@swissgeo/log'
 import { kml as kmlToGeoJSON } from '@tmcw/togeojson'
 import { booleanValid } from '@turf/turf'
@@ -23,7 +22,6 @@ import IconStyle from 'ol/style/Icon'
 import Style from 'ol/style/Style'
 
 import type { EditableFeature } from '@/api/features.api'
-
 import { EditableFeatureTypes, extractOlFeatureCoordinates } from '@/api/features.api'
 import { proxifyUrl } from '@/api/file-proxy.api'
 import { type DrawingIcon, type DrawingIconSet, generateIconURL } from '@/api/icon.api'
@@ -554,7 +552,7 @@ export function getEditableFeatureFromKmlFeature(
         })
         const image = style.getImage()
         if (image instanceof IconStyle) {
-            image.setSrc(generateIconURL(icon, fillColor, iconSize))
+            image.setSrc(generateIconURL(icon, fillColor))
         }
     }