Update index.html

index.html

@@ -153,11 +153,15 @@ body{
     padding: 24px;
 }
 
-.canvas-wrapper {
+#board-wrapper {
     position: relative;
-    display: inline-block;
     max-width: 100%;
     max-height: 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #draw-canvas {
@@ -171,7 +175,6 @@ body{
     box-shadow: 0 12px 48px rgba(0,0,0,.9);
     touch-action: none;
     display: block;
-    z-index: 1;
 }
 #draw-canvas.cursor-brush { cursor: crosshair; }
 #draw-canvas.cursor-eraser {
@@ -191,41 +194,65 @@ body{
     display: none;
 }
 
-/* Draggable Assets */
-.draggable-asset {
+#asset-layer {
     position: absolute;
-    cursor: move;
+    top: 0; left: 0; width: 100%; height: 100%;
+    pointer-events: none; /* Allows clicks to pass through to canvas */
+}
+
+.asset-wrapper {
+    position: absolute;
+    pointer-events: auto;
     user-select: none;
     touch-action: none;
-    z-index: 10;
     border: 1px dashed transparent;
+    transition: border-color 0.15s ease;
 }
-.draggable-asset:hover {
-    border-color: rgba(255, 255, 255, 0.5);
+.asset-wrapper:hover, .asset-wrapper.active {
+    border-color: var(--accent2);
 }
-.draggable-asset img {
-    pointer-events: none;
-    display: block;
+.asset-img {
     width: 100%;
-    height: auto;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+    background: transparent;
 }
-.resize-handle {
+.asset-handle {
     position: absolute;
-    bottom: -6px;
-    right: -6px;
-    width: 12px;
-    height: 12px;
     background: #fff;
-    border: 2px solid #000;
-    border-radius: 50%;
-    cursor: se-resize;
-    z-index: 20;
+    border: 1px solid #000;
+    border-radius: 2px;
+    width: 10px;
+    height: 10px;
+    z-index: 10;
+}
+.asset-handle.resize {
+    bottom: -5px;
+    right: -5px;
+    cursor: nwse-resize;
+}
+.asset-handle.delete {
+    top: -5px;
+    right: -5px;
+    cursor: pointer;
+    background: #ef4444;
+    border-color: #b91c1c;
+}
+.asset-handle.delete::before {
+    content: '×';
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    position: absolute;
+    top: -2px;
+    left: 1px;
 }
 
 /* Loader */
 .modern-loader{
     display:none;position:absolute;inset:0;background:rgba(0,0,0,.92);
-    z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(5px);
+    z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(5px);
 }
 .modern-loader.active{display:flex}
 .loader-spinner{
@@ -443,7 +470,7 @@ body{
 
   <!-- ══ Left icon rail ══ -->
   <div class="rail">
-    <div class="rail-label">Draw</div>
+    <div class="rail-label">Tools</div>
     <button class="rail-btn active" id="btn-brush" title="Brush">
       <svg viewBox="0 0 24 24"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
     </button>
@@ -453,19 +480,13 @@ body{
     <div class="color-input-wrap">
         <input type="color" id="color-picker" class="color-input" value="#000000" title="Brush Color">
     </div>
+    
     <div class="size-slider-wrap">
         <input type="range" id="size-slider" class="size-slider" min="1" max="50" value="5" title="Brush Size">
     </div>
     
     <div class="rail-sep"></div>
-    <div class="rail-label">Assets</div>
-    <button class="rail-btn" id="btn-upload-asset" title="Add Image/Asset">
-      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
-    </button>
-    <input type="file" id="asset-upload-input" accept="image/*" style="display:none;">
-
-    <div class="rail-sep"></div>
-    <div class="rail-label">Edit</div>
+    
     <button class="rail-btn" id="btn-undo" title="Undo">
       <svg viewBox="0 0 24 24"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
     </button>
@@ -476,6 +497,13 @@ body{
       <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
     </button>
 
+    <div class="rail-sep"></div>
+    <div class="rail-label">Assets</div>
+    <button class="rail-btn" id="btn-asset" title="Add Asset / Sticker">
+      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+    </button>
+    <input type="file" id="asset-file-input" accept="image/*" style="display:none;">
+
     <div class="rail-sep"></div>
     <div class="rail-label">Result</div>
     <button class="rail-btn" id="btn-download" title="Download Result" disabled>
@@ -490,7 +518,7 @@ body{
         <button class="seg-btn active" id="seg-input">Sketch</button>
         <button class="seg-btn" id="seg-result">Result</button>
       </div>
-      <div class="canvas-meta" id="canvas-meta">Draw a sketch or add assets</div>
+      <div class="canvas-meta" id="canvas-meta">Draw a sketch or add assets to begin</div>
       <div class="canvas-actions"></div>
     </div>
 
@@ -501,12 +529,11 @@ body{
         <div class="loader-bar-track"><div class="loader-bar-fill" id="loader-bar-fill"></div></div>
       </div>
 
-      <div class="canvas-wrapper" id="canvas-wrapper">
-        <canvas id="draw-canvas" width="1024" height="576" class="cursor-brush" style="aspect-ratio: 16 / 9;"></canvas>
-        <!-- Assets are appended dynamically here -->
+      <div id="board-wrapper">
+          <canvas id="draw-canvas" width="1024" height="576" class="cursor-brush" style="aspect-ratio: 16 / 9;"></canvas>
+          <div id="asset-layer"></div>
+          <img id="result-img" alt="Result Image" style="display:none; aspect-ratio: 16 / 9;">
       </div>
-      
-      <img id="result-img" alt="Result Image" style="display:none; aspect-ratio: 16 / 9;">
     </div>
   </div>
 
@@ -593,7 +620,7 @@ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.m
 /* ── DOM refs ── */
 const canvas = document.getElementById('draw-canvas');
 const ctx = canvas.getContext('2d');
-const canvasWrapper = document.getElementById('canvas-wrapper');
+const assetLayer = document.getElementById('asset-layer');
 const resultImg = document.getElementById('result-img');
 const btnDownload = document.getElementById('btn-download');
 
@@ -604,8 +631,9 @@ const btnRedo = document.getElementById('btn-redo');
 const btnClear = document.getElementById('btn-clear');
 const colorPicker = document.getElementById('color-picker');
 const sizeSlider = document.getElementById('size-slider');
-const btnUploadAsset = document.getElementById('btn-upload-asset');
-const assetInput = document.getElementById('asset-upload-input');
+
+const btnAsset = document.getElementById('btn-asset');
+const assetFileInput = document.getElementById('asset-file-input');
 
 const promptInput = document.getElementById('custom-prompt-input');
 const charCount = document.getElementById('char-count');
@@ -680,15 +708,16 @@ function updateCanvasRatio(ratio) {
     canvas.width = w;
     canvas.height = h;
     canvas.style.aspectRatio = ratio.replace(":", " / ");
+    
     resultImg.style.aspectRatio = ratio.replace(":", " / ");
     
-    setupCanvas();
-    undoStack = []; 
+    setupCanvas(); // Clear and reset canvas on ratio change
+    undoStack = []; // Clear history on ratio change
     redoStack = [];
-    saveState();
+    saveState(); // Save initial blank state
     
-    // Clear assets to prevent scaling issues
-    document.querySelectorAll('.draggable-asset').forEach(el => el.remove());
+    // Clear assets on ratio change to prevent weird overlapping
+    assetLayer.innerHTML = "";
 }
 
 ratioSelect.addEventListener('change', (e) => {
@@ -715,6 +744,8 @@ function getPos(e) {
 }
 
 function startDrawing(e) {
+    // Only draw if clicking directly on canvas, not an asset
+    if (e.target !== canvas) return; 
     e.preventDefault();
     isDrawing = true;
     const pos = getPos(e);
@@ -754,117 +785,12 @@ function stopDrawing() {
 }
 
 canvas.addEventListener('mousedown', startDrawing);
-canvas.addEventListener('mousemove', draw);
-canvas.addEventListener('mouseup', stopDrawing);
-canvas.addEventListener('mouseout', stopDrawing);
+window.addEventListener('mousemove', draw); // Listen on window to allow dragging outside
+window.addEventListener('mouseup', stopDrawing);
 
 canvas.addEventListener('touchstart', startDrawing);
-canvas.addEventListener('touchmove', draw);
-canvas.addEventListener('touchend', stopDrawing);
-
-/* ── Asset Logic ── */
-btnUploadAsset.addEventListener('click', () => assetInput.click());
-assetInput.addEventListener('change', (e) => {
-    const file = e.target.files[0];
-    if (file) {
-        const reader = new FileReader();
-        reader.onload = (ev) => addAsset(ev.target.result);
-        reader.readAsDataURL(file);
-    }
-    e.target.value = '';
-});
-
-function addAsset(src) {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'draggable-asset';
-    
-    const img = document.createElement('img');
-    img.src = src;
-    img.draggable = false;
-    
-    const handle = document.createElement('div');
-    handle.className = 'resize-handle';
-
-    wrapper.appendChild(img);
-    wrapper.appendChild(handle);
-    
-    img.style.width = '150px';
-    img.style.height = 'auto';
-    img.style.display = 'block';
-
-    // Center it initially
-    const wrapperRect = canvasWrapper.getBoundingClientRect();
-    const startLeft = wrapperRect.width / 2 - 75;
-    const startTop = wrapperRect.height / 2 - 75;
-    wrapper.style.left = startLeft + 'px';
-    wrapper.style.top = startTop + 'px';
-
-    canvasWrapper.appendChild(wrapper);
-    initDrag(wrapper);
-    showToast('Asset added. Double-click to delete.', 'info');
-}
-
-function initDrag(el) {
-    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    let isResizing = false;
-    let startX, startY, startW;
-    const handle = el.querySelector('.resize-handle');
-    
-    el.onmousedown = dragMouseDown;
-    el.ontouchstart = (e) => { if(e.touches.length===1) dragMouseDown(e.touches[0]); };
-
-    function dragMouseDown(e) {
-        e.preventDefault();
-        if (e.target === handle) {
-            isResizing = true;
-            startX = e.clientX;
-            startW = el.offsetWidth;
-            document.onmousemove = resizeMove;
-            document.ontouchmove = (ev) => { if(ev.touches.length===1) resizeMove(ev.touches[0]); };
-            document.onmouseup = closeDragElement;
-            document.ontouchend = closeDragElement;
-        } else {
-            isResizing = false;
-            pos3 = e.clientX;
-            pos4 = e.clientY;
-            document.onmousemove = elementDrag;
-            document.ontouchmove = (ev) => { if(ev.touches.length===1) elementDrag(ev.touches[0]); };
-            document.onmouseup = closeDragElement;
-            document.ontouchend = closeDragElement;
-        }
-    }
-
-    function elementDrag(e) {
-        e.preventDefault();
-        pos1 = pos3 - e.clientX;
-        pos2 = pos4 - e.clientY;
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-        el.style.top = (el.offsetTop - pos2) + "px";
-        el.style.left = (el.offsetLeft - pos1) + "px";
-    }
-
-    function resizeMove(e) {
-        e.preventDefault();
-        let newW = startW + (e.clientX - startX);
-        if (newW > 30) el.style.width = newW + 'px';
-        el.style.height = 'auto'; 
-    }
-
-    function closeDragElement() {
-        document.onmouseup = null;
-        document.onmousemove = null;
-        document.ontouchend = null;
-        document.ontouchmove = null;
-        isResizing = false;
-    }
-    
-    // Double click to delete
-    el.ondblclick = () => {
-        el.remove();
-        showToast('Asset removed', 'info');
-    };
-}
+window.addEventListener('touchmove', draw, { passive: false });
+window.addEventListener('touchend', stopDrawing);
 
 /* ── Tool Listeners ── */
 btnBrush.addEventListener('click', () => {
@@ -899,8 +825,8 @@ sizeSlider.addEventListener('input', (e) => {
 btnClear.addEventListener('click', () => {
     setupCanvas();
     saveState();
-    document.querySelectorAll('.draggable-asset').forEach(el => el.remove());
-    showToast('Canvas & Assets cleared', 'info');
+    assetLayer.innerHTML = ""; // Clear assets too
+    showToast('Canvas cleared', 'info');
 });
 
 btnUndo.addEventListener('click', async () => {
@@ -919,6 +845,196 @@ btnRedo.addEventListener('click', async () => {
     }
 });
 
+/* ── Asset Management Logic ── */
+let activeAsset = null;
+let activeResize = null;
+let maxZ = 1;
+
+btnAsset.addEventListener('click', () => {
+    assetFileInput.click();
+});
+
+assetFileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        addAsset(event.target.result);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = ''; // Reset input
+});
+
+function addAsset(src) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'asset-wrapper';
+    
+    const img = document.createElement('img');
+    img.className = 'asset-img';
+    img.src = src;
+    img.draggable = false;
+
+    const delBtn = document.createElement('div');
+    delBtn.className = 'asset-handle delete';
+    delBtn.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+        wrapper.remove();
+    });
+    delBtn.addEventListener('touchstart', (e) => {
+        e.stopPropagation();
+        wrapper.remove();
+    });
+
+    const resizeHandle = document.createElement('div');
+    resizeHandle.className = 'asset-handle resize';
+    
+    wrapper.appendChild(img);
+    wrapper.appendChild(delBtn);
+    wrapper.appendChild(resizeHandle);
+    assetLayer.appendChild(wrapper);
+
+    // Set initial size & pos (center)
+    img.onload = () => {
+        const aspect = img.naturalWidth / img.naturalHeight;
+        let initW = 150;
+        let initH = initW / aspect;
+        wrapper.style.width = initW + 'px';
+        wrapper.style.height = initH + 'px';
+        
+        const rect = canvas.getBoundingClientRect();
+        wrapper.style.left = (rect.width / 2 - initW / 2) + 'px';
+        wrapper.style.top = (rect.height / 2 - initH / 2) + 'px';
+        wrapper.style.zIndex = ++maxZ;
+    };
+
+    // Drag listeners
+    wrapper.addEventListener('mousedown', (e) => startDragAsset(e, wrapper));
+    wrapper.addEventListener('touchstart', (e) => startDragAsset(e, wrapper), { passive: false });
+    
+    // Resize listeners
+    resizeHandle.addEventListener('mousedown', (e) => startResizeAsset(e, wrapper));
+    resizeHandle.addEventListener('touchstart', (e) => startResizeAsset(e, wrapper), { passive: false });
+}
+
+function startDragAsset(e, asset) {
+    e.preventDefault();
+    e.stopPropagation();
+    activeAsset = asset;
+    activeAsset.classList.add('active');
+    activeAsset.style.zIndex = ++maxZ;
+    
+    const touch = e.touches ? e.touches[0] : e;
+    const rect = asset.getBoundingClientRect();
+    activeAsset._dragOffsetX = touch.clientX - rect.left;
+    activeAsset._dragOffsetY = touch.clientY - rect.top;
+}
+
+function startResizeAsset(e, asset) {
+    e.preventDefault();
+    e.stopPropagation();
+    activeResize = asset;
+    activeResize.classList.add('active');
+    activeAsset.style.zIndex = ++maxZ;
+    
+    const touch = e.touches ? e.touches[0] : e;
+    activeResize._startW = asset.offsetWidth;
+    activeResize._startH = asset.offsetHeight;
+    activeResize._startRX = touch.clientX;
+    activeResize._startRY = touch.clientY;
+}
+
+window.addEventListener('mousemove', (e) => {
+    if (activeAsset) {
+        const touch = e.touches ? e.touches[0] : e;
+        const wrapperRect = document.getElementById('board-wrapper').getBoundingClientRect();
+        let x = touch.clientX - wrapperRect.left - activeAsset._dragOffsetX;
+        let y = touch.clientY - wrapperRect.top - activeAsset._dragOffsetY;
+        
+        // Clamp to wrapper bounds
+        x = Math.max(0, Math.min(x, wrapperRect.width - activeAsset.offsetWidth));
+        y = Math.max(0, Math.min(y, wrapperRect.height - activeAsset.offsetHeight));
+        
+        activeAsset.style.left = x + 'px';
+        activeAsset.style.top = y + 'px';
+    }
+    if (activeResize) {
+        const touch = e.touches ? e.touches[0] : e;
+        const dx = touch.clientX - activeResize._startRX;
+        const aspect = activeResize._startH / activeResize._startW;
+        let newW = Math.max(20, activeResize._startW + dx);
+        let newH = newW * aspect;
+        activeResize.style.width = newW + 'px';
+        activeResize.style.height = newH + 'px';
+    }
+});
+
+window.addEventListener('touchmove', (e) => {
+    if (activeAsset || activeResize) {
+        e.preventDefault();
+        if (activeAsset) {
+            const touch = e.touches[0];
+            const wrapperRect = document.getElementById('board-wrapper').getBoundingClientRect();
+            let x = touch.clientX - wrapperRect.left - activeAsset._dragOffsetX;
+            let y = touch.clientY - wrapperRect.top - activeAsset._dragOffsetY;
+            x = Math.max(0, Math.min(x, wrapperRect.width - activeAsset.offsetWidth));
+            y = Math.max(0, Math.min(y, wrapperRect.height - activeAsset.offsetHeight));
+            activeAsset.style.left = x + 'px';
+            activeAsset.style.top = y + 'px';
+        }
+        if (activeResize) {
+            const touch = e.touches[0];
+            const dx = touch.clientX - activeResize._startRX;
+            const aspect = activeResize._startH / activeResize._startW;
+            let newW = Math.max(20, activeResize._startW + dx);
+            let newH = newW * aspect;
+            activeResize.style.width = newW + 'px';
+            activeResize.style.height = newH + 'px';
+        }
+    }
+}, { passive: false });
+
+function stopAssetAction() {
+    if (activeAsset) activeAsset.classList.remove('active');
+    if (activeResize) activeResize.classList.remove('active');
+    activeAsset = null;
+    activeResize = null;
+}
+window.addEventListener('mouseup', stopAssetAction);
+window.addEventListener('touchend', stopAssetAction);
+
+/* ── Compositing Logic ── */
+function getCompositeImage() {
+    const wrapper = document.getElementById('board-wrapper');
+    const rect = wrapper.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = canvas.width;
+    tempCanvas.height = canvas.height;
+    const tempCtx = tempCanvas.getContext('2d');
+
+    // 1. Draw the base sketch
+    tempCtx.drawImage(canvas, 0, 0);
+
+    // 2. Draw all assets on top
+    const assets = assetLayer.querySelectorAll('.asset-wrapper');
+    assets.forEach(asset => {
+        const img = asset.querySelector('img');
+        if (img.complete) {
+            const x = asset.offsetLeft * scaleX;
+            const y = asset.offsetTop * scaleY;
+            const w = asset.offsetWidth * scaleX;
+            const h = asset.offsetHeight * scaleY;
+            tempCtx.drawImage(img, x, y, w, h);
+        }
+    });
+
+    return tempCanvas.toDataURL('image/png');
+}
+
+/* ── Download Logic ── */
 btnDownload.addEventListener('click', () => {
     if (resultImg.src && resultImg.src !== window.location.href) {
         const a = document.createElement('a');
@@ -931,17 +1047,19 @@ btnDownload.addEventListener('click', () => {
 /* ── UI Toggles ── */
 function setViewMode(mode) {
     if (mode === 'result') {
-        canvasWrapper.style.display = 'none';
+        canvas.style.display = 'none';
+        assetLayer.style.display = 'none';
         resultImg.style.display = 'block';
         segResult.classList.add('active');
         segInput.classList.remove('active');
         canvasMeta.textContent = 'Generated Result';
     } else {
-        canvasWrapper.style.display = 'inline-block';
+        canvas.style.display = 'block';
+        assetLayer.style.display = 'block';
         resultImg.style.display = 'none';
         segResult.classList.remove('active');
         segInput.classList.add('active');
-        canvasMeta.textContent = 'Draw a sketch or add assets';
+        canvasMeta.textContent = 'Draw a sketch or add assets to begin';
     }
 }
 segInput.addEventListener('click', () => setViewMode('input'));
@@ -1063,39 +1181,6 @@ function setRunningUI(on) {
     cancelBtn.style.display = on ? 'flex' : 'none';
 }
 
-async function getFlattenedDataURL() {
-    // Create temp canvas to merge base sketch + assets
-    const tempCanvas = document.createElement('canvas');
-    tempCanvas.width = canvas.width;
-    tempCanvas.height = canvas.height;
-    const tempCtx = tempCanvas.getContext('2d');
-    
-    tempCtx.fillStyle = '#ffffff';
-    tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-    tempCtx.drawImage(canvas, 0, 0);
-
-    const assets = document.querySelectorAll('.draggable-asset');
-    const wrapperRect = canvasWrapper.getBoundingClientRect();
-    const scaleX = canvas.width / wrapperRect.width;
-    const scaleY = canvas.height / wrapperRect.height;
-
-    for (let asset of assets) {
-        const img = asset.querySelector('img');
-        const rect = asset.getBoundingClientRect();
-        
-        const x = (rect.left - wrapperRect.left) * scaleX;
-        const y = (rect.top - wrapperRect.top) * scaleY;
-        const w = rect.width * scaleX;
-        const h = rect.height * scaleY;
-
-        if (!img.complete) {
-            await new Promise(resolve => { img.onload = resolve; });
-        }
-        tempCtx.drawImage(img, x, y, w, h);
-    }
-    return tempCanvas.toDataURL('image/png');
-}
-
 async function runEdit() {
     if (running) return;
     
@@ -1107,8 +1192,8 @@ async function runEdit() {
     showLoader('Submitting to queue…');
     btnDownload.disabled = true;
 
-    // Flatten sketch and assets
-    const sketch_b64 = await getFlattenedDataURL();
+    // Composite sketch and assets into a single image
+    const sketch_b64 = getCompositeImage(); 
     const selectedRatio = ratioSelect.value;
     const [targetW, targetH] = dims[selectedRatio];
 
@@ -1160,7 +1245,7 @@ async function runEdit() {
                     }
                     hideLoader('Done', 'done');
                     showToast('Image generated successfully', 'info');
-                    btnDownload.disabled = false;
+                    btnDownload.disabled = false; // Enable download
                 } else {
                     hideLoader('Done', 'done');
                 }