diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js index afe43550..a073a03a 100644 --- a/cypress/integration/flow/basic.spec.js +++ b/cypress/integration/flow/basic.spec.js @@ -1,4 +1,4 @@ -describe('Basic Graph Rendering', () => { +describe('Basic Flow Rendering', () => { it('renders a flow with three nodes', () => { cy.visit('/basic'); diff --git a/cypress/integration/flow/custom-node.js b/cypress/integration/flow/custom-node.js index 644746e8..4cecdcec 100644 --- a/cypress/integration/flow/custom-node.js +++ b/cypress/integration/flow/custom-node.js @@ -1,5 +1,5 @@ -describe('Custom Node Graph Rendering', () => { - it('renders a graph', () => { +describe('Custom Node Flow Rendering', () => { + it('renders a flow', () => { cy.visit('/custom-node'); cy.get('.react-flow__renderer'); diff --git a/cypress/integration/flow/empty.spec.js b/cypress/integration/flow/empty.spec.js index 4d0b48cf..d4029107 100644 --- a/cypress/integration/flow/empty.spec.js +++ b/cypress/integration/flow/empty.spec.js @@ -1,5 +1,5 @@ describe('Empty Flow Rendering', () => { - it('renders an empty graph', () => { + it('renders an empty flow', () => { cy.visit('/empty'); cy.get('.react-flow__renderer'); diff --git a/cypress/integration/flow/interaction.spec.js b/cypress/integration/flow/interaction.spec.js index 94b97b19..33e672ce 100644 --- a/cypress/integration/flow/interaction.spec.js +++ b/cypress/integration/flow/interaction.spec.js @@ -1,5 +1,5 @@ -describe('Interaction Graph Rendering', () => { - it('renders a graph', () => { +describe('Interaction Flow Rendering', () => { + it('renders initial flow', () => { cy.visit('/interaction'); cy.get('.react-flow__renderer'); diff --git a/cypress/integration/flow/overview.spec.js b/cypress/integration/flow/overview.spec.js index e072b834..d0153db2 100644 --- a/cypress/integration/flow/overview.spec.js +++ b/cypress/integration/flow/overview.spec.js @@ -1,5 +1,5 @@ -describe('Overview Graph Rendering', () => { - it('renders a graph', () => { +describe('Overview Flow Rendering', () => { + it('renders a flow', () => { cy.visit('/'); cy.get('.react-flow__renderer'); diff --git a/cypress/integration/flow/stress.spec.js b/cypress/integration/flow/stress.spec.js index e289ef11..d70b5847 100644 --- a/cypress/integration/flow/stress.spec.js +++ b/cypress/integration/flow/stress.spec.js @@ -1,5 +1,5 @@ -describe('Stress Graph Rendering', () => { - it('renders a graph', () => { +describe('Stress Flow Rendering', () => { + it('renders initial flow', () => { cy.visit('/stress'); cy.get('.react-flow__renderer'); diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js index 2cb4f068..2e386b24 100644 --- a/example/src/Basic/index.js +++ b/example/src/Basic/index.js @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer'; -const onNodeDragStop = node => console.log('drag stop', node); -const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance); -const onElementClick = element => console.log('click', element); +const onNodeDragStop = (node) => console.log('drag stop', node); +const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance); +const onElementClick = (element) => console.log('click', element); const initialElements = [ { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, @@ -17,20 +17,19 @@ const initialElements = [ const BasicFlow = () => { const [elements, setElements] = useState(initialElements); - const onElementsRemove = (elementsToRemove) => - setElements(els => removeElements(elementsToRemove, els)); - const onConnect = (params) => setElements(els => addEdge(params, els)); + const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements((els) => addEdge(params, els)); const updatePos = () => { - setElements(elms => { - return elms.map(el => { + setElements((elms) => { + return elms.map((el) => { if (isNode(el)) { return { ...el, position: { x: Math.random() * 400, - y: Math.random() * 400 - } + y: Math.random() * 400, + }, }; } @@ -54,14 +53,11 @@ const BasicFlow = () => { > - ); -} +}; export default BasicFlow; diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js index 7c910cd7..c346808f 100644 --- a/example/src/CustomNode/index.js +++ b/example/src/CustomNode/index.js @@ -6,7 +6,7 @@ import ColorSelectorNode from './ColorSelectorNode'; const onNodeDragStop = (node) => console.log('drag stop', node); const onElementClick = (element) => console.log('click', element); -const onLoad = (reactFlowInstance) => console.log('graph loaded:', reactFlowInstance); +const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance); const initBgColor = '#f0e742'; diff --git a/example/src/Empty/index.js b/example/src/Empty/index.js index 3cc91ce8..07c6daa0 100644 --- a/example/src/Empty/index.js +++ b/example/src/Empty/index.js @@ -2,23 +2,22 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer'; -const onNodeDragStop = node => console.log('drag stop', node); -const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance); -const onElementClick = element => console.log('click', element); +const onNodeDragStop = (node) => console.log('drag stop', node); +const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance); +const onElementClick = (element) => console.log('click', element); const EmptyFlow = () => { const [elements, setElements] = useState([]); - const onElementsRemove = (elementsToRemove) => - setElements(els => removeElements(elementsToRemove, els)); - const onConnect = (params) => setElements(els => addEdge(params, els)); + const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements((els) => addEdge(params, els)); const addRandomNode = () => { 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 } + position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }, }; - setElements(els => els.concat(newNode)); + setElements((els) => els.concat(newNode)); }; return ( @@ -27,22 +26,18 @@ const EmptyFlow = () => { onLoad={onLoad} onElementClick={onElementClick} onElementsRemove={onElementsRemove} - onConnect={p => onConnect(p)} + onConnect={(p) => onConnect(p)} onNodeDragStop={onNodeDragStop} > - ); -} +}; export default EmptyFlow; diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js index 6969995a..d71782e2 100644 --- a/example/src/Overview/index.js +++ b/example/src/Overview/index.js @@ -7,7 +7,7 @@ const onNodeDragStop = (node) => console.log('drag stop', node); const onElementClick = (element) => console.log('click', element); const onSelectionChange = (elements) => console.log('selection change', elements); const onLoad = (reactFlowInstance) => { - console.log('graph loaded:', reactFlowInstance); + console.log('flow loaded:', reactFlowInstance); reactFlowInstance.fitView(); }; diff --git a/example/src/Stress/index.js b/example/src/Stress/index.js index c64b8b99..8e82ef53 100644 --- a/example/src/Stress/index.js +++ b/example/src/Stress/index.js @@ -3,30 +3,29 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer'; import { getElements } from './utils'; -const onLoad = reactFlowInstance => { +const onLoad = (reactFlowInstance) => { reactFlowInstance.fitView(); console.log(reactFlowInstance.getElements()); -} +}; const initialElements = getElements(10, 10); -const StressGraph = () => { +const StressFlow = () => { const [elements, setElements] = useState(initialElements); - const onElementsRemove = (elementsToRemove) => - setElements(els => removeElements(elementsToRemove, els)); - const onConnect = (params) => setElements(els => addEdge(params, els)); + const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els)); + const onConnect = (params) => setElements((els) => addEdge(params, els)); const updatePos = () => { - setElements(elms => { - return elms.map(el => { + setElements((elms) => { + return elms.map((el) => { if (isNode(el)) { return { ...el, position: { x: Math.random() * window.innerWidth, - y: Math.random() * window.innerHeight - } + y: Math.random() * window.innerHeight, + }, }; } @@ -36,24 +35,16 @@ const StressGraph = () => { }; return ( - + - ); -} +}; -export default StressGraph; +export default StressFlow;