draply-dev 1.5.3 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "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

@@ -1640,6 +1640,7 @@ document.addEventListener('mouseup', () => {
 // ══════════════════════════════════════════
 // Full history — every individual action
 const history = [];
+const redoHistory = [];
 
 function rec(el, props, prevPropsOverride, isCreate = false) {
   const selector = el.dataset.pixelshiftId ? null : gsel(el);
@@ -1695,7 +1696,14 @@ function rec(el, props, prevPropsOverride, isCreate = false) {
 
   // Push to history
   const hid = Date.now() + Math.random();
-  history.push({ hid, el, props, prevProps, selector: key, isCreate });
+  history.push({ 
+    hid, el, props, prevProps, selector: key, isCreate,
+    parent: isCreate ? el.parentElement : null,
+    nextSibling: isCreate ? el.nextElementSibling : null
+  });
+  
+  // Clear redo stack on new action
+  redoHistory.length = 0;
 
   updateUnsUI();
 }
@@ -1736,9 +1744,12 @@ function revertChange(h) {
     if (h.prevProps.innerHTML !== undefined) h.el.innerHTML = h.prevProps.innerHTML;
     if (h.prevProps.innerText !== undefined) h.el.innerText = h.prevProps.innerText;
   }
-  // Remove from history
+  // Remove from history and add to redo stack
   const idx = history.findIndex(x => x.hid === h.hid);
-  if (idx >= 0) history.splice(idx, 1);
+  if (idx >= 0) {
+    redoHistory.push(history[idx]);
+    history.splice(idx, 1);
+  }
   // Rebuild state.changes — preserve all original fields (#1, #2)
   state.changes = [];
   history.forEach(x => {
@@ -1761,6 +1772,58 @@ function revertChange(h) {
   toast('↩ Reverted');
 }
 
+function redoChange() {
+  if (redoHistory.length === 0) {
+    toast('Nothing to redo');
+    return;
+  }
+  const h = redoHistory.pop();
+  
+  if (h.isCreate) {
+    if (h.parent) {
+      if (h.nextSibling) {
+        h.parent.insertBefore(h.el, h.nextSibling);
+      } else {
+        h.parent.appendChild(h.el);
+      }
+    } else {
+      document.body.appendChild(h.el);
+    }
+  } else {
+    // Re-apply properties
+    Object.entries(h.props).forEach(([prop, val]) => {
+      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      h.el.style[camel] = val;
+    });
+    if (h.props.innerHTML !== undefined) h.el.innerHTML = h.props.innerHTML;
+    if (h.props.innerText !== undefined) h.el.innerText = h.props.innerText;
+  }
+  
+  history.push(h);
+
+  // Rebuild state.changes 
+  state.changes = [];
+  history.forEach(x => {
+    const key = x.selector;
+    const i = state.changes.findIndex(c => (c.pixelshiftId || c.selector) === key);
+    if (i >= 0) {
+      Object.assign(state.changes[i].props, x.props);
+    } else {
+      state.changes.push({
+        type: x.isCreate ? 'create' : 'css',
+        isCreate: x.isCreate || false,
+        selector: key,
+        props: { ...x.props },
+        outerHTML: x.isCreate && x.el ? x.el.outerHTML : undefined,
+        tagName: x.el ? x.el.tagName?.toLowerCase() : undefined
+      });
+    }
+  });
+
+  updateUnsUI();
+  toast('↷ Redone');
+}
+
 sv.addEventListener('click', async () => {
   // Check key config status
   let hasKey = false;
@@ -1819,13 +1882,13 @@ sv.addEventListener('click', async () => {
     toast('⚠ Server unreachable');
   }
 
-  state.changes = []; history.length = 0;
+  state.changes = []; history.length = 0; redoHistory.length = 0;
   sv.innerHTML = 'Save'; sv.textContent = 'Save';
   updateUnsUI();
 });
 
 document.getElementById('__uns_clear__').onclick = () => {
-  state.changes = []; history.length = 0; updateUnsUI();
+  state.changes = []; history.length = 0; redoHistory.length = 0; updateUnsUI();
   toast('🗑 History cleared');
 };
 
@@ -1840,7 +1903,7 @@ document.addEventListener('keydown', e => {
   if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
 
   // Ctrl+Z — Undo last change (#4)
-  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === 'z') {
     e.preventDefault();
     if (history.length > 0) {
       revertChange(history[history.length - 1]);
@@ -1850,10 +1913,10 @@ document.addEventListener('keydown', e => {
     return;
   }
 
-  // Ctrl+Shift+Z — Redo (not implemented yet, just prevent default)
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
+  // Ctrl+Shift+Z — Redo (implemented)
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'z') {
     e.preventDefault();
-    toast('Redo not available yet');
+    redoChange();
     return;
   }