PB-111: Fix print spec send to the print service

package.json

@@ -39,7 +39,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/vue-fontawesome": "^3.0.6",
         "@geoblocks/cesium-compass": "^0.5.0",
-        "@geoblocks/mapfishprint": "^0.2.7",
+        "@geoblocks/mapfishprint": "github:geoblocks/mapfishprint#4c47539f391af3c641f9455efe0d31ebdc145cfe",
         "@geoblocks/ol-maplibre-layer": "^0.1.3",
         "@ivanv/vue-collapse-transition": "^1.0.2",
         "@mapbox/togeojson": "^0.16.2",

src/api/print.api.js

@@ -16,6 +16,31 @@ const PRINTING_DEFAULT_POLL_INTERVAL = 2000 // interval between each polling of
 const PRINTING_DEFAULT_POLL_TIMEOUT = 600000 // ms (10 minutes)
 
 const SERVICE_PRINT_URL = `${API_SERVICES_BASE_URL}print3/print/default`
+
+class GeoAdminCustomizer extends BaseCustomizer {
+    /** @param {string[]} layerIDsToExclude List of layer names to exclude from the print */
+    constructor(layerIDsToExclude) {
+        super()
+        this.layerIDsToExclude = layerIDsToExclude
+        this.layerFilter = this.layerFilter.bind(this)
+    }
+
+    /**
+     * Filter out layers that should not be printed. This function is automatically called when the
+     * encodeMap is called using this customizer.
+     *
+     * @param {State} layerState
+     * @returns {boolean} True to convert this layer, false to skip it
+     */
+    layerFilter(layerState) {
+        if (this.layerIDsToExclude.includes(layerState.layer.get('id'))) {
+            return false
+        }
+        // Call parent layerFilter method for other layers
+        return super.layerFilter(layerState)
+    }
+}
+
 /**
  * Tool to transform an OpenLayers map into a "spec" for MapFishPrint3 (meaning a big JSON) that can
  * then be used as request body for printing.
@@ -169,6 +194,8 @@ export class PrintError extends Error {
  *   Default is `false`
  * @param {CoordinateSystem} [config.projection=null] The projection used by the map, necessary when
  *   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 `[]`
  */
 async function transformOlMapToPrintParams(olMap, config) {
     const {
@@ -181,6 +208,7 @@ async function transformOlMapToPrintParams(olMap, config) {
         lang = null,
         printGrid = false,
         projection = null,
+        excludedLayerIDs = [],
     } = config
 
     if (!qrCodeUrl) {
@@ -202,6 +230,8 @@ async function transformOlMapToPrintParams(olMap, config) {
         throw new PrintError('Missing projection to print the grid')
     }
 
+    const customizer = new GeoAdminCustomizer(excludedLayerIDs)
+
     const attributionsOneLine = attributions.length > 0 ? `© ${attributions.join(', ')}` : ''
 
     try {
@@ -210,7 +240,7 @@ async function transformOlMapToPrintParams(olMap, config) {
             scale,
             printResolution: PRINTING_RESOLUTION,
             dpi: PRINTING_RESOLUTION,
-            customizer: new BaseCustomizer([0, 0, 10000, 10000]),
+            customizer: customizer,
         })
         if (printGrid) {
             encodedMap.layers.unshift({
@@ -239,7 +269,7 @@ async function transformOlMapToPrintParams(olMap, config) {
             layout: layout.name,
         }
         if (layersWithLegends.length > 0) {
-            spec.attributes.legends = {
+            spec.attributes.legend = {
                 name: i18n.global.t('legend'),
                 classes: layersWithLegends.map((layer) => {
                     return {
@@ -277,6 +307,8 @@ async function transformOlMapToPrintParams(olMap, config) {
  *   Default is `false`
  * @param {CoordinateSystem} [config.projection=null] The projection used by the map, necessary when
  *   the grid is to be printed (it can otherwise be null). Default is `null`
+ * @param {String[]} [config.excludedLayerIDs=[]] List of IDs of OpenLayers layer to exclude from
+ *   the print. Default is `[]`
  * @returns {Promise<MFPReportResponse>} A job running on our printing backend (needs to be polled
  *   using {@link waitForPrintJobCompletion} to wait until its completion)
  */
@@ -291,6 +323,7 @@ export async function createPrintJob(map, config) {
         lang = null,
         printGrid = false,
         projection = null,
+        excludedLayerIDs = [],
     } = config
     try {
         const printingSpec = await transformOlMapToPrintParams(map, {
@@ -303,6 +336,7 @@ export async function createPrintJob(map, config) {
             lang,
             printGrid,
             projection,
+            excludedLayerIDs,
         })
         log.debug('Starting print for spec', printingSpec)
         return await requestReport(SERVICE_PRINT_URL, printingSpec)

src/modules/map/components/openlayers/utils/printConstants.js

@@ -0,0 +1,6 @@
+/**
+ * The name of the OpenLayer layer that is used to render the print area.
+ *
+ * @type {String}
+ */
+export const PRINT_AREA_LAYER_ID = 'printAreaLayer'

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

@@ -6,6 +6,8 @@ import { getGenerateQRCodeUrl } from '@/api/qrcode.api.js'
 import { createShortLink } from '@/api/shortlink.api.js'
 import log from '@/utils/logging'
 
+import { PRINT_AREA_LAYER_ID } from './printConstants'
+
 // const dispatcher = { dispatcher: 'usePrint.composable' }
 
 /** @enum */
@@ -59,7 +61,8 @@ export function usePrint(map) {
                     : [],
                 lang: store.state.i18n.lang,
                 printGrid: printGrid,
-                projection: store.state.map.projection,
+                projection: store.state.position.projection,
+                excludedLayerIDs: [PRINT_AREA_LAYER_ID],
             })
             currentJobReference.value = printJob.ref
             const result = await waitForPrintJobCompletion(printJob)

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

@@ -7,6 +7,8 @@ import { Fill, Style } from 'ol/style'
 import { computed, watch } from 'vue'
 import { useStore } from 'vuex'
 
+import { PRINT_AREA_LAYER_ID } from './printConstants'
+
 const dispatcher = { dispatcher: 'print-area-renderer.composable' }
 
 function createWorldPolygon() {
@@ -36,6 +38,7 @@ function createWorldPolygon() {
             features: [worldPolygon],
         }),
         style: transparentStyle,
+        id: PRINT_AREA_LAYER_ID,
     })
     return vectorLayer
 }

src/modules/menu/components/debug/DebugToolbar.vue

@@ -47,6 +47,7 @@ function toggleShowLayerExtents() {
         <div class="position-relative d-flex">
             <div
                 class="debug-tools-header p-2 bg-danger-subtle border-end border-danger rounded-start-1"
+                data-cy="debug-tools-header"
                 @click="showDebugTool = !showDebugTool"
             >
                 <FontAwesomeIcon icon="gear" title="Debug tools" />
@@ -55,13 +56,14 @@ function toggleShowLayerExtents() {
                 <div class="card-body">
                     <h5 class="text-decoration-underline">Map projection</h5>
                     <div class="my-1 d-flex align-content-center">
-                        <strong class="me-2 align-self-center">
+                        <strong class="me-2 align-self-center" data-cy="current-projection">
                             {{ currentProjection.epsg }}
                         </strong>
                         <button
                             class="toolbox-button align-self-center"
                             type="button"
                             :class="{ active: isMercatorTheCurrentProjection }"
+                            data-cy="toggle-projection-button"
                             @click="toggleProjection"
                         >
                             <FontAwesomeIcon :icon="['fas', 'earth-europe']" />

src/modules/menu/components/print/MenuPrintSection.vue

@@ -112,11 +112,16 @@ defineExpose({
         @click:header="togglePrintMenu"
         @open-menu-section="(id) => emits('openMenuSection', id)"
     >
-        <div class="p-2 d-grid gap-2 menu-print-settings mx-4">
-            <label for="print-layout-selector " class="col-form-label fw-bold me-2">{{
+        <div class="p-2 d-grid gap-2 menu-print-settings mx-4" data-cy="menu-print-form">
+            <label for="print-layout-selector" class="col-form-label fw-bold me-2">{{
                 i18n.t('print_layout')
             }}</label>
-            <select id="print-layout-selector " v-model="selectedLayoutName" class="form-select">
+            <select
+                id="print-layout-selector"
+                v-model="selectedLayoutName"
+                class="form-select"
+                data-cy="print-layout-selector"
+            >
                 <option
                     v-for="layout in availablePrintLayouts"
                     :key="layout.name"
@@ -128,18 +133,24 @@ defineExpose({
                     {{ layout.name.replace(/^\d+\.\s*/, '') }}
                 </option>
             </select>
-            <label for="print-scale-selector " class="col-form-label fw-bold me-2">{{
+            <label for="print-scale-selector" class="col-form-label fw-bold me-2">{{
                 i18n.t('print_scale')
             }}</label>
-            <select id="print-scale-selector " v-model="selectedScale" class="form-select">
+            <select
+                id="print-scale-selector"
+                v-model="selectedScale"
+                class="form-select"
+                data-cy="print-scale-selector"
+            >
                 <option v-for="scale in scales" :key="scale" :value="scale">
-                    1:{{ formatThousand(scale) }}
+                    {{ '1:' + formatThousand(scale) }}
                 </option>
             </select>
             <div class="form-check">
                 <input
                     id="checkboxLegend"
                     v-model="printLegend"
+                    data-cy="checkboxLegend"
                     class="form-check-input"
                     type="checkbox"
                 />
@@ -149,6 +160,7 @@ defineExpose({
                 <input
                     id="checkboxGrid"
                     v-model="printGrid"
+                    data-cy="checkboxGrid"
                     class="form-check-input"
                     type="checkbox"
                 />
@@ -159,11 +171,18 @@ defineExpose({
                     v-if="printStatus === PrintStatus.PRINTING"
                     type="button"
                     class="btn btn-danger w-100 text-white"
+                    data-cy="abort-print-button"
                     @click="abortCurrentJob"
                 >
                     {{ i18n.t('abort') }}
                 </button>
-                <button v-else type="button" class="btn btn-light w-100" @click="printMap">
+                <button
+                    v-else
+                    type="button"
+                    class="btn btn-light w-100"
+                    data-cy="print-map-button"
+                    @click="printMap"
+                >
                     {{ i18n.t('print_action') }}
                 </button>
                 <!-- TODO: manage failing print job-->