React flow - Concept - Revision history

Pchero: Pchero moved page React flow to React flow - Concept

2024-03-05T06:18:17Z

Pchero moved page React flow to React flow - Concept

← Older revision	Revision as of 06:18, 5 March 2024
(No difference)

Pchero: /* Background */

2024-03-01T14:57:00Z

Background

← Older revision		Revision as of 14:57, 1 March 2024
Line 126:		Line 126:
	=== Background ===		=== Background ===
	If you want to display the pattern background, you can use the Background component.		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.

	[[category:react]]		[[category:react]]

Pchero: /* Controls */

2024-03-01T14:48:56Z

Controls

← Older revision		Revision as of 14:48, 1 March 2024
Line 123:		Line 123:
	=== Controls ===		=== Controls ===
	React Flow comes with a customizable controls bar, that you can use by importing the Controls component.		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.

	[[category:react]]		[[category:react]]

Pchero at 14:46, 1 March 2024

2024-03-01T14:46:06Z

← Older revision		Revision as of 14:46, 1 March 2024
Line 88:		Line 88:
	</pre>		</pre>

	===The Viewport ===		==The Viewport ==
	==== Panning and Zooming ====		=== 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:		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		* panOnDrag: default: true
Line 103:		Line 103:
	* panActivationKeyCode: default 'Space'		* panActivationKeyCode: default 'Space'

	==== Default Viewport Control ====		=== Default Viewport Control ===
	Default controls are:		Default controls are:
	* pan: drag mouse		* pan: drag mouse
Line 109:		Line 109:
	* create selection: Shift + drag		* create selection: Shift + drag

	==== Figma-like Viewport Controls ====		=== Figma-like Viewport Controls ===
	If you prefer figma/sketch/design tool controls you can set panOnScroll={true} and selectionOnDrag={true};		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.		* pan: Space + drag mouse, scroll, middle or right mouse.
Line 115:		Line 115:
	* create selection: drag mouse		* create selection: drag mouse

	=== Plugin Components ===		== Plugin Components ==
	React Flow comes with several additional plugin components.		React Flow comes with several additional plugin components.

	==== MiniMap ====		=== 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.		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.

	[[category:react]]		[[category:react]]

Pchero: /* = Panning and Zooming */

2024-03-01T14:37:51Z

= Panning and Zooming

← Older revision		Revision as of 14:37, 1 March 2024
Line 89:		Line 89:

	===The Viewport ===		===The Viewport ===
	==== Panning and Zooming ===		==== 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:		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		* panOnDrag: default: true
Line 108:		Line 108:
	* zoom: scroll		* zoom: scroll
	* create selection: Shift + drag		* 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.

	[[category:react]]		[[category:react]]

Pchero at 14:21, 1 March 2024

2024-03-01T14:21:02Z

← Older revision		Revision as of 14:21, 1 March 2024
Line 88:		Line 88:
	</pre>		</pre>

			===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
	[[category:react]]		[[category:react]]

Pchero: /* Connecting Nodes */

2024-03-01T14:16:40Z

Connecting Nodes

← Older revision		Revision as of 14:16, 1 March 2024
Line 75:		Line 75:

	or use the defaultEdgeOptions prop:		or use the defaultEdgeOptions prop:
	~~```~~		<pre>
	const defaultEdgeOptions = { animated: true };		const defaultEdgeOptions = { animated: true };
	...		...
Line 86:		Line 86:
	defaultEdgeOptions={defaultEdgeOptions}		defaultEdgeOptions={defaultEdgeOptions}
	/>;		/>;
	~~```~~		</pre>

	[[category:react]]		[[category:react]]

Pchero: /* Connecting Nodes */

2024-03-01T14:16:22Z

Connecting Nodes

← Older revision		Revision as of 14:16, 1 March 2024
Line 66:		Line 66:

	=== Connecting Nodes ===		=== Connecting Nodes ===
	~~```~~		<pre>
	const onConnect = useCallback(		const onConnect = useCallback(
	(connection) =>		(connection) =>
Line 72:		Line 72:
	[setEdges],		[setEdges],
	);		);
	~~```~~		</pre>

	or use the defaultEdgeOptions prop:		or use the defaultEdgeOptions prop:

Pchero at 14:16, 1 March 2024

2024-03-01T14:16:03Z

← Older revision		Revision as of 14:16, 1 March 2024
Line 66:		Line 66:

	=== Connecting Nodes ===		=== Connecting Nodes ===
	~~<code lang=javascript>~~		```
	const onConnect = useCallback(		const onConnect = useCallback(
	(connection) =>		(connection) =>
Line 72:		Line 72:
	[setEdges],		[setEdges],
	);		);
	~~</code>~~		```

	or use the defaultEdgeOptions prop:		or use the defaultEdgeOptions prop:
	~~<code lang=javascript>~~		```
	const defaultEdgeOptions = { animated: true };		const defaultEdgeOptions = { animated: true };
	...		...
Line 86:		Line 86:
	defaultEdgeOptions={defaultEdgeOptions}		defaultEdgeOptions={defaultEdgeOptions}
	/>;		/>;
	~~</code>~~		```


	[[category:react]]		[[category:react]]

Pchero at 14:15, 1 March 2024

2024-03-01T14:15:06Z

← Older revision		Revision as of 14:15, 1 March 2024
Line 66:		Line 66:

	=== Connecting Nodes ===		=== Connecting Nodes ===
			<code lang=javascript>
			const onConnect = useCallback(
			(connection) =>
			setEdges((eds) => addEdge({ ...connection, animated: true }, eds)),
			[setEdges],
			);
			</code>

			or use the defaultEdgeOptions prop:
			<code lang=javascript>
			const defaultEdgeOptions = { animated: true };
			...
			<ReactFlow
			nodes={nodes}
			edges={edges}
			onNodesChange={onNodesChange}
			onEdgesChange={onEdgesChange}
			onConnect={onConnect}
			defaultEdgeOptions={defaultEdgeOptions}
			/>;
			</code>


	[[category:react]]		[[category:react]]