search

marcveens / react-drawio

React component for integrating the Diagrams (draw.io) embed iframe
MIT License
44 stars 9 forks source link

Separate edit and view modes #37

Closed ponyr1der closed 20 hours ago

ponyr1der commented 6 days ago

Is it possible to add view mode, where user can only view diagram, zoom in/out e.t.c, but can't do any changes, and can do everything in edit mode?

marcveens commented 5 days ago

Hi, I also just found out that there's an option for that, and I added types for it in a new version I just published. Have a look at the Storybook demo to see how it works:

https://marcveens.github.io/react-drawio/?path=/story/components-drawioembed--read-only

Let me know if this does the job for you!

ponyr1der commented 4 days ago

That looks great! Is it possible when changing from view mode to edit - open drawio in the same iframe, not creating a new browser tab? Also i have my own edit button (that toggles view and edit mode), is it possible to use it to change view mode?

ponyr1der commented 3 days ago

At this moment i made it by creating 2 pages and in each one i import DrawIoEmbed but with different urlParameters and switch between view and edit modes by routing between this 2 pages. Not the best implementation, but it works. Cons is that we need to fetch DrawIoEmbed each time that we change mode and wait for its loading. If you have a better implementation, please, share it :)

marcveens commented 1 day ago

I added an example of how to toggle between view/edit mode in Storybook: https://marcveens.github.io/react-drawio/?path=/story/components-drawioembed--read-only

I needed to add a key property to make it render properly. I'm not sure if that's only a Storybook thing, or if you also need it in a regular React application.