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

[Lindsay89]

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 (
    <div style={{ height: '30rem' }}>
      <Canvas {...canvasState} {...handlers}>
        <Diagram schema={schema} onChange={onChange} />
        <CanvasControls />
      </Canvas>
    </div>
  );
};
<DiagramExample />

Furthermore, the next version will solve the following bug:

#69

[alimirakim]

A pan-zoom was exactly what I needed for the project I'm using this with! So excited to hear it's already been being worked on, and look forward to the release :) . Thank you for the hard work. Thought I might have to figure out how to do it myself hahaha.

[antonioru]

@alimirakim

Yes a way better pan and zoom functionality will be release in the next version, the 0.6.0.
Unfortunately we don't have a release date yet but it's on its way.

If you need to have a look on how it look so far, be please pull the code from the feature/canvas-ext branch and feel free to contribute.

About the hard work, I appreciate your comment, thank you... I must say, we worked on this as a company but some important improvements come from the community and the help of splendid contributors like @9renpoto, @genbs and @joancc

[dfirence]

@Lindsay89

Thanks to you and the team for this awesome resource, question. When would ETA for Zoom be possibly released?

I am approaching a project start and would like to know if I can use this library

[RickyMarou]

Just started playing with the lib for an hour and i just want to say thank you for your work. The DX is 💯 and it's super easy to hit the ground running building Diagrams.

Looking forward to the zoom/pan feature as I believe this is a key feature missing at the moment.
Thanks you for your work and I hope for a successful release 🙏

[ghost]

Thank you!
Really looking forward to the new zoom functionality.

[mikhail-fedosenko]

Could you also add handling of diagram node scrolling? E.g. diagram root element has non-zero scrollLeft, scrollTop because of overflow.
At the moment this causes visual glitches (because scrollLeft, scrollTop does not taken into account in getEntityCoordinates.ts.