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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

fix: blank space on top/bottom when export image/svg #567

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: blank space on top/bottom when export image/svg #567

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/lib/components/actions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if removing the height attribute would cause any other issues?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sidharthv96

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what I get after downloading SVGs. Check the dimensions in bottom left.

After fix

image

Before fix

image

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

mermaid-diagram-20220106190925

Before Fix

mermaid-diagram-20220106190919

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm using macOS. I'm using chrome on issue screenshot.

Now, try again with private window on Firefox

image

Can you see big blank space?

And here is exported png

mermaid-diagram-20220106215724

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is dimmension

image

Maybe problem only happend on macOS?

I don't have any device with other OS here to test 馃槩

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

image

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, If you have any idea, we can discuss.
My solution only fix for export function. But I think problem from render function first.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some VSCode plugin support preview mermaid diagram have same problem, so I think it's from main mermaid.js. Not about live editor

}
const svgString = svg.outerHTML
.replaceAll('<br>', '<br/>')
Expand All @@ -24,6 +25,7 @@
const exportImage = (event: Event, exporter: Exporter) => {
const canvas: HTMLCanvasElement = document.createElement('canvas');
const svg: HTMLElement = document.querySelector('#container svg');
svg.removeAttribute('height');
const box: DOMRect = svg.getBoundingClientRect();
canvas.width = box.width;
canvas.height = box.height;
Expand Down