fix(connection): always scale handle dimensions

example/SimpleGraph.js

@@ -112,13 +112,19 @@ class App extends PureComponent {
     }));
   }
 
+  onConnect(params) {
+    this.setState(prevState => ({
+      elements: prevState.elements.concat(params)
+    }));
+  }
+
   render() {
     return (
       <Graph
         elements={this.state.elements}
         onElementClick={element => this.onElementClick(element)}
         onElementsRemove={elements => this.onElementsRemove(elements)}
-        onConnect={params => console.log(params)}
+        onConnect={params => this.onConnect(params)}
         onNodeDragStop={node => console.log('drag stop', node)}
         style={{ width: '100%', height: '100%' }}
         onLoad={graphInstance => this.onLoad(graphInstance)}

example/build/example.e31bb0bc.css

@@ -62,6 +62,10 @@
             animation: dashdraw 0.5s linear infinite;
   }
 
+.react-graph__edge.connector {
+    pointer-events: none;
+  }
+
 @-webkit-keyframes dashdraw {
   from {stroke-dashoffset: 10}
 }

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,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}"]}
+{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,oBAAoB;EACpB,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,YAAY;EACZ,eAAe;EACf,mBAAmB;AAcrB;;AAZE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;AAEA;IACE,oBAAoB;EACtB;;AAGF;EACE,MAAM,qBAAqB;AAC7B;;AAFA;EACE,MAAM,qBAAqB;AAC7B;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACV,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,uBAAuB;EACvB,eAAe;EACf,kBAAkB;EAClB,oBAAY;EAAZ,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;AASvB;;AAPE;IACE,6CAA6C;EAC/C;;AAEA;IACE,0BAA0B;EAC5B;;AAGF;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,oCAAoC;AAetC;;AAbE;IACE,SAAS;IACT,SAAS;IACT,SAAS;IACT,6BAA6B;IAC7B,iBAAiB;EACnB;;AAEA;IACE,SAAS;IACT,MAAM;IACN,6BAA6B;EAC/B;;AAGF;EACE,UAAU;EACV,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,MAAM;EACN,OAAO;EACP,0BAA0B;EAC1B,oBAAoB;AAQtB;;AANE;IACE,kBAAkB;IAClB,kCAAkC;IAClC,wCAAwC;IACxC,mBAAmB;EACrB","file":"example.e31bb0bc.css","sourceRoot":"..","sourcesContent":[".react-graph {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-graph__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-graph__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-graph__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-graph__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.react-graph__edge {\n  fill: none;\n  stroke: #bbb;\n  stroke-width: 2;\n  pointer-events: all;\n\n  &.selected {\n    stroke: #555;\n  }\n\n  &.animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n\n  &.connector {\n    pointer-events: none;\n  }\n}\n\n@keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-graph__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: grab;\n  user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n\n  &:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n  &.selected > * {\n    box-shadow: 0 0 0 2px #555;\n  }\n}\n\n.react-graph__handle {\n  position: absolute;\n  width: 10px;\n  height: 8px;\n  background: rgba(255, 255, 255, 0.4);\n\n  &.source {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0);\n    cursor: crosshair;\n  }\n\n  &.target {\n    left: 50%;\n    top: 0;\n    transform: translate(-50%, 0);\n  }\n}\n\n.react-graph__nodesselection {\n  z-index: 3;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform-origin: left top;\n  pointer-events: none;\n\n  &-rect {\n    position: absolute;\n    background: rgba(0, 89, 220, 0.08);\n    border: 1px dotted rgba(0, 89, 220, 0.8);\n    pointer-events: all;\n  }\n}"]}

example/build/example.e31bb0bc.js

@@ -37695,7 +37695,7 @@ module.exports = isEqual;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.reducer = exports.initialState = exports.REMOVE_NODES = exports.SET_SELECTED_ELEMENTS = exports.SET_NODES_SELECTION = exports.SET_SELECTION = exports.UPDATE_SELECTION = exports.ZOOM_OUT = exports.ZOOM_IN = exports.FIT_VIEW = exports.INIT_D3 = exports.UPDATE_SIZE = exports.UPDATE_TRANSFORM = exports.UPDATE_NODE_POS = exports.UPDATE_NODE_DATA = exports.SET_NODES = exports.SET_EDGES = void 0;
+exports.reducer = exports.initialState = exports.SET_CONNECTION_POS = exports.SET_CONNECTING = exports.REMOVE_NODES = exports.SET_SELECTED_ELEMENTS = exports.SET_NODES_SELECTION = exports.SET_SELECTION = exports.UPDATE_SELECTION = exports.ZOOM_OUT = exports.ZOOM_IN = exports.FIT_VIEW = exports.INIT_D3 = exports.UPDATE_SIZE = exports.UPDATE_TRANSFORM = exports.UPDATE_NODE_POS = exports.UPDATE_NODE_DATA = exports.SET_NODES = exports.SET_EDGES = void 0;
 
 var _d3Zoom = require("d3-zoom");
 
@@ -37745,6 +37745,10 @@ var SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
 exports.SET_SELECTED_ELEMENTS = SET_SELECTED_ELEMENTS;
 var REMOVE_NODES = 'REMOVE_NODES';
 exports.REMOVE_NODES = REMOVE_NODES;
+var SET_CONNECTING = 'SET_CONNECTING';
+exports.SET_CONNECTING = SET_CONNECTING;
+var SET_CONNECTION_POS = 'SET_CONNECTION_POS';
+exports.SET_CONNECTION_POS = SET_CONNECTION_POS;
 var initialState = {
   width: 0,
   height: 0,
@@ -37763,7 +37767,13 @@ var initialState = {
   d3Initialised: false,
   nodesSelectionActive: false,
   selectionActive: false,
-  selection: {}
+  selection: {},
+  isConnecting: false,
+  connectionSourceId: null,
+  connectionPosition: {
+    x: 0,
+    y: 0
+  }
 };
 exports.initialState = initialState;
 
@@ -37875,6 +37885,8 @@ var reducer = function reducer(state, action) {
     case UPDATE_SIZE:
     case SET_SELECTION:
     case SET_SELECTED_ELEMENTS:
+    case SET_CONNECTING:
+    case SET_CONNECTION_POS:
       return _objectSpread({}, state, {}, action.payload);
 
     default:
@@ -37889,7 +37901,7 @@ exports.reducer = reducer;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
+exports.setConnectionPos = exports.setConnecting = exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
 
 var _index = require("./index");
 
@@ -38063,6 +38075,36 @@ var updateSelection = function updateSelection(selection) {
 };
 
 exports.updateSelection = updateSelection;
+
+var setConnecting = function setConnecting(_ref4) {
+  var isConnecting = _ref4.isConnecting,
+      connectionSourceId = _ref4.connectionSourceId;
+  return {
+    type: _index.SET_CONNECTING,
+    payload: {
+      isConnecting: isConnecting,
+      connectionSourceId: connectionSourceId
+    }
+  };
+};
+
+exports.setConnecting = setConnecting;
+
+var setConnectionPos = function setConnectionPos(_ref5) {
+  var x = _ref5.x,
+      y = _ref5.y;
+  return {
+    type: _index.SET_CONNECTION_POS,
+    payload: {
+      connectionPosition: {
+        x: x,
+        y: y
+      }
+    }
+  };
+};
+
+exports.setConnectionPos = setConnectionPos;
 },{"./index":"../src/state/index.js"}],"../src/GraphContext/index.js":[function(require,module,exports) {
 "use strict";
 
@@ -38241,7 +38283,123 @@ function (_PureComponent) {
 
 var _default = NodeRenderer;
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js"}],"../src/EdgeRenderer/index.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js"}],"../node_modules/classnames/index.js":[function(require,module,exports) {
+var define;
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+	'use strict';
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg) && arg.length) {
+				var inner = classNames.apply(null, arg);
+				if (inner) {
+					classes.push(inner);
+				}
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (typeof module !== 'undefined' && module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
+		// register as 'classnames', consistent with npm package name
+		define('classnames', [], function () {
+			return classNames;
+		});
+	} else {
+		window.classNames = classNames;
+	}
+}());
+
+},{}],"../src/ConnectorEdge/index.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _default = function _default(props) {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      sourceNode = _useState2[0],
+      setSourceNode = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setSourceNode(props.nodes.find(function (n) {
+      return n.id === props.connectionSourceId;
+    }));
+  }, []);
+
+  if (!sourceNode) {
+    return null;
+  }
+
+  var style = props.style || {};
+  var className = (0, _classnames.default)('react-graph__edge', 'connector', props.className);
+  var sourceHandle = sourceNode.__rg.handleBounds.source;
+  var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+  var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
+  var sourceX = sourceNode.__rg.position.x + sourceHandleX;
+  var sourceY = sourceNode.__rg.position.y + sourceHandleY;
+  var targetX = props.connectionPosition.x;
+  var targetY = props.connectionPosition.y;
+  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);
+  return _react.default.createElement("path", _extends({
+    className: className,
+    d: dAttr
+  }, style));
+};
+
+exports.default = _default;
+},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js"}],"../src/EdgeRenderer/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -38253,6 +38411,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _GraphContext = require("../GraphContext");
 
+var _ConnectorEdge = _interopRequireDefault(require("../ConnectorEdge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -38320,15 +38482,15 @@ function (_PureComponent) {
 
       var _this$props = this.props,
           width = _this$props.width,
-          height = _this$props.height;
+          height = _this$props.height,
+          onElementClick = _this$props.onElementClick;
 
       if (!width) {
         return null;
       }
 
       return _react.default.createElement(_GraphContext.Consumer, null, function (_ref) {
-        var state = _ref.state,
+        var state = _ref.state;
-            onElementClick = _ref.onElementClick;
         return _react.default.createElement("svg", {
           width: width,
           height: height,
@@ -38337,7 +38499,11 @@ function (_PureComponent) {
           transform: "translate(".concat(state.transform[0], ",").concat(state.transform[1], ") scale(").concat(state.transform[2], ")")
         }, state.edges.map(function (e) {
           return _this.renderEdge(e, state.nodes, onElementClick);
-        })));
+        })), state.isConnecting && _react.default.createElement(_ConnectorEdge.default, {
+          nodes: state.nodes,
+          connectionSourceId: state.connectionSourceId,
+          connectionPosition: state.connectionPosition
+        }));
       });
     }
   }]);
@@ -38347,7 +38513,7 @@ function (_PureComponent) {
 
 var _default = EdgeRenderer;
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectorEdge":"../src/ConnectorEdge/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -40972,7 +41138,8 @@ var GraphView = (0, _react.memo)(function (props) {
   }), _react.default.createElement(_EdgeRenderer.default, {
     width: state.width,
     height: state.height,
-    edgeTypes: props.edgeTypes
+    edgeTypes: props.edgeTypes,
+    onElementClick: props.onElementClick
   }), shiftPressed && _react.default.createElement(_UserSelection.default, null), state.nodesSelectionActive && _react.default.createElement(_NodesSelection.default, null), _react.default.createElement("div", {
     className: "react-graph__zoompane",
     onClick: function onClick() {
@@ -41040,62 +41207,7 @@ var _default = (0, _react.memo)(function (props) {
 });
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","../hooks":"../src/hooks.js","../state/actions":"../src/state/actions.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js"}],"../node_modules/classnames/index.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","../hooks":"../src/hooks.js","../state/actions":"../src/state/actions.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js"}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
-var define;
-/*!
-  Copyright (c) 2017 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-/* global define */
-
-(function () {
-	'use strict';
-
-	var hasOwn = {}.hasOwnProperty;
-
-	function classNames () {
-		var classes = [];
-
-		for (var i = 0; i < arguments.length; i++) {
-			var arg = arguments[i];
-			if (!arg) continue;
-
-			var argType = typeof arg;
-
-			if (argType === 'string' || argType === 'number') {
-				classes.push(arg);
-			} else if (Array.isArray(arg) && arg.length) {
-				var inner = classNames.apply(null, arg);
-				if (inner) {
-					classes.push(inner);
-				}
-			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
-					}
-				}
-			}
-		}
-
-		return classes.join(' ');
-	}
-
-	if (typeof module !== 'undefined' && module.exports) {
-		classNames.default = classNames;
-		module.exports = classNames;
-	} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
-		// register as 'classnames', consistent with npm package name
-		define('classnames', [], function () {
-			return classNames;
-		});
-	} else {
-		window.classNames = classNames;
-	}
-}());
-
-},{}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41126,6 +41238,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _NodeIdContext = require("../NodeIdContext");
 
+var _GraphContext = require("../../GraphContext");
+
+var _actions = require("../../state/actions");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -41136,8 +41252,14 @@ 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) {
+function _onDragStart(evt, nodeId, dispatch) {
-  evt.dataTransfer.setData("text/plain", nodeId);
+  evt.dataTransfer.setData("text/plain", nodeId); // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
+}
+
+function onDragStop(evt, dispatch) {// dispatch(setConnecting({ isConnecting: false }));
+}
+
+function _onDrag(evt, dispatch) {// dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
 }
 
 var _default = (0, _react.memo)(function (_ref) {
@@ -41145,6 +41267,9 @@ var _default = (0, _react.memo)(function (_ref) {
       target = _ref.target,
       rest = _objectWithoutProperties(_ref, ["source", "target"]);
 
+  var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
+      dispatch = _useContext.dispatch;
+
   var handleClasses = (0, _classnames.default)('react-graph__handle', rest.className, {
     source: source,
     target: target
@@ -41162,14 +41287,20 @@ var _default = (0, _react.memo)(function (_ref) {
     }, rest, {
       draggable: true,
       onDragStart: function onDragStart(evt) {
-        return _onDragStart(evt, nodeId);
+        return _onDragStart(evt, nodeId, dispatch);
+      },
+      onDrag: function onDrag(evt) {
+        return _onDrag(evt, dispatch);
+      },
+      onDragEnd: function onDragEnd(evt) {
+        return onDragStop(evt, dispatch);
       }
     }));
   });
 });
 
 exports.default = _default;
-},{"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) {
+},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js","../../GraphContext":"../src/GraphContext/index.js","../../state/actions":"../src/state/actions.js"}],"../src/NodeRenderer/HandleTypes/TargetHandle.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41370,7 +41501,7 @@ var isHandle = function isHandle(e) {
   return e.target.className && e.target.className.includes('source');
 };
 
-var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
+var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {
   var handle = nodeElement.querySelector(sel);
 
   if (!handle) {
@@ -41378,11 +41509,13 @@ var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
   }
 
   var bounds = handle.getBoundingClientRect();
+  var unscaledWith = Math.round(bounds.width * (1 / k));
+  var unscaledHeight = Math.round(bounds.height * (1 / k));
   return {
-    x: bounds.x - parentBounds.x,
+    x: (bounds.x - parentBounds.x) * (1 / k),
-    y: bounds.y - parentBounds.y,
+    y: (bounds.y - parentBounds.y) * (1 / k),
-    width: bounds.width,
+    width: unscaledWith,
-    height: bounds.height
+    height: unscaledHeight
   };
 };
 
@@ -41432,8 +41565,8 @@ var _default = function _default(NodeComponent) {
       var unscaledWith = Math.round(bounds.width * (1 / k));
       var unscaledHeight = Math.round(bounds.height * (1 / k));
       var handleBounds = {
-        source: getHandleBounds('.source', nodeElement.current, bounds),
+        source: getHandleBounds('.source', nodeElement.current, bounds, k),
-        target: getHandleBounds('.target', nodeElement.current, bounds)
+        target: getHandleBounds('.target', nodeElement.current, bounds, k)
       };
       dispatch((0, _actions.updateNodeData)(id, {
         width: unscaledWith,
@@ -41915,8 +42048,7 @@ function (_PureComponent) {
         className: "react-graph"
       }, _react.default.createElement(_GraphContext.Provider, {
         nodes: nodes,
-        edges: edges,
+        edges: edges
-        onElementClick: onElementClick
       }, _react.default.createElement(_GraphView.default, {
         onLoad: onLoad,
         onMove: onMove,
@@ -42266,6 +42398,15 @@ function (_PureComponent) {
         };
       });
     }
+  }, {
+    key: "onConnect",
+    value: function onConnect(params) {
+      this.setState(function (prevState) {
+        return {
+          elements: prevState.elements.concat(params)
+        };
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -42280,7 +42421,7 @@ function (_PureComponent) {
           return _this2.onElementsRemove(elements);
         },
         onConnect: function onConnect(params) {
-          return console.log(params);
+          return _this2.onConnect(params);
         },
         onNodeDragStop: function onNodeDragStop(node) {
           return console.log('drag stop', node);
@@ -42375,7 +42516,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 + ':' + "61136" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "50947" + '/');
 
   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 + ':' + "61136" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "50947" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/ConnectorEdge/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import cx from 'classnames';
+
+export default (props) => {
+  const [sourceNode, setSourceNode] = useState(null);
+  useEffect(() => {
+    setSourceNode(props.nodes.find(n => n.id === props.connectionSourceId));
+  }, []);
+
+  if (!sourceNode) {
+    return null;
+  }
+
+  const style = props.style || {};
+  const className = cx('react-graph__edge', 'connector', props.className);
+
+  const sourceHandle = sourceNode.__rg.handleBounds.source;
+  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 = props.connectionPosition.x;
+  const targetY = props.connectionPosition.y;
+
+  const yOffset = Math.abs(targetY - sourceY) / 2;
+  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+  const dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+
+  return (
+    <path
+      className={className}
+      d={dAttr}
+      {...style}
+    />
+  );
+};

src/EdgeRenderer/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Consumer } from '../GraphContext';
+import ConnectorEdge from '../ConnectorEdge';
 
 class EdgeRenderer extends PureComponent {
   renderEdge(e, nodes, onElementClick) {
@@ -30,7 +31,7 @@ class EdgeRenderer extends PureComponent {
   }
 
   render() {
-    const { width, height } = this.props;
+    const { width, height, onElementClick } = this.props;
 
     if (!width) {
       return null;
@@ -38,7 +39,7 @@ class EdgeRenderer extends PureComponent {
 
     return (
       <Consumer>
-        {({ state, onElementClick }) => (
+        {({ state }) => (
           <svg
             width={width}
             height={height}
@@ -49,6 +50,13 @@ class EdgeRenderer extends PureComponent {
             >
               {state.edges.map(e => this.renderEdge(e, state.nodes, onElementClick))}
             </g>
+            {state.isConnecting && (
+              <ConnectorEdge
+                nodes={state.nodes}
+                connectionSourceId={state.connectionSourceId}
+                connectionPosition={state.connectionPosition}
+              />
+            )}
           </svg>
         )}
       </Consumer>

src/GraphView/index.js

@@ -88,6 +88,7 @@ const GraphView = memo((props) => {
         width={state.width}
         height={state.height}
         edgeTypes={props.edgeTypes}
+        onElementClick={props.onElementClick}
       />
       {shiftPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -1,13 +1,26 @@
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
 import cx from 'classnames';
 
 import { Consumer } from '../NodeIdContext'
+import { GraphContext } from '../../GraphContext';
+import { setConnecting, setConnectionPos } from '../../state/actions';
 
-function onDragStart(evt, nodeId) {
+function onDragStart(evt, nodeId, dispatch) {
   evt.dataTransfer.setData("text/plain", nodeId);
+
+  // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
+}
+
+function onDragStop(evt, dispatch) {
+  // dispatch(setConnecting({ isConnecting: false }));
+}
+
+function onDrag(evt, dispatch) {
+  // dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
 }
 
 export default memo(({ source, target, ...rest }) => {
+  const { dispatch } = useContext(GraphContext)
   const handleClasses = cx(
     'react-graph__handle',
     rest.className,
@@ -30,7 +43,9 @@ export default memo(({ source, target, ...rest }) => {
           className={handleClasses}
           {...rest}
           draggable
-          onDragStart={evt => onDragStart(evt, nodeId)}
+          onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
+          onDrag={evt => onDrag(evt, dispatch)}
+          onDragEnd={evt => onDragStop(evt, dispatch)}
         />
       )}
     </Consumer>

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -10,7 +10,7 @@ import { Provider } from '../NodeIdContext';
 const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 const isHandle = e => e.target.className && e.target.className.includes('source');
 
-const getHandleBounds = (sel, nodeElement, parentBounds) => {
+const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   const handle = nodeElement.querySelector(sel);
 
   if (!handle) {
@@ -18,11 +18,14 @@ const getHandleBounds = (sel, nodeElement, parentBounds) => {
   }
 
   const bounds = handle.getBoundingClientRect();
+  const unscaledWith = Math.round(bounds.width * (1 / k));
+  const unscaledHeight = Math.round(bounds.height * (1 / k));
+
   return {
-    x: bounds.x - parentBounds.x,
+    x: (bounds.x - parentBounds.x) * (1 / k),
-    y: bounds.y - parentBounds.y,
+    y: (bounds.y - parentBounds.y) * (1 / k),
-    width: bounds.width,
+    width: unscaledWith,
-    height: bounds.height
+    height: unscaledHeight
   };
 };
 
@@ -49,8 +52,8 @@ export default NodeComponent => memo((props) => {
     const unscaledWith = Math.round(bounds.width * (1 / k));
     const unscaledHeight = Math.round(bounds.height * (1 / k));
     const handleBounds = {
-      source: getHandleBounds('.source', nodeElement.current, bounds),
+      source: getHandleBounds('.source', nodeElement.current, bounds, k),
-      target: getHandleBounds('.target', nodeElement.current, bounds)
+      target: getHandleBounds('.target', nodeElement.current, bounds, k)
     };
 
     dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));

src/ReactGraph/index.js

@@ -37,7 +37,7 @@ class ReactGraph extends PureComponent {
 
     return (
       <div style={style} className="react-graph">
-        <Provider nodes={nodes} edges={edges} onElementClick={onElementClick}>
+        <Provider nodes={nodes} edges={edges}>
           <GraphView
             onLoad={onLoad}
             onMove={onMove}

src/state/actions.js

@@ -2,7 +2,8 @@ import {
   UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
   UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
   UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION,
-  SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT
+  SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT,
+  SET_CONNECTING, SET_CONNECTION_POS
 } from './index';
 
 export const updateTransform = (transform) => {
@@ -90,7 +91,7 @@ export const removeNodes = (ids) => {
   const idArray = Array.isArray(ids) ? ids : [ids];
 
   return { type: REMOVE_NODES, payload: { ids: idArray } };
-}
+};
 
 export const updateSelection = (selection) => {
   return {
@@ -100,3 +101,11 @@ export const updateSelection = (selection) => {
     }
   };
 };
+
+export const setConnecting = ({ isConnecting, connectionSourceId }) => {
+  return { type: SET_CONNECTING, payload: { isConnecting, connectionSourceId }};
+};
+
+export const setConnectionPos = ({ x, y }) => {
+  return { type: SET_CONNECTION_POS, payload: { connectionPosition: { x, y } } };
+}

src/state/index.js

@@ -17,6 +17,8 @@ export const SET_SELECTION = 'SET_SELECTION';
 export const SET_NODES_SELECTION = 'SET_NODES_SELECTION';
 export const SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
 export const REMOVE_NODES = 'REMOVE_NODES';
+export const SET_CONNECTING = 'SET_CONNECTING';
+export const SET_CONNECTION_POS = 'SET_CONNECTION_POS';
 
 export const initialState = {
   width: 0,
@@ -34,6 +36,10 @@ export const initialState = {
   nodesSelectionActive: false,
   selectionActive: false,
   selection: {},
+
+  isConnecting: false,
+  connectionSourceId: null,
+  connectionPosition: { x: 0, y: 0 }
 };
 
 export const reducer = (state, action) => {
@@ -126,6 +132,8 @@ export const reducer = (state, action) => {
     case UPDATE_SIZE:
     case SET_SELECTION:
     case SET_SELECTED_ELEMENTS:
+    case SET_CONNECTING:
+    case SET_CONNECTION_POS:
       return { ...state, ...action.payload };
     default:
       return state;

src/style.css

@@ -59,6 +59,10 @@
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }
+
+  &.connector {
+    pointer-events: none;
+  }
 }
 
 @keyframes dashdraw {