Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arrow key support signing #1143

Merged
merged 5 commits into from
Apr 30, 2024
Merged

Arrow key support signing #1143

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e1a8902
Added Arrow Key functionality for the Sign page.
t71rs Apr 29, 2024
705d988
Added Arrow Key functionality for the Sign page.
t71rs Apr 29, 2024
f49e90c
Adjusted step size, so it is relative to the size of the draggable
t71rs Apr 30, 2024
e11fea6
Enabled Arrow Key support also for Add-Image
t71rs Apr 30, 2024
3814cc4
Merge branch 'main' into Arrow-key-support-signing
sbplat Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 124 additions & 54 deletions src/main/resources/static/js/draggable-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,74 +5,130 @@ const DraggableUtils = {
pdfDoc: null,
pageIndex: 0,
documentsMap: new Map(),
lastInteracted: null,

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);
//update the last interacted element
this.lastInteracted = event.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,
});
//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);

modifiers: [
interact.modifiers.restrictSize({
min: { width: 5, height: 5 },
}),
],
inertia: true,
DraggableUtils.onInteraction(target);
});
}
},

onInteraction(target) {
this.boxDragContainer.appendChild(target);
},
Expand All @@ -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) {
Expand Down Expand Up @@ -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();
}
},
Expand Down