Touch Drawings Lags Behind Cursor

[brettmorris]

Thanks for the awesome library! It's very handy and easy to use.

I discovered an issue with touch devices. When using the mouse to draw, the line starts at the initial mouse down position. You can see in the image below that when I start drawing at the edge of the grey pillar, the line starts from that location.

When using a touch device (Active stylus, finger on touch screen, touch emulation in chrome) you can see the line doesn't start until after you have moved away from the initial touch start location.

This makes it hard to draw precise lines and almost impossible to write text.

Possible solution:

I updated handleTouchStart to fire off a handlePointerMove initially so the drawing starts at the initial touch down location. This allows the line to start immediately without skipping. There maybe a better way to handle this but this worked great for me. 👍

handleTouchStart = e => {
    const { x, y } = this.getPointerPos(e);

    // Ensure the initial down position gets added to our line
    this.isPressing = true;
    this.handlePointerMove(e);

    this.lazy.update({ x, y }, { both: true });
    this.handleMouseDown(e);

    this.mouseHasMoved = true;
 };

[embiem]

Thanks for these insights!

I can't reproduce this issue on my Android device in Chrome. Which device & browser were you using to record these screencasts?

[brettmorris]

Hey Embiem, we were using chrome in Windows 10 on touch screen laptops. A thinkpad and a dell. Hope this helps.

Edit: If you don't have access to a touch device you can emulate one in chrome.

[embiem]

Hey Brett, I was able to reproduce and fix your issue. Thanks again for reporting it here!

If you have the time, I'd appreciate your confirmation whether the issue is actually fixed. Please use the current develop branch to test.

It will be released in version 1.1.1 soon.