force-graph 1.42.3 → 1.42.7

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.
 
@@ -15,7 +15,12 @@ A web component to represent a graph data structure in a 2-dimensional canvas us
 Uses HTML5 canvas for rendering and [d3-force](https://github.com/d3/d3-force) for the underlying physics engine.
 Supports canvas zooming/panning, node dragging and node/link hover/click interactions.
 
-Check out the examples:
+See also the [3D version](https://github.com/vasturiano/3d-force-graph).
+
+And check out the [React bindings](https://github.com/vasturiano/react-force-graph).
+
+## Examples
+
 * [Basic](https://vasturiano.github.io/force-graph/example/basic/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/basic/index.html))
 * [Load JSON](https://vasturiano.github.io/force-graph/example/load-json/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/load-json/index.html))
 * [Medium size graph (~4k elements)](https://vasturiano.github.io/force-graph/example/medium-graph/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/medium-graph/index.html))
@@ -46,28 +51,24 @@ Check out the examples:
 * [yarn.lock dependency graph (DAG mode)](https://vasturiano.github.io/force-graph/example/dag-yarn/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/dag-yarn/index.html))
 * [Usage as UI to construct graphs](https://vasturiano.github.io/force-graph/example/build-a-graph/) ([source](https://github.com/vasturiano/force-graph/blob/master/example/build-a-graph/index.html))
 
-See also the [3D version](https://github.com/vasturiano/3d-force-graph).
-
-And check out the [React bindings](https://github.com/vasturiano/react-force-graph).
-
 ## 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 +192,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 +205,14 @@ myGraph(<myDOMElement>)
           "name": "name2",
           "val": 10
         },
-        (...)
+        ...
     ],
     "links": [
         {
             "source": "id1",
             "target": "id2"
         },
-        (...)
+        ...
     ]
 }
 ```
@@ -220,9 +221,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) {
@@ -1263,11 +1245,9 @@ var forceGraph = Kapsule__default["default"]({
       triggerUpdate: false
     },
     onZoom: {
-      "default": function _default() {},
       triggerUpdate: false
     },
     onZoomEnd: {
-      "default": function _default() {},
       triggerUpdate: false
     },
     onRenderFramePre: {
@@ -1455,6 +1435,8 @@ var forceGraph = Kapsule__default["default"]({
     };
   },
   init: function init(domNode, state) {
+    var _this = this;
+
     // Wipe DOM
     domNode.innerHTML = ''; // Container anchor for canvas and tooltip
 
@@ -1580,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 () {

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;
 }
 

package/dist/force-graph.js

@@ -1,4 +1,4 @@
-// Version 1.42.3 force-graph - https://github.com/vasturiano/force-graph
+// Version 1.42.7 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) :
@@ -40,14 +40,9 @@
 
     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;
@@ -55,19 +50,12 @@
 
   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;
@@ -76,17 +64,11 @@
   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) {
@@ -5093,6 +5075,25 @@
     }
   }
 
+  function _defineProperties$1(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass$1(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties$1(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
   function _slicedToArray$1(arr, i) {
     return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$1();
   }
@@ -5102,7 +5103,7 @@
   }
 
   function _iterableToArrayLimit$1(arr, i) {
-    var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
     if (_i == null) return;
     var _arr = [];
@@ -5152,7 +5153,7 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
-  var Prop = function Prop(name, _ref) {
+  var Prop = /*#__PURE__*/_createClass$1(function Prop(name, _ref) {
     var _ref$default = _ref["default"],
         defaultVal = _ref$default === void 0 ? null : _ref$default,
         _ref$triggerUpdate = _ref.triggerUpdate,
@@ -5166,7 +5167,7 @@
     this.defaultVal = defaultVal;
     this.triggerUpdate = triggerUpdate;
     this.onChange = onChange;
-  };
+  });
 
   function index$3 (_ref2) {
     var _ref2$stateInit = _ref2.stateInit,
@@ -8837,21 +8838,13 @@
     },
 
     makeline: function (p1, p2) {
-      const x1 = p1.x,
-        y1 = p1.y,
-        x2 = p2.x,
-        y2 = p2.y,
-        dx = (x2 - x1) / 3,
-        dy = (y2 - y1) / 3;
       return new Bezier(
-        x1,
-        y1,
-        x1 + dx,
-        y1 + dy,
-        x1 + 2 * dx,
-        y1 + 2 * dy,
-        x2,
-        y2
+        p1.x,
+        p1.y,
+        (p1.x + p2.x) / 2,
+        (p1.y + p2.y) / 2,
+        p2.x,
+        p2.y
       );
     },
 
@@ -9488,11 +9481,12 @@
       if (_3d) dims.push("z");
       this.dimlen = dims.length;
 
+      // is this curve, practically speaking, a straight line?
       const aligned = utils.align(points, { p1: points[0], p2: points[order] });
-      this._linear = !aligned.some((p) => abs(p.y) > 0.0001);
+      const baselength = utils.dist(points[0], points[order]);
+      this._linear = aligned.reduce((t, p) => t + abs(p.y), 0) < baselength / 50;
 
       this._lut = [];
-
       this._t1 = 0;
       this._t2 = 1;
       this.update();
@@ -9649,9 +9643,9 @@
         return this._lut;
       }
       this._lut = [];
-      // We want a range from 0 to 1 inclusive, so
-      // we decrement and then use <= rather than <:
-      steps--;
+      // n steps means n+1 points
+      steps++;
+      this._lut = [];
       for (let i = 0, p, t; i < steps; i++) {
         t = i / (steps - 1);
         p = this.compute(t);
@@ -10032,6 +10026,22 @@
       return pass2;
     }
 
+    translate(v, d1, d2) {
+      d2 = typeof d2 === "number" ? d2 : d1;
+
+      // TODO: make this take curves with control points outside
+      //       of the start-end interval into account
+
+      const o = this.order;
+      let d = this.points.map((_, i) => (1 - i / o) * d1 + (i / o) * d2);
+      return new Bezier(
+        this.points.map((p, i) => ({
+          x: p.x + v.x * d[i],
+          y: p.y + v.y * d[i],
+        }))
+      );
+    }
+
     scale(d) {
       const order = this.order;
       let distanceFn = false;
@@ -10042,21 +10052,31 @@
         return this.raise().scale(distanceFn);
       }
 
-      // TODO: add special handling for degenerate (=linear) curves.
+      // TODO: add special handling for non-linear degenerate curves.
+
       const clockwise = this.clockwise;
+      const points = this.points;
+
+      if (this._linear) {
+        return this.translate(
+          this.normal(0),
+          distanceFn ? distanceFn(0) : d,
+          distanceFn ? distanceFn(1) : d
+        );
+      }
+
       const r1 = distanceFn ? distanceFn(0) : d;
       const r2 = distanceFn ? distanceFn(1) : d;
       const v = [this.offset(0, 10), this.offset(1, 10)];
-      const points = this.points;
       const np = [];
       const o = utils.lli4(v[0], v[0].c, v[1], v[1].c);
 
       if (!o) {
         throw new Error("cannot scale this curve. Try reducing it first.");
       }
-      // move all points by distance 'd' wrt the origin 'o'
 
-      // move end points by fixed distance along normal.
+      // move all points by distance 'd' wrt the origin 'o',
+      // and move end points by fixed distance along normal.
       [0, 1].forEach(function (t) {
         const p = (np[t * order] = utils.copy(points[t * order]));
         p.x += (t ? r2 : r1) * v[t].n.x;
@@ -10099,7 +10119,38 @@
     }
 
     outline(d1, d2, d3, d4) {
-      d2 = typeof d2 === "undefined" ? d1 : d2;
+      d2 = d2 === undefined ? d1 : d2;
+
+      if (this._linear) {
+        // TODO: find the actual extrema, because they might
+        //       be before the start, or past the end.
+
+        const n = this.normal(0);
+        const start = this.points[0];
+        const end = this.points[this.points.length - 1];
+        let s, mid, e;
+
+        if (d3 === undefined) {
+          d3 = d1;
+          d4 = d2;
+        }
+
+        s = { x: start.x + n.x * d1, y: start.y + n.y * d1 };
+        e = { x: end.x + n.x * d3, y: end.y + n.y * d3 };
+        mid = { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 };
+        const fline = [s, mid, e];
+
+        s = { x: start.x - n.x * d2, y: start.y - n.y * d2 };
+        e = { x: end.x - n.x * d4, y: end.y - n.y * d4 };
+        mid = { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 };
+        const bline = [e, mid, s];
+
+        const ls = utils.makeline(bline[2], fline[0]);
+        const le = utils.makeline(fline[2], bline[0]);
+        const segments = [ls, new Bezier(fline), le, new Bezier(bline)];
+        return new PolyBezier(segments);
+      }
+
       const reduced = this.reduce(),
         len = reduced.length,
         fcurves = [];
@@ -10158,7 +10209,6 @@
         ls = utils.makeline(bs, fs),
         le = utils.makeline(fe, be),
         segments = [ls].concat(fcurves).concat([le]).concat(bcurves);
-        segments.length;
 
       return new PolyBezier(segments);
     }
@@ -11674,11 +11724,9 @@
         triggerUpdate: false
       },
       onZoom: {
-        "default": function _default() {},
         triggerUpdate: false
       },
       onZoomEnd: {
-        "default": function _default() {},
         triggerUpdate: false
       },
       onRenderFramePre: {
@@ -11866,6 +11914,8 @@
       };
     },
     init: function init(domNode, state) {
+      var _this = this;
+
       // Wipe DOM
       domNode.innerHTML = ''; // Container anchor for canvas and tooltip
 
@@ -11991,10 +12041,11 @@
           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 () {