tldraw / tldraw-v1

A tiny little drawing app. This is the original 2021-2022 version, released under MIT.
https://old.tldraw.com
MIT License
61 stars 36 forks source link

[bug] Disconnect with mouse pointer and cursor on canvas when TLDrawApp is mounted on a modal #100

Closed bonjuruu closed 8 months ago

bonjuruu commented 1 year ago

Context

This TlDraw is implemented within NextJS and NextUI's modal component. When the TlDraw is mounted the modal size increase's and there seems to be a disconnect between the resize observer causing the pointer to be away from the actual mouse cursor.

This issue was brought up in the TlDraw discord server

Issue

https://user-images.githubusercontent.com/64837162/193004523-11aa8033-f1cf-40d3-b2fd-5e075576a4b5.mp4

How I've been dealing with it

It seems like the pointer fixes itself when the window is resized or the modal itself. I've been creating a timeout that resets the modal size to fix the cursor, however, it does not look very asethetically pleasing.

Example

I will try to create a codesandbox.io example once I have some time :)