diff options
| author | Adam Malczewski <[email protected]> | 2026-09-07 17:34:27 +0900 |
|---|---|---|
| committer | Adam Malczewski <[email protected]> | 2026-09-07 17:34:27 +0900 |
| commit | 33d69a11e197d9aced4ce0ecff58898314f26482 (patch) | |
| tree | 70f980dffa18c7796e64a8ebc43672755f4f9ec8 /src/features/workspaces/logic/tile-layout.ts | |
| parent | c43250c16356be523201c2a685d527936aeea0bd (diff) | |
| download | dispatch-web-33d69a11e197d9aced4ce0ecff58898314f26482.tar.gz dispatch-web-33d69a11e197d9aced4ce0ecff58898314f26482.zip | |
fix(workspaces): tile-grid drag bugs — stuck drop, grab-offset follow, empty-cell hover
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.
Diffstat (limited to 'src/features/workspaces/logic/tile-layout.ts')
| -rw-r--r-- | src/features/workspaces/logic/tile-layout.ts | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/features/workspaces/logic/tile-layout.ts b/src/features/workspaces/logic/tile-layout.ts index 4b5c89c..c4720d3 100644 --- a/src/features/workspaces/logic/tile-layout.ts +++ b/src/features/workspaces/logic/tile-layout.ts @@ -413,7 +413,9 @@ function firstFitFrom( * one; the displaced re-anchor at the next fitting slot forward (spans ride * along; a span that can't fit the fixed cross-axis anywhere forward wraps to * the first fitting slot — it must land somewhere). Pure: placements + drop - * in, a NEW placements array out (stream order). + * in, a NEW placements array out — in the INPUT array order (only coordinates + * change). A keyed `{#each}` over the result therefore never moves DOM nodes; + * moving a captured element drops its pointer capture — the "stuck tile" bug. */ export function displacePlace( placements: readonly Placement[], @@ -447,9 +449,12 @@ export function displacePlace( occupy(occupied, slot.col, slot.row, colSpan, rowSpan); placed.push({ ...placement, col: slot.col, row: slot.row }); } - return placed.sort( - (a, b) => fillOrderKey(a.col, a.row, geometry) - fillOrderKey(b.col, b.row, geometry), - ); + // Return in the INPUT render order (coordinates change only): the live drag + // preview feeds a keyed `{#each}`, and a reordered array moves the DOM nodes + // — a moved captured element silently loses pointer capture (the stuck-tile + // bug). The commit path re-sorts to stream order itself (`placeAtCell`). + const byId = new Map(placed.map((placement) => [placement.id, placement])); + return placements.map((placement) => byId.get(placement.id) ?? placement); } /** @@ -468,7 +473,11 @@ export function placeAtCell( // An unknown dragged id changes nothing (order-sorted copy — the op's // canonical no-op shape, like `moveTile` before it). if (!tiles.some((tile) => tile.id === id)) return sortTiles(tiles); - const displaced = displacePlace(pack(tiles, geometry), id, cell, geometry); + // displacePlace preserves the input RENDER order for the live preview; the + // commit pins + renumbers in STREAM order, so re-sort before pinning. + const displaced = displacePlace(pack(tiles, geometry), id, cell, geometry) + .slice() + .sort((a, b) => fillOrderKey(a.col, a.row, geometry) - fillOrderKey(b.col, b.row, geometry)); const result: TileLayoutEntry[] = []; for (const placement of displaced) { const entry = tiles.find((tile) => tile.id === placement.id); |
