From e31e749aec42c2b81079c73cdfc32b3ccb263063 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 10 Dec 2020 18:32:36 +0200
Subject: [PATCH] Multiple lines of text in watermark

---
 .../watermark-screen.component.html           |  2 +-
 .../watermark-screen.component.ts             | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

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 5f8b64791..7924a8beb 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
@@ -24,7 +24,7 @@
             <form [formGroup]="configForm" (keyup)="configChanged()">
                 <div class="red-input-group">
                     <label translate="Text"></label>
-                    <input formControlName="text" name="text" type="text" />
+                    <textarea formControlName="text" name="text" type="text" rows="3"></textarea>
                 </div>
                 <div class="red-input-group">
                     <label translate="Color"></label>
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 61c44355c..088b5fe6e 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
@@ -16,8 +16,8 @@ import { debounce } from '../../../utils/debounce';
 export class WatermarkScreenComponent implements OnInit {
     private _instance: WebViewerInstance;
     private _initialConfig = {
-        text: 'Watermark',
-        color: '#000',
+        text: 'Watermark\nWatermark line 2\nWatermark line3',
+        color: '#000000',
         opacity: 50
     };
 
@@ -69,12 +69,11 @@ export class WatermarkScreenComponent implements OnInit {
 
             instance.docViewer.on('documentLoaded', () => {
                 this.viewReady = true;
+                this._drawWatermark();
                 this._changeDetectorRef.detectChanges();
             });
 
             this._disableElements();
-            this._drawWatermark();
-
             this._instance.loadDocument(`${window.location.origin}/assets/pdftron/sample.pdf`);
         });
     }
@@ -84,28 +83,24 @@ export class WatermarkScreenComponent implements OnInit {
     }
 
     private _drawWatermark() {
-        this._instance.docViewer.setWatermark({
-            // Draw diagonal watermark in middle of the document
-            diagonal: {
-                fontSize: 25, // or even smaller size
-                fontFamily: 'sans-serif',
-                color: 'red',
-                opacity: 50, // from 0 to 100
-                text: 'Watermark'
-            }
-        });
-    }
+        const lines = this.configForm.get('text').value.split('\n');
+        const fontSize = 40;
+        const lineHeight = fontSize + 10;
 
-    @debounce()
-    public configChanged() {
         this._instance.docViewer.setWatermark({
-            // Draw diagonal watermark in middle of the document
-            diagonal: {
-                fontSize: 30,
-                fontFamily: 'sans-serif',
-                color: this.configForm.get('color').value,
-                opacity: this.configForm.get('opacity').value, // from 0 to 100
-                text: this.configForm.get('text').value
+            custom: (ctx, pageNumber, pageWidth, pageHeight) => {
+                ctx.fillStyle = this.configForm.get('color').value;
+                ctx.font = `${fontSize}pt Arial`;
+                ctx.globalAlpha = this.configForm.get('opacity').value / 100;
+
+                for (let idx = 0; idx < lines.length; ++idx) {
+                    ctx.save();
+                    ctx.translate(pageWidth / 2 - (lineHeight * (lines.length - 1)) / 4, pageHeight / 2 - (lineHeight * lines.length) / 2);
+                    ctx.rotate(-Math.PI / 4);
+                    ctx.translate(-40, 0);
+                    ctx.fillText(lines[idx], 0, idx * lineHeight);
+                    ctx.restore();
+                }
             }
         });
 
@@ -113,6 +108,11 @@ export class WatermarkScreenComponent implements OnInit {
         this._instance.docViewer.updateView([0], 0);
     }
 
+    @debounce()
+    public configChanged() {
+        this._drawWatermark();
+    }
+
     public save() {
         this._initialConfig = {
             ...this.configForm.getRawValue()