fix(print): graphic scale + attribution in print pdf

demo/src/app/geo/print/print.component.ts

@@ -12,7 +12,7 @@ export class AppPrintComponent {
   public map = new IgoMap({
     controls: {
       attribution: {
-        collapsed: true
+        collapsed: false
       }
     }
   });
@@ -35,7 +35,8 @@ export class AppPrintComponent {
           layer: 'carte_gouv_qc_ro',
           matrixSet: 'EPSG_3857',
           version: '1.3.0',
-          crossOrigin: 'anonymous'
+          crossOrigin: 'anonymous',
+          attributions: "© <a href='http://www.droitauteur.gouv.qc.ca/copyright.php' target='_blank'><img src='https://geoegl.msp.gouv.qc.ca/gouvouvert/public/images/quebec/gouv_qc_logo.png' width='64' height='14'>Gouvernement du Québec</a> / <a href='https://www.igouverte.org/' target='_blank'>IGO2</a>"
         }
       })
       .subscribe(l => this.map.addLayer(l));

packages/geo/src/lib/print/shared/print.service.ts

@@ -85,6 +85,7 @@ export class PrintService {
     this.addMap(doc, map, resolution, size, margins).subscribe(
       async (status: SubjectStatus) => {
         if (status === SubjectStatus.Done) {
+          await this.addScale(doc, map, margins);
           if (options.showLegend === true) {
             await this.addLegend(doc, map, margins, resolution);
           } else {
@@ -396,6 +397,49 @@ export class PrintService {
     }
   }
 
+  /**
+   * Add scale and attributions on the map on the document
+   * @param  doc - Pdf document where legend will be added
+   * @param  map - Map of the app
+   * @param  margins - Page margins
+   */
+  private async addScale(
+    doc: jsPDF,
+    map: IgoMap,
+    margins: Array<number>
+    ) {
+      const mapSize = map.ol.getSize();
+      const extent = map.ol.getView().calculateExtent(mapSize);
+      // Get the scale and attribution
+      // we use cloneNode to modify the nodes to print without modifying it on the page, using deep:true to get children
+      let canvasOverlayHTML;
+      const mapOverlayHTML = map.ol.getOverlayContainerStopEvent();
+      // Remove the UI buttons from the nodes
+      const OverlayHTMLButton = mapOverlayHTML.getElementsByTagName('button');
+      for (const but of OverlayHTMLButton) {
+        but.setAttribute('data-html2canvas-ignore', 'true');
+      }
+      // Change the styles of hyperlink in the printed version
+      // Transform the Overlay into a canvas
+      // scale is necessary to make it in google chrome
+      // background as null because otherwise it is white and cover the map
+      // allowtaint is to allow rendering images in the attributions
+      // useCORS: true pour permettre de renderer les images (ne marche pas en local)
+      const canvas = await html2canvas(mapOverlayHTML, {
+        scale: 1,
+        backgroundColor: null,
+        allowTaint: true,
+        useCORS: true,
+      }).then( e => {
+        canvasOverlayHTML = e;
+      });
+      this.addCanvas(doc, canvasOverlayHTML, margins); // this adds scales and attributions
+ }
+
+  defineNbFileToProcess(nbFileToProcess) {
+    this.nbFileToProcess = nbFileToProcess;
+  }
+
   private timeout(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
@@ -406,8 +450,9 @@ export class PrintService {
     margins: Array<number>
   ) {
     let image;
-
-    image = canvas.toDataURL('image/png');
+    if (canvas) {
+      image = canvas.toDataURL('image/png');
+    }
 
     if (image !== undefined) {
       const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins);
@@ -440,10 +485,9 @@ export class PrintService {
     const heightPixels = Math.round((size[1] * resolution) / 25.4);
 
     let timeout;
+
     map.ol.once('rendercomplete', (event: any) => {
-      const canvases = event.target
-        .getViewport()
-        .getElementsByTagName('canvas');
+      const canvases = event.target.getViewport().getElementsByTagName('canvas');
       const mapStatus$$ = map.status$.subscribe((mapStatus: SubjectStatus) => {
         clearTimeout(timeout);
 
@@ -510,10 +554,6 @@ export class PrintService {
     return status$;
   }
 
-  defineNbFileToProcess(nbFileToProcess) {
-    this.nbFileToProcess = nbFileToProcess;
-  }
-
   /**
    * Download an image of the map with addition of informations
    * @param  map - Map of the app
@@ -562,6 +602,8 @@ export class PrintService {
       const commentWidth = newContext.measureText(comment).width;
       // Add height for title if defined
       height = title !== '' ? height + 30 : height;
+      // Add height for title if defined
+      height = subtitle !== '' ? height + 30 : height;
       // Add height for projection or scale (same line) if defined
       height = projection !== false || scale !== false ? height + 30 : height;
       const positionHProjScale = height - 10;
@@ -592,9 +634,9 @@ export class PrintService {
         // Set font for subtitle
         // Adjust according to title length
         newContext.font = '26px Calibri';
-        positionHCanvas = 30;
+        positionHCanvas = 60;
         newContext.textAlign = 'center';
-        newContext.fillText(subtitle, width / 2, 20, width * 0.9);
+        newContext.fillText(subtitle, width / 2, 50, width * 0.9);
       }
       // Set font for next section
       newContext.font = '20px Calibri';