feat(nodeWrap): add onNodeDragStop callback

dist/ReactGraph.js

@@ -242,6 +242,20 @@
   var isNode = function isNode(element) {
     return !element.source && !element.target;
   };
+  var getOutgoers = function getOutgoers(node, elements) {
+    if (!isNode(node)) {
+      return [];
+    }
+
+    var outgoerIds = elements.filter(function (e) {
+      return e.source === node.id;
+    }).map(function (e) {
+      return e.target;
+    });
+    return elements.filter(function (e) {
+      return outgoerIds.includes(e.id);
+    });
+  };
   var removeElements = function removeElements(elements, elementsToRemove) {
     var nodeIdsToRemove = elementsToRemove.filter(isNode).map(function (n) {
       return n.id;
@@ -30218,6 +30232,7 @@
         return React__default.createElement(NodeComponent, _extends({
           key: d.id,
           onClick: this.props.onElementClick,
+          onNodeDragStop: this.props.onNodeDragStop,
           onConnect: this.props.onConnect
         }, d));
       }
@@ -32811,6 +32826,7 @@
     }, React__default.createElement(NodeRenderer, {
       nodeTypes: props.nodeTypes,
       onElementClick: props.onElementClick,
+      onNodeDragStop: props.onNodeDragStop,
       onConnect: props.onConnect
     }), React__default.createElement(EdgeRenderer, {
       width: state.width,
@@ -32999,7 +33015,7 @@
   };
 
   var isHandle = function isHandle(e) {
-    return e.target.className.includes('source');
+    return e.target.className && e.target.className.includes('source');
   };
 
   var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
@@ -33044,7 +33060,8 @@
           type = props.type,
           id = props.id,
           __rg = props.__rg,
-          onConnect = props.onConnect;
+          onConnect = props.onConnect,
+          onNodeDragStop = props.onNodeDragStop;
       var position = __rg.position;
 
       var _state$transform = _slicedToArray(state.transform, 3),
@@ -33118,6 +33135,15 @@
         });
       };
 
+      var onStop = function onStop() {
+        onNodeDragStop({
+          id: id,
+          type: type,
+          data: data,
+          position: position
+        });
+      };
+
       var onDrop = function onDrop(evt) {
         evt.preventDefault();
         var source = evt.dataTransfer.getData('text/plain');
@@ -33137,6 +33163,7 @@
         grid: [1, 1],
         onStart: onStart,
         onDrag: onDrag,
+        onStop: onStop,
         scale: k
       }, React__default.createElement("div", {
         onDrop: onDrop,
@@ -33328,7 +33355,8 @@
             onChange = _this$props.onChange,
             elements = _this$props.elements,
             onElementsRemove = _this$props.onElementsRemove,
-            onConnect = _this$props.onConnect;
+            onConnect = _this$props.onConnect,
+            onNodeDragStop = _this$props.onNodeDragStop;
 
         var _elements$map$reduce = elements.map(parseElements).reduce(separateElements, {}),
             nodes = _elements$map$reduce.nodes,
@@ -33347,6 +33375,7 @@
           onChange: onChange,
           onElementClick: onElementClick,
           onConnect: onConnect,
+          onNodeDragStop: onNodeDragStop,
           nodeTypes: this.nodeTypes,
           edgeTypes: this.edgeTypes
         }), React__default.createElement(GlobalKeyHandler, {
@@ -33361,6 +33390,7 @@
   ReactGraph.defaultProps = {
     onElementClick: function onElementClick() {},
     onElementsRemove: function onElementsRemove() {},
+    onNodeDragStop: function onNodeDragStop() {},
     onConnect: function onConnect() {},
     onLoad: function onLoad() {},
     onMove: function onMove() {},
@@ -33379,12 +33409,14 @@
   var isNode$1 = isNode;
   var isEdge$1 = isEdge;
   var removeElements$1 = removeElements;
+  var getOutgoers$1 = getOutgoers;
   var SourceHandle = _SourceHandle;
   var TargetHandle = _TargetHandle;
 
   exports.SourceHandle = SourceHandle;
   exports.TargetHandle = TargetHandle;
   exports.default = ReactGraph;
+  exports.getOutgoers = getOutgoers$1;
   exports.isEdge = isEdge$1;
   exports.isNode = isNode$1;
   exports.removeElements = removeElements$1;

example/SimpleGraph.js

@@ -119,6 +119,7 @@ class App extends PureComponent {
         onElementClick={element => this.onElementClick(element)}
         onElementsRemove={elements => this.onElementsRemove(elements)}
         onConnect={params => console.log(params)}
+        onNodeDragStop={node => console.log('drag stop', node)}
         style={{ width: '100%', height: '100%' }}
         onLoad={graphInstance => this.onLoad(graphInstance)}
         onChange={(elements) => this.onChange(elements)}

example/build/example.e31bb0bc.js

@@ -38213,6 +38213,7 @@ function (_PureComponent) {
       return _react.default.createElement(NodeComponent, _extends({
         key: d.id,
         onClick: this.props.onElementClick,
+        onNodeDragStop: this.props.onNodeDragStop,
         onConnect: this.props.onConnect
       }, d));
     }
@@ -40966,6 +40967,7 @@ var GraphView = (0, _react.memo)(function (props) {
   }, _react.default.createElement(_NodeRenderer.default, {
     nodeTypes: props.nodeTypes,
     onElementClick: props.onElementClick,
+    onNodeDragStop: props.onNodeDragStop,
     onConnect: props.onConnect
   }), _react.default.createElement(_EdgeRenderer.default, {
     width: state.width,
@@ -41365,7 +41367,7 @@ var isInput = function isInput(e) {
 };
 
 var isHandle = function isHandle(e) {
-  return e.target.className.includes('source');
+  return e.target.className && e.target.className.includes('source');
 };
 
 var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
@@ -41410,7 +41412,8 @@ var _default = function _default(NodeComponent) {
         type = props.type,
         id = props.id,
         __rg = props.__rg,
-        onConnect = props.onConnect;
+        onConnect = props.onConnect,
+        onNodeDragStop = props.onNodeDragStop;
     var position = __rg.position;
 
     var _state$transform = _slicedToArray(state.transform, 3),
@@ -41484,6 +41487,15 @@ var _default = function _default(NodeComponent) {
       });
     };
 
+    var onStop = function onStop() {
+      onNodeDragStop({
+        id: id,
+        type: type,
+        data: data,
+        position: position
+      });
+    };
+
     var onDrop = function onDrop(evt) {
       evt.preventDefault();
       var source = evt.dataTransfer.getData('text/plain');
@@ -41503,6 +41515,7 @@ var _default = function _default(NodeComponent) {
       grid: [1, 1],
       onStart: onStart,
       onDrag: onDrag,
+      onStop: onStop,
       scale: k
     }, _react.default.createElement("div", {
       onDrop: onDrop,
@@ -41890,7 +41903,8 @@ function (_PureComponent) {
           onChange = _this$props.onChange,
           elements = _this$props.elements,
           onElementsRemove = _this$props.onElementsRemove,
-          onConnect = _this$props.onConnect;
+          onConnect = _this$props.onConnect,
+          onNodeDragStop = _this$props.onNodeDragStop;
 
       var _elements$map$reduce = elements.map(_graphUtils.parseElements).reduce(_graphUtils.separateElements, {}),
           nodes = _elements$map$reduce.nodes,
@@ -41909,6 +41923,7 @@ function (_PureComponent) {
         onChange: onChange,
         onElementClick: onElementClick,
         onConnect: onConnect,
+        onNodeDragStop: onNodeDragStop,
         nodeTypes: this.nodeTypes,
         edgeTypes: this.edgeTypes
       }), _react.default.createElement(_GlobalKeyHandler.default, {
@@ -41923,6 +41938,7 @@ function (_PureComponent) {
 ReactGraph.defaultProps = {
   onElementClick: function onElementClick() {},
   onElementsRemove: function onElementsRemove() {},
+  onNodeDragStop: function onNodeDragStop() {},
   onConnect: function onConnect() {},
   onLoad: function onLoad() {},
   onMove: function onMove() {},
@@ -42266,6 +42282,9 @@ function (_PureComponent) {
         onConnect: function onConnect(params) {
           return console.log(params);
         },
+        onNodeDragStop: function onNodeDragStop(node) {
+          return console.log('drag stop', node);
+        },
         style: {
           width: '100%',
           height: '100%'
@@ -42356,7 +42375,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 + ':' + "54186" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61136" + '/');
 
   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 + ':' + "54186" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61136" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/GraphView/index.js

@@ -81,6 +81,7 @@ const GraphView = memo((props) => {
       <NodeRenderer
         nodeTypes={props.nodeTypes}
         onElementClick={props.onElementClick}
+        onNodeDragStop={props.onNodeDragStop}
         onConnect={props.onConnect}
       />
       <EdgeRenderer

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -36,7 +36,9 @@ 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, onConnect } = props;
+  const {
+    data, onClick, type, id, __rg, onConnect, onNodeDragStop
+  } = props;
   const { position } = __rg;
   const [ x, y, k ] = state.transform;
   const selected = state.selectedElements.filter(isNode).map(e => e.id).includes(id);
@@ -90,6 +92,15 @@ export default NodeComponent => memo((props) => {
     onClick({ id, type, data, position });
   };
 
+  const onStop = () => {
+    onNodeDragStop({
+      id,
+      type,
+      data,
+      position
+    });
+  }
+
   const onDrop = (evt) => {
     evt.preventDefault();
 
@@ -108,6 +119,7 @@ export default NodeComponent => memo((props) => {
       grid={[1, 1]}
       onStart={onStart}
       onDrag={onDrag}
+      onStop={onStop}
       scale={k}
     >
       <div

src/NodeRenderer/index.js

@@ -16,6 +16,7 @@ class NodeRenderer extends PureComponent {
       <NodeComponent
         key={d.id}
         onClick={this.props.onElementClick}
+        onNodeDragStop={this.props.onNodeDragStop}
         onConnect={this.props.onConnect}
         {...d}
       />

src/ReactGraph/index.js

@@ -28,7 +28,7 @@ class ReactGraph extends PureComponent {
     const {
       style, onElementClick, children, onLoad,
       onMove, onChange, elements, onElementsRemove,
-      onConnect
+      onConnect, onNodeDragStop
     } = this.props;
 
     const { nodes, edges } = elements
@@ -44,6 +44,7 @@ class ReactGraph extends PureComponent {
             onChange={onChange}
             onElementClick={onElementClick}
             onConnect={onConnect}
+            onNodeDragStop={onNodeDragStop}
             nodeTypes={this.nodeTypes}
             edgeTypes={this.edgeTypes}
           />
@@ -60,6 +61,7 @@ class ReactGraph extends PureComponent {
 ReactGraph.defaultProps = {
   onElementClick: () => {},
   onElementsRemove: () => {},
+  onNodeDragStop: () => {},
   onConnect: () => {},
 	onLoad: () => {},
   onMove: () => {},