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

@@ -83,7 +83,7 @@ export default function SidePanel({ width, resize, setResize }) {
className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${
resize && "bg-semi-grey-2"
}`}
onMouseDown={() => setResize(true)}
onPointerDown={(e) => e.isPrimary && setResize(true)}
>
<div className="w-1 border-x border-color h-1/6" />
</div>