feat(data-weaver): Card dragging and content select - #461
Conversation
Import useEditor and call editor.select(id) on pointerdown when the card is unselected, stopping propagation so the initial press only selects (doesn't begin a drag). Make the actions bar start dragging only when the card is already selected. Also adjust the TLShapeId import to a named type import. This prevents tldraw's default select+drag gesture from starting on the first press and provides a clearer select-then-drag interaction.
Introduce a reusable IconDragIndicator SVG and render it inside CardBase actions. Update card styles to position the actions container relative and add .drag-indicator rules (size, position, color, opacity, responsive sizing). Changes: added drag_indicator.tsx, updated base.tsx to import and render the icon, and enhanced base.module.scss to style and place the indicator.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a drag indicator icon to the CardBase component and updates its selection and dragging behavior to prevent immediate dragging on unselected cards. The review feedback suggests restricting the card selection trigger to primary clicks to preserve context menus, using an interface instead of inline types for the icon's props, and replacing a magic percentage in the CSS with a dynamic calculation for better vertical alignment.
pablonoel
changed the title
nick-nlb
left a comment
nick-nlb
left a comment
There was a problem hiding this comment.
One of the commits connected to this PR has co-pilot as a coauthor (and so the PR does not pass CLA requirements).
Can we rebase/rewrite the commit to no longer include the co-authorship?
Add a guard in CardBase onPointerDown to ignore non-left mouse buttons (event.button !== 0), preventing right/middle clicks from triggering selection. Update .drag-indicator top to calc(var(--actions-height) / 2) to center it relative to the actions area instead of using a fixed 40% value.
66d6511 to
92a923d
Compare
nick-nlb
left a comment
nick-nlb
left a comment
There was a problem hiding this comment.
Thank you very much Pablo! Some comments inline.
| className={s.container} | ||
| data-is-loading={isLoading} | ||
| data-selection={selection} | ||
| // While unselected, a pointerdown anywhere on the card (content or |
There was a problem hiding this comment.
The behavior now in the "hand" (pan) mode is different. Is this intentional?
Previously, selecting cards or selecting text on cards was restricted to pointer mode, and pan mode would pan regardless. The older behavior feels natural to me.
There was a problem hiding this comment.
This is partially addressed, but when a card is single selected, pan mode no longer pans still. I could be persuaded on this, but this behavior feels inconsistent.
I.e., in pointer mode, select a card. Switch to pan mode (hand). Non selected cards behave differently than the single selected card (and there is no way to select or deselect a card in this mode - by design).
I think this would be resolved by having the single selected card still just behave like the others in pan mode.
Rename and restyle the card drag indicator to .icon-drag-indicator and add a muted action-content token. Update SCSS (fix/comment about Safari ghosting and use card-action-content-muted for the icon). Tighten CardBase pointer handling: don't intercept pointerdown when modifier keys are held or when the current tool isn't 'select' so pan/hand and multi-select work as expected. Also clarify comments about when events are allowed through for selection/drag behavior.
Include altKey in the modifier check in CardBase pointer handler so alt+click/drag
Selected cards were always stopping pointerdown propagation, even when the active tool was not select. This prevented pan interactions from working over cards. The fix only blocks propagation for the select tool, allowing hand/tool interactions to continue normally.
2 participants
Overview
Restrict card dragging to the actions bar, only once selected, privileging the text selection of the content inside the cards
Changes Made
Previously, pressing anywhere on a card (unselected) would fall through to tldraw's default select tool, which selects and starts dragging in one gesture. Now the first press only selects the card and allows the content "text selection" — dragging is only available afterward, and only from the actions bar.
Card intercepts pointerdown while unselected, selects itself via editor.select(), and stops propagation so tldraw's native select+drag gesture never fires (left-click only, so right-click/context-menu still works).
The actions bar's drag handle (startDragging) is now gated to only run when the card is already selected.
Add a drag indicator to the actions bar
A drag_indicator icon (new IconDragIndicator in primitives/icons) is shown at the right edge of the actions bar as a visual affordance that the bar is draggable. It's decorative only (not a button, no click handling) — sized/colored to match the other action icons and vertically centered against --actions-height.
Testing Done
Describe the steps you took to test these changes (please also list commands ran if possible).
Checklist
Note: Only Maintainers can approve and merge PRs. Expected initial review time: 3 business days.