feat(arcs): move arc hover detection from core to arcs package

packages/arcs/src/index.ts

@@ -1,5 +1,6 @@
 export * from './arcTransitionMode'
 export * from './centers'
+export * from './interactivity'
 export * from './interpolateArc'
 export * from './types'
 export * from './useAnimatedArc'

packages/arcs/src/interactivity.ts

@@ -0,0 +1,41 @@
+import { getDistance, getAngle } from '@nivo/core'
+import { Arc } from './types'
+
+/**
+ * Check if cursor is in given ring.
+ */
+export const isCursorInRing = (
+    centerX: number,
+    centerY: number,
+    radius: number,
+    innerRadius: number,
+    cursorX: number,
+    cursorY: number
+) => {
+    const distance = getDistance(cursorX, cursorY, centerX, centerY)
+
+    return distance < radius && distance > innerRadius
+}
+
+/**
+ * Search for an arc being under cursor.
+ */
+export const findArcUnderCursor = <A extends Arc = Arc>(
+    centerX: number,
+    centerY: number,
+    radius: number,
+    innerRadius: number,
+    arcs: A[],
+    cursorX: number,
+    cursorY: number
+): A | undefined => {
+    if (!isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY)) {
+        return undefined
+    }
+
+    const cursorAngle = getAngle(cursorX, cursorY, centerX, centerY)
+
+    return arcs.find(
+        ({ startAngle, endAngle }) => cursorAngle >= startAngle && cursorAngle < endAngle
+    )
+}

packages/core/index.d.ts

@@ -322,4 +322,7 @@ declare module '@nivo/core' {
     export const ResponsiveWrapper = (props: {
         children: (dimensions: { width: number; height: number }) => JSX.Element
     }) => JSX.Element
+
+    export function getDistance(x1: number, y1: number, x2: number, y2: number): number
+    export function getAngle(x1: number, y1: number, x2: number, y2: number): number
 }

packages/core/src/lib/interactivity/detect.js

@@ -1,12 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
 /**
  * Computes distance between two points.
  *
@@ -54,42 +45,3 @@ export const getAngle = (x1, y1, x2, y2) => {
  */
 export const isCursorInRect = (x, y, width, height, cursorX, cursorY) =>
     x <= cursorX && cursorX <= x + width && y <= cursorY && cursorY <= y + height
-
-/**
- * Check if cursor is in given ring.
- *
- * @param {number} centerX
- * @param {number} centerY
- * @param {number} radius
- * @param {number} innerRadius
- * @param {number} cursorX
- * @param {number} cursorY
- * @return {boolean}
- */
-export const isCursorInRing = (centerX, centerY, radius, innerRadius, cursorX, cursorY) => {
-    const distance = getDistance(cursorX, cursorY, centerX, centerY)
-
-    return distance < radius && distance > innerRadius
-}
-
-/**
- * Search for an arc being under cursor.
- *
- * @param {number}         centerX
- * @param {number}         centerY
- * @param {number}         radius
- * @param {number}         innerRadius
- * @param {Array.<Object>} arcs
- * @param {number}         cursorX
- * @param {number}         cursorY
- * @return {*}
- */
-export const getHoveredArc = (centerX, centerY, radius, innerRadius, arcs, cursorX, cursorY) => {
-    if (!isCursorInRing(centerX, centerY, radius, innerRadius, cursorX, cursorY)) return null
-
-    const cursorAngle = getAngle(cursorX, cursorY, centerX, centerY)
-
-    return arcs.find(
-        ({ startAngle, endAngle }) => cursorAngle >= startAngle && cursorAngle < endAngle
-    )
-}

packages/pie/src/PieCanvas.tsx

@@ -1,7 +1,5 @@
 import React, { createElement, useEffect, useMemo, useRef } from 'react'
 import {
-    // @ts-ignore
-    getHoveredArc,
     // @ts-ignore
     getRelativeCursor,
     // @ts-ignore
@@ -17,6 +15,7 @@ import { renderLegendToCanvas } from '@nivo/legends'
 import { useInheritedColor, InheritedColorConfig } from '@nivo/colors'
 // @ts-ignore
 import { useTooltip } from '@nivo/tooltip'
+import { Arc, findArcUnderCursor } from '@nivo/arcs'
 import { useNormalizedData, usePieFromBox, usePieRadialLabels } from './hooks'
 import { ComputedDatum, PieCanvasProps, RadialLabelData } from './types'
 import { defaultProps } from './props'
@@ -269,7 +268,7 @@ const PieCanvas = <RawDatum, >({
     const getArcFromMouse = (event: React.MouseEvent<HTMLCanvasElement>) => {
         const [x, y] = getRelativeCursor(canvasEl.current, event)
 
-        const hoveredArc = getHoveredArc(
+        const hoveredArc = findArcUnderCursor<Arc & { id: string | number }>(
             margin.left + centerX,
             margin.top + centerY,
             radius,