From 664647aceff7746cc50955550cf0b59f3a029b87 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Tue, 7 May 2024 20:29:35 +0900
Subject: [PATCH] feat(voronoi): restore touch events support

---
 packages/core/src/components/dots/DotsItem.js |  5 --
 packages/line/tests/Line.test.js              |  1 +
 packages/voronoi/src/Mesh.tsx                 | 58 +++++++++++--------
 packages/voronoi/src/hooks.ts                 | 38 +++++++++---
 4 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/packages/core/src/components/dots/DotsItem.js b/packages/core/src/components/dots/DotsItem.js
index 12208c7df..b8fa0e23f 100644
--- 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
index 5794d868b..f46777cbb 100644
--- 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
index 55db918de..9e0baaf77 100644
--- 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
index 72647880b..facab76d3 100644
--- 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,35 +312,38 @@ 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,
@@ -334,6 +351,9 @@ export const useMeshEvents = <Node, ElementType extends Element>({
         handleMouseMove: isInteractive ? handleMouseMove : undefined,
         handleMouseLeave: isInteractive ? handleMouseLeave : undefined,
         handleClick: isInteractive ? handleClick : undefined,
+        handleTouchStart: isInteractive ? handleTouchStart : undefined,
+        handleTouchMove: isInteractive ? handleTouchMove : undefined,
+        handleTouchEnd: isInteractive ? handleTouchEnd : undefined,
     }
 }