card swap animation

Author: mult1v4c

css/cards.css

@@ -4,71 +4,54 @@
 
 .app-card {
     background-color: var(--bg-surface);
-    border: 1px solid transparent; /* Default transparent border */
+    border: 1px solid transparent;
     border-radius: var(--radius);
     display: flex; flex-direction: column; justify-content: center; align-items: center;
     position: relative; z-index: 10;
 
-    /* Smooth transitions for Grid Swapping & Theme Toggles */
-    transition: box-shadow 0.2s, background-color 0.2s, border-color 0.2s,
-                grid-column 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
-                grid-row 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    transition: box-shadow 0.2s, background-color 0.2s, border-color 0.2s;
 
     color: var(--text-main);
     overflow: hidden; min-height: 0; min-width: 0;
 }
 
-/* --- THEME TOGGLES --- */
-
 /* Shadows */
 body.shadow-on .app-card {
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
 
-/* Outlines */
-/* This overrides the transparent border above */
 .dashboard-container.show-outlines .app-card {
     border-color: var(--border-dim);
 }
 
-/* --- EDIT MODE --- */
 .dashboard-container.edit-mode .app-card {
     cursor: grab;
-    border-color: var(--border-bright); /* Edit mode forces outlines */
+    border-color: var(--border-bright);
     border-style: solid;
     animation: shake-gentle 0.25s infinite;
 }
 .dashboard-container.edit-mode .app-card:hover { border-color: var(--brand-primary); }
 
-/* MOVING STATE (Floating under mouse) */
 .dashboard-container.edit-mode .app-card.moving {
     cursor: grabbing;
     opacity: 0.9;
     z-index: 1000;
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Heavier shadow when dragging */
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
     animation: none;
     transform: scale(1.02);
     transition: none;
 }
 
-/* GHOST PLACEHOLDER */
+/* Base Ghost */
 .grid-ghost {
-    background: rgba(255, 255, 255, 0.03);
-    border: 2px dashed var(--text-muted);
+    border: 2px dashed rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.05);
     border-radius: var(--radius);
     z-index: 1;
-    opacity: 0.5;
     pointer-events: none;
-    transition: grid-column 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
-                grid-row 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.app-card.collision {
-    border-color: var(--status-error) !important;
-    background-color: rgb(from var(--status-error) r g b / 20%) !important;
+    transition: all 0.1s ease-out;
 }
 
-/* Base Ghost Styles (Refining the ghost visuals) */
 .grid-ghost.ghost-valid {
     border-color: var(--status-success);
     background: rgba(var(--status-success-rgb, 161, 181, 108), 0.1);
@@ -91,7 +74,6 @@ body.shadow-on .app-card {
     100% { opacity: 0.4; }
 }
 
-/* Controls */
 .edit-btn, .delete-btn {
     position: absolute; width: 30px; height: 30px;
     border-radius: 4px; color: white;

js/events.js

@@ -1,54 +1,35 @@
+// js/events.js
 import { state, setState } from "./state.js";
 import { qs } from "./dom.js";
 import { renderGrid, applyGridPosition, saveGridState } from "./grid.js";
 import { VirtualGrid } from "./grid/virtualGrid.js";
 import { showToast } from "./ui/toasts.js";
-import { logger } from "./logger.js"; // Import Logger
 
-// Drag State
 let actItem = null;
 let ghosts = [];
 let dragOffsetX, dragOffsetY;
 let gridRect;
 let updateFrame = null;
 let lastMoveResult = null;
-let mode = null; // 'move' or 'resize'
-
-// Resize State
+let mode = null;
 let initResizeX, initResizeY;
 let startCols, startRows;
 
 export function initGlobalEvents() {
     const dashboard = qs('#dashboard');
-    // NOTE: We don't cache gridLines here anymore to prevent stale references
-
-    if (!dashboard) {
-        setTimeout(initGlobalEvents, 100);
-        return;
-    }
+    if (!dashboard) { setTimeout(initGlobalEvents, 100); return; }
 
     dashboard.addEventListener('mousedown', e => {
         if (!state.ui.editMode) return;
         if (e.target.closest('.delete-btn') || e.target.closest('.edit-btn')) return;
-
         const card = e.target.closest('.app-card');
         if (!card) return;
-
-        // Prevent default browser dragging/selection
         e.preventDefault();
-
         actItem = card;
-
-        // REFRESH GRID RECT: Always get the fresh element
         const gridLines = qs('#gridLines');
-        if (gridLines) {
-            gridRect = gridLines.getBoundingClientRect();
-        } else {
-            console.error("GridLines missing!");
-            return;
-        }
+        if (gridLines) gridRect = gridLines.getBoundingClientRect();
+        else return;
 
-        // 1. CHECK MODE
         if (e.target.closest('.resize-handle')) {
             mode = 'resize';
             initResizeX = e.clientX;
@@ -57,11 +38,9 @@ export function initGlobalEvents() {
             startRows = parseInt(actItem.dataset.rows) || 1;
         } else {
             mode = 'move';
-            // Setup Drag Visuals
             const rect = actItem.getBoundingClientRect();
             dragOffsetX = e.clientX - rect.left;
             dragOffsetY = e.clientY - rect.top;
-
             actItem.classList.add('moving');
             actItem.style.width = rect.width + 'px';
             actItem.style.height = rect.height + 'px';
@@ -70,60 +49,40 @@ export function initGlobalEvents() {
             actItem.style.top = rect.top + 'px';
             actItem.style.zIndex = '1000';
         }
-
         document.addEventListener('mousemove', onMouseMove);
         document.addEventListener('mouseup', onMouseUp);
     });
 
     function onMouseMove(e) {
         if (!actItem) return;
-
-        // Update visual position immediately (smoothness)
         if (mode === 'move') {
             actItem.style.left = (e.clientX - dragOffsetX) + 'px';
             actItem.style.top = (e.clientY - dragOffsetY) + 'px';
         }
-
-        // Throttle logic with RAF
         if (updateFrame) return;
-
         updateFrame = requestAnimationFrame(() => {
             try {
                 if (mode === 'move') handleMoveLogic(e);
                 else if (mode === 'resize') handleResizeLogic(e);
-            } catch (err) {
-                // LOG THE HIDDEN BUG
-                console.error("Critical Drag Error:", err);
-                // Emergency cleanup to prevent "stuck" state
-                onMouseUp();
-            } finally {
-                // CRITICAL: Always release the lock
-                updateFrame = null;
-            }
+            } catch (err) { console.error(err); onMouseUp(); }
+            finally { updateFrame = null; }
         });
     }
 
     function handleMoveLogic(e) {
         const cols = state.settings.theme.gridColumns || 10;
         const rows = state.settings.theme.gridRows || 6;
-
         const cW = gridRect.width > 0 ? gridRect.width / cols : 100;
         const cH = gridRect.height > 0 ? gridRect.height / rows : 100;
-
         const rawX = e.clientX - dragOffsetX - gridRect.left;
         const rawY = e.clientY - dragOffsetY - gridRect.top;
-
         let nX = Math.round(rawX / cW) + 1;
         let nY = Math.round(rawY / cH) + 1;
-
         const appId = parseInt(actItem.dataset.id);
         const sourceApp = state.apps.find(a => a.id === appId);
-
         if (!sourceApp) return;
-
         const vGrid = new VirtualGrid(cols, rows, state.apps);
         const result = vGrid.checkMove(sourceApp, nX, nY);
-
         lastMoveResult = result;
         renderGhosts(result, sourceApp);
     }
@@ -133,22 +92,16 @@ export function initGlobalEvents() {
         const rows = state.settings.theme.gridRows || 6;
         const cW = gridRect.width > 0 ? gridRect.width / cols : 100;
         const cH = gridRect.height > 0 ? gridRect.height / rows : 100;
-
         const deltaX = Math.round((e.clientX - initResizeX) / cW);
         const deltaY = Math.round((e.clientY - initResizeY) / cH);
-
         let newCols = Math.max(1, startCols + deltaX);
         let newRows = Math.max(1, startRows + deltaY);
-
         const x = parseInt(actItem.dataset.x);
         const y = parseInt(actItem.dataset.y);
-
         if (x + newCols - 1 > cols) newCols = cols - x + 1;
         if (y + newRows - 1 > rows) newRows = rows - y + 1;
-
         const vGrid = new VirtualGrid(cols, rows, state.apps);
         const appId = parseInt(actItem.dataset.id);
-
         if (vGrid.isAreaFree(x, y, newCols, newRows, appId)) {
             actItem.style.gridColumnEnd = `span ${newCols}`;
             actItem.style.gridRowEnd = `span ${newRows}`;
@@ -160,9 +113,7 @@ export function initGlobalEvents() {
     function renderGhosts(result, sourceApp) {
         ghosts.forEach(g => g.remove());
         ghosts = [];
-
         const dashboard = qs('#dashboard');
-
         const mainGhost = createGhost(
             result.targetX || sourceApp.x,
             result.targetY || sourceApp.y,
@@ -172,16 +123,9 @@ export function initGlobalEvents() {
         );
         dashboard.appendChild(mainGhost);
         ghosts.push(mainGhost);
-
         if (result.possible && result.displaced && result.displaced.length > 0) {
             result.displaced.forEach(disp => {
-                const g = createGhost(
-                    disp.nx,
-                    disp.ny,
-                    disp.app.cols,
-                    disp.app.rows,
-                    'displaced'
-                );
+                const g = createGhost(disp.nx, disp.ny, disp.app.cols, disp.app.rows, 'displaced');
                 dashboard.appendChild(g);
                 ghosts.push(g);
             });
@@ -198,24 +142,14 @@ export function initGlobalEvents() {
     function onMouseUp() {
         document.removeEventListener('mousemove', onMouseMove);
         document.removeEventListener('mouseup', onMouseUp);
-
-        // Safety: Cancel any pending frame
-        if (updateFrame) {
-            cancelAnimationFrame(updateFrame);
-            updateFrame = null;
-        }
-
+        if (updateFrame) { cancelAnimationFrame(updateFrame); updateFrame = null; }
         ghosts.forEach(g => g.remove());
         ghosts = [];
 
         if (!actItem) return;
-
         const appId = parseInt(actItem.dataset.id);
         const app = state.apps.find(a => a.id === appId);
-
         if (!app) {
-            console.error("App state missing for ID", appId);
-            // Reset visual state
             actItem.classList.remove('moving');
             actItem.style = '';
             if (actItem.dataset.x) applyGridPosition(actItem, actItem.dataset.x, actItem.dataset.y, actItem.dataset.cols, actItem.dataset.rows);
@@ -224,6 +158,9 @@ export function initGlobalEvents() {
         }
 
         if (mode === 'move') {
+            // CAPTURE DROP POSITION BEFORE RESET
+            const dropRect = actItem.getBoundingClientRect();
+
             actItem.classList.remove('moving');
             actItem.style.position = '';
             actItem.style.width = '';
@@ -235,18 +172,15 @@ export function initGlobalEvents() {
             if (lastMoveResult && lastMoveResult.possible) {
                 app.x = lastMoveResult.targetX;
                 app.y = lastMoveResult.targetY;
-
                 if (lastMoveResult.displaced) {
                     lastMoveResult.displaced.forEach(disp => {
                         const target = state.apps.find(a => a.id === disp.app.id);
-                        if (target) {
-                            target.x = disp.nx;
-                            target.y = disp.ny;
-                        }
+                        if (target) { target.x = disp.nx; target.y = disp.ny; }
                     });
                 }
                 saveGridState();
-                renderGrid();
+                // PASS DROP RECT TO RENDERER FOR ANIMATION
+                renderGrid({ id: app.id, rect: dropRect });
             } else {
                 applyGridPosition(actItem, app.x, app.y, app.cols, app.rows);
                 renderGrid();
@@ -272,15 +206,13 @@ export function initGlobalEvents() {
     }
 }
 
-// Basic toggle
 export function toggleEditMode() {
     const isEdit = !state.ui.editMode;
     setState('ui.editMode', isEdit);
     const dashboard = qs('#dashboard');
     const editBtn = qs('#editBtn');
     const addBtn = qs('#addBtn');
     const clearBtn = qs('#clearBtn');
-
     if (isEdit) {
         dashboard.classList.add('edit-mode');
         editBtn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i>';