Merge pull request #337 from wbkd/develop

Develop

example/src/Interaction/index.js

@@ -11,6 +11,10 @@ const initialElements = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
+const onNodeDragStart = (node) => console.log('drag start', node);
+const onNodeDragStop = (node) => console.log('drag stop', node);
+const onElementClick = (element) => console.log('click', element);
+
 const InteractionFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onConnect = (params) => setElements((els) => addEdge(params, els));
@@ -28,6 +32,9 @@ const InteractionFlow = () => {
       nodesDraggable={isDraggable}
       zoomOnScroll={zoomOnScroll}
       onConnect={onConnect}
+      onElementClick={onElementClick}
+      onNodeDragStart={onNodeDragStart}
+      onNodeDragStop={onNodeDragStop}
     >
       <MiniMap />
       <Controls />

src/components/Nodes/wrapNode.tsx

@@ -238,11 +238,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
       const onSelectNodeHandler = useCallback(() => {
         if (!isDraggable && isSelectable) {
-          setSelectedElements({ id, type } as Node);
+          setSelectedElements({ id: node.id, type: node.type } as Node);
+
+          if (onClick) {
+            onClick(node);
+          }
         }
 
         return noop;
-      }, [isSelectable, isDraggable, id, type]);
+      }, [isSelectable, isDraggable, node]);
 
       useEffect(() => {
         if (nodeElement.current) {