DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

Merge pull request #560 from sbplat/main

Browse source 
fix(multitool): hide dragged pdf page at the start so it doesn't teleport
This commit is contained in:
Anthony Stirling 2023-12-25 22:27:30 +00:00 committed by GitHub
commit d894937c22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/main/resources/static/js/multitool/DragDropManager.js
View file

@ -1,5 +1,3 @@
class DragDropManager { class DragDropManager {
dragContainer; dragContainer;
wrapper; wrapper;
@ -47,16 +45,15 @@ class DragDropManager {
const img = div.querySelector('img'); const img = div.querySelector('img');
div.classList.add('drag-manager_dragging'); div.classList.add('drag-manager_dragging');
const imageSrc = img.src; const imageSrc = img.src;
const imgEl = document.createElement('img'); const imgEl = document.createElement('img');
imgEl.classList.add('dragged-img'); imgEl.classList.add('dragged-img');
imgEl.src = imageSrc; imgEl.src = imageSrc;
this.draggedImageEl = imgEl; this.draggedImageEl = imgEl;
imgEl.style.left = screenX; imgEl.style.visibility = 'hidden';
imgEl.style.right = screenY;
imgEl.style.transform = `rotate(${img.style.rotate === '' ? '0deg' : img.style.rotate}) translate(-50%, -50%)`; imgEl.style.transform = `rotate(${img.style.rotate === '' ? '0deg' : img.style.rotate}) translate(-50%, -50%)`;
this.dragContainer.appendChild(imgEl); this.dragContainer.appendChild(imgEl);
window.addEventListener('mouseup', this.stopDraggingPage) window.addEventListener('mouseup', this.stopDraggingPage)
window.addEventListener('mousemove', this.onDragEl) window.addEventListener('mousemove', this.onDragEl)
this.wrapper.classList.add('drag-manager_dragging-container'); this.wrapper.classList.add('drag-manager_dragging-container');
@ -66,12 +63,13 @@ class DragDropManager {
onDragEl(mouseEvent) { onDragEl(mouseEvent) {
const { clientX, clientY } = mouseEvent; const { clientX, clientY } = mouseEvent;
if(this.draggedImageEl) { if(this.draggedImageEl) {
this.draggedImageEl.style.visibility = 'visible';
this.draggedImageEl.style.left = `${clientX}px`; this.draggedImageEl.style.left = `${clientX}px`;
this.draggedImageEl.style.top = `${clientY}px`; this.draggedImageEl.style.top = `${clientY}px`;
} }
} }
stopDraggingPage() { stopDraggingPage() {
window.removeEventListener('mousemove', this.onDragEl); window.removeEventListener('mousemove', this.onDragEl);
this.wrapper.classList.remove('drag-manager_dragging-container'); this.wrapper.classList.remove('drag-manager_dragging-container');
@ -103,7 +101,7 @@ class DragDropManager {
const onDragStart = () => { const onDragStart = () => {
this.startDraggingPage(div); this.startDraggingPage(div);
} }
const onMouseEnter = () => { const onMouseEnter = () => {
if (this.pageDragging) { if (this.pageDragging) {
this.hoveredEl = div; this.hoveredEl = div;
@ -124,4 +122,4 @@ class DragDropManager {
} }
} }
export default DragDropManager; export default DragDropManager;