Feature: Mermaid pan & zoom

[snopan]

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

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.

after remove throw error

[snopan]

Hey @mjbvz, can I get a review on this PR? Thanks!

[mjbvz]

Thanks for looking into this! Sorry it took me so long to test it

The panning and zooming seems to work well. However to start I think it should be presented differently. Let's do:

• Add a new vscode configuration setting that lets you enable/disable pan zoom entirely. It can default to on, but there needs to be a way to turn the feature off entirely

• Only show the pan/zoom controls when you hover over the diagram

• Potentially add a command or right click option on the diagram that overrides the VS Code configuration. So if I have pan zoom enabled in my settings, I'd like the command to be able to turn it off in case it's causing any issues

A few other points I noticed:

• The colors of the controls seem off, especially on dark themes. If you can, reuse some of the vscode theme colors. These should all be available inside of the markdown preview webview

• The diagram get cut off. I'd try to get it match what GitHub does instead where the diagram is centered and takes up more horizontal space

I will take a more detailed look once some of those points are addressed. Let me know if you have any questions about these

[snopan]

Hey @mjbvz , thanks for getting back to me! I just slightly confused and want to clarify a few things:

• Do we still want to keep the toggle button or is the pan/zoom now controlled by this vscode configuration?
• So when you mention show pan/zoom controls on hover, do you mean the toggle button

or these controls after pan/zoom is enabled

• When you say right click and turn off pan/zoom, does that also turn off pan/zoom entirely like the VS Configuration.
• Can you give me a bit more details or steps taken to get to this "diagram get cut off" behaviour? I mostly just rely on svg-pan-zoom library to do the pan/zoom and have some extra logic to store the state of pan/zoom.

[mjbvz]

Sure, following up:

• The toggle feels too prominent to show on every single diagram. Let's start with using the configuration plus maybe command /right click for quick toggling just for the current preview

• For the controls, I mean the +/-. I only care about these if I'm interacting with the diagram. Again it feels cluttered to show them all the time

• Let's try to match how word wrap works in editors works. With word wrap, the setting provides the default value but you can then override this per editor using the command. The command however only applies to the current document, it does not change the configuration

• Try creating various sized diagram and then zooming in / panning. You can also try making the markdown preview itself larger or smaller. I was fairly easily able to get the diagram to be cut off horizontally when doing this