react-flow-designer
v4.2.3
Published
Flow designer for react and redux
Downloads
376
Readme
Datastream Designer
Use D3 for calculations. Redux is used as default state manager, still underlying pure component has been exposed to be used in a non-opiniated maner.
Designed inside dataflow webapp but meant to be used as a module.
How to use it
Use the rendering component
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import { DatastreamDesigner } from './datastream_designer/';
const store = configureStore();
render(
<Provider store={store}>
<DatastreamDesigner />
</Provider>,
document.getElementById('app'),
);
integrate the reducer into your redux data store
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { datastreamDesignerReducer } from '../datastream_designer/';
const rootReducer = combineReducers({
routing: routerReducer,
datastream: datastreamDesignerReducer,
});
export default rootReducer;
the datastream_designer module expose its components, reducers, and action type constants.
Action type constants are exposed for the sake of listening to them and add new feature to your application arround the datastream designer.
Exemple a reducer listening for 'DATASTREAM_DESIGNER_NODE_SELECTED' could trigger a form so you can edit the node data.
Redux API
the idea is to reduce the surface api of the redux action, encouraging batching multiple transformation in a transaction
Graph
- Graph
- transaction [List<Action<Node|Link|Port>>]
- Node
- add NodeRecord
- update NodeRecord
- delete NodeRecord
- moveStart nodeId Position
- move nodeId Vector
- moveEnd nodeId Position
- Link
- add LinkRecord
- update LinkRecord
- delete LinkRecord
- Port
- add PortRecord
- update PortRecord
- delete PortRecord
each of those action are intended to be used with the apply function
Each of those action are backed by the graph API wich check graph integrity, if one action fail to apply the whole transaction is void and the original graph is returned, one or many errors are logged.
special action for movement are kept for optimisation purpose, nothing prevent the user to update position via the update
action
deprecate
removeNode removeNodeData setNodeData removeNodeGraphicalAttribute setNodeGraphicalAttributes setNodeType setNodeSize moveNodeToEnd applyMovementTo moveNodeTo startMoveNodeTo
Element API
Node
Link
Port
Graph
Data
Size
Position
Versioning and publication
The package is automatically published on npm as soon as a pull request is merged on the master with a different version.
DISCLAIMER: We don't control the version, you have to ensure you don't have an old version compared to the master, and you need to follow semantic versioning to upgrade the version when needed.