search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.69k stars 1.17k forks source link

Default example does not render anything in the browser #773

Open bastienJS opened 3 years ago

bastienJS commented 3 years ago

Like this issue: https://github.com/projectstorm/react-diagrams/issues/654

I do not not get anything to render when I use this library within my project:

After I solved the mess of installing the peer dependencies I copy/pasted the code from this starter guide:

https://projectstorm.gitbook.io/react-diagrams/getting-started/using-the-library

The 2 nodes are in the DOM, but the svg elements are just not visible rendered in the browser.

When I hack some CSS settings in the browser like turn off visibilty settings then they get more and more visible...

I use v6.2.0

dylanvorster commented 3 years ago

Basically impossible to assist you without you providing some basic code, since all the examples in the project work and there is also a demo project that shows how to use the library in both JS as well as TS.

bastienJS commented 3 years ago

Hi Dylan, I have created a repro here: https://github.com/bastienJS/projectmasterflow-test I would really appreciate fast feedback from you as I am under pressure :-)

bastienJS commented 3 years ago

The solution for me was this:

.canvas{ background-color: rgb(245, 237, 237); height:500px; width:100%; overflow:inherit !important; }

but now I can not move the whole diagramm ??? I get the cross arrow cursor but the svg`s are not transformed from the translate functions, nothings moves when I drag with the mouse ???