force-graph 1.42.2 → 1.42.6

package/README.md

@@ -3,7 +3,7 @@ force-graph
 
 [![NPM package][npm-img]][npm-url]
 [![Build Size][build-size-img]][build-size-url]
-[![Dependencies][dependencies-img]][dependencies-url]
+[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
 
 Force-directed graph rendered on HTML5 canvas.
 
@@ -52,22 +52,22 @@ And check out the [React bindings](https://github.com/vasturiano/react-force-gra
 
 ## Quick start
 
-```
+```js
 import ForceGraph from 'force-graph';
 ```
 or
-```
-var ForceGraph = require('force-graph');
+```js
+const ForceGraph = require('force-graph');
 ```
 or even
-```
+```html
 <script src="//unpkg.com/force-graph"></script>
 ```
 then
-```
-var myGraph = ForceGraph();
+```js
+const myGraph = ForceGraph();
 myGraph(<myDOMElement>)
-    .graphData(<myData>);
+  .graphData(<myData>);
 ```
 
 ## API reference
@@ -191,7 +191,7 @@ myGraph(<myDOMElement>)
 | <b>graph2ScreenCoords</b>(<i>x</i>, <i>y</i>) | Utility method to translate node coordinates to the viewport domain. Given a pair of `x`,`y` graph coordinates, returns the current equivalent `{x, y}` in viewport coordinates. |
 
 ### Input JSON syntax
-```
+```json
 {
     "nodes": [
         {
@@ -204,14 +204,14 @@ myGraph(<myDOMElement>)
           "name": "name2",
           "val": 10
         },
-        (...)
+        ...
     ],
     "links": [
         {
             "source": "id1",
             "target": "id2"
         },
-        (...)
+        ...
     ]
 }
 ```
@@ -220,9 +220,9 @@ myGraph(<myDOMElement>)
 
 [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url)!
 
-[npm-img]: https://img.shields.io/npm/v/force-graph.svg
+[npm-img]: https://img.shields.io/npm/v/force-graph
 [npm-url]: https://npmjs.org/package/force-graph
-[build-size-img]: https://img.shields.io/bundlephobia/minzip/force-graph.svg
+[build-size-img]: https://img.shields.io/bundlephobia/minzip/force-graph
 [build-size-url]: https://bundlephobia.com/result?p=force-graph
-[dependencies-img]: https://img.shields.io/david/vasturiano/force-graph.svg
-[dependencies-url]: https://david-dm.org/vasturiano/force-graph
+[npm-downloads-img]: https://img.shields.io/npm/dt/force-graph
+[npm-downloads-url]: https://www.npmtrends.com/force-graph

package/dist/force-graph.common.js

@@ -61,14 +61,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -76,19 +71,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -97,17 +85,11 @@ function _objectSpread2(target) {
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _defineProperty(obj, key, value) {
@@ -350,7 +332,7 @@ var notifyRedraw = function notifyRedraw(_, state) {
   return state.onNeedsRedraw && state.onNeedsRedraw();
 };
 
-var CanvasForceGraph = Kapsule__default['default']({
+var CanvasForceGraph = Kapsule__default["default"]({
   props: {
     graphData: {
       "default": {
@@ -604,10 +586,10 @@ var CanvasForceGraph = Kapsule__default['default']({
       }
 
       function paintNodes() {
-        var getVisibility = accessorFn__default['default'](state.nodeVisibility);
-        var getVal = accessorFn__default['default'](state.nodeVal);
-        var getColor = accessorFn__default['default'](state.nodeColor);
-        var getNodeCanvasObjectMode = accessorFn__default['default'](state.nodeCanvasObjectMode);
+        var getVisibility = accessorFn__default["default"](state.nodeVisibility);
+        var getVal = accessorFn__default["default"](state.nodeVal);
+        var getColor = accessorFn__default["default"](state.nodeColor);
+        var getNodeCanvasObjectMode = accessorFn__default["default"](state.nodeCanvasObjectMode);
         var ctx = state.ctx; // Draw wider nodes by 1px on shadow canvas for more precise hovering (due to boundary anti-aliasing)
 
         var padAmount = state.isShadow / state.globalScale;
@@ -642,12 +624,12 @@ var CanvasForceGraph = Kapsule__default['default']({
       }
 
       function paintLinks() {
-        var getVisibility = accessorFn__default['default'](state.linkVisibility);
-        var getColor = accessorFn__default['default'](state.linkColor);
-        var getWidth = accessorFn__default['default'](state.linkWidth);
-        var getLineDash = accessorFn__default['default'](state.linkLineDash);
-        var getCurvature = accessorFn__default['default'](state.linkCurvature);
-        var getLinkCanvasObjectMode = accessorFn__default['default'](state.linkCanvasObjectMode);
+        var getVisibility = accessorFn__default["default"](state.linkVisibility);
+        var getColor = accessorFn__default["default"](state.linkColor);
+        var getWidth = accessorFn__default["default"](state.linkWidth);
+        var getLineDash = accessorFn__default["default"](state.linkLineDash);
+        var getCurvature = accessorFn__default["default"](state.linkCurvature);
+        var getLinkCanvasObjectMode = accessorFn__default["default"](state.linkCanvasObjectMode);
         var ctx = state.ctx; // Draw wider lines by 2px on shadow canvas for more precise hovering (due to boundary anti-aliasing)
 
         var padAmount = state.isShadow * 2;
@@ -679,7 +661,7 @@ var CanvasForceGraph = Kapsule__default['default']({
         });
         ctx.restore(); // Bundle strokes per unique color/width/dash for performance optimization
 
-        var linksPerColor = indexBy__default['default'](defaultPaintLinks, [getColor, getWidth, getLineDash]);
+        var linksPerColor = indexBy__default["default"](defaultPaintLinks, [getColor, getWidth, getLineDash]);
         ctx.save();
         Object.entries(linksPerColor).forEach(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
@@ -769,11 +751,11 @@ var CanvasForceGraph = Kapsule__default['default']({
       function paintArrows() {
         var ARROW_WH_RATIO = 1.6;
         var ARROW_VLEN_RATIO = 0.2;
-        var getLength = accessorFn__default['default'](state.linkDirectionalArrowLength);
-        var getRelPos = accessorFn__default['default'](state.linkDirectionalArrowRelPos);
-        var getVisibility = accessorFn__default['default'](state.linkVisibility);
-        var getColor = accessorFn__default['default'](state.linkDirectionalArrowColor || state.linkColor);
-        var getNodeVal = accessorFn__default['default'](state.nodeVal);
+        var getLength = accessorFn__default["default"](state.linkDirectionalArrowLength);
+        var getRelPos = accessorFn__default["default"](state.linkDirectionalArrowRelPos);
+        var getVisibility = accessorFn__default["default"](state.linkVisibility);
+        var getColor = accessorFn__default["default"](state.linkDirectionalArrowColor || state.linkColor);
+        var getNodeVal = accessorFn__default["default"](state.nodeVal);
         var ctx = state.ctx;
         ctx.save();
         state.graphData.links.filter(getVisibility).forEach(function (link) {
@@ -819,11 +801,11 @@ var CanvasForceGraph = Kapsule__default['default']({
       }
 
       function paintPhotons() {
-        var getNumPhotons = accessorFn__default['default'](state.linkDirectionalParticles);
-        var getSpeed = accessorFn__default['default'](state.linkDirectionalParticleSpeed);
-        var getDiameter = accessorFn__default['default'](state.linkDirectionalParticleWidth);
-        var getVisibility = accessorFn__default['default'](state.linkVisibility);
-        var getColor = accessorFn__default['default'](state.linkDirectionalParticleColor || state.linkColor);
+        var getNumPhotons = accessorFn__default["default"](state.linkDirectionalParticles);
+        var getSpeed = accessorFn__default["default"](state.linkDirectionalParticleSpeed);
+        var getDiameter = accessorFn__default["default"](state.linkDirectionalParticleWidth);
+        var getVisibility = accessorFn__default["default"](state.linkVisibility);
+        var getColor = accessorFn__default["default"](state.linkDirectionalParticleColor || state.linkColor);
         var ctx = state.ctx;
         ctx.save();
         state.graphData.links.filter(getVisibility).forEach(function (link) {
@@ -915,12 +897,12 @@ var CanvasForceGraph = Kapsule__default['default']({
 
     if (state.nodeAutoColorBy !== null) {
       // Auto add color to uncolored nodes
-      autoColorObjects(state.graphData.nodes, accessorFn__default['default'](state.nodeAutoColorBy), state.nodeColor);
+      autoColorObjects(state.graphData.nodes, accessorFn__default["default"](state.nodeAutoColorBy), state.nodeColor);
     }
 
     if (state.linkAutoColorBy !== null) {
       // Auto add color to uncolored links
-      autoColorObjects(state.graphData.links, accessorFn__default['default'](state.linkAutoColorBy), state.linkColor);
+      autoColorObjects(state.graphData.links, accessorFn__default["default"](state.linkAutoColorBy), state.linkColor);
     } // parse links
 
 
@@ -931,7 +913,7 @@ var CanvasForceGraph = Kapsule__default['default']({
 
     if (!state.isShadow) {
       // Add photon particles
-      var linkParticlesAccessor = accessorFn__default['default'](state.linkDirectionalParticles);
+      var linkParticlesAccessor = accessorFn__default["default"](state.linkDirectionalParticles);
       state.graphData.links.forEach(function (link) {
         var numPhotons = Math.round(Math.abs(linkParticlesAccessor(link)));
 
@@ -1102,7 +1084,7 @@ function clearCanvas(ctx, width, height) {
 } //
 
 
-var forceGraph = Kapsule__default['default']({
+var forceGraph = Kapsule__default["default"]({
   props: _objectSpread2({
     width: {
       "default": window.innerWidth,
@@ -1263,11 +1245,9 @@ var forceGraph = Kapsule__default['default']({
       triggerUpdate: false
     },
     onZoom: {
-      "default": function _default() {},
       triggerUpdate: false
     },
     onZoomEnd: {
-      "default": function _default() {},
       triggerUpdate: false
     },
     onRenderFramePre: {
@@ -1311,7 +1291,7 @@ var forceGraph = Kapsule__default['default']({
           // no animation
           setCenter(finalPos);
         } else {
-          new TWEEN__default['default'].Tween(getCenter()).to(finalPos, transitionDuration).easing(TWEEN__default['default'].Easing.Quadratic.Out).onUpdate(setCenter).start();
+          new TWEEN__default["default"].Tween(getCenter()).to(finalPos, transitionDuration).easing(TWEEN__default["default"].Easing.Quadratic.Out).onUpdate(setCenter).start();
         }
 
         return this;
@@ -1344,11 +1324,11 @@ var forceGraph = Kapsule__default['default']({
           // no animation
           setZoom(k);
         } else {
-          new TWEEN__default['default'].Tween({
+          new TWEEN__default["default"].Tween({
             k: getZoom()
           }).to({
             k: k
-          }, transitionDuration).easing(TWEEN__default['default'].Easing.Quadratic.Out).onUpdate(function (_ref6) {
+          }, transitionDuration).easing(TWEEN__default["default"].Easing.Quadratic.Out).onUpdate(function (_ref6) {
             var k = _ref6.k;
             return setZoom(k);
           }).start();
@@ -1395,7 +1375,7 @@ var forceGraph = Kapsule__default['default']({
       var nodeFilter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
         return true;
       };
-      var getVal = accessorFn__default['default'](state.nodeVal);
+      var getVal = accessorFn__default["default"](state.nodeVal);
 
       var getR = function getR(node) {
         return Math.sqrt(Math.max(0, getVal(node) || 1)) * state.nodeRelSize;
@@ -1450,11 +1430,13 @@ var forceGraph = Kapsule__default['default']({
       zoom: d3Zoom.zoom(),
       forceGraph: new CanvasForceGraph(),
       shadowGraph: new CanvasForceGraph().cooldownTicks(0).nodeColor('__indexColor').linkColor('__indexColor').isShadow(true),
-      colorTracker: new ColorTracker__default['default']() // indexed objects for rgb lookup
+      colorTracker: new ColorTracker__default["default"]() // indexed objects for rgb lookup
 
     };
   },
   init: function init(domNode, state) {
+    var _this = this;
+
     // Wipe DOM
     domNode.innerHTML = ''; // Container anchor for canvas and tooltip
 
@@ -1548,9 +1530,12 @@ var forceGraph = Kapsule__default['default']({
       }
 
       delete obj.__initialDragPos;
-      state.forceGraph.d3AlphaTarget(0) // release engine low intensity
-      .resetCountdown(); // let the engine readjust after releasing fixed nodes
-      // drag cursor
+
+      if (state.forceGraph.d3AlphaTarget()) {
+        state.forceGraph.d3AlphaTarget(0) // release engine low intensity
+        .resetCountdown(); // let the engine readjust after releasing fixed nodes
+      } // drag cursor
+
 
       state.canvas.classList.remove('grabbable');
       state.isPointerDragging = false;
@@ -1577,10 +1562,11 @@ var forceGraph = Kapsule__default['default']({
         c.translate(t.x, t.y);
         c.scale(t.k, t.k);
       });
-      state.onZoom(_objectSpread2({}, t));
+      state.onZoom && state.onZoom(_objectSpread2(_objectSpread2({}, t), _this.centerAt())); // report x,y coordinates relative to canvas center
+
       state.needsRedraw = true;
     }).on('end', function (ev) {
-      return state.onZoomEnd(_objectSpread2({}, ev.transform));
+      return state.onZoomEnd && state.onZoomEnd(_objectSpread2(_objectSpread2({}, ev.transform), _this.centerAt()));
     });
     adjustCanvasSize(state);
     state.forceGraph.onNeedsRedraw(function () {
@@ -1677,12 +1663,12 @@ var forceGraph = Kapsule__default['default']({
     state.forceGraph(ctx);
     state.shadowGraph(shadowCtx); //
 
-    var refreshShadowCanvas = throttle__default['default'](function () {
+    var refreshShadowCanvas = throttle__default["default"](function () {
       // wipe canvas
       clearCanvas(shadowCtx, state.width, state.height); // Adjust link hover area
 
       state.shadowGraph.linkWidth(function (l) {
-        return accessorFn__default['default'](state.linkWidth)(l) + state.linkHoverPrecision;
+        return accessorFn__default["default"](state.linkWidth)(l) + state.linkHoverPrecision;
       }); // redraw
 
       var t = d3Zoom.zoomTransform(state.canvas);
@@ -1719,7 +1705,7 @@ var forceGraph = Kapsule__default['default']({
             _fn2 && _fn2(obj.d, prevObjType === objType ? prevObj.d : null);
           }
 
-          var tooltipContent = obj ? accessorFn__default['default'](state["".concat(obj.type.toLowerCase(), "Label")])(obj.d) || '' : '';
+          var tooltipContent = obj ? accessorFn__default["default"](state["".concat(obj.type.toLowerCase(), "Label")])(obj.d) || '' : '';
           toolTipElem.style.visibility = tooltipContent ? 'visible' : 'hidden';
           toolTipElem.innerHTML = tooltipContent; // set pointer if hovered object is clickable
 
@@ -1740,7 +1726,7 @@ var forceGraph = Kapsule__default['default']({
         state.onRenderFramePost && state.onRenderFramePost(ctx, globalScale);
       }
 
-      TWEEN__default['default'].update(); // update canvas animation tweens
+      TWEEN__default["default"].update(); // update canvas animation tweens
 
       state.animationFrameRequestId = requestAnimationFrame(animate);
     })();

package/dist/force-graph.d.ts

@@ -30,7 +30,7 @@ type DagMode = 'td' | 'bu' | 'lr' | 'rl' | 'radialout' | 'radialin';
 
 interface ForceFn {
   (alpha: number): void;
-  initialize?: (nodes: NodeObject[]) => void;
+  initialize?: (nodes: NodeObject[], ...args: any[]) => void;
   [key: string]: any;
 }