Bug: Strokes Are Deleting Themselves

[tobias0409]

Describe the issue

I've encountered a problem when drawing with my pen tablet (Huion Inspiroy H950P). Whenever I draw a stroke, it gets deleted as soon as I try to draw a second stroke. Interestingly, this issue doesn't occur when I use my mouse—everything works perfectly fine then.

Steps to reproduce the issue

Given that I haven't faced any problems with other drawing tools, I suspect the issue isn't with the hardware. Unfortunately, I'm not sure how to reproduce the error consistently. The problem surfaced when I simply entered the homepage and started drawing.

Expected behavior

No response

Observed behavior

No response

Version information

unknown, current version of the web version

Platform

Firefox 126.0.1

Logs

No response

Additional information

https://github.com/personalizedrefrigerator/js-draw/assets/57797397/cfbf3694-20c5-4bfb-ade0-d67107a32722

[personalizedrefrigerator]

Thank you for reporting this!

Please consider attaching an input log. Input logs can be played back locally and/or converted into automated tests, which makes input issues much easier to debug.

(If you would like help with this, please let me know!)

[tobias0409]

Sure, here is the log file - I hope that's okay, otherwise I’ll be happy to do it again: js-draw_log.txt

And the video of it, maybe it is also useful:

https://github.com/personalizedrefrigerator/js-draw/assets/57797397/6bcc031a-0c1a-49c2-a95e-7bb1eadbbcd1

Thank you!

[personalizedrefrigerator]

The issue seems to be related to "isPrimary" becoming false while strokes are being drawn (even though the pointer ID is the same). If I replace all instances of isPrimary":false with isPrimary":true in the input log, strokes aren't deleted.

As such, I think that the issue is caused by these lines: https://github.com/personalizedrefrigerator/js-draw/blob/43382107b39bc9c7c0cf16e83d8b0e2bb82af615/packages/js-draw/src/tools/Pen.ts#L209-L212

The if (isPrimary) { should prevent other pointers from finishing a stroke before finished drawing with a pen. This is important on some devices where a user's hand can send many brief pointer events while a stroke is being drawn. This check is also very old, so it's possible that it is now redundant.

Here are a few possible workaround fixes:

1. When preprocessing pointer events, if the pointer is the only pointer and has previously had isPrimary: true, set isPrimary to true.
2. Extend the isPrimary check to also finalize strokes if the just-released pointer is the only pointer.
3. Remove the isPrimary check and instead only finalize strokes if the pen's pointer ID is the same as the pointer that started the stroke.

Thank you for the input log!

[personalizedrefrigerator]

I'm re-opening this until the fix has been included in a release.

[tobias0409]

Thanks for the fast fix.

I have already tested the new version under the commit: https://js-draw--pr73-work-fix-stroke-with-tuli6hu4.web.app/demo/index.html

The pen now works fine, although the selection tool seems to be buggy - I can't select anything with my pen tablet. I've created a log file at the URL above as before. Hope this helps and thanks again. js-draw_log.txt

https://github.com/personalizedrefrigerator/js-draw/assets/57797397/b42d7b00-a944-45d8-8543-6eccb26d36ed

[personalizedrefrigerator]

Thank you for reporting back! It looks like the selection tool is also configured to only work with primary tools:

https://github.com/personalizedrefrigerator/js-draw/blob/7304e866eb7a3e32c56ad2446573ef114131c48a/packages/js-draw/src/tools/SelectionTool/SelectionTool.ts#L107