updated UI watermark to match backend 1-1
This commit is contained in:
Timo
parent
acbd4ca261
commit
97eeca5be2
@ -110,9 +110,9 @@
|
||||
(click)="setValue('fontType', option.value)"
|
||||
*ngFor="
|
||||
let option of [
|
||||
{ value: 'sans-serif', display: 'Sans Serif' },
|
||||
{ value: 'serif', display: 'Serif' },
|
||||
{ value: 'monospace', display: 'Mono' }
|
||||
{ value: 'times-new-roman', display: 'Times' },
|
||||
{ value: 'helvetica', display: 'Helvetica' },
|
||||
{ value: 'courier', display: 'Courier' }
|
||||
]
|
||||
"
|
||||
>
|
||||
|
||||
@ -67,12 +67,16 @@
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.serif {
|
||||
font-family: Georgia, serif;
|
||||
&.times-new-roman {
|
||||
font-family: 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
&.monospace {
|
||||
font-family: monospace;
|
||||
&.helvetica {
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
&.courier {
|
||||
font-family: Courier, monospace;
|
||||
}
|
||||
|
||||
&.DIAGONAL {
|
||||
|
||||
@ -10,6 +10,7 @@ import { WatermarkControllerService, WatermarkModel } from '@redaction/red-ui-ht
|
||||
import { NotificationService, NotificationType } from '../../../notification/notification.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { hexToRgb } from '../../../utils/functions';
|
||||
|
||||
export const DEFAULT_WATERMARK: WatermarkModel = {
|
||||
text: null,
|
||||
@ -118,77 +119,74 @@ export class WatermarkScreenComponent implements OnInit {
|
||||
public triggerChanges() {}
|
||||
|
||||
private _loadViewer() {
|
||||
WebViewer(
|
||||
{
|
||||
licenseKey: environment.licenseKey ? atob(environment.licenseKey) : null,
|
||||
path: '/assets/wv-resources',
|
||||
css: '/assets/pdftron/stylesheet.css'
|
||||
},
|
||||
this._viewer.nativeElement
|
||||
).then((instance) => {
|
||||
this._instance = instance;
|
||||
if (!this._instance) {
|
||||
WebViewer(
|
||||
{
|
||||
licenseKey: environment.licenseKey ? atob(environment.licenseKey) : null,
|
||||
path: '/assets/wv-resources',
|
||||
css: '/assets/pdftron/stylesheet.css',
|
||||
fullAPI: true
|
||||
},
|
||||
this._viewer.nativeElement
|
||||
).then((instance) => {
|
||||
this._instance = instance;
|
||||
|
||||
instance.docViewer.on('documentLoaded', () => {
|
||||
this.viewReady = true;
|
||||
this._drawWatermark();
|
||||
this._changeDetectorRef.detectChanges();
|
||||
instance.docViewer.on('documentLoaded', () => {
|
||||
this.viewReady = true;
|
||||
this._drawWatermark();
|
||||
});
|
||||
|
||||
this._disableElements();
|
||||
this._instance.loadDocument(`${window.location.origin}/assets/pdftron/blank.pdf`);
|
||||
});
|
||||
|
||||
this._disableElements();
|
||||
this._instance.loadDocument(`${window.location.origin}/assets/pdftron/blank.pdf`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _disableElements() {
|
||||
this._instance.disableElements(['header', 'toolsHeader', 'pageNavOverlay', 'textPopup']);
|
||||
}
|
||||
|
||||
private _drawWatermark() {
|
||||
private async _drawWatermark() {
|
||||
await this._instance.PDFNet.initialize();
|
||||
const document = await this._instance.docViewer.getDocument().getPDFDoc();
|
||||
const pageSet = await this._instance.PDFNet.PageSet.createSinglePage(1);
|
||||
|
||||
await this._instance.PDFNet.Stamper.deleteStamps(document, pageSet);
|
||||
|
||||
const text = this.configForm.get('text').value || '';
|
||||
const lines = text.split('\n');
|
||||
const fontSize = this.configForm.get('fontSize').value;
|
||||
const fontType = this.configForm.get('fontType').value;
|
||||
const orientation: WatermarkModel.WatermarkOrientationEnum = this.configForm.get('orientation').value;
|
||||
const lineHeight = fontSize + 4;
|
||||
const opacity = this.configForm.get('opacity').value;
|
||||
const color = this.configForm.get('hexColor').value;
|
||||
|
||||
if (orientation === WatermarkModel.WatermarkOrientationEnum.DIAGONAL) {
|
||||
this._instance.docViewer.setWatermark({
|
||||
diagonal: {
|
||||
text,
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontType,
|
||||
color,
|
||||
opacity
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this._instance.docViewer.setWatermark({
|
||||
custom: (ctx, pageNumber, pageWidth, pageHeight) => {
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = `${fontSize}px ${fontType}`;
|
||||
ctx.globalAlpha = opacity / 100;
|
||||
const rgbColor = hexToRgb(color);
|
||||
|
||||
for (let idx = 0; idx < lines.length; ++idx) {
|
||||
ctx.save();
|
||||
if (orientation === WatermarkModel.WatermarkOrientationEnum.HORIZONTAL) {
|
||||
ctx.translate(pageWidth / 2, pageHeight / 2 - (lineHeight * lines.length) / 2);
|
||||
}
|
||||
if (orientation === WatermarkModel.WatermarkOrientationEnum.VERTICAL) {
|
||||
ctx.translate(pageWidth / 2, 0);
|
||||
ctx.rotate(-Math.PI / 2);
|
||||
ctx.translate(-pageHeight / 2, -(lineHeight * lines.length) / 2);
|
||||
}
|
||||
ctx.fillText(lines[idx], 0, idx * lineHeight);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
const stamper = await this._instance.PDFNet.Stamper.create(3, fontSize, 0);
|
||||
await stamper.setFontColor(await this._instance.PDFNet.ColorPt.init(rgbColor.r, rgbColor.g, rgbColor.b));
|
||||
await stamper.setOpacity(opacity / 100);
|
||||
|
||||
switch (orientation) {
|
||||
case WatermarkModel.WatermarkOrientationEnum.VERTICAL:
|
||||
await stamper.setAlignment(0, 0);
|
||||
await stamper.setRotation(-90);
|
||||
break;
|
||||
case WatermarkModel.WatermarkOrientationEnum.HORIZONTAL:
|
||||
break;
|
||||
case WatermarkModel.WatermarkOrientationEnum.DIAGONAL:
|
||||
default:
|
||||
await stamper.setAlignment(0, 0);
|
||||
await stamper.setRotation(-45);
|
||||
}
|
||||
|
||||
const font = await this._instance.PDFNet.Font.createAndEmbed(document, this._convertFont(fontType));
|
||||
await stamper.setFont(font);
|
||||
await stamper.setTextAlignment(0);
|
||||
await stamper.stampText(document, text, pageSet);
|
||||
|
||||
this._instance.docViewer.refreshAll();
|
||||
this._instance.docViewer.updateView([0], 0);
|
||||
this._changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
private _initForm() {
|
||||
@ -208,4 +206,16 @@ export class WatermarkScreenComponent implements OnInit {
|
||||
this.configChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private _convertFont(fontType: any): number {
|
||||
switch (fontType) {
|
||||
case 'times-new-roman':
|
||||
return 0;
|
||||
case 'helvetica':
|
||||
return 4;
|
||||
case 'courier':
|
||||
return 8;
|
||||
}
|
||||
return 4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@ export class UserService {
|
||||
if (!user) {
|
||||
user = this.user;
|
||||
}
|
||||
return user.roles.indexOf('RED_USER') >= 0;
|
||||
return user.roles?.indexOf('RED_USER') >= 0;
|
||||
}
|
||||
|
||||
private _hasAnyRedRole(u: User) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"OAUTH_URL": "https://redqa-auth.iqser.cloud/auth/realms/redaction",
|
||||
"OAUTH_URL": "https://redkc-staging.iqser.cloud/auth/realms/redaction",
|
||||
"OAUTH_CLIENT_ID": "redaction",
|
||||
"API_URL": "https://redqa-api.iqser.cloud"
|
||||
"API_URL": "https://redapi-staging.iqser.cloud"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user