RED-6014: add font for japanese characters

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.html

@@ -38,9 +38,9 @@
             <div class="square-options">
                 <div
                     (click)="setValue('orientation', option)"
-                    *ngFor="let option of ['DIAGONAL', 'HORIZONTAL', 'VERTICAL']"
-                    [class.active]="form.get('orientation').value === option"
-                    [class.disabled]="form.get('orientation').disabled"
+                    *ngFor="let option of orientationOptions"
+                    [class.active]="form.controls.orientation.value === option"
+                    [class.disabled]="form.controls.orientation.disabled"
                     [ngClass]="option"
                 >
                     <span>ABC</span>
@@ -69,17 +69,17 @@
             />
             <div
                 (colorPickerChange)="setValue('hexColor', $event)"
-                [class.disabled]="form.get('hexColor').disabled"
-                [colorPicker]="form.get('hexColor').value"
-                [cpDisabled]="form.get('hexColor').disabled"
+                [class.disabled]="form.controls.hexColor.disabled"
+                [colorPicker]="form.controls.hexColor.value"
+                [cpDisabled]="form.controls.hexColor.disabled"
                 [cpOutputFormat]="'hex'"
                 [cpPosition]="'top-right'"
                 [cpUseRootViewContainer]="true"
-                [style.background]="form.get('hexColor').value"
+                [style.background]="form.controls.hexColor.value"
                 class="input-icon"
             >
                 <mat-icon
-                    *ngIf="!form.get('hexColor')?.value || form.get('hexColor').value?.length === 0"
+                    *ngIf="!form.controls.hexColor?.value || form.controls.hexColor.value?.length === 0"
                     svgIcon="red:color-picker"
                 ></mat-icon>
             </div>
@@ -90,15 +90,9 @@
             <div class="square-options">
                 <div
                     (click)="setValue('fontType', option.value)"
-                    *ngFor="
-                        let option of [
-                            { value: 'times-new-roman', display: 'Times' },
-                            { value: 'helvetica', display: 'Helvetica' },
-                            { value: 'courier', display: 'Courier' }
-                        ]
-                    "
-                    [class.active]="form.get('fontType').value === option.value"
-                    [class.disabled]="form.get('fontType').disabled"
+                    *ngFor="let option of fontOptions"
+                    [class.active]="form.controls.fontType.value === option.value"
+                    [class.disabled]="form.controls.fontType.disabled"
                     [ngClass]="option.value"
                 >
                     {{ option.display }}

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Inject } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
 import { HttpClient } from '@angular/common/http';
 import { FormBuilder, FormGroup } from '@angular/forms';
@@ -14,7 +14,7 @@ import {
     LoadingService,
     Toaster,
 } from '@iqser/common-ui';
-import { DOSSIER_TEMPLATE_ID, IWatermark, User, WATERMARK_ID, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
+import { DOSSIER_TEMPLATE_ID, type IWatermark, type User, WATERMARK_ID, WatermarkOrientation, WatermarkOrientations } from '@red/domain';
 import { stampPDFPage } from '@utils/page-stamper';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { WatermarkService } from '@services/entity-services/watermark.service';
@@ -25,6 +25,7 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { Router } from '@angular/router';
 import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
 import { ROLES } from '@users/roles';
+import { environment } from '@environments/environment';
 
 export const DEFAULT_WATERMARK: Partial<IWatermark> = {
     text: 'Watermark',
@@ -47,7 +48,6 @@ interface WatermarkForm {
 }
 
 @Component({
-    selector: 'redaction-watermark-screen',
     templateUrl: './watermark-screen.component.html',
     styleUrls: ['./watermark-screen.component.scss'],
 })
@@ -56,6 +56,12 @@ export class WatermarkScreenComponent {
     readonly currentUser = getCurrentUser<User>();
     readonly form = this._getForm();
     readonly watermark$: Observable<Partial<IWatermark>>;
+    readonly fontOptions = [
+        { value: 'times-new-roman', display: 'Times' },
+        { value: 'helvetica', display: 'Helvetica' },
+        { value: 'courier', display: 'Courier' },
+    ];
+    readonly orientationOptions = ['DIAGONAL', 'HORIZONTAL', 'VERTICAL'];
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly #watermarkId = Number(getParam(WATERMARK_ID));
     private _instance: WebViewerInstance;
@@ -70,7 +76,6 @@ export class WatermarkScreenComponent {
         private readonly _licenseService: LicenseService,
         @Inject(BASE_HREF_FN) private readonly _convertPath: BaseHrefFn,
         private readonly _watermarkService: WatermarkService,
-        private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _userPreferenceService: UserPreferenceService,
         private readonly _router: Router,
         private readonly _watermarksMapService: WatermarksMapService,
@@ -140,7 +145,6 @@ export class WatermarkScreenComponent {
         this._watermark = { ...watermark, dossierTemplateId: this.#dossierTemplateId };
         this.form.patchValue({ ...watermark });
         await this._loadViewer();
-        this._changeDetectorRef.markForCheck();
     }
 
     private async _loadViewer() {
@@ -167,6 +171,10 @@ export class WatermarkScreenComponent {
             await this._drawWatermark();
         });
 
+        if (environment.production) {
+            this._instance.Core.setCustomFontURL('https://' + window.location.host + this._convertPath('/assets/pdftron'));
+        }
+
         this._disableElements();
 
         const request = this._http.get('/assets/pdftron/blank.pdf', {
@@ -198,7 +206,6 @@ export class WatermarkScreenComponent {
         );
         this._instance.Core.documentViewer.refreshAll();
         this._instance.Core.documentViewer.updateView([0], 0);
-        this._changeDetectorRef.detectChanges();
     }
 
     private _getForm() {

apps/red-ui/src/app/modules/file-preview/services/stamp.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { clearStamps, stampPDFPage } from '../../../utils';
 import { FilePreviewStateService } from './file-preview-state.service';
-import { NGXLogger } from 'ngx-logger';
 import { ViewModeService } from './view-mode.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Core } from '@pdftron/webviewer';
@@ -17,7 +16,6 @@ export class StampService {
         private readonly _pdf: PdfViewer,
         private readonly _documentViewer: REDDocumentViewer,
         private readonly _state: FilePreviewStateService,
-        private readonly _logger: NGXLogger,
         private readonly _viewModeService: ViewModeService,
         private readonly _translateService: TranslateService,
         private readonly _watermarksMapService: WatermarksMapService,
@@ -41,9 +39,9 @@ export class StampService {
         }
 
         if (this._viewModeService.isRedacted) {
-            const dossier = this._state.dossier;
-            if (dossier.previewWatermarkId) {
-                await this._stampPreview(pdfDoc, dossier.dossierTemplateId, dossier.previewWatermarkId);
+            const { dossierTemplateId, previewWatermarkId } = this._state.dossier;
+            if (previewWatermarkId) {
+                await this._stampPreview(pdfDoc, dossierTemplateId, previewWatermarkId);
             }
         } else {
             await this._stampExcludedPages(pdfDoc, file.excludedPages);

apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts

@@ -13,6 +13,7 @@ import { asList } from '../utils/functions';
 import { TranslateService } from '@ngx-translate/core';
 import { LicenseService } from '@services/license.service';
 import { UserPreferenceService } from '@users/user-preference.service';
+import { environment } from '@environments/environment';
 import TextTool = Core.Tools.TextTool;
 import Annotation = Core.Annotations.Annotation;
 import TextHighlightAnnotation = Core.Annotations.TextHighlightAnnotation;
@@ -149,6 +150,10 @@ export class PdfViewer {
     async init(htmlElement: HTMLElement) {
         this.#instance = await this.#getInstance(htmlElement);
 
+        if (environment.production) {
+            this.#instance.Core.setCustomFontURL('https://' + window.location.host + this._convertPath('/assets/pdftron'));
+        }
+
         try {
             await this.PDFNet.initialize(this._licenseService.activeLicenseKey);
         } catch (e) {