Butterfly
Butterfly copied to clipboard
LinwoodDev
[Enhancement]: Drawing outside of the window
What happened?
It thinks that input device keeps touching and interprets further clicks as double touches.
Version
2.0.0-beta.14
Platform
Web
Relevant log output
No response
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
Seems like the pointer up event doesn't fire if you go out of the window and release the input device. I will investigate how I can fix this
I tested it myself but couldn't replicate it anymore. Which browser do you use on which operating system?
Firefox 115.3.0esr on Linux Debian with i3 on Xorg, with a number of extensions installed and user-chrome.css snippets active.
Trying on a clean Firefox profile: the bug is still reproducible. Trying on a clean Chromium profile: not reproducible. Trying on Fennec (Firefox for Android): not reproducible.
Yeah, chromium works fine on me. The problem is that I don't get a PointerUp event if the window is unfocused: https://dartpad.dev/?id=21592fa42e503eb99da3cabd804c18fb I currently see no solution how to fix it.
Fixed in 2.0.0-beta.15, if you refresh the website, it should be fixed
Still reproducible on https://preview.butterfly.linwood.dev/ . Settings show 15'th revision.
Okay, it should now reset all inputs when unfocused. Can you test if the bug appears in the current version? (don't forget to refresh the site after loading so that it can fetch the newest version)
Behaviour changed now: it does not lock to zoom mode. Stroke being drawn gets frozen until I click again, it cancels the stroke entirely.
Better than before (I can continue using the app instead of being forced to reload the window and maybe lose unsaved content), but still suboptimal. User should not "be afraid of the edges". Not sure how to attain it though. Maybe some heuristics?
Now it does not erase the stroke, but also does not continue after cursor is offscreen.
It should work like in e.g. https://sketch.io/sketchpad/ - in the same Firefox I can continue drawing a stroke even when cursor is off the browser window. It also explicitly reacts to mouse button release even when cursor is away.
Can Butterfly work the same way?
The problem is I can't get the pointer id that leaves the app, and if you release the device when outside of the app, I don't get this event. I think we can keep this for now. The bug is fixed.
if you release the device when outside of the app, I don't get this event
Why sketch.io does receive a mouse up event even when cursor is away from Firefox window, as demonstrated on the video?
pointer id
If there is only one pointer (i.e. mouse, no multi-touch) then any mouse release is the pointer release.
Okay... I researched a bit and found out you need to capture the input. I will try it out now and notify you if I found a solution.
https://stackoverflow.com/questions/14407869/capture-mouseup-event-outside-of-browser-window
Okay I tried everything but couldn't find a solution. setPointerCapture(event.pointerId) does not work when listing on them. I will mark this as https://github.com/LinwoodDev/Butterfly/labels/good%20first%20issue if anyone wants to help me fixing this.
What is the drawing area widget? Where is it located in the code? Could you try to identify its dimensions and deactivate the pen when it reaches there without having to read the id
Hi, thanks for your interest. The drawaing area widget is this: https://github.com/LinwoodDev/Butterfly/blob/4716732b6309c20dd654a3bb4846f17a72ed033b/app/lib/views/view.dart#L380-L407.
I intentionally disabled this feature: https://github.com/LinwoodDev/Butterfly/blob/4716732b6309c20dd654a3bb4846f17a72ed033b/app/lib/views/view.dart#L374-L377. The problem is that I don't get a pointerup event to unregister the input and otherwise you will end up zooming with one input because the other input wasn't unregistered.
You can try it out if you remove the onExit callback and start the webserver with flutter run -d web-server and connect with firefox to this url
Can this work for you?
https://github.com/LinwoodDev/Butterfly/assets/47901429/2479137e-4c2e-4cec-a1fa-c8edd4d36b20
Fixed in 2.1.0-beta.4 thanks to @MrGumpIT in https://github.com/LinwoodDev/Butterfly/pull/646