refactor(edges): only redraw moved edges

dist/ReactGraph.js

@@ -30239,8 +30239,8 @@
     });
     var graphContext = {
       state: state,
-      onConnect: onConnect,
+      dispatch: dispatch,
-      dispatch: dispatch
+      onConnect: onConnect
     };
     return React__default.createElement(GraphContext.Provider, {
       value: graphContext
@@ -30256,55 +30256,47 @@
     edges: []
   };
 
-  var NodeRenderer =
+  function renderNode(d, props, graphContext) {
-  /*#__PURE__*/
+    var nodeType = d.type || 'default';
-  function (_PureComponent) {
-    _inherits(NodeRenderer, _PureComponent);
 
-    function NodeRenderer() {
+    if (!props.nodeTypes[nodeType]) {
-      _classCallCheck(this, NodeRenderer);
+      console.warn("No node type found for type \"".concat(nodeType, "\". Using fallback type \"default\"."));
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(NodeRenderer).apply(this, arguments));
     }
 
-    _createClass(NodeRenderer, [{
+    var NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes["default"];
-      key: "renderNode",
+    return React__default.createElement(NodeComponent, {
-      value: function renderNode(d) {
+      key: d.id,
-        var nodeType = d.type || 'default';
+      id: d.id,
+      type: d.type,
+      data: d.data,
+      xPos: d.__rg.position.x,
+      yPos: d.__rg.position.y,
+      onClick: props.onElementClick,
+      onNodeDragStop: props.onNodeDragStop,
+      dispatch: graphContext.dispatch,
+      transform: graphContext.state.transform,
+      getNodeById: graphContext.getNodeById,
+      selectedElements: graphContext.state.selectedElements
+    });
+  }
 
-        if (!this.props.nodeTypes[nodeType]) {
+  var NodeRenderer = React.memo(function (props) {
-          console.warn("No node type found for type \"".concat(nodeType, "\". Using fallback type \"default\"."));
+    var graphContext = React.useContext(GraphContext);
-        }
+    var _graphContext$state = graphContext.state,
-
+        transform = _graphContext$state.transform,
-        var NodeComponent = this.props.nodeTypes[nodeType] || this.props.nodeTypes["default"];
+        nodes = _graphContext$state.nodes;
-        return React__default.createElement(NodeComponent, _extends({
+    var transformStyle = {
-          key: d.id,
+      transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
-          onClick: this.props.onElementClick,
+    };
-          onNodeDragStop: this.props.onNodeDragStop,
+    return React__default.createElement("div", {
-          onConnect: this.props.onConnect
+      className: "react-graph__nodes",
-        }, d));
+      style: transformStyle
-      }
+    }, nodes.map(function (d) {
-    }, {
+      return renderNode(d, props, graphContext);
-      key: "render",
+    }));
-      value: function render() {
+  });
-        var _this = this;
+  NodeRenderer.displayName = 'NodeRenderer';
-
+  NodeRenderer.whyDidYouRender = false;
-        return React__default.createElement(Consumer, null, function (_ref) {
-          var state = _ref.state;
-          return React__default.createElement("div", {
-            className: "react-graph__nodes",
-            style: {
-              transform: "translate(".concat(state.transform[0], "px,").concat(state.transform[1], "px) scale(").concat(state.transform[2], ")")
-            }
-          }, state.nodes.map(function (d) {
-            return _this.renderNode(d);
-          }));
-        });
-      }
-    }]);
-
-    return NodeRenderer;
-  }(React.PureComponent);
 
   var classnames = createCommonjsModule(function (module) {
   /*!
@@ -30397,84 +30389,78 @@
     }, style)));
   });
 
-  var EdgeRenderer =
+  function renderEdge(e, props, graphContext) {
-  /*#__PURE__*/
+    var edgeType = e.type || 'default';
-  function (_PureComponent) {
+    var sourceNode = graphContext.state.nodes.find(function (n) {
-    _inherits(EdgeRenderer, _PureComponent);
+      return n.id === e.source;
+    });
+    var targetNode = graphContext.state.nodes.find(function (n) {
+      return n.id === e.target;
+    });
 
-    function EdgeRenderer() {
+    if (!sourceNode) {
-      _classCallCheck(this, EdgeRenderer);
+      throw new Error("couldn't create edge for source id: ".concat(e.source));
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(EdgeRenderer).apply(this, arguments));
     }
 
-    _createClass(EdgeRenderer, [{
+    if (!targetNode) {
-      key: "renderEdge",
+      throw new Error("couldn't create edge for target id: ".concat(e.target));
-      value: function renderEdge(e, nodes, onElementClick) {
+    }
-        var edgeType = e.type || 'default';
-        var sourceNode = nodes.find(function (n) {
-          return n.id === e.source;
-        });
-        var targetNode = nodes.find(function (n) {
-          return n.id === e.target;
-        });
 
-        if (!sourceNode) {
+    var EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes["default"];
-          throw new Error("couldn't create edge for source id: ".concat(e.source));
+    return React__default.createElement(EdgeComponent, {
-        }
+      key: "".concat(e.source, "-").concat(e.target),
+      type: e.type,
+      sourceNode: sourceNode,
+      targetNode: targetNode,
+      onClick: props.onElementClick,
+      selectedElements: graphContext.state.selectedElements,
+      dispatch: graphContext.dispatch,
+      animated: e.animated,
+      style: e.style,
+      source: e.source,
+      target: e.target,
+      sourceNodeX: sourceNode.__rg.position.x,
+      sourceNodeY: sourceNode.__rg.position.y,
+      targetNodeX: targetNode.__rg.position.x,
+      targeteNodeY: targetNode.__rg.position.y
+    });
+  }
 
-        if (!targetNode) {
+  var EdgeRenderer = React.memo(function (props) {
-          throw new Error("couldn't create edge for target id: ".concat(e.target));
+    var graphContext = React.useContext(GraphContext);
-        }
+    var width = props.width,
+        height = props.height,
+        connectionLineStyle = props.connectionLineStyle,
+        connectionLineType = props.connectionLineType;
 
-        var EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes["default"];
+    if (!width) {
-        return React__default.createElement(EdgeComponent, _extends({
+      return null;
-          key: "".concat(e.source, "-").concat(e.target),
+    }
-          sourceNode: sourceNode,
-          targetNode: targetNode,
-          onClick: onElementClick
-        }, e));
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this = this;
 
-        var _this$props = this.props,
+    var _graphContext$state = graphContext.state,
-            width = _this$props.width,
+        transform = _graphContext$state.transform,
-            height = _this$props.height,
+        edges = _graphContext$state.edges,
-            onElementClick = _this$props.onElementClick,
+        nodes = _graphContext$state.nodes,
-            connectionLineStyle = _this$props.connectionLineStyle,
+        connectionSourceId = _graphContext$state.connectionSourceId,
-            connectionLineType = _this$props.connectionLineType;
+        connectionPosition = _graphContext$state.connectionPosition;
-
+    var transformStyle = "translate(".concat(transform[0], ",").concat(transform[1], ") scale(").concat(transform[2], ")");
-        if (!width) {
+    return React__default.createElement("svg", {
-          return null;
+      width: width,
-        }
+      height: height,
-
+      className: "react-graph__edges"
-        return React__default.createElement(Consumer, null, function (_ref) {
+    }, React__default.createElement("g", {
-          var state = _ref.state;
+      transform: transformStyle
-          return React__default.createElement("svg", {
+    }, edges.map(function (e) {
-            width: width,
+      return renderEdge(e, props, graphContext);
-            height: height,
+    }), connectionSourceId && React__default.createElement(ConnectionLine, {
-            className: "react-graph__edges"
+      nodes: nodes,
-          }, React__default.createElement("g", {
+      connectionSourceId: connectionSourceId,
-            transform: "translate(".concat(state.transform[0], ",").concat(state.transform[1], ") scale(").concat(state.transform[2], ")")
+      connectionPosition: connectionPosition,
-          }, state.edges.map(function (e) {
+      transform: transform,
-            return _this.renderEdge(e, state.nodes, onElementClick);
+      connectionLineStyle: connectionLineStyle,
-          }), state.connectionSourceId && React__default.createElement(ConnectionLine, {
+      connectionLineType: connectionLineType
-            nodes: state.nodes,
+    })));
-            connectionSourceId: state.connectionSourceId,
+  });
-            connectionPosition: state.connectionPosition,
-            transform: state.transform,
-            connectionLineStyle: connectionLineStyle,
-            connectionLineType: connectionLineType
-          })));
-        });
-      }
-    }]);
-
-    return EdgeRenderer;
-  }(React.PureComponent);
 
   var initialRect = {
     startX: 0,
@@ -33020,10 +33006,6 @@
     return null;
   });
 
-  var NodeIdContext = React.createContext(null);
-  var Provider$1 = NodeIdContext.Provider;
-  var Consumer$1 = NodeIdContext.Consumer;
-
   function _onMouseDown(evt, _ref) {
     var nodeId = _ref.nodeId,
         dispatch = _ref.dispatch,
@@ -33079,15 +33061,12 @@
   var BaseHandle = React.memo(function (_ref2) {
     var source = _ref2.source,
         target = _ref2.target,
+        nodeId = _ref2.nodeId,
+        onConnect = _ref2.onConnect,
+        dispatch = _ref2.dispatch,
         _ref2$className = _ref2.className,
         className = _ref2$className === void 0 ? null : _ref2$className,
-        rest = _objectWithoutProperties(_ref2, ["source", "target", "className"]);
+        rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "dispatch", "className"]);
-
-    var nodeId = React.useContext(NodeIdContext);
-
-    var _useContext = React.useContext(GraphContext),
-        dispatch = _useContext.dispatch,
-        onConnect = _useContext.onConnect;
 
     var handleClasses = classnames('react-graph__handle', className, {
       source: source,
@@ -33107,15 +33086,37 @@
     }, rest));
   });
 
-  var TargetHandle = (function (props) {
+  var NodeIdContext = React.createContext(null);
+  var Provider$1 = NodeIdContext.Provider;
+  var Consumer$1 = NodeIdContext.Consumer;
+
+  var TargetHandle = React.memo(function (props) {
+    var nodeId = React.useContext(NodeIdContext);
+
+    var _useContext = React.useContext(GraphContext),
+        dispatch = _useContext.dispatch,
+        onConnect = _useContext.onConnect;
+
     return React__default.createElement(BaseHandle, _extends({
-      target: true
+      target: true,
+      nodeId: nodeId,
+      dispatch: dispatch,
+      onConnect: onConnect
     }, props));
   });
 
-  var SourceHandle = (function (props) {
+  var SourceHandle = React.memo(function (props) {
+    var nodeId = React.useContext(NodeIdContext);
+
+    var _useContext = React.useContext(GraphContext),
+        dispatch = _useContext.dispatch,
+        onConnect = _useContext.onConnect;
+
     return React__default.createElement(BaseHandle, _extends({
-      source: true
+      source: true,
+      nodeId: nodeId,
+      dispatch: dispatch,
+      onConnect: onConnect
     }, props));
   });
 
@@ -33227,38 +33228,36 @@
   var onNodeClick = function onNodeClick(evt, _ref3) {
     var onClick = _ref3.onClick,
         dispatch = _ref3.dispatch,
-        data = _ref3.data,
         id = _ref3.id,
         type = _ref3.type,
-        position = _ref3.position;
+        position = _ref3.position,
+        data = _ref3.data;
 
     if (isInput(evt)) {
       return false;
     }
 
-    dispatch(setSelectedElements({
+    var node = {
-      data: data,
-      id: id
-    }));
-    onClick({
       id: id,
       type: type,
-      data: data,
+      position: position,
-      position: position
+      data: data
-    });
+    };
+    dispatch(setSelectedElements(node));
+    onClick(node);
   };
 
   var _onStop = function onStop(_ref4) {
     var onNodeDragStop = _ref4.onNodeDragStop,
         id = _ref4.id,
         type = _ref4.type,
-        data = _ref4.data,
+        position = _ref4.position,
-        position = _ref4.position;
+        data = _ref4.data;
     onNodeDragStop({
       id: id,
       type: type,
-      data: data,
+      position: position,
-      position: position
+      data: data
     });
   };
 
@@ -33266,10 +33265,6 @@
     return React.memo(function (props) {
       var nodeElement = React.useRef(null);
 
-      var _useContext = React.useContext(GraphContext),
-          state = _useContext.state,
-          dispatch = _useContext.dispatch;
-
       var _useState = React.useState({
         x: 0,
         y: 0
@@ -33278,20 +33273,29 @@
           offset = _useState2[0],
           setOffset = _useState2[1];
 
-      var data = props.data,
+      var id = props.id,
-          _onClick = props.onClick,
           type = props.type,
-          id = props.id,
+          data = props.data,
-          __rg = props.__rg,
+          transform = props.transform,
+          xPos = props.xPos,
+          yPos = props.yPos,
+          selectedElements = props.selectedElements,
+          dispatch = props.dispatch,
+          getNodeById = props.getNodeById,
+          _onClick = props.onClick,
           onNodeDragStop = props.onNodeDragStop;
-      var position = __rg.position;
+      console.log('render node', id);
+      var position = {
+        x: xPos,
+        y: yPos
+      };
 
-      var _state$transform = _slicedToArray(state.transform, 3),
+      var _transform = _slicedToArray(transform, 3),
-          x = _state$transform[0],
+          x = _transform[0],
-          y = _state$transform[1],
+          y = _transform[1],
-          k = _state$transform[2];
+          k = _transform[2];
 
-      var selected = state.selectedElements.filter(isNode).map(function (e) {
+      var selected = selectedElements.filter(isNode).map(function (e) {
         return e.id;
       }).includes(id);
       var nodeClasses = classnames('react-graph__node', {
@@ -33299,7 +33303,7 @@
       });
       var nodeStyle = {
         zIndex: selected ? 10 : 3,
-        transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
+        transform: "translate(".concat(xPos, "px,").concat(yPos, "px)")
       };
       React.useEffect(function () {
         var bounds = nodeElement.current.getBoundingClientRect();
@@ -33319,7 +33323,7 @@
         onStart: function onStart(evt) {
           return _onStart(evt, {
             setOffset: setOffset,
-            transform: state.transform,
+            transform: transform,
             position: position
           });
         },
@@ -33328,7 +33332,7 @@
             dispatch: dispatch,
             id: id,
             offset: offset,
-            transform: state.transform
+            transform: transform
           });
         },
         onStop: function onStop() {
@@ -33336,23 +33340,24 @@
             onNodeDragStop: onNodeDragStop,
             id: id,
             type: type,
-            data: data,
+            position: position,
-            position: position
+            data: data
           });
         },
-        scale: state.transform[2]
+        scale: transform[2]
       }, React__default.createElement("div", {
         className: nodeClasses,
         ref: nodeElement,
         style: nodeStyle,
         onClick: function onClick(evt) {
           return onNodeClick(evt, {
+            getNodeById: getNodeById,
             onClick: _onClick,
             dispatch: dispatch,
-            data: data,
             id: id,
             type: type,
-            position: position
+            position: position,
+            data: data
           });
         }
       }, React__default.createElement(Provider$1, {
@@ -33423,16 +33428,14 @@
 
   var wrapEdge = (function (EdgeComponent) {
     return React.memo(function (props) {
-      var _useContext = React.useContext(GraphContext),
-          state = _useContext.state,
-          dispatch = _useContext.dispatch;
-
       var source = props.source,
           target = props.target,
           animated = props.animated,
           type = props.type,
+          dispatch = props.dispatch,
+          selectedElements = props.selectedElements,
           _onClick = props.onClick;
-      var selected = state.selectedElements.filter(function (e) {
+      var selected = selectedElements.filter(function (e) {
         return isEdge(e);
       }).find(function (e) {
         return e.source === source && e.target === target;
@@ -33507,6 +33510,12 @@
   var css = ".react-graph {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-graph__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-graph__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-graph__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-graph__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.react-graph__edge {\n  fill: none;\n  stroke: #bbb;\n  stroke-width: 2;\n  pointer-events: all;\n}\n\n.react-graph__edge.selected {\n    stroke: #555;\n  }\n\n.react-graph__edge.animated {\n    stroke-dasharray: 5;\n    -webkit-animation: dashdraw 0.5s linear infinite;\n            animation: dashdraw 0.5s linear infinite;\n  }\n\n.react-graph__edge.connection {\n    stroke: '#ddd';\n    pointer-events: none;\n  }\n\n@-webkit-keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-graph__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n.react-graph__node.selected > * {\n    box-shadow: 0 0 0 2px #555;\n  }\n\n.react-graph__handle {\n  position: absolute;\n  width: 10px;\n  height: 8px;\n  background: rgba(255, 255, 255, 0.4);\n}\n\n.react-graph__handle.source {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0);\n    cursor: crosshair;\n  }\n\n.react-graph__handle.target {\n    left: 50%;\n    top: 0;\n    cursor: crosshair;\n    transform: translate(-50%, 0);\n  }\n\n.react-graph__nodesselection {\n  z-index: 3;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform-origin: left top;\n  pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n    position: absolute;\n    background: rgba(0, 89, 220, 0.08);\n    border: 1px dotted rgba(0, 89, 220, 0.8);\n    pointer-events: all;\n  }";
   styleInject(css);
 
+  if (process.env.NODE_ENV !== 'production') {
+    var whyDidYouRender = require('@welldone-software/why-did-you-render');
+
+    whyDidYouRender(React__default);
+  }
+
   var ReactGraph =
   /*#__PURE__*/
   function (_PureComponent) {

example/build/example.e31bb0bc.js

@@ -38267,11 +38267,12 @@ var NodeRenderer = (0, _react.memo)(function (props) {
   var _graphContext$state = graphContext.state,
       transform = _graphContext$state.transform,
       nodes = _graphContext$state.nodes;
+  var transformStyle = {
+    transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
+  };
   return _react.default.createElement("div", {
     className: "react-graph__nodes",
-    style: {
+    style: transformStyle
-      transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
-    }
   }, nodes.map(function (d) {
     return renderNode(d, props, graphContext);
   }));
@@ -38422,105 +38423,78 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function renderEdge(e, props, graphContext) {
+  var edgeType = e.type || 'default';
+  var sourceNode = graphContext.state.nodes.find(function (n) {
+    return n.id === e.source;
+  });
+  var targetNode = graphContext.state.nodes.find(function (n) {
+    return n.id === e.target;
+  });
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+  if (!sourceNode) {
-
+    throw new Error("couldn't create edge for source id: ".concat(e.source));
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-var EdgeRenderer =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(EdgeRenderer, _PureComponent);
-
-  function EdgeRenderer() {
-    _classCallCheck(this, EdgeRenderer);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(EdgeRenderer).apply(this, arguments));
   }
 
-  _createClass(EdgeRenderer, [{
+  if (!targetNode) {
-    key: "renderEdge",
+    throw new Error("couldn't create edge for target id: ".concat(e.target));
-    value: function renderEdge(e, nodes, onElementClick) {
+  }
-      var edgeType = e.type || 'default';
-      var sourceNode = nodes.find(function (n) {
-        return n.id === e.source;
-      });
-      var targetNode = nodes.find(function (n) {
-        return n.id === e.target;
-      });
 
-      if (!sourceNode) {
+  var EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
-        throw new Error("couldn't create edge for source id: ".concat(e.source));
+  return _react.default.createElement(EdgeComponent, {
-      }
+    key: "".concat(e.source, "-").concat(e.target),
+    type: e.type,
+    sourceNode: sourceNode,
+    targetNode: targetNode,
+    onClick: props.onElementClick,
+    selectedElements: graphContext.state.selectedElements,
+    dispatch: graphContext.dispatch,
+    animated: e.animated,
+    style: e.style,
+    source: e.source,
+    target: e.target,
+    sourceNodeX: sourceNode.__rg.position.x,
+    sourceNodeY: sourceNode.__rg.position.y,
+    targetNodeX: targetNode.__rg.position.x,
+    targeteNodeY: targetNode.__rg.position.y
+  });
+}
 
-      if (!targetNode) {
+var EdgeRenderer = (0, _react.memo)(function (props) {
-        throw new Error("couldn't create edge for target id: ".concat(e.target));
+  var graphContext = (0, _react.useContext)(_GraphContext.GraphContext);
-      }
+  var width = props.width,
+      height = props.height,
+      connectionLineStyle = props.connectionLineStyle,
+      connectionLineType = props.connectionLineType;
 
-      var EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;
+  if (!width) {
-      return _react.default.createElement(EdgeComponent, _extends({
+    return null;
-        key: "".concat(e.source, "-").concat(e.target),
+  }
-        sourceNode: sourceNode,
-        targetNode: targetNode,
-        onClick: onElementClick
-      }, e));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var _this$props = this.props,
-          width = _this$props.width,
-          height = _this$props.height,
-          onElementClick = _this$props.onElementClick,
-          connectionLineStyle = _this$props.connectionLineStyle,
-          connectionLineType = _this$props.connectionLineType;
-
-      if (!width) {
-        return null;
-      }
-
-      return _react.default.createElement(_GraphContext.Consumer, null, function (_ref) {
-        var state = _ref.state;
-        return _react.default.createElement("svg", {
-          width: width,
-          height: height,
-          className: "react-graph__edges"
-        }, _react.default.createElement("g", {
-          transform: "translate(".concat(state.transform[0], ",").concat(state.transform[1], ") scale(").concat(state.transform[2], ")")
-        }, state.edges.map(function (e) {
-          return _this.renderEdge(e, state.nodes, onElementClick);
-        }), state.connectionSourceId && _react.default.createElement(_ConnectionLine.default, {
-          nodes: state.nodes,
-          connectionSourceId: state.connectionSourceId,
-          connectionPosition: state.connectionPosition,
-          transform: state.transform,
-          connectionLineStyle: connectionLineStyle,
-          connectionLineType: connectionLineType
-        })));
-      });
-    }
-  }]);
-
-  return EdgeRenderer;
-}(_react.PureComponent);
 
+  var _graphContext$state = graphContext.state,
+      transform = _graphContext$state.transform,
+      edges = _graphContext$state.edges,
+      nodes = _graphContext$state.nodes,
+      connectionSourceId = _graphContext$state.connectionSourceId,
+      connectionPosition = _graphContext$state.connectionPosition;
+  var transformStyle = "translate(".concat(transform[0], ",").concat(transform[1], ") scale(").concat(transform[2], ")");
+  return _react.default.createElement("svg", {
+    width: width,
+    height: height,
+    className: "react-graph__edges"
+  }, _react.default.createElement("g", {
+    transform: transformStyle
+  }, edges.map(function (e) {
+    return renderEdge(e, props, graphContext);
+  }), connectionSourceId && _react.default.createElement(_ConnectionLine.default, {
+    nodes: nodes,
+    connectionSourceId: connectionSourceId,
+    connectionPosition: connectionPosition,
+    transform: transform,
+    connectionLineStyle: connectionLineStyle,
+    connectionLineType: connectionLineType
+  })));
+});
 var _default = EdgeRenderer;
 exports.default = _default;
 },{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectionLine":"../src/ConnectionLine/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
@@ -41218,25 +41192,7 @@ var _default = (0, _react.memo)(function (props) {
 });
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../hooks":"../src/hooks.js","../state/actions":"../src/state/actions.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js"}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../hooks":"../src/hooks.js","../state/actions":"../src/state/actions.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js"}],"../src/NodeRenderer/HandleTypes/BaseHandle.js":[function(require,module,exports) {
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Consumer = exports.Provider = exports.NodeIdContext = void 0;
-
-var _react = require("react");
-
-var NodeIdContext = (0, _react.createContext)(null);
-exports.NodeIdContext = NodeIdContext;
-var Provider = NodeIdContext.Provider;
-exports.Provider = Provider;
-var Consumer = NodeIdContext.Consumer;
-exports.Consumer = Consumer;
-var _default = NodeIdContext;
-exports.default = _default;
-},{"react":"../node_modules/react/index.js"}],"../src/NodeRenderer/HandleTypes/BaseHandle.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41248,10 +41204,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
-
-var _GraphContext = require("../../GraphContext");
-
 var _actions = require("../../state/actions");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41319,15 +41271,12 @@ function _onMouseDown(evt, _ref) {
 var _default = (0, _react.memo)(function (_ref2) {
   var source = _ref2.source,
       target = _ref2.target,
+      nodeId = _ref2.nodeId,
+      onConnect = _ref2.onConnect,
+      dispatch = _ref2.dispatch,
       _ref2$className = _ref2.className,
       className = _ref2$className === void 0 ? null : _ref2$className,
-      rest = _objectWithoutProperties(_ref2, ["source", "target", "className"]);
+      rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "dispatch", "className"]);
-
-  var nodeId = (0, _react.useContext)(_NodeIdContext.default);
-
-  var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
-      dispatch = _useContext.dispatch,
-      onConnect = _useContext.onConnect;
 
   var handleClasses = (0, _classnames.default)('react-graph__handle', className, {
     source: source,
@@ -41348,7 +41297,25 @@ var _default = (0, _react.memo)(function (_ref2) {
 });
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js","../../GraphContext":"../src/GraphContext/index.js","../../state/actions":"../src/state/actions.js"}],"../src/NodeRenderer/HandleTypes/TargetHandle.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js"}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Consumer = exports.Provider = exports.NodeIdContext = void 0;
+
+var _react = require("react");
+
+var NodeIdContext = (0, _react.createContext)(null);
+exports.NodeIdContext = NodeIdContext;
+var Provider = NodeIdContext.Provider;
+exports.Provider = Provider;
+var Consumer = NodeIdContext.Consumer;
+exports.Consumer = Consumer;
+var _default = NodeIdContext;
+exports.default = _default;
+},{"react":"../node_modules/react/index.js"}],"../src/NodeRenderer/HandleTypes/TargetHandle.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41356,22 +41323,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
 
+var _GraphContext = require("../../GraphContext");
+
+var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _default = function _default(props) {
+var _default = (0, _react.memo)(function (props) {
+  var nodeId = (0, _react.useContext)(_NodeIdContext.default);
+
+  var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
+      dispatch = _useContext.dispatch,
+      onConnect = _useContext.onConnect;
+
   return _react.default.createElement(_BaseHandle.default, _extends({
-    target: true
+    target: true,
+    nodeId: nodeId,
+    dispatch: dispatch,
+    onConnect: onConnect
   }, props));
-};
+});
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../../GraphContext":"../src/GraphContext/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41379,22 +41361,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
 
+var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
+
+var _GraphContext = require("../../GraphContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _default = function _default(props) {
+var _default = (0, _react.memo)(function (props) {
+  var nodeId = (0, _react.useContext)(_NodeIdContext.default);
+
+  var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
+      dispatch = _useContext.dispatch,
+      onConnect = _useContext.onConnect;
+
   return _react.default.createElement(_BaseHandle.default, _extends({
-    source: true
+    source: true,
+    nodeId: nodeId,
+    dispatch: dispatch,
+    onConnect: onConnect
   }, props));
-};
+});
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js"}],"../src/NodeRenderer/NodeTypes/DefaultNode.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js","../../GraphContext":"../src/GraphContext/index.js"}],"../src/NodeRenderer/NodeTypes/DefaultNode.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41864,8 +41861,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _GraphContext = require("../../GraphContext");
-
 var _actions = require("../../state/actions");
 
 var _graphUtils = require("../../graph-utils");
@@ -41880,16 +41875,14 @@ var isInput = function isInput(e) {
 
 var _default = function _default(EdgeComponent) {
   return (0, _react.memo)(function (props) {
-    var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
-        state = _useContext.state,
-        dispatch = _useContext.dispatch;
-
     var source = props.source,
         target = props.target,
         animated = props.animated,
         type = props.type,
+        dispatch = props.dispatch,
+        selectedElements = props.selectedElements,
         _onClick = props.onClick;
-    var selected = state.selectedElements.filter(function (e) {
+    var selected = selectedElements.filter(function (e) {
       return (0, _graphUtils.isEdge)(e);
     }).find(function (e) {
       return e.source === source && e.target === target;
@@ -41921,7 +41914,7 @@ var _default = function _default(EdgeComponent) {
 };
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../GraphContext":"../src/GraphContext/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js"}],"../src/EdgeRenderer/utils.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js"}],"../src/EdgeRenderer/utils.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {

src/EdgeRenderer/EdgeTypes/wrapEdge.js

@@ -1,16 +1,17 @@
-import React, { useContext, memo } from 'react';
+import React, {  memo } from 'react';
 import cx from 'classnames';
 
-import { GraphContext } from '../../GraphContext';
 import { setSelectedElements } from '../../state/actions';
 import { isEdge } from '../../graph-utils';
 
 const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
 export default EdgeComponent => memo((props) => {
-  const { state, dispatch } = useContext(GraphContext);
+  const {
-  const { source, target, animated, type, onClick } = props;
+    source, target, animated, type,
-  const selected = state.selectedElements
+    dispatch, selectedElements, onClick
+  } = props;
+  const selected = selectedElements
     .filter(e => isEdge(e))
     .find(e => e.source === source && e.target === target);
   const edgeClasses = cx('react-graph__edge', { selected, animated: animated });

src/EdgeRenderer/index.js

@@ -1,73 +1,78 @@
-import React, { PureComponent } from 'react';
+import React, { memo, useContext } from 'react';
 
-import { Consumer } from '../GraphContext';
+import { GraphContext } from '../GraphContext';
 import ConnectionLine from '../ConnectionLine';
 
-class EdgeRenderer extends PureComponent {
+function renderEdge(e, props, graphContext) {
-  renderEdge(e, nodes, onElementClick) {
+  const edgeType = e.type || 'default';
-    const edgeType = e.type || 'default';
+  const sourceNode = graphContext.state.nodes.find(n => n.id === e.source);
-    const sourceNode = nodes.find(n => n.id === e.source);
+  const targetNode = graphContext.state.nodes.find(n => n.id === e.target);
-    const targetNode = nodes.find(n => n.id === e.target);
 
-    if (!sourceNode) {
+  if (!sourceNode) {
-      throw new Error(`couldn't create edge for source id: ${e.source}`);
+    throw new Error(`couldn't create edge for source id: ${e.source}`);
-    }
-
-    if (!targetNode) {
-      throw new Error(`couldn't create edge for target id: ${e.target}`);
-    }
-
-    const EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;
-
-    return (
-      <EdgeComponent
-        key={`${e.source}-${e.target}`}
-        sourceNode={sourceNode}
-        targetNode={targetNode}
-        onClick={onElementClick}
-        {...e}
-      />
-    );
   }
 
-  render() {
+  if (!targetNode) {
-    const {
+    throw new Error(`couldn't create edge for target id: ${e.target}`);
-      width, height, onElementClick,
-      connectionLineStyle, connectionLineType
-    } = this.props;
-
-    if (!width) {
-      return null;
-    }
-
-    return (
-      <Consumer>
-        {({ state }) => (
-          <svg
-            width={width}
-            height={height}
-            className="react-graph__edges"
-          >
-            <g
-              transform={`translate(${state.transform[0]},${state.transform[1]}) scale(${state.transform[2]})`}
-            >
-              {state.edges.map(e => this.renderEdge(e, state.nodes, onElementClick))}
-              {state.connectionSourceId && (
-                <ConnectionLine
-                  nodes={state.nodes}
-                  connectionSourceId={state.connectionSourceId}
-                  connectionPosition={state.connectionPosition}
-                  transform={state.transform}
-                  connectionLineStyle={connectionLineStyle}
-                  connectionLineType={connectionLineType}
-                />
-              )}
-            </g>
-          </svg>
-        )}
-      </Consumer>
-    );
   }
+
+  const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
+
+  return (
+    <EdgeComponent
+      key={`${e.source}-${e.target}`}
+      type={e.type}
+      sourceNode={sourceNode}
+      targetNode={targetNode}
+      onClick={props.onElementClick}
+      selectedElements={graphContext.state.selectedElements}
+      dispatch={graphContext.dispatch}
+      animated={e.animated}
+      style={e.style}
+      source={e.source}
+      target={e.target}
+      sourceNodeX={sourceNode.__rg.position.x}
+      sourceNodeY={sourceNode.__rg.position.y}
+      targetNodeX={targetNode.__rg.position.x}
+      targeteNodeY={targetNode.__rg.position.y}
+    />
+  );
 }
 
+const EdgeRenderer = memo((props) => {
+  const graphContext = useContext(GraphContext);
+  const {
+    width, height, connectionLineStyle, connectionLineType
+  } = props;
+
+  if (!width) {
+    return null;
+  }
+
+  const { transform, edges, nodes, connectionSourceId, connectionPosition } = graphContext.state;
+  const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      className="react-graph__edges"
+    >
+      <g transform={transformStyle}>
+        {edges.map(e => renderEdge(e, props, graphContext))}
+        {connectionSourceId && (
+          <ConnectionLine
+            nodes={nodes}
+            connectionSourceId={connectionSourceId}
+            connectionPosition={connectionPosition}
+            transform={transform}
+            connectionLineStyle={connectionLineStyle}
+            connectionLineType={connectionLineType}
+          />
+        )}
+      </g>
+    </svg>
+  );
+});
+
 export default EdgeRenderer;

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -1,8 +1,6 @@
-import React, { memo, useContext } from 'react';
+import React, { memo } from 'react';
 import cx from 'classnames';
 
-import NodeIdContext from '../NodeIdContext'
-import { GraphContext } from '../../GraphContext';
 import { setConnecting, setConnectionPos } from '../../state/actions';
 
 function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
@@ -37,9 +35,7 @@ function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
   document.addEventListener('mouseup', onMouseUp)
 }
 
-export default memo(({ source, target, className = null, ...rest }) => {
+export default memo(({ source, target, nodeId, onConnect, dispatch, className = null, ...rest }) => {
-  const nodeId = useContext(NodeIdContext);
-  const { dispatch, onConnect } = useContext(GraphContext);
   const handleClasses = cx(
     'react-graph__handle',
     className,

src/NodeRenderer/HandleTypes/SourceHandle.js

@@ -1,5 +1,20 @@
-import React from 'react';
+import React, { memo, useContext } from 'react';
 
 import BaseHandle from './BaseHandle';
+import NodeIdContext from '../NodeIdContext'
+import { GraphContext } from '../../GraphContext';
 
-export default props => <BaseHandle source {...props} />;
+export default memo((props) => {
+  const nodeId = useContext(NodeIdContext);
+  const { dispatch, onConnect } = useContext(GraphContext);
+
+  return (
+    <BaseHandle
+      source
+      nodeId={nodeId}
+      dispatch={dispatch}
+      onConnect={onConnect}
+      {...props}
+    />
+  );
+});

src/NodeRenderer/HandleTypes/TargetHandle.js

@@ -1,6 +1,21 @@
-import React from 'react';
+import React, { memo, useContext } from 'react';
 
 import BaseHandle from './BaseHandle';
+import { GraphContext } from '../../GraphContext';
+import NodeIdContext from '../NodeIdContext'
 
-export default props => <BaseHandle target {...props} />;
+export default memo((props) => {
+  const nodeId = useContext(NodeIdContext);
+  const { dispatch, onConnect } = useContext(GraphContext);
+
+  return (
+    <BaseHandle
+      target
+      nodeId={nodeId}
+      dispatch={dispatch}
+      onConnect={onConnect}
+      {...props}
+    />
+  );
+});
 

src/NodeRenderer/index.js

@@ -32,13 +32,12 @@ function renderNode(d, props, graphContext) {
 const NodeRenderer = memo((props) => {
   const graphContext = useContext(GraphContext);
   const { transform, nodes } = graphContext.state;
+  const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
 
   return (
     <div
       className="react-graph__nodes"
-      style={{
+      style={transformStyle}
-        transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`
-      }}
     >
       {nodes.map(d => renderNode(d, props, graphContext))}
     </div>