Today we will try to release a new version (presumably the 0.5.1) that will roll back to the previous one, so that the bug will not be on NPM and possibly on other projects
This will also give us more time to work on the 0.6.0.
The 0.6.0 will have a better implementation of the zoom/panning provided by a new brand new component, called Canvas
, to wrap the Diagram(s).
This next version will also have a useCanvasState
hook to help with the Canvas
component states and a component for the zoom controls called CanvasController
.
import Diagram, { Canvas, createSchema, useSchema, useCanvasState, CanvasControls } from 'beautiful-react-diagrams';
// the diagram model
const initialSchema = createSchema({
nodes: [
{ id: 'node-1', content: 'Hey Jude', coordinates: [312, 27], },
{ id: 'node-2', content: 'Don\'t', coordinates: [330, 90], },
{ id: 'node-3', content: 'be afraid', coordinates: [100, 320], },
{ id: 'node-4', content: 'let me down', coordinates: [306, 332], },
{ id: 'node-5', content: 'make it bad', coordinates: [515, 330], },
],
links: [
{ input: 'node-1', output: 'node-2' },
{ input: 'node-2', output: 'node-3' },
{ input: 'node-2', output: 'node-4' },
{ input: 'node-2', output: 'node-5' },
]
});
const DiagramExample = () => {
const [canvasState, handlers] = useCanvasState(); // creates canvas state
const [schema, { onChange }] = useSchema(initialSchema); // creates diagrams schema
return (
<div style={{ height: '30rem' }}>
<Canvas {...canvasState} {...handlers}>
<Diagram schema={schema} onChange={onChange} />
<CanvasControls />
</Canvas>
</div>
);
};
<DiagramExample />