Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event times are not accurate based on mouse position #210

Open
tyler-dane opened this issue Jan 1, 2025 · 1 comment
Open

Event times are not accurate based on mouse position #210

tyler-dane opened this issue Jan 1, 2025 · 1 comment
Assignees
Labels
bug Something isn't working

Comments

@tyler-dane
Copy link
Contributor

tyler-dane commented Jan 1, 2025

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

  1. Drag an event over the grid
  2. While still holding the mouse down, move the mouse upwards slowly
  3. Notice: the event's times/size aren't immediately updating correctly
  4. Keep moving the mouse upwards
  5. 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.

Reference how we're currently snapping here:

  • GridEventPreview.styled.ts:getItemStyles()

Other resources to help with snapping:

Context

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

@tyler-dane tyler-dane added the bug Something isn't working label Jan 1, 2025
@that-one-arab
Copy link
Contributor

Assign me this please

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: In progress
Development

No branches or pull requests

2 participants