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

package/dist/cjs/{packages/graph/src/programs → 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/{packages/graph/src/programs → 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/{packages/graph/src/programs → 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/{packages/graph/src/components → 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/{packages/graph/src/components → 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

@@ -0,0 +1,205 @@
+'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';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Tools = function Tools() {
+  var _useGraph = useGraph(),
+    dragSelector = _useGraph.dragSelector,
+    graph = _useGraph.graph,
+    selected = _useGraph.selected,
+    resetViewport = _useGraph.resetViewport,
+    zoomIn = _useGraph.zoomIn,
+    zoomOut = _useGraph.zoomOut;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-base",
+    children: [/*#__PURE__*/jsxs(ButtonGroup, {
+      variant: "link",
+      children: [/*#__PURE__*/jsx(Button, {
+        "aria-label": "Home",
+        icon: ICONS.focus,
+        onClick: resetViewport
+      }), /*#__PURE__*/jsx(Button, {
+        "aria-label": "Zoomin",
+        icon: ICONS.zoomIn,
+        onClick: zoomIn
+      }), /*#__PURE__*/jsx(Button, {
+        "aria-label": "Zoomout",
+        icon: ICONS.zoomOut,
+        onClick: zoomOut
+      })]
+    }), /*#__PURE__*/jsxs(ButtonGroup, {
+      variant: "link",
+      children: [dragSelector.selectionMode !== "lasso" && /*#__PURE__*/jsx(Button, {
+        "aria-label": "lasso",
+        icon: ICONS.lasso,
+        disabled: !!dragSelector.selectionMode,
+        onClick: function onClick() {
+          return dragSelector.startLassoSelection();
+        }
+      }), dragSelector.selectionMode && /*#__PURE__*/jsx(Button, {
+        color: "danger",
+        "aria-label": "cancel",
+        icon: ICONS.cancel,
+        onClick: function onClick() {
+          return dragSelector.cancelSelection();
+        }
+      }), dragSelector.selectionMode !== "rectangle" && /*#__PURE__*/jsx(Button, {
+        "aria-label": "rectselect",
+        icon: ICONS.select,
+        disabled: !!dragSelector.selectionMode,
+        onClick: function onClick() {
+          return dragSelector.startRectangleSelection();
+        }
+      })]
+    }), /*#__PURE__*/jsx(ButtonGroup, {
+      variant: "link",
+      children: /*#__PURE__*/jsxs(Dropdown, {
+        children: [/*#__PURE__*/jsx(Button, {
+          "aria-label": "force",
+          variant: "link",
+          icon: "M19.5 17C19.37 17 19.24 17 19.11 17.04L17.5 13.79C17.95 13.34 18.25 12.71 18.25 12C18.25 10.62 17.13 9.5 15.75 9.5C15.62 9.5 15.5 9.5 15.36 9.54L13.73 6.29C14.21 5.84 14.5 5.21 14.5 4.5C14.5 3.12 13.38 2 12 2S9.5 3.12 9.5 4.5C9.5 5.21 9.79 5.84 10.26 6.29L8.64 9.54C8.5 9.5 8.38 9.5 8.25 9.5C6.87 9.5 5.75 10.62 5.75 12C5.75 12.71 6.05 13.34 6.5 13.79L4.89 17.04C4.76 17 4.63 17 4.5 17C3.12 17 2 18.12 2 19.5C2 20.88 3.12 22 4.5 22S7 20.88 7 19.5C7 18.8 6.71 18.16 6.24 17.71L7.86 14.46C8 14.5 8.12 14.5 8.25 14.5C8.38 14.5 8.5 14.5 8.64 14.46L10.27 17.71C9.8 18.16 9.5 18.8 9.5 19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5C14.5 18.12 13.38 17 12 17C11.87 17 11.74 17 11.61 17.04L10 13.79C10.46 13.34 10.75 12.71 10.75 12S10.46 10.66 10 10.21L11.61 6.96C11.74 7 11.87 7 12 7S12.26 7 12.39 6.96L14 10.21C13.55 10.66 13.25 11.3 13.25 12C13.25 13.38 14.37 14.5 15.75 14.5C15.88 14.5 16 14.5 16.14 14.46L17.77 17.71C17.3 18.16 17 18.8 17 19.5C17 20.88 18.12 22 19.5 22S22 20.88 22 19.5C22 18.12 20.88 17 19.5 17Z"
+        }), /*#__PURE__*/jsxs(Menu, {
+          className: "text-sm",
+          children: [/*#__PURE__*/jsx(MenuItem, {
+            label: "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: /*#__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: /*#__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: /*#__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: /*#__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: /*#__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: /*#__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);
+            }))
+          })]
+        })]
+      })
+    }), /*#__PURE__*/jsxs(ButtonGroup, {
+      variant: "link",
+      children: [/*#__PURE__*/jsx(Button, {
+        "aria-label": "delete",
+        color: "danger",
+        icon: ICONS["delete"],
+        disabled: !selected.length,
+        onClick: function onClick() {
+          return graph.dropNodes(selected);
+        }
+      }), /*#__PURE__*/jsx(Button, {
+        "aria-label": "clear",
+        color: "danger",
+        icon: ICONS.clear,
+        onClick: function onClick() {
+          return graph.clear();
+        }
+      })]
+    })]
+  });
+};
+
+export { Tools };

package/dist/esm/{packages/graph/src/components → 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/{packages/graph/src/graph → 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';
@@ -12,12 +13,16 @@ import _inherits from '@babel/runtime/helpers/inherits';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { debounce } from '@react-fabric/utilities';
 import { indexParallelEdgesIndex, DEFAULT_EDGE_CURVATURE } from '@sigma/edge-curve';
-import ElkConstructor from '../../../../node_modules/elkjs/lib/elk.bundled.js';
-import WorkerFactory from '../../../../_virtual/elk-worker.js';
+import ElkConstructor from 'elkjs/lib/elk.bundled';
 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/{packages/graph/src/hooks → 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

@@ -0,0 +1,8 @@
+'use client';
+
+/* 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";
+
+export { SHADER_SOURCE as default };

package/dist/esm/{packages/graph/src/programs → 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);