fix: blank space on top/bottom when export image/svg #567
Conversation
|
✔️ Deploy Preview for mermaidjs ready! 🔨 Explore the source changes: 8675947 🔍 Inspect the deploy log: https://app.netlify.com/sites/mermaidjs/deploys/61d6bda13e5f9e0007a50605 😎 Browse the preview: https://deploy-preview-567--mermaidjs.netlify.app |
| @@ -14,6 +14,7 @@ | |||
| svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage | |||
| if (!svg) { | |||
| svg = document.querySelector('#container svg'); | |||
| svg.removeAttribute('height'); | |||
There was a problem hiding this comment.
I'm wondering if removing the height attribute would cause any other issues?
There was a problem hiding this comment.
More detail I posted on issue.
When you not have height, browser will re-calculate new height from element inside svg element.
So, diagram will fit inside.
When edit new code, height will back to large number. This code block affect only for save action
You can test with data I put in issue
There was a problem hiding this comment.
This is what I get after downloading SVGs. Check the dimensions in bottom left.
After fix
Before fix
So this fix seems to break SVG downloads.
Also, these are 2 PNGs I downloaded (Firefox, macOS).
So is the issue OS/Browser specific?
After Fix
Before Fix
There was a problem hiding this comment.
I'm using macOS. I'm using chrome on issue screenshot.
Now, try again with private window on Firefox
Can you see big blank space?
And here is exported png
There was a problem hiding this comment.
Here is dimmension
Maybe problem only happend on macOS?
I don't have any device with other OS here to test 😢
There was a problem hiding this comment.
Ok, so the issue is not browser/OS, but rather window size.
I was using my external monitor previously. When the window is smaller, the issue appears.
Can we brainstorm and come up with a proper solution?
There was a problem hiding this comment.
Yes, If you have any idea, we can discuss.
My solution only fix for export function. But I think problem from render function first.
There was a problem hiding this comment.
Some VSCode plugin support preview mermaid diagram have same problem, so I think it's from main mermaid.js. Not about live editor
|
This pr is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days |
|
This pr is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 14 days |
📑 Summary
Remove blank space on top/bottom when export image/svg
Resolves #566
📏 Design Decisions
Before export image, svg. Remove
heightattribute onsvgelement.So browser when re-calculate new fitable height.
📋 Tasks
Make sure you
developbranch