From 779d9028fe5ed9a3123dd0c31d620945c63ce499 Mon Sep 17 00:00:00 2001
From: sbplat <71648843+sbplat@users.noreply.github.com>
Date: Mon, 25 Dec 2023 15:34:16 -0500
Subject: [PATCH] fix(multitool): hide dragged pdf page at the start so it
 doesn't teleport

---
 .../static/js/multitool/DragDropManager.js     | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

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