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

Export image/svg sometime have big blank space on top and bottom #2649

Open
nhymxu opened this issue Jan 6, 2022 · 1 comment
Open

Export image/svg sometime have big blank space on top and bottom #2649

nhymxu opened this issue Jan 6, 2022 · 1 comment
Labels
Status: Triage Needs to be verified, categorized, etc

Comments

@nhymxu
Copy link

nhymxu commented Jan 6, 2022

Describe the bug
Sometime, when I write very long sequence diagram, export image or svg always have big blank space on top/bottom image/svg.

I don't want this.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Bug link
  2. Click on Actions at Left-side panel
  3. Keep PNG size: auto (default)
  4. Click download PNG button
  5. Open image and see error

Expected behavior
Not have blank space on top/bottom of image/svg

Screenshots
Screen Shot 2022-01-06 at 16 30 50

Desktop (please complete the following information):

  • OS: macOS 12.1
  • Browser: Chrome
  • Version: 96

Suggest solution
When using inspector I found that
image

SVG element on DOM have large height: 3637

So when export, export function using this height
https://github.com/mermaid-js/mermaid-live-editor/blob/18a83a807a6ace0cda4d6d3f6008b7c9d87ea3d0/src/lib/components/actions.svelte#L26-L29

If svg element not have this attribute => export function will re-calculate and using fitable height.
image

See, so new code maybe:

		const svg: HTMLElement = document.querySelector('#container svg');
		svg.removeAttribute('height');
		const box: DOMRect = svg.getBoundingClientRect();
		canvas.width = box.width;
		canvas.height = box.height;
@sidharthv96 sidharthv96 transferred this issue from mermaid-js/mermaid-live-editor Jan 19, 2022
@github-actions github-actions bot added the Status: Triage Needs to be verified, categorized, etc label Jan 19, 2022
@sidharthv96
Copy link
Member

Had some discussions in mermaid-js/mermaid-live-editor#567

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Triage Needs to be verified, categorized, etc
Projects
None yet
Development

No branches or pull requests

2 participants