@react-fabric/graph 1.0.0-beta.58

package/dist/cjs/packages/graph/src/graph/index.js

@@ -0,0 +1,425 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _typeof = require('@babel/runtime/helpers/typeof');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
+var _get = require('@babel/runtime/helpers/get');
+var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime/helpers/inherits');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var utilities = require('@react-fabric/utilities');
+var edgeCurve = require('@sigma/edge-curve');
+var elk_bundled = require('../../../../node_modules/elkjs/lib/elk.bundled.js');
+var elkWorker = require('../../../../_virtual/elk-worker.js');
+var Graphology = require('graphology');
+var graphologyLayout = require('graphology-layout');
+var utils = require('sigma/utils');
+
+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) {
+  function Graph(options) {
+    var _this;
+    _classCallCheck(this, Graph);
+    _this = _callSuper(this, Graph, [options]);
+    var edgeHandler = utilities.debounce(function () {
+      return _this.checkParallelEdges();
+    });
+    _this.on("edgeAdded", edgeHandler);
+    _this.on("edgeDropped", edgeHandler);
+    var fireNodeSelect = utilities.debounce(function () {
+      _this.emit("nodesSelected", _this.filterNodes(function (_, atts) {
+        return atts.selected;
+      }));
+    });
+    var nodeSelectHandler = function nodeSelectHandler(_ref) {
+      var name = _ref.name;
+      if (name === "selected") {
+        fireNodeSelect();
+      }
+    };
+    _this.on("nodeDropped", fireNodeSelect);
+    _this.on("nodeAttributesUpdated", nodeSelectHandler);
+    return _this;
+  }
+  _inherits(Graph, _Graphology);
+  return _createClass(Graph, [{
+    key: "on",
+    value: function on(type, listener) {
+      return _get(_getPrototypeOf(Graph.prototype), "on", this).call(this, type, listener);
+    }
+  }, {
+    key: "off",
+    value: function off(type, listener) {
+      return _get(_getPrototypeOf(Graph.prototype), "off", this).call(this, type, listener);
+    }
+  }, {
+    key: "emit",
+    value: function emit(type) {
+      var _get2;
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      return (_get2 = _get(_getPrototypeOf(Graph.prototype), "emit", this)).call.apply(_get2, [this, type].concat(args));
+    }
+  }, {
+    key: "mergeNodes",
+    value: function mergeNodes(key, nodes, attributesOrNodeReducer, edgeReducer) {
+      var _this2 = this;
+      if (!nodes.length) return;
+      var newNodeAttributes = {};
+      var edgeList = [];
+      var attributeList = [];
+      nodes.forEach(function (n) {
+        var atts = _this2.getNodeAttributes(n);
+        if (atts) {
+          attributeList.push(atts);
+        }
+        var edges = _this2.edges(n);
+        if (edges.length) {
+          edges.forEach(function (e) {
+            var source = _this2.source(e);
+            var target = _this2.target(e);
+            var edge = _this2.getEdgeAttributes(e);
+            if (edge) {
+              edgeList.push({
+                key: e,
+                // move source to new node if source is old node
+                source: source === n ? key : source,
+                // move target to new node if target is old node
+                target: target === n ? key : target,
+                attributes: edge
+              });
+            }
+          });
+        }
+      });
+      if (typeof attributesOrNodeReducer === "function") {
+        newNodeAttributes = attributesOrNodeReducer(attributeList);
+      } else if (_typeof(attributesOrNodeReducer) === "object") {
+        Object.assign(newNodeAttributes, attributesOrNodeReducer);
+      }
+      if (typeof edgeReducer === "function") {
+        edgeList = edgeReducer(edgeList);
+      }
+      this.dropNodes(nodes);
+      this["import"]({
+        nodes: [{
+          key: key,
+          attributes: newNodeAttributes
+        }],
+        edges: edgeList
+      }, true);
+      return this;
+    }
+  }, {
+    key: "groupNodes",
+    value: function groupNodes(key, nodes, attributesOrNodeReducer, edgeReducer) {
+      var _this3 = this;
+      if (!nodes.length) return;
+      var newNodeAttributes = {
+        nodeList: nodes,
+        isGroup: true,
+        expanded: false
+      };
+      var edgeList = [];
+      var movedEdges = [];
+      var attributeList = [];
+      nodes.forEach(function (n) {
+        var atts = _this3.getNodeAttributes(n);
+        if (atts) {
+          attributeList.push(atts);
+        }
+        var edges = _this3.edges(n);
+        if (edges.length) {
+          var nodeEdges = edges.map(function (e) {
+            var source = _this3.source(e);
+            var target = _this3.target(e);
+            var edge = _this3.getEdgeAttributes(e);
+            if (edge) {
+              movedEdges.push({
+                key: e,
+                // move source to group node if source is not old node
+                source: source === n ? n : key,
+                // move target to group node if target is not old node
+                target: target === n ? n : key,
+                attributes: edge
+              });
+              // make new connection to neighboring node
+              edgeList.push({
+                key: "".concat(key, "-").concat(e),
+                source: source === n ? key : source,
+                target: target === n ? key : target,
+                attributes: edge
+              });
+            }
+            _this3.dropEdge(e);
+            return {
+              key: e,
+              // move source to group node if source is not old node
+              source: source,
+              // move target to group node if target is not old node
+              target: target,
+              attributes: edge
+            };
+          });
+          _this3.setNodeAttribute(n, "hidden", true);
+          _this3.setNodeAttribute(n, "selected", false);
+          // store original edges for grouped node
+          _this3.setNodeAttribute(n, "originalEdges", nodeEdges);
+        }
+      });
+      if (typeof attributesOrNodeReducer === "function") {
+        newNodeAttributes = Object.assign(newNodeAttributes, attributesOrNodeReducer(attributeList));
+      } else if (_typeof(attributesOrNodeReducer) === "object") {
+        Object.assign(newNodeAttributes, attributesOrNodeReducer);
+      }
+      if (typeof edgeReducer === "function") {
+        edgeList = edgeReducer(edgeList);
+      }
+      this["import"]({
+        nodes: [{
+          key: key,
+          attributes: newNodeAttributes
+        }],
+        edges: edgeList.concat(movedEdges)
+      }, true);
+      return this;
+    }
+  }, {
+    key: "ungroupNode",
+    value: function ungroupNode(node) {
+      var _this4 = this;
+      var atts = this.getNodeAttributes(node);
+      if (!atts || !atts.isGroup) return;
+      var nodes = atts.nodeList || [];
+      nodes.forEach(function (n) {
+        var originalEdges = _this4.getNodeAttribute(n, "originalEdges");
+        if (originalEdges && Array.isArray(originalEdges)) {
+          originalEdges.forEach(function (e) {
+            _this4.addEdgeWithKey(e.key, e.source, e.target, e.attributes);
+          });
+        }
+        _this4.setNodeAttribute(n, "hidden", false);
+        _this4.removeNodeAttribute(n, "originalEdges");
+      });
+      this.dropNode(node);
+      return this;
+    }
+  }, {
+    key: "toggleExpanded",
+    value: function toggleExpanded(node, force) {
+      var _this5 = this;
+      var expanded = force !== null && force !== void 0 ? force : !this.getNodeAttribute(node, "expanded");
+      var nodes = this.getNodeAttribute(node, "nodeList");
+      this.setNodeAttribute(node, "expanded", expanded);
+      nodes === null || nodes === void 0 || nodes.forEach(function (n) {
+        _this5.setNodeAttribute(n, "hidden", !expanded);
+      });
+      return this;
+    }
+
+    // @ts-expect-error ignore
+  }, {
+    key: "import",
+    value: function _import(data, merge) {
+      var _this6 = this;
+      var newNodes = [];
+      if (data instanceof Graph) {
+        newNodes.push.apply(newNodes, _toConsumableArray(data.nodes()));
+      } else {
+        newNodes.push.apply(newNodes, _toConsumableArray(data.nodes.map(function (n) {
+          return n.key;
+        })));
+      }
+      _get(_getPrototypeOf(Graph.prototype), "import", this).call(this, data, merge);
+      // fire events for nodes added
+      this.emit("nodesLoaded", newNodes);
+      // apply random positions for nodes
+      var positions = graphologyLayout.random(this);
+      utils.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;
+    // }
+
+    // @ts-expect-error ignore
+  }, {
+    key: "elkLayout",
+    value: function () {
+      var _elkLayout = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(type) {
+        var _this7 = this;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!this.elk) this.elk = new elk_bundled({
+                workerFactory: function workerFactory() {
+                  return new elkWorker();
+                }
+              });
+              this.emit("layoutRunning", true);
+              this.elk.layout({
+                id: "root",
+                width: 1600,
+                height: 900,
+                children: this.mapNodes(function (node, atts) {
+                  var _atts$size, _atts$weight, _atts$size2, _atts$weight2;
+                  return {
+                    id: node,
+                    width: (_atts$size = atts.size) !== null && _atts$size !== void 0 ? _atts$size : Math.max(16, ((_atts$weight = atts.weight) !== null && _atts$weight !== void 0 ? _atts$weight : 0) * 3),
+                    height: (_atts$size2 = atts.size) !== null && _atts$size2 !== void 0 ? _atts$size2 : Math.max(16, ((_atts$weight2 = atts.weight) !== null && _atts$weight2 !== void 0 ? _atts$weight2 : 0) * 3)
+                  };
+                }),
+                edges: this.mapEdges(function (edge, _, source, target) {
+                  return {
+                    id: edge,
+                    sources: [source],
+                    targets: [target]
+                  };
+                })
+              }, {
+                logging: true,
+                measureExecutionTime: true,
+                layoutOptions: {
+                  "elk.algorithm": type
+                }
+              }).then(function (graph) {
+                var _graph$children$map, _graph$children;
+                var positions = Object.fromEntries((_graph$children$map = (_graph$children = graph.children) === null || _graph$children === void 0 ? void 0 : _graph$children.map(function (node) {
+                  var _node$x, _node$y;
+                  return [node.id, {
+                    x: (_node$x = node.x) !== null && _node$x !== void 0 ? _node$x : 0,
+                    y: (_node$y = node.y) !== null && _node$y !== void 0 ? _node$y : 0
+                  }];
+                })) !== null && _graph$children$map !== void 0 ? _graph$children$map : []);
+                utils.animateNodes(_this7, positions, {
+                  duration: 200
+                }, function () {
+                  setTimeout(function () {
+                    _this7.emit("layoutDone");
+                  }, 100);
+                });
+              })["catch"](console.error)["finally"](function () {
+                _this7.emit("layoutRunning", false);
+              });
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function elkLayout(_x) {
+        return _elkLayout.apply(this, arguments);
+      }
+      return elkLayout;
+    }()
+  }, {
+    key: "dropNodes",
+    value: function dropNodes(nodes) {
+      var _this8 = this;
+      if (!nodes.length) return;
+      nodes.forEach(function (n) {
+        return _this8.dropNode(n);
+      });
+    }
+
+    /**
+     * parallel edge check to be called after adding edges
+     */
+  }, {
+    key: "getCurvature",
+    value: function getCurvature(index) {
+      var maxIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      if (maxIndex <= 0) throw new Error("Invalid maxIndex");
+      if (index < 0) return -this.getCurvature(-index, maxIndex);
+      var amplitude = 0.25;
+      var maxCurvature = amplitude * (1 - Math.exp(-maxIndex / amplitude)) * edgeCurve.DEFAULT_EDGE_CURVATURE;
+      return maxCurvature * index / maxIndex;
+    }
+  }, {
+    key: "checkParallelEdges",
+    value: function checkParallelEdges() {
+      var _this9 = this;
+      // Use dedicated helper to identify parallel edges:
+      // @ts-expect-error ignore
+      edgeCurve.indexParallelEdgesIndex(this, {
+        edgeIndexAttribute: "parallelIndex",
+        edgeMinIndexAttribute: "parallelMinIndex",
+        edgeMaxIndexAttribute: "parallelMaxIndex"
+      });
+      // Adapt types and curvature of parallel edges for rendering:
+      this.forEachEdge(function (edge, _ref2) {
+        var parallelIndex = _ref2.parallelIndex,
+          parallelMinIndex = _ref2.parallelMinIndex,
+          parallelMaxIndex = _ref2.parallelMaxIndex;
+        if (typeof parallelMinIndex === "number") {
+          _this9.mergeEdgeAttributes(edge, {
+            type: parallelIndex ? "curved" : "line",
+            curvature: _this9.getCurvature(parallelIndex !== null && parallelIndex !== void 0 ? parallelIndex : 1, parallelMaxIndex !== null && parallelMaxIndex !== void 0 ? parallelMaxIndex : 1)
+          });
+        } else if (typeof parallelIndex === "number") {
+          _this9.mergeEdgeAttributes(edge, {
+            type: "curved",
+            curvature: _this9.getCurvature(parallelIndex !== null && parallelIndex !== void 0 ? parallelIndex : 1, parallelMaxIndex !== null && parallelMaxIndex !== void 0 ? parallelMaxIndex : 1)
+          });
+        } else {
+          _this9.setEdgeAttribute(edge, "type", "line");
+        }
+      });
+    }
+  }]);
+}(Graphology);
+
+exports.Graph = Graph;

package/dist/cjs/packages/graph/src/hooks/sigmaDragSelect.js

@@ -0,0 +1,169 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+
+var useDragSelection = function useDragSelection(renderer) {
+  var isDrawing = react.useRef(false);
+  var drawPoints = react.useRef([]);
+  var drawingCanvas = react.useRef(undefined);
+  var drawingContext = react.useRef(null);
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var selectionMode = react.useRef(false);
+  react.useEffect(function () {
+    selectionMode.current = mode;
+  }, [mode]);
+  var startDrawing = function startDrawing(evt) {
+    isDrawing.current = true;
+    if (drawingCanvas.current) {
+      drawingContext.current = drawingCanvas.current.getContext("2d");
+      if (drawingContext.current) {
+        drawingContext.current.setLineDash([2, 4]);
+        drawingContext.current.lineWidth = 2;
+        drawingContext.current.strokeStyle = "#3a766c40";
+        drawingContext.current.fillStyle = "#3a766c10";
+        drawingContext.current.lineJoin = "round";
+        drawingContext.current.lineCap = "round";
+      }
+      var drawingRectangle = drawingCanvas.current.getBoundingClientRect();
+      drawPoints.current = [{
+        x: evt.clientX - drawingRectangle.left,
+        y: evt.clientY - drawingRectangle.top
+      }];
+    }
+    evt.stopImmediatePropagation();
+    evt.stopPropagation();
+    evt.preventDefault();
+  };
+  var drawPath = function drawPath(evt) {
+    if (!isDrawing) return;
+    if (drawingCanvas.current) {
+      var drawingRectangle = drawingCanvas.current.getBoundingClientRect();
+      if (drawingContext.current) {
+        if (selectionMode.current === "rectangle") {
+          drawingContext.current.clearRect(0, 0, drawingCanvas.current.width, drawingCanvas.current.height);
+          var _drawPoints$current$ = drawPoints.current[0],
+            x = _drawPoints$current$.x,
+            y = _drawPoints$current$.y;
+          drawingContext.current.beginPath();
+          drawingContext.current.rect(Math.min(x, evt.clientX), Math.min(y, evt.clientY), Math.abs(evt.clientX - drawingRectangle.left - x), Math.abs(evt.clientY - drawingRectangle.top - y));
+          drawingContext.current.stroke();
+          drawingContext.current.fill();
+        }
+        if (selectionMode.current === "lasso") {
+          drawPoints.current.push({
+            x: evt.clientX - drawingRectangle.left,
+            y: evt.clientY - drawingRectangle.top
+          });
+
+          // Clear the canvas
+          drawingContext.current.clearRect(0, 0, drawingContext.current.canvas.width, drawingContext.current.canvas.height);
+
+          // Redraw the complete path for a smoother effect
+          // Even smoother with quadratic curves
+          var sourcePoint = drawPoints.current[0];
+          var destinationPoint = drawPoints.current[1];
+          var pointsLength = drawPoints.current.length;
+          var getMiddlePointCoordinates = function getMiddlePointCoordinates(firstPoint, secondPoint) {
+            return {
+              x: firstPoint.x + (secondPoint.x - firstPoint.x) / 2,
+              y: firstPoint.y + (secondPoint.y - firstPoint.y) / 2
+            };
+          };
+          drawingContext.current.beginPath();
+          drawingContext.current.moveTo(sourcePoint.x, sourcePoint.y);
+          for (var i = 1; i < pointsLength; i++) {
+            var middlePoint = getMiddlePointCoordinates(sourcePoint, destinationPoint);
+            // drawingContext.current.lineTo(drawPoints[i].x, drawPoints[i].y);
+            drawingContext.current.quadraticCurveTo(sourcePoint.x, sourcePoint.y, middlePoint.x, middlePoint.y);
+            sourcePoint = drawPoints.current[i];
+            destinationPoint = drawPoints.current[i + 1];
+          }
+          drawingContext.current.lineTo(sourcePoint.x, sourcePoint.y);
+          drawingContext.current.stroke();
+          drawingContext.current.fill();
+        }
+      }
+    }
+  };
+  var stopDrawing = function stopDrawing(evt) {
+    if (!renderer) return;
+    if (!isDrawing) return;
+    var nodes = Array.from(renderer.getGraph().nodes());
+    nodes.forEach(function (node) {
+      if (!renderer) return;
+      var _ref = renderer.getNodeDisplayData(node),
+        _ref$x = _ref.x,
+        nx = _ref$x === void 0 ? 0 : _ref$x,
+        _ref$y = _ref.y,
+        ny = _ref$y === void 0 ? 0 : _ref$y,
+        hidden = _ref.hidden;
+      var _renderer$framedGraph = renderer.framedGraphToViewport({
+          x: nx,
+          y: ny
+        }),
+        x = _renderer$framedGraph.x,
+        y = _renderer$framedGraph.y;
+      if (evt.shiftKey) {
+        var _drawingContext$curre;
+        ((_drawingContext$curre = drawingContext.current) === null || _drawingContext$curre === void 0 ? void 0 : _drawingContext$curre.isPointInPath(x, y)) && !hidden && renderer.getGraph().setNodeAttribute(node, "selected", true);
+      } else {
+        var _drawingContext$curre2;
+        !hidden && renderer.getGraph().setNodeAttribute(node, "selected", (_drawingContext$curre2 = drawingContext.current) === null || _drawingContext$curre2 === void 0 ? void 0 : _drawingContext$curre2.isPointInPath(x, y));
+      }
+    });
+    dettachListeners();
+  };
+  var attachListeners = function attachListeners() {
+    if (!renderer) return;
+    drawingCanvas.current = document.createElement("canvas");
+    var rect = renderer.getContainer().getBoundingClientRect();
+    drawingCanvas.current.width = rect.width;
+    drawingCanvas.current.height = rect.height;
+    drawingCanvas.current.style.setProperty("inset", "0");
+    drawingCanvas.current.style.setProperty("position", "absolute");
+    renderer.getContainer().appendChild(drawingCanvas.current);
+    drawingCanvas.current.style.cursor = "crosshair";
+    drawingCanvas.current.addEventListener("mousedown", startDrawing, {
+      capture: true
+    });
+    document.addEventListener("mousemove", drawPath);
+    document.addEventListener("mouseup", stopDrawing);
+  };
+  var dettachListeners = function dettachListeners() {
+    if (drawingContext.current) {
+      drawingContext.current.clearRect(0, 0, drawingContext.current.canvas.width, drawingContext.current.canvas.height);
+      drawingContext.current = null;
+    }
+    if (drawingCanvas.current) {
+      var _drawingCanvas$curren;
+      (_drawingCanvas$curren = drawingCanvas.current) === null || _drawingCanvas$curren === void 0 || _drawingCanvas$curren.remove();
+    }
+    document.removeEventListener("mousemove", drawPath);
+    document.removeEventListener("mouseup", stopDrawing);
+    isDrawing.current = false;
+    setMode(false);
+  };
+  var startRectangleSelection = function startRectangleSelection() {
+    setMode("rectangle");
+    attachListeners();
+  };
+  var startLassoSelection = function startLassoSelection() {
+    setMode("lasso");
+    attachListeners();
+  };
+  var cancelSelection = function cancelSelection() {
+    dettachListeners();
+  };
+  return {
+    selectionMode: mode,
+    startRectangleSelection: startRectangleSelection,
+    startLassoSelection: startLassoSelection,
+    cancelSelection: cancelSelection
+  };
+};
+
+exports.useDragSelection = useDragSelection;

package/dist/cjs/packages/graph/src/hooks/sigmaHilighter.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var utilities = require('@react-fabric/utilities');
+
+var attachHighlighter = function attachHighlighter(renderer) {
+  var handleEnterNode = function handleEnterNode(id, graph) {
+    try {
+      var neighbors = graph.neighbors(id);
+      graph.forEachNode(function (node) {
+        graph.setNodeAttribute(node, "opacity", node !== id && !neighbors.includes(node) ? 0.1 : 1);
+      });
+      graph.forEachEdge(function (edge) {
+        graph.setEdgeAttribute(edge, "opacity", !graph.hasExtremity(edge, id) ? 0.1 : 1);
+      });
+    } catch (_unused) {
+      //
+    }
+  };
+  var handleLeaveNode = function handleLeaveNode(graph) {
+    graph.forEachNode(function (node) {
+      graph.setNodeAttribute(node, "opacity", 1);
+    });
+    graph.forEachEdge(function (edge) {
+      graph.setEdgeAttribute(edge, "opacity", 1);
+    });
+  };
+  var handleEnterEdge = function handleEnterEdge(id, graph) {
+    try {
+      var source = graph.source(id);
+      var target = graph.target(id);
+      graph.setEdgeAttribute(id, "zIndex", 2);
+      graph.setNodeAttribute(source, "zIndex", 2);
+      graph.setNodeAttribute(target, "zIndex", 2);
+      graph.setEdgeAttribute(id, "highlight", true);
+      graph.setNodeAttribute(source, "highlight", true);
+      graph.setNodeAttribute(target, "highlight", true);
+      graph.forEachNode(function (node) {
+        graph.setNodeAttribute(node, "opacity", node !== source && node !== target ? 0.1 : 1);
+      });
+      graph.forEachEdge(function (edge) {
+        graph.setEdgeAttribute(edge, "opacity", edge !== id ? 0.1 : 1);
+      });
+    } catch (_unused2) {
+      //
+    }
+  };
+  var handleLeaveEdge = function handleLeaveEdge(id, graph) {
+    var source = graph.source(id);
+    var target = graph.target(id);
+    graph.setEdgeAttribute(id, "zIndex", 0);
+    graph.setNodeAttribute(source, "zIndex", 0);
+    graph.setNodeAttribute(target, "zIndex", 0);
+    graph.setEdgeAttribute(id, "highlight", false);
+    graph.setNodeAttribute(source, "highlight", false);
+    graph.setNodeAttribute(target, "highlight", false);
+    graph.forEachNode(function (node) {
+      graph.setNodeAttribute(node, "opacity", 1);
+      graph.setNodeAttribute(node, "highlight", false);
+    });
+    graph.forEachEdge(function (edge) {
+      graph.setEdgeAttribute(edge, "opacity", 1);
+      graph.setEdgeAttribute(edge, "highlight", false);
+    });
+  };
+  var debouceNodeEnter = utilities.debounce(function (e) {
+    handleEnterNode(e.node, renderer.getGraph());
+  });
+  var debouceEdgeEnter = utilities.debounce(function (e) {
+    handleEnterEdge(e.edge, renderer.getGraph());
+  }, 100);
+  renderer.on("enterNode", debouceNodeEnter);
+  renderer.on("leaveNode", function (e) {
+    debouceNodeEnter.cancel();
+    handleLeaveNode(renderer.getGraph());
+  });
+  renderer.on("enterEdge", debouceEdgeEnter);
+  renderer.on("leaveEdge", function (e) {
+    debouceEdgeEnter.cancel();
+    handleLeaveEdge(e.edge, renderer.getGraph());
+  });
+};
+
+exports.attachHighlighter = attachHighlighter;