feat: add basic touchscreen support

This is basically a migration from mouse events to
[pointer events](
  https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
).

The `PointerEvent` interface inherits all of the `MouseEvent`
properties, meaning that existing code can essentially be left
as-is. The only major change is making sure we only respond to the
"primary" pointer.

Known issues include:
* stylus hover is not detected
* touchscreens do not have a concept of hover, making it difficult
  to e.g. resize areas
* no touch gesture support, e.g. "pinch-to-zoom"
This commit is contained in:
Felix Zedén Yverås
2024-06-26 20:43:56 +02:00
parent 075a98d444
commit cdecf7c633
8 changed files with 95 additions and 67 deletions

View File

@@ -349,9 +349,9 @@ export default function WorkSpace() {
/>
<div
className="flex h-full overflow-y-auto"
onMouseUp={() => setResize(false)}
onMouseLeave={() => setResize(false)}
onMouseMove={handleResize}
onPointerUp={(e) => e.isPrimary && setResize(false)}
onPointerLeave={(e) => e.isPrimary && setResize(false)}
onPointerMove={(e) => e.isPrimary && handleResize(e)}
>
{layout.sidebar && (
<SidePanel resize={resize} setResize={setResize} width={width} />