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

@@ -24,9 +24,9 @@ function Table({ table, grab }) {
width={tableWidth}
height={height}
className="drop-shadow-lg rounded-md cursor-move"
onMouseDown={grab}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onPointerDown={(e) => e.isPrimary && grab(e)}
onPointerEnter={(e) => e.isPrimary && setIsHovered(true)}
onPointerLeave={(e) => e.isPrimary && setIsHovered(false)}
>
<div
className={`border-2 ${
@@ -46,8 +46,8 @@ function Table({ table, grab }) {
className={`${
i === table.fields.length - 1 ? "" : "border-b border-gray-400"
} h-[36px] px-2 py-1 flex justify-between`}
onMouseEnter={() => setHoveredField(i)}
onMouseLeave={() => setHoveredField(-1)}
onPointerEnter={(e) => e.isPrimary && setHoveredField(i)}
onPointerLeave={(e) => e.isPrimary && setHoveredField(-1)}
>
<div className={hoveredField === i ? "text-zinc-500" : ""}>
<button
@@ -185,9 +185,9 @@ export default function SimpleCanvas({ diagram, zoom }) {
return (
<svg
className="w-full h-full cursor-grab"
onMouseUp={releaseTable}
onMouseMove={moveTable}
onMouseLeave={releaseTable}
onPointerUp={(e) => e.isPrimary && releaseTable()}
onPointerMove={(e) => e.isPrimary && moveTable()}
onPointerLeave={(e) => e.isPrimary && releaseTable()}
>
<defs>
<pattern