feat(line): delegate the mesh current element selection to the voronoi package

Author: plouc

packages/core/index.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { Interpolation, SpringConfig } from '@react-spring/web'
 import { CurveFactory } from 'd3-shape'
 import { ComponentType } from 'react'
-import { extendDefaultTheme } from './src'
 
 export type DatumValue = string | number | Date
 
@@ -24,6 +23,7 @@ export type Margin = {
     right: number
     top: number
 }
+export type Padding = Margin
 
 export type Box = Partial<Margin>
 export type BoxAlign =

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}

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 {