From 76ec1d9a7d111a9abe61ccc7d09ea6d4036bebf5 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 22 Oct 2019 17:47:27 +0200 Subject: [PATCH] refactor(examples): use func components --- README.md | 19 +++++- example/src/Basic/index.js | 89 ++++++++++------------------ example/src/Empty/index.js | 116 +++++++++++++------------------------ 3 files changed, 88 insertions(+), 136 deletions(-) diff --git a/README.md b/README.md index 4e5b3a5c..2258dc11 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # :ocean: React Flow -React library for building node-based flow editors. +React library for building node-based graphs. # Installation @@ -8,6 +8,23 @@ React library for building node-based flow editors. npm install github:wbkd/react-flow ``` +# Usage + +This is a very basic example of how to use react-flow. There are more advanced examples in the [example](/example) folder. + +```javascript +import React from 'react'; +import Graph from 'react-flow'; + +const elements = [ + { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, + { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } }, + { id: 'e1-2', source: '1', target: '2', animated: true }, +]; + +const BasicGraph = () => ; +``` + # Props - `elements`: array with nodes and edges diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js index 8716c12a..6aafadde 100644 --- a/example/src/Basic/index.js +++ b/example/src/Basic/index.js @@ -1,67 +1,38 @@ -import React, { PureComponent } from 'react'; +import React, { useState } from 'react'; -import Graph, { removeElements, addEdge, getOutgoers } from 'react-flow'; +import Graph, { removeElements, addEdge } from 'react-flow'; const onNodeDragStop = node => console.log('drag stop', node); +const onLoad = graphInstance => console.log('graph loaded:', graphInstance); +const onElementClick = element => console.log('click', element); -class App extends PureComponent { - constructor() { - super(); +const initialElements = [ + { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, + { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } }, + { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } }, + { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }, + { id: 'e1-2', source: '1', target: '2', animated: true }, + { id: 'e1-3', source: '1', target: '3' }, +]; - this.state = { - graphLoaded: false, - elements: [ - { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, - { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } }, - { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } }, - { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }, - { id: 'e1-2', source: '1', target: '2', animated: true }, - { id: 'e1-3', source: '1', target: '3' }, - ] - }; - } +const BasicGraph = () => { + const [elements, setElements] = useState(initialElements); + const onElementsRemove = (elementsToRemove) => + setElements(els => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements(els => addEdge(params, els)); - onLoad(graphInstance) { - console.log('graph loaded:', graphInstance); - - this.graphInstance = graphInstance; - this.setState({ - graphLoaded: true - }); - } - - onElementClick(element) { - console.log('click', element); - console.log('outgoers', getOutgoers(element, this.state.elements)); - } - - onElementsRemove(elementsToRemove) { - this.setState(prevState => ({ - elements: removeElements(elementsToRemove, prevState.elements) - })); - } - - onConnect(params) { - console.log('connect', params); - this.setState(prevState => ({ - elements: addEdge(params, prevState.elements) - })); - } - - render() { - return ( - this.onLoad(graphInstance)} - onElementClick={element => this.onElementClick(element)} - onElementsRemove={elements => this.onElementsRemove(elements)} - onConnect={params => this.onConnect(params)} - onNodeDragStop={onNodeDragStop} - style={{ width: '100%', height: '100%' }} - backgroundType="lines" - /> - ); - } + return ( + + ); } -export default App; +export default BasicGraph; diff --git a/example/src/Empty/index.js b/example/src/Empty/index.js index 19fa2cc5..c9ca24a8 100644 --- a/example/src/Empty/index.js +++ b/example/src/Empty/index.js @@ -1,84 +1,48 @@ -import React, { PureComponent } from 'react'; +import React, { useState } from 'react'; -import Graph, { removeElements, addEdge, getOutgoers, MiniMap } from 'react-flow'; +import Graph, { removeElements, addEdge, MiniMap, Controls } from 'react-flow'; const onNodeDragStop = node => console.log('drag stop', node); +const onLoad = graphInstance => console.log('graph loaded:', graphInstance); +const onElementClick = element => console.log('click', element); -class App extends PureComponent { - constructor() { - super(); - - this.state = { - graphLoaded: false, - elements: [] +const EmptyGraph = () => { + const [elements, setElements] = useState([]); + const onElementsRemove = (elementsToRemove) => + setElements(els => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements(els => addEdge(params, els)); + const onAdd = () => { + const nodeId = (elements.length + 1).toString(); + const newNode = { + id: nodeId, + data: { label: `Node: ${nodeId}` }, + position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight } }; - } + setElements(els => els.concat(newNode)); + }; - onLoad(graphInstance) { - console.log('graph loaded:', graphInstance); - - this.graphInstance = graphInstance; - this.setState({ - graphLoaded: true - }); - } - - onElementClick(element) { - console.log('click', element); - console.log('outgoers', getOutgoers(element, this.state.elements)); - } - - onElementsRemove(elementsToRemove) { - this.setState(prevState => ({ - elements: removeElements(elementsToRemove, prevState.elements) - })); - } - - onConnect(params) { - console.log('connect', params); - this.setState(prevState => ({ - elements: addEdge(params, prevState.elements) - })); - } - - onAdd() { - this.setState((prevState) => { - const nodeId = (prevState.elements.length + 1).toString(); - - return { - ...prevState, - elements: prevState.elements.concat({ - id: nodeId, - data: { label: `Node: ${nodeId}` }, - position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight } - }) - }; - }); - } - - render() { - return ( - this.onLoad(graphInstance)} - onElementClick={element => this.onElementClick(element)} - onElementsRemove={elements => this.onElementsRemove(elements)} - onConnect={params => this.onConnect(params)} - onNodeDragStop={onNodeDragStop} - style={{ width: '100%', height: '100%' }} - backgroundType="lines" - > - - - - ); - } + return ( + onConnect(p)} + onNodeDragStop={onNodeDragStop} + style={{ width: '100%', height: '100%' }} + backgroundType="lines" + > + + + + + ); } -export default App; +export default EmptyGraph;