fix bugs in drag/drop, move styling for functions to separate sheets

To clean up the multi tool page and make the pdf adapters more re-usable the style for them was moved to separate pages that are inserted into head when the adapter is created.

src/main/resources/static/js/multitool/DragDropManager.js

@@ -2,58 +2,95 @@
 
 class DragDropManager {
     dragContainer;
+    wrapper;
+    pageDirection;
     movePageTo;
     pageDragging;
     draggelEl;
     draggedImageEl;
     hoveredEl;
+    endInsertionElement;
 
-    constructor(id) {
+    constructor(id, wrapperId) {
         this.dragContainer = document.getElementById(id);
+        this.pageDirection = document.documentElement.getAttribute("lang-direction");
+        this.wrapper = document.getElementById(wrapperId);
         this.pageDragging = false;
         this.hoveredEl = undefined;
         this.draggelEl = undefined
         this.draggedImageEl = undefined;
 
+        var styleElement = document.createElement('link');
+        styleElement.rel = 'stylesheet';
+        styleElement.href = 'css/dragdrop.css'
+
+        document.head.appendChild(styleElement);
+
+        const div = document.createElement('div');
+        div.classList.add('drag-manager_endpoint');
+        div.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
+            <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
+            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
+        </svg>`
+        this.endInsertionElement = div;
+
         this.startDraggingPage = this.startDraggingPage.bind(this);
         this.onDragEl = this.onDragEl.bind(this);
         this.stopDraggingPage = this.stopDraggingPage.bind(this);
+
+        this.adapt(div);
     }
 
-    startDraggingPage(div, imageSrc) {
+    startDraggingPage(div,) {
         this.pageDragging = true;
         this.draggedEl = div;
-        div.classList.add('dragging');
+        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;
-        this.draggedImageEl.style.left = screenX;
-        this.draggedImageEl.style.right = screenY;
+        imgEl.style.left = screenX;
+        imgEl.style.right = screenY;
+        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');
+        this.wrapper.appendChild(this.endInsertionElement);
     }
 
     onDragEl(mouseEvent) {
         const { clientX, clientY } = mouseEvent;
         if(this.draggedImageEl) {
             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');
+        this.wrapper.removeChild(this.endInsertionElement); 
         window.removeEventListener('mouseup', this.stopDraggingPage)
         this.draggedImageEl = undefined;
         this.pageDragging = false;
-        this.draggedEl.classList.remove('dragging');
-        this.hoveredEl.classList.remove('draghover');
+        this.draggedEl.classList.remove('drag-manager_dragging');
+        this.hoveredEl?.classList.remove('drag-manager_draghover');
         this.dragContainer.childNodes.forEach((dragChild) => {
             this.dragContainer.removeChild(dragChild);
         })
+        if(!this.hoveredEl) {
+            return;
+        }
+        if(this.hoveredEl === this.endInsertionElement) {
+            this.movePageTo(this.draggedEl);
+            return;
+        }
         this.movePageTo(this.draggedEl, this.hoveredEl);
     }
 
@@ -64,19 +101,19 @@ class DragDropManager {
 
     adapt(div) {
         const onDragStart = () => {
-            this.startDraggingPage(div, div.querySelector('img').src);
+            this.startDraggingPage(div);
         }
         
         const onMouseEnter = () => {
             if (this.pageDragging) {
                 this.hoveredEl = div;
-                div.classList.add('draghover');
+                div.classList.add('drag-manager_draghover');
             }
         }
 
         const onMouseLeave = () => {
             this.hoveredEl = undefined
-            div.classList.remove('draghover');
+            div.classList.remove('drag-manager_draghover');
         }
 
         div.addEventListener('dragstart', onDragStart);