React Flow Chart
This is the npm package for the tooltip pull request:
https://github.com/MrBlenny/react-flow-chart/pull/217
- [X] Dragabble Nodes and Canvas
- [x] Create curved links between ports
- [x] Custom components for Canvas, Links, Ports, Nodes
- [X] React state container
- [X] Update state on Select/Hover nodes, ports and links
- [x] Base functionality complete
- [X] Stable NPM version
- [X] Scroll/Pinch canvas to zoom
- [ ] Ctrl+z/Ctrl+y history
- [X] Read-only mode
- [ ] Redux state container
- [ ] Arrow heads on links
- [ ] Docs
Storybook Demo
CodeSandbox Demo
This project aims to build a highly customisable, declarative flow chart library. Critically, you control the state. Pick from Redux, MobX, React or any other state managment library - simply pass in the current state and hook up the callbacks.
For example:
Data Stucture
The flow chart is designed as a collection of Nodes, Ports and Links. You can specify your own custom properties, making this format quite flexible. See types/chart.ts. Note, nodes, ports and links should have a unique id.
Example
export const chart: IChart = {
offset: {
x: 0,
y: 0,
},
scale: 1,
nodes: {
node1: {
id: 'node1',
type: 'output-only',
position: {
x: 300,
y: 100,
},
ports: {
port1: {
id: 'port1',
type: 'output',
properties: {
value: 'yes',
},
},
port2: {
id: 'port2',
type: 'output',
properties: {
value: 'no',
},
},
},
},
node2: {
id: 'node2',
type: 'input-output',
position: {
x: 300,
y: 300,
},
ports: {
port1: {
id: 'port1',
type: 'input',
},
port2: {
id: 'port2',
type: 'output',
},
},
},
},
links: {
link1: {
id: 'link1',
from: {
nodeId: 'node1',
portId: 'port2',
},
to: {
nodeId: 'node2',
portId: 'port1',
},
},
},
selected: {},
hovered: {},
}
This will produce a simple 2 noded chart which looks like:
Basic Usage
npm i @mrblenny/react-flow-chart
Most components/types are available as a root level export. Check the storybook demo for more examples.
import { FlowChartWithState } from "@mrblenny/react-flow-chart";
const chartSimple = {
offset: {
x: 0,
y: 0
},
nodes: {
node1: {
id: "node1",
type: "output-only",
position: {
x: 300,
y: 100
},
ports: {
port1: {
id: "port1",
type: "output",
properties: {
value: "yes"
}
},
port2: {
id: "port2",
type: "output",
properties: {
value: "no"
}
}
}
},
node2: {
id: "node2",
type: "input-output",
position: {
x: 300,
y: 300
},
ports: {
port1: {
id: "port1",
type: "input"
},
port2: {
id: "port2",
type: "output"
}
}
},
},
links: {
link1: {
id: "link1",
from: {
nodeId: "node1",
portId: "port2"
},
to: {
nodeId: "node2",
portId: "port1"
},
},
},
selected: {},
hovered: {}
};
const Example = (
<FlowChartWithState initialValue={chartSimple} />
);
With Internal State
stories/InternalReactState.tsx
With External State
stories/ExternalReactState.tsx
Readonly Mode
With Tooltips
You can add tooltips by adding tooltipsGlobal into the chartState or tooltip to the node configuration. tooltipsGlobal will apply for all nodes and tooltip for individual nodes.
export const tooltipChart: IChart = {
tooltipsGlobal: {
showTooltip: true,
toogleOffWhenClicked: 'global',
text: 'This is the global tooltip and will be toggled off, when clicked',
},
offset: {
x: 0,
y: 0,
},
scale: 1,
nodes: {
node1: {
tooltip: {
showTooltip: true,
text: 'this is the tooltip for node1',
},
id: 'node1',
type: 'output-only',
position: {
x: 300,
y: 100,
},
ports: {
port1: {
id: 'port1',
type: 'output',
properties: {
value: 'yes',
},
},
port2: {
id: 'port2',
type: 'output',
properties: {
value: 'no',
},
},
},
},
node2: {
tooltip: {
showTooltip: true,
toogleOffWhenClicked: 'node',
text: 'this is the tooltip for node2 and will be toggled off when clicked',
},
id: 'node2',
type: 'input-output',
position: {
x: 300,
y: 300,
},
ports: {
port1: {
id: 'port1',
type: 'input',
},
port2: {
id: 'port2',
type: 'output',
},
},
},
node3: {
tooltip: {
showTooltip: false,
text: 'this is the tooltip for node3 but its off',
},
id: 'node3',
type: 'input-output',
position: {
x: 100,
y: 600,
},
...
You can also customize the tooltipComponent by adding it to Component props of flowChart:
const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => {
return (
<div className="ExampleToolTipComponent" style={{ width: '300px', textAlign: 'center' }}>
<h2 style={{ margin: 'auto' }}>{props.tooltip}</h2>
</div>
)
}
export class Tooltips extends React.Component {
...
return
(
<Page>
<FlowChart
chart={chart}
callbacks={stateActions}
Components={{
TooltipComponent: ExampleToolTipComponent,
}}
/>
</Page>)
}
Other Demos
stories/ExternalReactState.tsx
Contributing
If you're interested in helping out, let me know.
In particular, would be great to get a hand with docs and redux / mobx integrations.
Development
npm install
npm run start:storybook