force-graph 1.42.13 → 1.42.14

package/dist/force-graph.common.js

@@ -15,27 +15,15 @@ var indexBy = require('index-array-by');
 var d3Scale = require('d3-scale');
 var d3ScaleChromatic = require('d3-scale-chromatic');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-var TWEEN__default = /*#__PURE__*/_interopDefaultLegacy(TWEEN);
-var Kapsule__default = /*#__PURE__*/_interopDefaultLegacy(Kapsule);
-var accessorFn__default = /*#__PURE__*/_interopDefaultLegacy(accessorFn);
-var ColorTracker__default = /*#__PURE__*/_interopDefaultLegacy(ColorTracker);
-var indexBy__default = /*#__PURE__*/_interopDefaultLegacy(indexBy);
-
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-
   if (!css || typeof document === 'undefined') {
     return;
   }
-
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
   style.type = 'text/css';
-
   if (insertAt === 'top') {
     if (head.firstChild) {
       head.insertBefore(style, head.firstChild);
@@ -45,7 +33,6 @@ function styleInject(css, ref) {
   } else {
     head.appendChild(style);
   }
-
   if (style.styleSheet) {
     style.styleSheet.cssText = css;
   } else {
@@ -53,22 +40,19 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".force-graph-container canvas {\n  display: block;\n  user-select: none;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.force-graph-container .graph-tooltip {\n  position: absolute;\n  top: 0;\n  transform: translate(-50%, 25px);\n  font-family: sans-serif;\n  font-size: 16px;\n  padding: 4px;\n  border-radius: 3px;\n  color: #eee;\n  background: rgba(0,0,0,0.65);\n  visibility: hidden; /* by default */\n}\n\n.force-graph-container .clickable {\n  cursor: pointer;\n}\n\n.force-graph-container .grabbable {\n  cursor: move;\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n\n.force-graph-container .grabbable:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n";
+var css_248z = ".force-graph-container canvas {\n  display: block;\n  user-select: none;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.force-graph-container .graph-tooltip {\n  position: absolute;\n  top: 0;\n  font-family: sans-serif;\n  font-size: 16px;\n  padding: 4px;\n  border-radius: 3px;\n  color: #eee;\n  background: rgba(0,0,0,0.65);\n  visibility: hidden; /* by default */\n}\n\n.force-graph-container .clickable {\n  cursor: pointer;\n}\n\n.force-graph-container .grabbable {\n  cursor: move;\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n\n.force-graph-container .grabbable:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n";
 styleInject(css_248z);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -78,10 +62,8 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -91,7 +73,6 @@ function _typeof(obj) {
     return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
   }, _typeof(obj);
 }
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -103,10 +84,8 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -114,12 +93,10 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-
 function _isNativeReflectConstruct() {
   if (typeof Reflect === "undefined" || !Reflect.construct) return false;
   if (Reflect.construct.sham) return false;
   if (typeof Proxy === "function") return true;
-
   try {
     Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
@@ -127,7 +104,6 @@ function _isNativeReflectConstruct() {
     return false;
   }
 }
-
 function _construct(Parent, args, Class) {
   if (_isNativeReflectConstruct()) {
     _construct = Reflect.construct.bind();
@@ -141,44 +117,33 @@ function _construct(Parent, args, Class) {
       return instance;
     };
   }
-
   return _construct.apply(null, arguments);
 }
-
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
-
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
-
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-
 function _iterableToArrayLimit(arr, i) {
   var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
   if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-
   var _s, _e;
-
   try {
     for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
-
       if (i && _arr.length === i) break;
     }
   } catch (err) {
@@ -191,10 +156,8 @@ function _iterableToArrayLimit(arr, i) {
       if (_d) throw _e;
     }
   }
-
   return _arr;
 }
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -203,27 +166,23 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
 }
-
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
 function _nonIterableRest() {
   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 autoColorScale = d3Scale.scaleOrdinal(d3ScaleChromatic.schemePaired); // Autoset attribute colorField by colorByAccessor property
+var autoColorScale = d3Scale.scaleOrdinal(d3ScaleChromatic.schemePaired);
+
+// Autoset attribute colorField by colorByAccessor property
 // If an object has already a color, don't set it
 // Objects can be nodes or links
-
 function autoColorObjects(objects, colorByAccessor, colorField) {
   if (!colorByAccessor || typeof colorField !== 'string') return;
   objects.filter(function (obj) {
@@ -235,18 +194,16 @@ function autoColorObjects(objects, colorByAccessor, colorField) {
 
 function getDagDepths (_ref, idAccessor) {
   var nodes = _ref.nodes,
-      links = _ref.links;
-
+    links = _ref.links;
   var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      _ref2$nodeFilter = _ref2.nodeFilter,
-      nodeFilter = _ref2$nodeFilter === void 0 ? function () {
-    return true;
-  } : _ref2$nodeFilter,
-      _ref2$onLoopError = _ref2.onLoopError,
-      onLoopError = _ref2$onLoopError === void 0 ? function (loopIds) {
-    throw "Invalid DAG structure! Found cycle in node path: ".concat(loopIds.join(' -> '), ".");
-  } : _ref2$onLoopError;
-
+    _ref2$nodeFilter = _ref2.nodeFilter,
+    nodeFilter = _ref2$nodeFilter === void 0 ? function () {
+      return true;
+    } : _ref2$nodeFilter,
+    _ref2$onLoopError = _ref2.onLoopError,
+    onLoopError = _ref2$onLoopError === void 0 ? function (loopIds) {
+      throw "Invalid DAG structure! Found cycle in node path: ".concat(loopIds.join(' -> '), ".");
+    } : _ref2$onLoopError;
   // linked graph
   var graph = {};
   nodes.forEach(function (node) {
@@ -259,7 +216,7 @@ function getDagDepths (_ref, idAccessor) {
   });
   links.forEach(function (_ref3) {
     var source = _ref3.source,
-        target = _ref3.target;
+      target = _ref3.target;
     var sourceId = getNodeId(source);
     var targetId = getNodeId(target);
     if (!graph.hasOwnProperty(sourceId)) throw "Missing source node with id: ".concat(sourceId);
@@ -267,7 +224,6 @@ function getDagDepths (_ref, idAccessor) {
     var sourceNode = graph[sourceId];
     var targetNode = graph[targetId];
     sourceNode.out.push(targetNode);
-
     function getNodeId(node) {
       return _typeof(node) === 'object' ? idAccessor(node) : node;
     }
@@ -276,31 +232,25 @@ function getDagDepths (_ref, idAccessor) {
   traverse(Object.values(graph));
   var nodeDepths = Object.assign.apply(Object, [{}].concat(_toConsumableArray(Object.entries(graph).filter(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
-        node = _ref5[1];
-
+      node = _ref5[1];
     return !node.skip;
   }).map(function (_ref6) {
     var _ref7 = _slicedToArray(_ref6, 2),
-        id = _ref7[0],
-        node = _ref7[1];
-
+      id = _ref7[0],
+      node = _ref7[1];
     return _defineProperty({}, id, node.depth);
   }))));
   return nodeDepths;
-
   function traverse(nodes) {
     var nodeStack = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     var currentDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-
     for (var i = 0, l = nodes.length; i < l; i++) {
       var node = nodes[i];
-
       if (nodeStack.indexOf(node) !== -1) {
         var _ret = function () {
           var loop = [].concat(_toConsumableArray(nodeStack.slice(nodeStack.indexOf(node))), [node]).map(function (d) {
             return idAccessor(d.data);
           });
-
           if (!foundLoops.some(function (foundLoop) {
             return foundLoop.length === loop.length && foundLoop.every(function (id, idx) {
               return id === loop[idx];
@@ -309,13 +259,10 @@ function getDagDepths (_ref, idAccessor) {
             foundLoops.push(loop);
             onLoopError(loop);
           }
-
           return "continue";
         }();
-
         if (_ret === "continue") continue;
       }
-
       if (currentDepth > node.depth) {
         // Don't unnecessarily revisit chunks of the graph
         node.depth = currentDepth;
@@ -325,13 +272,15 @@ function getDagDepths (_ref, idAccessor) {
   }
 }
 
-var DAG_LEVEL_NODE_RATIO = 2; // whenever styling props are changed that require a canvas redraw
+//
 
+var DAG_LEVEL_NODE_RATIO = 2;
+
+// whenever styling props are changed that require a canvas redraw
 var notifyRedraw = function notifyRedraw(_, state) {
   return state.onNeedsRedraw && state.onNeedsRedraw();
 };
-
-var CanvasForceGraph = Kapsule__default["default"]({
+var CanvasForceGraph = Kapsule({
   props: {
     graphData: {
       "default": {
@@ -341,7 +290,6 @@ var CanvasForceGraph = Kapsule__default["default"]({
       onChange: function onChange(_, state) {
         state.engineRunning = false;
       } // Pause simulation
-
     },
     dagMode: {
       onChange: function onChange(dagMode, state) {
@@ -351,6 +299,7 @@ var CanvasForceGraph = Kapsule__default["default"]({
         }); // unfix nodes when disabling dag mode
       }
     },
+
     dagLevelDistance: {},
     dagNodeFilter: {
       "default": function _default(node) {
@@ -544,7 +493,6 @@ var CanvasForceGraph = Kapsule__default["default"]({
       }
 
       state.forceLayout.force(forceName, forceFn); // Force setter
-
       return this;
     },
     d3ReheatSimulation: function d3ReheatSimulation(state) {
@@ -568,52 +516,49 @@ var CanvasForceGraph = Kapsule__default["default"]({
       !state.isShadow && paintArrows();
       !state.isShadow && paintPhotons();
       paintNodes();
-      return this; //
+      return this;
+
+      //
 
       function layoutTick() {
         if (state.engineRunning) {
           if (++state.cntTicks > state.cooldownTicks || new Date() - state.startTickTime > state.cooldownTime || state.d3AlphaMin > 0 && state.forceLayout.alpha() < state.d3AlphaMin) {
             state.engineRunning = false; // Stop ticking graph
-
             state.onEngineStop();
           } else {
             state.forceLayout.tick(); // Tick it
-
             state.onEngineTick();
           }
         }
       }
-
       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 ctx = state.ctx; // Draw wider nodes by 1px on shadow canvas for more precise hovering (due to boundary anti-aliasing)
+        var getVisibility = accessorFn(state.nodeVisibility);
+        var getVal = accessorFn(state.nodeVal);
+        var getColor = accessorFn(state.nodeColor);
+        var getNodeCanvasObjectMode = accessorFn(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;
         var visibleNodes = state.graphData.nodes.filter(getVisibility);
         ctx.save();
         visibleNodes.forEach(function (node) {
           var nodeCanvasObjectMode = getNodeCanvasObjectMode(node);
-
           if (state.nodeCanvasObject && (nodeCanvasObjectMode === 'before' || nodeCanvasObjectMode === 'replace')) {
             // Custom node before/replace paint
             state.nodeCanvasObject(node, ctx, state.globalScale);
-
             if (nodeCanvasObjectMode === 'replace') {
               ctx.restore();
               return;
             }
-          } // Draw wider nodes by 1px on shadow canvas for more precise hovering (due to boundary anti-aliasing)
-
+          }
 
+          // Draw wider nodes by 1px on shadow canvas for more precise hovering (due to boundary anti-aliasing)
           var r = Math.sqrt(Math.max(0, getVal(node) || 1)) * state.nodeRelSize + padAmount;
           ctx.beginPath();
           ctx.arc(node.x, node.y, r, 0, 2 * Math.PI, false);
           ctx.fillStyle = getColor(node) || 'rgba(31, 120, 180, 0.92)';
           ctx.fill();
-
           if (state.nodeCanvasObject && nodeCanvasObjectMode === 'after') {
             // Custom node after paint
             state.nodeCanvasObject(node, state.ctx, state.globalScale);
@@ -621,27 +566,26 @@ var CanvasForceGraph = Kapsule__default["default"]({
         });
         ctx.restore();
       }
-
       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 ctx = state.ctx; // Draw wider lines by 2px on shadow canvas for more precise hovering (due to boundary anti-aliasing)
+        var getVisibility = accessorFn(state.linkVisibility);
+        var getColor = accessorFn(state.linkColor);
+        var getWidth = accessorFn(state.linkWidth);
+        var getLineDash = accessorFn(state.linkLineDash);
+        var getCurvature = accessorFn(state.linkCurvature);
+        var getLinkCanvasObjectMode = accessorFn(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;
         var visibleLinks = state.graphData.links.filter(getVisibility);
         visibleLinks.forEach(calcLinkControlPoints); // calculate curvature control points for all visible links
 
         var beforeCustomLinks = [],
-            afterCustomLinks = [],
-            defaultPaintLinks = visibleLinks;
-
+          afterCustomLinks = [],
+          defaultPaintLinks = visibleLinks;
         if (state.linkCanvasObject) {
           var replaceCustomLinks = [],
-              otherCustomLinks = [];
+            otherCustomLinks = [];
           visibleLinks.forEach(function (d) {
             return ({
               before: beforeCustomLinks,
@@ -651,34 +595,32 @@ var CanvasForceGraph = Kapsule__default["default"]({
           });
           defaultPaintLinks = [].concat(_toConsumableArray(beforeCustomLinks), afterCustomLinks, otherCustomLinks);
           beforeCustomLinks = beforeCustomLinks.concat(replaceCustomLinks);
-        } // Custom link before paints
-
+        }
 
+        // Custom link before paints
         ctx.save();
         beforeCustomLinks.forEach(function (link) {
           return state.linkCanvasObject(link, ctx, state.globalScale);
         });
-        ctx.restore(); // Bundle strokes per unique color/width/dash for performance optimization
+        ctx.restore();
 
-        var linksPerColor = indexBy__default["default"](defaultPaintLinks, [getColor, getWidth, getLineDash]);
+        // Bundle strokes per unique color/width/dash for performance optimization
+        var linksPerColor = indexBy(defaultPaintLinks, [getColor, getWidth, getLineDash]);
         ctx.save();
         Object.entries(linksPerColor).forEach(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
-              color = _ref2[0],
-              linksPerWidth = _ref2[1];
-
+            color = _ref2[0],
+            linksPerWidth = _ref2[1];
           var lineColor = !color || color === 'undefined' ? 'rgba(0,0,0,0.15)' : color;
           Object.entries(linksPerWidth).forEach(function (_ref3) {
             var _ref4 = _slicedToArray(_ref3, 2),
-                width = _ref4[0],
-                linesPerLineDash = _ref4[1];
-
+              width = _ref4[0],
+              linesPerLineDash = _ref4[1];
             var lineWidth = (width || 1) / state.globalScale + padAmount;
             Object.entries(linesPerLineDash).forEach(function (_ref5) {
               var _ref6 = _slicedToArray(_ref5, 2);
-                  _ref6[0];
-                  var links = _ref6[1];
-
+                _ref6[0];
+                var links = _ref6[1];
               var lineDashSegments = getLineDash(links[0]);
               ctx.beginPath();
               links.forEach(function (link) {
@@ -688,7 +630,6 @@ var CanvasForceGraph = Kapsule__default["default"]({
 
                 ctx.moveTo(start.x, start.y);
                 var controlPoints = link.__controlPoints;
-
                 if (!controlPoints) {
                   // Straight line
                   ctx.lineTo(end.x, end.y);
@@ -704,23 +645,24 @@ var CanvasForceGraph = Kapsule__default["default"]({
             });
           });
         });
-        ctx.restore(); // Custom link after paints
+        ctx.restore();
 
+        // Custom link after paints
         ctx.save();
         afterCustomLinks.forEach(function (link) {
           return state.linkCanvasObject(link, ctx, state.globalScale);
         });
-        ctx.restore(); //
+        ctx.restore();
+
+        //
 
         function calcLinkControlPoints(link) {
           var curvature = getCurvature(link);
-
           if (!curvature) {
             // straight line
             link.__controlPoints = null;
             return;
           }
-
           var start = link.source;
           var end = link.target;
           if (!start || !end || !start.hasOwnProperty('x') || !end.hasOwnProperty('x')) return; // skip invalid link
@@ -729,7 +671,6 @@ var CanvasForceGraph = Kapsule__default["default"]({
 
           if (l > 0) {
             var a = Math.atan2(end.y - start.y, end.x - start.x); // line angle
-
             var d = l * curvature; // control point distance
 
             var cp = {
@@ -741,20 +682,18 @@ var CanvasForceGraph = Kapsule__default["default"]({
           } else {
             // Same point, draw a loop
             var _d = curvature * 70;
-
             link.__controlPoints = [end.x, end.y - _d, end.x + _d, end.y];
           }
         }
       }
-
       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(state.linkDirectionalArrowLength);
+        var getRelPos = accessorFn(state.linkDirectionalArrowRelPos);
+        var getVisibility = accessorFn(state.linkVisibility);
+        var getColor = accessorFn(state.linkDirectionalArrowColor || state.linkColor);
+        var getNodeVal = accessorFn(state.nodeVal);
         var ctx = state.ctx;
         ctx.save();
         state.graphData.links.filter(getVisibility).forEach(function (link) {
@@ -768,10 +707,10 @@ var CanvasForceGraph = Kapsule__default["default"]({
           var endR = Math.sqrt(Math.max(0, getNodeVal(end) || 1)) * state.nodeRelSize;
           var arrowRelPos = Math.min(1, Math.max(0, getRelPos(link)));
           var arrowColor = getColor(link) || 'rgba(0,0,0,0.28)';
-          var arrowHalfWidth = arrowLength / ARROW_WH_RATIO / 2; // Construct bezier for curved lines
+          var arrowHalfWidth = arrowLength / ARROW_WH_RATIO / 2;
 
+          // Construct bezier for curved lines
           var bzLine = link.__controlPoints && _construct(bezierJs.Bezier, [start.x, start.y].concat(_toConsumableArray(link.__controlPoints), [end.x, end.y]));
-
           var getCoordsAlongLine = bzLine ? function (t) {
             return bzLine.get(t);
           } // get position along bezier line
@@ -798,13 +737,12 @@ var CanvasForceGraph = Kapsule__default["default"]({
         });
         ctx.restore();
       }
-
       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(state.linkDirectionalParticles);
+        var getSpeed = accessorFn(state.linkDirectionalParticleSpeed);
+        var getDiameter = accessorFn(state.linkDirectionalParticleWidth);
+        var getVisibility = accessorFn(state.linkVisibility);
+        var getColor = accessorFn(state.linkDirectionalParticleColor || state.linkColor);
         var ctx = state.ctx;
         ctx.save();
         state.graphData.links.filter(getVisibility).forEach(function (link) {
@@ -818,23 +756,20 @@ var CanvasForceGraph = Kapsule__default["default"]({
           var photons = link.__photons || [];
           var photonR = Math.max(0, getDiameter(link) / 2) / Math.sqrt(state.globalScale);
           var photonColor = getColor(link) || 'rgba(0,0,0,0.28)';
-          ctx.fillStyle = photonColor; // Construct bezier for curved lines
+          ctx.fillStyle = photonColor;
 
+          // Construct bezier for curved lines
           var bzLine = link.__controlPoints ? _construct(bezierJs.Bezier, [start.x, start.y].concat(_toConsumableArray(link.__controlPoints), [end.x, end.y])) : null;
           var cyclePhotonIdx = 0;
           var needsCleanup = false; // whether some photons need to be removed from list
-
           photons.forEach(function (photon) {
             var singleHop = !!photon.__singleHop;
-
             if (!photon.hasOwnProperty('__progressRatio')) {
               photon.__progressRatio = singleHop ? 0 : cyclePhotonIdx / numCyclePhotons;
             }
-
             !singleHop && cyclePhotonIdx++; // increase regular photon index
 
             photon.__progressRatio += particleSpeed;
-
             if (photon.__progressRatio >= 1) {
               if (!singleHop) {
                 photon.__progressRatio = photon.__progressRatio % 1;
@@ -843,7 +778,6 @@ var CanvasForceGraph = Kapsule__default["default"]({
                 return;
               }
             }
-
             var photonPosRatio = photon.__progressRatio;
             var coords = bzLine ? bzLine.get(photonPosRatio) // get position along bezier line
             : {
@@ -855,7 +789,6 @@ var CanvasForceGraph = Kapsule__default["default"]({
             ctx.arc(coords.x, coords.y, photonR, 0, 2 * Math.PI, false);
             ctx.fill();
           });
-
           if (needsCleanup) {
             // remove expired single hop photons
             link.__photons = link.__photons.filter(function (photon) {
@@ -869,11 +802,9 @@ var CanvasForceGraph = Kapsule__default["default"]({
     emitParticle: function emitParticle(state, link) {
       if (link) {
         !link.__photons && (link.__photons = []);
-
         link.__photons.push({
           __singleHop: true
         }); // add a single hop particle
-
       }
 
       return this;
@@ -891,31 +822,26 @@ var CanvasForceGraph = Kapsule__default["default"]({
   },
   update: function update(state) {
     state.engineRunning = false; // Pause simulation
-
     state.onUpdate();
-
     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(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);
-    } // parse links
-
+      autoColorObjects(state.graphData.links, accessorFn(state.linkAutoColorBy), state.linkColor);
+    }
 
+    // parse links
     state.graphData.links.forEach(function (link) {
       link.source = link[state.linkSource];
       link.target = link[state.linkTarget];
     });
-
     if (!state.isShadow) {
       // Add photon particles
-      var linkParticlesAccessor = accessorFn__default["default"](state.linkDirectionalParticles);
+      var linkParticlesAccessor = accessorFn(state.linkDirectionalParticles);
       state.graphData.links.forEach(function (link) {
         var numPhotons = Math.round(Math.abs(linkParticlesAccessor(link)));
-
         if (numPhotons) {
           link.__photons = _toConsumableArray(Array(numPhotons)).map(function () {
             return {};
@@ -924,21 +850,21 @@ var CanvasForceGraph = Kapsule__default["default"]({
           delete link.__photons;
         }
       });
-    } // Feed data to force-directed layout
-
+    }
 
+    // Feed data to force-directed layout
     state.forceLayout.stop().alpha(1) // re-heat the simulation
-    .nodes(state.graphData.nodes); // add links (if link force is still active)
+    .nodes(state.graphData.nodes);
 
+    // add links (if link force is still active)
     var linkForce = state.forceLayout.force('link');
-
     if (linkForce) {
       linkForce.id(function (d) {
         return d[state.nodeId];
       }).links(state.graphData.links);
-    } // setup dag force constraints
-
+    }
 
+    // setup dag force constraints
     var nodeDepths = state.dagMode && getDagDepths(state.graphData, function (node) {
       return node[state.nodeId];
     }, {
@@ -946,36 +872,34 @@ var CanvasForceGraph = Kapsule__default["default"]({
       onLoopError: state.onDagError || undefined
     });
     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); // Fix nodes to x,y for dag mode
+    var dagLevelDistance = state.dagLevelDistance || state.graphData.nodes.length / (maxDepth || 1) * DAG_LEVEL_NODE_RATIO * (['radialin', 'radialout'].indexOf(state.dagMode) !== -1 ? 0.7 : 1);
 
+    // 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);
         };
       };
-
       var fxFn = getFFn(['lr', 'rl'].indexOf(state.dagMode) !== -1, state.dagMode === 'rl');
       var fyFn = getFFn(['td', 'bu'].indexOf(state.dagMode) !== -1, state.dagMode === 'bu');
       state.graphData.nodes.filter(state.dagNodeFilter).forEach(function (node) {
         node.fx = fxFn(node);
         node.fy = fyFn(node);
       });
-    } // Use radial force for radial dags
-
+    }
 
+    // Use radial force for radial dags
     state.forceLayout.force('dagRadial', ['radialin', 'radialout'].indexOf(state.dagMode) !== -1 ? d3Force3d.forceRadial(function (node) {
       var nodeDepth = nodeDepths[node[state.nodeId]] || -1;
       return (state.dagMode === 'radialin' ? maxDepth - nodeDepth : nodeDepth) * dagLevelDistance;
     }).strength(function (node) {
       return state.dagNodeFilter(node) ? 1 : 0;
     }) : null);
-
     for (var i = 0; i < state.warmupTicks && !(state.d3AlphaMin > 0 && state.forceLayout.alpha() < state.d3AlphaMin); i++) {
       state.forceLayout.tick();
     } // Initial ticks before starting to render
 
-
     this.resetCountdown();
     state.onFinishUpdate();
   }
@@ -1004,12 +928,10 @@ function linkKapsule (kapsulePropNames, kapsuleType) {
         for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
           args[_key - 1] = arguments[_key];
         }
-
         var returnVals = [];
         propNames.forEach(function (propName) {
           var kapsuleInstance = state[propName];
           var returnVal = kapsuleInstance[method].apply(kapsuleInstance, args);
-
           if (returnVal !== kapsuleInstance) {
             returnVals.push(returnVal);
           }
@@ -1021,9 +943,9 @@ function linkKapsule (kapsulePropNames, kapsuleType) {
 }
 
 var HOVER_CANVAS_THROTTLE_DELAY = 800; // ms to throttle shadow canvas updates for perf improvement
+var ZOOM2NODES_FACTOR = 4;
 
-var ZOOM2NODES_FACTOR = 4; // Expose config from forceGraph
-
+// Expose config from forceGraph
 var bindFG = linkKapsule('forceGraph', CanvasForceGraph);
 var bindBoth = linkKapsule(['forceGraph', 'shadowGraph'], CanvasForceGraph);
 var linkedProps = Object.assign.apply(Object, _toConsumableArray(['nodeColor', 'nodeAutoColorBy', 'nodeCanvasObject', 'nodeCanvasObjectMode', 'linkColor', 'linkAutoColorBy', 'linkLineDash', 'linkWidth', 'linkCanvasObject', 'linkCanvasObjectMode', 'linkDirectionalArrowLength', 'linkDirectionalArrowColor', 'linkDirectionalArrowRelPos', 'linkDirectionalParticles', 'linkDirectionalParticleSpeed', 'linkDirectionalParticleWidth', 'linkDirectionalParticleColor', 'dagMode', 'dagLevelDistance', 'dagNodeFilter', 'onDagError', 'd3AlphaMin', 'd3AlphaDecay', 'd3VelocityDecay', 'warmupTicks', 'cooldownTicks', 'cooldownTime', 'onEngineTick', 'onEngineStop'].map(function (p) {
@@ -1034,56 +956,54 @@ var linkedProps = Object.assign.apply(Object, _toConsumableArray(['nodeColor', '
 var linkedMethods = Object.assign.apply(Object, _toConsumableArray(['d3Force', 'd3ReheatSimulation', 'emitParticle'].map(function (p) {
   return _defineProperty({}, p, bindFG.linkMethod(p));
 })));
-
 function adjustCanvasSize(state) {
   if (state.canvas) {
     var curWidth = state.canvas.width;
     var curHeight = state.canvas.height;
-
     if (curWidth === 300 && curHeight === 150) {
       // Default canvas dimensions
       curWidth = curHeight = 0;
     }
-
     var pxScale = window.devicePixelRatio; // 2 on retina displays
-
     curWidth /= pxScale;
-    curHeight /= pxScale; // Resize canvases
+    curHeight /= pxScale;
 
+    // Resize canvases
     [state.canvas, state.shadowCanvas].forEach(function (canvas) {
       // Element size
       canvas.style.width = "".concat(state.width, "px");
-      canvas.style.height = "".concat(state.height, "px"); // Memory size (scaled to avoid blurriness)
+      canvas.style.height = "".concat(state.height, "px");
 
+      // Memory size (scaled to avoid blurriness)
       canvas.width = state.width * pxScale;
-      canvas.height = state.height * pxScale; // Normalize coordinate system to use css pixels (on init only)
+      canvas.height = state.height * pxScale;
 
+      // Normalize coordinate system to use css pixels (on init only)
       if (!curWidth && !curHeight) {
         canvas.getContext('2d').scale(pxScale, pxScale);
       }
-    }); // Relative center panning based on 0,0
+    });
 
+    // Relative center panning based on 0,0
     var k = d3Zoom.zoomTransform(state.canvas).k;
     state.zoom.translateBy(state.zoom.__baseElem, (state.width - curWidth) / 2 / k, (state.height - curHeight) / 2 / k);
     state.needsRedraw = true;
   }
 }
-
 function resetTransform(ctx) {
   var pxRatio = window.devicePixelRatio;
   ctx.setTransform(pxRatio, 0, 0, pxRatio, 0, 0);
 }
-
 function clearCanvas(ctx, width, height) {
   ctx.save();
   resetTransform(ctx); // reset transform
-
   ctx.clearRect(0, 0, width, height);
   ctx.restore(); //restore transforms
-} //
+}
 
+//
 
-var forceGraph = Kapsule__default["default"]({
+var forceGraph = Kapsule({
   props: _objectSpread2({
     width: {
       "default": window.innerWidth,
@@ -1114,10 +1034,9 @@ var forceGraph = Kapsule__default["default"]({
         }].forEach(hexIndex);
         state.forceGraph.graphData(d);
         state.shadowGraph.graphData(d);
-
         function hexIndex(_ref4) {
           var type = _ref4.type,
-              objs = _ref4.objs;
+            objs = _ref4.objs;
           objs.filter(function (d) {
             if (!d.hasOwnProperty('__indexColor')) return true;
             var cur = state.colorTracker.lookup(d.__indexColor);
@@ -1277,27 +1196,27 @@ var forceGraph = Kapsule__default["default"]({
     },
     centerAt: function centerAt(state, x, y, transitionDuration) {
       if (!state.canvas) return null; // no canvas yet
-      // setter
 
+      // setter
       if (x !== undefined || y !== undefined) {
         var finalPos = Object.assign({}, x !== undefined ? {
           x: x
         } : {}, y !== undefined ? {
           y: y
         } : {});
-
         if (!transitionDuration) {
           // 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.Tween(getCenter()).to(finalPos, transitionDuration).easing(TWEEN.Easing.Quadratic.Out).onUpdate(setCenter).start();
         }
-
         return this;
-      } // getter
+      }
 
+      // getter
+      return getCenter();
 
-      return getCenter(); //
+      //
 
       function getCenter() {
         var t = d3Zoom.zoomTransform(state.canvas);
@@ -1306,43 +1225,42 @@ var forceGraph = Kapsule__default["default"]({
           y: (state.height / 2 - t.y) / t.k
         };
       }
-
       function setCenter(_ref5) {
         var x = _ref5.x,
-            y = _ref5.y;
+          y = _ref5.y;
         state.zoom.translateTo(state.zoom.__baseElem, x === undefined ? getCenter().x : x, y === undefined ? getCenter().y : y);
         state.needsRedraw = true;
       }
     },
     zoom: function zoom(state, k, transitionDuration) {
       if (!state.canvas) return null; // no canvas yet
-      // setter
 
+      // setter
       if (k !== undefined) {
         if (!transitionDuration) {
           // no animation
           setZoom(k);
         } else {
-          new TWEEN__default["default"].Tween({
+          new TWEEN.Tween({
             k: getZoom()
           }).to({
             k: k
-          }, transitionDuration).easing(TWEEN__default["default"].Easing.Quadratic.Out).onUpdate(function (_ref6) {
+          }, transitionDuration).easing(TWEEN.Easing.Quadratic.Out).onUpdate(function (_ref6) {
             var k = _ref6.k;
             return setZoom(k);
           }).start();
         }
-
         return this;
-      } // getter
+      }
 
+      // getter
+      return getZoom();
 
-      return getZoom(); //
+      //
 
       function getZoom() {
         return d3Zoom.zoomTransform(state.canvas).k;
       }
-
       function setZoom(k) {
         state.zoom.scaleTo(state.zoom.__baseElem, k);
         state.needsRedraw = true;
@@ -1351,13 +1269,10 @@ var forceGraph = Kapsule__default["default"]({
     zoomToFit: function zoomToFit(state) {
       var transitionDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var padding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
-
       for (var _len = arguments.length, bboxArgs = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
         bboxArgs[_key - 3] = arguments[_key];
       }
-
       var bbox = this.getGraphBbox.apply(this, bboxArgs);
-
       if (bbox) {
         var center = {
           x: (bbox.x[0] + bbox.x[1]) / 2,
@@ -1367,19 +1282,16 @@ var forceGraph = Kapsule__default["default"]({
         this.centerAt(center.x, center.y, transitionDuration);
         this.zoom(zoomK, transitionDuration);
       }
-
       return this;
     },
     getGraphBbox: function getGraphBbox(state) {
       var nodeFilter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
         return true;
       };
-      var getVal = accessorFn__default["default"](state.nodeVal);
-
+      var getVal = accessorFn(state.nodeVal);
       var getR = function getR(node) {
         return Math.sqrt(Math.max(0, getVal(node) || 1)) * state.nodeRelSize;
       };
-
       var nodesPos = state.graphData.nodes.filter(nodeFilter).map(function (node) {
         return {
           x: node.x,
@@ -1405,14 +1317,12 @@ var forceGraph = Kapsule__default["default"]({
         cancelAnimationFrame(state.animationFrameRequestId);
         state.animationFrameRequestId = null;
       }
-
       return this;
     },
     resumeAnimation: function resumeAnimation(state) {
       if (!state.animationFrameRequestId) {
         this._animationCycle();
       }
-
       return this;
     },
     _destructor: function _destructor() {
@@ -1429,16 +1339,16 @@ 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() // indexed objects for rgb lookup
     };
   },
+
   init: function init(domNode, state) {
     var _this = this;
-
     // Wipe DOM
-    domNode.innerHTML = ''; // Container anchor for canvas and tooltip
+    domNode.innerHTML = '';
 
+    // Container anchor for canvas and tooltip
     var container = document.createElement('div');
     container.classList.add('force-graph-container');
     container.style.position = 'relative';
@@ -1446,7 +1356,9 @@ var forceGraph = Kapsule__default["default"]({
     state.canvas = document.createElement('canvas');
     if (state.backgroundColor) state.canvas.style.background = state.backgroundColor;
     container.appendChild(state.canvas);
-    state.shadowCanvas = document.createElement('canvas'); // Show shadow canvas
+    state.shadowCanvas = document.createElement('canvas');
+
+    // Show shadow canvas
     //state.shadowCanvas.style.position = 'absolute';
     //state.shadowCanvas.style.top = '0';
     //state.shadowCanvas.style.left = '0';
@@ -1458,22 +1370,20 @@ var forceGraph = Kapsule__default["default"]({
       x: -1e12,
       y: -1e12
     };
-
     var getObjUnderPointer = function getObjUnderPointer() {
       var obj = null;
       var pxScale = window.devicePixelRatio;
-      var px = pointerPos.x > 0 && pointerPos.y > 0 ? shadowCtx.getImageData(pointerPos.x * pxScale, pointerPos.y * pxScale, 1, 1) : null; // Lookup object per pixel color
-
+      var px = pointerPos.x > 0 && pointerPos.y > 0 ? shadowCtx.getImageData(pointerPos.x * pxScale, pointerPos.y * pxScale, 1, 1) : null;
+      // Lookup object per pixel color
       px && (obj = state.colorTracker.lookup(px.data));
       return obj;
-    }; // Setup node drag interaction
-
+    };
 
+    // Setup node drag interaction
     d3Selection.select(state.canvas).call(d3Drag.drag().subject(function () {
       if (!state.enableNodeDrag) {
         return null;
       }
-
       var obj = getObjUnderPointer();
       return obj && obj.type === 'Node' ? obj.d : null; // Only drag nodes
     }).on('start', function (ev) {
@@ -1483,14 +1393,15 @@ var forceGraph = Kapsule__default["default"]({
         y: obj.y,
         fx: obj.fx,
         fy: obj.fy
-      }; // keep engine running at low intensity throughout drag
+      };
 
+      // keep engine running at low intensity throughout drag
       if (!ev.active) {
         obj.fx = obj.x;
         obj.fy = obj.y; // Fix points
-      } // drag cursor
-
+      }
 
+      // drag cursor
       state.canvas.classList.add('grabbable');
     }).on('drag', function (ev) {
       var obj = ev.subject;
@@ -1500,12 +1411,14 @@ var forceGraph = Kapsule__default["default"]({
       var translate = {
         x: initPos.x + (dragPos.x - initPos.x) / k - obj.x,
         y: initPos.y + (dragPos.y - initPos.y) / k - obj.y
-      }; // Move fx/fy (and x/y) of nodes based on the scaled drag distance since the drag start
+      };
 
+      // Move fx/fy (and x/y) of nodes based on the scaled drag distance since the drag start
       ['x', 'y'].forEach(function (c) {
         return obj["f".concat(c)] = obj[c] = initPos[c] + (dragPos[c] - initPos[c]) / k;
-      }); // prevent freeze while dragging
+      });
 
+      // prevent freeze while dragging
       state.forceGraph.d3AlphaTarget(0.3) // keep engine running at low intensity throughout drag
       .resetCountdown(); // prevent freeze while dragging
 
@@ -1519,39 +1432,35 @@ var forceGraph = Kapsule__default["default"]({
         x: obj.x - initPos.x,
         y: obj.y - initPos.y
       };
-
       if (initPos.fx === undefined) {
         obj.fx = undefined;
       }
-
       if (initPos.fy === undefined) {
         obj.fy = undefined;
       }
-
       delete obj.__initialDragPos;
-
       if (state.forceGraph.d3AlphaTarget()) {
         state.forceGraph.d3AlphaTarget(0) // release engine low intensity
         .resetCountdown(); // let the engine readjust after releasing fixed nodes
-      } // drag cursor
-
+      }
 
+      // drag cursor
       state.canvas.classList.remove('grabbable');
       state.isPointerDragging = false;
-
       if (obj.__dragged) {
         delete obj.__dragged;
         state.onNodeDragEnd(obj, translate);
       }
-    })); // Setup zoom / pan interaction
+    }));
 
+    // Setup zoom / pan interaction
     state.zoom(state.zoom.__baseElem = d3Selection.select(state.canvas)); // Attach controlling elem for easy access
 
     state.zoom.__baseElem.on('dblclick.zoom', null); // Disable double-click to zoom
 
-
     state.zoom.filter(function (ev) {
-      return (// disable zoom interaction
+      return (
+        // disable zoom interaction
         !ev.button && state.enableZoomPanInteraction && (state.enableZoomInteraction || ev.type !== 'wheel') && (state.enablePanInteraction || ev.type === 'wheel')
       );
     }).on('zoom', function (ev) {
@@ -1562,7 +1471,6 @@ var forceGraph = Kapsule__default["default"]({
         c.scale(t.k, t.k);
       });
       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 && state.onZoomEnd(_objectSpread2(_objectSpread2({}, ev.transform), _this.centerAt()));
@@ -1576,39 +1484,49 @@ var forceGraph = Kapsule__default["default"]({
         state.zoom.scaleTo(state.zoom.__baseElem, state.lastSetZoom = ZOOM2NODES_FACTOR / Math.cbrt(state.graphData.nodes.length));
         state.needsRedraw = true;
       }
-    }); // Setup tooltip
+    });
 
+    // Setup tooltip
     var toolTipElem = document.createElement('div');
     toolTipElem.classList.add('graph-tooltip');
-    container.appendChild(toolTipElem); // Capture pointer coords on move or touchstart
+    container.appendChild(toolTipElem);
 
+    // Capture pointer coords on move or touchstart
     ['pointermove', 'pointerdown'].forEach(function (evType) {
       return container.addEventListener(evType, function (ev) {
         if (evType === 'pointerdown') {
           state.isPointerPressed = true; // track click state
-
           state.pointerDownEvent = ev;
-        } // detect pointer drag on canvas pan
-
+        }
 
+        // detect pointer drag on canvas pan
         !state.isPointerDragging && ev.type === 'pointermove' && state.onBackgroundClick // only bother detecting drags this way if background clicks are enabled (so they don't trigger accidentally on canvas panning)
         && (ev.pressure > 0 || state.isPointerPressed) // ev.pressure always 0 on Safari, so we use the isPointerPressed tracker
         && (ev.pointerType !== 'touch' || ev.movementX === undefined || [ev.movementX, ev.movementY].some(function (m) {
           return Math.abs(m) > 1;
         })) // relax drag trigger sensitivity on touch events
-        && (state.isPointerDragging = true); // update the pointer pos
+        && (state.isPointerDragging = true);
 
+        // update the pointer pos
         var offset = getOffset(container);
         pointerPos.x = ev.pageX - offset.left;
-        pointerPos.y = ev.pageY - offset.top; // Move tooltip
+        pointerPos.y = ev.pageY - offset.top;
 
+        // Move tooltip
         toolTipElem.style.top = "".concat(pointerPos.y, "px");
-        toolTipElem.style.left = "".concat(pointerPos.x, "px"); //
+        toolTipElem.style.left = "".concat(pointerPos.x, "px");
+
+        // adjust horizontal position to not exceed canvas boundaries
+        toolTipElem.style.transform = "translate(-".concat(pointerPos.x / state.width * 100, "%, ").concat(
+        // flip to above if near bottom
+        state.height - pointerPos.y < 100 ? 'calc(-100% - 8px)' : '21px', ")");
+
+        //
 
         function getOffset(el) {
           var rect = el.getBoundingClientRect(),
-              scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
-              scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+            scrollTop = window.pageYOffset || document.documentElement.scrollTop;
           return {
             top: rect.top + scrollTop,
             left: rect.left + scrollLeft
@@ -1617,11 +1535,11 @@ var forceGraph = Kapsule__default["default"]({
       }, {
         passive: true
       });
-    }); // Handle click/touch events on nodes/links
+    });
 
+    // Handle click/touch events on nodes/links
     container.addEventListener('pointerup', function (ev) {
       state.isPointerPressed = false;
-
       if (state.isPointerDragging) {
         state.isPointerDragging = false;
         return; // don't trigger click events after pointer drag (pan / node drag functionality)
@@ -1639,7 +1557,6 @@ var forceGraph = Kapsule__default["default"]({
             state.onBackgroundClick && state.onBackgroundClick.apply(state, cbEvents);
           }
         }
-
         if (ev.button === 2) {
           // mouse right-click
           if (state.hoverObj) {
@@ -1655,77 +1572,74 @@ var forceGraph = Kapsule__default["default"]({
     });
     container.addEventListener('contextmenu', function (ev) {
       if (!state.onBackgroundRightClick && !state.onNodeRightClick && !state.onLinkRightClick) return true; // default contextmenu behavior
-
       ev.preventDefault();
       return false;
     });
     state.forceGraph(ctx);
-    state.shadowGraph(shadowCtx); //
+    state.shadowGraph(shadowCtx);
+
+    //
 
-    var refreshShadowCanvas = throttle__default["default"](function () {
+    var refreshShadowCanvas = throttle(function () {
       // wipe canvas
-      clearCanvas(shadowCtx, state.width, state.height); // Adjust link hover area
+      clearCanvas(shadowCtx, state.width, state.height);
 
+      // Adjust link hover area
       state.shadowGraph.linkWidth(function (l) {
-        return accessorFn__default["default"](state.linkWidth)(l) + state.linkHoverPrecision;
-      }); // redraw
+        return accessorFn(state.linkWidth)(l) + state.linkHoverPrecision;
+      });
 
+      // redraw
       var t = d3Zoom.zoomTransform(state.canvas);
       state.shadowGraph.globalScale(t.k).tickFrame();
     }, HOVER_CANVAS_THROTTLE_DELAY);
     state.flushShadowCanvas = refreshShadowCanvas.flush; // hook to immediately invoke shadow canvas paint
-    // Kick-off renderer
 
+    // Kick-off renderer
     (this._animationCycle = function animate() {
       // IIFE
       var doRedraw = !state.autoPauseRedraw || !!state.needsRedraw || state.forceGraph.isEngineRunning() || state.graphData.links.some(function (d) {
         return d.__photons && d.__photons.length;
       });
       state.needsRedraw = false;
-
       if (state.enablePointerInteraction) {
         // Update tooltip and trigger onHover events
         var obj = !state.isPointerDragging ? getObjUnderPointer() : null; // don't hover during drag
-
         if (obj !== state.hoverObj) {
           var prevObj = state.hoverObj;
           var prevObjType = prevObj ? prevObj.type : null;
           var objType = obj ? obj.type : null;
-
           if (prevObjType && prevObjType !== objType) {
             // Hover out
             var fn = state["on".concat(prevObjType, "Hover")];
             fn && fn(null, prevObj.d);
           }
-
           if (objType) {
             // Hover in
             var _fn2 = state["on".concat(objType, "Hover")];
             _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(state["".concat(obj.type.toLowerCase(), "Label")])(obj.d) || '' : '';
           toolTipElem.style.visibility = tooltipContent ? 'visible' : 'hidden';
-          toolTipElem.innerHTML = tooltipContent; // set pointer if hovered object is clickable
+          toolTipElem.innerHTML = tooltipContent;
 
+          // set pointer if hovered object is clickable
           state.canvas.classList[obj && state["on".concat(objType, "Click")] || !obj && state.onBackgroundClick ? 'add' : 'remove']('clickable');
           state.hoverObj = obj;
         }
-
         doRedraw && refreshShadowCanvas();
       }
-
       if (doRedraw) {
         // Wipe canvas
-        clearCanvas(ctx, state.width, state.height); // Frame cycle
+        clearCanvas(ctx, state.width, state.height);
 
+        // Frame cycle
         var globalScale = d3Zoom.zoomTransform(state.canvas).k;
         state.onRenderFramePre && state.onRenderFramePre(ctx, globalScale);
         state.forceGraph.globalScale(globalScale).tickFrame();
         state.onRenderFramePost && state.onRenderFramePost(ctx, globalScale);
       }
-
-      TWEEN__default["default"].update(); // update canvas animation tweens
+      TWEEN.update(); // update canvas animation tweens
 
       state.animationFrameRequestId = requestAnimationFrame(animate);
     })();