Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #189 Print options fix #238

Merged
merged 4 commits into from
Dec 6, 2018
Merged

Issue #189 Print options fix #238

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7e90de7
Issue #189 Print options fix
ameliebernier Nov 23, 2018
4b2c710
Issue #189 Removed alert
ameliebernier Nov 23, 2018
5e3600d
Issue #189 Ajusted margins
ameliebernier Nov 26, 2018
7a756d7
Removed '!important' and unused modules
ameliebernier Dec 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
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
View file
Open in desktop
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
23 changes: 12 additions & 11 deletions projects/geo/src/lib/print/print-form/print-form.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,25 @@ 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 {
padding-right: 10px;
padding-top: 5px;
padding-bottom: 20px;
}

mat-checkbox, mat-radio-button {
padding-right: 20px;
padding-bottom: 10px;
mat-slide-toggle ::ng-deep span {
font-size: 100% !important;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try to avoid using the 'important' keyword

}

.print-option {
display: block;
}

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

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

mat-checkbox ::ng-deep label.mat-checkbox-layout {
padding-bottom: 10px;
}
}
4 changes: 3 additions & 1 deletion projects/geo/src/lib/print/print.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
MatInputModule,
MatFormFieldModule,
MatRadioModule,
MatCheckboxModule
MatCheckboxModule,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that the MatCheckboxModule and MatRadioModule modules are no longer useful

MatSlideToggleModule
} from '@angular/material';

import { IgoLanguageModule } from '@igo2/core';
Expand All @@ -33,6 +34,7 @@ import { PrintService } from './shared/print.service';
MatFormFieldModule,
MatRadioModule,
MatCheckboxModule,
MatSlideToggleModule,
IgoLanguageModule,
IgoKeyValueModule
],
Expand Down
19 changes: 12 additions & 7 deletions projects/geo/src/lib/print/shared/print.service.ts
View file
Open in desktop
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) {
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 @@ -340,6 +342,8 @@ export class PrintService {
try {
this.addCanvas(doc, canvas, size, margins);
} catch (err) {
alert('2' + err.toString());
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this intended or you forgot to remove it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Forgot, just removed it

console.log(err);
status = SubjectStatus.Error;
this.messageService.error(
this.languageService.translate.instant('igo.geo.printForm.corsErrorMessageBody'),
Expand Down Expand Up @@ -558,11 +562,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
View file
Open in desktop
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
View file
Open in desktop
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