Merge branch 'andrejlamov-pan-interaction-with-ev'

README.md

@@ -176,8 +176,8 @@ myGraph(<myDOMElement>)
 | <b>nodePointerAreaPaint</b>([<i>fn</i>]) | Callback function for painting a canvas area used to detect node pointer interactions. The provided paint color uniquely identifies the node and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the node. The callback function has the signature: `.nodePointerAreaPaint(<node>, <color>, <canvas context>, <current global scale>)`. | *default interaction area is a circle centered on the node and sized according to `val`.* |
 | <b>linkPointerAreaPaint</b>([<i>fn</i>]) | Callback function for painting a canvas area used to detect link pointer interactions. The provided paint color uniquely identifies the link and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the link. The callback function has the signature: `.linkPointerAreaPaint(<link>, <color>, <canvas context>, <current global scale>)`. | *default interaction area is a straight line between the source and target nodes.* |
 | <b>enableNodeDrag</b>([<i>boolean</i>]) | Getter/setter for whether to enable the user interaction to drag nodes by click-dragging. If enabled, every time a node is dragged the simulation is re-heated so the other nodes react to the changes. Only applicable if enablePointerInteraction is `true`. | `true` |
-| <b>enableZoomInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable zooming user interactions. | `true` |
-| <b>enablePanInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable panning user interactions. | `true` |
+| <b>enableZoomInteraction</b>([<i>boolean</i> or <i>fn</i>]) | Getter/setter for whether to enable zooming user interactions. When a predicate function is provided, the mouse event is passed as an argument.| `true` |
+| <b>enablePanInteraction</b>([<i>boolean</i> or <i>fn</i>]) | Getter/setter for whether to enable panning user interactions. When a predicate function is provided, the mouse event is passed as an argument.| `true` |
 | <b>enablePointerInteraction</b>([<i>boolean</i>]) | Getter/setter for whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click/drag and tooltip labels, at the cost of performance. If you're looking for maximum gain in your graph performance it's recommended to switch off this property. | `true` |
 
 ###  Utility

src/force-graph.js

@@ -467,9 +467,9 @@ export default Kapsule({
       .filter(ev =>
         // disable zoom interaction
         !ev.button
-        && state.enableZoomPanInteraction
-        && (state.enableZoomInteraction || ev.type !== 'wheel')
-        && (state.enablePanInteraction || ev.type === 'wheel')
+          && state.enableZoomPanInteraction
+          && (ev.type !== 'wheel' || accessorFn(state.enableZoomInteraction)(ev))
+          && (ev.type === 'wheel' || accessorFn(state.enablePanInteraction)(ev))
       )
       .on('zoom', ev => {
         const t = ev.transform;

src/index.d.ts

@@ -177,9 +177,9 @@ export interface ForceGraphGenericInstance<ChainableInstance> {
   enableNodeDrag(): boolean;
   enableNodeDrag(enable: boolean): ChainableInstance;
   enableZoomInteraction(): boolean;
-  enableZoomInteraction(enable: boolean): ChainableInstance;
+  enableZoomInteraction(enable: boolean | ((event: MouseEvent) => boolean)): ChainableInstance;
   enablePanInteraction(): boolean;
-  enablePanInteraction(enable: boolean): ChainableInstance;
+  enablePanInteraction(enable: boolean | ((event: MouseEvent) => boolean)): ChainableInstance;
   enablePointerInteraction(): boolean;
   enablePointerInteraction(enable?: boolean): ChainableInstance;