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

Ability to save as SVG or Hi-Res PNG #62

Open
ch3ckmat3 opened this issue May 24, 2018 · 6 comments · May be fixed by #147
Open

Ability to save as SVG or Hi-Res PNG #62

ch3ckmat3 opened this issue May 24, 2018 · 6 comments · May be fixed by #147

Comments

@ch3ckmat3
Copy link

Don't know if already planned but requesting anyways :)

@IvanGoncharov
Copy link
Member

@ch3ckmat3 Sounds cool 👍

@mjbcopland
Copy link

mjbcopland commented Aug 13, 2018

I've branched from v1.0.0-rc.19 and added a 'Download SVG' button here.

I've branched from the latest release because the current master branch doesn't match what's currently live at https://apis.guru/graphql-voyager and also doesn't seem to work with custom schemas yet. Consequently I don't know how it would be merged in (releases branch seems out of date?) but you can run my branch locally to save the SVG. It adds a new button which looks like this:

graphql-voyager

Converting to PNG and other formats can then be done with external tools such as imagemagick.

edit

I've merged v1.0.0-rc.19 into my releases branch and branched from there instead, so we can more easily see the changes.

@IvanGoncharov
Copy link
Member

releases branch seems out of date?

@mjbcopland You absolutely right. I just deleted it.

because the current master branch doesn't match what's currently live at apis.guru/graphql-voyager and also doesn't seem to work with custom schemas yet.

It's under heavy refactoring ATM and once we finish it we would push for 1.0.0 release.

Consequently I don't know how it would be merged in

You can open PR against master. Note: we don't have change schema button anymore so you should look some other place for "Download SVG" button.

@IvanGoncharov
Copy link
Member

Just as a note for a future development I really like how screenshot button done in this demo:
http://html2canvas.hertzen.com/documentation
image
image

@robbyemmert
Copy link

robbyemmert commented Mar 15, 2019

Moving my ideas here from #110 to keep everything in one place:

Desired functionality:
As a viewer, I want to export the schema to a file.

Ideal options for file types:

  • SVG (It's already an SVG in the DOM, and it'd still be a vector image supported by most graphics editors, so this is likely the optimal choice)
  • PNG/JPEG (This would require a more complex export interface, asking for sizing/resolution requirements, but is nice for quickly outputting a snapshot for slide decks)

For reference, the SVG option alone would be sufficient (at least to get started) for my own use case.

Another note: It might be useful to architect this so that there's an interface for adding your own export types. Something like the following:

GraphQLVoyager.init(document.getElementById('voyager'), {
  introspection: introspectionProvider,
  exportTypes: [
    { label: 'UML', description: 'Export UML for the old guard', editor: ExportUMLUI myCustomUMLExportProvider } 
  // myCustomUMLExportProvider is a function that accepts the rendered SVG element, introspection, (and any other necessary info) and returns a file blob or some equivalent format.
  // the 'editor' prop is an optional react component that provides an interface for configuring export settings. If not provided, the export provider could be run directly. An editor ui would only be *required* for formats like PNG that would need to know what resolution to export to, etc.
  ]
})

Common exporters could then be added in the core package for convenience, i.e.:

import {svgExporter, pngExporter} from 'graphql-voyager/exporters'
const settings = {
  exportTypes: [
    svgExporter, pngExporter
  ],
  //...etc
}

Thanks!

@iviaks iviaks linked a pull request Jan 7, 2020 that will close this issue
@sanket-work
Copy link

is this closed ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants