[Enhancement]: Drawing outside of the window

[vi]

What happened?

It thinks that input device keeps touching and interprets further clicks as double touches.

bottombug.webm

Version

2.0.0-beta.14

Platform

Web

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[CodeDoctorDE]

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

[CodeDoctorDE]

I tested it myself but couldn't replicate it anymore.
Which browser do you use on which operating system?

[vi]

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.

[CodeDoctorDE]

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.

[CodeDoctorDE]

Fixed in 2.0.0-beta.15, if you refresh the website, it should be fixed

[vi]

Still reproducible on https://preview.butterfly.linwood.dev/ . Settings show 15'th revision.

[CodeDoctorDE]

Oh, I will look at it again...

[CodeDoctorDE]

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)

[vi]

Behaviour changed now: it does not lock to zoom mode. Stroke being drawn gets frozen until I click again, it cancels the stroke entirely.

disappear.webm

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?

[CodeDoctorDE]

Oh you are right. Thanks for testing, i will try to fix this

[CodeDoctorDE]

I think now it should be fixed

[vi]

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.

sketchio.webm

Can Butterfly work the same way?

[CodeDoctorDE]

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.

[vi]

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.

[CodeDoctorDE]

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

[CodeDoctorDE]

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 good first issue Good for newcomers if anyone wants to help me fixing this.

[MrGumpIT]

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

[CodeDoctorDE]

Hi,
thanks for your interest.
The drawaing area widget is this:

Butterfly/app/lib/views/view.dart

Lines 380 to 407 in 4716732

	CustomPaint(
	size: Size.infinite,
	foregroundPainter: ForegroundPainter(
	cubit.getForegrounds(),
	state.data,
	state.page,
	state.info,
	Theme.of(context).colorScheme,
	transform,
	cubit.state.selection,
	currentIndex.cameraViewport.utilities,
	),
	painter: ViewPainter(
	state.data,
	state.page,
	state.info,
	cameraViewport:
	currentIndex.cameraViewport,
	transform: transform,
	invisibleLayers: state.invisibleLayers,
	states: currentIndex.allRendererStates,
	currentArea: state.currentArea,
	colorScheme:
	Theme.of(context).colorScheme,
	),
	isComplex: true,
	willChange: true,
	)

.

I intentionally disabled this feature:

Butterfly/app/lib/views/view.dart

Lines 374 to 377 in 4716732

	onExit: kIsWeb
	? (event) => cubit.resetInput(
	context.read<DocumentBloc>())
	: null,

.
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

[MrGumpIT]

Can this work for you?

Recording.2024-03-20.101314.mp4

[CodeDoctorDE]

Fixed in 2.1.0-beta.4 thanks to @MrGumpIT in #646