Skip to content

Commit

Permalink
fix(print): Print options fix Issue #189 (#238)
Browse files Browse the repository at this point in the history
* Issue #189 Print options fix

* Issue #189 Removed alert

* Issue #189 Ajusted margins

* Removed '!important' and unused modules
  • Loading branch information
ameliebernier authored and mbarbeau committed Dec 6, 2018
1 parent a79637c commit 6f8921e
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 40 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
"file-saver": "^1.3.8",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-alpha.12",
"jspdf": "^1.3.5",
"jspdf": "^1.4.1",
"jszip": "^3.1.5",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
Expand Down
38 changes: 21 additions & 17 deletions projects/geo/src/lib/print/print-form/print-form.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@
</div>

<div class="igo-input-container">
<mat-checkbox class="horizontal-left right-padding" formControlName="showProjection">
{{'igo.geo.printForm.showProjection' | translate}}
</mat-checkbox>
<mat-checkbox class="horizontal-left right-padding" formControlName="showScale">
{{'igo.geo.printForm.showScale' | translate}}
</mat-checkbox>
<mat-checkbox class="horizontal-left right-padding" formControlName="showLegend">
{{'igo.geo.printForm.showLegend' | translate}}
</mat-checkbox>
<mat-checkbox class="horizontal-left right-padding" formControlName="doZipFile" [style.display]="isPrintService ? 'none' : 'inline'" >
{{'igo.geo.printForm.doZipFile' | translate}}
</mat-checkbox>
<mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="showProjection">
{{'igo.geo.printForm.showProjection' | translate}}
</mat-slide-toggle>
<mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="showScale">
{{'igo.geo.printForm.showScale' | translate}}
</mat-slide-toggle>
<mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="showLegend">
{{'igo.geo.printForm.showLegend' | translate}}
</mat-slide-toggle>
<mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="doZipFile" [style.display]="isPrintService ? 'none' : ''" >
{{'igo.geo.printForm.doZipFile' | translate}}
</mat-slide-toggle>
</div>

<div class="igo-input-container">
Expand Down Expand Up @@ -82,11 +82,15 @@
</div>

<div class="igo-input-container" [style.display]="isPrintService ? 'block' : 'none'">
<mat-radio-group formControlName="orientation" class="horizontal">
<mat-radio-button *ngFor="let orientation of orientations | keyvalue " [value]="orientation.key">
{{('igo.geo.printForm.' + orientation.value) | translate}}
</mat-radio-button>
</mat-radio-group>
<mat-form-field>
<mat-select
formControlName="orientation"
placeholder="{{'igo.geo.printForm.orientation' | translate}}">
<mat-option *ngFor="let orientation of orientations | keyvalue " [value]="orientation.key">
{{('igo.geo.printForm.' + orientation.value) | translate}}
</mat-option>
</mat-select>
</mat-form-field>
</div>

<div class="igo-form-button-group print-button-top-padding">
Expand Down
19 changes: 8 additions & 11 deletions projects/geo/src/lib/print/print-form/print-form.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,21 @@ mat-form-field {
width: 100%;
}

mat-checkbox.horizontal-left {
mat-slide-toggle.horizontal-left {
text-align: left;
@include mobile {
text-align: inherit;
}
}

mat-checkbox.horizontal-left span {
padding: 0 8px;
mat-slide-toggle ::ng-deep .mat-slide-toggle-content {
font-size: 100%;
}

mat-checkbox, mat-radio-button {
padding-right: 20px;
padding-bottom: 10px;
.print-option {
display: block;
margin-right: 10px;
margin-bottom: 15px;
}

.print-button-top-padding {
Expand All @@ -30,8 +31,4 @@ mat-checkbox, mat-radio-button {

.igo-form-button-group {
text-align: center;
}

mat-checkbox ::ng-deep label.mat-checkbox-layout {
padding-bottom: 10px;
}
}
6 changes: 2 additions & 4 deletions projects/geo/src/lib/print/print.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import {
MatOptionModule,
MatInputModule,
MatFormFieldModule,
MatRadioModule,
MatCheckboxModule
MatSlideToggleModule
} from '@angular/material';

import { IgoLanguageModule } from '@igo2/core';
Expand All @@ -31,8 +30,7 @@ import { PrintService } from './shared/print.service';
MatOptionModule,
MatInputModule,
MatFormFieldModule,
MatRadioModule,
MatCheckboxModule,
MatSlideToggleModule,
IgoLanguageModule,
IgoKeyValueModule
],
Expand Down
17 changes: 10 additions & 7 deletions projects/geo/src/lib/print/shared/print.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export class PrintService {
(status: SubjectStatus) => {
if (status === SubjectStatus.Done) {
if (options.showLegend === true) {
this.addLegend(doc, map);
this.addLegend(doc, map, margins);
} else {
this.saveDoc(doc);
}
Expand Down Expand Up @@ -236,8 +236,10 @@ export class PrintService {
/**
Add the legend to the document
@param doc - Pdf document where legend will be added
@param map - Map of the app
@param margins - Page margins
*/
private addLegend(doc: jsPDF, map: IgoMap) {
private addLegend(doc: jsPDF, map: IgoMap, margins: Array<number>) {
const that = this;
// Get html code for the legend
const width = doc.internal.pageSize.width;
Expand All @@ -256,7 +258,7 @@ export class PrintService {

imgData = canvas.toDataURL('image/png');
doc.addPage();
const imageSize = this.getImageSizeToFitPdf(doc, canvas);
const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins);
doc.addImage(imgData, 'PNG', 10, position, imageSize[0], imageSize[1]);
that.saveDoc(doc);
div.parentNode.removeChild(div); // remove temp div (IE style)
Expand All @@ -280,7 +282,7 @@ export class PrintService {


if (image !== undefined) {
const imageSize = this.getImageSizeToFitPdf(doc, canvas);
const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins);
doc.addImage(image, 'JPEG', margins[3], margins[0], imageSize[0], imageSize[1]);
doc.rect(margins[3], margins[0], imageSize[0], imageSize[1]);
}
Expand Down Expand Up @@ -558,11 +560,12 @@ export class PrintService {
Calculate the best Image size to fit in pdf
@param doc - Pdf Document
@param canvas - Canvas of image
@param margins - Page margins
*/
private getImageSizeToFitPdf(doc, canvas) {
private getImageSizeToFitPdf(doc, canvas, margins) {
// Define variable to calculate best size to fit in one page
const pageHeight = doc.internal.pageSize.getHeight() - 20; // -20 to let margin work great
const pageWidth = doc.internal.pageSize.getWidth() - 20; // -20 to let margin work great
const pageHeight = doc.internal.pageSize.getHeight() - (margins[0] + margins[2]);
const pageWidth = doc.internal.pageSize.getWidth() - (margins[1] + margins[3]);
const canHeight = canvas.height;
const canWidth = canvas.width;
const heightRatio = canHeight / pageHeight;
Expand Down
1 change: 1 addition & 0 deletions projects/geo/src/locale/en.geo.json
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@
"outputFormat": "Output format",
"paperFormat": "Paper format",
"imageFormat": "Image format",
"orientation" : "Orientation",
"landscape": "Landscape",
"portrait": "Portrait",
"projection": "Projection",
Expand Down
1 change: 1 addition & 0 deletions projects/geo/src/locale/fr.geo.json
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@
"outputFormat": "Format de sortie",
"paperFormat": "Format du papier",
"imageFormat": "Format de l'image",
"orientation" : "Orientation",
"landscape": "Paysage",
"portrait": "Portrait",
"printBtn": "Imprimer",
Expand Down

0 comments on commit 6f8921e

Please sign in to comment.