draply-dev 1.4.0 → 1.4.1

package/bin/cli.js

@@ -223,7 +223,7 @@ Rules:
 - The content inside <search> must be an EXACT substring from the file snippet above (including indentation).
 - Update HTML/JSX inline styles or Tailwind classes appropriately.
 - REPLACE old style values if they exist, DO NOT duplicate keys!
-- If 'innerText' is provided in Changes, update the text content inside the target HTML element!
+- If 'innerText' is provided in Changes, update the text content inside the target HTML element! Use ONLY the exact text provided in the request. DO NOT add signatures, names, attributions, or "complete" the text based on context.
 - If 'src' is provided in Changes, update the src attribute of the target HTML element!
 
 Example response:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
   "author": "Arman",
   "type": "commonjs",

package/src/overlay.js

@@ -629,7 +629,8 @@
         <input type="file" id="__ast_file__" accept="image/*" style="display:none">
         <div id="__ast_list__" style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px"></div>
         <div id="__ast_hint__" style="font-size:10px;color:#44446a;line-height:1.5;display:none">
-          Click thumbnail → place on page<br>then drag to position
+          ✦ Click to <b>place</b><br>
+          ✦ Shift+Click to <b>replace</b> src/bg
         </div>
         <!-- Z-INDEX CONTROLS -->
         <div id="__ast_zctrl__" style="display:none;margin-top:6px;">
@@ -1335,19 +1336,27 @@
     e.preventDefault(); e.stopPropagation();
     if (!pendingAsset || !placingEl) return;
 
-    if (e.target.tagName.toLowerCase() === 'img') {
-      const prevSrc = e.target.getAttribute('src');
-      e.target.src = pendingAsset.src;
-      rec(e.target, { src: pendingAsset.src }, { src: prevSrc || '' });
-      toast('🖼️ Image replaced!');
+    if (e.shiftKey) {
+      // REPLACE mode
+      if (e.target.tagName.toLowerCase() === 'img') {
+        const prevSrc = e.target.getAttribute('src');
+        e.target.src = pendingAsset.src;
+        rec(e.target, { src: pendingAsset.src }, { src: prevSrc || '' });
+        toast('🖼️ Image source replaced!');
+      } else {
+        const cs = getComputedStyle(e.target);
+        const prevBg = cs.backgroundImage;
+        e.target.style.backgroundImage = `url('${pendingAsset.src}')`;
+        e.target.style.backgroundSize = 'cover';
+        e.target.style.backgroundPosition = 'center';
+        rec(e.target, { backgroundImage: `url('${pendingAsset.src}')`, backgroundSize: 'cover', backgroundPosition: 'center' }, { backgroundImage: prevBg });
+        toast('🖼️ Background image set!');
+      }
     } else {
-      const cs = getComputedStyle(e.target);
-      const prevBg = cs.backgroundImage;
-      e.target.style.backgroundImage = `url('${pendingAsset.src}')`;
-      e.target.style.backgroundSize = 'cover';
-      e.target.style.backgroundPosition = 'center';
-      rec(e.target, { backgroundImage: `url('${pendingAsset.src}')`, backgroundSize: 'cover', backgroundPosition: 'center' }, { backgroundImage: prevBg });
-      toast('🖼️ Background image set!');
+      // PLACE mode
+      const x = e.clientX - 60;
+      const y = e.clientY - 60;
+      placeAsset(pendingAsset, x, y, 120, 120);
     }
     cancelPlacing();
   }
@@ -1365,6 +1374,120 @@
     document.removeEventListener('keydown', onPlacingCancel);
   }
 
+  // Place asset permanently on page (absolute positioned)
+  function placeAsset(asset, x, y, w, h) {
+    const wrap = document.createElement('div');
+    wrap.className = 'ps-asset-placed';
+    const uid = 'ps-asset-' + Date.now();
+    wrap.id = uid;
+    wrap.style.cssText = `left:${Math.round(x)}px;top:${Math.round(y)}px;width:${w}px;height:${h}px;z-index:1;`;
+    wrap.innerHTML = `<img src="${asset.src}" draggable="false" alt="${asset.name}">`;
+    document.body.appendChild(wrap);
+
+    // Click to select this placed asset (for z-index control)
+    wrap.addEventListener('click', e => {
+      if (ps(e.target)) return;
+      selectPlaced(wrap);
+    });
+
+    // Make placed asset draggable
+    wrap.addEventListener('mousedown', e => {
+      if (ps(e.target)) return;
+      e.preventDefault();
+      selectPlaced(wrap);
+      astDragEl = wrap;
+      astDragSX = e.clientX; astDragSY = e.clientY;
+      astDragOL = parseFloat(wrap.style.left) || 0;
+      astDragOT = parseFloat(wrap.style.top) || 0;
+      wrap.style.cursor = 'grabbing';
+      state.dragging = true;
+    });
+
+    rec(wrap, {
+      src: asset.src,
+      left: Math.round(x) + 'px',
+      top: Math.round(y) + 'px',
+      width: w + 'px',
+      height: h + 'px',
+      'z-index': '1',
+    });
+
+    toast('✦ Placed — drag to reposition');
+    selectPlaced(wrap);
+    return wrap;
+  }
+
+  // Track selected placed asset for z-index controls
+  let selectedPlaced = null;
+  const zCtrl = document.getElementById('__ast_zctrl__');
+  const zVal = document.getElementById('__z_val__');
+  const zFront = document.getElementById('__z_front__');
+  const zBack = document.getElementById('__z_back__');
+  const zSet = document.getElementById('__z_set__');
+
+  function selectPlaced(wrap) {
+    // Deselect previous
+    if (selectedPlaced) selectedPlaced.style.outline = '';
+    selectedPlaced = wrap;
+    wrap.style.outline = '2px solid #7fff6e';
+    zVal.value = parseInt(wrap.style.zIndex) || 1;
+    zCtrl.style.display = 'block';
+  }
+
+  zFront.onclick = () => {
+    if (!selectedPlaced) return;
+    // Find max z-index of all placed assets
+    const max = Math.max(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
+    const nz = max + 1;
+    selectedPlaced.style.zIndex = nz;
+    zVal.value = nz;
+    rec(selectedPlaced, { 'z-index': String(nz) });
+    toast('▲ Moved to front (z:' + nz + ')');
+  };
+
+  zBack.onclick = () => {
+    if (!selectedPlaced) return;
+    const min = Math.min(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
+    const nz = min - 1;
+    selectedPlaced.style.zIndex = nz;
+    zVal.value = nz;
+    rec(selectedPlaced, { 'z-index': String(nz) });
+    toast('▼ Moved to back (z:' + nz + ')');
+  };
+
+  zSet.onclick = () => {
+    if (!selectedPlaced) return;
+    const nz = parseInt(zVal.value) || 0;
+    selectedPlaced.style.zIndex = nz;
+    rec(selectedPlaced, { 'z-index': String(nz) });
+    toast('z-index set to ' + nz);
+  };
+
+  zVal.onkeydown = e => { if (e.key === 'Enter') zSet.click(); };
+
+  // Drag placed assets
+  document.addEventListener('mousemove', e => {
+    if (!astDragEl || !state.dragging) return;
+    const dx = e.clientX - astDragSX, dy = e.clientY - astDragSY;
+    astDragEl.style.left = (astDragOL + dx) + 'px';
+    astDragEl.style.top = (astDragOT + dy) + 'px';
+    tip.textContent = `x:${Math.round(astDragOL + dx)}  y:${Math.round(astDragOT + dy)}`;
+    tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px';
+    tip.classList.add('v');
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (!astDragEl) return;
+    tip.classList.remove('v');
+    const cs = getComputedStyle(astDragEl);
+    rec(astDragEl, {
+      left: Math.round(parseFloat(cs.left)) + 'px',
+      top: Math.round(parseFloat(cs.top)) + 'px',
+    });
+    astDragEl.style.cursor = 'grab';
+    astDragEl = null;
+  });
+
   // ══════════════════════════════════════════
   // RECORD + SAVE
   // ══════════════════════════════════════════