From 33d69a11e197d9aced4ce0ecff58898314f26482 Mon Sep 17 00:00:00 2001 From: Adam Malczewski Date: Mon, 7 Sep 2026 17:34:27 +0900 Subject: fix(workspaces): tile-grid drag bugs — stuck drop, grab-offset follow, empty-cell hover MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three drag-interaction bugs on the Win8 tile home, one shared root cause (capture loss from DOM reordering) plus two wiring defects: - DROP NEVER COMMITS (stuck tile): displacePlace returned the displacement preview SORTED BY STREAM ORDER, so crossing stream positions moved the dragged tile's DOM node in the keyed {#each} and the browser dropped its pointer capture — pointerup never landed, phase stayed "dragging", the follow transform never cleared. displacePlace now preserves the INPUT render order (coordinates change only); placeAtCell re-sorts to stream order itself, so the commit's order-renumbering semantics are unchanged. - FOLLOW TRANSFORM OFFSET: the follow translate was raw pointer displacement, so a grab away from the tile's top-left made the tile jump (its ORIGIN rode the pointer). gridPointerDown records the grab offset (pointer minus the tile's rect) and followStyle cancels the tile's true grid anchor (targetCell origin), so the GRAB POINT tracks the pointer. - CAN'T HOVER EMPTY CELLS: pointer handling moved from per-tile elements to the GRID CONTAINER, which captures the pointer and is never re-parented, never pointer-events:none, never unmounted — move/up stream to it over empty cells and off-canvas, and capture can never be lost to a DOM move. Tests updated: the four order-sensitive displacePlace assertions now expect input render order (all coordinates unchanged — the plan's stream examples still hold); HomeTileGrid drag tests still pass via event bubbling. Verification: svelte-check 0 errors/0 warnings; vitest 1689/1689; biome clean on touched files; vite build succeeds. Pointer capture is browser-only — human check at the page: (1) drag a tile across columns, release — it must drop, not stay stuck; (2) grab a tile by its corner/center — the grabbed point must stay under the cursor; (3) hover/drag over empty cells past the last tile — the ghost + drop must keep tracking. --- src/features/workspaces/ui/HomeTileGrid.svelte | 79 +++++++++++++++++++++----- 1 file changed, 64 insertions(+), 15 deletions(-) (limited to 'src/features/workspaces/ui') diff --git a/src/features/workspaces/ui/HomeTileGrid.svelte b/src/features/workspaces/ui/HomeTileGrid.svelte index 46b3c4e..f50d902 100644 --- a/src/features/workspaces/ui/HomeTileGrid.svelte +++ b/src/features/workspaces/ui/HomeTileGrid.svelte @@ -57,6 +57,8 @@ let longPressTimer: ReturnType | undefined; /** Pointer position where the current press began (the follow transform base). */ let pressOrigin = $state<{ x: number; y: number } | null>(null); + /** Where within the pressed tile the pointer grabbed (its follow-transform base). */ + let grabOffset = $state<{ x: number; y: number } | null>(null); /** The tile mid-settle after a drop (excluded from FLIP until it lands). */ let settling = $state(null); @@ -90,6 +92,7 @@ // a CANCEL mid-drag flies the tile back to its committed slot. if (wasDragging && emit?.kind !== "drop") flyBack(wasDragging); pressOrigin = null; + grabOffset = null; } // Keep the long-press armed exactly while a TOUCH press is undecided. if (phase.kind === "pressing" && phase.touch) armLongPress(); @@ -142,10 +145,25 @@ return el?.closest("input, select, textarea, button, a") !== null; } - function tilePointerDown(e: PointerEvent, id: string): void { - if (e.button !== 0 || insideInteractive(e.target)) return; - // Capture so fast drags keep the pointer events on this element. - (e.currentTarget as HTMLElement)?.setPointerCapture?.(e.pointerId); + /** + * Drag gestures live on the GRID CONTAINER, not the tiles: the container is + * never re-parented, never toggles `pointer-events`, and never unmounts, so + * pointer capture set here survives the whole gesture. (A captured element + * whose DOM node MOVES loses its capture — the "stuck tile" bug — and an + * uncaptured pointer can't stream events over empty cells — the empty-cell + * bug.) Capture also keeps move/up flowing when the pointer leaves the grid. + */ + function gridPointerDown(e: PointerEvent): void { + if (e.button !== 0) return; + const tileEl = (e.target as Element | null)?.closest("[data-tile-id]"); + if (!tileEl || insideInteractive(e.target)) return; + const id = tileEl.getAttribute("data-tile-id"); + if (id === null) return; + gridEl?.setPointerCapture?.(e.pointerId); + // Where within the tile the pointer grabbed — the follow transform keeps + // THIS point under the pointer (not the tile's top-left origin). + const rect = tileEl.getBoundingClientRect(); + grabOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top }; pressOrigin = { x: e.clientX, y: e.clientY }; dispatch({ type: "pointer-down", @@ -156,8 +174,8 @@ }); } - function tilePointerMove(e: PointerEvent): void { - if (phase.kind === "idle" || insideInteractive(e.target)) return; + function gridPointerMove(e: PointerEvent): void { + if (phase.kind === "idle") return; dispatch({ type: "pointer-move", x: e.clientX, @@ -166,7 +184,7 @@ }); } - function tilePointerUp(): void { + function gridPointerUp(): void { if (phase.kind === "idle") return; dispatch({ type: "pointer-up" }); } @@ -352,11 +370,37 @@ return `grid-column: ${placement.col} / span ${span.colSpan}; grid-row: ${placement.row} / span ${span.rowSpan};`; } + /** + * The landing cell's top-left in CLIENT coordinates — where the CSS grid + * actually places a tile anchored at `targetCell` (the true column pitch: + * fixed in wide; the fluid column width PLUS the gap in tall). The follow + * transform cancels exactly this, so the grab point tracks the pointer. + */ + const targetCellOrigin = $derived.by<{ x: number; y: number } | null>(() => { + const el = gridEl; + if (!el || !targetCell) return null; + const rect = el.getBoundingClientRect(); + const wide = geometry.mode === "wide"; + const colPitch = wide ? pitchX : (rect.width + geometry.unit.gap) / geometry.flowCols; + return { + x: rect.left + (targetCell.col - 1) * colPitch, + y: rect.top + (targetCell.row - 1) * pitchY, + }; + }); + /** The dragged tile's follow transform (it keeps its committed slot). */ function followStyle(placement: Placement): string { - if (draggedId !== placement.id || !pressOrigin || phase.kind !== "dragging") return ""; - const dx = phase.x - pressOrigin.x; - const dy = phase.y - pressOrigin.y; + if (draggedId !== placement.id || !pressOrigin || !grabOffset || phase.kind !== "dragging") { + return ""; + } + const origin = targetCellOrigin; + if (!origin) return ""; + // Pointer minus the tile's GRID anchor minus the grab offset — the grab + // point the user pressed tracks the pointer. A raw pointer-displacement + // translate would ride the tile's origin instead and jump by the grab + // offset (a center grab snaps the tile's top-left under the pointer). + const dx = phase.x - origin.x - grabOffset.x; + const dy = phase.y - origin.y - grabOffset.y; return `transform: translate(${dx}px, ${dy}px) scale(1.05);`; } @@ -403,7 +447,16 @@ onscroll={updateScroll} onwheel={handleWheel} > -
+ +
dispatch({ type: "cancel" })} + > {#if ghostStyle && draggedPlacement}
tilePointerDown(e, placement.id)} - onpointermove={tilePointerMove} - onpointerup={tilePointerUp} - onpointercancel={() => dispatch({ type: "cancel" })} oncontextmenu={(e) => { e.preventDefault(); onSelect(placement.id); -- cgit v1.2.3