Repository navigation
Harden touch reorder: one drag grip for layers and frames - #77
Merged
Merged
Conversation
Follow-up to #73's review. The grip is now a shared DragGrip component: - captures its pointer and only follows the finger that went down on it, so a second finger lifting no longer drops; pointercancel and lost capture end the drag without a drop - a long press on it doesn't open the row's context menu, and the row stops being natively draggable while the grip is held, so HTML5 drag can't take the gesture over - shows under (any-pointer: coarse), not (hover: none), so touch laptops and iPads with a trackpad get it too - the frame list in the inspector uses it as well: frame order was only reorderable by HTML5 drag, and its drag_indicator icon was decorative Tests drive real touches through CDP touch emulation, so they fail when the grip isn't visible under a finger; each test opens its own document, and pointercancel, second-finger and drop-into-group cases are covered. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MDZAQ82FMBa8WgPzfddQSU
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #73 (issue #65), whose review findings landed after the merge.
What changed
A new
editor/components/DragGrip.svelteholds the touch drag in one place. The layers tree and the inspector's frame list both use it.pointercancelandlostpointercaptureend the drag without a drop.preventDefaultoncontextmenuand stops it from bubbling, soonRowMenudoesn't open. The grip also sets-webkit-touch-callout: noneanduser-select: none. The row'sdraggableisfalsewhile its grip is held, so a long press can't start a native HTML5 drag on top of the pointer drag.(any-pointer: coarse)instead of(hover: none): touch laptops and iPads with a trackpad now get the grip.drag_indicatoricon did nothing. It is now a working grip. It stays visible with a mouse too, as the icon was before. This also removes the:global(.grip)rule inframes.svelte, which had been leaking onto every.gripin the app.Tests
tests/touch.tsturns on CDP touch emulation, which makesany-pointer: coarsematch, and sends real fingers throughInput.dispatchTouchEvent. The grip is located by hit-testing its centre, so the tests fail if the grip isn't visible on a coarse-pointer device. Each test opens its own document.touchCancelmoves nothing; a touch drop onto a group's middle puts the layer into the groupI checked that these tests catch real breakage: hiding the grip, removing the pointerId check, and treating a cancel as a drop each make them fail.
Still needed after merge
This was tested only in emulated Chromium. It still needs a check on a real phone in Android Chrome and iOS Safari: long-press behaviour, the context menu or callout, and whether the list scrolls while dragging.
🤖 Generated with Claude Code
https://claude.ai/code/session_01MDZAQ82FMBa8WgPzfddQSU