feat(tests): add remove edge

cypress/integration/flow/basic.spec.js

@@ -5,9 +5,6 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-graph__renderer');
     cy.get('.react-graph__node').should('have.length', 4);
     cy.get('.react-graph__edge').should('have.length', 2);
-  });
-
-  it('all nodes have handles', () => {
     cy.get('.react-graph__node').children('div').children('.react-graph__handle');
   });
 
@@ -20,6 +17,15 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-graph__node:first').should('not.have.class', 'selected');
   });
 
+  it('selects an edge', () => {
+    cy.get('.react-graph__edge:first').click().should('have.class', 'selected');
+  });
+
+  it('deselects edge', () => {
+    cy.get('.react-graph__renderer').click('bottomRight');
+    cy.get('.react-graph__edge:first').should('not.have.class', 'selected');
+  });
+
   it('selects all nodes', () => {
     cy.get('body')
       .type('{shift}', { release: false })
@@ -32,7 +38,7 @@ describe('Basic Flow Rendering', () => {
       .get('.react-graph__nodesselection-rect');
   });
 
-  it('remove selection', () => {
+  it('removes selection', () => {
     cy.get('.react-graph__renderer').click('bottomRight');
     cy.get('.react-graph__nodesselection-rect').should('not.exist');
   });
@@ -74,6 +80,13 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-graph__edge').should('have.length', 2);
   });
 
+  it('removes an edge', () => {
+    cy.get('.react-graph__edge:first').click();
+    cy.get('body').type('{backspace}');
+
+    cy.get('.react-graph__edge').should('have.length', 1);
+  });
+
   it('drags the pane', () => {
     // for d3 we have to pass the window to the event
     // https://github.com/cypress-io/cypress/issues/3441

examples/advanced/scripts/ExampleGraph.js

@@ -61,15 +61,15 @@ class App extends PureComponent {
         { 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 } },
-        { source: '1', target: '2', animated: true },
-        { source: '1', target: '8', animated: true },
-        { source: '8', target: '9', animated: true },
-        { source: '2', target: '3' },
-        { source: '3', target: '4', type: 'step' },
-        { source: '3', target: '5' },
-        { source: '5', target: '6__b' },
-        { source: '5', target: '6__a', type: 'step', animated: true, style: { stroke: '#FFCC00' } },
-        { source: '6', target: '7', style: { stroke: '#FFCC00' }},
+        { 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' }},
       ]
     };
 

examples/basic/scripts/ExampleGraph.js

@@ -15,8 +15,8 @@ class App extends PureComponent {
         { 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 } },
-        { source: '1', target: '2', animated: true },
-        { source: '1', target: '3' },
+        { id: 'e1-2', source: '1', target: '2', animated: true },
+        { id: 'e1-3', source: '1', target: '3' },
       ]
     };
 

src/EdgeRenderer/EdgeTypes/wrapEdge.js

@@ -7,8 +7,8 @@ import store from '../../store';
 export default EdgeComponent => {
   const EdgeWrapper = memo((props) => {
     const {
-      source, target, animated, type,
-      selected, onClick
+      id, source, target, type,
+      animated, selected, onClick
     } = props;
     const edgeClasses = cx('react-graph__edge', { selected, animated });
     const onEdgeClick = (evt) => {
@@ -16,8 +16,8 @@ export default EdgeComponent => {
         return false;
       }
 
-      store.dispatch.setSelectedElements({ source, target });
-      onClick({ source, target, type });
+      store.dispatch.setSelectedElements({ id, source, target });
+      onClick({ id, source, target, type });
     };
 
     return (

src/graph-utils.js

@@ -15,7 +15,7 @@ export const getOutgoers = (node, elements) => {
 };
 
 export const removeElements = (elements, elementsToRemove) => {
-  const nodeIdsToRemove = elementsToRemove.filter(isNode).map(n => n.id);
+  const nodeIdsToRemove = elementsToRemove.map(n => n.id);
 
   return elements.filter(e => {
     return (