Merge pull request #797 from geoadmin/fix-PB-360-gpx-print-style

PB-360: Update gpx line style and adjust line stroke width for printing.

src/api/print.api.js

@@ -10,19 +10,21 @@ import axios from 'axios'
 import { API_BASE_URL, API_SERVICES_BASE_URL, WMS_BASE_URL } from '@/config'
 import i18n from '@/modules/i18n'
 import log from '@/utils/logging'
+import { adjustWidth } from '@/utils/styleUtils'
 
-const PRINTING_RESOLUTION = 96 // dpi
 const PRINTING_DEFAULT_POLL_INTERVAL = 2000 // interval between each polling of the printing job status (ms)
 const PRINTING_DEFAULT_POLL_TIMEOUT = 600000 // ms (10 minutes)
 
 const SERVICE_PRINT_URL = `${API_SERVICES_BASE_URL}print3/print/mapviewer`
 
 class GeoAdminCustomizer extends BaseCustomizer {
     /** @param {string[]} layerIDsToExclude List of layer names to exclude from the print */
-    constructor(layerIDsToExclude) {
+    constructor(layerIDsToExclude, printResolution) {
         super()
         this.layerIDsToExclude = layerIDsToExclude
+        this.printResolution = printResolution
         this.layerFilter = this.layerFilter.bind(this)
+        this.line = this.line.bind(this)
     }
 
     /**
@@ -67,6 +69,9 @@ class GeoAdminCustomizer extends BaseCustomizer {
         if (symbolizer?.strokeDashstyle === '8') {
             symbolizer.strokeDashstyle = 'dash'
         }
+        if (symbolizer.strokeWidth) {
+            symbolizer.strokeWidth = adjustWidth(symbolizer.strokeWidth, this.printResolution)
+        }
     }
 }
 
@@ -225,6 +230,7 @@ export class PrintError extends Error {
  *   the grid is to be printed (it can otherwise be null). Default is `null`
  * @param {String[]} [config.excludedLayerIDs=[]] List of the IDs of OpenLayers layer to exclude
  *   from the print. Default is `[]`
+ * @param {String | null} [config.dpi=null] The DPI of the printed map. Default is `null`
  * @param {String | null} [config.outputFilename=null] Output file name, without extension. When
  *   null, let the server decide. Default is `null`
  */
@@ -240,6 +246,7 @@ async function transformOlMapToPrintParams(olMap, config) {
         printGrid = false,
         projection = null,
         excludedLayerIDs = [],
+        dpi = null,
         outputFilename = null,
     } = config
 
@@ -261,17 +268,20 @@ async function transformOlMapToPrintParams(olMap, config) {
     if (printGrid && !projection) {
         throw new PrintError('Missing projection to print the grid')
     }
+    if (!dpi) {
+        throw new PrintError('Missing DPI for printing')
+    }
 
-    const customizer = new GeoAdminCustomizer(excludedLayerIDs)
+    const customizer = new GeoAdminCustomizer(excludedLayerIDs, dpi)
 
     const attributionsOneLine = attributions.length > 0 ? `© ${attributions.join(', ')}` : ''
 
     try {
         const encodedMap = await encoder.encodeMap({
             map: olMap,
             scale,
-            printResolution: PRINTING_RESOLUTION,
-            dpi: PRINTING_RESOLUTION,
+            printResolution: dpi,
+            dpi: dpi,
             customizer: customizer,
         })
         if (printGrid) {
@@ -285,7 +295,7 @@ async function transformOlMapToPrintParams(olMap, config) {
                 styles: [''],
                 customParams: {
                     TRANSPARENT: true,
-                    MAP_RESOLUTION: PRINTING_RESOLUTION,
+                    MAP_RESOLUTION: dpi,
                 },
             })
         }
@@ -345,6 +355,7 @@ async function transformOlMapToPrintParams(olMap, config) {
  *   the print. Default is `[]`
  * @param {String | null} [config.outputFilename=null] Output file name, without extension. When
  *   null, let the server decide. Default is `null`
+ * @param {String | null} [config.dpi=null] The DPI of the printed map. Default is `null`
  * @returns {Promise<MFPReportResponse>} A job running on our printing backend (needs to be polled
  *   using {@link waitForPrintJobCompletion} to wait until its completion)
  */
@@ -361,6 +372,7 @@ export async function createPrintJob(map, config) {
         projection = null,
         excludedLayerIDs = [],
         outputFilename = null,
+        dpi = null,
     } = config
     try {
         const printingSpec = await transformOlMapToPrintParams(map, {
@@ -375,6 +387,7 @@ export async function createPrintJob(map, config) {
             projection,
             excludedLayerIDs,
             outputFilename,
+            dpi,
         })
         log.debug('Starting print for spec', printingSpec)
         return await requestReport(SERVICE_PRINT_URL, printingSpec)

src/modules/map/components/openlayers/utils/usePrint.composable.js

@@ -82,6 +82,7 @@ export function usePrint(map) {
                 printGrid: printGrid,
                 projection: store.state.position.projection,
                 excludedLayerIDs: [PRINT_AREA_LAYER_ID],
+                dpi: store.getters.selectedDPI,
             })
             currentJobReference.value = printJob.ref
             const result = await waitForPrintJobCompletion(printJob)

src/store/modules/print.store.js

@@ -19,6 +19,12 @@ export default {
                 height: mapAttributes?.clientParams?.height?.default,
             }
         },
+        selectedDPI(state) {
+            const mapAttributes = state.selectedLayout.attributes.find(
+                (attribute) => attribute.name === 'map'
+            )
+            return mapAttributes?.clientInfo?.maxDPI
+        },
     },
     actions: {
         async loadPrintLayouts({ commit }, { dispatcher }) {

src/utils/styleUtils.js

@@ -41,6 +41,8 @@ export const dashedRedStroke = new Stroke({
     lineDash: [8],
 })
 
+export const gpxStrokeStyle = new Stroke({ width: 1.5, color: hexToRgba(red, 1) })
+
 export const pointStyle = {
     radius: 7,
     stroke: new Stroke({
@@ -59,6 +61,7 @@ export const redCircleStyle = new Circle({
     fill: new Fill({
         color: hexToRgba(red),
     }),
+    stroke: gpxStrokeStyle,
 })
 /** Style for grabbing points when editing a feature */
 export const sketchPointStyle = new Circle({
@@ -68,8 +71,8 @@ export const sketchPointStyle = new Circle({
 
 export const gpxStyles = {
     Point: new Style({ image: redCircleStyle }),
-    LineString: new Style({ stroke: redStroke, fill: redFill }),
-    MultiLineString: new Style({ stroke: redStroke, fill: redFill }),
+    LineString: new Style({ stroke: gpxStrokeStyle, fill: redFill }),
+    MultiLineString: new Style({ stroke: gpxStrokeStyle, fill: redFill }),
 }
 
 export const geolocationPointStyle = new Style({
@@ -132,3 +135,14 @@ export const highlightPointStyle = new Style({
         stroke: highlightedStroke,
     }),
 })
+
+// Change a width according to the change of DPI (from the old geoadmin)
+// Originally introduced here https://github.com/geoadmin/mf-geoadmin3/pull/3280
+export function adjustWidth(width, dpi) {
+    if (!width) {
+        return
+    }
+    // 90 is choosen to compensate the difference DPI between the WMTS or WMS and the print DPI used.
+    // The number is from the old geoadmin (see the link above)
+    return (width * 90) / dpi
+}