Merge branch 'main' into test

src/main/resources/static/images/flags/id.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-id" viewBox="0 0 640 480">
+  <path fill="#e70011" d="M0 0h640v240H0Z"/>
+  <path fill="#fff" d="M0 240h640v240H0Z"/>
+</svg>

src/main/resources/static/images/flags/in.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-in" viewBox="0 0 640 480">
+  <path fill="#f93" d="M0 0h640v160H0z"/>
+  <path fill="#fff" d="M0 160h640v160H0z"/>
+  <path fill="#128807" d="M0 320h640v160H0z"/>
+  <g transform="matrix(3.2 0 0 3.2 320 240)">
+    <circle r="20" fill="#008"/>
+    <circle r="17.5" fill="#fff"/>
+    <circle r="3.5" fill="#008"/>
+    <g id="in-d">
+      <g id="in-c">
+        <g id="in-b">
+          <g id="in-a" fill="#008">
+            <circle r=".9" transform="rotate(7.5 -8.8 133.5)"/>
+            <path d="M0 17.5.6 7 0 2l-.6 5z"/>
+          </g>
+          <use xlink:href="#in-a" width="100%" height="100%" transform="rotate(15)"/>
+        </g>
+        <use xlink:href="#in-b" width="100%" height="100%" transform="rotate(30)"/>
+      </g>
+      <use xlink:href="#in-c" width="100%" height="100%" transform="rotate(60)"/>
+    </g>
+    <use xlink:href="#in-d" width="100%" height="100%" transform="rotate(120)"/>
+    <use xlink:href="#in-d" width="100%" height="100%" transform="rotate(-120)"/>
+  </g>
+</svg>

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;
+export default DragDropManager;