[BUG] DrawingView drawing continues even after mouse release

[shineoa]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

When user clicks inside the DrawingView control and starts drawing, later user releases the mous outside the DrawingView control. Afterwards user comes back the DrawingView control without pressing the mouse left button, the drawing will continue.

Expected Behavior

When user releases mouse outside the DrawingView should be considered as end of drawing. Thereafter, when user comes inside the control should not continue the drawing.

Steps To Reproduce

1. Click the mouse left button inside the DrawingView control
2. Do some drawing holding the mouse left button pressed
3. Without releasing the mouse button, move outside the DrawingView control
4. Release the mouse left button outside the DrawingView control
5. Move the mouse without pressing left button inside DrawingView
6. You will notice drawing is still continues, this is not the expected behavior.

Link to public reproduction project repository

Not yet

Environment

- .NET MAUI CommunityToolkit:6.0.0
- OS:Windows 10 Enterprise
- .NET MAUI:net 7.0

Anything else?

Mouse should be captured during the start of drawing, later MouseCapture release event should be listened and stop the drawing.

[VladislavAntonyuk]

I am not sure we can control if the user released the button outside the control. probably the event won't be triggered.
we may probably check if mouse is pressed on entering the DrawingView and start drawing in that case

[shineoa]

I think that is a decent solution for this problem.

[JonasSuchy]

I found a solution for anyone interested:

public class MyDrawingViewHandler : DrawingViewHandler
{
    private class MyMauiDrawingView : MauiDrawingView
    {
        protected override void OnPointerExited(PointerRoutedEventArgs e)
        {
            base.OnPointerExited(e);
            OnPointerReleased(e);
        }

        protected override void OnPointerEntered(PointerRoutedEventArgs e)
        {
            base.OnPointerEntered(e);
            if (e.Pointer.IsInContact)
                OnPointerPressed(e);
        }
    }

    protected override MauiDrawingView CreatePlatformView()
    {
        return new MyMauiDrawingView();
    }
}

This mostly replicates the behavior from other platforms, except that the drawing is restarted when the pointer enters the DrawingView, even if the mouse button was released and pressed again outside the bounds of the DrawingView.

[Toine-db]

I had the same issue that drawing lines continued out of bounds.
It wasn't a big issue for me because it wasn't visible to the user, it happend behind other controls.

But....when using DrawingView.GetImageStream() the lines out of bound suddenly appeared in the saved/captured image.

For this I made a workaround using CaptureAsync().....for anyone interested

        if (myDrawingView.Lines.Any())
        {
            var capturedControl = await MyDrawingViewContainer.CaptureAsync();
            if (capturedControl != null)
            {
                await using var stream = await capturedControl.OpenReadAsync();
                var data = await stream.GetBytesAsync();
                
                // save image as PNG or.....
            }
        }

This crops the image to the only visible part.