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 ( {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 = ({ 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 = ({ debug, }) - const { current, handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick } = - useMeshEvents({ - elementRef, - nodes, - delaunay, - margin, - detectionRadius, - setCurrent, - onMouseEnter, - onMouseMove, - onMouseLeave, - onClick, - tooltip, - tooltipPosition, - tooltipAnchor, - }) + const { + current, + handleMouseEnter, + handleMouseMove, + handleMouseLeave, + handleClick, + handleTouchStart, + handleTouchMove, + handleTouchEnd, + } = useMeshEvents({ + 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 = ({ onMouseEnter={handleMouseEnter} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} - // onTouchStart={handleTouchStart} - // onTouchMove={handleTouchMove} - // onTouchEnd={handleTouchEnd} + onTouchStart={handleTouchStart} + onTouchMove={handleTouchMove} + onTouchEnd={handleTouchEnd} onClick={handleClick} /> 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 = ({ onMouseMove, onMouseLeave, onClick, + onTouchStart, + onTouchMove, + onTouchEnd, + enableTouchCrosshair = false, tooltip, tooltipPosition = defaultTooltipPosition, tooltipAnchor = defaultTooltipAnchor, @@ -144,6 +150,10 @@ export const useMeshEvents = ({ onMouseMove?: NodeMouseHandler onMouseLeave?: NodeMouseHandler onClick?: NodeMouseHandler + onTouchStart?: NodeTouchHandler + onTouchMove?: NodeTouchHandler + onTouchEnd?: NodeTouchHandler + enableTouchCrosshair?: boolean tooltip?: (node: Node) => JSX.Element tooltipPosition?: TooltipPosition tooltipAnchor?: TooltipAnchor @@ -155,6 +165,10 @@ export const useMeshEvents = ({ // 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 | TouchEvent): null | [number, Node] => { if (!elementRef.current) return null @@ -298,35 +312,38 @@ export const useMeshEvents = ({ [findNode, setCurrent, onClick] ) - /* const handleTouchStart = useCallback( - (event: TouchEvent) => { - const match = getIndexAndNodeFromEvent(event) + (event: TouchEvent) => { + 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) => { - const match = getIndexAndNodeFromEvent(event) + (event: TouchEvent) => { + 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) => { 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 = ({ handleMouseMove: isInteractive ? handleMouseMove : undefined, handleMouseLeave: isInteractive ? handleMouseLeave : undefined, handleClick: isInteractive ? handleClick : undefined, + handleTouchStart: isInteractive ? handleTouchStart : undefined, + handleTouchMove: isInteractive ? handleTouchMove : undefined, + handleTouchEnd: isInteractive ? handleTouchEnd : undefined, } }