Merge branch 'master' of github.com:wbkd/react-graph

.gitignore

@@ -1,4 +1,3 @@
 .DS_Store
 node_modules
-example/build
 .cache

dist/ReactGraph.js

@@ -250,14 +250,22 @@
       return !nodeIdsToRemove.includes(e.id) && !nodeIdsToRemove.includes(e.target) && !nodeIdsToRemove.includes(e.source);
     });
   };
+  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 _objectSpread2({}, e, {
+      id: e.id.toString(),
       __rg: {
         position: e.position,
         width: null,
@@ -30136,8 +30144,7 @@
 
   var GraphContext = React.createContext({});
   var Provider = function Provider(props) {
-    var onElementClick = props.onElementClick,
+    var children = props.children;
-        children = props.children;
 
     var _useReducer = React.useReducer(reducer, initialState),
         _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -30170,7 +30177,6 @@
       }
     });
     var graphContext = {
-      onElementClick: onElementClick,
       state: state,
       dispatch: dispatch
     };
@@ -30201,7 +30207,7 @@
 
     _createClass(NodeRenderer, [{
       key: "renderNode",
-      value: function renderNode(d, onElementClick) {
+      value: function renderNode(d) {
         var nodeType = d.type || 'default';
 
         if (!this.props.nodeTypes[nodeType]) {
@@ -30211,7 +30217,8 @@
         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));
       }
     }, {
@@ -30220,15 +30227,14 @@
         var _this = this;
 
         return React__default.createElement(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);
           }));
         });
       }
@@ -30264,7 +30270,7 @@
         }
 
         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"];
@@ -32803,7 +32809,9 @@
     return React__default.createElement("div", {
       className: "react-graph__renderer"
     }, React__default.createElement(NodeRenderer, {
-      nodeTypes: props.nodeTypes
+      nodeTypes: props.nodeTypes,
+      onElementClick: props.onElementClick,
+      onConnect: props.onConnect
     }), React__default.createElement(EdgeRenderer, {
       width: state.width,
       height: state.height,
@@ -32895,18 +32903,52 @@
   }());
   });
 
-  var Handle = React.memo(function (_ref) {
+  var NodeIdContext = React.createContext(null);
-    var input = _ref.input,
+  var Provider$1 = NodeIdContext.Provider;
-        output = _ref.output,
+  var Consumer$1 = NodeIdContext.Consumer;
-        rest = _objectWithoutProperties(_ref, ["input", "output"]);
 
-    var handleClasses = classnames('react-graph__handle', {
+  function _onDragStart(evt, nodeId) {
-      input: input,
+    evt.dataTransfer.setData("text/plain", nodeId);
-      output: output
+  }
+
+  var BaseHandle = React.memo(function (_ref) {
+    var source = _ref.source,
+        target = _ref.target,
+        rest = _objectWithoutProperties(_ref, ["source", "target"]);
+
+    var handleClasses = classnames('react-graph__handle', rest.className, {
+      source: source,
+      target: target
     });
-    return React__default.createElement("div", _extends({
+
-      className: handleClasses
+    if (target) {
-    }, rest));
+      return React__default.createElement("div", _extends({
+        className: handleClasses
+      }, rest));
+    }
+
+    return React__default.createElement(Consumer$1, null, function (nodeId) {
+      return React__default.createElement("div", _extends({
+        className: handleClasses
+      }, rest, {
+        draggable: true,
+        onDragStart: function onDragStart(evt) {
+          return _onDragStart(evt, nodeId);
+        }
+      }));
+    });
+  });
+
+  var _TargetHandle = (function (props) {
+    return React__default.createElement(BaseHandle, _extends({
+      target: true
+    }, props));
+  });
+
+  var _SourceHandle = (function (props) {
+    return React__default.createElement(BaseHandle, _extends({
+      source: true
+    }, props));
   });
 
   var nodeStyles = {
@@ -32920,11 +32962,7 @@
         style = _ref.style;
     return React__default.createElement("div", {
       style: _objectSpread2({}, nodeStyles, {}, style)
-    }, React__default.createElement(Handle, {
+    }, React__default.createElement(_TargetHandle, null), data.label, React__default.createElement(_SourceHandle, null));
-      input: true
-    }), data.label, React__default.createElement(Handle, {
-      output: true
-    }));
   });
 
   var nodeStyles$1 = {
@@ -32939,9 +32977,7 @@
     return React__default.createElement("div", {
       style: _objectSpread2({}, nodeStyles$1, {}, style),
       className: "react-graph__node-inner"
-    }, data.label, React__default.createElement(Handle, {
+    }, data.label, React__default.createElement(_SourceHandle, null));
-      output: true
-    }));
   });
 
   var nodeStyles$2 = {
@@ -32955,15 +32991,38 @@
         style = _ref.style;
     return React__default.createElement("div", {
       style: _objectSpread2({}, nodeStyles$2, {}, style)
-    }, React__default.createElement(Handle, {
+    }, React__default.createElement(_TargetHandle, null), data.label);
-      input: true
-    }), data.label);
   });
 
-  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 wrapNode = (function (NodeComponent) {
     return React.memo(function (props) {
       var nodeElement = React.useRef(null);
@@ -32984,7 +33043,8 @@
           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),
@@ -33002,14 +33062,19 @@
         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(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;
         }
 
@@ -33037,7 +33102,7 @@
       };
 
       var onNodeClick = function onNodeClick(evt) {
-        if (isInputTarget(evt)) {
+        if (isInput(evt)) {
           return false;
         }
 
@@ -33053,12 +33118,29 @@
         });
       };
 
+      var onDrop = function onDrop(evt) {
+        evt.preventDefault();
+        var source = evt.dataTransfer.getData('text/plain');
+
+        if (source === id) {
+          console.warn('You can\'t connect a node with itself.');
+          return false;
+        }
+
+        onConnect({
+          source: source,
+          target: id
+        });
+      };
+
       return React__default.createElement(reactDraggable.DraggableCore, {
         grid: [1, 1],
         onStart: onStart,
         onDrag: onDrag,
         scale: k
       }, React__default.createElement("div", {
+        onDrop: onDrop,
+        onDragOver: onDragOver,
         className: nodeClasses,
         ref: nodeElement,
         style: {
@@ -33066,9 +33148,11 @@
           transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
         },
         onClick: onNodeClick
+      }, React__default.createElement(Provider$1, {
+        value: id
       }, React__default.createElement(NodeComponent, _extends({}, props, {
         selected: selected
-      }))));
+      })))));
     });
   });
 
@@ -33091,10 +33175,16 @@
     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 sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
+    var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
-    var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
+    var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
-    var targetY = targetNode.__rg.position.y;
+    var sourceX = sourceNode.__rg.position.x + sourceHandleX;
+    var sourceY = sourceNode.__rg.position.y + sourceHandleY;
+    var targetHandle = targetNode.__rg.handleBounds.target;
+    var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
+    var targetHandleY = targetHandle ? targetHandle.y + targetHandle.height / 2 : 0;
+    var targetX = targetNode.__rg.position.x + targetHandleX;
+    var targetY = targetNode.__rg.position.y + targetHandleY;
     var yOffset = Math.abs(targetY - sourceY) / 2;
     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);
@@ -33107,16 +33197,20 @@
     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)
     }));
   });
 
-  var isInputTarget$1 = function isInputTarget(e) {
+  var isInput$1 = function isInput(e) {
     return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
   };
 
@@ -33143,7 +33237,7 @@
       return React__default.createElement("g", {
         className: edgeClasses,
         onClick: function onClick(e) {
-          if (isInputTarget$1(e)) {
+          if (isInput$1(e)) {
             return false;
           }
 
@@ -33203,7 +33297,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@-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: 5px;\n  transform: translate(-50%, 0);\n  background: rgba(255, 255, 255, 0.4);\n  left: 50%;\n  top: 0;\n}\n\n.react-graph__handle.output {\n    top: auto;\n    bottom: 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@-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 =
@@ -33233,7 +33327,8 @@
             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(parseElements).reduce(separateElements, {}),
             nodes = _elements$map$reduce.nodes,
@@ -33250,6 +33345,8 @@
           onLoad: onLoad,
           onMove: onMove,
           onChange: onChange,
+          onElementClick: onElementClick,
+          onConnect: onConnect,
           nodeTypes: this.nodeTypes,
           edgeTypes: this.edgeTypes
         }), React__default.createElement(GlobalKeyHandler, {
@@ -33264,6 +33361,7 @@
   ReactGraph.defaultProps = {
     onElementClick: function onElementClick() {},
     onElementsRemove: function onElementsRemove() {},
+    onConnect: function onConnect() {},
     onLoad: function onLoad() {},
     onMove: function onMove() {},
     onChange: function onChange() {},
@@ -33281,7 +33379,11 @@
   var isNode$1 = isNode;
   var isEdge$1 = isEdge;
   var removeElements$1 = removeElements;
+  var SourceHandle = _SourceHandle;
+  var TargetHandle = _TargetHandle;
 
+  exports.SourceHandle = SourceHandle;
+  exports.TargetHandle = TargetHandle;
   exports.default = ReactGraph;
   exports.isEdge = isEdge$1;
   exports.isNode = isNode$1;

example/SimpleGraph.js

@@ -1,18 +1,20 @@
 import React, { PureComponent } from 'react';
 
-import Graph, { isEdge, removeElements, getOutgoers } from '../src';
+import Graph, { isEdge, removeElements, getOutgoers, 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,12 +48,14 @@ 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' }},
       ]
     };
   }
@@ -114,6 +118,7 @@ class App extends PureComponent {
         elements={this.state.elements}
         onElementClick={element => this.onElementClick(element)}
         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/ReactGraph.ba0da17b.css

@@ -0,0 +1,119 @@
+.react-graph {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.react-graph__renderer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.react-graph__zoompane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.react-graph__selectionpane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.react-graph__selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+
+.react-graph__edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.react-graph__edge {
+  fill: none;
+  stroke: #333;
+  stroke-width: 2;
+  pointer-events: all;
+}
+
+.react-graph__edge.selected {
+    stroke: #ff5050;
+  }
+
+.react-graph__nodes {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-graph__node {
+  position: absolute;
+  color: #222;
+  font-family: sans-serif;
+  font-size: 12px;
+  text-align: center;
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+}
+
+.react-graph__node:hover > * {
+    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+  }
+
+.react-graph__node.selected > * {
+    box-shadow: 0 0 0 2px #000;
+  }
+
+.react-graph__handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  transform: translate(-50%, -50%);
+  background: #222;
+  left: 50%;
+  border-radius: 50%;
+}
+
+.react-graph__nodesselection {
+  z-index: 3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform-origin: left top;
+  pointer-events: none;
+}
+
+.react-graph__nodesselection-rect {
+    position: absolute;
+    background: rgba(0, 89, 220, 0.08);
+    border: 1px dotted rgba(0, 89, 220, 0.8);
+  }
+
+/*# sourceMappingURL=/ReactGraph.ba0da17b.css.map */

example/build/ReactGraph.ba0da17b.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../dist/ReactGraph.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ReactGraph.ba0da17b.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: #333;\n  stroke-width: 2;\n  pointer-events: all;\n}\n\n.react-graph__edge.selected {\n    stroke: #ff5050;\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 #000;\n  }\n\n.react-graph__handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  transform: translate(-50%, -50%);\n  background: #222;\n  left: 50%;\n  border-radius: 50%;\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  }"]}

example/build/ReactGraph.ba0da17b.js

@@ -0,0 +1,396 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"../node_modules/parcel-bundler/src/builtins/bundle-url.js":[function(require,module,exports) {
+var bundleURL = null;
+
+function getBundleURLCached() {
+  if (!bundleURL) {
+    bundleURL = getBundleURL();
+  }
+
+  return bundleURL;
+}
+
+function getBundleURL() {
+  // Attempt to find the URL of the current script and use that as the base URL
+  try {
+    throw new Error();
+  } catch (err) {
+    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
+
+    if (matches) {
+      return getBaseURL(matches[0]);
+    }
+  }
+
+  return '/';
+}
+
+function getBaseURL(url) {
+  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
+}
+
+exports.getBundleURL = getBundleURLCached;
+exports.getBaseURL = getBaseURL;
+},{}],"../node_modules/parcel-bundler/src/builtins/css-loader.js":[function(require,module,exports) {
+var bundle = require('./bundle-url');
+
+function updateLink(link) {
+  var newLink = link.cloneNode();
+
+  newLink.onload = function () {
+    link.remove();
+  };
+
+  newLink.href = link.href.split('?')[0] + '?' + Date.now();
+  link.parentNode.insertBefore(newLink, link.nextSibling);
+}
+
+var cssTimeout = null;
+
+function reloadCSS() {
+  if (cssTimeout) {
+    return;
+  }
+
+  cssTimeout = setTimeout(function () {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+
+    for (var i = 0; i < links.length; i++) {
+      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
+        updateLink(links[i]);
+      }
+    }
+
+    cssTimeout = null;
+  }, 50);
+}
+
+module.exports = reloadCSS;
+},{"./bundle-url":"../node_modules/parcel-bundler/src/builtins/bundle-url.js"}],"../dist/ReactGraph.css":[function(require,module,exports) {
+var reloadCSS = require('_css_loader');
+
+module.hot.dispose(reloadCSS);
+module.hot.accept(reloadCSS);
+},{"_css_loader":"../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
+var global = arguments[3];
+var OVERLAY_ID = '__parcel__error__overlay__';
+var OldModule = module.bundle.Module;
+
+function Module(moduleName) {
+  OldModule.call(this, moduleName);
+  this.hot = {
+    data: module.bundle.hotData,
+    _acceptCallbacks: [],
+    _disposeCallbacks: [],
+    accept: function (fn) {
+      this._acceptCallbacks.push(fn || function () {});
+    },
+    dispose: function (fn) {
+      this._disposeCallbacks.push(fn);
+    }
+  };
+  module.bundle.hotData = null;
+}
+
+module.bundle.Module = Module;
+var checkedAssets, assetsToAccept;
+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 + ':' + "65126" + '/');
+
+  ws.onmessage = function (event) {
+    checkedAssets = {};
+    assetsToAccept = [];
+    var data = JSON.parse(event.data);
+
+    if (data.type === 'update') {
+      var handled = false;
+      data.assets.forEach(function (asset) {
+        if (!asset.isNew) {
+          var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
+
+          if (didAccept) {
+            handled = true;
+          }
+        }
+      }); // Enable HMR for CSS by default.
+
+      handled = handled || data.assets.every(function (asset) {
+        return asset.type === 'css' && asset.generated.js;
+      });
+
+      if (handled) {
+        console.clear();
+        data.assets.forEach(function (asset) {
+          hmrApply(global.parcelRequire, asset);
+        });
+        assetsToAccept.forEach(function (v) {
+          hmrAcceptRun(v[0], v[1]);
+        });
+      } else {
+        window.location.reload();
+      }
+    }
+
+    if (data.type === 'reload') {
+      ws.close();
+
+      ws.onclose = function () {
+        location.reload();
+      };
+    }
+
+    if (data.type === 'error-resolved') {
+      console.log('[parcel] ✨ Error resolved');
+      removeErrorOverlay();
+    }
+
+    if (data.type === 'error') {
+      console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
+      removeErrorOverlay();
+      var overlay = createErrorOverlay(data);
+      document.body.appendChild(overlay);
+    }
+  };
+}
+
+function removeErrorOverlay() {
+  var overlay = document.getElementById(OVERLAY_ID);
+
+  if (overlay) {
+    overlay.remove();
+  }
+}
+
+function createErrorOverlay(data) {
+  var overlay = document.createElement('div');
+  overlay.id = OVERLAY_ID; // html encode message and stack trace
+
+  var message = document.createElement('div');
+  var stackTrace = document.createElement('pre');
+  message.innerText = data.error.message;
+  stackTrace.innerText = data.error.stack;
+  overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
+  return overlay;
+}
+
+function getParents(bundle, id) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return [];
+  }
+
+  var parents = [];
+  var k, d, dep;
+
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+
+      if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
+        parents.push(k);
+      }
+    }
+  }
+
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+
+  return parents;
+}
+
+function hmrApply(bundle, asset) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return;
+  }
+
+  if (modules[asset.id] || !bundle.parent) {
+    var fn = new Function('require', 'module', 'exports', asset.generated.js);
+    asset.isNew = !modules[asset.id];
+    modules[asset.id] = [fn, asset.deps];
+  } else if (bundle.parent) {
+    hmrApply(bundle.parent, asset);
+  }
+}
+
+function hmrAcceptCheck(bundle, id) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return;
+  }
+
+  if (!modules[id] && bundle.parent) {
+    return hmrAcceptCheck(bundle.parent, id);
+  }
+
+  if (checkedAssets[id]) {
+    return;
+  }
+
+  checkedAssets[id] = true;
+  var cached = bundle.cache[id];
+  assetsToAccept.push([bundle, id]);
+
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    return true;
+  }
+
+  return getParents(global.parcelRequire, id).some(function (id) {
+    return hmrAcceptCheck(global.parcelRequire, id);
+  });
+}
+
+function hmrAcceptRun(bundle, id) {
+  var cached = bundle.cache[id];
+  bundle.hotData = {};
+
+  if (cached) {
+    cached.hot.data = bundle.hotData;
+  }
+
+  if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
+    cached.hot._disposeCallbacks.forEach(function (cb) {
+      cb(bundle.hotData);
+    });
+  }
+
+  delete bundle.cache[id];
+  bundle(id);
+  cached = bundle.cache[id];
+
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    cached.hot._acceptCallbacks.forEach(function (cb) {
+      cb();
+    });
+
+    return true;
+  }
+}
+},{}]},{},["../node_modules/parcel-bundler/src/builtins/hmr-runtime.js"], null)
+//# sourceMappingURL=/ReactGraph.ba0da17b.js.map

example/build/ReactGraph.ba0da17b.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../node_modules/parcel-bundler/src/builtins/bundle-url.js","../node_modules/parcel-bundler/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"ReactGraph.ba0da17b.js","sourceRoot":"..","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n  if (!bundleURL) {\n    bundleURL = getBundleURL();\n  }\n\n  return bundleURL;\n}\n\nfunction getBundleURL() {\n  // Attempt to find the URL of the current script and use that as the base URL\n  try {\n    throw new Error;\n  } catch (err) {\n    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n    if (matches) {\n      return getBaseURL(matches[0]);\n    }\n  }\n\n  return '/';\n}\n\nfunction getBaseURL(url) {\n  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n  var newLink = link.cloneNode();\n  newLink.onload = function () {\n    link.remove();\n  };\n  newLink.href = link.href.split('?')[0] + '?' + Date.now();\n  link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n  if (cssTimeout) {\n    return;\n  }\n\n  cssTimeout = setTimeout(function () {\n    var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n    for (var i = 0; i < links.length; i++) {\n      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n        updateLink(links[i]);\n      }\n    }\n\n    cssTimeout = null;\n  }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}

example/build/example.e31bb0bc.css

@@ -0,0 +1,145 @@
+.react-graph {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.react-graph__renderer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.react-graph__zoompane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.react-graph__selectionpane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.react-graph__selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+
+.react-graph__edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.react-graph__edge {
+  fill: none;
+  stroke: #bbb;
+  stroke-width: 2;
+  pointer-events: all;
+}
+
+.react-graph__edge.selected {
+    stroke: #555;
+  }
+
+.react-graph__edge.animated {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+
+@-webkit-keyframes dashdraw {
+  from {stroke-dashoffset: 10}
+}
+
+@keyframes dashdraw {
+  from {stroke-dashoffset: 10}
+}
+
+.react-graph__nodes {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-graph__node {
+  position: absolute;
+  color: #222;
+  font-family: sans-serif;
+  font-size: 12px;
+  text-align: center;
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+}
+
+.react-graph__node:hover > * {
+    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+  }
+
+.react-graph__node.selected > * {
+    box-shadow: 0 0 0 2px #555;
+  }
+
+.react-graph__handle {
+  position: absolute;
+  width: 10px;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.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 {
+  z-index: 3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform-origin: left top;
+  pointer-events: none;
+}
+
+.react-graph__nodesselection-rect {
+    position: absolute;
+    background: rgba(0, 89, 220, 0.08);
+    border: 1px dotted rgba(0, 89, 220, 0.8);
+    pointer-events: all;
+  }
+
+/*# sourceMappingURL=/example.e31bb0bc.css.map */

example/build/example.e31bb0bc.css.map

@@ -0,0 +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,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/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <!--<link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css">-->
+  <title>Document</title>
+  <style>html, body {
+      margin: 0
+    }
+    html, body, #root {
+      height: 100%;
+    }
+    .controls {
+      position: absolute;
+      bottom: 10px;
+      left: 10px;
+      z-index: 4;
+    }</style>
+<link rel="stylesheet" href="/example.e31bb0bc.css"></head>
+<body>
+  <div id="root"></div>
+	<script src="/example.e31bb0bc.js"></script>
+</body>
+</html>

example/build/index.js

@@ -0,0 +1,391 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"../node_modules/parcel-bundler/src/builtins/bundle-url.js":[function(require,module,exports) {
+var bundleURL = null;
+
+function getBundleURLCached() {
+  if (!bundleURL) {
+    bundleURL = getBundleURL();
+  }
+
+  return bundleURL;
+}
+
+function getBundleURL() {
+  // Attempt to find the URL of the current script and use that as the base URL
+  try {
+    throw new Error();
+  } catch (err) {
+    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
+
+    if (matches) {
+      return getBaseURL(matches[0]);
+    }
+  }
+
+  return '/';
+}
+
+function getBaseURL(url) {
+  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
+}
+
+exports.getBundleURL = getBundleURLCached;
+exports.getBaseURL = getBaseURL;
+},{}],"../node_modules/parcel-bundler/src/builtins/css-loader.js":[function(require,module,exports) {
+var bundle = require('./bundle-url');
+
+function updateLink(link) {
+  var newLink = link.cloneNode();
+
+  newLink.onload = function () {
+    link.remove();
+  };
+
+  newLink.href = link.href.split('?')[0] + '?' + Date.now();
+  link.parentNode.insertBefore(newLink, link.nextSibling);
+}
+
+var cssTimeout = null;
+
+function reloadCSS() {
+  if (cssTimeout) {
+    return;
+  }
+
+  cssTimeout = setTimeout(function () {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+
+    for (var i = 0; i < links.length; i++) {
+      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
+        updateLink(links[i]);
+      }
+    }
+
+    cssTimeout = null;
+  }, 50);
+}
+
+module.exports = reloadCSS;
+},{"./bundle-url":"../node_modules/parcel-bundler/src/builtins/bundle-url.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
+var global = arguments[3];
+var OVERLAY_ID = '__parcel__error__overlay__';
+var OldModule = module.bundle.Module;
+
+function Module(moduleName) {
+  OldModule.call(this, moduleName);
+  this.hot = {
+    data: module.bundle.hotData,
+    _acceptCallbacks: [],
+    _disposeCallbacks: [],
+    accept: function (fn) {
+      this._acceptCallbacks.push(fn || function () {});
+    },
+    dispose: function (fn) {
+      this._disposeCallbacks.push(fn);
+    }
+  };
+  module.bundle.hotData = null;
+}
+
+module.bundle.Module = Module;
+var checkedAssets, assetsToAccept;
+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 + ':' + "54186" + '/');
+
+  ws.onmessage = function (event) {
+    checkedAssets = {};
+    assetsToAccept = [];
+    var data = JSON.parse(event.data);
+
+    if (data.type === 'update') {
+      var handled = false;
+      data.assets.forEach(function (asset) {
+        if (!asset.isNew) {
+          var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
+
+          if (didAccept) {
+            handled = true;
+          }
+        }
+      }); // Enable HMR for CSS by default.
+
+      handled = handled || data.assets.every(function (asset) {
+        return asset.type === 'css' && asset.generated.js;
+      });
+
+      if (handled) {
+        console.clear();
+        data.assets.forEach(function (asset) {
+          hmrApply(global.parcelRequire, asset);
+        });
+        assetsToAccept.forEach(function (v) {
+          hmrAcceptRun(v[0], v[1]);
+        });
+      } else {
+        window.location.reload();
+      }
+    }
+
+    if (data.type === 'reload') {
+      ws.close();
+
+      ws.onclose = function () {
+        location.reload();
+      };
+    }
+
+    if (data.type === 'error-resolved') {
+      console.log('[parcel] ✨ Error resolved');
+      removeErrorOverlay();
+    }
+
+    if (data.type === 'error') {
+      console.error('[parcel] 🚨  ' + data.error.message + '\n' + data.error.stack);
+      removeErrorOverlay();
+      var overlay = createErrorOverlay(data);
+      document.body.appendChild(overlay);
+    }
+  };
+}
+
+function removeErrorOverlay() {
+  var overlay = document.getElementById(OVERLAY_ID);
+
+  if (overlay) {
+    overlay.remove();
+  }
+}
+
+function createErrorOverlay(data) {
+  var overlay = document.createElement('div');
+  overlay.id = OVERLAY_ID; // html encode message and stack trace
+
+  var message = document.createElement('div');
+  var stackTrace = document.createElement('pre');
+  message.innerText = data.error.message;
+  stackTrace.innerText = data.error.stack;
+  overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
+  return overlay;
+}
+
+function getParents(bundle, id) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return [];
+  }
+
+  var parents = [];
+  var k, d, dep;
+
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+
+      if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
+        parents.push(k);
+      }
+    }
+  }
+
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+
+  return parents;
+}
+
+function hmrApply(bundle, asset) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return;
+  }
+
+  if (modules[asset.id] || !bundle.parent) {
+    var fn = new Function('require', 'module', 'exports', asset.generated.js);
+    asset.isNew = !modules[asset.id];
+    modules[asset.id] = [fn, asset.deps];
+  } else if (bundle.parent) {
+    hmrApply(bundle.parent, asset);
+  }
+}
+
+function hmrAcceptCheck(bundle, id) {
+  var modules = bundle.modules;
+
+  if (!modules) {
+    return;
+  }
+
+  if (!modules[id] && bundle.parent) {
+    return hmrAcceptCheck(bundle.parent, id);
+  }
+
+  if (checkedAssets[id]) {
+    return;
+  }
+
+  checkedAssets[id] = true;
+  var cached = bundle.cache[id];
+  assetsToAccept.push([bundle, id]);
+
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    return true;
+  }
+
+  return getParents(global.parcelRequire, id).some(function (id) {
+    return hmrAcceptCheck(global.parcelRequire, id);
+  });
+}
+
+function hmrAcceptRun(bundle, id) {
+  var cached = bundle.cache[id];
+  bundle.hotData = {};
+
+  if (cached) {
+    cached.hot.data = bundle.hotData;
+  }
+
+  if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
+    cached.hot._disposeCallbacks.forEach(function (cb) {
+      cb(bundle.hotData);
+    });
+  }
+
+  delete bundle.cache[id];
+  bundle(id);
+  cached = bundle.cache[id];
+
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    cached.hot._acceptCallbacks.forEach(function (cb) {
+      cb();
+    });
+
+    return true;
+  }
+}
+},{}]},{},["../node_modules/parcel-bundler/src/builtins/hmr-runtime.js"], null)
+//# sourceMappingURL=/index.js.map

example/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../node_modules/parcel-bundler/src/builtins/bundle-url.js","../node_modules/parcel-bundler/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"index.js","sourceRoot":"..","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n  if (!bundleURL) {\n    bundleURL = getBundleURL();\n  }\n\n  return bundleURL;\n}\n\nfunction getBundleURL() {\n  // Attempt to find the URL of the current script and use that as the base URL\n  try {\n    throw new Error;\n  } catch (err) {\n    var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n    if (matches) {\n      return getBaseURL(matches[0]);\n    }\n  }\n\n  return '/';\n}\n\nfunction getBaseURL(url) {\n  return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n  var newLink = link.cloneNode();\n  newLink.onload = function () {\n    link.remove();\n  };\n  newLink.href = link.href.split('?')[0] + '?' + Date.now();\n  link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n  if (cssTimeout) {\n    return;\n  }\n\n  cssTimeout = setTimeout(function () {\n    var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n    for (var i = 0; i < links.length; i++) {\n      if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n        updateLink(links[i]);\n      }\n    }\n\n    cssTimeout = null;\n  }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}

src/EdgeRenderer/EdgeTypes/BezierEdge.js

@@ -4,11 +4,17 @@ 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 sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
+  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
+  const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
+  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
+  const sourceY = sourceNode.__rg.position.y + sourceHandleY;
 
-  const targetX = targetNode.__rg.position.x + (targetNode.__rg.width / 2);
+  const targetHandle = targetNode.__rg.handleBounds.target;
-  const targetY = targetNode.__rg.position.y;
+  const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
+  const targetHandleY = targetHandle ? targetHandle.y + (targetHandle.height / 2) : 0;
+  const targetX = targetNode.__rg.position.x + targetHandleX;
+  const targetY = targetNode.__rg.position.y + targetHandleY;
 
   const yOffset = Math.abs(targetY - sourceY) / 2;
   const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;

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,38 @@
+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',
+    rest.className,
+    { 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,19 @@ export default NodeComponent => memo((props) => {
     onClick({ id, type, data, position });
   };
 
+  const onDrop = (evt) => {
+    evt.preventDefault();
+
+    const source = evt.dataTransfer.getData('text/plain');
+
+    if (source === id) {
+      console.warn('You can\'t connect a node with itself.');
+      return false;
+    }
+
+    onConnect({ source, target: id });
+  };
+
   return (
     <ReactDraggable.DraggableCore
       grid={[1, 1]}
@@ -70,12 +111,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

@@ -23,8 +23,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;
@@ -32,6 +37,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,
@@ -11,4 +14,7 @@ export const isEdge = _isEdge;
 export const removeElements = _removeElements;
 export const getOutgoers = _getOutgoers;
 
+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);
   }
 }