React flow - Concept

Overview

React flow 내용 정리. 원문은 이곳<ref>https://reactflow.dev/learn</ref>에서 확인할 수 있다.

Introduction

Key features

Buillt-in plugins

• The <Background /> plugin implements some basic customisable background patterns.
• The <MiniMap /> plugin displays a small version of the graph in the corner of the screen.
• The <Controls /> plugin adds controls to zoom, center, and lock the viewport.
• The <Panel /> plugin makes it easy to position content on top of the viewport.
• The <NodeToolbar /> plugin lets you render a toolbar attached to a node.
• The <NodeResizer /> plugin makes it easy to add resize functionality to your nodes.

Definitions

Nodes

A node in React Flow is a React component. That means it can render anything you like. Each node has an x- and y-coordinate, which tells it where it is placed in the viewport. You can find all the options for customizing your nodes in the Node options<ref>https://reactflow.dev/api-reference/types/node</ref> documentation.

Custom Nodes

This is where the magic of React Flow happens. You can customize nodes to look and act however you would like. Much of the functionality that you might create is not built-in to React Flow. Some of the things you might do with a custom node are:

• Render form elements
• Visualize data
• Support multiple handles.

Handles

A handle(also called "port" in other libraries) is the place where an edge attaches to a node. The handle can be placed anywhere, and styled as you like. It's just a div element. By default, it appears as a grey circle on the top, bottom, left, or fight of the nodes you can has as many handles as you need in your node. More information can be found in the handle docs<ref>https://reactflow.dev/api-reference/components/handle</ref>.

Edges

An edge connects two nodes. Every edge needs a target and a source node. React Flow comes with four built-in edge typee:default(bezier), smoothstep, step and straight. An edge is SVG path that can be styled with OSS and is completely customizable. If you are using multiple handles, you can reference them individually to create multiple connections for a node.

Custom Edges

Like custom nodes, you can also customize edges. Things that people do with custom edges are:

• Add a button to remove an edge.
• Custom routing behaviour.
• Complex styling or interactions that cannot be solved with just one SVG path.

You can find more information on the custom edges api<ref>https://reactflow.dev/api-reference/types/edge-props</ref> site.

Connection Line

React Flow has built-in functionality to click-and-drag from one handle to another in order to create a new edge. While dragging, the placeholder edge is called a connection line. The connection line also comes with four types built-in and is customizable. You can find the props for configuring the connection in the props section<ref>https://reactflow.dev/api-reference/react-flow#connection-line</ref>.

Viewport

All of React Flow exists inside of the viewport. The viewport has a x, y and zoom value. When you drag the pane, you change the x and y coordinates and when you zoom in or out you alter the zoom level.

Core Concepts

A flow consists of nodes and edges(or just edges). You can pass arrays of nodes and edges as props to the ReactFlow component. Hereby all node and edge ids need to be unique. A node needs a position and a label(this could be different if you using custom nodes) and an edge needs a source(node id) and a target(node id). You can read more about the options in the Node options<ref>https://reactflow.dev/api-reference/types/node</ref> and Edge options<ref>https://reactflow.dev/api-reference/types/edge</ref> sections.

Controlled or Uncontrolled

With React Flow you have two ways to setup a flow. You can either create a controlled or an uncontrolled one. We recommend to use a controlled one but for simpler use cases you can also setup an uncontrolled flow.

Basic Functionality

By default, React Flow doesn't do any internal state updates besides handling the viewport when you setup a controlled flow. As with an <input /> component you need to pass handlers to apply the changes that are triggered by React Flow to your nodes and edges. In order to select, drag and remove nodes and edges you need to implement an onNodesChange and an onEdgesChange handler.

Whenever React Flow triggers a change(node init, node drag, edge select, etc.), the onNodeChange handler gets called. The React Flow export an applyNodeChanges handler so that you don't need to handle the changes by yourself. The applyNodeChanges handler returns an updated array of nodes that is your new nodes array. It allows following kind of interactions.

• selectable nodes and edges.
• draggable nodes.
• removable nodes and edges - (press Backspace to remove a selected node or edge, can be adjusted with the deleteKeyCode prop).
• multi-selection area by pressing Shift(that's the default selectionKeyCode).
• multi-selection by pressing command(that's the default multiSelectionKeyCode).

For convenience we export the helper hooks useNodeState and useEdgeState that you can use to create the nodes and edges state: ``` const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); ```

Connecting Nodes

const onConnect = useCallback(
  (connection) =>
    setEdges((eds) => addEdge({ ...connection, animated: true }, eds)),
  [setEdges],
);

or use the defaultEdgeOptions prop:

const defaultEdgeOptions = { animated: true };
...
<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  defaultEdgeOptions={defaultEdgeOptions}
/>;

The Viewport

Panning and Zooming

The default pan and zoom behaviour of React Flow is inspired by slippy maps. You pan by dragging and zoom by scrolling. You can customize this behaviour easily with the provided props:

• panOnDrag: default: true
• selectionOnDrag: default: false
• panOnScroll: default: false
• panOnScrollSpeed: default: 0.5
• panOnScrollMode: default: 'free'. 'free'(all directions), 'vertical'(only vertical) or 'horizontal'(only horizontal).
• zoomOnScroll: default: true
• zoomOnPinch: default: true
• zoomOnDoubleClick: default: true
• preventScrolling: default: true
• zoomActivationKeyCode: default 'Meta'
• panActivationKeyCode: default 'Space'

Default Viewport Control

Default controls are:

• pan: drag mouse
• zoom: scroll
• create selection: Shift + drag

Figma-like Viewport Controls

If you prefer figma/sketch/design tool controls you can set panOnScroll={true} and selectionOnDrag={true};

• pan: Space + drag mouse, scroll, middle or right mouse.
• zoom: pitch or cmd + scroll
• create selection: drag mouse

Plugin Components

React Flow comes with several additional plugin components.

MiniMap

If your flow gets bigger, you might want to get an overview quickly. For this we have built the MiniMap component. You can easily add it to your flow by adding it as a children.

Controls

React Flow comes with a customizable controls bar, that you can use by importing the Controls component.

Background

If you want to display the pattern background, you can use the Background component.

Panel

A helper component to display content on top of the React Flow viewport.