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/advanced.spec.js → 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');
+  });
+});