@react-fabric/graph 1.0.0-beta.59 → 1.0.0-beta.60

package/dist/cjs/programs/node-circle/base/drawLabel.js

@@ -3,6 +3,7 @@
 /* istanbul ignore file */
 
 function drawNodeLabel(context, data, settings) {
+  var _ref, _data$labelColor;
   var nodeSize = data.size;
   var size = settings.labelSize;
   var font = settings.labelFont;
@@ -10,7 +11,7 @@ function drawNodeLabel(context, data, settings) {
   // use node color or default node color
   var bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  var color = data.labelColor || settings.labelColor.color || "#000";
+  var color = (_ref = (_data$labelColor = data.labelColor) !== null && _data$labelColor !== void 0 ? _data$labelColor : settings.labelColor.color) !== null && _ref !== void 0 ? _ref : "#000";
   if (data.highlight) {
     var _data$highlightColor, _data$highlightColor2;
     // Then we draw the label background

package/dist/cjs/programs/node-rect/base/drawHover.js

@@ -5,6 +5,7 @@ var drawLabel = require('./drawLabel.js');
 /* istanbul ignore file */
 
 function drawNodeHover(context, data, settings) {
+  var _ref, _data$labelColor;
   var nodeSize = data.size;
   var size = settings.labelSize;
   var font = settings.labelFont;
@@ -12,7 +13,7 @@ function drawNodeHover(context, data, settings) {
   // use node color or default node color
   var bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  var color = data.labelColor || settings.labelColor.color || "#000";
+  var color = (_ref = (_data$labelColor = data.labelColor) !== null && _data$labelColor !== void 0 ? _data$labelColor : settings.labelColor.color) !== null && _ref !== void 0 ? _ref : "#000";
   context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
 
   // Then we draw the label background

package/dist/cjs/programs/node-rect/base/drawLabel.js

@@ -3,6 +3,7 @@
 /* istanbul ignore file */
 
 function drawNodeLabel(context, data, settings) {
+  var _ref, _data$labelColor;
   var nodeSize = data.size;
   var size = settings.labelSize;
   var font = settings.labelFont;
@@ -10,7 +11,7 @@ function drawNodeLabel(context, data, settings) {
   // use node color or default node color
   var bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  var color = data.labelColor || settings.labelColor.color || "#000";
+  var color = (_ref = (_data$labelColor = data.labelColor) !== null && _data$labelColor !== void 0 ? _data$labelColor : settings.labelColor.color) !== null && _ref !== void 0 ? _ref : "#000";
   if (data.highlight) {
     var _data$highlightColor, _data$color;
     // Then we draw the label background

package/dist/esm/components/Context.js

@@ -33,25 +33,25 @@ var GraphProvider = function GraphProvider(_ref) {
     setLayoutRunning = _useState2[1];
   var resetViewport = function resetViewport() {
     if (graph.size === 0) return;
-    sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
+    void (sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
       animate: true
-    });
+    }));
   };
   var zoomIn = function zoomIn() {
     var _sigma$instance;
     if (graph.size === 0) return;
-    (_sigma$instance = sigma.instance) === null || _sigma$instance === void 0 || _sigma$instance.getCamera().animatedZoom();
+    void ((_sigma$instance = sigma.instance) === null || _sigma$instance === void 0 ? void 0 : _sigma$instance.getCamera().animatedZoom());
   };
   var zoomOut = function zoomOut() {
     var _sigma$instance2;
     if (graph.size === 0) return;
-    (_sigma$instance2 = sigma.instance) === null || _sigma$instance2 === void 0 || _sigma$instance2.getCamera().animatedUnzoom();
+    void ((_sigma$instance2 = sigma.instance) === null || _sigma$instance2 === void 0 ? void 0 : _sigma$instance2.getCamera().animatedUnzoom());
   };
   useEffect(function () {
     var resetHandler = function resetHandler() {
-      sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
+      void (sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
         animate: true
-      });
+      }));
     };
     graph.on("layoutRunning", setLayoutRunning);
     graph.on("layoutDone", resetHandler);

package/dist/esm/components/ContextMenu.js

@@ -3,10 +3,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFloatingNodeId, useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingPortal } from '@floating-ui/react';
-import { useState, useRef, useEffect, cloneElement } from 'react';
-import { useGraph } from './Context.js';
 import { Menu, MenuItem, Divider } from '@react-fabric/core';
+import { useState, useRef, useEffect, cloneElement } from 'react';
 import { ICONS } from '../constants/index.js';
+import { useGraph } from './Context.js';
 import { jsx } from 'react/jsx-runtime';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -20,7 +20,6 @@ var GraphContextMenu = function GraphContextMenu() {
   var nodeId = useFloatingNodeId();
   var _useGraph = useGraph(),
     sigma = _useGraph.sigma;
-    _useGraph.graph;
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     menu = _useState4[0],
@@ -61,29 +60,29 @@ var GraphContextMenu = function GraphContextMenu() {
       if ("node" in e) {
         setMenu([/*#__PURE__*/jsx(MenuItem, {
           label: "Select neighbors"
-        }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(MenuItem, {
+        }, "0.0"), /*#__PURE__*/jsx(Divider, {}, "0.1"), /*#__PURE__*/jsx(MenuItem, {
           label: "Delete node(s)",
           color: "danger",
           icon: ICONS["delete"]
-        }), /*#__PURE__*/jsx(MenuItem, {
+        }, "0.2"), /*#__PURE__*/jsx(MenuItem, {
           label: "Clear graph",
           color: "danger",
           icon: ICONS.clear
-        })]);
+        }, "0.3")]);
       } else if ("edge" in e) {
         setMenu([/*#__PURE__*/jsx(MenuItem, {
           label: "Select neighbors"
-        }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx(MenuItem, {
+        }, "1.0"), /*#__PURE__*/jsx(Divider, {}, "1.1"), /*#__PURE__*/jsx(MenuItem, {
           label: "Clear graph",
           color: "danger",
           icon: ICONS.clear
-        })]);
+        }, "1.2")]);
       } else {
         setMenu([/*#__PURE__*/jsx(MenuItem, {
           label: "Clear graph",
           color: "danger",
           icon: ICONS.clear
-        })]);
+        }, "2.0")]);
       }
       var virtual = {
         getBoundingClientRect: function getBoundingClientRect() {

package/dist/esm/components/Tools.js

@@ -1,5 +1,7 @@
 'use client';
 
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { ButtonGroup, Button, Dropdown, Menu, MenuItem } from '@react-fabric/core';
 import { ICONS } from '../constants/index.js';
 import { useGraph } from './Context.js';
@@ -9,9 +11,8 @@ var Tools = function Tools() {
   var _useGraph = useGraph(),
     dragSelector = _useGraph.dragSelector,
     graph = _useGraph.graph,
-    selected = _useGraph.selected;
-    _useGraph.layoutRunning;
-    var resetViewport = _useGraph.resetViewport,
+    selected = _useGraph.selected,
+    resetViewport = _useGraph.resetViewport,
     zoomIn = _useGraph.zoomIn,
     zoomOut = _useGraph.zoomOut;
   return /*#__PURE__*/jsxs("div", {
@@ -66,39 +67,116 @@ var Tools = function Tools() {
           className: "text-sm",
           children: [/*#__PURE__*/jsx(MenuItem, {
             label: "box",
-            onClick: function onClick() {
-              return graph.elkLayout("box");
-            }
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return graph.elkLayout("box");
+                  case 2:
+                    return _context.abrupt("return", _context.sent);
+                  case 3:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }))
           }), /*#__PURE__*/jsx(MenuItem, {
             label: "force",
-            onClick: function onClick() {
-              return graph.elkLayout("force");
-            }
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+              return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    _context2.next = 2;
+                    return graph.elkLayout("force");
+                  case 2:
+                    return _context2.abrupt("return", _context2.sent);
+                  case 3:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2);
+            }))
           }), /*#__PURE__*/jsx(MenuItem, {
             label: "layered",
-            onClick: function onClick() {
-              return graph.elkLayout("layered");
-            }
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+              return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                while (1) switch (_context3.prev = _context3.next) {
+                  case 0:
+                    _context3.next = 2;
+                    return graph.elkLayout("layered");
+                  case 2:
+                    return _context3.abrupt("return", _context3.sent);
+                  case 3:
+                  case "end":
+                    return _context3.stop();
+                }
+              }, _callee3);
+            }))
           }), /*#__PURE__*/jsx(MenuItem, {
             label: "stress",
-            onClick: function onClick() {
-              return graph.elkLayout("stress");
-            }
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+              return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    _context4.next = 2;
+                    return graph.elkLayout("stress");
+                  case 2:
+                    return _context4.abrupt("return", _context4.sent);
+                  case 3:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _callee4);
+            }))
           }), /*#__PURE__*/jsx(MenuItem, {
             label: "radial",
-            onClick: function onClick() {
-              return graph.elkLayout("radial");
-            }
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+              return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+                while (1) switch (_context5.prev = _context5.next) {
+                  case 0:
+                    _context5.next = 2;
+                    return graph.elkLayout("radial");
+                  case 2:
+                    return _context5.abrupt("return", _context5.sent);
+                  case 3:
+                  case "end":
+                    return _context5.stop();
+                }
+              }, _callee5);
+            }))
           }), /*#__PURE__*/jsx(MenuItem, {
             label: "sporeOverlap",
-            onClick: function onClick() {
-              return graph.elkLayout("sporeOverlap");
-            }
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+              return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+                while (1) switch (_context6.prev = _context6.next) {
+                  case 0:
+                    _context6.next = 2;
+                    return graph.elkLayout("sporeOverlap");
+                  case 2:
+                    return _context6.abrupt("return", _context6.sent);
+                  case 3:
+                  case "end":
+                    return _context6.stop();
+                }
+              }, _callee6);
+            }))
           }), /*#__PURE__*/jsx(MenuItem, {
             label: "sporeCompaction",
-            onClick: function onClick() {
-              return graph.elkLayout("sporeCompaction");
-            }
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+              return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+                while (1) switch (_context7.prev = _context7.next) {
+                  case 0:
+                    _context7.next = 2;
+                    return graph.elkLayout("sporeCompaction");
+                  case 2:
+                    return _context7.abrupt("return", _context7.sent);
+                  case 3:
+                  case "end":
+                    return _context7.stop();
+                }
+              }, _callee7);
+            }))
           })]
         })]
       })

package/dist/esm/components/Viewer.js

@@ -35,6 +35,7 @@ var Graph = function Graph() {
       ref: sigma.containerRef,
       className: "absolute inset-0"
     }), /*#__PURE__*/jsx("div", {
+      role: "none",
       ref: handlesRef,
       dir: "ltr",
       onClick: function onClick(e) {

package/dist/esm/graph/index.js

@@ -1,6 +1,7 @@
 'use client';
 
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
@@ -13,11 +14,15 @@ import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { debounce } from '@react-fabric/utilities';
 import { indexParallelEdgesIndex, DEFAULT_EDGE_CURVATURE } from '@sigma/edge-curve';
 import ElkConstructor from 'elkjs/lib/elk.bundled';
-import WorkerFactory from '../_virtual/elk-worker.js';
 import Graphology from 'graphology';
-import { random } from 'graphology-layout';
+import { circular } from 'graphology-layout';
+import forceAtlas2 from 'graphology-layout-forceatlas2';
+import ForceAtlas2Worker from 'graphology-layout-forceatlas2/worker';
 import { animateNodes } from 'sigma/utils';
+import WorkerFactory from '../_virtual/elk-worker.js';
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var Graph = /*#__PURE__*/function (_Graphology) {
@@ -192,10 +197,11 @@ var Graph = /*#__PURE__*/function (_Graphology) {
   }, {
     key: "ungroupNode",
     value: function ungroupNode(node) {
-      var _this4 = this;
+      var _atts$nodeList,
+        _this4 = this;
       var atts = this.getNodeAttributes(node);
       if (!atts || !atts.isGroup) return;
-      var nodes = atts.nodeList || [];
+      var nodes = (_atts$nodeList = atts.nodeList) !== null && _atts$nodeList !== void 0 ? _atts$nodeList : [];
       nodes.forEach(function (n) {
         var originalEdges = _this4.getNodeAttribute(n, "originalEdges");
         if (originalEdges && Array.isArray(originalEdges)) {
@@ -226,7 +232,6 @@ var Graph = /*#__PURE__*/function (_Graphology) {
   }, {
     key: "import",
     value: function _import(data, merge) {
-      var _this6 = this;
       var newNodes = [];
       if (data instanceof Graph) {
         newNodes.push.apply(newNodes, _toConsumableArray(data.nodes()));
@@ -239,68 +244,70 @@ var Graph = /*#__PURE__*/function (_Graphology) {
       // fire events for nodes added
       this.emit("nodesLoaded", newNodes);
       // apply random positions for nodes
-      var positions = random(this);
+      // const positions = random(this as any);
+      // animateNodes(
+      //   this as any,
+      //   positions,
+      //   {
+      //     duration: 200,
+      //   },
+      //   () => {
+      //     // fire layout done event
+      //     this.emit("layoutDone");
+      //   },
+      // );
+      void this.elkLayout("force");
+      return this;
+    }
+  }, {
+    key: "circularLayout",
+    value: function circularLayout() {
+      var _this6 = this;
+      if (this.size === 0) return this;
+      var positions = circular(this);
       animateNodes(this, positions, {
         duration: 200
       }, function () {
-        // fire layout done event
         _this6.emit("layoutDone");
       });
       return this;
     }
-
-    // circularLayout() {
-    //   if (this.size === 0) return this;
-    //   const positions = circular(this as any);
-    //   animateNodes(
-    //     this as any,
-    //     positions,
-    //     {
-    //       duration: 200,
-    //     },
-    //     () => {
-    //       this.emit("layoutDone");
-    //     },
-    //   );
-    //   return this;
-    // }
-
-    // private _timer: any;
-    // private _worker?: forceAtlas2Worker;
-    // forceLayout(settings: ForceAtlas2Settings = {}) {
-    //   if (this.size === 0) return this;
-    //   const sensibleSettings = forceAtlas2.inferSettings(this as any);
-    //   if (this._worker?.isRunning()) {
-    //     clearTimeout(this._timer);
-    //   }
-    //   this._worker?.kill();
-    //   this._worker = new forceAtlas2Worker(this as any, {
-    //     settings: {
-    //       ...sensibleSettings,
-    //       ...settings,
-    //     },
-    //   });
-    //   this.emit("layoutRunning", true);
-    //   this._worker.start();
-    //   this._timer = setTimeout(
-    //     () => {
-    //       this._worker?.stop();
-    //       this._worker?.kill();
-    //       this.emit("layoutRunning", false);
-    //       this.emit("layoutDone");
-    //     },
-    //     // @ts-expect-error ignore
-    //     this.nodes().length * window.__GRAPH_LAYOUT_DURATION_MULTIPLIER__,
-    //   );
-    //   return this;
-    // }
+  }, {
+    key: "forceLayout",
+    value: function forceLayout() {
+      var _this$_worker,
+        _this$_worker2,
+        _this7 = this;
+      var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      if (this.size === 0) return this;
+      var sensibleSettings = forceAtlas2.inferSettings(this);
+      if ((_this$_worker = this._worker) !== null && _this$_worker !== void 0 && _this$_worker.isRunning()) {
+        clearTimeout(this._timer);
+      }
+      (_this$_worker2 = this._worker) === null || _this$_worker2 === void 0 || _this$_worker2.kill();
+      this._worker = new ForceAtlas2Worker(this, {
+        settings: _objectSpread(_objectSpread({}, sensibleSettings), settings)
+      });
+      this.emit("layoutRunning", true);
+      this._worker.start();
+      this._timer = setTimeout(function () {
+        var _this7$_worker, _this7$_worker2;
+        (_this7$_worker = _this7._worker) === null || _this7$_worker === void 0 || _this7$_worker.stop();
+        (_this7$_worker2 = _this7._worker) === null || _this7$_worker2 === void 0 || _this7$_worker2.kill();
+        _this7.emit("layoutRunning", false);
+        _this7.emit("layoutDone");
+      },
+      // @ts-expect-error ignore
+      this.nodes().length * window.__GRAPH_LAYOUT_DURATION_MULTIPLIER__);
+      return this;
+    }
 
     // @ts-expect-error ignore
   }, {
     key: "elkLayout",
     value: function () {
       var _elkLayout = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(type) {
-        var _this7 = this;
+        var _this8 = this;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -312,8 +319,8 @@ var Graph = /*#__PURE__*/function (_Graphology) {
               this.emit("layoutRunning", true);
               this.elk.layout({
                 id: "root",
-                width: 1600,
-                height: 900,
+                // width: 1600,
+                // height: 900,
                 children: this.mapNodes(function (node, atts) {
                   var _atts$size, _atts$weight, _atts$size2, _atts$weight2;
                   return {
@@ -344,15 +351,15 @@ var Graph = /*#__PURE__*/function (_Graphology) {
                     y: (_node$y = node.y) !== null && _node$y !== void 0 ? _node$y : 0
                   }];
                 })) !== null && _graph$children$map !== void 0 ? _graph$children$map : []);
-                animateNodes(_this7, positions, {
+                animateNodes(_this8, positions, {
                   duration: 200
                 }, function () {
                   setTimeout(function () {
-                    _this7.emit("layoutDone");
+                    _this8.emit("layoutDone");
                   }, 100);
                 });
               })["catch"](console.error)["finally"](function () {
-                _this7.emit("layoutRunning", false);
+                _this8.emit("layoutRunning", false);
               });
             case 3:
             case "end":
@@ -368,10 +375,10 @@ var Graph = /*#__PURE__*/function (_Graphology) {
   }, {
     key: "dropNodes",
     value: function dropNodes(nodes) {
-      var _this8 = this;
+      var _this9 = this;
       if (!nodes.length) return;
       nodes.forEach(function (n) {
-        return _this8.dropNode(n);
+        return _this9.dropNode(n);
       });
     }
 
@@ -391,7 +398,7 @@ var Graph = /*#__PURE__*/function (_Graphology) {
   }, {
     key: "checkParallelEdges",
     value: function checkParallelEdges() {
-      var _this9 = this;
+      var _this10 = this;
       // Use dedicated helper to identify parallel edges:
       // @ts-expect-error ignore
       indexParallelEdgesIndex(this, {
@@ -405,17 +412,17 @@ var Graph = /*#__PURE__*/function (_Graphology) {
           parallelMinIndex = _ref2.parallelMinIndex,
           parallelMaxIndex = _ref2.parallelMaxIndex;
         if (typeof parallelMinIndex === "number") {
-          _this9.mergeEdgeAttributes(edge, {
+          _this10.mergeEdgeAttributes(edge, {
             type: parallelIndex ? "curved" : "line",
-            curvature: _this9.getCurvature(parallelIndex !== null && parallelIndex !== void 0 ? parallelIndex : 1, parallelMaxIndex !== null && parallelMaxIndex !== void 0 ? parallelMaxIndex : 1)
+            curvature: _this10.getCurvature(parallelIndex !== null && parallelIndex !== void 0 ? parallelIndex : 1, parallelMaxIndex !== null && parallelMaxIndex !== void 0 ? parallelMaxIndex : 1)
           });
         } else if (typeof parallelIndex === "number") {
-          _this9.mergeEdgeAttributes(edge, {
+          _this10.mergeEdgeAttributes(edge, {
             type: "curved",
-            curvature: _this9.getCurvature(parallelIndex !== null && parallelIndex !== void 0 ? parallelIndex : 1, parallelMaxIndex !== null && parallelMaxIndex !== void 0 ? parallelMaxIndex : 1)
+            curvature: _this10.getCurvature(parallelIndex !== null && parallelIndex !== void 0 ? parallelIndex : 1, parallelMaxIndex !== null && parallelMaxIndex !== void 0 ? parallelMaxIndex : 1)
           });
         } else {
-          _this9.setEdgeAttribute(edge, "type", "line");
+          _this10.setEdgeAttribute(edge, "type", "line");
         }
       });
     }

package/dist/esm/hooks/useSigma.js

@@ -47,8 +47,8 @@ var useSigma = function useSigma(graph, _nodeReducer, _edgeReducer) {
           circle: NodeCircleProgram
         },
         nodeReducer: function nodeReducer(key, data) {
-          var _nodeData$size;
-          var nodeData = (_nodeReducer === null || _nodeReducer === void 0 ? void 0 : _nodeReducer(data)) || data;
+          var _nodeReducer2, _nodeData$size, _nodeData$label;
+          var nodeData = (_nodeReducer2 = _nodeReducer === null || _nodeReducer === void 0 ? void 0 : _nodeReducer(data)) !== null && _nodeReducer2 !== void 0 ? _nodeReducer2 : data;
           // Ensure node size is at least 16 for visibility
           if (!nodeData.size && nodeData.weight) {
             nodeData.size = Math.max(16, nodeData.weight * 3);
@@ -58,13 +58,13 @@ var useSigma = function useSigma(graph, _nodeReducer, _edgeReducer) {
           }
 
           // ensure node label renderer is called in order to render selected border
-          nodeData.label = nodeData.label || "";
+          nodeData.label = (_nodeData$label = nodeData.label) !== null && _nodeData$label !== void 0 ? _nodeData$label : "";
           nodeData.id = key;
           return nodeData;
         },
         edgeReducer: function edgeReducer(key, data) {
-          var _edgeData$size;
-          var edgeData = (_edgeReducer === null || _edgeReducer === void 0 ? void 0 : _edgeReducer(data)) || data;
+          var _edgeReducer2, _edgeData$size;
+          var edgeData = (_edgeReducer2 = _edgeReducer === null || _edgeReducer === void 0 ? void 0 : _edgeReducer(data)) !== null && _edgeReducer2 !== void 0 ? _edgeReducer2 : data;
           // Ensure edge size is at least 0.5 for visibility
           if (!edgeData.size && edgeData.weight) {
             edgeData.size = Math.max(0.5, edgeData.weight * 6);

package/dist/esm/programs/arrow-head/frag.glsl.js

@@ -3,6 +3,6 @@
 /* istanbul ignore file */
 
 // language=GLSL
-var SHADER_SOURCE = /*glsl*/"\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying float v_opacity;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  gl_FragColor = v_color;\n  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);\n}\n";
+var SHADER_SOURCE = /* glsl */"\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying float v_opacity;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  gl_FragColor = v_color;\n  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);\n}\n";
 
 export { SHADER_SOURCE as default };

package/dist/esm/programs/arrow-head/index.js

@@ -25,7 +25,7 @@ var DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS = {
   widenessToThicknessRatio: 2
 };
 function createEdgeArrowHeadProgram(inputOptions) {
-  var options = _objectSpread(_objectSpread({}, DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS), inputOptions || {});
+  var options = _objectSpread(_objectSpread({}, DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS), inputOptions !== null && inputOptions !== void 0 ? inputOptions : {});
   return /*#__PURE__*/function (_EdgeProgram) {
     function EdgeArrowHeadProgram() {
       _classCallCheck(this, EdgeArrowHeadProgram);

package/dist/esm/programs/arrow-head/vert.glsl.js

@@ -3,6 +3,6 @@
 /* istanbul ignore file */
 
 // language=GLSL
-var SHADER_SOURCE = /*glsl*/"\nattribute vec2 a_position;\nattribute vec2 a_normal;\nattribute float a_radius;\nattribute vec3 a_barycentric;\nattribute float a_opacity;\n\n#ifdef PICKING_MODE\nattribute vec4 a_id;\n#else\nattribute vec4 a_color;\n#endif\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\nuniform float u_minEdgeThickness;\nuniform float u_lengthToThicknessRatio;\nuniform float u_widenessToThicknessRatio;\n\nvarying vec4 v_color;\nvarying float v_opacity;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float minThickness = u_minEdgeThickness;\n\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl and\n  // edge.clamped.vert.glsl. Please read it to get better comments on what's\n  // happening:\n  float pixelsThickness = max(normalLength / u_sizeRatio, minThickness);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float webGLNodeRadius = a_radius * 2.0 * u_correctionRatio / u_sizeRatio;\n  float webGLArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;\n  float webGLArrowHeadThickness = webGLThickness * u_widenessToThicknessRatio;\n\n  float da = a_barycentric.x;\n  float db = a_barycentric.y;\n  float dc = a_barycentric.z;\n\n  vec2 delta = vec2(\n      da * (webGLNodeRadius * unitNormal.y)\n    + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadThickness * unitNormal.x)\n    + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadThickness * unitNormal.x),\n\n      da * (-webGLNodeRadius * unitNormal.x)\n    + db * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x + webGLArrowHeadThickness * unitNormal.y)\n    + dc * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x - webGLArrowHeadThickness * unitNormal.y)\n  );\n\n  vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;\n\n  gl_Position = vec4(position, 0, 1);\n\n  #ifdef PICKING_MODE\n  // For picking mode, we use the ID as the color:\n  v_color = a_id;\n  #else\n  // For normal mode, we use the color:\n  v_color = a_color;\n  v_opacity = a_opacity;\n  #endif\n\n  v_color.a *= bias;\n}\n";
+var SHADER_SOURCE = /* glsl */"\nattribute vec2 a_position;\nattribute vec2 a_normal;\nattribute float a_radius;\nattribute vec3 a_barycentric;\nattribute float a_opacity;\n\n#ifdef PICKING_MODE\nattribute vec4 a_id;\n#else\nattribute vec4 a_color;\n#endif\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\nuniform float u_minEdgeThickness;\nuniform float u_lengthToThicknessRatio;\nuniform float u_widenessToThicknessRatio;\n\nvarying vec4 v_color;\nvarying float v_opacity;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float minThickness = u_minEdgeThickness;\n\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl and\n  // edge.clamped.vert.glsl. Please read it to get better comments on what's\n  // happening:\n  float pixelsThickness = max(normalLength / u_sizeRatio, minThickness);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float webGLNodeRadius = a_radius * 2.0 * u_correctionRatio / u_sizeRatio;\n  float webGLArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;\n  float webGLArrowHeadThickness = webGLThickness * u_widenessToThicknessRatio;\n\n  float da = a_barycentric.x;\n  float db = a_barycentric.y;\n  float dc = a_barycentric.z;\n\n  vec2 delta = vec2(\n      da * (webGLNodeRadius * unitNormal.y)\n    + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadThickness * unitNormal.x)\n    + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadThickness * unitNormal.x),\n\n      da * (-webGLNodeRadius * unitNormal.x)\n    + db * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x + webGLArrowHeadThickness * unitNormal.y)\n    + dc * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x - webGLArrowHeadThickness * unitNormal.y)\n  );\n\n  vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;\n\n  gl_Position = vec4(position, 0, 1);\n\n  #ifdef PICKING_MODE\n  // For picking mode, we use the ID as the color:\n  v_color = a_id;\n  #else\n  // For normal mode, we use the color:\n  v_color = a_color;\n  v_opacity = a_opacity;\n  #endif\n\n  v_color.a *= bias;\n}\n";
 
 export { SHADER_SOURCE as default };

package/dist/esm/programs/edge-curve/index.js

@@ -93,11 +93,11 @@ var EdgeCurveProgramBase = /*#__PURE__*/function (_EdgeProgram) {
   }, {
     key: "processVisibleItem",
     value: function processVisibleItem(edgeIndex, startIndex, sourceData, targetData, data) {
-      var _data$color, _data$curvature, _data$opacity, _data$arrow, _data$arrow2;
+      var _data$color, _data$selected, _data$curvature, _data$opacity, _data$arrow, _data$arrow2;
       var color = (_data$color = data.color) !== null && _data$color !== void 0 ? _data$color : this.renderer.getSetting("defaultEdgeColor");
       if (data.selected) color = "#f00";
       if (data.highlight) color = "#F54A4A";
-      var thickness = Math.min(data.size || 1, 0.5) * (data.selected || data.highlight ? 16 : 8);
+      var thickness = Math.min(data.size || 1, 0.5) * (((_data$selected = data.selected) !== null && _data$selected !== void 0 ? _data$selected : data.highlight) ? 16 : 8);
       var x1 = sourceData.x;
       var y1 = sourceData.y;
       var x2 = targetData.x;

package/dist/esm/programs/edge-line/index.js

@@ -97,11 +97,11 @@ var EdgeLineProgramBase = /*#__PURE__*/function (_EdgeProgram) {
   }, {
     key: "processVisibleItem",
     value: function processVisibleItem(edgeIndex, startIndex, sourceData, targetData, data) {
-      var _data$color, _data$opacity, _data$arrow, _data$arrow2;
+      var _data$color, _data$selected, _data$opacity, _data$arrow, _data$arrow2;
       var color = (_data$color = data.color) !== null && _data$color !== void 0 ? _data$color : this.renderer.getSetting("defaultEdgeColor");
       if (data.selected) color = "#f00";
       if (data.highlight) color = "#F54A4A";
-      var thickness = Math.min(data.size || 1, 0.5) * (data.selected || data.highlight ? 8 : 4);
+      var thickness = Math.min(data.size || 1, 0.5) * (((_data$selected = data.selected) !== null && _data$selected !== void 0 ? _data$selected : data.highlight) ? 8 : 4);
       var x1 = sourceData.x;
       var y1 = sourceData.y;
       var x2 = targetData.x;