feat(line): delegate the mesh current element selection to the vorono…

…i package
plouc · May 7, 2024 · 028d50c · 028d50c
1 parent 5d8a0e8
commit 028d50c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/packages/line/src/Mesh.js b/packages/line/src/Mesh.js
@@ -28,10 +28,9 @@ const Mesh = ({
                 [point.x + margin.left, point.y + margin.top],
                 'top'
             )
-            setCurrent(point)
             onMouseEnter && onMouseEnter(point, event)
         },
-        [setCurrent, showTooltipAt, tooltip, onMouseEnter, margin]
+        [showTooltipAt, tooltip, onMouseEnter, margin]
     )
 
     const handleMouseMove = useCallback(
@@ -41,19 +40,17 @@ const Mesh = ({
                 [point.x + margin.left, point.y + margin.top],
                 'top'
             )
-            setCurrent(point)
             onMouseMove && onMouseMove(point, event)
         },
-        [showTooltipAt, tooltip, margin.left, margin.top, setCurrent, onMouseMove]
+        [showTooltipAt, tooltip, margin.left, margin.top, onMouseMove]
     )
 
     const handleMouseLeave = useCallback(
         (point, event) => {
             hideTooltip()
-            setCurrent(null)
             onMouseLeave && onMouseLeave(point, event)
         },
-        [hideTooltip, setCurrent, onMouseLeave]
+        [hideTooltip, onMouseLeave]
     )
 
     const handleClick = useCallback(
@@ -70,10 +67,9 @@ const Mesh = ({
                 [point.x + margin.left, point.y + margin.top],
                 'top'
             )
-            setCurrent(point)
             onTouchStart && onTouchStart(point, event)
         },
-        [margin.left, margin.top, onTouchStart, setCurrent, showTooltipAt, tooltip]
+        [margin.left, margin.top, onTouchStart, showTooltipAt, tooltip]
     )
 
     const handleTouchMove = useCallback(
@@ -83,26 +79,25 @@ const Mesh = ({
                 [point.x + margin.left, point.y + margin.top],
                 'top'
             )
-            setCurrent(point)
             onTouchMove && onTouchMove(point, event)
         },
-        [margin.left, margin.top, onTouchMove, setCurrent, showTooltipAt, tooltip]
+        [margin.left, margin.top, onTouchMove, showTooltipAt, tooltip]
     )
 
     const handleTouchEnd = useCallback(
         (point, event) => {
             hideTooltip()
-            setCurrent(null)
             onTouchEnd && onTouchEnd(point, event)
         },
-        [onTouchEnd, hideTooltip, setCurrent]
+        [onTouchEnd, hideTooltip]
     )
 
     return (
         <BaseMesh
             nodes={points}
             width={width}
             height={height}
+            setCurrent={setCurrent}
             onMouseEnter={handleMouseEnter}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}

diff --git a/packages/voronoi/src/hooks.ts b/packages/voronoi/src/hooks.ts
@@ -316,33 +316,42 @@ export const useMeshEvents = <Node, ElementType extends Element>({
         (event: TouchEvent<ElementType>) => {
             const match = findNode(event)
 
-            enableTouchCrosshair && setCurrent(match)
+            if (enableTouchCrosshair) {
+                setCurrent(match)
+                setCurrentNode?.(match ? match[1] : null)
+            }
 
             match && onTouchStart?.(match[1], event)
         },
-        [findNode, setCurrent, enableTouchCrosshair, onTouchStart]
+        [findNode, setCurrent, setCurrentNode, enableTouchCrosshair, onTouchStart]
     )
 
     const handleTouchMove = useCallback(
         (event: TouchEvent<ElementType>) => {
             const match = findNode(event)
 
-            enableTouchCrosshair && setCurrent(match)
+            if (enableTouchCrosshair) {
+                setCurrent(match)
+                setCurrentNode?.(match ? match[1] : null)
+            }
 
             match && onTouchMove?.(match[1], event)
         },
-        [findNode, setCurrent, enableTouchCrosshair, onTouchMove]
+        [findNode, setCurrent, setCurrentNode, enableTouchCrosshair, onTouchMove]
     )
 
     const handleTouchEnd = useCallback(
         (event: TouchEvent<SVGRectElement>) => {
-            enableTouchCrosshair && setCurrent(null)
+            if (enableTouchCrosshair) {
+                setCurrent(null)
+                setCurrentNode?.(null)
+            }
 
             if (onTouchEnd && previous.current) {
                 onTouchEnd(previous.current[1], event)
             }
         },
-        [enableTouchCrosshair, setCurrent, onTouchEnd, previous]
+        [enableTouchCrosshair, setCurrent, setCurrentNode, onTouchEnd, previous]
     )
 
     return {