Add onPointerMove method

README.md

@@ -59,6 +59,7 @@ HilbertChart({ configOptions })(<domElement>)
 | <b>enableZoom</b>([<i>boolean</i>]) | Getter/setter for whether to enable zoom/pan interaction in the chart. | `true` |
 | <b>onRangeClick</b>(<i>fn</i>) | Callback function for range clicks. The range object is included as single argument `onRangeClick(range)`. | - |
 | <b>onRangeHover</b>(<i>fn</i>) | Callback function for range mouse over events. The range object (or `null` if hovering out) is included as single argument `onRangeHover(range)`. | - |
+| <b>onPointerMove</b>(<i>fn</i>) | Callback function for pointer move events over the hilbert canvas. The hilbert curve value directly under the mouse pointer is included as argument, as well as the event object itself. `onPointerMove(value, event)`. | - |
 | <b>onZoom</b>(<i>fn</i>) | Callback function for zoom/pan events. The current zoom transform is included as single argument `onZoom({ k, x, y })`. Note that `onZoom` is triggered by user interaction as well as programmatic zooming/panning with `focusOn()`. | - |
 | <b>onZoomEnd</b>(<i>fn</i>) | Callback function for 'end' of zoom/pan events. The current zoom transform is included as single argument `onZoomEnd({ k, x, y })`. Note that `onZoomEnd` is triggered by user interaction as well as programmatic zooming/panning with `focusOn()`. | - |
 

src/hilbert.js

@@ -33,6 +33,7 @@ export default Kapsule({
     enableZoom: { default: true, triggerUpdate: false },
     onRangeClick: { triggerUpdate: false },
     onRangeHover: { triggerUpdate: false },
+    onPointerMove: { triggerUpdate: false },
     onZoom: { triggerUpdate: false },
     onZoomEnd: { triggerUpdate: false }
   },
@@ -326,7 +327,7 @@ export default Kapsule({
       const offset = getOffset(d3El.node());
       const pointerPos = { x: ev.pageX - offset.left, y: ev.pageY - offset.top };
 
-      if (state.showValTooltip) {
+      if (state.showValTooltip || state.onPointerMove) {
         const c = coords.slice();
         if (state.useCanvas) {
           // Need to consider zoom on canvas
@@ -336,9 +337,14 @@ export default Kapsule({
           c[1] -= zoomTransform.y;
           c[1] /= zoomTransform.k;
         }
-        valTooltip.text(state.valFormatter(state.hilbert.getValAtXY(...c)))
+
+        const val = state.hilbert.getValAtXY(...c);
+
+        state.showValTooltip && valTooltip.text(state.valFormatter(val))
           .style('left', `${pointerPos.x}px`)
           .style('top', `${pointerPos.y}px`);
+
+        state.onPointerMove && state.onPointerMove(val, ev);
       }
       if (state.showRangeTooltip) {
         rangeTooltip

src/index.d.ts

@@ -49,7 +49,7 @@ export interface HilbertChartGenericInstance<ChainableInstance> {
 
   onRangeClick(cb: (range: Range) => void): ChainableInstance;
   onRangeHover(cb: (range: Range | null) => void): ChainableInstance;
-
+  onPointerMove(cb: (value: number, event: MouseEvent) => void): ChainableInstance;
   onZoom(callback: (transform: {k: number, x: number, y: number}) => void): ChainableInstance;
   onZoomEnd(callback: (transform: {k: number, x: number, y: number}) => void): ChainableInstance;
 }