super_editor
super_editor copied to clipboard
superlistapp
[SuperEditor][SuperReader][SuperTextField] Update iOS magnifier (Resolves #1958)
[SuperEditor][SuperReader][SuperTextField] Update iOS magnifier. Resolves #1958
The current appearance and behavior of our iOS magnifier doesn't match the native appearance and behavior.
Native iOS:
SuperEditor:
supereditor ios magnifier.webm
This PR adds entrance/exit animations and updates the size and shape of the magnifier:
https://github.com/superlistapp/super_editor/assets/7597082/f0de708a-2efa-4f58-b74c-05515f371e6c
Here's the appearance with slow animations:
https://github.com/superlistapp/super_editor/assets/7597082/a83a351c-5349-4a89-bab2-bbff88391a75
This PR also includes the fix for the issue iOS described in https://github.com/superlistapp/super_editor/issues/1957
@angelosilvestre can you show a zoomed out video of iOS with slow animations that clearly shows the appearance and disappearance of the native iOS magnifier? It's difficult to compare the zoomed out Super Editor version against that initial iOS video.
I'm curious if the Super Editor magnifier border should really be that wide. Also, given that we can't render a true squircle shape, I'm wondering if our intro and exit animation should go from a small circle to a rounded rectangle. Or, similarly, keep the same corner radius the whole time, which will naturally start as a circle and then become a rounded rectangle.
@matthew-carroll
https://github.com/superlistapp/super_editor/assets/7597082/0f43cf5a-f440-4c6f-a39d-a70e5cc18ec7
@matthew-carroll I updated the animation. At the beginning of the animation the shape looks like more with a pill
https://github.com/superlistapp/super_editor/assets/7597082/8a0cf6ec-0049-4135-a738-8ddfec628b90
With slow animations:
https://github.com/superlistapp/super_editor/assets/7597082/f1c207c8-042d-45f7-88d9-f5d9214aca88
@matthew-carroll I tried to simplify the usage of magic numbers and adapted the code to take the pixel density into consideration:
https://github.com/superlistapp/super_editor/assets/7597082/0ad0f4a9-0cfc-4938-b9cb-87c99d056ddb
With slow animations:
https://github.com/superlistapp/super_editor/assets/7597082/afec3b0c-9ba3-401f-a839-d6dae78667a3
@angelosilvestre It looks like there are multiple Offsets that I assumed were DIP values, which were actually pixel values. Can you please carefully document each such Offset so that the reader knows whether he's reading a DIP value or a pixel value. Otherwise, users won't know whether they have the responsibility to divide by the pixel density, or whether it's done for them.