You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Given that I'm DNDing or resizing an event on the grid,
Then the event times should accurately reflect the event's position and size
Current Behavior
When DNDing or resizing, the event rectangle and times do not always match the mouse's position, especially when the mouse is close to the beginning or end of the event time.
Notice here that the times don't adjust as the mouse moves, and how the position doesn't move after the times change.
BadTimes.mov
Steps to Reproduce
Drag an event over the grid
While still holding the mouse down, move the mouse upwards slowly
Notice: the event's times/size aren't immediately updating correctly
Keep moving the mouse upwards
Notice: the event's size/times eventually update to the correct position
Possible Solution
We're currently relying on React's rendering cycle to take the mouse's position and compute the event rectangle. This passive approach doesn't handle edge cases when the times change, but not enough to adjust the event's size/position in turn.
Instead, improve the snaping implementation, which flips the approach. That is, instead of waiting for React to decide when to change an event's position/size, it prevents a change until one is warranted. Then it tells the event how to render more actively.
Where did this happen?
Local & Prod
Expected Behavior
Given that I'm DNDing or resizing an event on the grid,
Then the event times should accurately reflect the event's position and size
Current Behavior
When DNDing or resizing, the event rectangle and times do not always match the mouse's position, especially when the mouse is close to the beginning or end of the event time.
Notice here that the times don't adjust as the mouse moves, and how the position doesn't move after the times change.
BadTimes.mov
Steps to Reproduce
Possible Solution
We're currently relying on React's rendering cycle to take the mouse's position and compute the event rectangle. This passive approach doesn't handle edge cases when the times change, but not enough to adjust the event's size/position in turn.
Instead, improve the snaping implementation, which flips the approach. That is, instead of waiting for React to decide when to change an event's position/size, it prevents a change until one is warranted. Then it tells the event how to render more actively.
Reference how we're currently snapping here:
GridEventPreview.styled.ts:getItemStyles()
Other resources to help with snapping:
dnd-grid
'ssnapToGrid.js
dnd-grid
's repo, which also shows how to use grid constraints, render arbitrary child components, and reordering childrendnd-grid
's live demoContext
Dragging, dropping, and resizing are some of the most used actions for a calendar. Not having a good UX for this makes uses not want to use the app
The text was updated successfully, but these errors were encountered: