force-graph 1.44.1 → 1.45.0

package/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

package/dist/force-graph.d.ts

@@ -177,9 +177,9 @@ 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;
 

package/dist/force-graph.js

@@ -1,4 +1,4 @@
-// Version 1.44.1 force-graph - https://github.com/vasturiano/force-graph
+// Version 1.45.0 force-graph - https://github.com/vasturiano/force-graph
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -11612,7 +11612,7 @@
       // Main canvas object to manipulate
       state.ctx = canvasCtx;
     },
-    update: function update(state) {
+    update: function update(state, changedProps) {
       state.engineRunning = false; // Pause simulation
       state.onUpdate();
       if (state.nodeAutoColorBy !== null) {
@@ -11652,18 +11652,23 @@
       var maxDepth = Math.max.apply(Math, _toConsumableArray$2(Object.values(nodeDepths || [])));
       var dagLevelDistance = state.dagLevelDistance || state.graphData.nodes.length / (maxDepth || 1) * DAG_LEVEL_NODE_RATIO * (['radialin', 'radialout'].indexOf(state.dagMode) !== -1 ? 0.7 : 1);
 
+      // Reset relevant fx/fy when swapping dag modes
+      if (['lr', 'rl', 'td', 'bu'].includes(changedProps.dagMode)) {
+        var resetProp = ['lr', 'rl'].includes(changedProps.dagMode) ? 'fx' : 'fy';
+        state.graphData.nodes.filter(state.dagNodeFilter).forEach(function (node) {
+          return delete node[resetProp];
+        });
+      }
+
       // Fix nodes to x,y for dag mode
-      if (state.dagMode) {
-        var getFFn = function getFFn(fix, invert) {
-          return function (node) {
-            return !fix ? undefined : (nodeDepths[node[state.nodeId]] - maxDepth / 2) * dagLevelDistance * (invert ? -1 : 1);
-          };
+      if (['lr', 'rl', 'td', 'bu'].includes(state.dagMode)) {
+        var invert = ['rl', 'bu'].includes(state.dagMode);
+        var fixFn = function fixFn(node) {
+          return (nodeDepths[node[state.nodeId]] - maxDepth / 2) * dagLevelDistance * (invert ? -1 : 1);
         };
-        var fxFn = getFFn(['lr', 'rl'].indexOf(state.dagMode) !== -1, state.dagMode === 'rl');
-        var fyFn = getFFn(['td', 'bu'].indexOf(state.dagMode) !== -1, state.dagMode === 'bu');
+        var _resetProp = ['lr', 'rl'].includes(state.dagMode) ? 'fx' : 'fy';
         state.graphData.nodes.filter(state.dagNodeFilter).forEach(function (node) {
-          node.fx = fxFn(node);
-          node.fy = fyFn(node);
+          return node[_resetProp] = fixFn(node);
         });
       }
 
@@ -12248,7 +12253,7 @@
       state.zoom.filter(function (ev) {
         return (
           // disable zoom interaction
-          !ev.button && state.enableZoomPanInteraction && (state.enableZoomInteraction || ev.type !== 'wheel') && (state.enablePanInteraction || ev.type === 'wheel')
+          !ev.button && state.enableZoomPanInteraction && (ev.type !== 'wheel' || index$2(state.enableZoomInteraction)(ev)) && (ev.type === 'wheel' || index$2(state.enablePanInteraction)(ev))
         );
       }).on('zoom', function (ev) {
         var t = ev.transform;