feat(nodes): add selectNodesOnDrag prop type

README.md

@@ -86,6 +86,7 @@ const BasicFlow = () => (
 - `snapGrid`: [x, y] array - default: `[16, 16]`
 - `onlyRenderVisibleNodes`: default: `true`
 - `isInteractive`: default: `true`. If the graph is not interactive you can't drag any nodes
+- `selectNodesOnDrag`: default: `true`
 
 ## Styling
 

example/src/Horizontal/index.js

@@ -28,6 +28,7 @@ const HorizontalFlow = () => {
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
       onLoad={onLoad}
+      selectNodesOnDrag={false}
     />
   );
 }

src/components/Nodes/wrapNode.tsx

@@ -15,6 +15,7 @@ interface OnDragStartParams {
   id: ElementId;
   type: string;
   data: any;
+  selectNodesOnDrag: boolean;
   setOffset: (pos: XYPosition) => void;
   transform: Transform;
   position: XYPosition;
@@ -27,6 +28,7 @@ const onStart = ({
   id,
   type,
   data,
+  selectNodesOnDrag,
   setOffset,
   transform,
   position,
@@ -42,12 +44,15 @@ const onStart = ({
   const offsetY = scaledClient.y - position.y - transform[1];
   const node = { id, type, position, data };
 
-  store.dispatch.setSelectedElements({ id, type } as Node);
   setOffset({ x: offsetX, y: offsetY });
 
   if (onNodeDragStart) {
     onNodeDragStart(node);
   }
+
+  if (selectNodesOnDrag) {
+    store.dispatch.setSelectedElements({ id, type } as Node);
+  }
 };
 
 interface OnDragParams {
@@ -83,19 +88,21 @@ interface OnDragStopParams {
   type: string;
   position: XYPosition;
   data: any;
+  selectNodesOnDrag: boolean;
   onNodeDragStop?: (node: Node) => void;
   onClick?: (node: Node) => void;
 }
 
 const onStop = ({
-  onNodeDragStop,
-  onClick,
-  isDragging,
-  setDragging,
   id,
   type,
   position,
   data,
+  isDragging,
+  setDragging,
+  selectNodesOnDrag,
+  onNodeDragStop,
+  onClick,
 }: OnDragStopParams): void => {
   const node = {
     id,
@@ -104,8 +111,14 @@ const onStop = ({
     data,
   } as Node;
 
-  if (!isDragging && onClick) {
-    return onClick(node);
+  if (!isDragging) {
+    if (!selectNodesOnDrag) {
+      store.dispatch.setSelectedElements({ id, type } as Node);
+    }
+
+    if (onClick) {
+      return onClick(node);
+    }
   }
 
   setDragging(false);
@@ -130,6 +143,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       onNodeDragStop,
       style,
       isInteractive,
+      selectNodesOnDrag,
       sourcePosition,
       targetPosition,
     }: WrapNodeProps) => {
@@ -177,10 +191,22 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       return (
         <DraggableCore
           onStart={(evt) =>
-            onStart({ evt: evt as MouseEvent, onNodeDragStart, id, type, data, setOffset, transform, position })
+            onStart({
+              evt: evt as MouseEvent,
+              selectNodesOnDrag,
+              onNodeDragStart,
+              id,
+              type,
+              data,
+              setOffset,
+              transform,
+              position,
+            })
           }
           onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform })}
-          onStop={() => onStop({ onNodeDragStop, onClick, isDragging, setDragging, id, type, position, data })}
+          onStop={() =>
+            onStop({ onNodeDragStop, selectNodesOnDrag, onClick, isDragging, setDragging, id, type, position, data })
+          }
           scale={transform[2]}
           disabled={!isInteractive}
           cancel=".nodrag"

src/container/GraphView/index.tsx

@@ -33,6 +33,7 @@ export interface GraphViewProps {
   snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
   isInteractive: boolean;
+  selectNodesOnDrag: boolean;
 }
 
 const GraphView = memo(
@@ -55,6 +56,7 @@ const GraphView = memo(
     snapGrid,
     onlyRenderVisibleNodes,
     isInteractive,
+    selectNodesOnDrag,
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
@@ -132,6 +134,7 @@ const GraphView = memo(
           onNodeDragStop={onNodeDragStop}
           onNodeDragStart={onNodeDragStart}
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
+          selectNodesOnDrag={selectNodesOnDrag}
         />
         <EdgeRenderer
           width={width}

src/container/NodeRenderer/index.tsx

@@ -6,6 +6,7 @@ import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '.
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
+  selectNodesOnDrag: boolean;
   onElementClick?: (element: Node | Edge) => void;
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
@@ -44,6 +45,7 @@ function renderNode(
       isInteractive={isInteractive}
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
+      selectNodesOnDrag={props.selectNodesOnDrag}
     />
   );
 }

src/container/ReactFlow/index.tsx

@@ -44,6 +44,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
   isInteractive: boolean;
+  selectNodesOnDrag: boolean;
 }
 
 const ReactFlow = ({
@@ -69,6 +70,7 @@ const ReactFlow = ({
   snapGrid,
   onlyRenderVisibleNodes,
   isInteractive,
+  selectNodesOnDrag,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -95,6 +97,7 @@ const ReactFlow = ({
           snapGrid={snapGrid}
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
           isInteractive={isInteractive}
+          selectNodesOnDrag={selectNodesOnDrag}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
@@ -124,6 +127,7 @@ ReactFlow.defaultProps = {
   snapGrid: [16, 16],
   onlyRenderVisibleNodes: true,
   isInteractive: true,
+  selectNodesOnDrag: true,
 };
 
 export default ReactFlow;

src/types/index.ts

@@ -123,6 +123,7 @@ export interface WrapNodeProps {
   xPos: number;
   yPos: number;
   isInteractive: boolean;
+  selectNodesOnDrag: boolean;
   onClick?: (node: Node) => void;
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;