Arrow key support signing (#1143)

* Added Arrow Key functionality for the Sign page.

* Added Arrow Key functionality for the Sign page.

* Adjusted step size, so it is relative to the size of the draggable

* Enabled Arrow Key support also for Add-Image

---------

Co-authored-by: Eric <71648843+sbplat@users.noreply.github.com>

src/main/resources/static/js/draggable-utils.js

@@ -5,6 +5,7 @@ const DraggableUtils = {
   pdfDoc: null,
   pageIndex: 0,
   documentsMap: new Map(),
+  lastInteracted: null,
 
   init() {
     interact(".draggable-canvas")
@@ -12,14 +13,18 @@ const DraggableUtils = {
       listeners: {
         move: (event) => {
           const target = event.target;
-            const x = (parseFloat(target.getAttribute("data-bs-x")) || 0) + event.dx;
+          const x = (parseFloat(target.getAttribute("data-bs-x")) || 0)
-            const y = (parseFloat(target.getAttribute("data-bs-y")) || 0) + event.dy;
+              + event.dx;
+          const y = (parseFloat(target.getAttribute("data-bs-y")) || 0)
+              + event.dy;
 
           target.style.transform = `translate(${x}px, ${y}px)`;
           target.setAttribute("data-bs-x", x);
           target.setAttribute("data-bs-y", y);
 
           this.onInteraction(target);
+          //update the last interacted element
+          this.lastInteracted = event.target;
         },
       },
     })
@@ -38,7 +43,8 @@ const DraggableUtils = {
             let width = event.rect.width;
             let height = event.rect.height;
 
-              if (Math.abs(event.deltaRect.width) >= Math.abs(event.deltaRect.height)) {
+            if (Math.abs(event.deltaRect.width) >= Math.abs(
+                event.deltaRect.height)) {
               height = width / aspectRatio;
             } else {
               width = height * aspectRatio;
@@ -59,7 +65,8 @@ const DraggableUtils = {
 
           target.setAttribute("data-bs-x", x);
           target.setAttribute("data-bs-y", y);
-            target.textContent = Math.round(event.rect.width) + "\u00D7" + Math.round(event.rect.height);
+          target.textContent = Math.round(event.rect.width) + "\u00D7"
+              + Math.round(event.rect.height);
 
           this.onInteraction(target);
         },
@@ -67,12 +74,61 @@ const DraggableUtils = {
 
       modifiers: [
         interact.modifiers.restrictSize({
-            min: { width: 5, height: 5 },
+          min: {width: 5, height: 5},
         }),
       ],
       inertia: true,
     });
+    //Arrow key Support for Add-Image and Sign pages
+    if(window.location.pathname.endsWith('sign') || window.location.pathname.endsWith('add-image')) {
+      window.addEventListener('keydown', (event) => {
+        //Check for last interacted element
+        if (!this.lastInteracted){
+          return;
+        }
+        // Get the currently selected element
+        const target = this.lastInteracted;
+
+        // Step size relatively to the elements size
+        const stepX = target.offsetWidth * 0.05;
+        const stepY = target.offsetHeight * 0.05;
+
+        // Get the current x and y coordinates
+        let x = (parseFloat(target.getAttribute('data-bs-x')) || 0);
+        let y = (parseFloat(target.getAttribute('data-bs-y')) || 0);
+
+        // Check which key was pressed and update the coordinates accordingly
+        switch (event.key) {
+          case 'ArrowUp':
+            y -= stepY;
+            event.preventDefault(); // Prevent the default action
+            break;
+          case 'ArrowDown':
+            y += stepY;
+            event.preventDefault();
+            break;
+          case 'ArrowLeft':
+            x -= stepX;
+            event.preventDefault();
+            break;
+          case 'ArrowRight':
+            x += stepX;
+            event.preventDefault();
+            break;
+          default:
+            return; // Listen only to arrow keys
+        }
+
+        // Update position
+        target.style.transform = `translate(${x}px, ${y}px)`;
+        target.setAttribute('data-bs-x', x);
+        target.setAttribute('data-bs-y', y);
+
+        DraggableUtils.onInteraction(target);
+      });
+    }
   },
+
   onInteraction(target) {
     this.boxDragContainer.appendChild(target);
   },
@@ -88,9 +144,18 @@ const DraggableUtils = {
     createdCanvas.setAttribute("data-bs-x", x);
     createdCanvas.setAttribute("data-bs-y", y);
 
+    //Click element in order to enable arrow keys
+    createdCanvas.addEventListener('click', () => {
+      this.lastInteracted = createdCanvas;
+    });
+
     createdCanvas.onclick = (e) => this.onInteraction(e.target);
 
     this.boxDragContainer.appendChild(createdCanvas);
+
+    //Enable Arrow keys directly after the element is created
+    this.lastInteracted = createdCanvas;
+
     return createdCanvas;
   },
   createDraggableCanvasFromUrl(dataUrl) {
@@ -134,6 +199,11 @@ const DraggableUtils = {
   },
   deleteDraggableCanvas(element) {
     if (element) {
+      //Check if deleted element is the last interacted
+      if (this.lastInteracted === element) {
+        // If it is, set lastInteracted to null
+        this.lastInteracted = null;
+      }
       element.remove();
     }
   },