Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Mermaid pan & zoom #272

Closed
wants to merge 0 commits into from
Closed

Feature: Mermaid pan & zoom #272

wants to merge 0 commits into from

Conversation

snopan
Copy link

@snopan snopan commented Aug 15, 2024

This PR adds pan & zoom functionality in mermaid MD preview. There's a previous PR that attempted to add this functionality but had some issues. This PR tries address the issues mentioned in the comments.

#125

image

The changes include:

  • Rendering a button about the diagram when there are no errors in diagram
  • When svg-pan-zoom hasn't initiated, the behavior should be same as before
  • Only when the button is pressed, svg-pan-zoom is initiated allowing for pan and zoom. The sizing of diagram will be set to what it is at that point and it also starts recording any actions taken (pan/zoom) into ZoomStates
  • When the markdown is re-rendered, it will go check ZoomStates and sync back to where it is allowing for zoom and editing at the same time
  • Unrelated it also removes the throw error when a diagram fails to parse. From what I can see when mermaid library fails to parse the contents, we would catch the error and return a error message content. But for some reason it makes another throw error, so when you have multiple diagrams and one breaks it breaks everything else.
image

after remove throw error
image

@snopan snopan marked this pull request as ready for review August 16, 2024 13:44
@snopan
Copy link
Author

snopan commented Aug 18, 2024

Hey @mjbvz , when you have some time could you have a look at this PR? Thanks!

@snopan
Copy link
Author

snopan commented Aug 26, 2024

Thought I also provide putting the button on the right as option if people prefer this as it's slightly more out of the way
image
only thing is when diagram is too large, the toggle might move too far right
image

@snopan
Copy link
Author

snopan commented Nov 13, 2024

Recreated PR due to conflicts #295

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant