diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html index 04740a669..6c13f2d92 100644 --- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html @@ -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' } ] " > diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss index 11ec399f5..a279ebf3b 100644 --- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.scss @@ -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 { diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts index cfd913850..d0238e7f3 100644 --- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts @@ -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; + } } diff --git a/apps/red-ui/src/app/user/user.service.ts b/apps/red-ui/src/app/user/user.service.ts index be3a56ea5..0042f9345 100644 --- a/apps/red-ui/src/app/user/user.service.ts +++ b/apps/red-ui/src/app/user/user.service.ts @@ -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) { diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index 969132fdd..d447e7e9e 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -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" }