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

Very nice, but how to get SVG #184

Open
aphilpotts opened this issue Nov 8, 2017 · 6 comments
Open

Very nice, but how to get SVG #184

aphilpotts opened this issue Nov 8, 2017 · 6 comments

Comments

@aphilpotts
Copy link

I really like the tools and am using them in VSCode, but to convert to SVG, rather than just display it. the SVG download from the web site at https://bramp.github.io/js-sequence-diagrams/ is borked for Edge, the download link does nothing, the link does work in chrome, so not a show-stopper!

@bramp
Copy link
Owner

bramp commented Nov 8, 2017

I don't have a Windows machine to test on, so I won't be able to investigate. If anyone else is willing to take a look, and propose a solution, that'll be great!

@aphilpotts
Copy link
Author

I will look into it, see if I can propose a solution

@aphilpotts
Copy link
Author

To elaborate, the issue is in here:

        download_link.click(function(ev) {
          var svg = diagram_div.find('svg')[0];
          var width = parseInt(svg.width.baseVal.value);
          var height = parseInt(svg.height.baseVal.value);
          var data = editor.getValue();
          var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

          var a = $(this);
          a.attr("download", "diagram.svg"); // TODO I could put title here
          a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
        });

This code was interesting to me, I had not seen the technique before, but is seems, OK, on click you add a data url to be downloaded, but in Edge, this leads to a lockup and a spinning donut.

I will see if I can get some attention from the Edge guys... will keep you posted

@aphilpotts
Copy link
Author

By the way, two of the links on the web site are dead, not that it really seems to matter, but I was in the debugger anyway.

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-snap.js

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://bramp.github.io/js-sequence-diagrams/js/underscore-min.map

@aphilpotts
Copy link
Author

This works in edge, and elsewhere, pretty sure it can be repurposed, it has the disadvantage that the actual link does not appear until the button is clicked...

http://html5-demos.appspot.com/static/a.download.html

the only other options I could think of is to use a future and then calling click

@nocke
Copy link

nocke commented Jul 16, 2018

Is there a simple command line use to generate that svg output? Like this:

proj/docs/img $> sequence test.seqdiag -o test.svg

Working in vscode using this preview extension is great. If there just was a command line way to export the resulting .svg...

Next up and readily working would be using watchy to watch all docs/img/*.seqdiag and anything seeing changes leads to re-conversion. And then only linking to those svg's from your client/github facing documentation, so everyone can view them with ease...

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

No branches or pull requests

3 participants