@bastinjafari/react-flow-chart-with-tooltips-and-multi-select v0.0.14
React Flow Chart
This build additionally implements the multi-select-feature of Xiqi:
https://github.com/MrBlenny/react-flow-chart/pull/204
- Dragabble Nodes and Canvas
- Create curved links between ports
- Custom components for Canvas, Links, Ports, Nodes
- React state container
- Update state on Select/Hover nodes, ports and links
- Base functionality complete
- Stable NPM version
- Scroll/Pinch canvas to zoom
- Ctrl+z/Ctrl+y history
- 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
Tooltips
You can add tooltips by adding tooltipsGlobal
into the chartState (IChart
) or tooltip
to the node objects.
tooltipsGlobal
will apply for all nodes and tooltip
for individual nodes.
Example
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',
},
...
node2: {
tooltip: {
showTooltip: true,
toogleOffWhenClicked: 'node',
text: 'this is the tooltip for node2 and will be toggled off when clicked',
},
id: 'node2',
...
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
4 years ago