From e1a8902e94a02cd58cbabb8d08c84d582699b47b Mon Sep 17 00:00:00 2001 From: ge64qev Date: Mon, 29 Apr 2024 21:30:19 +0200 Subject: [PATCH 1/4] Added Arrow Key functionality for the Sign page. --- .../resources/static/js/draggable-utils.js | 155 ++++++++++++------ 1 file changed, 101 insertions(+), 54 deletions(-) diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js index bff4c3d4923..eb3c6dc5418 100644 --- a/src/main/resources/static/js/draggable-utils.js +++ b/src/main/resources/static/js/draggable-utils.js @@ -8,71 +8,118 @@ const DraggableUtils = { init() { interact(".draggable-canvas") - .draggable({ - listeners: { - move: (event) => { - const target = event.target; - const x = (parseFloat(target.getAttribute("data-bs-x")) || 0) + 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); - }, + .draggable({ + listeners: { + move: (event) => { + const target = event.target; + const x = (parseFloat(target.getAttribute("data-bs-x")) || 0) + + 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); }, - }) - .resizable({ - edges: { left: true, right: true, bottom: true, top: true }, - listeners: { - move: (event) => { - var target = event.target; - var x = parseFloat(target.getAttribute("data-bs-x")) || 0; - var y = parseFloat(target.getAttribute("data-bs-y")) || 0; - - // check if control key is pressed - if (event.ctrlKey) { - const aspectRatio = target.offsetWidth / target.offsetHeight; - // preserve aspect ratio - let width = event.rect.width; - let height = event.rect.height; - - if (Math.abs(event.deltaRect.width) >= Math.abs(event.deltaRect.height)) { - height = width / aspectRatio; - } else { - width = height * aspectRatio; - } - - event.rect.width = width; - event.rect.height = height; + }, + }) + .resizable({ + edges: {left: true, right: true, bottom: true, top: true}, + listeners: { + move: (event) => { + var target = event.target; + var x = parseFloat(target.getAttribute("data-bs-x")) || 0; + var y = parseFloat(target.getAttribute("data-bs-y")) || 0; + + // check if control key is pressed + if (event.ctrlKey) { + const aspectRatio = target.offsetWidth / target.offsetHeight; + // preserve aspect ratio + let width = event.rect.width; + let height = event.rect.height; + + if (Math.abs(event.deltaRect.width) >= Math.abs( + event.deltaRect.height)) { + height = width / aspectRatio; + } else { + width = height * aspectRatio; } - target.style.width = event.rect.width + "px"; - target.style.height = event.rect.height + "px"; + event.rect.width = width; + event.rect.height = height; + } - // translate when resizing from top or left edges - x += event.deltaRect.left; - y += event.deltaRect.top; + target.style.width = event.rect.width + "px"; + target.style.height = event.rect.height + "px"; - 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.setAttribute("data-bs-y", y); - target.textContent = Math.round(event.rect.width) + "\u00D7" + Math.round(event.rect.height); + target.style.transform = "translate(" + x + "px," + y + "px)"; - 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: [ + interact.modifiers.restrictSize({ + min: {width: 5, height: 5}, + }), + ], + inertia: true, + }); + if(window.location.pathname.endsWith('sign')) { + window.addEventListener('keydown', (event) => { + // Get the currently selected element + const target = document.querySelector('.draggable-canvas'); + + // Define the step size for each key press + const step = 10; // Adjust step size as needed + + // 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 -= step; + event.preventDefault(); // Prevent the default action + break; + case 'ArrowDown': + y += step; + event.preventDefault(); + break; + case 'ArrowLeft': + x -= step; + event.preventDefault(); + break; + case 'ArrowRight': + x += step; + event.preventDefault(); + break; + default: + return; // Listen only to arrow keys + } - modifiers: [ - interact.modifiers.restrictSize({ - min: { width: 5, height: 5 }, - }), - ], - inertia: true, + // 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); }, From 705d98816e252d038760c728ce9c66117df41a92 Mon Sep 17 00:00:00 2001 From: ge64qev Date: Mon, 29 Apr 2024 21:43:52 +0200 Subject: [PATCH 2/4] Added Arrow Key functionality for the Sign page. --- src/main/resources/static/js/draggable-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js index eb3c6dc5418..c03cfa6cd3a 100644 --- a/src/main/resources/static/js/draggable-utils.js +++ b/src/main/resources/static/js/draggable-utils.js @@ -26,7 +26,7 @@ const DraggableUtils = { }, }) .resizable({ - edges: {left: true, right: true, bottom: true, top: true}, + edges: { left: true, right: true, bottom: true, top: true }, listeners: { move: (event) => { var target = event.target; From f49e90c82491da204aa58e1a0fb5f5da512ee203 Mon Sep 17 00:00:00 2001 From: ge64qev Date: Tue, 30 Apr 2024 11:11:11 +0200 Subject: [PATCH 3/4] Adjusted step size, so it is relative to the size of the draggable --- src/main/resources/static/js/draggable-utils.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js index c03cfa6cd3a..33a02efe3cc 100644 --- a/src/main/resources/static/js/draggable-utils.js +++ b/src/main/resources/static/js/draggable-utils.js @@ -81,8 +81,9 @@ const DraggableUtils = { // Get the currently selected element const target = document.querySelector('.draggable-canvas'); - // Define the step size for each key press - const step = 10; // Adjust step size as needed + // 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); @@ -91,19 +92,19 @@ const DraggableUtils = { // Check which key was pressed and update the coordinates accordingly switch (event.key) { case 'ArrowUp': - y -= step; + y -= stepY; event.preventDefault(); // Prevent the default action break; case 'ArrowDown': - y += step; + y += stepY; event.preventDefault(); break; case 'ArrowLeft': - x -= step; + x -= stepX; event.preventDefault(); break; case 'ArrowRight': - x += step; + x += stepX; event.preventDefault(); break; default: From e11fea69af5a437e7dbf6fd0c34dc552899935a5 Mon Sep 17 00:00:00 2001 From: ge64qev Date: Tue, 30 Apr 2024 12:11:43 +0200 Subject: [PATCH 4/4] Enabled Arrow Key support also for Add-Image --- .../resources/static/js/draggable-utils.js | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js index 33a02efe3cc..6064e39836d 100644 --- a/src/main/resources/static/js/draggable-utils.js +++ b/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") @@ -22,6 +23,8 @@ const DraggableUtils = { target.setAttribute("data-bs-y", y); this.onInteraction(target); + //update the last interacted element + this.lastInteracted = event.target; }, }, }) @@ -76,10 +79,15 @@ const DraggableUtils = { ], inertia: true, }); - if(window.location.pathname.endsWith('sign')) { + //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 = document.querySelector('.draggable-canvas'); + const target = this.lastInteracted; // Step size relatively to the elements size const stepX = target.offsetWidth * 0.05; @@ -136,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) { @@ -182,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(); } },