Add onZoom callbacks

README.md

@@ -57,7 +57,8 @@ HilbertChart({ configOptions })(<domElement>)
 | <b>rangeTooltipContent</b>([<i>string</i> or <i>fn</i>]) | Getter/setter for the range object tooltip content accessor function or attribute. Supports plain text or HTML content. | `<label>: <start> - <end>` |
 | <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>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()`. | - |
 
 [npm-img]: https://img.shields.io/npm/v/hilbert-chart
 [npm-url]: https://npmjs.org/package/hilbert-chart

src/hilbert.js

@@ -28,7 +28,9 @@ export default Kapsule({
     showRangeTooltip: { default: true, triggerUpdate: false },
     rangeTooltipContent: { triggerUpdate: false },
     onRangeClick: { triggerUpdate: false },
-    onRangeHover: { triggerUpdate: false }
+    onRangeHover: { triggerUpdate: false },
+    onZoom: { triggerUpdate: false },
+    onZoomEnd: { triggerUpdate: false }
   },
 
   methods: {
@@ -207,7 +209,10 @@ export default Kapsule({
           state.skipRelayout = true;
           requestAnimationFrame(state._rerender);
         }
-      });
+
+        state.onZoom && state.onZoom({ ...zoomTransform });
+      })
+      .on('end', ev => state.onZoomEnd && state.onZoomEnd({ ...ev.transform }));
 
     let hilbertCanvas;
     if (!useCanvas) { // svg mode

src/index.d.ts

@@ -45,6 +45,9 @@ export interface HilbertChartGenericInstance<ChainableInstance> {
 
   onRangeClick(cb: (range: Range) => void): ChainableInstance;
   onRangeHover(cb: (range: Range | null) => void): ChainableInstance;
+
+  onZoom(callback: (transform: {k: number, x: number, y: number}) => void): ChainableInstance;
+  onZoomEnd(callback: (transform: {k: number, x: number, y: number}) => void): ChainableInstance;
 }
 
 export type HilbertChartInstance = HilbertChartGenericInstance<HilbertChartInstance>;