force-graph 1.44.1 → 1.45.0

package/dist/force-graph.mjs

@@ -824,7 +824,7 @@ var CanvasForceGraph = Kapsule({
     // 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) {
@@ -864,18 +864,23 @@ var CanvasForceGraph = Kapsule({
     var maxDepth = Math.max.apply(Math, _toConsumableArray(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);
       });
     }
 
@@ -1460,7 +1465,7 @@ var forceGraph = Kapsule({
     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' || accessorFn(state.enableZoomInteraction)(ev)) && (ev.type === 'wheel' || accessorFn(state.enablePanInteraction)(ev))
       );
     }).on('zoom', function (ev) {
       var t = ev.transform;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "force-graph",
-  "version": "1.44.1",
+  "version": "1.45.0",
   "description": "2D force-directed graph rendered on HTML5 canvas",
   "type": "module",
   "unpkg": "dist/force-graph.min.js",

package/src/canvas-force-graph.js

@@ -462,7 +462,7 @@ export default Kapsule({
     state.ctx = canvasCtx;
   },
 
-  update(state) {
+  update(state, changedProps) {
     state.engineRunning = false; // Pause simulation
     state.onUpdate();
 
@@ -510,19 +510,19 @@ export default Kapsule({
         * (['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)) {
+      const resetProp = ['lr', 'rl'].includes(changedProps.dagMode) ? 'fx' : 'fy';
+      state.graphData.nodes.filter(state.dagNodeFilter).forEach(node => delete node[resetProp]);
+    }
+
     // Fix nodes to x,y for dag mode
-    if (state.dagMode) {
-      const getFFn = (fix, invert) => node => !fix
-        ? undefined
-        : (nodeDepths[node[state.nodeId]] - maxDepth / 2) * dagLevelDistance * (invert ? -1 : 1);
-
-      const fxFn = getFFn(['lr', 'rl'].indexOf(state.dagMode) !== -1, state.dagMode === 'rl');
-      const fyFn = getFFn(['td', 'bu'].indexOf(state.dagMode) !== -1, state.dagMode === 'bu');
-
-      state.graphData.nodes.filter(state.dagNodeFilter).forEach(node => {
-        node.fx = fxFn(node);
-        node.fy = fyFn(node);
-      });
+    if (['lr', 'rl', 'td', 'bu'].includes(state.dagMode)) {
+      const invert = ['rl', 'bu'].includes(state.dagMode);
+      const fixFn = node => (nodeDepths[node[state.nodeId]] - maxDepth / 2) * dagLevelDistance * (invert ? -1 : 1);
+
+      const resetProp = ['lr', 'rl'].includes(state.dagMode) ? 'fx' : 'fy';
+      state.graphData.nodes.filter(state.dagNodeFilter).forEach(node => node[resetProp] = fixFn(node));
     }
 
     // Use radial force for radial dags

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

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