feat(renderer): add connection line

dist/ReactGraph.js

@@ -29926,7 +29926,6 @@
     nodesSelectionActive: false,
     selectionActive: false,
     selection: {},
-    isConnecting: false,
     connectionSourceId: null,
     connectionPosition: {
       x: 0,
@@ -30032,6 +30031,17 @@
           });
         }
 
+      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:
@@ -30039,7 +30049,6 @@
       case UPDATE_SIZE:
       case SET_SELECTION:
       case SET_SELECTED_ELEMENTS:
-      case SET_CONNECTING:
       case SET_CONNECTION_POS:
         return _objectSpread2({}, state, {}, action.payload);
 
@@ -30167,10 +30176,36 @@
       }
     };
   };
+  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 children = props.children;
+    var children = props.children,
+        onConnect = props.onConnect;
 
     var _useReducer = React.useReducer(reducer, initialState),
         _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -30204,6 +30239,7 @@
     });
     var graphContext = {
       state: state,
+      onConnect: onConnect,
       dispatch: dispatch
     };
     return React__default.createElement(GraphContext.Provider, {
@@ -30319,7 +30355,7 @@
   }());
   });
 
-  var ConnectorEdge = (function (props) {
+  var ConnectionLine = (function (props) {
     var _useState = React.useState(null),
         _useState2 = _slicedToArray(_useState, 2),
         sourceNode = _useState2[0],
@@ -30335,8 +30371,8 @@
       return null;
     }
 
-    var style = props.style || {};
+    var style = props.connectionLineStyle || {};
-    var className = classnames('react-graph__edge', 'connector', props.className);
+    var className = classnames('react-graph__edge', 'connection', props.className);
     var sourceHandle = sourceNode.__rg.handleBounds.source;
     var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
     var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
@@ -30344,13 +30380,21 @@
     var sourceY = sourceNode.__rg.position.y + sourceHandleY;
     var targetX = props.connectionPosition.x * (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 yOffset = Math.abs(targetY - sourceY) / 2;
+    var dAttr = '';
-    var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+
-    var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
+    if (props.connectionLineType === 'bezier') {
-    return React__default.createElement("path", _extends({
+      var yOffset = Math.abs(targetY - sourceY) / 2;
-      className: className,
+      var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+      dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
+    } else {
+      dAttr = "M".concat(sourceX, ",").concat(sourceY, " ").concat(targetX, ",").concat(targetY);
+    }
+
+    return React__default.createElement("g", {
+      className: className
+    }, React__default.createElement("path", _extends({
       d: dAttr
-    }, style));
+    }, style)));
   });
 
   var EdgeRenderer =
@@ -30399,7 +30443,9 @@
         var _this$props = this.props,
             width = _this$props.width,
             height = _this$props.height,
-            onElementClick = _this$props.onElementClick;
+            onElementClick = _this$props.onElementClick,
+            connectionLineStyle = _this$props.connectionLineStyle,
+            connectionLineType = _this$props.connectionLineType;
 
         if (!width) {
           return null;
@@ -30415,11 +30461,13 @@
             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.isConnecting && React__default.createElement(ConnectorEdge, {
+          }), state.connectionSourceId && React__default.createElement(ConnectionLine, {
             nodes: state.nodes,
             connectionSourceId: state.connectionSourceId,
             connectionPosition: state.connectionPosition,
-            transform: state.transform
+            transform: state.transform,
+            connectionLineStyle: connectionLineStyle,
+            connectionLineType: connectionLineType
           })));
         });
       }
@@ -32926,13 +32974,14 @@
     }, React__default.createElement(NodeRenderer, {
       nodeTypes: props.nodeTypes,
       onElementClick: props.onElementClick,
-      onNodeDragStop: props.onNodeDragStop,
+      onNodeDragStop: props.onNodeDragStop
-      onConnect: props.onConnect
     }), React__default.createElement(EdgeRenderer, {
       width: state.width,
       height: state.height,
       edgeTypes: props.edgeTypes,
-      onElementClick: props.onElementClick
+      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", {
       className: "react-graph__zoompane",
       onClick: function onClick() {
@@ -32975,11 +33024,43 @@
   var Provider$1 = NodeIdContext.Provider;
   var Consumer$1 = NodeIdContext.Consumer;
 
-  function _onDragStart(evt, nodeId, dispatch) {
+  function _onMouseDown(evt, nodeId, dispatch, onConnect) {
-    evt.dataTransfer.setData('text/plain', nodeId); // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
+    var connectionPosition = {
-  }
+      x: evt.clientX,
+      y: evt.clientY
+    };
+    dispatch(setConnecting({
+      connectionPosition: connectionPosition,
+      connectionSourceId: nodeId
+    }));
 
-  function onDragStop(evt, dispatch) {// dispatch(setConnecting({ isConnecting: false }));
+    function onMouseMove(evt) {
+      dispatch(setConnectionPos({
+        x: evt.clientX,
+        y: evt.clientY
+      }));
+    }
+
+    function onMouseUp(evt) {
+      var elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
+
+      if (elementBelow && elementBelow.classList.contains('target')) {
+        var targetId = elementBelow.getAttribute('data-nodeid');
+        onConnect({
+          source: nodeId,
+          target: targetId
+        });
+      }
+
+      dispatch(setConnecting({
+        connectionSourceId: false
+      }));
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    }
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
   }
 
   var BaseHandle = React.memo(function (_ref) {
@@ -32992,7 +33073,8 @@
     var nodeId = React.useContext(NodeIdContext);
 
     var _useContext = React.useContext(GraphContext),
-        dispatch = _useContext.dispatch;
+        dispatch = _useContext.dispatch,
+        onConnect = _useContext.onConnect;
 
     var handleClasses = classnames('react-graph__handle', className, {
       source: source,
@@ -33001,19 +33083,17 @@
 
     if (target) {
       return React__default.createElement("div", _extends({
+        "data-nodeid": nodeId,
         className: handleClasses
       }, rest));
     }
 
     return React__default.createElement("div", _extends({
-      draggable: true,
+      "data-nodeid": nodeId,
-      onDragStart: function onDragStart(evt) {
+      className: handleClasses,
-        return _onDragStart(evt, nodeId);
+      onMouseDown: function onMouseDown(evt) {
-      },
+        return _onMouseDown(evt, nodeId, dispatch, onConnect);
-      onDragEnd: function onDragEnd(evt) {
+      }
-        return onDragStop();
-      },
-      className: handleClasses
     }, rest));
   });
 
@@ -33077,7 +33157,7 @@
   };
 
   var isHandle = function isHandle(e) {
-    return e.target.className && e.target.className.includes('source');
+    return e.target.className && e.target.className.includes && e.target.className.includes('source');
   };
 
   var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {
@@ -33124,7 +33204,6 @@
           type = props.type,
           id = props.id,
           __rg = props.__rg,
-          onConnect = props.onConnect,
           onNodeDragStop = props.onNodeDragStop;
       var position = __rg.position;
 
@@ -33208,15 +33287,6 @@
         });
       };
 
-      var onDrop = function onDrop(evt) {
-        evt.preventDefault();
-        var source = evt.dataTransfer.getData('text/plain');
-        onConnect({
-          source: source,
-          target: id
-        });
-      };
-
       return React__default.createElement(reactDraggable.DraggableCore, {
         grid: [1, 1],
         onStart: onStart,
@@ -33224,7 +33294,6 @@
         onStop: onStop,
         scale: k
       }, React__default.createElement("div", {
-        onDrop: onDrop,
         onDragOver: onDragOver,
         className: nodeClasses,
         ref: nodeElement,
@@ -33382,7 +33451,7 @@
     }
   }
 
-  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.connector {\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    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  }";
+  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    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);
 
   var ReactGraph =
@@ -33414,7 +33483,9 @@
             elements = _this$props.elements,
             onElementsRemove = _this$props.onElementsRemove,
             onConnect = _this$props.onConnect,
-            onNodeDragStop = _this$props.onNodeDragStop;
+            onNodeDragStop = _this$props.onNodeDragStop,
+            connectionLineType = _this$props.connectionLineType,
+            connectionLineStyle = _this$props.connectionLineStyle;
 
         var _elements$map$reduce = elements.map(parseElements).reduce(separateElements, {}),
             nodes = _elements$map$reduce.nodes,
@@ -33425,16 +33496,18 @@
           className: "react-graph"
         }, React__default.createElement(Provider, {
           nodes: nodes,
-          edges: edges
+          edges: edges,
+          onConnect: onConnect
         }, React__default.createElement(GraphView$1, {
           onLoad: onLoad,
           onMove: onMove,
           onChange: onChange,
           onElementClick: onElementClick,
-          onConnect: onConnect,
           onNodeDragStop: onNodeDragStop,
           nodeTypes: this.nodeTypes,
-          edgeTypes: this.edgeTypes
+          edgeTypes: this.edgeTypes,
+          connectionLineType: connectionLineType,
+          connectionLineStyle: connectionLineStyle
         }), React__default.createElement(GlobalKeyHandler, {
           onElementsRemove: onElementsRemove
         }), children));
@@ -33460,7 +33533,9 @@
     edgeTypes: {
       "default": BezierEdge,
       straight: StraightEdge
-    }
+    },
+    connectionLineType: 'bezier',
+    connectionLineStyle: {}
   };
 
   exports.SourceHandle = SourceHandle;

example/SimpleGraph.js

@@ -43,13 +43,13 @@ class App extends PureComponent {
     this.state = {
       graphLoaded: false,
       elements: [
-        { id: '1', type: 'input', data: { label: 'Tests' }, position: { x: 250, y: 5 } },
+        { id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
-        { id: '2', data: { label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
+        { id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
-        { id: '3', data: { label: 'I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
+        { id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
-        { id: '4', type: 'output', data: { label: 'nody nodes' }, position: { x: 50, y: 300 } },
+        { id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
-        { id: '5', type: 'default', data: { label: 'Another node'}, position: { x: 400, y: 300 } },
+        { id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
-        { id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 425, y: 375 } },
+        { id: '6', type: 'special', onChange, data: { label: '6 no option selected' }, position: { x: 425, y: 375 } },
-        { id: '7', type: 'output', data: { label: 'output' }, position: { x: 250, y: 500 } },
+        { id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
         { source: '1', target: '2', animated: true },
         { source: '2', target: '3' },
         { source: '3', target: '4' },
@@ -113,6 +113,7 @@ class App extends PureComponent {
   }
 
   onConnect(params) {
+    console.log('connect', params);
     this.setState(prevState => ({
       elements: prevState.elements.concat(params)
     }));
@@ -132,6 +133,8 @@ class App extends PureComponent {
         nodeTypes={{
           special: SpecialNode
         }}
+        connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
+        connectionLineType="bezier"
       >
         <button
           type="button"

example/build/example.e31bb0bc.css

@@ -62,7 +62,8 @@
             animation: dashdraw 0.5s linear infinite;
   }
 
-.react-graph__edge.connector {
+.react-graph__edge.connection {
+    stroke: '#ddd';
     pointer-events: none;
   }
 

example/build/example.e31bb0bc.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,oBAAoB;EACpB,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,YAAY;EACZ,eAAe;EACf,mBAAmB;AAcrB;;AAZE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;AAEA;IACE,oBAAoB;EACtB;;AAGF;EACE,MAAM,qBAAqB;AAC7B;;AAFA;EACE,MAAM,qBAAqB;AAC7B;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACV,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,uBAAuB;EACvB,eAAe;EACf,kBAAkB;EAClB,oBAAY;EAAZ,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;AASvB;;AAPE;IACE,6CAA6C;EAC/C;;AAEA;IACE,0BAA0B;EAC5B;;AAGF;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,oCAAoC;AAetC;;AAbE;IACE,SAAS;IACT,SAAS;IACT,SAAS;IACT,6BAA6B;IAC7B,iBAAiB;EACnB;;AAEA;IACE,SAAS;IACT,MAAM;IACN,6BAA6B;EAC/B;;AAGF;EACE,UAAU;EACV,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,MAAM;EACN,OAAO;EACP,0BAA0B;EAC1B,oBAAoB;AAQtB;;AANE;IACE,kBAAkB;IAClB,kCAAkC;IAClC,wCAAwC;IACxC,mBAAmB;EACrB","file":"example.e31bb0bc.css","sourceRoot":"..","sourcesContent":[".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  &.selected {\n    stroke: #555;\n  }\n\n  &.animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n\n  &.connector {\n    pointer-events: none;\n  }\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: grab;\n  user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n\n  &:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n  &.selected > * {\n    box-shadow: 0 0 0 2px #555;\n  }\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  &.source {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0);\n    cursor: crosshair;\n  }\n\n  &.target {\n    left: 50%;\n    top: 0;\n    transform: translate(-50%, 0);\n  }\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  &-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  }\n}"]}
+{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,oBAAoB;EACpB,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,YAAY;EACZ,eAAe;EACf,mBAAmB;AAerB;;AAbE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;AAEA;IACE,cAAc;IACd,oBAAoB;EACtB;;AAGF;EACE,MAAM,qBAAqB;AAC7B;;AAFA;EACE,MAAM,qBAAqB;AAC7B;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACV,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,uBAAuB;EACvB,eAAe;EACf,kBAAkB;EAClB,oBAAY;EAAZ,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;AASvB;;AAPE;IACE,6CAA6C;EAC/C;;AAEA;IACE,0BAA0B;EAC5B;;AAGF;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,oCAAoC;AAetC;;AAbE;IACE,SAAS;IACT,SAAS;IACT,SAAS;IACT,6BAA6B;IAC7B,iBAAiB;EACnB;;AAEA;IACE,SAAS;IACT,MAAM;IACN,6BAA6B;EAC/B;;AAGF;EACE,UAAU;EACV,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,MAAM;EACN,OAAO;EACP,0BAA0B;EAC1B,oBAAoB;AAQtB;;AANE;IACE,kBAAkB;IAClB,kCAAkC;IAClC,wCAAwC;IACxC,mBAAmB;EACrB","file":"example.e31bb0bc.css","sourceRoot":"..","sourcesContent":[".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  &.selected {\n    stroke: #555;\n  }\n\n  &.animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n\n  &.connection {\n    stroke: '#ddd';\n    pointer-events: none;\n  }\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: grab;\n  user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n\n  &:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n  &.selected > * {\n    box-shadow: 0 0 0 2px #555;\n  }\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  &.source {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0);\n    cursor: crosshair;\n  }\n\n  &.target {\n    left: 50%;\n    top: 0;\n    transform: translate(-50%, 0);\n  }\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  &-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  }\n}"]}

example/build/example.e31bb0bc.js

@@ -37768,7 +37768,6 @@ var initialState = {
   nodesSelectionActive: false,
   selectionActive: false,
   selection: {},
-  isConnecting: false,
   connectionSourceId: null,
   connectionPosition: {
     x: 0,
@@ -37878,6 +37877,17 @@ 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:
@@ -37885,7 +37895,6 @@ var reducer = function reducer(state, action) {
     case UPDATE_SIZE:
     case SET_SELECTION:
     case SET_SELECTED_ELEMENTS:
-    case SET_CONNECTING:
     case SET_CONNECTION_POS:
       return _objectSpread({}, state, {}, action.payload);
 
@@ -38079,13 +38088,14 @@ var updateSelection = function updateSelection(selection) {
 exports.updateSelection = updateSelection;
 
 var setConnecting = function setConnecting(_ref4) {
-  var isConnecting = _ref4.isConnecting,
+  var connectionSourceId = _ref4.connectionSourceId,
-      connectionSourceId = _ref4.connectionSourceId;
+      _ref4$connectionPosit = _ref4.connectionPosition,
+      connectionPosition = _ref4$connectionPosit === void 0 ? false : _ref4$connectionPosit;
   return {
     type: _index.SET_CONNECTING,
     payload: {
-      isConnecting: isConnecting,
+      connectionSourceId: connectionSourceId,
-      connectionSourceId: connectionSourceId
+      connectionPosition: connectionPosition
     }
   };
 };
@@ -38147,7 +38157,8 @@ var GraphContext = (0, _react.createContext)({});
 exports.GraphContext = GraphContext;
 
 var Provider = function Provider(props) {
-  var children = props.children;
+  var children = props.children,
+      onConnect = props.onConnect;
 
   var _useReducer = (0, _react.useReducer)(_state.reducer, _state.initialState),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -38181,6 +38192,7 @@ var Provider = function Provider(props) {
   });
   var graphContext = {
     state: state,
+    onConnect: onConnect,
     dispatch: dispatch
   };
   return _react.default.createElement(GraphContext.Provider, {
@@ -38340,7 +38352,7 @@ var define;
 	}
 }());
 
-},{}],"../src/ConnectorEdge/index.js":[function(require,module,exports) {
+},{}],"../src/ConnectionLine/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -38382,8 +38394,8 @@ var _default = function _default(props) {
     return null;
   }
 
-  var style = props.style || {};
+  var style = props.connectionLineStyle || {};
-  var className = (0, _classnames.default)('react-graph__edge', 'connector', props.className);
+  var className = (0, _classnames.default)('react-graph__edge', 'connection', props.className);
   var sourceHandle = sourceNode.__rg.handleBounds.source;
   var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
   var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
@@ -38391,13 +38403,21 @@ var _default = function _default(props) {
   var sourceY = sourceNode.__rg.position.y + sourceHandleY;
   var targetX = props.connectionPosition.x * (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 yOffset = Math.abs(targetY - sourceY) / 2;
+  var dAttr = '';
-  var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+
-  var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
+  if (props.connectionLineType === 'bezier') {
-  return _react.default.createElement("path", _extends({
+    var yOffset = Math.abs(targetY - sourceY) / 2;
-    className: className,
+    var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
+  } else {
+    dAttr = "M".concat(sourceX, ",").concat(sourceY, " ").concat(targetX, ",").concat(targetY);
+  }
+
+  return _react.default.createElement("g", {
+    className: className
+  }, _react.default.createElement("path", _extends({
     d: dAttr
-  }, style));
+  }, style)));
 };
 
 exports.default = _default;
@@ -38413,7 +38433,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _GraphContext = require("../GraphContext");
 
-var _ConnectorEdge = _interopRequireDefault(require("../ConnectorEdge"));
+var _ConnectionLine = _interopRequireDefault(require("../ConnectionLine"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38485,7 +38505,9 @@ function (_PureComponent) {
       var _this$props = this.props,
           width = _this$props.width,
           height = _this$props.height,
-          onElementClick = _this$props.onElementClick;
+          onElementClick = _this$props.onElementClick,
+          connectionLineStyle = _this$props.connectionLineStyle,
+          connectionLineType = _this$props.connectionLineType;
 
       if (!width) {
         return null;
@@ -38501,11 +38523,13 @@ function (_PureComponent) {
           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.isConnecting && _react.default.createElement(_ConnectorEdge.default, {
+        }), state.connectionSourceId && _react.default.createElement(_ConnectionLine.default, {
           nodes: state.nodes,
           connectionSourceId: state.connectionSourceId,
           connectionPosition: state.connectionPosition,
-          transform: state.transform
+          transform: state.transform,
+          connectionLineStyle: connectionLineStyle,
+          connectionLineType: connectionLineType
         })));
       });
     }
@@ -38516,7 +38540,7 @@ function (_PureComponent) {
 
 var _default = EdgeRenderer;
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectorEdge":"../src/ConnectorEdge/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectionLine":"../src/ConnectionLine/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41136,13 +41160,14 @@ var GraphView = (0, _react.memo)(function (props) {
   }, _react.default.createElement(_NodeRenderer.default, {
     nodeTypes: props.nodeTypes,
     onElementClick: props.onElementClick,
-    onNodeDragStop: props.onNodeDragStop,
+    onNodeDragStop: props.onNodeDragStop
-    onConnect: props.onConnect
   }), _react.default.createElement(_EdgeRenderer.default, {
     width: state.width,
     height: state.height,
     edgeTypes: props.edgeTypes,
-    onElementClick: props.onElementClick
+    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", {
     className: "react-graph__zoompane",
     onClick: function onClick() {
@@ -41256,14 +41281,43 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _onDragStart(evt, nodeId, dispatch) {
+function _onMouseDown(evt, nodeId, dispatch, onConnect) {
-  evt.dataTransfer.setData('text/plain', nodeId); // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
+  var connectionPosition = {
-}
+    x: evt.clientX,
+    y: evt.clientY
+  };
+  dispatch((0, _actions.setConnecting)({
+    connectionPosition: connectionPosition,
+    connectionSourceId: nodeId
+  }));
 
-function onDragStop(evt, dispatch) {// dispatch(setConnecting({ isConnecting: false }));
+  function onMouseMove(evt) {
-}
+    dispatch((0, _actions.setConnectionPos)({
+      x: evt.clientX,
+      y: evt.clientY
+    }));
+  }
 
-function onDrag(evt, dispatch) {// dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
+  function onMouseUp(evt) {
+    var elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
+
+    if (elementBelow && elementBelow.classList.contains('target')) {
+      var targetId = elementBelow.getAttribute('data-nodeid');
+      onConnect({
+        source: nodeId,
+        target: targetId
+      });
+    }
+
+    dispatch((0, _actions.setConnecting)({
+      connectionSourceId: false
+    }));
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
 }
 
 var _default = (0, _react.memo)(function (_ref) {
@@ -41276,7 +41330,8 @@ var _default = (0, _react.memo)(function (_ref) {
   var nodeId = (0, _react.useContext)(_NodeIdContext.default);
 
   var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
-      dispatch = _useContext.dispatch;
+      dispatch = _useContext.dispatch,
+      onConnect = _useContext.onConnect;
 
   var handleClasses = (0, _classnames.default)('react-graph__handle', className, {
     source: source,
@@ -41285,19 +41340,17 @@ var _default = (0, _react.memo)(function (_ref) {
 
   if (target) {
     return _react.default.createElement("div", _extends({
+      "data-nodeid": nodeId,
       className: handleClasses
     }, rest));
   }
 
   return _react.default.createElement("div", _extends({
-    draggable: true,
+    "data-nodeid": nodeId,
-    onDragStart: function onDragStart(evt) {
+    className: handleClasses,
-      return _onDragStart(evt, nodeId, dispatch);
+    onMouseDown: function onMouseDown(evt) {
-    },
+      return _onMouseDown(evt, nodeId, dispatch, onConnect);
-    onDragEnd: function onDragEnd(evt) {
+    }
-      return onDragStop(evt, dispatch);
-    },
-    className: handleClasses
   }, rest));
 });
 
@@ -41500,7 +41553,7 @@ var isInput = function isInput(e) {
 };
 
 var isHandle = function isHandle(e) {
-  return e.target.className && e.target.className.includes('source');
+  return e.target.className && e.target.className.includes && e.target.className.includes('source');
 };
 
 var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {
@@ -41547,7 +41600,6 @@ var _default = function _default(NodeComponent) {
         type = props.type,
         id = props.id,
         __rg = props.__rg,
-        onConnect = props.onConnect,
         onNodeDragStop = props.onNodeDragStop;
     var position = __rg.position;
 
@@ -41631,15 +41683,6 @@ var _default = function _default(NodeComponent) {
       });
     };
 
-    var onDrop = function onDrop(evt) {
-      evt.preventDefault();
-      var source = evt.dataTransfer.getData('text/plain');
-      onConnect({
-        source: source,
-        target: id
-      });
-    };
-
     return _react.default.createElement(_reactDraggable.default.DraggableCore, {
       grid: [1, 1],
       onStart: onStart,
@@ -41647,7 +41690,6 @@ var _default = function _default(NodeComponent) {
       onStop: onStop,
       scale: k
     }, _react.default.createElement("div", {
-      onDrop: onDrop,
       onDragOver: onDragOver,
       className: nodeClasses,
       ref: nodeElement,
@@ -42033,7 +42075,9 @@ function (_PureComponent) {
           elements = _this$props.elements,
           onElementsRemove = _this$props.onElementsRemove,
           onConnect = _this$props.onConnect,
-          onNodeDragStop = _this$props.onNodeDragStop;
+          onNodeDragStop = _this$props.onNodeDragStop,
+          connectionLineType = _this$props.connectionLineType,
+          connectionLineStyle = _this$props.connectionLineStyle;
 
       var _elements$map$reduce = elements.map(_graphUtils.parseElements).reduce(_graphUtils.separateElements, {}),
           nodes = _elements$map$reduce.nodes,
@@ -42044,16 +42088,18 @@ function (_PureComponent) {
         className: "react-graph"
       }, _react.default.createElement(_GraphContext.Provider, {
         nodes: nodes,
-        edges: edges
+        edges: edges,
+        onConnect: onConnect
       }, _react.default.createElement(_GraphView.default, {
         onLoad: onLoad,
         onMove: onMove,
         onChange: onChange,
         onElementClick: onElementClick,
-        onConnect: onConnect,
         onNodeDragStop: onNodeDragStop,
         nodeTypes: this.nodeTypes,
-        edgeTypes: this.edgeTypes
+        edgeTypes: this.edgeTypes,
+        connectionLineType: connectionLineType,
+        connectionLineStyle: connectionLineStyle
       }), _react.default.createElement(_GlobalKeyHandler.default, {
         onElementsRemove: onElementsRemove
       }), children));
@@ -42079,7 +42125,9 @@ ReactGraph.defaultProps = {
   edgeTypes: {
     default: _BezierEdge.default,
     straight: _StraightEdge.default
-  }
+  },
+  connectionLineType: 'bezier',
+  connectionLineStyle: {}
 };
 var _default = ReactGraph;
 exports.default = _default;
@@ -42247,7 +42295,7 @@ function (_PureComponent) {
         id: '1',
         type: 'input',
         data: {
-          label: 'Tests'
+          label: '1 Tests'
         },
         position: {
           x: 250,
@@ -42256,7 +42304,7 @@ function (_PureComponent) {
       }, {
         id: '2',
         data: {
-          label: 'This is a node This is a node This is a node This is a node'
+          label: '2 This is a node This is a node This is a node This is a node'
         },
         position: {
           x: 100,
@@ -42265,7 +42313,7 @@ function (_PureComponent) {
       }, {
         id: '3',
         data: {
-          label: 'I bring my own style'
+          label: '3 I bring my own style'
         },
         position: {
           x: 100,
@@ -42280,7 +42328,7 @@ function (_PureComponent) {
         id: '4',
         type: 'output',
         data: {
-          label: 'nody nodes'
+          label: '4 nody nodes'
         },
         position: {
           x: 50,
@@ -42290,7 +42338,7 @@ function (_PureComponent) {
         id: '5',
         type: 'default',
         data: {
-          label: 'Another node'
+          label: '5 Another node'
         },
         position: {
           x: 400,
@@ -42301,7 +42349,7 @@ function (_PureComponent) {
         type: 'special',
         onChange: onChange,
         data: {
-          label: 'no option selected'
+          label: '6 no option selected'
         },
         position: {
           x: 425,
@@ -42311,7 +42359,7 @@ function (_PureComponent) {
         id: '7',
         type: 'output',
         data: {
-          label: 'output'
+          label: '7 output'
         },
         position: {
           x: 250,
@@ -42421,6 +42469,7 @@ function (_PureComponent) {
   }, {
     key: "onConnect",
     value: function onConnect(params) {
+      console.log('connect', params);
       this.setState(function (prevState) {
         return {
           elements: prevState.elements.concat(params)
@@ -42458,7 +42507,12 @@ function (_PureComponent) {
         },
         nodeTypes: {
           special: SpecialNode
-        }
+        },
+        connectionLineStyle: {
+          stroke: '#ddd',
+          strokeWidth: 2
+        },
+        connectionLineType: "bezier"
       }, _react.default.createElement("button", {
         type: "button",
         onClick: function onClick() {
@@ -42536,7 +42590,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 + ':' + "54380" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55285" + '/');
 
   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 + ':' + "54380" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55285" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/ConnectionLine/index.js

@@ -7,12 +7,13 @@ export default (props) => {
     setSourceNode(props.nodes.find(n => n.id === props.connectionSourceId));
   }, []);
 
+
   if (!sourceNode) {
     return null;
   }
 
-  const style = props.style || {};
+  const style = props.connectionLineStyle || {};
-  const className = cx('react-graph__edge', 'connector', props.className);
+  const className = cx('react-graph__edge', 'connection', props.className);
 
   const sourceHandle = sourceNode.__rg.handleBounds.source;
   const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
@@ -23,15 +24,22 @@ export default (props) => {
   const targetX = (props.connectionPosition.x * (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 yOffset = Math.abs(targetY - sourceY) / 2;
+  let dAttr = '';
-  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+
-  const dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+  if (props.connectionLineType === 'bezier') {
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+  } else {
+    dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
+  }
 
   return (
-    <path
+    <g className={className}>
-      className={className}
+      <path
-      d={dAttr}
+        d={dAttr}
-      {...style}
+        {...style}
-    />
+      />
+    </g>
   );
 };

src/EdgeRenderer/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Consumer } from '../GraphContext';
-import ConnectorEdge from '../ConnectorEdge';
+import ConnectionLine from '../ConnectionLine';
 
 class EdgeRenderer extends PureComponent {
   renderEdge(e, nodes, onElementClick) {
@@ -31,7 +31,10 @@ class EdgeRenderer extends PureComponent {
   }
 
   render() {
-    const { width, height, onElementClick } = this.props;
+    const {
+      width, height, onElementClick,
+      connectionLineStyle, connectionLineType
+    } = this.props;
 
     if (!width) {
       return null;
@@ -49,12 +52,14 @@ class EdgeRenderer extends PureComponent {
               transform={`translate(${state.transform[0]},${state.transform[1]}) scale(${state.transform[2]})`}
             >
               {state.edges.map(e => this.renderEdge(e, state.nodes, onElementClick))}
-              {state.isConnecting && (
+              {state.connectionSourceId && (
-                <ConnectorEdge
+                <ConnectionLine
                   nodes={state.nodes}
                   connectionSourceId={state.connectionSourceId}
                   connectionPosition={state.connectionPosition}
                   transform={state.transform}
+                  connectionLineStyle={connectionLineStyle}
+                  connectionLineType={connectionLineType}
                 />
               )}
             </g>

src/GraphContext/index.js

@@ -9,7 +9,8 @@ export const GraphContext = createContext({});
 
 export const Provider = (props) => {
   const {
-    children
+    children,
+    onConnect
   } = props;
 
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -42,6 +43,7 @@ export const Provider = (props) => {
 
   const graphContext = {
     state,
+    onConnect,
     dispatch
   };
 

src/GraphView/index.js

@@ -83,13 +83,14 @@ const GraphView = memo((props) => {
         nodeTypes={props.nodeTypes}
         onElementClick={props.onElementClick}
         onNodeDragStop={props.onNodeDragStop}
-        onConnect={props.onConnect}
       />
       <EdgeRenderer
         width={state.width}
         height={state.height}
         edgeTypes={props.edgeTypes}
         onElementClick={props.onElementClick}
+        connectionLineType={props.connectionLineType}
+        connectionLineStyle={props.connectionLineStyle}
       />
       {shiftPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -5,23 +5,34 @@ import NodeIdContext from '../NodeIdContext'
 import { GraphContext } from '../../GraphContext';
 import { setConnecting, setConnectionPos } from '../../state/actions';
 
-function onDragStart(evt, nodeId, dispatch) {
+function onMouseDown(evt, nodeId, dispatch, onConnect) {
-  evt.dataTransfer.setData('text/plain', nodeId);
+  const connectionPosition = { x: evt.clientX, y: evt.clientY };
+  dispatch(setConnecting({ connectionPosition, connectionSourceId: nodeId }))
 
-  // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
+  function onMouseMove(evt) {
-}
+    dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
+  }
 
-function onDragStop(evt, dispatch) {
+  function onMouseUp(evt) {
-  // dispatch(setConnecting({ isConnecting: false }));
+    const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
-}
 
-function onDrag(evt, dispatch) {
+    if (elementBelow && elementBelow.classList.contains('target')) {
-  // dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
+      const targetId = elementBelow.getAttribute('data-nodeid');
+      onConnect({ source: nodeId, target: targetId });
+    }
+
+    dispatch(setConnecting({ connectionSourceId: false }));
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  }
+
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp)
 }
 
 export default memo(({ source, target, className = null, ...rest }) => {
   const nodeId = useContext(NodeIdContext);
-  const { dispatch } = useContext(GraphContext);
+  const { dispatch, onConnect } = useContext(GraphContext);
   const handleClasses = cx(
     'react-graph__handle',
     className,
@@ -31,6 +42,7 @@ export default memo(({ source, target, className = null, ...rest }) => {
   if (target) {
     return (
       <div
+        data-nodeid={nodeId}
         className={handleClasses}
         {...rest}
       />
@@ -39,10 +51,9 @@ export default memo(({ source, target, className = null, ...rest }) => {
 
   return (
     <div
-      draggable
+      data-nodeid={nodeId}
-      onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
-      onDragEnd={evt => onDragStop(evt, dispatch)}
       className={handleClasses}
+      onMouseDown={evt => onMouseDown(evt, nodeId, dispatch, onConnect)}
       {...rest}
     />
   );

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -8,7 +8,7 @@ import { isNode } from '../../graph-utils';
 import { Provider } from '../NodeIdContext';
 
 const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
-const isHandle = e => e.target.className && e.target.className.includes('source');
+const isHandle = e => e.target.className && e.target.className.includes && e.target.className.includes('source');
 
 const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   const handle = nodeElement.querySelector(sel);
@@ -40,7 +40,7 @@ export default NodeComponent => memo((props) => {
   const { state, dispatch } = useContext(GraphContext);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const {
-    data, onClick, type, id, __rg, onConnect, onNodeDragStop
+    data, onClick, type, id, __rg, onNodeDragStop
   } = props;
   const { position } = __rg;
   const [ x, y, k ] = state.transform;
@@ -104,14 +104,6 @@ export default NodeComponent => memo((props) => {
     });
   }
 
-  const onDrop = (evt) => {
-    evt.preventDefault();
-
-    const source = evt.dataTransfer.getData('text/plain');
-
-    onConnect({ source, target: id });
-  };
-
   return (
     <ReactDraggable.DraggableCore
       grid={[1, 1]}
@@ -121,7 +113,6 @@ export default NodeComponent => memo((props) => {
       scale={k}
     >
       <div
-        onDrop={onDrop}
         onDragOver={onDragOver}
         className={nodeClasses}
         ref={nodeElement}

src/ReactGraph/index.js

@@ -28,7 +28,8 @@ class ReactGraph extends PureComponent {
     const {
       style, onElementClick, children, onLoad,
       onMove, onChange, elements, onElementsRemove,
-      onConnect, onNodeDragStop
+      onConnect, onNodeDragStop, connectionLineType,
+      connectionLineStyle
     } = this.props;
 
     const { nodes, edges } = elements
@@ -37,16 +38,17 @@ class ReactGraph extends PureComponent {
 
     return (
       <div style={style} className="react-graph">
-        <Provider nodes={nodes} edges={edges}>
+        <Provider nodes={nodes} edges={edges} onConnect={onConnect}>
           <GraphView
             onLoad={onLoad}
             onMove={onMove}
             onChange={onChange}
             onElementClick={onElementClick}
-            onConnect={onConnect}
             onNodeDragStop={onNodeDragStop}
             nodeTypes={this.nodeTypes}
             edgeTypes={this.edgeTypes}
+            connectionLineType={connectionLineType}
+            connectionLineStyle={connectionLineStyle}
           />
           <GlobalKeyHandler
             onElementsRemove={onElementsRemove}
@@ -74,7 +76,9 @@ ReactGraph.defaultProps = {
   edgeTypes: {
     default: BezierEdge,
     straight: StraightEdge
-  }
+  },
+  connectionLineType: 'bezier',
+  connectionLineStyle: {}
 };
 
 export default ReactGraph;

src/state/actions.js

@@ -102,8 +102,8 @@ export const updateSelection = (selection) => {
   };
 };
 
-export const setConnecting = ({ isConnecting, connectionSourceId }) => {
+export const setConnecting = ({ connectionSourceId, connectionPosition = false}) => {
-  return { type: SET_CONNECTING, payload: { isConnecting, connectionSourceId }};
+  return { type: SET_CONNECTING, payload: { connectionSourceId, connectionPosition }};
 };
 
 export const setConnectionPos = ({ x, y }) => {

src/state/index.js

@@ -37,7 +37,6 @@ export const initialState = {
   selectionActive: false,
   selection: {},
 
-  isConnecting: false,
   connectionSourceId: null,
   connectionPosition: { x: 0, y: 0 }
 };
@@ -125,6 +124,13 @@ 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:
@@ -132,7 +138,6 @@ export const reducer = (state, action) => {
     case UPDATE_SIZE:
     case SET_SELECTION:
     case SET_SELECTED_ELEMENTS:
-    case SET_CONNECTING:
     case SET_CONNECTION_POS:
       return { ...state, ...action.payload };
     default:

src/style.css

@@ -60,7 +60,8 @@
     animation: dashdraw 0.5s linear infinite;
   }
 
-  &.connector {
+  &.connection {
+    stroke: '#ddd';
     pointer-events: none;
   }
 }