Make pen input better​ supported

[Doublonmousse]

Description

For the moment pen input is not treated differentely from touch input leading to issues like #6286.

The app should be able to distinguish better touch and pen input (including mapping pen buttons to functions or distinguish the pen tip from the eraser tip for pen that provides both like the surface pen) so that one can draw with the pen and drag/zoom the canvas around. It would also be possible to use the eraser tip as an eraser rather than have the two sides of the pen doing the same thing.

Use case

For any windows tablet user with included pen (like surfaces) or having a graphical tablet (wacom or other).

Anything else?

This would require getting the input event information for the pen input from windows ink or wintab for Windows as well as doing the same thing on Mac OS (for people using a wacom tablet on mac).

This might be simple if the electron backend supports it but I'm not sure the support is actually there (unlike gtk/qt where there is a dedicated API for pen events) as I've yet to see any electron or flutter desktop app do that correctly.

It still seems to be fully supported on chromium though, the web version of OneNote works on edge (and distinguish with no issue touch input from pen input, including the distinction between pen and eraser tips)

Are you willing to submit a PR?

• [ ] Yes I'd like to help by submitting a PR!

[affine-issue-bot[bot]]

Issue Status: 🆕 *Untriaged

*🆕 Untriaged

The team has not yet reviewed the issue. We usually do it within one business day. Docs: https://github.com/toeverything/AFFiNE/blob/canary/docs/issue-triaging.md

^{_{This is an automatic reply by the bot.}}

[CatsJuice]

Thank you for your suggestion. We will further optimize the web experience on mobile devices. Also, for the best experience of tablet devices, we might have native client development plans.

[sensodejay]

My be this can help at least it works white wacom tablet (pen and eraser are correct detected) : https://github.com/pwa-builder/PWABuilder/tree/main/components/pwa-inking