feat: improve drag+drop UI

toabi · Jul 20, 2024 · b0b83a1 · b0b83a1
1 parent d5aaace
commit b0b83a1
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,34 +2,49 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>Image Grid Creator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Grid Arranger</title>
     <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        #toolbar-container {
+            margin: 10px;
         }
-        #canvas {
-            border: 1px solid black;
+        #toolbar-container button, #toolbar-container input{
+            margin: 5px;
+            font-size: large;
         }
-        .upload-container {
-            margin-bottom: 5px;
+        #canvas-container {
+            position: relative;
+            display: inline-block;
+            margin: 10px;
         }
-        button, input[type="file"] {
-            font-size: 16px;
-            padding: 5px;
-            margin: 5px;
+        #message-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            color: #999;
+            pointer-events: none;
+        }
+        #canvas {
+            border: 2px dashed #ccc;
+            transition: border-color 0.3s ease;
             cursor: pointer;
         }
+        #canvas.drag-over {
+            border-color: #4CAF50;
+        }
     </style>
 </head>
 <body>
-<p>Upload 8 images to arrange them in a 2x4 grid. No images will be uploaded.</p>
-<div class="upload-container">
+<div id="toolbar-container">
     <input type="file" id="fileInput" multiple accept="image/*">
     <button id="downloadBtn">Download Combined Image</button>
 </div>
-<canvas id="canvas" width="150" height="150"></canvas>
-
-<script src="script.js?v=2"></script>
+<div id="canvas-container">
+    <div id="message-container">You can also drag and drop up to 8 images into this area!</div>
+    <canvas id="canvas"></canvas>
+</div>
+<script src="script.js"></script>
 </body>
 </html>
diff --git a/public/script.js b/public/script.js
@@ -2,6 +2,7 @@ const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 const fileInput = document.getElementById('fileInput');
 const downloadBtn = document.getElementById('downloadBtn');
+const messageContainer = document.getElementById('message-container');
 
 const MAX_IMAGES = 8;
 const GRID_MAX_COLS = 4;
@@ -16,7 +17,8 @@ let maxCanvasWidth, maxCanvasHeight;
 
 fileInput.addEventListener('change', handleFileSelect);
 downloadBtn.addEventListener('click', downloadImage);
-canvas.addEventListener('dragover', (e) => e.preventDefault());
+canvas.addEventListener('dragover', handleDragOver);
+canvas.addEventListener('dragleave', handleDragLeave);
 canvas.addEventListener('drop', handleDrop);
 window.addEventListener('resize', handleResize);
 
@@ -39,6 +41,7 @@ function handleFileSelect(event) {
             repositionImages();
             drawImages();
             enableDragAndDrop();
+            updateMessageVisibility();
         });
 }
 
@@ -94,8 +97,19 @@ function repositionImages() {
     }));
 }
 
+function handleDragOver(e) {
+    e.preventDefault();
+    canvas.classList.add('drag-over');
+}
+
+function handleDragLeave(e) {
+    e.preventDefault();
+    canvas.classList.remove('drag-over');
+}
+
 function handleDrop(e) {
     e.preventDefault();
+    canvas.classList.remove('drag-over');
     const files = Array.from(e.dataTransfer.files);
     if (images.length + files.length > MAX_IMAGES) {
         alert(`Please upload a total of up to ${MAX_IMAGES} images.`);
@@ -111,6 +125,7 @@ function handleDrop(e) {
             repositionImages();
             drawImages();
             enableDragAndDrop();
+            updateMessageVisibility();
         });
 }
 
@@ -284,4 +299,15 @@ function downloadImage() {
     link.download = 'combined-image.png';
     link.href = originalCanvas.toDataURL();
     link.click();
-}
+}
+
+function updateMessageVisibility() {
+    if (images.length === 0) {
+        messageContainer.style.display = 'block';
+    } else {
+        messageContainer.style.display = 'none';
+    }
+}
+
+// Initialize message visibility
+updateMessageVisibility();