Allow signature rotation (#8)

src/i18n/de/translation.json

@@ -57,6 +57,8 @@
     "next-page": "Nächste Seite",
     "last-page": "Letzte Seite",
     "page-count": "von {{totalPages}}",
+    "rotate-signature": "Signatur rotieren",
+    "rotate": "Rotieren",
     "continue": "Platzierung bestätigen"
   },
   "error-summary": "Ein Fehler ist aufgetreten",

src/i18n/en/translation.json

@@ -57,6 +57,8 @@
     "next-page": "Next page",
     "last-page": "Last page",
     "page-count": "of {{totalPages}}",
+    "rotate-signature": "Rotate signature",
+    "rotate": "Rotate",
     "continue": "Confirm placement"
   },
   "error-summary": "An error occurred",

src/vpu-pdf-preview.js

@@ -103,10 +103,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
                 // add a red border around the signature placeholder
                 image.set({stroke: "#e4154b", strokeWidth: 8});
 
-                // TODO: un-lock rotation when rotation point in PDF-AS is matched
-                image.lockRotation = true;
-
-                // TODO: turn on controls when we enable rotation and resizing again
+                // disable controls, we currently don't want resizing and do rotation with a button
                 image.hasControls = false;
 
                 // we will resize the image when the initial pdf page is loaded
@@ -128,19 +125,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
             this.fabricCanvas.on('object:moving', function (e) {
                 let obj = e.target;
                 obj.setCoords();
-
-                // top-left corner
-                if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
-                    obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top);
-                    obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left);
-                }
-
-                // bottom-right corner
-                if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height ||
-                    obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width) {
-                    obj.top = Math.min(obj.top, obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top);
-                    obj.left = Math.min(obj.left, obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left);
-                }
+                that.enforceCanvasBoundaries(obj);
             });
 
             // TODO: prevent scaling the signature in a way that it is crossing the canvas boundaries
@@ -156,6 +141,21 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
         });
     }
 
+    enforceCanvasBoundaries(obj) {
+        // top-left corner
+        if (obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0) {
+            obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top);
+            obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left);
+        }
+
+        // bottom-right corner
+        if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height ||
+            obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width) {
+            obj.top = Math.min(obj.top, obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top);
+            obj.left = Math.min(obj.left, obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left);
+        }
+    }
+
     async onPageNumberChanged(e) {
         let obj = e.target;
         const page_no = parseInt(obj.value);
@@ -297,7 +297,7 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
                     const documentSizeMM = {
                         width: originalViewport.width / pointsPerMM,
                         height: originalViewport.height / pointsPerMM,
-                    }
+                    };
 
                     const sigSize = signature.getOriginalSize();
                     const scaleX = (this.canvas.width / sigSize.width) * (sigSizeMM.width / documentSizeMM.width);
@@ -368,6 +368,25 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
         this.dispatchEvent(event);
     }
 
+    /**
+     * Rotates the signature clock-wise in 90 steps
+     */
+    async rotateSignature() {
+        let signature = this.getSignatureRect();
+        let angel = signature.get("angle") + 90;
+
+        if (angel >= 360) {
+            angel = 0;
+        }
+
+        signature.set({ angle: angel });
+        signature.setCoords();
+        this.enforceCanvasBoundaries(signature);
+
+        // update page to show rotated signature
+        await this.showPage(this.currentPage);
+    }
+
     static get styles() {
         // language=css
         return css`
@@ -472,6 +491,10 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
                                     title="${i18n.t('pdf-preview.last-page')}"
                                     @click="${async () => { await this.showPage(this.totalPages); } }"
                                     ?disabled="${this.isPageRenderingInProgress || this.currentPage === this.totalPages}">${i18n.t('pdf-preview.last')}</button>
+                            <button class="button ${classMap({hidden: !this.isShowPlacement})}"
+                                    title="${i18n.t('pdf-preview.rotate-signature')}"
+                                    @click="${() => { this.rotateSignature(); } }"
+                                    ?disabled="${this.isPageRenderingInProgress}">${i18n.t('pdf-preview.rotate')}</button>
                             <button class="button is-primary ${classMap({hidden: !this.isShowPlacement})}"
                                     @click="${() => { this.sendAcceptEvent(); } }">${i18n.t('pdf-preview.continue')}</button>
                         </div>

src/vpu-qualified-signature-pdf-upload.js

@@ -153,11 +153,14 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
         if (this.queuedFilesPlacementModes[key] === "manual") {
             const data = this.queuedFilesSignaturePlacements[key];
 
+            // rotation translation
+            const rotations = {0: 0, 90: 270, 180: 180, 270: 90};
+
             if (data !== undefined) {
                 params = {
                     y: data.bottom,
                     x: data.left,
-                    r: data.angle,
+                    r: rotations[data.angle],
                     w: data.width, // only width, no "height" allowed in PDF-AS
                     p: data.currentPage
                 };