Merge pull request #130 from Pascal-Institute/copilot/add-image-border-rotation

Add rotating dotted border effect during image drag-and-drop

Author: volta2030

imgkit/features/image_layer_events.js

@@ -224,16 +224,33 @@ class ImageLayerEvents {
    * Setup drag and drop handlers
    */
   setupDragDrop() {
-    // Prevent default browser behavior
-    this.layer.canvas.addEventListener("dragover", (e) => e.preventDefault());
+    // Prevent default browser behavior and add rotating border effect
+    this.layer.canvas.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      // Add rotating border animation class
+      this.layer.panel.classList.add("drag-border-active");
+    });
 
     this.layer.canvas.addEventListener("dragenter", (e) => {
       e.preventDefault();
       this.sendLayerEvent("select");
+      // Add rotating border animation class
+      this.layer.panel.classList.add("drag-border-active");
+    });
+
+    this.layer.canvas.addEventListener("dragleave", (e) => {
+      // Only remove class if drag actually left the canvas (not moving to child element)
+      // Also handle case where relatedTarget is null (e.g., drag left browser window)
+      if (!e.relatedTarget || !this.layer.canvas.contains(e.relatedTarget)) {
+        this.layer.panel.classList.remove("drag-border-active");
+      }
     });
 
     this.layer.canvas.addEventListener("drop", async (e) => {
       e.preventDefault();
+      // Remove rotating border animation class
+      this.layer.panel.classList.remove("drag-border-active");
+
       const files = e.dataTransfer.files;
 
       if (!files || files.length === 0) return;

imgkit/imgpanel.css

@@ -103,6 +103,37 @@
   border-top: 3px solid #4caf50;
 }
 
+/* Rotating dotted border animation during drag-over */
+@keyframes rotating-border {
+  from {
+    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
+  }
+  to {
+    background-position: 12px 0, calc(100% - 12px) 100%, 0 calc(100% - 12px),
+      100% 12px;
+  }
+}
+
+.imgPanel.drag-border-active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 10;
+  background-image: linear-gradient(90deg, #666 50%, transparent 50%),
+    linear-gradient(90deg, #666 50%, transparent 50%),
+    linear-gradient(0deg, #666 50%, transparent 50%),
+    linear-gradient(0deg, #666 50%, transparent 50%);
+  background-size: 12px 3px, 12px 3px, 3px 12px, 3px 12px;
+  background-position: 0 0, 100% 100%, 0 100%, 100% 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  animation: rotating-border 0.5s linear infinite;
+}
+
 .imgPanel:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }