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,74 +5,130 @@ const DraggableUtils = {
   pdfDoc: null,
   pageIndex: 0,
   documentsMap: new Map(),
+  lastInteracted: null,
 
   init() {
     interact(".draggable-canvas")
-      .draggable({
+    .draggable({
-        listeners: {
+      listeners: {
-          move: (event) => {
+        move: (event) => {
-            const target = event.target;
+          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.style.transform = `translate(${x}px, ${y}px)`;
-            target.setAttribute("data-bs-x", x);
+          target.setAttribute("data-bs-x", x);
-            target.setAttribute("data-bs-y", y);
+          target.setAttribute("data-bs-y", y);
 
-            this.onInteraction(target);
+          this.onInteraction(target);
-          },
+          //update the last interacted element
+          this.lastInteracted = event.target;
         },
-      })
+      },
-      .resizable({
+    })
-        edges: { left: true, right: true, bottom: true, top: true },
+    .resizable({
-        listeners: {
+      edges: { left: true, right: true, bottom: true, top: true },
-          move: (event) => {
+      listeners: {
-            var target = event.target;
+        move: (event) => {
-            var x = parseFloat(target.getAttribute("data-bs-x")) || 0;
+          var target = event.target;
-            var y = parseFloat(target.getAttribute("data-bs-y")) || 0;
+          var x = parseFloat(target.getAttribute("data-bs-x")) || 0;
+          var y = parseFloat(target.getAttribute("data-bs-y")) || 0;
 
-            // check if control key is pressed
+          // check if control key is pressed
-            if (event.ctrlKey) {
+          if (event.ctrlKey) {
-              const aspectRatio = target.offsetWidth / target.offsetHeight;
+            const aspectRatio = target.offsetWidth / target.offsetHeight;
-              // preserve aspect ratio
+            // preserve aspect ratio
-              let width = event.rect.width;
+            let width = event.rect.width;
-              let height = event.rect.height;
+            let height = event.rect.height;
 
-              if (Math.abs(event.deltaRect.width) >= Math.abs(event.deltaRect.height)) {
+            if (Math.abs(event.deltaRect.width) >= Math.abs(
-                height = width / aspectRatio;
+                event.deltaRect.height)) {
-              } else {
+              height = width / aspectRatio;
-                width = height * aspectRatio;
+            } else {
-              }
+              width = height * aspectRatio;
-
-              event.rect.width = width;
-              event.rect.height = height;
             }
 
-            target.style.width = event.rect.width + "px";
+            event.rect.width = width;
-            target.style.height = event.rect.height + "px";
+            event.rect.height = height;
+          }
 
-            // translate when resizing from top or left edges
+          target.style.width = event.rect.width + "px";
-            x += event.deltaRect.left;
+          target.style.height = event.rect.height + "px";
-            y += event.deltaRect.top;
 
-            target.style.transform = "translate(" + x + "px," + y + "px)";
+          // translate when resizing from top or left edges
+          x += event.deltaRect.left;
+          y += event.deltaRect.top;
 
-            target.setAttribute("data-bs-x", x);
+          target.style.transform = "translate(" + x + "px," + y + "px)";
-            target.setAttribute("data-bs-y", y);
-            target.textContent = Math.round(event.rect.width) + "\u00D7" + Math.round(event.rect.height);
 
-            this.onInteraction(target);
+          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);
+
+          this.onInteraction(target);
         },
+      },
 
-        modifiers: [
+      modifiers: [
-          interact.modifiers.restrictSize({
+        interact.modifiers.restrictSize({
-            min: { width: 5, height: 5 },
+          min: {width: 5, height: 5},
-          }),
+        }),
-        ],
+      ],
-        inertia: true,
+      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();
     }
   },