From ace4e1ba1f28214d4073471cb9df7811b25d3118 Mon Sep 17 00:00:00 2001 From: Alexis Date: Thu, 11 Feb 2021 15:21:34 -0500 Subject: [PATCH 1/6] fix(print): subtitle newline image format fix --- packages/geo/src/lib/print/shared/print.service.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/geo/src/lib/print/shared/print.service.ts b/packages/geo/src/lib/print/shared/print.service.ts index f299aeaac2..4dfc5cdacb 100644 --- a/packages/geo/src/lib/print/shared/print.service.ts +++ b/packages/geo/src/lib/print/shared/print.service.ts @@ -562,6 +562,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 +594,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'; From 64ebf6221693592ddf68cc209076555b4d086446 Mon Sep 17 00:00:00 2001 From: Alexis Date: Thu, 8 Apr 2021 09:23:36 -0400 Subject: [PATCH 2/6] fix(print): graphic_scale+attributions-printpdf --- packages/geo/src/lib/map/shared/map.ts | 4 +++ .../geo/src/lib/print/shared/print.service.ts | 32 ++++++++++++++++--- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/geo/src/lib/map/shared/map.ts b/packages/geo/src/lib/map/shared/map.ts index a0c8702341..ee0fe53110 100644 --- a/packages/geo/src/lib/map/shared/map.ts +++ b/packages/geo/src/lib/map/shared/map.ts @@ -118,6 +118,10 @@ export class IgoMap { this.buffer = new Overlay(this); } + setattribution(){ + this.options.controls.attribution = true; + } + setTarget(id: string) { this.ol.setTarget(id); if (id !== undefined) { diff --git a/packages/geo/src/lib/print/shared/print.service.ts b/packages/geo/src/lib/print/shared/print.service.ts index 4dfc5cdacb..c75f7cbbf6 100644 --- a/packages/geo/src/lib/print/shared/print.service.ts +++ b/packages/geo/src/lib/print/shared/print.service.ts @@ -441,9 +441,31 @@ export class PrintService { let timeout; map.ol.once('rendercomplete', (event: any) => { - const canvases = event.target - .getViewport() - .getElementsByTagName('canvas'); + const canvases = event.target.getViewport().getElementsByTagName('canvas'); + // 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) + html2canvas(mapOverlayHTML, { + scale: 1, + backgroundColor: null, + allowTaint: true, + useCORS: true, + }).then( e => { + canvasOverlayHTML = e; + }); + const mapStatus$$ = map.status$.subscribe((mapStatus: SubjectStatus) => { clearTimeout(timeout); @@ -472,6 +494,7 @@ export class PrintService { 'print' ); } + this.addCanvas(doc, canvasOverlayHTML, margins); // this adds scales and attributions this.renderMap(map, mapSize, extent); status$.next(status); }); @@ -500,6 +523,7 @@ export class PrintService { 'print' ); } + this.addCanvas(doc, canvasOverlayHTML, margins); // this adds scales and attributions this.renderMap(map, mapSize, extent); status$.next(status); }, 200); @@ -563,7 +587,7 @@ export class PrintService { // Add height for title if defined height = title !== '' ? height + 30 : height; // Add height for title if defined - height = subtitle !== '' ? height + 30 : height; + 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; From 266c2a47539c27227e3d8c201608364b1f13309c Mon Sep 17 00:00:00 2001 From: Alexis Date: Tue, 13 Apr 2021 14:03:09 -0400 Subject: [PATCH 3/6] fix(print): correction erreur --- demo/src/app/geo/print/print.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/demo/src/app/geo/print/print.component.ts b/demo/src/app/geo/print/print.component.ts index f4783f6631..71f172f558 100644 --- a/demo/src/app/geo/print/print.component.ts +++ b/demo/src/app/geo/print/print.component.ts @@ -12,7 +12,8 @@ export class AppPrintComponent { public map = new IgoMap({ controls: { attribution: { - collapsed: true + collapsed: false, + //collapsible: false; } } }); @@ -35,7 +36,8 @@ export class AppPrintComponent { layer: 'carte_gouv_qc_ro', matrixSet: 'EPSG_3857', version: '1.3.0', - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', + attributions: "© Gouvernement du Québec / IGO2" } }) .subscribe(l => this.map.addLayer(l)); From 09a840447f4ac4d8de181c064a8c9708c553bc6e Mon Sep 17 00:00:00 2001 From: Alexis Date: Wed, 21 Apr 2021 16:21:22 -0400 Subject: [PATCH 4/6] fix pour le probleme de desynchro --- .../geo/src/lib/print/shared/print.service.ts | 80 +++++++++++-------- 1 file changed, 48 insertions(+), 32 deletions(-) diff --git a/packages/geo/src/lib/print/shared/print.service.ts b/packages/geo/src/lib/print/shared/print.service.ts index c75f7cbbf6..6a4e1a109f 100644 --- a/packages/geo/src/lib/print/shared/print.service.ts +++ b/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 + ) { + 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 ) { 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,32 +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'); - // 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) - html2canvas(mapOverlayHTML, { - scale: 1, - backgroundColor: null, - allowTaint: true, - useCORS: true, - }).then( e => { - canvasOverlayHTML = e; - }); - const mapStatus$$ = map.status$.subscribe((mapStatus: SubjectStatus) => { clearTimeout(timeout); @@ -494,7 +516,6 @@ export class PrintService { 'print' ); } - this.addCanvas(doc, canvasOverlayHTML, margins); // this adds scales and attributions this.renderMap(map, mapSize, extent); status$.next(status); }); @@ -523,7 +544,6 @@ export class PrintService { 'print' ); } - this.addCanvas(doc, canvasOverlayHTML, margins); // this adds scales and attributions this.renderMap(map, mapSize, extent); status$.next(status); }, 200); @@ -534,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 From c13f5caf5617a262b05e2390503db89ae3a88b73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Barbeau?= Date: Thu, 22 Apr 2021 09:47:39 -0400 Subject: [PATCH 5/6] Update map.ts --- packages/geo/src/lib/map/shared/map.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/geo/src/lib/map/shared/map.ts b/packages/geo/src/lib/map/shared/map.ts index ee0fe53110..a0c8702341 100644 --- a/packages/geo/src/lib/map/shared/map.ts +++ b/packages/geo/src/lib/map/shared/map.ts @@ -118,10 +118,6 @@ export class IgoMap { this.buffer = new Overlay(this); } - setattribution(){ - this.options.controls.attribution = true; - } - setTarget(id: string) { this.ol.setTarget(id); if (id !== undefined) { From 4a5d4d39d283449c01d8f012d80725c6ee9d9f02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Barbeau?= Date: Thu, 22 Apr 2021 09:49:11 -0400 Subject: [PATCH 6/6] Update print.component.ts --- demo/src/app/geo/print/print.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demo/src/app/geo/print/print.component.ts b/demo/src/app/geo/print/print.component.ts index 71f172f558..7b7f29f190 100644 --- a/demo/src/app/geo/print/print.component.ts +++ b/demo/src/app/geo/print/print.component.ts @@ -12,8 +12,7 @@ export class AppPrintComponent { public map = new IgoMap({ controls: { attribution: { - collapsed: false, - //collapsible: false; + collapsed: false } } });