Merge pull request #2226 from wbkd/refactor/nodes-selection

Refactor/nodes-selection

example/src/Layouting/index.tsx

@@ -59,6 +59,10 @@ const LayoutFlow = () => {
     setNodes(layoutedNodes);
   };
 
+  const unselect = () => {
+    setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
+  };
+
   return (
     <div className="layoutflow">
       <ReactFlowProvider>
@@ -77,7 +81,10 @@ const LayoutFlow = () => {
           <button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
             vertical layout
           </button>
-          <button onClick={() => onLayout('LR')}>horizontal layout</button>
+          <button onClick={() => onLayout('LR')} style={{ marginRight: 10 }}>
+            horizontal layout
+          </button>
+          <button onClick={() => unselect()}>unselect nodes</button>
         </div>
       </ReactFlowProvider>
     </div>

src/container/FlowRenderer/index.tsx

@@ -11,22 +11,21 @@ import NodesSelection from '../../components/NodesSelection';
 
 import { ReactFlowState } from '../../types';
 
-interface FlowRendererProps
+export type FlowRendererProps = Omit<
-  extends Omit<
+  GraphViewProps,
-    GraphViewProps,
+  | 'snapToGrid'
-    | 'snapToGrid'
+  | 'nodeTypes'
-    | 'nodeTypes'
+  | 'edgeTypes'
-    | 'edgeTypes'
+  | 'snapGrid'
-    | 'snapGrid'
+  | 'connectionLineType'
-    | 'connectionLineType'
+  | 'connectionLineContainerStyle'
-    | 'connectionLineContainerStyle'
+  | 'arrowHeadColor'
-    | 'arrowHeadColor'
+  | 'onlyRenderVisibleElements'
-    | 'onlyRenderVisibleElements'
+  | 'selectNodesOnDrag'
-    | 'selectNodesOnDrag'
+  | 'defaultMarkerColor'
-    | 'defaultMarkerColor'
+> & {
-  > {
   children: ReactNode;
-}
+};
 
 const selector = (s: ReactFlowState) => ({
   resetSelectedElements: s.resetSelectedElements,

src/container/ZoomPane/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, ReactNode } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import shallow from 'zustand/shallow';
@@ -7,29 +7,13 @@ import { clamp } from '../../utils';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../store';
-import { Viewport, PanOnScrollMode, KeyCode, ReactFlowState, OnMove, OnMoveStart, OnMoveEnd } from '../../types';
+import { Viewport, PanOnScrollMode, ReactFlowState } from '../../types';
+import { FlowRendererProps } from '../FlowRenderer';
 
-interface ZoomPaneProps {
+type ZoomPaneProps = Omit<
-  selectionKeyPressed: boolean;
+  FlowRendererProps,
-  elementsSelectable?: boolean;
+  'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName'
-  zoomOnScroll?: boolean;
+> & { selectionKeyPressed: boolean };
-  zoomOnPinch?: boolean;
-  panOnScroll?: boolean;
-  panOnScrollSpeed?: number;
-  panOnScrollMode?: PanOnScrollMode;
-  zoomOnDoubleClick?: boolean;
-  panOnDrag?: boolean;
-  defaultPosition?: [number, number];
-  defaultZoom?: number;
-  onMove?: OnMove;
-  onMoveStart?: OnMoveStart;
-  onMoveEnd?: OnMoveEnd;
-  zoomActivationKeyCode?: KeyCode;
-  preventScrolling?: boolean;
-  children: ReactNode;
-  noWheelClassName: string;
-  noPanClassName: string;
-}
 
 const viewChanged = (prevViewport: Viewport, eventViewport: any): boolean =>
   prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;

src/hooks/useDrag/index.ts

@@ -131,7 +131,6 @@ function useDrag({
           .filter((event: MouseEvent) => {
             const target = event.target as HTMLDivElement;
             const isDraggable =
-              !event.ctrlKey &&
               !event.button &&
               (!noDragClassName || !hasSelector(target, `.${noDragClassName}`, nodeRef)) &&
               (!handleSelector || hasSelector(target, handleSelector, nodeRef));

src/style.css

@@ -106,6 +106,7 @@
 }
 
 .react-flow__handle {
+  position: absolute;
   pointer-events: none;
 
   &.connectable {

src/theme-default.css

@@ -88,7 +88,6 @@
 }
 
 .react-flow__handle {
-  position: absolute;
   width: 6px;
   height: 6px;
   background: #555;

src/types/component-props.ts

@@ -90,7 +90,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   deleteKeyCode?: KeyCode | null;
   selectionKeyCode?: KeyCode | null;
   multiSelectionKeyCode?: KeyCode | null;
-  zoomActivationKeyCode?: KeyCode;
+  zoomActivationKeyCode?: KeyCode | null;
   snapToGrid?: boolean;
   snapGrid?: [number, number];
   onlyRenderVisibleElements?: boolean;

src/utils/graph.ts

@@ -141,6 +141,10 @@ export const pointToRendererPoint = (
 };
 
 export const getRectOfNodes = (nodes: Node[]): Rect => {
+  if (nodes.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+
   const box = nodes.reduce(
     (currBox, { positionAbsolute, position, width, height }) =>
       getBoundsOfBoxes(