Merge pull request #249 from wbkd/develop

Develop

README.md

@@ -2,7 +2,7 @@
 
 # :ocean: React Flow
 
-React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with plugins like a mini-map and graph controls. Feel free to check out the [examples](https://react-flow.netlify.com/) or read the [blog post](https://webkid.io/blog/react-flow-node-based-graph-library/) to get started.
+React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls. Feel free to check out the [examples](https://react-flow.netlify.com/) or read the [blog post](https://webkid.io/blog/react-flow-node-based-graph-library/) to get started.
 
 - [Key Features](#key-features)
 - [Installation](#installation)
@@ -16,10 +16,11 @@ React Flow is a library for building node-based graphs. You can easily implement
 - [Edges](#nodes)
   - [Options](#options-2)
   - [Edge Types / Custom Edges](#edge-types--custom-edges)
-- [Helper Functions](#helper-functions)
-- [Plugins](#plugins)
+- [Components](#components)
+  - [Background](#background)
   - [Minimap](#minimap)
   - [Controls](#controls)
+- [Helper Functions](#helper-functions)
 - [Examples](#examples)
 - [Development](#development)
 - [Testing](#testing)
@@ -30,7 +31,7 @@ React Flow is a library for building node-based graphs. You can easily implement
 * **Customizable:** Different [node](#node-types--custom-nodes) and [edge types](#edge-types--custom-edges) and support for custom nodes with multiple handles and edges
 * **Fast rendering:** Only nodes that have changed are re-rendered and only those that are in the viewport are displayed
 * **Utils:** Snap-to-grid, background styles and graph [helper functions](#helper-functions)
-* **Plugin system:** [Mini map and graph controls](#plugins)
+* **Components:** [Background, Minimap and graph controls](#components)
 * **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/)
 
 In order to make this library as flexible as possible we don’t do any state updates besides the positions. This means that you need to pass the functions to remove an element or connect nodes by yourself. You can implement your own ones or use the helper functions that come with the library.
@@ -81,10 +82,6 @@ const BasicFlow = () => (
 - `connectionLineStyle`: connection style as svg attributes
 - `deleteKeyCode`: default: `8` (delete)
 - `selectionKeyCode`: default: `16` (shift)
-- `showBackground`: default: `true`
-- `backgroundGap`: gap size - default: `16`
-- `backgroundColor`: color of dots or lines - default: `#eee`
-- `backgroundType`: background type = `dots` or `lines` - default: `dots`
 - `snapToGrid`: default: `false`
 - `snapGrid`: [x, y] array - default: `[16, 16]`
 - `onlyRenderVisibleNodes`: default: `true`
@@ -242,47 +239,34 @@ Now you could use the new type `special` for an edge.
 The `straight`, `default` and `step` types would still be available unless you overwrote one of them.
 There is an implementation of a custom edge in the [edges example](/example/src/Edges/index.js).
 
-## Helper Functions
+## Components
 
-If you want to remove a node or connect two nodes with each other you need to pass a function to `onElementsRemove` and `onConnect`. In order to simplify this process we export some helper functions so that you don't need to implement them:
+### Background
+
+React Flow comes with two background variants: **dots** and **lines**. You can use it by passing it as a children to the React Flow component:
 
 ```javascript
-import ReactFlow, { isNode, isEdge, removeElements, addEdge } from 'react-flow-renderer';
+import ReactFlow, { Background } from 'react-flow-renderer';
+
+const FlowWithBackground = () => (
+  <ReactFlow elements={elements}>
+    <Background
+      variant="dots"
+      gap={12}
+      size={4}
+    />
+  </ReactFlow>
+);
 ```
 
-#### isEdge
+#### Prop Types
 
-Returns true if element is an edge
-
-`isEdge = (element: Node | Edge): element is Edge`
-
-#### isNode
-
-Returns true if element is a node
-
-`isNode = (element: Node | Edge): element is Node`
-
-#### removeElements
-
-Returns elements without the elements from `elementsToRemove`
-
-`removeElements = (elementsToRemove: Elements, elements: Elements): Elements`
-
-#### addEdge
-
-Returns elements array with added edge
-
-`addEdge = (edgeParams: Edge, elements: Elements): Elements`
-
-#### project
-
-Transforms pixel coordinates to the internal React Flow coordinate system
-
-`project = (position: XYPosition): XYPosition`
-
-You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
-
-## Plugins
+- `variant`: string - has to be 'dots' or 'lines' - default: `dots`
+- `gap`: number - the gap between the dots or lines - default: `16`
+- `size`: number - the radius of the dots or the stroke width of the lines - default: `0.5`
+- `color`: string - the color of the dots or lines - default: `#999` for dots, `#eee` for lines
+- `style`: css properties
+- `className`: class name
 
 ### MiniMap
 
@@ -291,7 +275,7 @@ You can use the mini map plugin by passing it as a children to the React Flow co
 ```javascript
 import ReactFlow, { MiniMap } from 'react-flow-renderer';
 
-const GraphWithMiniMap = () => (
+const FlowWithMiniMap = () => (
   <ReactFlow elements={elements}>
     <MiniMap
       nodeColor={(node) => {
@@ -337,6 +321,46 @@ const FlowWithControls = () => (
 - `showFitView`: boolean - default: true
 - `showInteractive`: boolean - default: true
 
+## Helper Functions
+
+If you want to remove a node or connect two nodes with each other you need to pass a function to `onElementsRemove` and `onConnect`. In order to simplify this process we export some helper functions so that you don't need to implement them:
+
+```javascript
+import ReactFlow, { isNode, isEdge, removeElements, addEdge } from 'react-flow-renderer';
+```
+
+#### isEdge
+
+Returns true if element is an edge
+
+`isEdge = (element: Node | Edge): element is Edge`
+
+#### isNode
+
+Returns true if element is a node
+
+`isNode = (element: Node | Edge): element is Node`
+
+#### removeElements
+
+Returns elements without the elements from `elementsToRemove`
+
+`removeElements = (elementsToRemove: Elements, elements: Elements): Elements`
+
+#### addEdge
+
+Returns elements array with added edge
+
+`addEdge = (edgeParams: Edge, elements: Elements): Elements`
+
+#### project
+
+Transforms pixel coordinates to the internal React Flow coordinate system
+
+`project = (position: XYPosition): XYPosition`
+
+You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
+
 ## Examples
 
 You can find all examples in the [example](example) folder or check out the live versions:

cypress/integration/flow/basic.spec.js

@@ -10,9 +10,9 @@ describe('Basic Graph Rendering', () => {
   });
 
   it('renders a grid', () => {
-    cy.get('.react-flow__grid');
+    cy.get('.react-flow__background');
 
-    const gridStroke = Cypress.$('.react-flow__grid path').attr('stroke');
+    const gridStroke = Cypress.$('.react-flow__background path').attr('stroke');
     expect(gridStroke).to.equal('#eee');
   });
 

cypress/integration/flow/overview.spec.js

@@ -1,4 +1,4 @@
-describe('Rich Graph Rendering', () => {
+describe('Overview Graph Rendering', () => {
   it('renders a graph', () => {
     cy.visit('/');
 
@@ -9,9 +9,9 @@ describe('Rich Graph Rendering', () => {
   });
 
   it('renders a grid', () => {
-    cy.get('.react-flow__grid');
+    cy.get('.react-flow__background');
 
-    const gridStroke = Cypress.$('.react-flow__grid path').attr('fill');
+    const gridStroke = Cypress.$('.react-flow__background path').attr('fill');
     expect(gridStroke).to.equal('#888');
   });
 });

example/src/Basic/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, isNode } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -47,10 +47,10 @@ const BasicFlow = () => {
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      style={{ width: '100%', height: '100%' }}
-      backgroundType="lines"
       className="react-flow-basic-example"
     >
+      <Background variant="lines" />
+
       <button
         onClick={updatePos}
         style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}

example/src/CustomNode/index.js

@@ -64,8 +64,6 @@ const CustomNodeFlow = () => {
       }}
       connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
       connectionLineType="bezier"
-      backgroundColor="#888"
-      backgroundGap={16}
       snapToGrid={true}
       snapGrid={[16, 16]}
     >

example/src/Edges/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
 
 import CustomEdge from './CustomEdge';
 
@@ -50,6 +50,7 @@ const EdgesFlow = () => {
     >
       <MiniMap />
       <Controls />
+      <Background />
     </ReactFlow>
   );
 }

example/src/Empty/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -29,18 +29,18 @@ const EmptyFlow = () => {
       onElementsRemove={onElementsRemove}
       onConnect={p => onConnect(p)}
       onNodeDragStop={onNodeDragStop}
-      style={{ width: '100%', height: '100%' }}
-      backgroundType="lines"
     >
-    <MiniMap />
-    <Controls />
-    <button
-      type="button"
-      onClick={addRandomNode}
-      style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
-    >
-      add node
-    </button>
+      <MiniMap />
+      <Controls />
+      <Background variant="lines" />
+
+      <button
+        type="button"
+        onClick={addRandomNode}
+        style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
+      >
+        add node
+      </button>
     </ReactFlow>
   );
 }

example/src/Inactive/index.js

@@ -20,12 +20,11 @@ const InactiveFlow = () => {
   return (
     <ReactFlow
       elements={initialElements}
-      style={{ width: '100%', height: '100%' }}
-      backgroundType="lines"
       isInteractive={isInteractive}
     >
       <MiniMap />
       <Controls />
+
       <div
         style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
       >

example/src/Overview/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
 
 const onNodeDragStart = node => console.log('drag start', node);
 const onNodeDragStop = node => console.log('drag stop', node);
@@ -59,8 +59,6 @@ const OverviewFlow = () => {
       onLoad={onLoad}
       connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
       connectionLineType="bezier"
-      backgroundColor="#888"
-      backgroundGap={16}
       snapToGrid={true}
       snapGrid={[16, 16]}
     >
@@ -74,11 +72,16 @@ const OverviewFlow = () => {
         }}
       />
       <Controls />
+      <Background
+        color="#888"
+        gap={16}
+      />
+
       <button
         type="button"
         onClick={addRandomNode}
         style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
-        className="richexample__add"
+        className="overview-example__add"
       >
         add node
       </button>

example/src/Stress/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
 import { getElements } from './utils';
 
 const onLoad = graph => {
@@ -40,17 +40,17 @@ const StressGraph = () => {
       onLoad={onLoad}
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
-      style={{ width: '100%', height: '100%' }}
-      backgroundType="lines"
     >
+      <MiniMap />
+      <Controls />
+      <Background />
+
       <button
         onClick={updatePos}
         style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
       >
         change pos
       </button>
-      <MiniMap />
-      <Controls />
     </ReactFlow>
   );
 }

example/src/index.css

@@ -5,11 +5,14 @@ body {
   color: #111;
 }
 
-html, body {
+html,
+body {
   margin: 0;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }
 
@@ -32,7 +35,10 @@ header {
   line-height: 1;
 }
 
-header a, header a:focus, header a:active, header a:visited {
+header a,
+header a:focus,
+header a:active,
+header a:visited {
   color: #111;
 }
 
@@ -58,7 +64,7 @@ nav {
   z-index: 10;
   left: 0;
   padding: 3%;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
 }
 
 nav.is-open {
@@ -77,7 +83,10 @@ nav a {
   margin-bottom: 5px;
 }
 
-nav a, nav a:focus, nav a:active, nav a:visited {
+nav a,
+nav a:focus,
+nav a:active,
+nav a:visited {
   color: #fff;
 }
 
@@ -93,8 +102,8 @@ nav a.active:before {
   height: 6px;
   background: white;
   opacity: 0.5;
-  left:0;
-  top:50%;
+  left: 0;
+  top: 50%;
   transform: translateY(-50%);
 }
 
@@ -107,7 +116,10 @@ nav a.active:before {
   font-size: 12px;
 }
 
-.sourcedisplay, .sourcedisplay:focus, .sourcedisplay:active, .sourcedisplay:visited {
+.sourcedisplay,
+.sourcedisplay:focus,
+.sourcedisplay:active,
+.sourcedisplay:visited {
   color: #777;
 }
 
@@ -115,12 +127,12 @@ nav a.active:before {
   color: #111;
 }
 
-.richexample__add {
+.overview-example__add {
   display: none;
 }
 
 .react-flow__node a {
-  font-weight :700;
+  font-weight: 700;
   color: #111;
 }
 
@@ -146,7 +158,7 @@ nav a.active:before {
     display: none;
   }
 
-  .richexample__add {
+  .overview-example__add {
     display: block;
   }
-}
+}

src/additional-components/Background/index.tsx

@@ -0,0 +1,54 @@
+import React, { memo, HTMLAttributes, CSSProperties } from 'react';
+import classnames from 'classnames';
+
+import { useStoreState } from '../../store/hooks';
+import { BackgroundVariant } from '../../types';
+import { createGridLinesPath, createGridDotsPath } from './utils';
+
+interface BackgroundProps extends HTMLAttributes<SVGElement> {
+  variant?: BackgroundVariant;
+  gap?: number;
+  color?: string;
+  size?: number;
+}
+
+const baseStyles: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+};
+
+const defaultColors = {
+  [BackgroundVariant.Dots]: '#999',
+  [BackgroundVariant.Lines]: '#eee',
+};
+
+const Background = memo(
+  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style = {}, className = '' }: BackgroundProps) => {
+    const width = useStoreState((s) => s.width);
+    const height = useStoreState((s) => s.height);
+    const [x, y, scale] = useStoreState((s) => s.transform);
+
+    const bgClasses = classnames('react-flow__background', className);
+    const bgColor = color ? color : defaultColors[variant];
+    const scaledGap = gap * scale;
+    const xOffset = x % scaledGap;
+    const yOffset = y % scaledGap;
+    const isLines = variant === BackgroundVariant.Lines;
+    const path = isLines
+      ? createGridLinesPath(width, height, xOffset, yOffset, scaledGap)
+      : createGridDotsPath(width, height, xOffset, yOffset, scaledGap, size);
+    const fill = isLines ? 'none' : bgColor;
+    const stroke = isLines ? bgColor : 'none';
+
+    return (
+      <svg width={width} height={height} style={{ ...baseStyles, ...style }} className={bgClasses}>
+        <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
+      </svg>
+    );
+  }
+);
+
+Background.displayName = 'Background';
+
+export default Background;

src/additional-components/Background/utils.ts

@@ -0,0 +1,37 @@
+export const createGridLinesPath = (
+  width: number,
+  height: number,
+  xOffset: number,
+  yOffset: number,
+  gap: number
+): string => {
+  const lineCountX = Math.ceil(width / gap) + 1;
+  const lineCountY = Math.ceil(height / gap) + 1;
+
+  const xValues = Array.from({ length: lineCountX }, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
+  const yValues = Array.from({ length: lineCountY }, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
+
+  return [...xValues, ...yValues].join(' ');
+};
+
+export const createGridDotsPath = (
+  width: number,
+  height: number,
+  xOffset: number,
+  yOffset: number,
+  gap: number,
+  size: number
+): string => {
+  const lineCountX = Math.ceil(width / gap) + 1;
+  const lineCountY = Math.ceil(height / gap) + 1;
+
+  const values = Array.from({ length: lineCountX }, (_, col) => {
+    const x = col * gap + xOffset;
+    return Array.from({ length: lineCountY }, (_, row) => {
+      const y = row * gap + yOffset;
+      return `M${x} ${y - size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
+    }).join(' ');
+  });
+
+  return values.join(' ');
+};

src/additional-components/Controls/index.tsx

@@ -25,7 +25,7 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
   const setInteractive = useStoreActions((actions) => actions.setInteractive);
-  const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
+  const isInteractive = useStoreState((s) => s.isInteractive);
   const mapClasses: string = classnames('react-flow__controls', className);
 
   return (

src/additional-components/MiniMap/index.tsx

@@ -30,27 +30,23 @@ const MiniMap = ({
   nodeBorderRadius = 5,
   maskColor = 'rgba(10, 10, 10, .25)',
 }: MiniMapProps) => {
-  const state = useStoreState(({ width, height, nodes, transform: [tX, tY, tScale] }) => ({
-    width,
-    height,
-    nodes,
-    tX,
-    tY,
-    tScale,
-  }));
+  const containerWidth = useStoreState((s) => s.width);
+  const containerHeight = useStoreState((s) => s.height);
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const nodes = useStoreState((s) => s.nodes);
 
   const mapClasses = classnames('react-flow__minimap', className);
   const elementWidth = (style.width || baseStyle.width)! as number;
   const elementHeight = (style.height || baseStyle.height)! as number;
   const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
-  const hasNodes = state.nodes && state.nodes.length;
+  const hasNodes = nodes && nodes.length;
 
-  const bb = getRectOfNodes(state.nodes);
+  const bb = getRectOfNodes(nodes);
   const viewBB: Rect = {
-    x: -state.tX / state.tScale,
-    y: -state.tY / state.tScale,
-    width: state.width / state.tScale,
-    height: state.height / state.tScale,
+    x: -tX / tScale,
+    y: -tY / tScale,
+    width: containerWidth / tScale,
+    height: containerHeight / tScale,
   };
 
   const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
@@ -79,7 +75,7 @@ const MiniMap = ({
       }}
       className={mapClasses}
     >
-      {state.nodes.map((node) => (
+      {nodes.map((node) => (
         <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
       ))}
       <path

src/additional-components/index.ts

@@ -0,0 +1,6 @@
+// These components are not used by React Flow directly
+// but the user can add them as a child of a React Flow component
+
+export { default as MiniMap } from './MiniMap';
+export { default as Controls } from './Controls';
+export { default as Background } from './Background';

src/components/BackgroundGrid/index.tsx

@@ -1,108 +0,0 @@
-import React, { memo, HTMLAttributes, CSSProperties } from 'react';
-import classnames from 'classnames';
-
-import { useStoreState } from '../../store/hooks';
-import { GridType } from '../../types';
-
-interface GridProps extends HTMLAttributes<SVGElement> {
-  backgroundType?: GridType;
-  gap?: number;
-  color?: string;
-  size?: number;
-}
-
-const baseStyles: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-};
-
-const createGridLines = (
-  width: number,
-  height: number,
-  xOffset: number,
-  yOffset: number,
-  gap: number
-): string => {
-  const lineCountX = Math.ceil(width / gap) + 1;
-  const lineCountY = Math.ceil(height / gap) + 1;
-
-  const xValues = Array.from(
-    { length: lineCountX },
-    (_, i) => `M${i * gap + xOffset} 0 V${height}`
-  );
-  const yValues = Array.from(
-    { length: lineCountY },
-    (_, i) => `M0 ${i * gap + yOffset} H${width}`
-  );
-
-  return [...xValues, ...yValues].join(' ');
-};
-
-const createGridDots = (
-  width: number,
-  height: number,
-  xOffset: number,
-  yOffset: number,
-  gap: number,
-  size: number
-): string => {
-  const lineCountX = Math.ceil(width / gap) + 1;
-  const lineCountY = Math.ceil(height / gap) + 1;
-
-  const values = Array.from({ length: lineCountX }, (_, col) => {
-    const x = col * gap + xOffset;
-    return Array.from({ length: lineCountY }, (_, row) => {
-      const y = row * gap + yOffset;
-      return `M${x} ${y -
-        size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`;
-    }).join(' ');
-  });
-
-  return values.join(' ');
-};
-
-const Grid = memo(
-  ({
-    gap = 24,
-    color = '#aaa',
-    size = 0.5,
-    style = {},
-    className = '',
-    backgroundType = GridType.Dots,
-  }: GridProps) => {
-    const {
-      width,
-      height,
-      transform: [x, y, scale],
-    } = useStoreState(s => s);
-
-    const gridClasses = classnames('react-flow__grid', className);
-    const scaledGap = gap * scale;
-
-    const xOffset = x % scaledGap;
-    const yOffset = y % scaledGap;
-    const isLines = backgroundType === 'lines';
-    const path = isLines
-      ? createGridLines(width, height, xOffset, yOffset, scaledGap)
-      : createGridDots(width, height, xOffset, yOffset, scaledGap, size);
-
-    const fill = isLines ? 'none' : color;
-    const stroke = isLines ? color : 'none';
-
-    return (
-      <svg
-        width={width}
-        height={height}
-        style={{ ...baseStyles, ...style }}
-        className={gridClasses}
-      >
-        <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
-      </svg>
-    );
-  }
-);
-
-Grid.displayName = 'Grid';
-
-export default Grid;

src/components/Edges/wrapEdge.tsx

@@ -13,7 +13,7 @@ interface EdgeWrapperProps {
   labelStyle?: CSSProperties;
   labelShowBg?: boolean;
   labelBgStyle: CSSProperties;
-  onClick: (edge: Edge) => void;
+  onClick?: (edge: Edge) => void;
   animated: boolean;
   selected: boolean;
   isInteractive: boolean;
@@ -46,7 +46,10 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
         }
 
         store.dispatch.setSelectedElements({ id, source, target });
-        onClick({ id, source, target, type });
+
+        if (onClick) {
+          onClick({ id, source, target, type });
+        }
       };
 
       return (

src/components/Handle/index.tsx

@@ -15,10 +15,8 @@ const Handle = memo(
     ...rest
   }: HandleProps) => {
     const nodeId = useContext(NodeIdContext) as ElementId;
-    const { setPosition, setSourceId } = useStoreActions((a) => ({
-      setPosition: a.setConnectionPosition,
-      setSourceId: a.setConnectionSourceId,
-    }));
+    const setPosition = useStoreActions((a) => a.setConnectionPosition);
+    const setSourceId = useStoreActions((a) => a.setConnectionSourceId);
     const onConnectAction = useStoreState((s) => s.onConnect);
     const onConnectExtended = (params: Connection) => {
       onConnectAction(params);

src/components/Nodes/wrapNode.tsx

@@ -10,16 +10,27 @@ import { Node, XYPosition, Transform, ElementId, NodeComponentProps, WrapNodePro
 const getMouseEvent = (evt: MouseEvent | TouchEvent) =>
   typeof TouchEvent !== 'undefined' && evt instanceof TouchEvent ? evt.touches[0] : (evt as MouseEvent);
 
-const onStart = (
-  evt: MouseEvent | TouchEvent,
-  onDragStart: (node: Node) => void,
-  id: ElementId,
-  type: string,
-  data: any,
-  setOffset: (pos: XYPosition) => void,
-  transform: Transform,
-  position: XYPosition
-): false | void => {
+interface OnDragStartParams {
+  evt: MouseEvent | TouchEvent;
+  id: ElementId;
+  type: string;
+  data: any;
+  setOffset: (pos: XYPosition) => void;
+  transform: Transform;
+  position: XYPosition;
+  onNodeDragStart?: (node: Node) => void;
+}
+
+const onStart = ({
+  evt,
+  onNodeDragStart,
+  id,
+  type,
+  data,
+  setOffset,
+  transform,
+  position,
+}: OnDragStartParams): false | void => {
   const startEvt = getMouseEvent(evt);
 
   const scaledClient: XYPosition = {
@@ -33,16 +44,21 @@ const onStart = (
 
   store.dispatch.setSelectedElements({ id, type } as Node);
   setOffset({ x: offsetX, y: offsetY });
-  onDragStart(node);
+
+  if (onNodeDragStart) {
+    onNodeDragStart(node);
+  }
 };
 
-const onDrag = (
-  evt: MouseEvent | TouchEvent,
-  setDragging: (isDragging: boolean) => void,
-  id: ElementId,
-  offset: XYPosition,
-  transform: Transform
-): void => {
+interface OnDragParams {
+  evt: MouseEvent | TouchEvent;
+  setDragging: (isDragging: boolean) => void;
+  id: ElementId;
+  offset: XYPosition;
+  transform: Transform;
+}
+
+const onDrag = ({ evt, setDragging, id, offset, transform }: OnDragParams): void => {
   const dragEvt = getMouseEvent(evt);
 
   const scaledClient = {
@@ -60,16 +76,27 @@ const onDrag = (
   });
 };
 
-const onStop = (
-  onDragStop: (node: Node) => void,
-  onClick: (node: Node) => void,
-  isDragging: boolean,
-  setDragging: (isDragging: boolean) => void,
-  id: ElementId,
-  type: string,
-  position: XYPosition,
-  data: any
-): void => {
+interface OnDragStopParams {
+  isDragging: boolean;
+  setDragging: (isDragging: boolean) => void;
+  id: ElementId;
+  type: string;
+  position: XYPosition;
+  data: any;
+  onNodeDragStop?: (node: Node) => void;
+  onClick?: (node: Node) => void;
+}
+
+const onStop = ({
+  onNodeDragStop,
+  onClick,
+  isDragging,
+  setDragging,
+  id,
+  type,
+  position,
+  data,
+}: OnDragStopParams): void => {
   const node = {
     id,
     type,
@@ -77,12 +104,15 @@ const onStop = (
     data,
   } as Node;
 
-  if (!isDragging) {
+  if (!isDragging && onClick) {
     return onClick(node);
   }
 
   setDragging(false);
-  onDragStop(node);
+
+  if (onNodeDragStop) {
+    onNodeDragStop(node);
+  }
 };
 
 export default (NodeComponent: ComponentType<NodeComponentProps>) => {
@@ -146,9 +176,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
       return (
         <DraggableCore
-          onStart={(evt) => onStart(evt as MouseEvent, onNodeDragStart, id, type, data, setOffset, transform, position)}
-          onDrag={(evt) => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
-          onStop={() => onStop(onNodeDragStop, onClick, isDragging, setDragging, id, type, position, data)}
+          onStart={(evt) =>
+            onStart({ evt: evt as MouseEvent, 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 })}
           scale={transform[2]}
           disabled={!isInteractive}
           cancel=".nodrag"

src/components/NodesSelection/index.tsx

@@ -30,30 +30,28 @@ function getStartPositions(nodes: Node[]): StartPositions {
 export default memo(() => {
   const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
   const [startPositions, setStartPositions] = useState<StartPositions>({});
-  const state = useStoreState((s) => ({
-    transform: s.transform,
-    selectedNodesBbox: s.selectedNodesBbox,
-    selectedElements: s.selectedElements,
-    snapToGrid: s.snapToGrid,
-    snapGrid: s.snapGrid,
-    nodes: s.nodes,
-  }));
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const selectedNodesBbox = useStoreState((s) => s.selectedNodesBbox);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const snapToGrid = useStoreState((s) => s.snapToGrid);
+  const snapGrid = useStoreState((s) => s.snapGrid);
+  const nodes = useStoreState((s) => s.nodes);
+
   const updateNodePos = useStoreActions((a) => a.updateNodePos);
-  const [tx, ty, tScale] = state.transform;
-  const position = state.selectedNodesBbox;
-  const grid = (state.snapToGrid ? state.snapGrid : [1, 1])! as [number, number];
+  const position = selectedNodesBbox;
+  const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
 
   const onStart = (evt: MouseEvent) => {
     const scaledClient: XYPosition = {
       x: evt.clientX / tScale,
       y: evt.clientY / tScale,
     };
-    const offsetX: number = scaledClient.x - position.x - tx;
-    const offsetY: number = scaledClient.y - position.y - ty;
-    const selectedNodes = state.selectedElements
-      ? (state.selectedElements.filter(isNode) as Node[]).map(
-          (selectedNode) => state.nodes.find((node) => node.id === selectedNode.id)! as Node
-        )
+    const offsetX: number = scaledClient.x - position.x - tX;
+    const offsetY: number = scaledClient.y - position.y - tY;
+    const selectedNodes = selectedElements
+      ? selectedElements
+          .filter(isNode)
+          .map((selectedNode) => nodes.find((node) => node.id === selectedNode.id)! as Node)
       : [];
 
     const nextStartPositions = getStartPositions(selectedNodes);
@@ -70,11 +68,11 @@ export default memo(() => {
       y: evt.clientY / tScale,
     };
 
-    if (state.selectedElements) {
-      (state.selectedElements.filter(isNode) as Node[]).forEach((node) => {
+    if (selectedElements) {
+      selectedElements.filter(isNode).forEach((node) => {
         const pos: XYPosition = {
-          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tx,
-          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - ty,
+          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tX,
+          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - tY,
         };
 
         updateNodePos({ id: node.id, pos });
@@ -86,7 +84,7 @@ export default memo(() => {
     <div
       className="react-flow__nodesselection"
       style={{
-        transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
+        transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
       }}
     >
       <ReactDraggable
@@ -98,10 +96,10 @@ export default memo(() => {
         <div
           className="react-flow__nodesselection-rect"
           style={{
-            width: state.selectedNodesBbox.width,
-            height: state.selectedNodesBbox.height,
-            top: state.selectedNodesBbox.y,
-            left: state.selectedNodesBbox.x,
+            width: selectedNodesBbox.width,
+            height: selectedNodesBbox.height,
+            top: selectedNodesBbox.y,
+            left: selectedNodesBbox.x,
           }}
         />
       </ReactDraggable>

src/components/UserSelection/index.tsx

@@ -45,11 +45,9 @@ const SelectionRect = () => {
 };
 
 export default memo(({ isInteractive }: UserSelectionProps) => {
-  const { setUserSelection, updateUserSelection, unsetUserSelection } = useStoreActions((a) => ({
-    setUserSelection: a.setUserSelection,
-    updateUserSelection: a.updateUserSelection,
-    unsetUserSelection: a.unsetUserSelection,
-  }));
+  const setUserSelection = useStoreActions((a) => a.setUserSelection);
+  const updateUserSelection = useStoreActions((a) => a.updateUserSelection);
+  const unsetUserSelection = useStoreActions((a) => a.unsetUserSelection);
 
   if (!isInteractive) {
     return null;

src/container/EdgeRenderer/index.tsx

@@ -187,23 +187,13 @@ function renderEdge(
 }
 
 const EdgeRenderer = memo((props: EdgeRendererProps) => {
-  const {
-    transform,
-    edges,
-    nodes,
-    connectionSourceId,
-    connectionPosition: { x, y },
-    selectedElements,
-    isInteractive,
-  } = useStoreState((s) => ({
-    transform: s.transform,
-    edges: s.edges,
-    nodes: s.nodes,
-    connectionSourceId: s.connectionSourceId,
-    connectionPosition: s.connectionPosition,
-    selectedElements: s.selectedElements,
-    isInteractive: s.isInteractive,
-  }));
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const edges = useStoreState((s) => s.edges);
+  const nodes = useStoreState((s) => s.nodes);
+  const connectionSourceId = useStoreState((s) => s.connectionSourceId);
+  const connectionPosition = useStoreState((s) => s.connectionPosition);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const isInteractive = useStoreState((s) => s.isInteractive);
 
   const { width, height, connectionLineStyle, connectionLineType } = props;
 
@@ -211,8 +201,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
     return null;
   }
 
-  const [tx, ty, tScale] = transform;
-  const transformStyle = `translate(${tx},${ty}) scale(${tScale})`;
+  const transformStyle = `translate(${tX},${tY}) scale(${tScale})`;
 
   return (
     <svg width={width} height={height} className="react-flow__edges">
@@ -222,9 +211,9 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
           <ConnectionLine
             nodes={nodes}
             connectionSourceId={connectionSourceId}
-            connectionPositionX={x}
-            connectionPositionY={y}
-            transform={transform}
+            connectionPositionX={connectionPosition.x}
+            connectionPositionY={connectionPosition.y}
+            transform={[tX, tY, tScale]}
             connectionLineStyle={connectionLineStyle}
             connectionLineType={connectionLineType}
             isInteractive={isInteractive}

src/container/GraphView/index.tsx

@@ -6,34 +6,29 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
-import BackgroundGrid from '../../components/BackgroundGrid';
 import useKeyPress from '../../hooks/useKeyPress';
 import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
 import { fitView, zoomIn, zoomOut, project } from '../../utils/graph';
-import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types';
+import { Elements, NodeTypesType, EdgeTypesType, OnLoadFunc, Node, Edge, Connection } from '../../types';
 
 export interface GraphViewProps {
   elements: Elements;
-  onElementClick: (element: Node | Edge) => void;
-  onElementsRemove: (elements: Elements) => void;
-  onNodeDragStart: (node: Node) => void;
-  onNodeDragStop: (node: Node) => void;
-  onConnect: (connection: Connection | Edge) => void;
-  onLoad: OnLoadFunc;
-  onMove: () => void;
+  onElementClick?: (element: Node | Edge) => void;
+  onElementsRemove?: (elements: Elements) => void;
+  onNodeDragStart?: (node: Node) => void;
+  onNodeDragStop?: (node: Node) => void;
+  onConnect?: (connection: Connection | Edge) => void;
+  onLoad?: OnLoadFunc;
+  onMove?: () => void;
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: string;
   connectionLineStyle: CSSProperties;
   deleteKeyCode: number;
-  showBackground: boolean;
-  backgroundGap: number;
-  backgroundColor: string;
-  backgroundType: GridType;
   snapToGrid: boolean;
   snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
@@ -55,10 +50,6 @@ const GraphView = memo(
     onElementsRemove,
     deleteKeyCode,
     elements,
-    showBackground,
-    backgroundGap,
-    backgroundColor,
-    backgroundType,
     onConnect,
     snapToGrid,
     snapGrid,
@@ -67,14 +58,11 @@ const GraphView = memo(
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
-    const state = useStoreState((s) => ({
-      width: s.width,
-      height: s.height,
-      nodes: s.nodes,
-      edges: s.edges,
-      d3Initialised: s.d3Initialised,
-      nodesSelectionActive: s.nodesSelectionActive,
-    }));
+    const width = useStoreState((s) => s.width);
+    const height = useStoreState((s) => s.height);
+    const d3Initialised = useStoreState((s) => s.d3Initialised);
+    const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
+
     const updateSize = useStoreActions((actions) => actions.updateSize);
     const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
     const setOnConnect = useStoreActions((a) => a.setOnConnect);
@@ -101,18 +89,21 @@ const GraphView = memo(
 
     useEffect(() => {
       updateDimensions();
-      setOnConnect(onConnect);
       window.onresize = updateDimensions;
 
+      if (onConnect) {
+        setOnConnect(onConnect);
+      }
+
       return () => {
         window.onresize = null;
       };
     }, []);
 
-    useD3Zoom(zoomPane, onMove, selectionKeyPressed);
+    useD3Zoom({ zoomPane, onMove, selectionKeyPressed });
 
     useEffect(() => {
-      if (state.d3Initialised) {
+      if (d3Initialised && onLoad) {
         onLoad({
           fitView,
           zoomIn,
@@ -120,7 +111,7 @@ const GraphView = memo(
           project,
         });
       }
-    }, [state.d3Initialised]);
+    }, [d3Initialised, onLoad]);
 
     useEffect(() => {
       setSnapGrid({ snapToGrid, snapGrid });
@@ -135,9 +126,6 @@ const GraphView = memo(
 
     return (
       <div className={rendererClasses} ref={rendererNode}>
-        {showBackground && (
-          <BackgroundGrid gap={backgroundGap} color={backgroundColor} backgroundType={backgroundType} />
-        )}
         <NodeRenderer
           nodeTypes={nodeTypes}
           onElementClick={onElementClick}
@@ -146,15 +134,15 @@ const GraphView = memo(
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
         />
         <EdgeRenderer
-          width={state.width}
-          height={state.height}
+          width={width}
+          height={height}
           edgeTypes={edgeTypes}
           onElementClick={onElementClick}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
         />
         {selectionKeyPressed && <UserSelection isInteractive={isInteractive} />}
-        {state.nodesSelectionActive && <NodesSelection />}
+        {nodesSelectionActive && <NodesSelection />}
         <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
       </div>
     );

src/container/NodeRenderer/index.tsx

@@ -6,9 +6,9 @@ import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '.
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
-  onElementClick: (element: Node | Edge) => void;
-  onNodeDragStart: (node: Node) => void;
-  onNodeDragStop: (node: Node) => void;
+  onElementClick?: (element: Node | Edge) => void;
+  onNodeDragStart?: (node: Node) => void;
+  onNodeDragStop?: (node: Node) => void;
   onlyRenderVisibleNodes?: boolean;
 }
 
@@ -22,7 +22,7 @@ function renderNode(
   const nodeType = node.type || 'default';
   const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
   if (!props.nodeTypes[nodeType]) {
-    console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
+    console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
   }
 
   const isSelected = selectedElements ? selectedElements.some(({ id }) => id === node.id) : false;
@@ -49,18 +49,15 @@ function renderNode(
 }
 
 const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
-  const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState((s) => ({
-    nodes: s.nodes,
-    transform: s.transform,
-    selectedElements: s.selectedElements,
-    width: s.width,
-    height: s.height,
-    isInteractive: s.isInteractive,
-  }));
-
-  const [tx, ty, tScale] = transform;
+  const nodes = useStoreState((s) => s.nodes);
+  const transform = useStoreState((s) => s.transform);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const width = useStoreState((s) => s.width);
+  const height = useStoreState((s) => s.height);
+  const isInteractive = useStoreState((s) => s.isInteractive);
+  const [tX, tY, tScale] = transform;
   const transformStyle = {
-    transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
+    transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
   };
 
   const renderNodes = onlyRenderVisibleNodes

src/container/ReactFlow/index.tsx

@@ -20,30 +20,26 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import store from '../../store';
-import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc, Node, Edge, Connection } from '../../types';
+import { Elements, NodeTypesType, EdgeTypesType, OnLoadFunc, Node, Edge, Connection } from '../../types';
 
 import '../../style.css';
 
 export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
   elements: Elements;
-  onElementClick: (element: Node | Edge) => void;
-  onElementsRemove: (elements: Elements) => void;
-  onNodeDragStart: (node: Node) => void;
-  onNodeDragStop: (node: Node) => void;
-  onConnect: (connection: Edge | Connection) => void;
-  onLoad: OnLoadFunc;
-  onMove: () => void;
-  onSelectionChange: (elements: Elements | null) => void;
+  onElementClick?: (element: Node | Edge) => void;
+  onElementsRemove?: (elements: Elements) => void;
+  onNodeDragStart?: (node: Node) => void;
+  onNodeDragStop?: (node: Node) => void;
+  onConnect?: (connection: Edge | Connection) => void;
+  onLoad?: OnLoadFunc;
+  onMove?: () => void;
+  onSelectionChange?: (elements: Elements | null) => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: string;
   connectionLineStyle: CSSProperties;
   deleteKeyCode: number;
   selectionKeyCode: number;
-  showBackground: boolean;
-  backgroundGap: number;
-  backgroundColor: string;
-  backgroundType: GridType;
   snapToGrid: boolean;
   snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
@@ -69,10 +65,6 @@ const ReactFlow = ({
   connectionLineStyle,
   deleteKeyCode,
   selectionKeyCode,
-  showBackground,
-  backgroundGap,
-  backgroundType,
-  backgroundColor,
   snapToGrid,
   snapGrid,
   onlyRenderVisibleNodes,
@@ -99,10 +91,6 @@ const ReactFlow = ({
           deleteKeyCode={deleteKeyCode}
           elements={elements}
           onConnect={onConnect}
-          backgroundColor={backgroundColor}
-          backgroundGap={backgroundGap}
-          showBackground={showBackground}
-          backgroundType={backgroundType}
           snapToGrid={snapToGrid}
           snapGrid={snapGrid}
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
@@ -118,13 +106,6 @@ const ReactFlow = ({
 ReactFlow.displayName = 'ReactFlow';
 
 ReactFlow.defaultProps = {
-  onElementClick: () => {},
-  onElementsRemove: () => {},
-  onNodeDragStart: () => {},
-  onNodeDragStop: () => {},
-  onConnect: () => {},
-  onLoad: () => {},
-  onMove: () => {},
   nodeTypes: {
     input: InputNode,
     default: DefaultNode,
@@ -139,10 +120,6 @@ ReactFlow.defaultProps = {
   connectionLineStyle: {},
   deleteKeyCode: 8,
   selectionKeyCode: 16,
-  backgroundColor: '#eee',
-  backgroundGap: 24,
-  showBackground: true,
-  backgroundType: GridType.Dots,
   snapToGrid: false,
   snapGrid: [16, 16],
   onlyRenderVisibleNodes: true,

src/hooks/useD3Zoom.ts

@@ -1,23 +1,26 @@
 import { useEffect, MutableRefObject } from 'react';
-import * as d3Zoom from 'd3-zoom';
+import { zoom, zoomIdentity } from 'd3-zoom';
 import { select, event } from 'd3-selection';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
 
-const d3ZoomInstance = d3Zoom
-  .zoom()
+interface UseD3ZoomParams {
+  zoomPane: MutableRefObject<Element | null>;
+  selectionKeyPressed: boolean;
+  onMove?: () => void;
+}
+
+const d3ZoomInstance = zoom()
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
-export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void, shiftPressed: boolean): void => {
-  const state = useStoreState(s => ({
-    transform: s.transform,
-    d3Selection: s.d3Selection,
-    d3Zoom: s.d3Zoom,
-  }));
+export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
+  const transform = useStoreState((s) => s.transform);
+  const d3Selection = useStoreState((s) => s.d3Selection);
+  const d3Zoom = useStoreState((s) => s.d3Zoom);
 
-  const initD3 = useStoreActions(actions => actions.initD3);
-  const updateTransform = useStoreActions(actions => actions.updateTransform);
+  const initD3 = useStoreActions((actions) => actions.initD3);
+  const updateTransform = useStoreActions((actions) => actions.updateTransform);
 
   useEffect(() => {
     if (zoomPane.current) {
@@ -27,7 +30,7 @@ export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void,
   }, []);
 
   useEffect(() => {
-    if (shiftPressed) {
+    if (selectionKeyPressed) {
       d3ZoomInstance.on('zoom', null);
     } else {
       d3ZoomInstance.on('zoom', () => {
@@ -37,21 +40,20 @@ export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void,
 
         updateTransform(event.transform);
 
-        onMove();
+        if (onMove) {
+          onMove();
+        }
       });
 
-      if (state.d3Selection && state.d3Zoom) {
+      if (d3Selection && d3Zoom) {
         // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
-        const graphTransform = d3Zoom.zoomIdentity
-          .translate(state.transform[0], state.transform[1])
-          .scale(state.transform[2]);
-
-        state.d3Selection.call(state.d3Zoom.transform, graphTransform);
+        const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(transform[2]);
+        d3Selection.call(d3Zoom.transform, graphTransform);
       }
     }
 
     return () => {
       d3ZoomInstance.on('zoom', null);
     };
-  }, [shiftPressed]);
+  }, [selectionKeyPressed]);
 };

src/hooks/useElementUpdater.ts

@@ -6,13 +6,8 @@ import { parseElement, isNode, isEdge } from '../utils/graph';
 import { Elements, Node, Edge } from '../types';
 
 const useElementUpdater = (elements: Elements): void => {
-  const state = useStoreState((s) => ({
-    nodes: s.nodes,
-    edges: s.edges,
-    transform: s.transform,
-    snapToGrid: s.snapToGrid,
-    snapGrid: s.snapGrid,
-  }));
+  const stateNodes = useStoreState((s) => s.nodes);
+  const stateEdges = useStoreState((s) => s.edges);
 
   const setNodes = useStoreActions((a) => a.setNodes);
   const setEdges = useStoreActions((a) => a.setEdges);
@@ -22,7 +17,7 @@ const useElementUpdater = (elements: Elements): void => {
     const edges: Edge[] = elements.filter(isEdge).map((e) => parseElement(e) as Edge);
 
     const nextNodes: Node[] = nodes.map((propNode) => {
-      const existingNode = state.nodes.find((n) => n.id === propNode.id);
+      const existingNode = stateNodes.find((n) => n.id === propNode.id);
 
       if (existingNode) {
         const data = !isEqual(existingNode.data, propNode.data)
@@ -59,8 +54,8 @@ const useElementUpdater = (elements: Elements): void => {
       return parseElement(propNode) as Node;
     });
 
-    const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
-    const edgesChanged: boolean = !isEqual(state.edges, edges);
+    const nodesChanged: boolean = !isEqual(stateNodes, nextNodes);
+    const edgesChanged: boolean = !isEqual(stateEdges, edges);
 
     if (nodesChanged) {
       setNodes(nextNodes);
@@ -69,7 +64,7 @@ const useElementUpdater = (elements: Elements): void => {
     if (edgesChanged) {
       setEdges(edges);
     }
-  }, [elements, state.nodes, state.edges]);
+  }, [elements, stateNodes, stateEdges]);
 };
 
 export default useElementUpdater;

src/hooks/useGlobalKeyHandler.ts

@@ -2,31 +2,30 @@ import { useEffect } from 'react';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
 import useKeyPress from './useKeyPress';
-import { isEdge, getConnectedEdges } from '../utils/graph';
-import { Elements, Node } from '../types';
+import { isNode, getConnectedEdges } from '../utils/graph';
+import { Elements } from '../types';
 
 interface HookParams {
   deleteKeyCode: number;
-  onElementsRemove: (elements: Elements) => void;
+  onElementsRemove?: (elements: Elements) => void;
 }
 
 export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
-  const state = useStoreState((s) => ({
-    selectedElements: s.selectedElements,
-    edges: s.edges,
-  }));
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const edges = useStoreState((s) => s.edges);
+
   const setNodesSelection = useStoreActions((a) => a.setNodesSelection);
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
 
   useEffect(() => {
-    if (deleteKeyPressed && state.selectedElements) {
-      let elementsToRemove = state.selectedElements;
+    if (onElementsRemove && deleteKeyPressed && selectedElements) {
+      let elementsToRemove = selectedElements;
 
       // we also want to remove the edges if only one node is selected
-      if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
-        const node = (state.selectedElements[0] as unknown) as Node;
-        const connectedEdges = getConnectedEdges([node], state.edges);
-        elementsToRemove = [...state.selectedElements, ...connectedEdges];
+      if (selectedElements.length === 1 && isNode(selectedElements[0])) {
+        const node = selectedElements[0];
+        const connectedEdges = getConnectedEdges([node], edges);
+        elementsToRemove = [...selectedElements, ...connectedEdges];
       }
 
       onElementsRemove(elementsToRemove);

src/index.ts

@@ -4,8 +4,8 @@ export default ReactFlow;
 
 export { default as Handle } from './components/Handle';
 export { default as EdgeText } from './components/Edges/EdgeText';
-export { MiniMap, Controls } from './plugins';
 
 export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/graph';
 
+export * from './additional-components';
 export * from './types';

src/plugins/index.ts

@@ -1,2 +0,0 @@
-export { default as MiniMap } from './MiniMap';
-export { default as Controls } from './Controls';

src/types/index.ts

@@ -54,7 +54,7 @@ export interface Edge {
   animated?: boolean;
 }
 
-export enum GridType {
+export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
 }
@@ -108,7 +108,8 @@ export interface NodeComponentProps {
   yPos?: number;
   targetPosition?: Position;
   sourcePosition?: Position;
-  onClick?: (node: Node) => void | undefined;
+  onClick?: (node: Node) => void;
+  onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
 }
@@ -122,9 +123,9 @@ export interface WrapNodeProps {
   xPos: number;
   yPos: number;
   isInteractive: boolean;
-  onClick: (node: Node) => void | undefined;
-  onNodeDragStart: (node: Node) => void;
-  onNodeDragStop: (node: Node) => void;
+  onClick?: (node: Node) => void;
+  onNodeDragStart?: (node: Node) => void;
+  onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
   sourcePosition?: Position;
   targetPosition?: Position;