diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js
index 406405f0..d48865fa 100644
--- a/example/src/Interaction/index.js
+++ b/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}
>
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 207c9b22..89c4a6cb 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -238,11 +238,15 @@ export default (NodeComponent: ComponentType) => {
const onSelectNodeHandler = useCallback(() => {
if (!isDraggable && isSelectable) {
- setSelectedElements({ id, type } as Node);
+ setSelectedElements(node);
+
+ if (onClick) {
+ onClick(node);
+ }
}
return noop;
- }, [isSelectable, isDraggable, id, type]);
+ }, [isSelectable, isDraggable, node]);
useEffect(() => {
if (nodeElement.current) {