feat(handle): onConnect cb

dist/ReactGraph.js

@@ -34094,7 +34094,10 @@
   var Consumer = NodeIdContext.Consumer;
   Provider.displayName = 'NodeIdProvider';
 
-  var Handle = React.memo(function (props) {
+  var Handle = React.memo(function (_ref) {
+    var onConnect = _ref.onConnect,
+        rest = _objectWithoutProperties(_ref, ["onConnect"]);
+
     var nodeId = React.useContext(NodeIdContext);
 
     var _useStoreActions = useStoreActions(function (a) {
@@ -34106,24 +34109,32 @@
         setPosition = _useStoreActions.setPosition,
         setSourceId = _useStoreActions.setSourceId;
 
-    var onConnect = useStoreState(function (s) {
+    var onConnectAction = useStoreState(function (s) {
       return s.onConnect;
     });
+
+    var onConnectExtended = function onConnectExtended(params) {
+      onConnectAction(params);
+      onConnect(params);
+    };
+
     return React__default.createElement(BaseHandle, _extends$1({
       nodeId: nodeId,
       setPosition: setPosition,
       setSourceId: setSourceId,
-      onConnect: onConnect
+      onConnect: onConnectExtended
-    }, props));
+    }, rest));
   });
   Handle.displayName = 'Handle';
   Handle.propTypes = {
     type: PropTypes.oneOf(['source', 'target']),
-    position: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+    position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    onConnect: PropTypes.func
   };
   Handle.defaultProps = {
     type: 'source',
-    position: 'top'
+    position: 'top',
+    onConnect: function onConnect() {}
   };
 
   var nodeStyles = {

example/SimpleGraph.js

@@ -7,8 +7,19 @@ const SpecialNode = ({ data, styles }) => (
   <div
     style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
   >
-    <Handle type="target" position="top" id="a" style={{ left: 10, background: '#999' }} />
+    <Handle
-    <Handle type="target" position="top" id="b" style={{ left: 30, background: '#999' }} />
+      type="target"
+      position="top"
+      id="a"
+      style={{ left: 10, background: '#999' }}
+      onConnect={params => console.log('handle onConnect', params)}
+    />
+    <Handle
+      type="target"
+      position="top"
+      id="b"
+      style={{ left: 30, background: '#999' }}
+    />
     <div>I am <strong>special</strong>!<br />{data.label}</div>
     <select onChange={(e) => data.onChange(e.target.value, data)}>
       <option value="1">1</option>

src/NodeRenderer/HandleTypes/Handle.js

@@ -5,21 +5,25 @@ import { useStoreActions, useStoreState } from 'easy-peasy';
 import BaseHandle from './BaseHandle';
 import NodeIdContext from '../NodeIdContext'
 
-const Handle = memo((props) => {
+const Handle = memo(({ onConnect, ...rest }) => {
   const nodeId = useContext(NodeIdContext);
   const { setPosition, setSourceId } = useStoreActions(a => ({
     setPosition: a.setConnectionPosition,
     setSourceId: a.setConnectionSourceId
   }));
-  const onConnect = useStoreState(s => s.onConnect);
+  const onConnectAction = useStoreState(s => s.onConnect);
+  const onConnectExtended = (params) => {
+    onConnectAction(params);
+    onConnect(params);
+  };
 
   return (
     <BaseHandle
       nodeId={nodeId}
       setPosition={setPosition}
       setSourceId={setSourceId}
-      onConnect={onConnect}
+      onConnect={onConnectExtended}
-      {...props}
+      {...rest}
     />
   );
 });
@@ -29,11 +33,13 @@ Handle.displayName = 'Handle';
 Handle.propTypes = {
   type: PropTypes.oneOf(['source', 'target']),
   position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  onConnect: PropTypes.func
 };
 
 Handle.defaultProps = {
   type: 'source',
-  position: 'top'
+  position: 'top',
+  onConnect: () => {}
 };
 
 export default Handle;