From c2f73a6fbf9ad8c72ffe8e1f38fae93ddcb3201b Mon Sep 17 00:00:00 2001 From: ginoemiliozzi Date: Wed, 25 Nov 2020 11:48:07 +0000 Subject: [PATCH] Add disconnect function to useSchema - #31 --- CHANGELOG.md | 6 +++++ package.json | 2 +- src/hooks/useSchema/actionTypes.js | 1 + src/hooks/useSchema/schemaReducer.js | 8 ++++++- src/hooks/useSchema/useSchema.js | 5 ++-- tests/useSchema.spec.js | 36 +++++++++++++++++++++++++++- 6 files changed, 53 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7535f8e..3b0e254 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -134,3 +134,9 @@ 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-25 + +### Added + +- Added `disconnect` function exported in `useSchema` hook diff --git a/package.json b/package.json index ab184e2..3a508cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "beautiful-react-diagrams", - "version": "0.5.0", + "version": "0.6.0", "description": "A tiny collection of lightweight React components to build diagrams with ease", "main": "index.js", "module": "esm/index.js", diff --git a/src/hooks/useSchema/actionTypes.js b/src/hooks/useSchema/actionTypes.js index 21acf6a..0a56959 100644 --- a/src/hooks/useSchema/actionTypes.js +++ b/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'; diff --git a/src/hooks/useSchema/schemaReducer.js b/src/hooks/useSchema/schemaReducer.js index ac37e6a..6da06f3 100644 --- a/src/hooks/useSchema/schemaReducer.js +++ b/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; } diff --git a/src/hooks/useSchema/useSchema.js b/src/hooks/useSchema/useSchema.js index 76c7401..917e6d8 100644 --- a/src/hooks/useSchema/useSchema.js +++ b/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 */ diff --git a/tests/useSchema.spec.js b/tests/useSchema.spec.js index 7f44069..6c292d0 100644 --- a/tests/useSchema.spec.js +++ b/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