feat(rg): add onConnect callback

example/SimpleGraph.js

@@ -1,18 +1,20 @@
 import React, { PureComponent } from 'react';
 
-import Graph, { isEdge, removeElements } from '../src';
+import Graph, { isEdge, removeElements, SourceHandle, TargetHandle } from '../src';
 // import Graph from '../dist/ReactGraph';
 
 const SpecialNode = ({ data, onChange, styles }) => (
   <div
-    style={{ background: '#FFCC00', padding: 10, borderRadius: 30, ...styles }}
+    style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
   >
+    <TargetHandle style={{ left: 10, background: '#999' }} />
     <div>I am <strong>special</strong>!<br />{data.label}</div>
     <select onChange={(e) => onChange(e.target.value, data)}>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
     </select>
+    <SourceHandle style={{ left: 10, background: '#999' }} />
   </div>
 );
 
@@ -46,18 +48,20 @@ class App extends PureComponent {
         { id: '3', data: { label: '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: '5', type: 'default', data: { label: 'Another node'}, position: { x: 400, y: 300 } },
-        { id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 425, y: 400 } },
+        { id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 425, y: 375 } },
+        { id: '7', type: 'output', data: { label: 'output' }, position: { x: 250, y: 500 } },
         { source: '1', target: '2', animated: true },
         { source: '2', target: '3' },
         { source: '3', target: '4' },
         { source: '3', target: '5' },
-        { source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } }
+        { source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } },
+        { source: '6', target: '7', style: { stroke: '#FFCC00' }},
       ]
     };
   }
 
   onLoad(graphInstance) {
-    console.log('graph loaded:', this.graphInstance);
+    console.log('graph loaded:', graphInstance);
     window.rg = graphInstance;
 
     this.graphInstance = graphInstance;
@@ -109,6 +113,7 @@ class App extends PureComponent {
         elements={this.state.elements}
         onElementClick={node => console.log('clicked', node)}
         onElementsRemove={elements => this.onElementsRemove(elements)}
+        onConnect={params => console.log(params)}
         style={{ width: '100%', height: '100%' }}
         onLoad={graphInstance => this.onLoad(graphInstance)}
         onChange={(elements) => this.onChange(elements)}

example/build/example.e31bb0bc.css

@@ -106,16 +106,22 @@
 .react-graph__handle {
   position: absolute;
   width: 10px;
-  height: 5px;
+  height: 8px;
-  transform: translate(-50%, 0);
   background: rgba(255, 255, 255, 0.4);
-  left: 50%;
-  top: 0;
 }
 
-.react-graph__handle.output {
+.react-graph__handle.source {
     top: auto;
+    left: 50%;
     bottom: 0;
+    transform: translate(-50%, 0);
+    cursor: crosshair;
+  }
+
+.react-graph__handle.target {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
   }
 
 .react-graph__nodesselection {

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;AAUrB;;AARE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;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,6BAA6B;EAC7B,oCAAoC;EACpC,SAAS;EACT,MAAM;AAMR;;AAJE;IACE,SAAS;IACT,SAAS;EACX;;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\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: 5px;\n  transform: translate(-50%, 0);\n  background: rgba(255, 255, 255, 0.4);\n  left: 50%;\n  top: 0;\n\n  &.output {\n    top: auto;\n    bottom: 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;AAUrB;;AARE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;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\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

@@ -25784,15 +25784,22 @@ var removeElements = function removeElements(elements, elementsToRemove) {
 };
 
 exports.removeElements = removeElements;
+var internalNodeId = 0;
+
+var getId = function getId() {
+  return internalNodeId++;
+};
 
 var parseElements = function parseElements(e) {
   e.type = e.type || 'default';
+  e.id = e.id ? e.id : getId();
 
   if (isEdge(e)) {
     return e;
   }
 
   return _objectSpread({}, e, {
+    id: e.id.toString(),
     __rg: {
       position: e.position,
       width: null,
@@ -38073,8 +38080,7 @@ var GraphContext = (0, _react.createContext)({});
 exports.GraphContext = GraphContext;
 
 var Provider = function Provider(props) {
-  var onElementClick = props.onElementClick,
+  var children = props.children;
-      children = props.children;
 
   var _useReducer = (0, _react.useReducer)(_state.reducer, _state.initialState),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -38107,7 +38113,6 @@ var Provider = function Provider(props) {
     }
   });
   var graphContext = {
-    onElementClick: onElementClick,
     state: state,
     dispatch: dispatch
   };
@@ -38174,7 +38179,7 @@ function (_PureComponent) {
 
   _createClass(NodeRenderer, [{
     key: "renderNode",
-    value: function renderNode(d, onElementClick) {
+    value: function renderNode(d) {
       var nodeType = d.type || 'default';
 
       if (!this.props.nodeTypes[nodeType]) {
@@ -38184,7 +38189,8 @@ function (_PureComponent) {
       var NodeComponent = this.props.nodeTypes[nodeType] || this.props.nodeTypes.default;
       return _react.default.createElement(NodeComponent, _extends({
         key: d.id,
-        onClick: onElementClick
+        onClick: this.props.onElementClick,
+        onConnect: this.props.onConnect
       }, d));
     }
   }, {
@@ -38193,15 +38199,14 @@ function (_PureComponent) {
       var _this = this;
 
       return _react.default.createElement(_GraphContext.Consumer, null, function (_ref) {
-        var onElementClick = _ref.onElementClick,
+        var state = _ref.state;
-            state = _ref.state;
         return _react.default.createElement("div", {
           className: "react-graph__nodes",
           style: {
             transform: "translate(".concat(state.transform[0], "px,").concat(state.transform[1], "px) scale(").concat(state.transform[2], ")")
           }
         }, state.nodes.map(function (d) {
-          return _this.renderNode(d, onElementClick);
+          return _this.renderNode(d);
         }));
       });
     }
@@ -38273,7 +38278,7 @@ function (_PureComponent) {
       }
 
       if (!targetNode) {
-        throw new Error("couldn't create edge for source id: ".concat(e.target));
+        throw new Error("couldn't create edge for target id: ".concat(e.target));
       }
 
       var EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;
@@ -40936,7 +40941,9 @@ var GraphView = (0, _react.memo)(function (props) {
   return _react.default.createElement("div", {
     className: "react-graph__renderer"
   }, _react.default.createElement(_NodeRenderer.default, {
-    nodeTypes: props.nodeTypes
+    nodeTypes: props.nodeTypes,
+    onElementClick: props.onElementClick,
+    onConnect: props.onConnect
   }), _react.default.createElement(_EdgeRenderer.default, {
     width: state.width,
     height: state.height,
@@ -41063,7 +41070,24 @@ var define;
 	}
 }());
 
-},{}],"../src/NodeRenderer/Handle/index.js":[function(require,module,exports) {
+},{}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Consumer = exports.Provider = void 0;
+
+var _react = require("react");
+
+var NodeIdContext = (0, _react.createContext)(null);
+var Provider = NodeIdContext.Provider;
+exports.Provider = Provider;
+var Consumer = NodeIdContext.Consumer;
+exports.Consumer = Consumer;
+var _default = NodeIdContext;
+exports.default = _default;
+},{"react":"../node_modules/react/index.js"}],"../src/NodeRenderer/HandleTypes/BaseHandle.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41075,6 +41099,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _NodeIdContext = require("../NodeIdContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -41085,22 +41111,40 @@ 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) {
+  evt.dataTransfer.setData("text/plain", nodeId);
+}
+
 var _default = (0, _react.memo)(function (_ref) {
-  var input = _ref.input,
+  var source = _ref.source,
-      output = _ref.output,
+      target = _ref.target,
-      rest = _objectWithoutProperties(_ref, ["input", "output"]);
+      rest = _objectWithoutProperties(_ref, ["source", "target"]);
 
   var handleClasses = (0, _classnames.default)('react-graph__handle', {
-    input: input,
+    source: source,
-    output: output
+    target: target
+  });
+
+  if (target) {
+    return _react.default.createElement("div", _extends({
+      className: handleClasses
+    }, rest));
+  }
+
+  return _react.default.createElement(_NodeIdContext.Consumer, null, function (nodeId) {
+    return _react.default.createElement("div", _extends({
+      className: handleClasses
+    }, rest, {
+      draggable: true,
+      onDragStart: function onDragStart(evt) {
+        return _onDragStart(evt, nodeId);
+      }
+    }));
   });
-  return _react.default.createElement("div", _extends({
-    className: handleClasses
-  }, rest));
 });
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js"}],"../src/NodeRenderer/NodeTypes/DefaultNode.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/TargetHandle.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41110,7 +41154,55 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Handle = _interopRequireDefault(require("../Handle"));
+var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = function _default(props) {
+  return _react.default.createElement(_BaseHandle.default, _extends({
+    target: true
+  }, props));
+};
+
+exports.default = _default;
+},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = function _default(props) {
+  return _react.default.createElement(_BaseHandle.default, _extends({
+    source: true
+  }, props));
+};
+
+exports.default = _default;
+},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js"}],"../src/NodeRenderer/NodeTypes/DefaultNode.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TargetHandle = _interopRequireDefault(require("../HandleTypes/TargetHandle"));
+
+var _SourceHandle = _interopRequireDefault(require("../HandleTypes/SourceHandle"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41132,15 +41224,11 @@ var _default = function _default(_ref) {
       style = _ref.style;
   return _react.default.createElement("div", {
     style: _objectSpread({}, nodeStyles, {}, style)
-  }, _react.default.createElement(_Handle.default, {
+  }, _react.default.createElement(_TargetHandle.default, null), data.label, _react.default.createElement(_SourceHandle.default, null));
-    input: true
-  }), data.label, _react.default.createElement(_Handle.default, {
-    output: true
-  }));
 };
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../Handle":"../src/NodeRenderer/Handle/index.js"}],"../src/NodeRenderer/NodeTypes/InputNode.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../HandleTypes/TargetHandle":"../src/NodeRenderer/HandleTypes/TargetHandle.js","../HandleTypes/SourceHandle":"../src/NodeRenderer/HandleTypes/SourceHandle.js"}],"../src/NodeRenderer/NodeTypes/InputNode.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41150,7 +41238,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Handle = _interopRequireDefault(require("../Handle"));
+var _SourceHandle = _interopRequireDefault(require("../HandleTypes/SourceHandle"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41173,13 +41261,11 @@ var _default = function _default(_ref) {
   return _react.default.createElement("div", {
     style: _objectSpread({}, nodeStyles, {}, style),
     className: "react-graph__node-inner"
-  }, data.label, _react.default.createElement(_Handle.default, {
+  }, data.label, _react.default.createElement(_SourceHandle.default, null));
-    output: true
-  }));
 };
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../Handle":"../src/NodeRenderer/Handle/index.js"}],"../src/NodeRenderer/NodeTypes/OutputNode.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../HandleTypes/SourceHandle":"../src/NodeRenderer/HandleTypes/SourceHandle.js"}],"../src/NodeRenderer/NodeTypes/OutputNode.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41189,7 +41275,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Handle = _interopRequireDefault(require("../Handle"));
+var _TargetHandle = _interopRequireDefault(require("../HandleTypes/TargetHandle"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41211,13 +41297,11 @@ var _default = function _default(_ref) {
       style = _ref.style;
   return _react.default.createElement("div", {
     style: _objectSpread({}, nodeStyles, {}, style)
-  }, _react.default.createElement(_Handle.default, {
+  }, _react.default.createElement(_TargetHandle.default, null), data.label);
-    input: true
-  }), data.label);
 };
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../Handle":"../src/NodeRenderer/Handle/index.js"}],"../src/NodeRenderer/NodeTypes/wrapNode.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../HandleTypes/TargetHandle":"../src/NodeRenderer/HandleTypes/TargetHandle.js"}],"../src/NodeRenderer/NodeTypes/wrapNode.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41237,6 +41321,8 @@ var _actions = require("../../state/actions");
 
 var _graphUtils = require("../../graph-utils");
 
+var _NodeIdContext = require("../NodeIdContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -41251,10 +41337,35 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var isInputTarget = function isInputTarget(e) {
+var isInput = function isInput(e) {
   return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 };
 
+var isHandle = function isHandle(e) {
+  return e.target.className.includes('source');
+};
+
+var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
+  var handle = nodeElement.querySelector(sel);
+
+  if (!handle) {
+    return null;
+  }
+
+  var bounds = handle.getBoundingClientRect();
+  return {
+    x: bounds.x - parentBounds.x,
+    y: bounds.y - parentBounds.y,
+    width: bounds.width,
+    height: bounds.height
+  };
+};
+
+var onDragOver = function onDragOver(evt) {
+  evt.preventDefault();
+  evt.dataTransfer.dropEffect = "move";
+};
+
 var _default = function _default(NodeComponent) {
   return (0, _react.memo)(function (props) {
     var nodeElement = (0, _react.useRef)(null);
@@ -41275,7 +41386,8 @@ var _default = function _default(NodeComponent) {
         onClick = props.onClick,
         type = props.type,
         id = props.id,
-        __rg = props.__rg;
+        __rg = props.__rg,
+        onConnect = props.onConnect;
     var position = __rg.position;
 
     var _state$transform = _slicedToArray(state.transform, 3),
@@ -41293,14 +41405,19 @@ var _default = function _default(NodeComponent) {
       var bounds = nodeElement.current.getBoundingClientRect();
       var unscaledWith = Math.round(bounds.width * (1 / k));
       var unscaledHeight = Math.round(bounds.height * (1 / k));
+      var handleBounds = {
+        source: getHandleBounds('.source', nodeElement.current, bounds),
+        target: getHandleBounds('.target', nodeElement.current, bounds)
+      };
       dispatch((0, _actions.updateNodeData)(id, {
         width: unscaledWith,
-        height: unscaledHeight
+        height: unscaledHeight,
+        handleBounds: handleBounds
       }));
     }, []);
 
     var onStart = function onStart(evt) {
-      if (isInputTarget(evt)) {
+      if (isInput(evt) || isHandle(evt)) {
         return false;
       }
 
@@ -41328,7 +41445,7 @@ var _default = function _default(NodeComponent) {
     };
 
     var onNodeClick = function onNodeClick(evt) {
-      if (isInputTarget(evt)) {
+      if (isInput(evt)) {
         return false;
       }
 
@@ -41344,12 +41461,28 @@ var _default = function _default(NodeComponent) {
       });
     };
 
+    var onDrop = function onDrop(evt) {
+      evt.preventDefault();
+      var sourceId = evt.dataTransfer.getData('text/plain');
+
+      if (sourceId === id) {
+        return false;
+      }
+
+      onConnect({
+        sourceId: sourceId,
+        targetId: id
+      });
+    };
+
     return _react.default.createElement(_reactDraggable.default.DraggableCore, {
       grid: [1, 1],
       onStart: onStart,
       onDrag: onDrag,
       scale: k
     }, _react.default.createElement("div", {
+      onDrop: onDrop,
+      onDragOver: onDragOver,
       className: nodeClasses,
       ref: nodeElement,
       style: {
@@ -41357,14 +41490,16 @@ var _default = function _default(NodeComponent) {
         transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
       },
       onClick: onNodeClick
+    }, _react.default.createElement(_NodeIdContext.Provider, {
+      value: id
     }, _react.default.createElement(NodeComponent, _extends({}, props, {
       selected: selected
-    }))));
+    })))));
   });
 };
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","classnames":"../node_modules/classnames/index.js","../../GraphContext":"../src/GraphContext/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js"}],"../src/NodeRenderer/utils.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","classnames":"../node_modules/classnames/index.js","../../GraphContext":"../src/GraphContext/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/utils.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41420,9 +41555,13 @@ var _default = function _default(props) {
   var targetNode = props.targetNode,
       sourceNode = props.sourceNode;
   var style = props.style || {};
-  var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
+  var sourceHandle = sourceNode.__rg.handleBounds.source;
+  var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+  var sourceX = sourceNode.__rg.position.x + sourceHandleX;
   var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
-  var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
+  var targetHandle = targetNode.__rg.handleBounds.target;
+  var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
+  var targetX = targetNode.__rg.position.x + targetHandleX;
   var targetY = targetNode.__rg.position.y;
   var yOffset = Math.abs(targetY - sourceY) / 2;
   var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
@@ -41451,9 +41590,13 @@ var _default = function _default(props) {
   var targetNode = props.targetNode,
       sourceNode = props.sourceNode;
   var style = props.style || {};
-  var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
+  var sourceHandle = sourceNode.__rg.handleBounds.source;
+  var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+  var sourceX = sourceNode.__rg.position.x + sourceHandleX;
   var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
-  var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
+  var targetHandle = targetNode.__rg.handleBounds.target;
+  var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
+  var targetX = targetNode.__rg.position.x + targetHandleX;
   var targetY = targetNode.__rg.position.y;
   return _react.default.createElement("path", _extends({}, style, {
     d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
@@ -41483,7 +41626,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-var isInputTarget = function isInputTarget(e) {
+var isInput = function isInput(e) {
   return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 };
 
@@ -41510,7 +41653,7 @@ var _default = function _default(EdgeComponent) {
     return _react.default.createElement("g", {
       className: edgeClasses,
       onClick: function onClick(e) {
-        if (isInputTarget(e)) {
+        if (isInput(e)) {
           return false;
         }
 
@@ -41720,7 +41863,8 @@ function (_PureComponent) {
           onMove = _this$props.onMove,
           onChange = _this$props.onChange,
           elements = _this$props.elements,
-          onElementsRemove = _this$props.onElementsRemove;
+          onElementsRemove = _this$props.onElementsRemove,
+          onConnect = _this$props.onConnect;
 
       var _elements$map$reduce = elements.map(_graphUtils.parseElements).reduce(_graphUtils.separateElements, {}),
           nodes = _elements$map$reduce.nodes,
@@ -41737,6 +41881,8 @@ function (_PureComponent) {
         onLoad: onLoad,
         onMove: onMove,
         onChange: onChange,
+        onElementClick: onElementClick,
+        onConnect: onConnect,
         nodeTypes: this.nodeTypes,
         edgeTypes: this.edgeTypes
       }), _react.default.createElement(_GlobalKeyHandler.default, {
@@ -41751,6 +41897,7 @@ function (_PureComponent) {
 ReactGraph.defaultProps = {
   onElementClick: function onElementClick() {},
   onElementsRemove: function onElementsRemove() {},
+  onConnect: function onConnect() {},
   onLoad: function onLoad() {},
   onMove: function onMove() {},
   onChange: function onChange() {},
@@ -41772,10 +41919,14 @@ exports.default = _default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.removeElements = exports.isEdge = exports.isNode = void 0;
+exports.default = exports.TargetHandle = exports.SourceHandle = exports.removeElements = exports.isEdge = exports.isNode = void 0;
 
 var _ReactGraph = _interopRequireDefault(require("./ReactGraph"));
 
+var _SourceHandle2 = _interopRequireDefault(require("./NodeRenderer/HandleTypes/SourceHandle"));
+
+var _TargetHandle2 = _interopRequireDefault(require("./NodeRenderer/HandleTypes/TargetHandle"));
+
 var _graphUtils = require("./graph-utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41786,9 +41937,13 @@ var isEdge = _graphUtils.isEdge;
 exports.isEdge = isEdge;
 var removeElements = _graphUtils.removeElements;
 exports.removeElements = removeElements;
+var SourceHandle = _SourceHandle2.default;
+exports.SourceHandle = SourceHandle;
+var TargetHandle = _TargetHandle2.default;
+exports.TargetHandle = TargetHandle;
 var _default = _ReactGraph.default;
 exports.default = _default;
-},{"./ReactGraph":"../src/ReactGraph/index.js","./graph-utils":"../src/graph-utils.js"}],"SimpleGraph.js":[function(require,module,exports) {
+},{"./ReactGraph":"../src/ReactGraph/index.js","./NodeRenderer/HandleTypes/SourceHandle":"../src/NodeRenderer/HandleTypes/SourceHandle.js","./NodeRenderer/HandleTypes/TargetHandle":"../src/NodeRenderer/HandleTypes/TargetHandle.js","./graph-utils":"../src/graph-utils.js"}],"SimpleGraph.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41835,9 +41990,14 @@ var SpecialNode = function SpecialNode(_ref) {
     style: _objectSpread({
       background: '#FFCC00',
       padding: 10,
-      borderRadius: 30
+      borderRadius: 2
     }, styles)
-  }, _react.default.createElement("div", null, "I am ", _react.default.createElement("strong", null, "special"), "!", _react.default.createElement("br", null), data.label), _react.default.createElement("select", {
+  }, _react.default.createElement(_src.TargetHandle, {
+    style: {
+      left: 10,
+      background: '#999'
+    }
+  }), _react.default.createElement("div", null, "I am ", _react.default.createElement("strong", null, "special"), "!", _react.default.createElement("br", null), data.label), _react.default.createElement("select", {
     onChange: function onChange(e) {
       return _onChange(e.target.value, data);
     }
@@ -41847,7 +42007,12 @@ var SpecialNode = function SpecialNode(_ref) {
     value: "2"
   }, "2"), _react.default.createElement("option", {
     value: "3"
-  }, "3")));
+  }, "3")), _react.default.createElement(_src.SourceHandle, {
+    style: {
+      left: 10,
+      background: '#999'
+    }
+  }));
 };
 
 var App =
@@ -41944,7 +42109,17 @@ function (_PureComponent) {
         },
         position: {
           x: 425,
-          y: 400
+          y: 375
+        }
+      }, {
+        id: '7',
+        type: 'output',
+        data: {
+          label: 'output'
+        },
+        position: {
+          x: 250,
+          y: 500
         }
       }, {
         source: '1',
@@ -41967,6 +42142,12 @@ function (_PureComponent) {
         style: {
           stroke: '#FFCC00'
         }
+      }, {
+        source: '6',
+        target: '7',
+        style: {
+          stroke: '#FFCC00'
+        }
       }]
     };
     return _this;
@@ -41975,7 +42156,7 @@ function (_PureComponent) {
   _createClass(App, [{
     key: "onLoad",
     value: function onLoad(graphInstance) {
-      console.log('graph loaded:', this.graphInstance);
+      console.log('graph loaded:', graphInstance);
       window.rg = graphInstance;
       this.graphInstance = graphInstance;
       this.graphInstance.fitView();
@@ -42046,6 +42227,9 @@ function (_PureComponent) {
         onElementsRemove: function onElementsRemove(elements) {
           return _this2.onElementsRemove(elements);
         },
+        onConnect: function onConnect(params) {
+          return console.log(params);
+        },
         style: {
           width: '100%',
           height: '100%'
@@ -42136,7 +42320,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 + ':' + "55299" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "56680" + '/');
 
   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 + ':' + "55299" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "56680" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/EdgeRenderer/EdgeTypes/BezierEdge.js

@@ -4,10 +4,14 @@ export default (props) => {
   const { targetNode, sourceNode } = props;
   const style = props.style || {};
 
-  const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
+  const sourceHandle = sourceNode.__rg.handleBounds.source;
+  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
+  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
   const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
 
-  const targetX = targetNode.__rg.position.x + (targetNode.__rg.width / 2);
+  const targetHandle = targetNode.__rg.handleBounds.target;
+  const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
+  const targetX = targetNode.__rg.position.x + targetHandleX;
   const targetY = targetNode.__rg.position.y;
 
   const yOffset = Math.abs(targetY - sourceY) / 2;

src/EdgeRenderer/EdgeTypes/StraightEdge.js

@@ -4,10 +4,14 @@ export default (props) => {
   const { targetNode, sourceNode } = props;
   const style = props.style || {};
 
-  const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
+  const sourceHandle = sourceNode.__rg.handleBounds.source;
+  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
+  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
   const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
 
-  const targetX = targetNode.__rg.position.x + (targetNode.__rg.width / 2);
+  const targetHandle = targetNode.__rg.handleBounds.target;
+  const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
+  const targetX = targetNode.__rg.position.x + targetHandleX;
   const targetY = targetNode.__rg.position.y;
 
   return (

src/EdgeRenderer/EdgeTypes/wrapEdge.js

@@ -5,7 +5,7 @@ import { GraphContext } from '../../GraphContext';
 import { setSelectedElements } from '../../state/actions';
 import { isEdge } from '../../graph-utils';
 
-const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
+const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
 export default EdgeComponent => memo((props) => {
   const { state, dispatch } = useContext(GraphContext);
@@ -19,7 +19,7 @@ export default EdgeComponent => memo((props) => {
     <g
       className={edgeClasses}
       onClick={(e) => {
-        if (isInputTarget(e)) {
+        if (isInput(e)) {
           return false;
         }
 

src/EdgeRenderer/index.js

@@ -13,7 +13,7 @@ class EdgeRenderer extends PureComponent {
     }
 
     if (!targetNode) {
-      throw new Error(`couldn't create edge for source id: ${e.target}`);
+      throw new Error(`couldn't create edge for target id: ${e.target}`);
     }
 
     const EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;

src/GraphContext/index.js

@@ -9,7 +9,6 @@ export const GraphContext = createContext({});
 
 export const Provider = (props) => {
   const {
-    onElementClick,
     children
   } = props;
 
@@ -42,7 +41,6 @@ export const Provider = (props) => {
   });
 
   const graphContext = {
-    onElementClick,
     state,
     dispatch
   };

src/GraphView/index.js

@@ -78,7 +78,11 @@ const GraphView = memo((props) => {
 
   return (
     <div className="react-graph__renderer">
-      <NodeRenderer nodeTypes={props.nodeTypes} />
+      <NodeRenderer
+        nodeTypes={props.nodeTypes}
+        onElementClick={props.onElementClick}
+        onConnect={props.onConnect}
+      />
       <EdgeRenderer
         width={state.width}
         height={state.height}

src/NodeRenderer/Handle/index.js

@@ -1,15 +0,0 @@
-import React, { memo } from 'react';
-import cx from 'classnames';
-
-export default memo(({ input, output, ...rest }) => {
-  const handleClasses = cx(
-    'react-graph__handle', { input, output }
-  );
-
-  return (
-    <div
-      className={handleClasses}
-      {...rest}
-    />
-  );
-});

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -0,0 +1,37 @@
+import React, { memo } from 'react';
+import cx from 'classnames';
+
+import { Consumer } from '../NodeIdContext'
+
+function onDragStart(evt, nodeId) {
+  evt.dataTransfer.setData("text/plain", nodeId);
+}
+
+export default memo(({ source, target, ...rest }) => {
+  const handleClasses = cx(
+    'react-graph__handle',
+    { source, target }
+  );
+
+  if (target) {
+    return (
+      <div
+        className={handleClasses}
+        {...rest}
+      />
+    )
+  }
+
+  return (
+    <Consumer>
+      {nodeId => (
+        <div
+          className={handleClasses}
+          {...rest}
+          draggable
+          onDragStart={evt => onDragStart(evt, nodeId)}
+        />
+      )}
+    </Consumer>
+  );
+});

src/NodeRenderer/HandleTypes/SourceHandle.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import BaseHandle from './BaseHandle';
+
+export default props => <BaseHandle source {...props} />;

src/NodeRenderer/HandleTypes/TargetHandle.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+import BaseHandle from './BaseHandle';
+
+export default props => <BaseHandle target {...props} />;
+

src/NodeRenderer/NodeIdContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const NodeIdContext = createContext(null);
+
+export const Provider = NodeIdContext.Provider;
+export const Consumer = NodeIdContext.Consumer;
+
+export default NodeIdContext;

src/NodeRenderer/NodeTypes/DefaultNode.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import Handle from '../Handle';
+import TargetHandle from '../HandleTypes/TargetHandle';
+import SourceHandle from '../HandleTypes/SourceHandle';
 
 const nodeStyles = {
   background: '#ff6060',
@@ -11,8 +12,8 @@ const nodeStyles = {
 
 export default ({ data, style }) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle input />
+    <TargetHandle />
     {data.label}
-    <Handle output />
+    <SourceHandle />
   </div>
 );

src/NodeRenderer/NodeTypes/InputNode.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Handle from '../Handle';
+import SourceHandle from '../HandleTypes/SourceHandle';
 
 const nodeStyles = {
   background: '#9999ff',
@@ -15,6 +15,6 @@ export default ({ data, style }) => (
     className="react-graph__node-inner"
   >
     {data.label}
-    <Handle output />
+    <SourceHandle />
   </div>
 );

src/NodeRenderer/NodeTypes/OutputNode.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Handle from '../Handle';
+import TargetHandle from '../HandleTypes/TargetHandle';
 
 const nodeStyles = {
   background: '#55dd99',
@@ -11,7 +11,7 @@ const nodeStyles = {
 
 export default ({ data, style }) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle input />
+    <TargetHandle />
     {data.label}
   </div>
 );

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -5,14 +5,38 @@ import cx from 'classnames';
 import { GraphContext } from '../../GraphContext';
 import { updateNodeData, updateNodePos, setSelectedElements } from '../../state/actions';
 import { isNode } from '../../graph-utils';
+import { Provider } from '../NodeIdContext';
 
-const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
+const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
+const isHandle = e => e.target.className.includes('source');
+
+const getHandleBounds = (sel, nodeElement, parentBounds) => {
+  const handle = nodeElement.querySelector(sel);
+
+  if (!handle) {
+    return null;
+  }
+
+  const bounds = handle.getBoundingClientRect();
+  return {
+    x: bounds.x - parentBounds.x,
+    y: bounds.y - parentBounds.y,
+    width: bounds.width,
+    height: bounds.height
+  };
+};
+
+const onDragOver = evt => {
+  evt.preventDefault();
+
+  evt.dataTransfer.dropEffect = "move";
+}
 
 export default NodeComponent => memo((props) => {
   const nodeElement = useRef(null);
   const { state, dispatch } = useContext(GraphContext);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const { data, onClick, type, id, __rg } = props;
+  const { data, onClick, type, id, __rg, onConnect } = props;
   const { position } = __rg;
   const [ x, y, k ] = state.transform;
   const selected = state.selectedElements.filter(isNode).map(e => e.id).includes(id);
@@ -22,12 +46,16 @@ export default NodeComponent => memo((props) => {
     const bounds = nodeElement.current.getBoundingClientRect();
     const unscaledWith = Math.round(bounds.width * (1 / k));
     const unscaledHeight = Math.round(bounds.height * (1 / k));
+    const handleBounds = {
+      source: getHandleBounds('.source', nodeElement.current, bounds),
+      target: getHandleBounds('.target', nodeElement.current, bounds)
+    };
 
-    dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight }));
+    dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));
   }, []);
 
   const onStart = (evt) => {
-    if (isInputTarget(evt)) {
+    if (isInput(evt) || isHandle(evt)) {
       return false;
     }
 
@@ -54,7 +82,7 @@ export default NodeComponent => memo((props) => {
   };
 
   const onNodeClick = (evt) => {
-    if (isInputTarget(evt)) {
+    if (isInput(evt)) {
       return false;
     }
 
@@ -62,6 +90,18 @@ export default NodeComponent => memo((props) => {
     onClick({ id, type, data, position });
   };
 
+  const onDrop = (evt) => {
+    evt.preventDefault();
+
+    const sourceId = evt.dataTransfer.getData('text/plain');
+
+    if (sourceId === id) {
+      return false;
+    }
+
+    onConnect({ sourceId, targetId: id });
+  };
+
   return (
     <ReactDraggable.DraggableCore
       grid={[1, 1]}
@@ -70,12 +110,16 @@ export default NodeComponent => memo((props) => {
       scale={k}
     >
       <div
+        onDrop={onDrop}
+        onDragOver={onDragOver}
         className={nodeClasses}
         ref={nodeElement}
         style={{ zIndex: selected ? 10 : 3, transform: `translate(${position.x}px,${position.y}px)` }}
         onClick={onNodeClick}
       >
-        <NodeComponent {...props} selected={selected} />
+        <Provider value={id}>
+          <NodeComponent {...props} selected={selected} />
+        </Provider>
       </div>
     </ReactDraggable.DraggableCore>
   );

src/NodeRenderer/index.js

@@ -4,7 +4,7 @@ import { Consumer } from '../GraphContext';
 
 class NodeRenderer extends PureComponent {
 
-  renderNode(d, onElementClick) {
+  renderNode(d) {
     const nodeType = d.type || 'default';
     if (!this.props.nodeTypes[nodeType]) {
       console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
@@ -15,7 +15,8 @@ class NodeRenderer extends PureComponent {
     return (
       <NodeComponent
         key={d.id}
-        onClick={onElementClick}
+        onClick={this.props.onElementClick}
+        onConnect={this.props.onConnect}
         {...d}
       />
     );
@@ -24,14 +25,14 @@ class NodeRenderer extends PureComponent {
   render() {
     return (
       <Consumer>
-        {({ onElementClick, state }) => (
+        {({ state }) => (
           <div
             className="react-graph__nodes"
             style={{
               transform: `translate(${state.transform[0]}px,${state.transform[1]}px) scale(${state.transform[2]})`
             }}
           >
-            {state.nodes.map(d => this.renderNode(d, onElementClick))}
+            {state.nodes.map(d => this.renderNode(d))}
           </div>
         )}
       </Consumer>

src/ReactGraph/index.js

@@ -27,7 +27,8 @@ class ReactGraph extends PureComponent {
   render() {
     const {
       style, onElementClick, children, onLoad,
-      onMove, onChange, elements, onElementsRemove
+      onMove, onChange, elements, onElementsRemove,
+      onConnect
     } = this.props;
 
     const { nodes, edges } = elements
@@ -41,6 +42,8 @@ class ReactGraph extends PureComponent {
             onLoad={onLoad}
             onMove={onMove}
             onChange={onChange}
+            onElementClick={onElementClick}
+            onConnect={onConnect}
             nodeTypes={this.nodeTypes}
             edgeTypes={this.edgeTypes}
           />
@@ -57,6 +60,7 @@ class ReactGraph extends PureComponent {
 ReactGraph.defaultProps = {
   onElementClick: () => {},
   onElementsRemove: () => {},
+  onConnect: () => {},
 	onLoad: () => {},
   onMove: () => {},
   onChange: () => {},

src/graph-utils.js

@@ -14,8 +14,13 @@ export const removeElements = (elements, elementsToRemove) => {
   });
 }
 
+let internalNodeId = 0;
+
+const getId = () => internalNodeId++;
+
 export const parseElements = e => {
   e.type = e.type || 'default';
+  e.id = e.id ? e.id : getId();
 
   if (isEdge(e)) {
     return e;
@@ -23,6 +28,7 @@ export const parseElements = e => {
 
   return {
     ...e,
+    id: e.id.toString(),
     __rg: {
       position: e.position,
       width: null,

src/index.js

@@ -1,4 +1,7 @@
 import ReactGraph from './ReactGraph';
+import _SourceHandle from './NodeRenderer/HandleTypes/SourceHandle';
+import _TargetHandle from './NodeRenderer/HandleTypes/TargetHandle';
+
 import {
   isNode as _isNode ,
   isEdge as _isEdge,
@@ -9,4 +12,7 @@ export const isNode = _isNode;
 export const isEdge = _isEdge;
 export const removeElements = _removeElements;
 
+export const SourceHandle = _SourceHandle;
+export const TargetHandle = _TargetHandle;
+
 export default ReactGraph;

src/style.css

@@ -97,15 +97,21 @@
 .react-graph__handle {
   position: absolute;
   width: 10px;
-  height: 5px;
+  height: 8px;
-  transform: translate(-50%, 0);
   background: rgba(255, 255, 255, 0.4);
-  left: 50%;
-  top: 0;
 
-  &.output {
+  &.source {
     top: auto;
+    left: 50%;
     bottom: 0;
+    transform: translate(-50%, 0);
+    cursor: crosshair;
+  }
+
+  &.target {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
   }
 }