refactor(examples): rename Advanced to CustomNodes, use func component

README.md

@@ -40,16 +40,18 @@ const BasicGraph = () => (
 - `onMove`: move handler
 - `nodeTypes`: object with node types
 - `edgeTypes`: object with node types
+- `style`: css style passed to the wrapper
 - `connectionLineType`: connection line type = `straight` or `bezier`
 - `connectionLineStyle`: connection style as svg attributes
-- `deleteKeyCode`: delete key code
-- `selectionKeyCode`: selection key code
-- `showBackground`: boolean
-- `backgroundGap`: gap size
-- `backgroundColor`: color of dots or lines
-- `backgroundType`: background type = `dots` or `lines`
-- `snapToGrid`: boolean
-- `snapGrid`: [x, y] array
+- `deleteKeyCode`: default: `16`
+- `selectionKeyCode`: default: `false`
+- `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`
 
 # Plugins
 

cypress/integration/flow/basic.spec.js

@@ -1,4 +1,4 @@
-describe('Basic Flow Rendering', () => {
+describe('Basic Graph Rendering', () => {
   it('renders a flow with three nodes', () => {
     cy.visit('/basic');
 

cypress/integration/flow/custom-nodes.js

@@ -1,11 +1,11 @@
-describe('Advanced Flow Rendering', () => {
+describe('Custom Nodes Graph Rendering', () => {
   it('renders a flow with sone nodes', () => {
     cy.visit('/');
 
     cy.get('.react-flow__renderer');
 
-    cy.get('.react-flow__node').should('have.length', 9);
-    cy.get('.react-flow__edge').should('have.length', 9);
+    cy.get('.react-flow__node').should('have.length', 8);
+    cy.get('.react-flow__edge').should('have.length', 8);
   });
 
   it('renders a grid', () => {
@@ -31,7 +31,7 @@ describe('Advanced Flow Rendering', () => {
       .should('not.have.class', 'valid')
       .should('not.have.class', 'connecting');
 
-    cy.get('.react-flow__edge').should('have.length', 10);
+    cy.get('.react-flow__edge').should('have.length', 9);
   });
 
   it('tries to make invalid connection', () => {
@@ -50,6 +50,6 @@ describe('Advanced Flow Rendering', () => {
       .trigger('mouseup', { force: true })
       .should('not.have.class', 'connecting');
 
-    cy.get('.react-flow__edge').should('have.length', 10);
+    cy.get('.react-flow__edge').should('have.length', 9);
   });
 });

cypress/integration/flow/empty.spec.js

@@ -0,0 +1,17 @@
+describe('Empty Flow Rendering', () => {
+  it('renders an empty graph', () => {
+    cy.visit('/empty');
+
+    cy.get('.react-flow__renderer');
+    cy.get('.react-flow__node').should('not.exist');
+    cy.get('.react-flow__edge').should('not.exist');
+  });
+
+  it('renders a control panel', () => {
+    cy.get('.react-flow__controls');
+  });
+
+  it('renders a mini map', () => {
+    cy.get('.react-flow__minimap');
+  });
+});

example/src/Advanced/index.js

@@ -1,174 +0,0 @@
-import React, { PureComponent } from 'react';
-
-import Graph, { isEdge, removeElements, addEdge, getOutgoers, MiniMap, Controls } from 'react-flow';
-
-import SpecialNode from './SpecialNode';
-import InputNode from './InputNode';
-
-const onNodeDragStop = node => console.log('drag stop', node);
-
-class App extends PureComponent {
-  constructor() {
-    super();
-
-    const onChange = (option, d) => {
-      this.setState(prevState => (
-        {elements: prevState.elements.map(e => {
-          if (isEdge(e) || e.id !== '6') {
-            return e;
-          }
-
-          return {
-            ...e,
-            data: {
-              ...e.data,
-              label: `Option ${option} selected.`
-            }
-          };
-        })}
-      ));
-    }
-
-    const onChangeInput = (input, d) => {
-      this.setState(prevState => (
-        {elements: prevState.elements.map(e => {
-          if (isEdge(e) || e.id !== '8') {
-            return e;
-          }
-
-          if (e.id === '8') {
-            return {
-              ...e,
-              data: {
-                ...e.data,
-                input: input || 'write something'
-              }
-            };
-          } else {
-            return e;
-          }
-        })}
-      ));
-    }
-
-    this.state = {
-      graphLoaded: false,
-      elements: [
-        { id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
-        { id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
-        { id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
-        { id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
-        { id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
-        { id: '6', type: 'special', data: { onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
-        { id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
-        { id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 350, y: 100 } },
-        { id: '9', type: 'text', data: { label: 'right' }, position: { x: 600, y: 100 } },
-        { id: 'e1-2', source: '1', target: '2', animated: true },
-        { id: 'e1-8', source: '1', target: '8', animated: true },
-        { id: 'e8-9', source: '8', target: '9', animated: true },
-        { id: 'e2-3', source: '2', target: '3' },
-        { id: 'e3-4', source: '3', target: '4', type: 'step' },
-        { id: 'e3-5', source: '3', target: '5' },
-        { id: 'e5-6b', source: '5', target: '6__b' },
-        { id: 'e5-6a', source: '5', target: '6__a', type: 'step', animated: true, style: { stroke: '#FFCC00' } },
-        { id: 'e6-7', source: '6', target: '7', style: { stroke: '#FFCC00' }},
-      ]
-    };
-  }
-
-  onLoad(graphInstance) {
-    console.log('graph loaded:', graphInstance);
-    window.rg = graphInstance;
-
-    this.graphInstance = graphInstance;
-    this.graphInstance.fitView({ padding: 0.1 });
-    this.setState({
-      graphLoaded: true
-    });
-  }
-
-  onFitView() {
-    this.graphInstance.fitView();
-  }
-
-  onAdd() {
-    this.setState(prevState => ({
-      ...prevState,
-      elements: prevState.elements.concat({
-        id: (prevState.elements.length + 1).toString(),
-        data: { label: 'Added node' },
-        position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
-      })
-    }));
-  }
-
-  onElementClick(element) {
-    console.log('click', element);
-    console.log('outgoers', getOutgoers(element, this.state.elements));
-  }
-
-  onZoomIn() {
-    this.graphInstance.zoomIn();
-  }
-
-  onZoomOut() {
-    this.graphInstance.zoomOut();
-  }
-
-  onElementsRemove(elementsToRemove) {
-    this.setState(prevState => ({
-      elements: removeElements(elementsToRemove, prevState.elements)
-    }));
-  }
-
-  onConnect(params) {
-    this.setState(prevState => ({
-      elements: addEdge(params, prevState.elements)
-    }));
-  }
-
-  render() {
-    return (
-      <Graph
-        elements={this.state.elements}
-        onElementClick={element => this.onElementClick(element)}
-        onElementsRemove={elements => this.onElementsRemove(elements)}
-        onConnect={params => this.onConnect(params)}
-        onNodeDragStop={onNodeDragStop}
-        style={{ width: '100%', height: '100%' }}
-        onLoad={graphInstance => this.onLoad(graphInstance)}
-        nodeTypes={{
-          special: SpecialNode,
-          text: InputNode
-        }}
-        connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
-        connectionLineType="bezier"
-        backgroundColor="#888"
-        backgroundGap={16}
-        snapToGrid={true}
-        snapGrid={[16, 16]}
-      >
-        <MiniMap
-          style={{ position: 'absolute', right: 10, bottom: 10, backgroundColor: '#f8f8f8'}}
-          nodeColor={n => {
-            if (n.type === 'input') return 'blue';
-            if (n.type === 'output') return 'green';
-            if (n.type === 'default') return 'red';
-
-            return '#FFCC00';
-          }}
-        />
-        <Controls />
-        <button
-          type="button"
-          onClick={() => this.onAdd()}
-          style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
-        >
-          add
-        </button>
-      </Graph>
-    );
-  }
-}
-
-export default App;

example/src/CustomNodes/index.js

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+
+import Graph, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow';
+
+import SpecialNode from './SpecialNode';
+import InputNode from './InputNode';
+
+const onNodeDragStop = node => console.log('drag stop', node);
+const onElementClick = element => console.log('click', element);
+const onLoad = (graph) => console.log('graph loaded:', graph);
+
+const CustomNodesGraph = () => {
+  const [elements, setElements] = useState([]);
+
+  useEffect(() => {
+    const onChange = (option, d) => {
+      setElements(els => els.map(e => {
+        if (isEdge(e) || e.id !== '6') {
+          return e;
+        }
+
+        return {
+          ...e,
+          data: {
+            ...e.data,
+            label: `Option ${option} selected.`
+          }
+        };
+      }));
+    };
+
+    const onChangeInput = (input, d) => {
+      setElements(els => els.map(e => {
+        if (isEdge(e) || e.id !== '8') {
+          return e;
+        }
+
+        return {
+          ...e,
+          data: {
+            ...e.data,
+            input: input || 'write something'
+          }
+        };
+      }));
+    };
+
+    setElements([
+      { id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
+      { id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
+      { id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
+      { id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
+      { id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
+      { id: '6', type: 'special', data: { onChange: onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
+      { id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
+      { id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 350, y: 100 } },
+      { id: 'e1-2', source: '1', target: '2', animated: true },
+      { id: 'e1-8', source: '1', target: '8', animated: true },
+      { id: 'e2-3', source: '2', target: '3', animated: true },
+      { id: 'e3-4', source: '3', target: '4', animated: true },
+      { id: 'e3-5', source: '3', target: '5', animated: true },
+      { id: 'e5-6b', source: '5', target: '6__b', animated: true  },
+      { id: 'e5-6a', source: '5', target: '6__a', animated: true },
+      { id: 'e6-7', source: '6', target: '7', animated: true },
+    ])
+  }, []);
+
+  const addRandomNode = () => {
+    setElements(els => els.concat({
+      id: (els.length + 1).toString(),
+      data: { label: 'Added node' },
+      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
+    }));
+  };
+  const onElementsRemove = (elementsToRemove) => setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements(els => addEdge(params, els));
+
+  return (
+    <Graph
+      elements={elements}
+      onElementClick={onElementClick}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      style={{ width: '100%', height: '100%' }}
+      onLoad={onLoad}
+      nodeTypes={{
+        special: SpecialNode,
+        text: InputNode
+      }}
+      connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
+      connectionLineType="bezier"
+      backgroundColor="#888"
+      backgroundGap={16}
+      snapToGrid={true}
+      snapGrid={[16, 16]}
+    >
+      <MiniMap
+        nodeColor={n => {
+          if (n.type === 'input') return 'blue';
+          if (n.type === 'output') return 'green';
+          if (n.type === 'default') return 'red';
+
+          return '#FFCC00';
+        }}
+      />
+      <Controls />
+      <button
+        type="button"
+        onClick={addRandomNode}
+        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+      >
+        add node
+      </button>
+    </Graph>
+  );
+}
+
+export default CustomNodesGraph;

example/src/Empty/index.js

@@ -11,7 +11,7 @@ const EmptyGraph = () => {
   const onElementsRemove = (elementsToRemove) =>
     setElements(els => removeElements(elementsToRemove, els));
   const onConnect = (params) => setElements(els => addEdge(params, els));
-  const onAdd = () => {
+  const addRandomNode = () => {
     const nodeId = (elements.length + 1).toString();
     const newNode = {
       id: nodeId,
@@ -36,10 +36,10 @@ const EmptyGraph = () => {
     <Controls />
     <button
       type="button"
-      onClick={onAdd}
+      onClick={addRandomNode}
       style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
     >
-      add
+      add node
     </button>
     </Graph>
   );

example/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
-import Advanced from './Advanced';
+import CustomNodes from './CustomNodes';
 import Basic from './Basic';
 import Empty from './Empty';
 
@@ -18,7 +18,7 @@ ReactDOM.render((
         <Empty />
       </Route>
       <Route path="/">
-        <Advanced />
+        <CustomNodes />
       </Route>
     </Switch>
   </Router>