fix(node): add click handler when draggable is false #271
This commit is contained in:
@@ -11,6 +11,10 @@ const initialElements = [
|
|||||||
{ id: 'e1-3', source: '1', target: '3' },
|
{ 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 InteractionFlow = () => {
|
||||||
const [elements, setElements] = useState(initialElements);
|
const [elements, setElements] = useState(initialElements);
|
||||||
const onConnect = (params) => setElements((els) => addEdge(params, els));
|
const onConnect = (params) => setElements((els) => addEdge(params, els));
|
||||||
@@ -28,6 +32,9 @@ const InteractionFlow = () => {
|
|||||||
nodesDraggable={isDraggable}
|
nodesDraggable={isDraggable}
|
||||||
zoomOnScroll={zoomOnScroll}
|
zoomOnScroll={zoomOnScroll}
|
||||||
onConnect={onConnect}
|
onConnect={onConnect}
|
||||||
|
onElementClick={onElementClick}
|
||||||
|
onNodeDragStart={onNodeDragStart}
|
||||||
|
onNodeDragStop={onNodeDragStop}
|
||||||
>
|
>
|
||||||
<MiniMap />
|
<MiniMap />
|
||||||
<Controls />
|
<Controls />
|
||||||
|
|||||||
@@ -238,11 +238,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
|
|||||||
|
|
||||||
const onSelectNodeHandler = useCallback(() => {
|
const onSelectNodeHandler = useCallback(() => {
|
||||||
if (!isDraggable && isSelectable) {
|
if (!isDraggable && isSelectable) {
|
||||||
setSelectedElements({ id, type } as Node);
|
setSelectedElements(node);
|
||||||
|
|
||||||
|
if (onClick) {
|
||||||
|
onClick(node);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return noop;
|
return noop;
|
||||||
}, [isSelectable, isDraggable, id, type]);
|
}, [isSelectable, isDraggable, node]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (nodeElement.current) {
|
if (nodeElement.current) {
|
||||||
|
|||||||
Reference in New Issue
Block a user