feat(chord): fix various hooks dependencies issues

Author: plouc

packages/chord/src/Chord.tsx

@@ -85,7 +85,6 @@ const InnerChord = ({
     })
 
     const { setCurrentArc, setCurrentRibbon, getArcOpacity, getRibbonOpacity } = useChordSelection({
-        arcs,
         arcOpacity,
         activeArcOpacity,
         inactiveArcOpacity,

packages/chord/src/ChordArc.tsx

@@ -42,7 +42,7 @@ export const ChordArc = memo(
                 showTooltipFromEvent(createElement(tooltip, { arc }), event)
                 onMouseEnter?.(arc, event)
             }
-        }, [isInteractive, showTooltipFromEvent, tooltip, arc, onMouseEnter])
+        }, [isInteractive, showTooltipFromEvent, tooltip, arc, onMouseEnter, setCurrent])
 
         const handleMouseMove = useMemo(() => {
             if (!isInteractive) return undefined
@@ -61,7 +61,7 @@ export const ChordArc = memo(
                 hideTooltip()
                 onMouseLeave?.(arc, event)
             }
-        }, [isInteractive, hideTooltip, arc, onMouseLeave])
+        }, [isInteractive, hideTooltip, arc, onMouseLeave, setCurrent])
 
         const handleClick = useMemo(() => {
             if (!isInteractive || !onClick) return undefined

packages/chord/src/ChordCanvas.tsx

@@ -103,7 +103,6 @@ const InnerChordCanvas = ({
     })
 
     const { currentArc, setCurrentArc, getArcOpacity, getRibbonOpacity } = useChordSelection({
-        arcs,
         arcOpacity,
         activeArcOpacity,
         inactiveArcOpacity,
@@ -257,6 +256,8 @@ const InnerChordCanvas = ({
         outerHeight,
         margin,
         pixelRatio,
+        center,
+        radius,
         theme,
         layers,
         arcs,
@@ -316,8 +317,10 @@ const InnerChordCanvas = ({
             innerRadius,
             arcs,
             setCurrentArc,
+            currentArc,
             showTooltipFromEvent,
             hideTooltip,
+            arcTooltip,
             onArcMouseEnter,
             onArcMouseMove,
             onArcMouseLeave,

packages/chord/src/ChordLabels.tsx

@@ -41,7 +41,7 @@ export const ChordLabels = memo(({ arcs, radius, rotation, color }: ChordLabelsP
                     dominantBaseline: textProps.baseline,
                 }
             }),
-        [arcs, radius, radius, rotation, getColor]
+        [arcs, radius, rotation, getColor]
     )
 
     const transition = useTransition<

packages/chord/src/ChordRibbon.tsx

@@ -48,16 +48,16 @@ export const ChordRibbon = memo(
             return (event: MouseEvent) => {
                 setCurrent(ribbon)
                 showTooltipFromEvent(createElement(tooltip, { ribbon }), event)
-                onMouseEnter && onMouseEnter(ribbon, event)
+                onMouseEnter?.(ribbon, event)
             }
-        }, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseEnter])
+        }, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseEnter, setCurrent])
 
         const handleMouseMove = useMemo(() => {
             if (!isInteractive) return undefined
 
             return (event: MouseEvent) => {
                 showTooltipFromEvent(createElement(tooltip, { ribbon }), event)
-                onMouseMove && onMouseMove(ribbon, event)
+                onMouseMove?.(ribbon, event)
             }
         }, [isInteractive, showTooltipFromEvent, tooltip, ribbon, onMouseMove])
 
@@ -67,14 +67,14 @@ export const ChordRibbon = memo(
             return (event: MouseEvent) => {
                 setCurrent(null)
                 hideTooltip()
-                onMouseLeave && onMouseLeave(ribbon, event)
+                onMouseLeave?.(ribbon, event)
             }
-        }, [isInteractive, hideTooltip, ribbon, onMouseLeave])
+        }, [isInteractive, hideTooltip, ribbon, onMouseLeave, setCurrent])
 
         const handleClick = useMemo(() => {
             if (!isInteractive || !onClick) return undefined
 
-            return (event: MouseEvent) => onClick(ribbon, event)
+            return (event: MouseEvent) => onClick?.(ribbon, event)
         }, [isInteractive, ribbon, onClick])
 
         return (

packages/chord/src/hooks.ts

@@ -120,7 +120,6 @@ export const useChord = ({
 }
 
 export const useChordSelection = ({
-    arcs,
     arcOpacity = commonDefaultProps.arcOpacity,
     activeArcOpacity = commonDefaultProps.activeArcOpacity,
     inactiveArcOpacity = commonDefaultProps.inactiveArcOpacity,
@@ -129,7 +128,6 @@ export const useChordSelection = ({
     activeRibbonOpacity = commonDefaultProps.activeRibbonOpacity,
     inactiveRibbonOpacity = commonDefaultProps.inactiveRibbonOpacity,
 }: {
-    arcs: ArcDatum[]
     arcOpacity?: ChordCommonProps['arcOpacity']
     activeArcOpacity?: ChordCommonProps['activeArcOpacity']
     inactiveArcOpacity?: ChordCommonProps['inactiveArcOpacity']
@@ -164,7 +162,7 @@ export const useChordSelection = ({
         }
 
         return { selectedArcIds, selectedRibbonIds }
-    }, [currentArc, currentRibbon, arcs, ribbons])
+    }, [currentArc, currentRibbon, ribbons])
 
     const hasSelection =
         selection.selectedArcIds.length > 1 || selection.selectedRibbonIds.length > 0
@@ -175,7 +173,7 @@ export const useChordSelection = ({
 
             return selection.selectedArcIds.includes(arc.id) ? activeArcOpacity : inactiveArcOpacity
         },
-        [selection.selectedArcIds, arcOpacity, activeArcOpacity, inactiveArcOpacity]
+        [hasSelection, selection.selectedArcIds, arcOpacity, activeArcOpacity, inactiveArcOpacity]
     )
     const getRibbonOpacity = useMemo(
         () => (ribbon: RibbonDatum) => {
@@ -185,7 +183,13 @@ export const useChordSelection = ({
                 ? activeRibbonOpacity
                 : inactiveRibbonOpacity
         },
-        [selection.selectedRibbonIds, ribbonOpacity, activeRibbonOpacity, inactiveRibbonOpacity]
+        [
+            hasSelection,
+            selection.selectedRibbonIds,
+            ribbonOpacity,
+            activeRibbonOpacity,
+            inactiveRibbonOpacity,
+        ]
     )
 
     return {

packages/chord/src/types.ts

@@ -18,9 +18,9 @@ export interface CustomLayerProps {
     center: [number, number]
     radius: number
     arcs: ArcDatum[]
-    arcGenerator: any
+    arcGenerator: ArcGenerator
     ribbons: RibbonDatum[]
-    ribbonGenerator: any
+    ribbonGenerator: RibbonGenerator
 }
 export type CustomLayer = FunctionComponent<CustomLayerProps>
 export type CustomCanvasLayer = (ctx: CanvasRenderingContext2D, props: CustomLayerProps) => void