Merge pull request #77 from ginoemiliozzi/disconnect-useSchema

Add disconnect function exported in useSchema hook - #31

CHANGELOG.md

@@ -135,10 +135,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - First implementation of draggable canvas
 - First implementation of zoomable canvas 
 
-## [0.6.0] - 2020-11-24
+## [0.6.0] - 2020-11-25
 
 ### Added
 
 - Canvas Component for panning and zooming
 - useCanvas hook
 - CanvasControl component
+- Added `disconnect` function exported in `useSchema` hook
+

src/hooks/useSchema/actionTypes.js

@@ -2,3 +2,4 @@ export const ON_CHANGE = 'bi-diagram/useSchema/change';
 export const ON_NODE_ADD = 'bi-diagram/useSchema/node/add';
 export const ON_NODE_REMOVE = 'bi-diagram/useSchema/node/remove';
 export const ON_CONNECT = 'bi-diagram/useSchema/connect';
+export const ON_DISCONNECT = 'bi-diagram/useSchema/disconnect';

src/hooks/useSchema/schemaReducer.js

@@ -1,5 +1,6 @@
 import findIndex from 'lodash.findindex';
-import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from './actionTypes';
+import isEqual from 'lodash.isequal';
+import { ON_CHANGE, ON_CONNECT, ON_DISCONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from './actionTypes';
 import getNodePortsId from '../../shared/functions/getNodePortsId';
 
 /**
@@ -45,6 +46,11 @@ const schemaReducer = (state, action) => {
         nodes: state.nodes || [],
         links: state.links || [],
       });
+    case ON_DISCONNECT:
+      return ({
+        nodes: state.nodes || [],
+        links: state.links.filter((link) => !isEqual(link, action.payload.link)) || [],
+      });
     default:
       return state;
   }

src/hooks/useSchema/useSchema.js

@@ -1,7 +1,7 @@
 import { useReducer, useCallback } from 'react';
 import ensureNodeId from '../../shared/functions/ensureNodeId';
 import schemaReducer from './schemaReducer';
-import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from './actionTypes';
+import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE, ON_DISCONNECT } from './actionTypes';
 
 const initialState = { nodes: [], links: [] };
 
@@ -17,8 +17,9 @@ const useSchema = (initialSchema = initialState) => {
   const addNode = useCallback((node) => dispatch({ type: ON_NODE_ADD, payload: { node: ensureNodeId(node) } }), []);
   const removeNode = useCallback((node) => dispatch({ type: ON_NODE_REMOVE, payload: { nodeId: node.id } }), []);
   const connect = useCallback((input, output) => dispatch({ type: ON_CONNECT, payload: { link: { input, output } } }), []);
+  const disconnect = useCallback((input, output) => dispatch({ type: ON_DISCONNECT, payload: { link: { input, output } } }), []);
 
-  return [schema, Object.freeze({ onChange, addNode, removeNode, connect })];
+  return [schema, Object.freeze({ onChange, addNode, removeNode, connect, disconnect })];
 };
 /* eslint-enable max-len */
 

tests/useSchema.spec.js

@@ -1,7 +1,7 @@
 import useSchema from '../dist/hooks/useSchema';
 import schemaReducer from '../dist/hooks/useSchema/schemaReducer';
 import createSchema from '../dist/shared/functions/createSchema';
-import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from '../dist/hooks/useSchema/actionTypes';
+import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE, ON_DISCONNECT } from '../dist/hooks/useSchema/actionTypes';
 
 describe('useSchema reducer', () => {
   it('should return the same state if the action is invalid', () => {
@@ -96,6 +96,40 @@ describe('useSchema reducer', () => {
     expect(nextSchema.nodes).to.deep.equal([]);
     expect(nextSchema.links).to.deep.equal([link]);
   });
+
+  it('should remove the link between two nodes ON_DISCONNECT action', () => {
+    const schema = createSchema({
+      nodes: [
+        {
+          id: 'node-1',
+          content: 'Node 1',
+          coordinates: [1, 0],
+          outputs: [{ id: 'port-1' }],
+        },
+        {
+          id: 'node-2',
+          content: 'Node 2',
+          coordinates: [2, 0],
+          inputs: [{ id: 'port-2' }],
+        },
+        {
+          id: 'node-3',
+          content: 'Node 3',
+          coordinates: [3, 0],
+          inputs: [{ id: 'port-3' }],
+        },
+      ],
+      links: [{ input: 'port-2', output: 'port-1' }, { input: 'port-3', output: 'port-1' }],
+    });
+    const link = { input: 'port-3', output: 'port-1' };
+
+    const nextSchema = schemaReducer(schema, { type: ON_DISCONNECT, payload: { link } });
+
+    expect(nextSchema).to.have.property('nodes');
+    expect(nextSchema).to.have.property('links');
+    expect(nextSchema.nodes).to.deep.equal(schema.nodes);
+    expect(nextSchema.links).to.deep.equal([{ input: 'port-2', output: 'port-1' }]);
+  });
 });
 
 // TODO: test this hook