[feature] Implement simple saving SVG schemes

package.json

@@ -74,6 +74,7 @@
     "classnames": "^2.2.6",
     "clipboard": "^2.0.4",
     "commonmark": "^0.29.0",
+    "file-saver": "^2.0.2",
     "lodash": "^4.17.10",
     "prop-types": "^15.7.2",
     "svg-pan-zoom": "^3.6.0",

src/components/Voyager.css

@@ -21,6 +21,13 @@
     box-sizing: border-box;
     position: relative;
     z-index: 10;
+
+    & .contents__btn-save {
+      padding: 0px 15px;
+      margin-top: 5px;
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   & > .viewport {
@@ -34,7 +41,8 @@
   }
 
   @media (--small-viewport) {
-    & > .doc-panel, & > .viewport {
+    & > .doc-panel,
+    & > .viewport {
       height: 50%;
       width: 100%;
       max-width: none;
@@ -66,4 +74,4 @@
       left: 10px;
     }
   }
-}
+}

src/components/Voyager.tsx

@@ -9,13 +9,17 @@ import * as PropTypes from 'prop-types';
 import { theme } from './MUITheme';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 
+import Button from '@material-ui/core/Button';
+import FileSaver from 'file-saver';
+
 import GraphViewport from './GraphViewport';
 import DocExplorer from './doc-explorer/DocExplorer';
 import PoweredBy from './utils/PoweredBy';
 import Settings from './settings/Settings';
 
 import './Voyager.css';
 import './viewport.css';
+import styles from '!!postcss-loader!./viewport.css';
 
 type IntrospectionProvider = (query: string) => Promise<any>;
 
@@ -185,6 +189,16 @@ export default class Voyager extends React.Component<VoyagerProps> {
       <div className="doc-panel">
         <div className="contents">
           {panelHeader}
+          <div className="contents__btn-save">
+            <Button
+              color="primary"
+              style={{ color: 'white' }}
+              variant="contained"
+              onClick={this.saveToSVG}
+            >
+              Save to SVG
+            </Button>
+          </div>
           <DocExplorer
             typeGraph={typeGraph}
             selectedTypeID={selectedTypeID}
@@ -199,6 +213,20 @@ export default class Voyager extends React.Component<VoyagerProps> {
     );
   }
 
+  saveToSVG = () => {
+    const { displayOptions, typeGraph } = this.state;
+
+    this.svgRenderer.renderSvg(typeGraph, displayOptions).then(data => {
+      let svgTag = document.createElement('div');
+      svgTag.innerHTML = data;
+      let styleTag = document.createElement('style');
+      styleTag.innerHTML = styles.toString();
+      svgTag.firstElementChild.insertBefore(styleTag, svgTag.firstElementChild.firstElementChild);
+
+      FileSaver.saveAs(new Blob([svgTag.innerHTML], { type: 'image/svg+xml' }), 'schema.svg');
+    });
+  };
+
   renderSettings() {
     const { schema, displayOptions } = this.state;
 

yarn.lock

@@ -2437,6 +2437,11 @@ file-loader@3.0.1:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
+file-saver@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a"
+  integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"