When used in iframe, mouseup outside viewport is not detected

[jkjustjoshing]

If you have a question, please ask it on StackOverflow and use signature-pad tag instead of creating an issue.

Do you want to request a feature or report a bug? Bug

What is the current behavior?

1. Load signature_pad in an iframe
2. On desktop, start drawing. Drag the mouse outside the iframe (but inside the containing page - that might not matter).
3. Release the mouse outside the iframe viewport
4. Hover the iframe. Currently, the line will continue drawing even though the user isn't holding down their mouse button

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/szimek/h80phxyr/).

What is the expected behavior? When the user mouses up, the drawing stops even if the mouseup was outside the viewport.

window.addEventListener('mouseup') can detect a mouseup outside the viewport as long as the mousedown was inside the viewport, which is the case we want to detect. Not sure how atouchend` works in this case or if there are any touchscreen considerations.

Which versions of SignaturePad, and which browser / device are affected by this issue? Did this work in previous versions of SignaturePad? Chromium 110, signature_pad version 4.1.5

[UziTech]

I think a better fix would be to end the line on move if the button isn't pressed. That would fix mouseup outside the browser as well.

[jkjustjoshing]

@UziTech that could work, but I have a concern. Your solution would not trigger the endStroke event until (and unless) the user mouses back over the iframe. If they release the mouse outside the iframe viewport and never reenter it, the endStroke event will never fire. With my proposed solution that event could still fire for that edge case.

[UziTech]

We should probably do both, fire endStroke on window.mouseup or window.mousemove if mouseup was never called.

My only concern with using window instead of canvas.ownerDocument is breaking #636 if the canvas is in a popup window.

[UziTech]

I created a POC of how I think the event listeners should change in #703. I listen for pointerup on window and canvas.ownerDocument.

I also added pointerleave and pointerenter liseners to end a stroke on leave and begin again on enter if the user keeps the button pressed. This has the benefit of not drawing a line between the points where the user left and reentered.

[syberx]

same i can not use with DPI check when i use php include :(

[UziTech]

this should be fixed in v5