refactor(contexts): create connection context

dist/ReactGraph.js

@@ -27915,6 +27915,39 @@
 
   var reactSizeme = withSize;
 
+  var ConnectionContext = React.createContext({});
+  var Provider = React.memo(function (_ref) {
+    var onConnect = _ref.onConnect,
+        children = _ref.children;
+
+    var _useState = React.useState(null),
+        _useState2 = _slicedToArray(_useState, 2),
+        sourceId = _useState2[0],
+        setSourceId = _useState2[1];
+
+    var _useState3 = React.useState({
+      x: 0,
+      y: 0
+    }),
+        _useState4 = _slicedToArray(_useState3, 2),
+        position = _useState4[0],
+        setPosition = _useState4[1];
+
+    var connectionContext = {
+      sourceId: sourceId,
+      setSourceId: setSourceId,
+      position: position,
+      setPosition: setPosition,
+      onConnect: onConnect
+    };
+    return React__default.createElement(ConnectionContext.Provider, {
+      value: connectionContext
+    }, children);
+  });
+  Provider.displayName = 'ConnectionProvider';
+  Provider.whyDidYouRender = false;
+  var Consumer = ConnectionContext.Consumer;
+
   var lodash_isequal = createCommonjsModule(function (module, exports) {
   /**
    * Lodash (Custom Build) <https://lodash.com/>
@@ -29892,8 +29925,6 @@
   var SET_NODES_SELECTION = 'SET_NODES_SELECTION';
   var SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
   var REMOVE_NODES = 'REMOVE_NODES';
-  var SET_CONNECTING = 'SET_CONNECTING';
-  var SET_CONNECTION_POS = 'SET_CONNECTION_POS';
   var initialState = {
     width: 0,
     height: 0,
@@ -29912,12 +29943,7 @@
     d3Initialised: false,
     nodesSelectionActive: false,
     selectionActive: false,
-    selection: {},
+    selection: {}
-    connectionSourceId: null,
-    connectionPosition: {
-      x: 0,
-      y: 0
-    }
   };
   var reducer = function reducer(state, action) {
     switch (action.type) {
@@ -30031,24 +30057,12 @@
           });
         }
 
-      case SET_CONNECTING:
-        {
-          if (!action.payload.connectionPosition) {
-            return _objectSpread2({}, state, {
-              connectionSourceId: action.payload.connectionSourceId
-            });
-          }
-
-          return _objectSpread2({}, state, {}, action.payload);
-        }
-
       case SET_NODES:
       case SET_EDGES:
       case UPDATE_TRANSFORM:
       case INIT_D3:
       case UPDATE_SIZE:
       case SET_SELECTION:
-      case SET_CONNECTION_POS:
         return _objectSpread2({}, state, {}, action.payload);
 
       default:
@@ -30174,34 +30188,9 @@
       }
     };
   };
-  var setConnecting = function setConnecting(_ref4) {
-    var connectionSourceId = _ref4.connectionSourceId,
-        _ref4$connectionPosit = _ref4.connectionPosition,
-        connectionPosition = _ref4$connectionPosit === void 0 ? false : _ref4$connectionPosit;
-    return {
-      type: SET_CONNECTING,
-      payload: {
-        connectionSourceId: connectionSourceId,
-        connectionPosition: connectionPosition
-      }
-    };
-  };
-  var setConnectionPos = function setConnectionPos(_ref5) {
-    var x = _ref5.x,
-        y = _ref5.y;
-    return {
-      type: SET_CONNECTION_POS,
-      payload: {
-        connectionPosition: {
-          x: x,
-          y: y
-        }
-      }
-    };
-  };
 
   var GraphContext = React.createContext({});
-  var Provider = function Provider(props) {
+  var Provider$1 = function Provider(props) {
     var elements = props.elements,
         children = props.children,
         onConnect = props.onConnect;
@@ -30248,11 +30237,11 @@
       value: graphContext
     }, children);
   };
-  var Consumer = GraphContext.Consumer;
+  var Consumer$1 = GraphContext.Consumer;
-  Provider.propTypes = {
+  Provider$1.propTypes = {
     elements: PropTypes$1.arrayOf(PropTypes$1.object)
   };
-  Provider.defaultProps = {
+  Provider$1.defaultProps = {
     elements: []
   };
 
@@ -30371,8 +30360,8 @@
     var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
     var sourceX = sourceNode.__rg.position.x + sourceHandleX;
     var sourceY = sourceNode.__rg.position.y + sourceHandleY;
-    var targetX = props.connectionPosition.x * (1 / props.transform[2]) - props.transform[0] * (1 / props.transform[2]);
+    var targetX = props.connectionPositionX * (1 / props.transform[2]) - props.transform[0] * (1 / props.transform[2]);
-    var targetY = props.connectionPosition.y * (1 / props.transform[2]) - props.transform[1] * (1 / props.transform[2]);
+    var targetY = props.connectionPositionY * (1 / props.transform[2]) - props.transform[1] * (1 / props.transform[2]);
     var dAttr = '';
 
     if (props.connectionLineType === 'bezier') {
@@ -30454,6 +30443,11 @@
 
   var EdgeRenderer = React.memo(function (props) {
     var graphContext = React.useContext(GraphContext);
+
+    var _useContext = React.useContext(ConnectionContext),
+        position = _useContext.position,
+        connectionSourceId = _useContext.sourceId;
+
     var width = props.width,
         height = props.height,
         connectionLineStyle = props.connectionLineStyle,
@@ -30466,9 +30460,7 @@
     var _graphContext$state = graphContext.state,
         transform = _graphContext$state.transform,
         edges = _graphContext$state.edges,
-        nodes = _graphContext$state.nodes,
+        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,
@@ -30481,7 +30473,8 @@
     }), connectionSourceId && React__default.createElement(ConnectionLine, {
       nodes: nodes,
       connectionSourceId: connectionSourceId,
-      connectionPosition: connectionPosition,
+      connectionPositionX: position.x,
+      connectionPositionY: position.y,
       transform: transform,
       connectionLineStyle: connectionLineStyle,
       connectionLineType: connectionLineType
@@ -32983,6 +32976,8 @@
     });
     return React__default.createElement("div", {
       className: "react-graph__renderer"
+    }, React__default.createElement(Provider, {
+      onConnect: props.onConnect
     }, React__default.createElement(NodeRenderer, {
       nodeTypes: props.nodeTypes,
       onElementClick: props.onElementClick,
@@ -32994,7 +32989,7 @@
       onElementClick: props.onElementClick,
       connectionLineType: props.connectionLineType,
       connectionLineStyle: props.connectionLineStyle
-    }), shiftPressed && React__default.createElement(UserSelection, null), state.nodesSelectionActive && React__default.createElement(NodesSelection, null), React__default.createElement("div", {
+    })), shiftPressed && React__default.createElement(UserSelection, null), state.nodesSelectionActive && React__default.createElement(NodesSelection, null), React__default.createElement("div", {
       className: "react-graph__zoompane",
       onClick: function onClick() {
         return dispatch(setNodesSelection({
@@ -33034,24 +33029,22 @@
 
   function _onMouseDown(evt, _ref) {
     var nodeId = _ref.nodeId,
-        dispatch = _ref.dispatch,
+        setSourceId = _ref.setSourceId,
+        setPosition = _ref.setPosition,
         onConnect = _ref.onConnect,
         isTarget = _ref.isTarget;
     var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
-    var connectionPosition = {
+    setPosition({
       x: evt.clientX - containerBounds.x,
       y: evt.clientY - containerBounds.y
-    };
+    });
-    dispatch(setConnecting({
+    setSourceId(nodeId);
-      connectionPosition: connectionPosition,
-      connectionSourceId: nodeId
-    }));
 
     function onMouseMove(evt) {
-      dispatch(setConnectionPos({
+      setPosition({
         x: evt.clientX - containerBounds.x,
         y: evt.clientY - containerBounds.y
-      }));
+      });
     }
 
     function onMouseUp(evt) {
@@ -33073,9 +33066,7 @@
         }
       }
 
-      dispatch(setConnecting({
+      setSourceId(null);
-        connectionSourceId: false
-      }));
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
     }
@@ -33089,10 +33080,11 @@
         target = _ref2.target,
         nodeId = _ref2.nodeId,
         onConnect = _ref2.onConnect,
-        dispatch = _ref2.dispatch,
+        setSourceId = _ref2.setSourceId,
+        setPosition = _ref2.setPosition,
         _ref2$className = _ref2.className,
         className = _ref2$className === void 0 ? null : _ref2$className,
-        rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "dispatch", "className"]);
+        rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "setSourceId", "setPosition", "className"]);
 
     var handleClasses = classnames('react-graph__handle', className, {
       source: source,
@@ -33104,7 +33096,8 @@
       onMouseDown: function onMouseDown(evt) {
         return _onMouseDown(evt, {
           nodeId: nodeId,
-          dispatch: dispatch,
+          setSourceId: setSourceId,
+          setPosition: setPosition,
           onConnect: onConnect,
           isTarget: target
         });
@@ -33115,20 +33108,22 @@
   BaseHandle.whyDidYouRender = false;
 
   var NodeIdContext = React.createContext(null);
-  var Provider$1 = NodeIdContext.Provider;
+  var Provider$2 = NodeIdContext.Provider;
-  var Consumer$1 = NodeIdContext.Consumer;
+  var Consumer$2 = NodeIdContext.Consumer;
 
   var TargetHandle = React.memo(function (props) {
     var nodeId = React.useContext(NodeIdContext);
 
-    var _useContext = React.useContext(GraphContext),
+    var _useContext = React.useContext(ConnectionContext),
-        dispatch = _useContext.dispatch,
+        setPosition = _useContext.setPosition,
+        setSourceId = _useContext.setSourceId,
         onConnect = _useContext.onConnect;
 
     return React__default.createElement(BaseHandle, _extends({
       target: true,
       nodeId: nodeId,
-      dispatch: dispatch,
+      setPosition: setPosition,
+      setSourceId: setSourceId,
       onConnect: onConnect
     }, props));
   });
@@ -33138,14 +33133,16 @@
   var SourceHandle = React.memo(function (props) {
     var nodeId = React.useContext(NodeIdContext);
 
-    var _useContext = React.useContext(GraphContext),
+    var _useContext = React.useContext(ConnectionContext),
-        dispatch = _useContext.dispatch,
+        setPosition = _useContext.setPosition,
+        setSourceId = _useContext.setSourceId,
         onConnect = _useContext.onConnect;
 
     return React__default.createElement(BaseHandle, _extends({
       source: true,
       nodeId: nodeId,
-      dispatch: dispatch,
+      setPosition: setPosition,
+      setSourceId: setSourceId,
       onConnect: onConnect
     }, props));
   });
@@ -33392,7 +33389,7 @@
             data: data
           });
         }
-      }, React__default.createElement(Provider$1, {
+      }, React__default.createElement(Provider$2, {
         value: id
       }, React__default.createElement(NodeComponent, _extends({}, props, {
         selected: selected
@@ -33577,9 +33574,8 @@
         return React__default.createElement("div", {
           style: style,
           className: "react-graph"
-        }, React__default.createElement(Provider, {
+        }, React__default.createElement(Provider$1, {
-          elements: elements,
+          elements: elements
-          onConnect: onConnect
         }, React__default.createElement(GraphView$1, {
           onLoad: onLoad,
           onMove: onMove,
@@ -33589,7 +33585,8 @@
           nodeTypes: this.nodeTypes,
           edgeTypes: this.edgeTypes,
           connectionLineType: connectionLineType,
-          connectionLineStyle: connectionLineStyle
+          connectionLineStyle: connectionLineStyle,
+          onConnect: onConnect
         }), React__default.createElement(GlobalKeyHandler, {
           onElementsRemove: onElementsRemove
         }), children));

example/build/example.e31bb0bc.js

@@ -35671,7 +35671,62 @@ withSize.withSize = withSize;
 module.exports = withSize;
 
 
-},{"element-resize-detector":"../node_modules/element-resize-detector/src/element-resize-detector.js","react":"../node_modules/react/index.js","prop-types":"../node_modules/prop-types/index.js","react-dom":"../node_modules/react-dom/index.js","invariant":"../node_modules/invariant/browser.js","throttle-debounce":"../node_modules/throttle-debounce/dist/index.esm.js","shallowequal":"../node_modules/shallowequal/index.js"}],"../node_modules/lodash.isequal/index.js":[function(require,module,exports) {
+},{"element-resize-detector":"../node_modules/element-resize-detector/src/element-resize-detector.js","react":"../node_modules/react/index.js","prop-types":"../node_modules/prop-types/index.js","react-dom":"../node_modules/react-dom/index.js","invariant":"../node_modules/invariant/browser.js","throttle-debounce":"../node_modules/throttle-debounce/dist/index.esm.js","shallowequal":"../node_modules/shallowequal/index.js"}],"../src/ConnectionContext/index.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Consumer = exports.Provider = exports.ConnectionContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ConnectionContext = (0, _react.createContext)({});
+exports.ConnectionContext = ConnectionContext;
+var Provider = (0, _react.memo)(function (_ref) {
+  var onConnect = _ref.onConnect,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      sourceId = _useState2[0],
+      setSourceId = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({
+    x: 0,
+    y: 0
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      position = _useState4[0],
+      setPosition = _useState4[1];
+
+  var connectionContext = {
+    sourceId: sourceId,
+    setSourceId: setSourceId,
+    position: position,
+    setPosition: setPosition,
+    onConnect: onConnect
+  };
+  return _react.default.createElement(ConnectionContext.Provider, {
+    value: connectionContext
+  }, children);
+});
+exports.Provider = Provider;
+Provider.displayName = 'ConnectionProvider';
+Provider.whyDidYouRender = false;
+var Consumer = ConnectionContext.Consumer;
+exports.Consumer = Consumer;
+},{"react":"../node_modules/react/index.js"}],"../node_modules/lodash.isequal/index.js":[function(require,module,exports) {
 var global = arguments[3];
 
 /**
@@ -37708,7 +37763,7 @@ exports.default = _default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.reducer = exports.initialState = exports.SET_CONNECTION_POS = exports.SET_CONNECTING = exports.REMOVE_NODES = exports.SET_SELECTED_ELEMENTS = exports.SET_NODES_SELECTION = exports.SET_SELECTION = exports.UPDATE_SELECTION = exports.ZOOM_OUT = exports.ZOOM_IN = exports.FIT_VIEW = exports.INIT_D3 = exports.UPDATE_SIZE = exports.UPDATE_TRANSFORM = exports.UPDATE_NODE_POS = exports.UPDATE_NODE_DATA = exports.SET_NODES = exports.SET_EDGES = void 0;
+exports.reducer = exports.initialState = exports.REMOVE_NODES = exports.SET_SELECTED_ELEMENTS = exports.SET_NODES_SELECTION = exports.SET_SELECTION = exports.UPDATE_SELECTION = exports.ZOOM_OUT = exports.ZOOM_IN = exports.FIT_VIEW = exports.INIT_D3 = exports.UPDATE_SIZE = exports.UPDATE_TRANSFORM = exports.UPDATE_NODE_POS = exports.UPDATE_NODE_DATA = exports.SET_NODES = exports.SET_EDGES = void 0;
 
 var _d3Zoom = require("d3-zoom");
 
@@ -37762,10 +37817,6 @@ var SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
 exports.SET_SELECTED_ELEMENTS = SET_SELECTED_ELEMENTS;
 var REMOVE_NODES = 'REMOVE_NODES';
 exports.REMOVE_NODES = REMOVE_NODES;
-var SET_CONNECTING = 'SET_CONNECTING';
-exports.SET_CONNECTING = SET_CONNECTING;
-var SET_CONNECTION_POS = 'SET_CONNECTION_POS';
-exports.SET_CONNECTION_POS = SET_CONNECTION_POS;
 var initialState = {
   width: 0,
   height: 0,
@@ -37784,12 +37835,7 @@ var initialState = {
   d3Initialised: false,
   nodesSelectionActive: false,
   selectionActive: false,
-  selection: {},
+  selection: {}
-  connectionSourceId: null,
-  connectionPosition: {
-    x: 0,
-    y: 0
-  }
 };
 exports.initialState = initialState;
 
@@ -37907,24 +37953,12 @@ var reducer = function reducer(state, action) {
         });
       }
 
-    case SET_CONNECTING:
-      {
-        if (!action.payload.connectionPosition) {
-          return _objectSpread({}, state, {
-            connectionSourceId: action.payload.connectionSourceId
-          });
-        }
-
-        return _objectSpread({}, state, {}, action.payload);
-      }
-
     case SET_NODES:
     case SET_EDGES:
     case UPDATE_TRANSFORM:
     case INIT_D3:
     case UPDATE_SIZE:
     case SET_SELECTION:
-    case SET_CONNECTION_POS:
       return _objectSpread({}, state, {}, action.payload);
 
     default:
@@ -37939,7 +37973,7 @@ exports.reducer = reducer;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setConnectionPos = exports.setConnecting = exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
+exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
 
 var _index = require("./index");
 
@@ -38114,37 +38148,6 @@ var updateSelection = function updateSelection(selection) {
 };
 
 exports.updateSelection = updateSelection;
-
-var setConnecting = function setConnecting(_ref4) {
-  var connectionSourceId = _ref4.connectionSourceId,
-      _ref4$connectionPosit = _ref4.connectionPosition,
-      connectionPosition = _ref4$connectionPosit === void 0 ? false : _ref4$connectionPosit;
-  return {
-    type: _index.SET_CONNECTING,
-    payload: {
-      connectionSourceId: connectionSourceId,
-      connectionPosition: connectionPosition
-    }
-  };
-};
-
-exports.setConnecting = setConnecting;
-
-var setConnectionPos = function setConnectionPos(_ref5) {
-  var x = _ref5.x,
-      y = _ref5.y;
-  return {
-    type: _index.SET_CONNECTION_POS,
-    payload: {
-      connectionPosition: {
-        x: x,
-        y: y
-      }
-    }
-  };
-};
-
-exports.setConnectionPos = setConnectionPos;
 },{"./index":"../src/state/index.js"}],"../src/GraphContext/index.js":[function(require,module,exports) {
 "use strict";
 
@@ -38405,8 +38408,8 @@ var _default = function _default(props) {
   var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
   var sourceX = sourceNode.__rg.position.x + sourceHandleX;
   var sourceY = sourceNode.__rg.position.y + sourceHandleY;
-  var targetX = props.connectionPosition.x * (1 / props.transform[2]) - props.transform[0] * (1 / props.transform[2]);
+  var targetX = props.connectionPositionX * (1 / props.transform[2]) - props.transform[0] * (1 / props.transform[2]);
-  var targetY = props.connectionPosition.y * (1 / props.transform[2]) - props.transform[1] * (1 / props.transform[2]);
+  var targetY = props.connectionPositionY * (1 / props.transform[2]) - props.transform[1] * (1 / props.transform[2]);
   var dAttr = '';
 
   if (props.connectionLineType === 'bezier') {
@@ -38437,6 +38440,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _GraphContext = require("../GraphContext");
 
+var _ConnectionContext = require("../ConnectionContext");
+
 var _ConnectionLine = _interopRequireDefault(require("../ConnectionLine"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38507,6 +38512,11 @@ function renderEdge(e, props, graphContext) {
 
 var EdgeRenderer = (0, _react.memo)(function (props) {
   var graphContext = (0, _react.useContext)(_GraphContext.GraphContext);
+
+  var _useContext = (0, _react.useContext)(_ConnectionContext.ConnectionContext),
+      position = _useContext.position,
+      connectionSourceId = _useContext.sourceId;
+
   var width = props.width,
       height = props.height,
       connectionLineStyle = props.connectionLineStyle,
@@ -38519,9 +38529,7 @@ var EdgeRenderer = (0, _react.memo)(function (props) {
   var _graphContext$state = graphContext.state,
       transform = _graphContext$state.transform,
       edges = _graphContext$state.edges,
-      nodes = _graphContext$state.nodes,
+      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,
@@ -38534,7 +38542,8 @@ var EdgeRenderer = (0, _react.memo)(function (props) {
   }), connectionSourceId && _react.default.createElement(_ConnectionLine.default, {
     nodes: nodes,
     connectionSourceId: connectionSourceId,
-    connectionPosition: connectionPosition,
+    connectionPositionX: position.x,
+    connectionPositionY: position.y,
     transform: transform,
     connectionLineStyle: connectionLineStyle,
     connectionLineType: connectionLineType
@@ -38542,7 +38551,7 @@ var EdgeRenderer = (0, _react.memo)(function (props) {
 });
 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) {
+},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectionContext":"../src/ConnectionContext/index.js","../ConnectionLine":"../src/ConnectionLine/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41077,6 +41086,8 @@ var _d3Selection = require("d3-selection");
 
 var _reactSizeme = _interopRequireDefault(require("react-sizeme"));
 
+var _ConnectionContext = require("../ConnectionContext");
+
 var _GraphContext = require("../GraphContext");
 
 var _NodeRenderer = _interopRequireDefault(require("../NodeRenderer"));
@@ -41159,6 +41170,8 @@ var GraphView = (0, _react.memo)(function (props) {
   });
   return _react.default.createElement("div", {
     className: "react-graph__renderer"
+  }, _react.default.createElement(_ConnectionContext.Provider, {
+    onConnect: props.onConnect
   }, _react.default.createElement(_NodeRenderer.default, {
     nodeTypes: props.nodeTypes,
     onElementClick: props.onElementClick,
@@ -41170,7 +41183,7 @@ var GraphView = (0, _react.memo)(function (props) {
     onElementClick: props.onElementClick,
     connectionLineType: props.connectionLineType,
     connectionLineStyle: props.connectionLineStyle
-  }), shiftPressed && _react.default.createElement(_UserSelection.default, null), state.nodesSelectionActive && _react.default.createElement(_NodesSelection.default, null), _react.default.createElement("div", {
+  })), shiftPressed && _react.default.createElement(_UserSelection.default, null), state.nodesSelectionActive && _react.default.createElement(_NodesSelection.default, null), _react.default.createElement("div", {
     className: "react-graph__zoompane",
     onClick: function onClick() {
       return dispatch((0, _actions.setNodesSelection)({
@@ -41186,7 +41199,7 @@ var _default = _reactSizeme.default.withSize({
 })(GraphView);
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","d3-zoom":"../node_modules/d3-zoom/src/index.js","d3-selection":"../node_modules/d3-selection/src/index.js","react-sizeme":"../node_modules/react-sizeme/dist/react-sizeme.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer":"../src/NodeRenderer/index.js","../EdgeRenderer":"../src/EdgeRenderer/index.js","../UserSelection":"../src/UserSelection/index.js","../NodesSelection":"../src/NodesSelection/index.js","../state/actions":"../src/state/actions.js","../hooks":"../src/hooks.js"}],"../src/GlobalKeyHandler/index.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","d3-zoom":"../node_modules/d3-zoom/src/index.js","d3-selection":"../node_modules/d3-selection/src/index.js","react-sizeme":"../node_modules/react-sizeme/dist/react-sizeme.js","../ConnectionContext":"../src/ConnectionContext/index.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer":"../src/NodeRenderer/index.js","../EdgeRenderer":"../src/EdgeRenderer/index.js","../UserSelection":"../src/UserSelection/index.js","../NodesSelection":"../src/NodesSelection/index.js","../state/actions":"../src/state/actions.js","../hooks":"../src/hooks.js"}],"../src/GlobalKeyHandler/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41249,8 +41262,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _actions = require("../../state/actions");
-
 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; } }
@@ -41263,24 +41274,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _onMouseDown(evt, _ref) {
   var nodeId = _ref.nodeId,
-      dispatch = _ref.dispatch,
+      setSourceId = _ref.setSourceId,
+      setPosition = _ref.setPosition,
       onConnect = _ref.onConnect,
       isTarget = _ref.isTarget;
   var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
-  var connectionPosition = {
+  setPosition({
     x: evt.clientX - containerBounds.x,
     y: evt.clientY - containerBounds.y
-  };
+  });
-  dispatch((0, _actions.setConnecting)({
+  setSourceId(nodeId);
-    connectionPosition: connectionPosition,
-    connectionSourceId: nodeId
-  }));
 
   function onMouseMove(evt) {
-    dispatch((0, _actions.setConnectionPos)({
+    setPosition({
       x: evt.clientX - containerBounds.x,
       y: evt.clientY - containerBounds.y
-    }));
+    });
   }
 
   function onMouseUp(evt) {
@@ -41302,9 +41311,7 @@ function _onMouseDown(evt, _ref) {
       }
     }
 
-    dispatch((0, _actions.setConnecting)({
+    setSourceId(null);
-      connectionSourceId: false
-    }));
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
   }
@@ -41318,10 +41325,11 @@ var BaseHandle = (0, _react.memo)(function (_ref2) {
       target = _ref2.target,
       nodeId = _ref2.nodeId,
       onConnect = _ref2.onConnect,
-      dispatch = _ref2.dispatch,
+      setSourceId = _ref2.setSourceId,
+      setPosition = _ref2.setPosition,
       _ref2$className = _ref2.className,
       className = _ref2$className === void 0 ? null : _ref2$className,
-      rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "dispatch", "className"]);
+      rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "setSourceId", "setPosition", "className"]);
 
   var handleClasses = (0, _classnames.default)('react-graph__handle', className, {
     source: source,
@@ -41333,7 +41341,8 @@ var BaseHandle = (0, _react.memo)(function (_ref2) {
     onMouseDown: function onMouseDown(evt) {
       return _onMouseDown(evt, {
         nodeId: nodeId,
-        dispatch: dispatch,
+        setSourceId: setSourceId,
+        setPosition: setPosition,
         onConnect: onConnect,
         isTarget: target
       });
@@ -41344,7 +41353,7 @@ BaseHandle.displayName = 'BaseHandle';
 BaseHandle.whyDidYouRender = false;
 var _default = BaseHandle;
 exports.default = _default;
-},{"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) {
+},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js"}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41374,7 +41383,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
 
-var _GraphContext = require("../../GraphContext");
+var _ConnectionContext = require("../../ConnectionContext");
 
 var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
 
@@ -41387,14 +41396,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var TargetHandle = (0, _react.memo)(function (props) {
   var nodeId = (0, _react.useContext)(_NodeIdContext.default);
 
-  var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
+  var _useContext = (0, _react.useContext)(_ConnectionContext.ConnectionContext),
-      dispatch = _useContext.dispatch,
+      setPosition = _useContext.setPosition,
+      setSourceId = _useContext.setSourceId,
       onConnect = _useContext.onConnect;
 
   return _react.default.createElement(_BaseHandle.default, _extends({
     target: true,
     nodeId: nodeId,
-    dispatch: dispatch,
+    setPosition: setPosition,
+    setSourceId: setSourceId,
     onConnect: onConnect
   }, props));
 });
@@ -41402,7 +41413,7 @@ TargetHandle.displayName = 'TargetHandle';
 TargetHandle.whyDidYouRender = false;
 var _default = TargetHandle;
 exports.default = _default;
-},{"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) {
+},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../../ConnectionContext":"../src/ConnectionContext/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41416,7 +41427,7 @@ var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
 
 var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
 
-var _GraphContext = require("../../GraphContext");
+var _ConnectionContext = require("../../ConnectionContext");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41427,20 +41438,22 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var _default = (0, _react.memo)(function (props) {
   var nodeId = (0, _react.useContext)(_NodeIdContext.default);
 
-  var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
+  var _useContext = (0, _react.useContext)(_ConnectionContext.ConnectionContext),
-      dispatch = _useContext.dispatch,
+      setPosition = _useContext.setPosition,
+      setSourceId = _useContext.setSourceId,
       onConnect = _useContext.onConnect;
 
   return _react.default.createElement(_BaseHandle.default, _extends({
     source: true,
     nodeId: nodeId,
-    dispatch: dispatch,
+    setPosition: setPosition,
+    setSourceId: setSourceId,
     onConnect: onConnect
   }, props));
 });
 
 exports.default = _default;
-},{"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) {
+},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js","../../ConnectionContext":"../src/ConnectionContext/index.js"}],"../src/NodeRenderer/NodeTypes/DefaultNode.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41791,7 +41804,7 @@ var _default = function _default(NodeComponent) {
     })))));
   });
   WrappedComp.displayName = 'Wrapped Node';
-  WrappedComp.whyDidYouRender = true;
+  WrappedComp.whyDidYouRender = false;
   return WrappedComp;
 };
 
@@ -42162,8 +42175,7 @@ function (_PureComponent) {
         style: style,
         className: "react-graph"
       }, _react.default.createElement(_GraphContext.Provider, {
-        elements: elements,
+        elements: elements
-        onConnect: onConnect
       }, _react.default.createElement(_GraphView.default, {
         onLoad: onLoad,
         onMove: onMove,
@@ -42173,7 +42185,8 @@ function (_PureComponent) {
         nodeTypes: this.nodeTypes,
         edgeTypes: this.edgeTypes,
         connectionLineType: connectionLineType,
-        connectionLineStyle: connectionLineStyle
+        connectionLineStyle: connectionLineStyle,
+        onConnect: onConnect
       }), _react.default.createElement(_GlobalKeyHandler.default, {
         onElementsRemove: onElementsRemove
       }), children));
@@ -42663,7 +42676,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "65016" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55193" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

example/build/index.js

@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "65016" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55193" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/ConnectionContext/index.js

@@ -0,0 +1,27 @@
+import React, { createContext, useState, memo } from 'react';
+
+export const ConnectionContext = createContext({});
+
+export const Provider = memo(({ onConnect, children }) => {
+  const [sourceId, setSourceId] = useState(null);
+  const [position, setPosition] = useState({ x:0, y: 0 });
+
+  const connectionContext = {
+    sourceId,
+    setSourceId,
+    position,
+    setPosition,
+    onConnect
+  };
+
+  return (
+    <ConnectionContext.Provider value={connectionContext}>
+      {children}
+    </ConnectionContext.Provider>
+  );
+});
+
+Provider.displayName = 'ConnectionProvider';
+Provider.whyDidYouRender = false;
+
+export const { Consumer } = ConnectionContext;

src/ConnectionLine/index.js

@@ -7,7 +7,6 @@ export default (props) => {
     setSourceNode(props.nodes.find(n => n.id === props.connectionSourceId));
   }, []);
 
-
   if (!sourceNode) {
     return null;
   }
@@ -21,8 +20,8 @@ export default (props) => {
   const sourceX = sourceNode.__rg.position.x + sourceHandleX;
   const sourceY = sourceNode.__rg.position.y + sourceHandleY;
 
-  const targetX = (props.connectionPosition.x * (1 / props.transform[2])) - (props.transform[0] * (1 / props.transform[2]));
+  const targetX = (props.connectionPositionX * (1 / props.transform[2])) - (props.transform[0] * (1 / props.transform[2]));
-  const targetY = (props.connectionPosition.y * (1 / props.transform[2])) - (props.transform[1] * (1 / props.transform[2]));
+  const targetY = (props.connectionPositionY * (1 / props.transform[2])) - (props.transform[1] * (1 / props.transform[2]));
 
   let dAttr = '';
 

src/EdgeRenderer/index.js

@@ -1,9 +1,9 @@
 import React, { memo, useContext } from 'react';
 
 import { GraphContext } from '../GraphContext';
+import { ConnectionContext } from '../ConnectionContext';
 import ConnectionLine from '../ConnectionLine';
 
-
 function getEdgePositions(sourceNode, targetNode) {
   const hasSourceHandle = !!sourceNode.__rg.handleBounds.source;
   const hasTargetHandle = !!targetNode.__rg.handleBounds.target;
@@ -73,6 +73,7 @@ function renderEdge(e, props, graphContext) {
 
 const EdgeRenderer = memo((props) => {
   const graphContext = useContext(GraphContext);
+  const { position, sourceId : connectionSourceId } = useContext(ConnectionContext);
   const {
     width, height, connectionLineStyle, connectionLineType
   } = props;
@@ -81,7 +82,7 @@ const EdgeRenderer = memo((props) => {
     return null;
   }
 
-  const { transform, edges, nodes, connectionSourceId, connectionPosition } = graphContext.state;
+  const { transform, edges, nodes } = graphContext.state;
   const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
 
   return (
@@ -96,7 +97,8 @@ const EdgeRenderer = memo((props) => {
           <ConnectionLine
             nodes={nodes}
             connectionSourceId={connectionSourceId}
-            connectionPosition={connectionPosition}
+            connectionPositionX={position.x}
+            connectionPositionY={position.y}
             transform={transform}
             connectionLineStyle={connectionLineStyle}
             connectionLineType={connectionLineType}

src/GraphView/index.js

@@ -3,6 +3,7 @@ import * as d3Zoom from 'd3-zoom';
 import { select, event } from 'd3-selection';
 import ReactSizeMe from 'react-sizeme';
 
+import { Provider } from '../ConnectionContext';
 import { GraphContext } from '../GraphContext';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
@@ -10,7 +11,7 @@ import UserSelection from '../UserSelection';
 import NodesSelection from '../NodesSelection';
 import {
   updateTransform, updateSize, initD3, fitView,
-  zoomIn, zoomOut, setNodesSelection, setConnectionPos
+  zoomIn, zoomOut, setNodesSelection
 } from '../state/actions';
 import { useKeyPress } from '../hooks';
 
@@ -79,19 +80,21 @@ const GraphView = memo((props) => {
 
   return (
     <div className="react-graph__renderer">
-      <NodeRenderer
+      <Provider onConnect={props.onConnect}>
-        nodeTypes={props.nodeTypes}
+        <NodeRenderer
-        onElementClick={props.onElementClick}
+          nodeTypes={props.nodeTypes}
-        onNodeDragStop={props.onNodeDragStop}
+          onElementClick={props.onElementClick}
-      />
+          onNodeDragStop={props.onNodeDragStop}
-      <EdgeRenderer
+        />
-        width={state.width}
+        <EdgeRenderer
-        height={state.height}
+          width={state.width}
-        edgeTypes={props.edgeTypes}
+          height={state.height}
-        onElementClick={props.onElementClick}
+          edgeTypes={props.edgeTypes}
-        connectionLineType={props.connectionLineType}
+          onElementClick={props.onElementClick}
-        connectionLineStyle={props.connectionLineStyle}
+          connectionLineType={props.connectionLineType}
-      />
+          connectionLineStyle={props.connectionLineStyle}
+        />
+      </Provider>
       {shiftPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}
       <div

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -1,15 +1,20 @@
 import React, { memo } from 'react';
 import cx from 'classnames';
 
-import { setConnecting, setConnectionPos } from '../../state/actions';
+function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget }) {
-
-function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
   const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
-  const connectionPosition = { x: evt.clientX - containerBounds.x, y: evt.clientY - containerBounds.y };
+
-  dispatch(setConnecting({ connectionPosition, connectionSourceId: nodeId }))
+  setPosition({
+    x: evt.clientX - containerBounds.x,
+    y: evt.clientY - containerBounds.y,
+  });
+  setSourceId(nodeId);
 
   function onMouseMove(evt) {
-    dispatch(setConnectionPos({ x: evt.clientX - containerBounds.x, y: evt.clientY - containerBounds.y }));
+    setPosition({
+      x: evt.clientX - containerBounds.x,
+      y: evt.clientY - containerBounds.y,
+    });
   }
 
   function onMouseUp(evt) {
@@ -25,7 +30,7 @@ function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
       }
     }
 
-    dispatch(setConnecting({ connectionSourceId: false }));
+    setSourceId(null);
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
   }
@@ -34,7 +39,7 @@ function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
   document.addEventListener('mouseup', onMouseUp)
 }
 
-const BaseHandle = memo(({ source, target, nodeId, onConnect, dispatch, className = null, ...rest }) => {
+const BaseHandle = memo(({ source, target, nodeId, onConnect, setSourceId, setPosition, className = null, ...rest }) => {
   const handleClasses = cx(
     'react-graph__handle',
     className,
@@ -45,7 +50,7 @@ const BaseHandle = memo(({ source, target, nodeId, onConnect, dispatch, classNam
     <div
       data-nodeid={nodeId}
       className={handleClasses}
-      onMouseDown={evt => onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget: target })}
+      onMouseDown={evt => onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget: target })}
       {...rest}
     />
   );

src/NodeRenderer/HandleTypes/SourceHandle.js

@@ -2,17 +2,18 @@ import React, { memo, useContext } from 'react';
 
 import BaseHandle from './BaseHandle';
 import NodeIdContext from '../NodeIdContext'
-import { GraphContext } from '../../GraphContext';
+import { ConnectionContext } from '../../ConnectionContext';
 
 export default memo((props) => {
   const nodeId = useContext(NodeIdContext);
-  const { dispatch, onConnect } = useContext(GraphContext);
+  const { setPosition, setSourceId, onConnect } = useContext(ConnectionContext);
 
   return (
     <BaseHandle
       source
       nodeId={nodeId}
-      dispatch={dispatch}
+      setPosition={setPosition}
+      setSourceId={setSourceId}
       onConnect={onConnect}
       {...props}
     />

src/NodeRenderer/HandleTypes/TargetHandle.js

@@ -1,18 +1,19 @@
 import React, { memo, useContext } from 'react';
 
 import BaseHandle from './BaseHandle';
-import { GraphContext } from '../../GraphContext';
+import { ConnectionContext } from '../../ConnectionContext';
 import NodeIdContext from '../NodeIdContext'
 
 const TargetHandle = memo((props) => {
   const nodeId = useContext(NodeIdContext);
-  const { dispatch, onConnect } = useContext(GraphContext);
+  const { setPosition, setSourceId, onConnect } = useContext(ConnectionContext);
 
   return (
     <BaseHandle
       target
       nodeId={nodeId}
-      dispatch={dispatch}
+      setPosition={setPosition}
+      setSourceId={setSourceId}
       onConnect={onConnect}
       {...props}
     />
@@ -23,4 +24,3 @@ TargetHandle.displayName = 'TargetHandle';
 TargetHandle.whyDidYouRender = false;
 
 export default TargetHandle;
-

src/ReactGraph/index.js

@@ -37,7 +37,7 @@ class ReactGraph extends PureComponent {
 
     return (
       <div style={style} className="react-graph">
-        <Provider elements={elements} onConnect={onConnect}>
+        <Provider elements={elements}>
           <GraphView
             onLoad={onLoad}
             onMove={onMove}
@@ -48,6 +48,7 @@ class ReactGraph extends PureComponent {
             edgeTypes={this.edgeTypes}
             connectionLineType={connectionLineType}
             connectionLineStyle={connectionLineStyle}
+            onConnect={onConnect}
           />
           <GlobalKeyHandler
             onElementsRemove={onElementsRemove}

src/state/actions.js

@@ -2,8 +2,7 @@ import {
   UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
   UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
   UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION,
-  SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT,
+  SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT
-  SET_CONNECTING, SET_CONNECTION_POS
 } from './index';
 
 export const updateTransform = (transform) => {
@@ -99,15 +98,4 @@ export const updateSelection = (selection) => {
       selection
     }
   };
-};
+};
-
-export const setConnecting = ({ connectionSourceId, connectionPosition = false}) => {
-  return { type: SET_CONNECTING, payload: { connectionSourceId, connectionPosition }};
-};
-
-export const setConnectionPos = ({ x, y }) => {
-  return {
-    type: SET_CONNECTION_POS,
-    payload: { connectionPosition: { x, y } }
-  };
-};

src/state/index.js

@@ -18,8 +18,6 @@ export const SET_SELECTION = 'SET_SELECTION';
 export const SET_NODES_SELECTION = 'SET_NODES_SELECTION';
 export const SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
 export const REMOVE_NODES = 'REMOVE_NODES';
-export const SET_CONNECTING = 'SET_CONNECTING';
-export const SET_CONNECTION_POS = 'SET_CONNECTION_POS';
 
 export const initialState = {
   width: 0,
@@ -36,10 +34,7 @@ export const initialState = {
 
   nodesSelectionActive: false,
   selectionActive: false,
-  selection: {},
+  selection: {}
-
-  connectionSourceId: null,
-  connectionPosition: { x: 0, y: 0 }
 };
 
 export const reducer = (state, action) => {
@@ -134,20 +129,12 @@ export const reducer = (state, action) => {
 
       return { ...state, nodes: nextNodes, edges: nextEdges };
     }
-    case SET_CONNECTING: {
-      if (!action.payload.connectionPosition) {
-        return { ...state, connectionSourceId: action.payload.connectionSourceId };
-      }
-
-      return { ...state, ...action.payload };
-    }
     case SET_NODES:
     case SET_EDGES:
     case UPDATE_TRANSFORM:
     case INIT_D3:
     case UPDATE_SIZE:
     case SET_SELECTION:
-    case SET_CONNECTION_POS:
       return { ...state, ...action.payload };
     default:
       return state;