mirror of
https://github.com/drawdb-io/drawdb.git
synced 2026-02-12 02:00:40 +08:00
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user