Better implementation of zoom/panning in the next version (0.6.0)

**Describe the bug**

Hello everyone,
we have recently published the version 0.5.0 of 'beautiful-react-diagrams', this version introduces the new pan/zoom functionality.
Unfortunately, we also introduced a bug that causes to miscalculate the position of nodes with ports and links between them, some nodes are thrown out of the visibile screen and in some other cases it makes the Diagram rather unusable.
We apologise for this inconvenience.

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`.

The new API will look like this:

```
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 (

```

Furthermore, the next version will solve the following bug:

#69