feat(graph): more adjustable interaction closes #329, closes #291

src/components/Nodes/DefaultNode.tsx

@@ -3,13 +3,15 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const DefaultNode = memo(({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
-  <>
-    <Handle type="target" position={targetPosition} />
-    {data.label}
-    <Handle type="source" position={sourcePosition} />
-  </>
-));
+const DefaultNode = memo(
+  ({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
+    <>
+      <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
+      {data.label}
+      <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
+    </>
+  )
+);
 
 DefaultNode.displayName = 'DefaultNode';
 

src/components/Nodes/InputNode.tsx

@@ -3,10 +3,10 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const InputNode = memo(({ data, sourcePosition = Position.Bottom }: NodeProps) => (
+const InputNode = memo(({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
   <>
     {data.label}
-    <Handle type="source" position={sourcePosition} />
+    <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
   </>
 ));
 

src/components/Nodes/OutputNode.tsx

@@ -3,9 +3,9 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const OutputNode = memo(({ data, targetPosition = Position.Top }: NodeProps) => (
+const OutputNode = memo(({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
   <>
-    <Handle type="target" position={targetPosition} />
+    <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
     {data.label}
   </>
 ));

src/components/Nodes/wrapNode.tsx

@@ -1,4 +1,14 @@
-import React, { useEffect, useRef, useState, memo, ComponentType, CSSProperties, useMemo, MouseEvent } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  memo,
+  ComponentType,
+  CSSProperties,
+  useMemo,
+  MouseEvent,
+  useCallback,
+} from 'react';
 import { DraggableCore } from 'react-draggable';
 import cx from 'classnames';
 import { ResizeObserver } from 'resize-observer';
@@ -28,6 +38,7 @@ interface OnDragStartParams {
   type: string;
   data: any;
   selectNodesOnDrag: boolean;
+  isSelectable: boolean;
   setOffset: (pos: XYPosition) => void;
   transform: Transform;
   position: XYPosition;
@@ -46,6 +57,7 @@ const onStart = ({
   transform,
   position,
   setSelectedElements,
+  isSelectable,
 }: OnDragStartParams): false | void => {
   const startEvt = getMouseEvent(evt);
 
@@ -64,7 +76,7 @@ const onStart = ({
     onNodeDragStart(node);
   }
 
-  if (selectNodesOnDrag) {
+  if (selectNodesOnDrag && isSelectable) {
     setSelectedElements({ id, type } as Node);
   }
 };
@@ -104,6 +116,7 @@ interface OnDragStopParams {
   position: XYPosition;
   data: any;
   selectNodesOnDrag: boolean;
+  isSelectable: boolean;
   setSelectedElements: (elms: Elements | Node | Edge) => void;
   onNodeDragStop?: (node: Node) => void;
   onClick?: (node: Node) => void;
@@ -117,6 +130,7 @@ const onStop = ({
   isDragging,
   setDragging,
   selectNodesOnDrag,
+  isSelectable,
   onNodeDragStop,
   onClick,
   setSelectedElements,
@@ -127,8 +141,7 @@ const onStop = ({
     position,
     data,
   } as Node;
-
-  if (!isDragging) {
+  if (!isDragging && isSelectable) {
     if (!selectNodesOnDrag) {
       setSelectedElements({ id, type } as Node);
     }
@@ -164,7 +177,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       onNodeDragStop,
       style,
       className,
-      isInteractive,
+      isDraggable,
+      isSelectable,
+      isConnectable,
       selectNodesOnDrag,
       sourcePosition,
       targetPosition,
@@ -177,7 +192,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       const [offset, setOffset] = useState({ x: 0, y: 0 });
       const [isDragging, setDragging] = useState(false);
       const position = { x: xPos, y: yPos };
-      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, { selected });
+      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, {
+        selected,
+        selectable: isSelectable,
+      });
       const node = { id, type, position, data };
       const onMouseEnterHandler = useMemo(() => {
         if (!onMouseEnter || isDragging) {
@@ -211,10 +229,18 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         return (evt: MouseEvent) => onContextMenu(evt, node);
       }, [onContextMenu]);
 
+      const onSelectNodeHandler = useCallback(() => {
+        if (!isDraggable && isSelectable) {
+          setSelectedElements({ id, type } as Node);
+        }
+
+        return noop;
+      }, [isSelectable, isDraggable, id, type]);
+
       const nodeStyle: CSSProperties = {
         zIndex: selected ? 10 : 3,
         transform: `translate(${xPos}px,${yPos}px)`,
-        pointerEvents: isInteractive ? 'all' : 'none',
+        pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
         ...style,
       };
 
@@ -246,6 +272,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
             onStart({
               evt: evt as MouseEvent,
               selectNodesOnDrag,
+              isSelectable,
               onNodeDragStart,
               id,
               type,
@@ -261,6 +288,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
             onStop({
               onNodeDragStop,
               selectNodesOnDrag,
+              isSelectable,
               onClick,
               isDragging,
               setDragging,
@@ -272,7 +300,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
             })
           }
           scale={transform[2]}
-          disabled={!isInteractive}
+          disabled={!isDraggable}
           cancel=".nodrag"
         >
           <div
@@ -283,6 +311,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
             onMouseMove={onMouseMoveHandler}
             onMouseLeave={onMouseLeaveHandler}
             onContextMenu={onContextMenuHandler}
+            onClick={onSelectNodeHandler}
           >
             <Provider value={id}>
               <NodeComponent
@@ -290,6 +319,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
                 data={data}
                 type={type}
                 selected={selected}
+                isConnectable={isConnectable}
                 sourcePosition={sourcePosition}
                 targetPosition={targetPosition}
               />