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

feat(geo): add splitTextToSize to optimise long comment on more lines #1193

Merged
merged 6 commits into from
Mar 22, 2023
Merged

feat(geo): add splitTextToSize to optimise long comment on more lines #1193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d218e9
feat(geo): add splitTextToSize to optimise long comment on more lines
aziz-access Mar 13, 2023
a839cf1
test pdf print
aziz-access Mar 15, 2023
625981d
test print 2
aziz-access Mar 15, 2023
85eecc1
adjust comment and add max lenth
aziz-access Mar 17, 2023
38237e6
set up title and sub title margin top
aziz-access Mar 20, 2023
752cac1
change comment length if pdf dimensions change
aziz-access Mar 20, 2023
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
13 changes: 11 additions & 2 deletions packages/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 @@ -5,6 +5,9 @@
matInput
formControlName="title"
placeholder="{{'igo.geo.printForm.title' | translate}}">
<mat-error *ngIf="titleField.errors?.maxlength">{{'igo.geo.formValidation.maxLength' | translate: {
column: 'igo.geo.printForm.title' | translate,
value: 130 } }}</mat-error>
</mat-form-field>
</div>
<div class="igo-input-container">
Expand All @@ -13,6 +16,9 @@
matInput
formControlName="subtitle"
placeholder="{{'igo.geo.printForm.subtitle' | translate}}">
<mat-error *ngIf="subtitleField.errors?.maxlength">{{'igo.geo.formValidation.maxLength' | translate: {
column: 'igo.geo.printForm.subtitle' | translate,
value: 120 } }}</mat-error>
</mat-form-field>
</div>
<div class="igo-input-container">
Expand All @@ -21,6 +27,9 @@
matInput
formControlName="comment"
placeholder="{{'igo.geo.printForm.comment' | translate}}">
<mat-error *ngIf="commentField.errors?.maxlength">{{'igo.geo.formValidation.maxLength' | translate: {
column: 'igo.geo.printForm.comment' | translate,
value: maxLength } }}</mat-error>
</mat-form-field>
</div>

Expand Down Expand Up @@ -74,7 +83,7 @@

<div class="igo-input-container" [style.display]="isPrintService ? 'block' : 'none'">
<mat-form-field>
<mat-select
<mat-select (selectionChange)="changeCommentLength()"
formControlName="paperFormat"
placeholder="{{'igo.geo.printForm.paperFormat' | translate}}">
<mat-option *ngFor="let paperFormat of paperFormats | keyvalue " [value]="paperFormat.key">
Expand Down Expand Up @@ -110,7 +119,7 @@

<div class="igo-input-container" [style.display]="isPrintService ? 'block' : 'none'">
<mat-form-field>
<mat-select
<mat-select (selectionChange)="changeCommentLength()"
formControlName="orientation"
placeholder="{{'igo.geo.printForm.orientation' | translate}}">
<mat-option *ngFor="let orientation of orientations | keyvalue " [value]="orientation.key">
Expand Down
50 changes: 47 additions & 3 deletions packages/geo/src/lib/print/print-form/print-form.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,11 +200,13 @@ export class PrintFormComponent implements OnInit {

@Output() submit: EventEmitter<PrintOptions> = new EventEmitter();

maxLength: number = 180;

constructor(private formBuilder: UntypedFormBuilder) {
this.form = this.formBuilder.group({
title: ['', []],
subtitle: ['', []],
comment: ['', []],
title: ['', [Validators.minLength(0), Validators.maxLength(130)]],
subtitle: ['', [Validators.minLength(0), Validators.maxLength(120)]],
comment: ['', [Validators.minLength(0), Validators.maxLength(this.maxLength)]],
outputFormat: ['', [Validators.required]],
paperFormat: ['', [Validators.required]],
imageFormat: [ '', [Validators.required]],
Expand Down Expand Up @@ -232,8 +234,50 @@ export class PrintFormComponent implements OnInit {
toggleImageSaveProp() {
if (this.outputFormatField.value === 'Image') {
this.isPrintService = false;
this.commentField.clearValidators();
this.commentField.updateValueAndValidity();
} else {
this.isPrintService = true;
}
}

changeCommentLength() {
switch (this.paperFormat) {
case PrintPaperFormat.A0:
// A0, landscape, length 900 | A0, portrait, comment length: 600
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 900 : 600;
break;
case PrintPaperFormat.A1:
// A1, landscape, length 600 | A1, portrait, length 400;
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 600 : 400;
break;
case PrintPaperFormat.A2:
// A2, landscape, length 400 | A2, portrait, length 300;
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 400 : 300;
break;
case PrintPaperFormat.A3:
// A3, landscape, length 300 | A3, portrait, length 200;
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 300 : 200;
break;
case PrintPaperFormat.A4:
// A4, landscape length 200 | A4, portrait length 120;
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 200 : 100;
break;
case PrintPaperFormat.A5:
// A5, landscape length 120 | A5, portrait length 80;
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 120 : 80;
break;
case PrintPaperFormat.Letter:
// lettre, landscape, 180 | lettre, portrait, 140
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 180 : 140;
break;
default:
// legal, landscape, 200 | legal, portrait, 140
this.maxLength = (this.orientation === PrintOrientation.landscape) ? 200 : 140;
break;
}

this.commentField.setValidators([Validators.maxLength(this.maxLength)]​);
this.commentField.updateValueAndValidity();
}
}
39 changes: 25 additions & 14 deletions packages/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 @@ -20,6 +20,7 @@ import { getLayersLegends } from '../../layer/utils/outputLegend';

import { PrintOptions, TextPdfSizeAndMargin } from './print.interface';
import GeoPdfPlugin from './geopdf';
import { PrintPaperFormat } from './print.type';

declare global {
interface Navigator {
Expand All @@ -43,7 +44,7 @@ export class PrintService {
subtitleFontStyle: 'bold',
commentFont: 'courier',
commentFontStyle: 'normal',
commentFontSize: 16
commentFontSize: 12
};

constructor(
Expand Down Expand Up @@ -82,9 +83,14 @@ export class PrintService {
let titleSizes: TextPdfSizeAndMargin;
let subtitleSizes: TextPdfSizeAndMargin;

// if paper format A1 or A0 add margin top
if ((options.title !== '' || options.subtitle) &&
(paperFormat === PrintPaperFormat.A1 || paperFormat === PrintPaperFormat.A0)) {
margins[0] += 10;
}
// PDF title
if (options.title !== undefined ) {
const fontSizeInPt = Math.round(2 * (height + 145) * 0.05) / 2; //calculate the fontSize title from the page height.
const fontSizeInPt = Math.round(2 * (height + 145) * 0.05) / 2; //calculate the fontSize title from the page height.
if (options.title !== undefined && options.title !== '') {
titleSizes = this.getTextPdfObjectSizeAndMarg(options.title,
margins,
this.TEXTPDFFONT.titleFont,
Expand All @@ -101,15 +107,14 @@ export class PrintService {
margins[0]);

margins[0] = titleSizes.height + margins[0]; // cumulative margin top for next elem to place in pdf doc

}

// PDF subtitle
if (options.subtitle !== undefined) {
if (options.subtitle !== undefined && options.subtitle !== '') {
subtitleSizes = this.getTextPdfObjectSizeAndMarg(options.subtitle,
margins,
this.TEXTPDFFONT.subtitleFont,
titleSizes.fontSize * 0.7, // 70% size of title
(options.title !== '') ? titleSizes.fontSize * 0.7 : fontSizeInPt * 0.7, // 70% size of title
this.TEXTPDFFONT.subtitleFontStyle,
doc);

Expand All @@ -134,7 +139,7 @@ export class PrintService {
options.showScale
);
}
if (options.comment !== '') {
if (options.comment !== undefined && options.comment !== '') {
this.addComment(doc, options.comment);
}

Expand Down Expand Up @@ -377,15 +382,16 @@ export class PrintService {
* * @param comment - Comment to add in the document
*/
private addComment(doc: jsPDF, comment: string) {
const commentMarginLeft = 20; //margin left and bottom is fix
const commentMarginBottom = 5;
const commentMarginLeft = 10; //margin left and bottom is fix
const commentMarginBottom = 10;
const marginTop = doc.internal.pageSize.height - commentMarginBottom;
this. addTextInPdfDoc(doc,comment,
this.TEXTPDFFONT.commentFont,
this.TEXTPDFFONT.commentFontStyle,
this.TEXTPDFFONT.commentFontSize,
commentMarginLeft,
marginTop
marginTop,
true
);
}

Expand All @@ -395,10 +401,15 @@ export class PrintService {
textFontStyle: string,
textFontSize: number,
textMarginLeft: number,
textMarginTop: number)
textMarginTop: number,
isComment: boolean = false)
{
doc.setFont(textFont, textFontStyle);
doc.setFontSize(textFontSize);

if(isComment) {
textToAdd = doc.splitTextToSize(textToAdd, (doc.internal.pageSize.getWidth() - (textMarginLeft * 3)));
}
doc.text(textToAdd, textMarginLeft, textMarginTop);
}

Expand All @@ -418,8 +429,8 @@ export class PrintService {
scale: boolean
) {
const translate = this.languageService.translate;
const projScaleSize = 16;
const projScaleMarginLeft = 20;
const projScaleSize = 12;
const projScaleMarginLeft = 10;
const marginBottom = 15;
const heightPixels = doc.internal.pageSize.height - marginBottom;

Expand Down Expand Up @@ -937,7 +948,7 @@ export class PrintService {
*/
private getImageSizeToFitPdf(doc, canvas, margins) {
// Define variable to calculate best size to fit in one page
const pageHeight = doc.internal.pageSize.getHeight() - (margins[0] + margins[2]);
const pageHeight = doc.internal.pageSize.getHeight() - (margins[0] + margins[2] + 10);
const pageWidth = doc.internal.pageSize.getWidth() - (margins[1] + margins[3]);
const canHeight = this.pdf_units2points(canvas.height, 'mm');
const canWidth = this.pdf_units2points(canvas.width, 'mm');
Expand Down