Skip to content

Commit

Permalink
feat(geo): print - add map attribution under the map (#1670)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aziz-access
aziz-access committed May 24, 2024
1 parent 7483865 commit dcb3dda
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 54 deletions.
23 changes: 21 additions & 2 deletions packages/geo/src/lib/directions/shared/directions.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,10 @@ export class DirectionsService {

/** top | right | bottom | left */
const margins: [number, number, number, number] = [20, 10, 20, 10];
this.addAttribution(map, doc, margins);
const width = pageWidth - margins[3] - margins[1];
const height = pageHeight - margins[0] - margins[2];
const imageDimensions: [number, number] = [width, height];

const title = `${direction.title} (${formatDistance(
direction.distance
)}, ${formatDuration(direction.duration)})`;
Expand Down Expand Up @@ -114,6 +114,25 @@ export class DirectionsService {
return status$;
}

private addAttribution(
map: IgoMap,
doc: jsPDF,
margins: [number, number, number, number]
) {
const verticalSpacing: number = 5;
const attributionText: string = this.printService.getAttributionText(map);
if (attributionText) {
margins[2] += verticalSpacing;
const xPosition = margins[3];
const marginBottom = margins[2];
// calculate text position Y
const yPosition =
doc.internal.pageSize.height - marginBottom + verticalSpacing;
doc.setFontSize(10);
doc.text(attributionText, xPosition, yPosition);
}
}

private async setHTMLTableContent(
direction: Direction
): Promise<HTMLTableElement> {
Expand Down Expand Up @@ -160,7 +179,7 @@ export class DirectionsService {
for (let index = 0; index < matListItem.length; index++) {
const element = matListItem[index];
const icon = element.getElementsByTagName('mat-icon')[0] as HTMLElement;
const iconName = icon.getAttribute('data-mat-icon-name') as string;
const iconName = icon.innerText;
const found = iconsArray.some((el) => el.name === iconName);
if (!found) {
const iconCanvas = await html2canvas(icon, { scale: 3 });
Expand Down
120 changes: 68 additions & 52 deletions packages/geo/src/lib/print/shared/print.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,17 +147,14 @@ export class PrintService {
this.addComment(doc, options.comment, baseMargins, verticalSpacing);
}

if (options.showProjection === true || options.showScale === true) {
this.addProjScale(
doc,
map,
resolution,
options.showProjection,
options.showScale,
baseMargins,
verticalSpacing
);
}
this.handleFooter(
map,
doc,
options,
resolution,
verticalSpacing,
baseMargins
);

const width = pageWidth - baseMargins[3] - baseMargins[1];
const height = pageHeight - baseMargins[0] - baseMargins[2];
Expand Down Expand Up @@ -484,50 +481,82 @@ export class PrintService {
}

/**
* Add projection and/or scale to the document
* @param doc - pdf document
* Add attribution and/or (projection and/or scale) to the document
* @param map - Map of the app
* @param dpi - DPI resolution of the document
* @param projection - Bool to indicate if projection need to be added
* @param scale - Bool to indicate if scale need to be added
* @param doc - pdf document
* @param options - Print options
* @param resolution - cart resolution
* @param baseMargins - top | right | bottom | left
* @param verticalSpacing - calculate text position and map height
*/
private addProjScale(
doc: jsPDF,
private async handleFooter(
map: IgoMap,
dpi: number,
projection: boolean,
scale: boolean,
baseMargins: [number, number, number, number],
verticalSpacing: number
doc: jsPDF,
options: PrintOptions,
resolution: number,
verticalSpacing: number,
baseMargins: [number, number, number, number]
) {
// calculate map image height
baseMargins[2] += verticalSpacing;
const translate = this.languageService.translate;
const projScaleSize = 12;
let text: string = '';

const attributionText: string = this.getAttributionText(map);
if (attributionText) {
text += attributionText + '. ';
}
if (options.showProjection === true || options.showScale === true) {
text += this.getProjScale(map, options, resolution);
}

if (text) {
baseMargins[2] += verticalSpacing;
}

const xPosition = baseMargins[3];
const marginBottom = baseMargins[2];
// calculate text position Y
const yPosition =
doc.internal.pageSize.height - marginBottom + verticalSpacing;

this.addTextInPdfDoc(
doc,
text,
this.TEXTPDFFONT.commentFont,
this.TEXTPDFFONT.commentFontStyle,
this.TEXTPDFFONT.commentFontSize,
xPosition,
yPosition
);
}

getAttributionText(map: IgoMap): string {
const mapOverlayHtml = map.ol.getOverlayContainerStopEvent() as HTMLElement;
const htmlAttribution = mapOverlayHtml
.getElementsByClassName('ol-attribution')[0]
.cloneNode(true) as HTMLElement;
htmlAttribution.getElementsByTagName('button')[0].remove();
return htmlAttribution.innerText;
}

private getProjScale(
map: IgoMap,
options: PrintOptions,
dpi: number
): string {
const translate = this.languageService.translate;
let textProjScale: string = '';
if (projection === true) {
if (options.showProjection === true) {
const projText = translate.instant('igo.geo.printForm.projection');
textProjScale += projText + ': ' + map.projection;
}
if (scale === true) {
if (projection === true) {
if (options.showScale === true) {
if (options.showProjection === true) {
textProjScale += ' ';
}
const scaleText = translate.instant('igo.geo.printForm.scale');
const mapScale = map.viewController.getScale(dpi);
textProjScale += scaleText + ': ~ 1 / ' + formatScale(mapScale);
}
doc.setFont(this.TEXTPDFFONT.commentFont);
doc.setFontSize(projScaleSize);
doc.text(textProjScale, xPosition, yPosition);
return textProjScale;
}

/**
Expand Down Expand Up @@ -732,7 +761,6 @@ export class PrintService {
this.mapPrintExtent = map.viewController.getExtent('EPSG:3857');

this.resetOriginalMapSize(map, mapSize, viewResolution);

await this.drawMapControls(map, mapResultCanvas, legendPostion);

const mapStatus$$ = map.status$.subscribe((mapStatus: SubjectStatus) => {
Expand Down Expand Up @@ -884,8 +912,6 @@ export class PrintService {
.cloneNode(true) as HTMLElement;
// add North Direction to mapOverly
await this.addNorthDirection(mapOverlayHTML, position);
// add map Attribution designe to print
await this.addAttribution(mapOverlayHTML);

// set 'OverlayContainer' size to print size
mapOverlayHTML.style.width = canvas.width + 'px';
Expand All @@ -906,7 +932,12 @@ export class PrintService {
scale: 1,
backgroundColor: null,
allowTaint: true,
useCORS: true
useCORS: true,
ignoreElements: (element: Element) => {
return element instanceof HTMLElement
? element.className.includes('ol-attribution')
: false;
}
});

if (canvasOverlayHTML.width !== 0 && canvasOverlayHTML.height !== 0) {
Expand Down Expand Up @@ -941,21 +972,6 @@ export class PrintService {
mapOverlayHTML.appendChild(northDirection);
}

private async addAttribution(mapOverlayHTML: HTMLElement): Promise<void> {
const HTMLattribution =
mapOverlayHTML.getElementsByClassName('ol-attribution')[0];
const HTMLButton = HTMLattribution.getElementsByTagName('button')[0];
if (!HTMLButton) {
return null;
}
HTMLButton.setAttribute('data-html2canvas-ignore', 'true');
const olCollapsed: boolean =
HTMLattribution.classList.contains('ol-collapsed');
if (olCollapsed) {
HTMLattribution.classList.remove('ol-collapsed');
}
}

/**
* Download an image of the map with addition of informations
* @param map - Map of the app
Expand Down

0 comments on commit dcb3dda

Please sign in to comment.