feat(voronoi): restore touch events support

plouc · May 7, 2024 · 5d8a0e8 · 5d8a0e8
1 parent 4727348
commit 5d8a0e8
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 37 deletions.
diff --git a/packages/core/src/components/dots/DotsItem.js b/packages/core/src/components/dots/DotsItem.js
@@ -27,11 +27,6 @@ const DotsItem = ({
         immediate: !animate,
     })
 
-    console.log({
-        bare: theme.dots.text,
-        sanitized: sanitizeSvgTextStyle(theme.dots.text),
-    })
-
     return (
         <animated.g transform={animatedProps.transform} style={{ pointerEvents: 'none' }}>
             {createElement(symbol, {

diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js
@@ -372,6 +372,7 @@ describe('touch events with slices', () => {
         height: 300,
         data: data,
         animate: false,
+        useMesh: false,
         enableSlices: 'x',
     }
 

diff --git a/packages/voronoi/src/Mesh.tsx b/packages/voronoi/src/Mesh.tsx
@@ -43,10 +43,10 @@ export const Mesh = <Node,>({
     onMouseMove,
     onMouseLeave,
     onClick,
-    // onTouchStart,
-    // onTouchMove,
-    // onTouchEnd,
-    // enableTouchCrosshair = false,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    enableTouchCrosshair = false,
     detectionRadius = Infinity,
     tooltip,
     tooltipPosition = defaultTooltipPosition,
@@ -64,22 +64,34 @@ export const Mesh = <Node,>({
         debug,
     })
 
-    const { current, handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } =
-        useMeshEvents<Node, SVGRectElement>({
-            elementRef,
-            nodes,
-            delaunay,
-            margin,
-            detectionRadius,
-            setCurrent,
-            onMouseEnter,
-            onMouseMove,
-            onMouseLeave,
-            onClick,
-            tooltip,
-            tooltipPosition,
-            tooltipAnchor,
-        })
+    const {
+        current,
+        handleMouseEnter,
+        handleMouseMove,
+        handleMouseLeave,
+        handleClick,
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd,
+    } = useMeshEvents<Node, SVGRectElement>({
+        elementRef,
+        nodes,
+        delaunay,
+        margin,
+        detectionRadius,
+        setCurrent,
+        onMouseEnter,
+        onMouseMove,
+        onMouseLeave,
+        onClick,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        enableTouchCrosshair,
+        tooltip,
+        tooltipPosition,
+        tooltipAnchor,
+    })
 
     const voronoiPath = useMemo(() => {
         if (debug && voronoi) return voronoi.render()
@@ -116,9 +128,9 @@ export const Mesh = <Node,>({
                 onMouseEnter={handleMouseEnter}
                 onMouseMove={handleMouseMove}
                 onMouseLeave={handleMouseLeave}
-                // onTouchStart={handleTouchStart}
-                // onTouchMove={handleTouchMove}
-                // onTouchEnd={handleTouchEnd}
+                onTouchStart={handleTouchStart}
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
                 onClick={handleClick}
             />
         </g>

diff --git a/packages/voronoi/src/hooks.ts b/packages/voronoi/src/hooks.ts
@@ -3,6 +3,7 @@ import {
     MutableRefObject,
     TouchEvent,
     useCallback,
+    useEffect,
     useMemo,
     useRef,
     useState,
@@ -19,6 +20,7 @@ import {
     NodeMouseHandler,
     // DatumTouchHandler,
     NodePositionAccessor,
+    NodeTouchHandler,
 } from './types'
 import {
     defaultMargin,
@@ -128,6 +130,10 @@ export const useMeshEvents = <Node, ElementType extends Element>({
     onMouseMove,
     onMouseLeave,
     onClick,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    enableTouchCrosshair = false,
     tooltip,
     tooltipPosition = defaultTooltipPosition,
     tooltipAnchor = defaultTooltipAnchor,
@@ -144,6 +150,10 @@ export const useMeshEvents = <Node, ElementType extends Element>({
     onMouseMove?: NodeMouseHandler<Node>
     onMouseLeave?: NodeMouseHandler<Node>
     onClick?: NodeMouseHandler<Node>
+    onTouchStart?: NodeTouchHandler<Node>
+    onTouchMove?: NodeTouchHandler<Node>
+    onTouchEnd?: NodeTouchHandler<Node>
+    enableTouchCrosshair?: boolean
     tooltip?: (node: Node) => JSX.Element
     tooltipPosition?: TooltipPosition
     tooltipAnchor?: TooltipAnchor
@@ -155,6 +165,10 @@ export const useMeshEvents = <Node, ElementType extends Element>({
     // for each node because we use a single rect element to capture events.
     const previous = useRef<[number, Node] | null>(null)
 
+    useEffect(() => {
+        previous.current = current
+    }, [previous, current])
+
     const findNode = useCallback(
         (event: MouseEvent<ElementType> | TouchEvent<ElementType>): null | [number, Node] => {
             if (!elementRef.current) return null
@@ -298,42 +312,48 @@ export const useMeshEvents = <Node, ElementType extends Element>({
         [findNode, setCurrent, onClick]
     )
 
-    /*
     const handleTouchStart = useCallback(
-        (event: TouchEvent<SVGRectElement>) => {
-            const match = getIndexAndNodeFromEvent(event)
+        (event: TouchEvent<ElementType>) => {
+            const match = findNode(event)
+
             enableTouchCrosshair && setCurrent(match)
+
             match && onTouchStart?.(match[1], event)
         },
-        [getIndexAndNodeFromEvent, setCurrent, enableTouchCrosshair, onTouchStart]
+        [findNode, setCurrent, enableTouchCrosshair, onTouchStart]
     )
 
     const handleTouchMove = useCallback(
-        (event: TouchEvent<SVGRectElement>) => {
-            const match = getIndexAndNodeFromEvent(event)
+        (event: TouchEvent<ElementType>) => {
+            const match = findNode(event)
+
             enableTouchCrosshair && setCurrent(match)
+
             match && onTouchMove?.(match[1], event)
         },
-        [getIndexAndNodeFromEvent, setCurrent, enableTouchCrosshair, onTouchMove]
+        [findNode, setCurrent, enableTouchCrosshair, onTouchMove]
     )
 
     const handleTouchEnd = useCallback(
         (event: TouchEvent<SVGRectElement>) => {
             enableTouchCrosshair && setCurrent(null)
+
             if (onTouchEnd && previous.current) {
                 onTouchEnd(previous.current[1], event)
             }
         },
-        [enableTouchCrosshair, setCurrent, onTouchEnd, previous, nodes]
+        [enableTouchCrosshair, setCurrent, onTouchEnd, previous]
     )
-    */
 
     return {
         current,
         handleMouseEnter: isInteractive ? handleMouseEnter : undefined,
         handleMouseMove: isInteractive ? handleMouseMove : undefined,
         handleMouseLeave: isInteractive ? handleMouseLeave : undefined,
         handleClick: isInteractive ? handleClick : undefined,
+        handleTouchStart: isInteractive ? handleTouchStart : undefined,
+        handleTouchMove: isInteractive ? handleTouchMove : undefined,
+        handleTouchEnd: isInteractive ? handleTouchEnd : undefined,
     }
 }