Switch svg saving libraries to allow saving png with background

Signed-off-by: Abeshouse, Adam A./Sloan Kettering Institute <[email protected]>

package.json

@@ -201,6 +201,7 @@
     "route-parser": "0.0.5",
     "sass-loader": "^4.1.1",
     "sass-resources-loader": "^1.3.1",
+    "save-svg-as-png": "^1.4.6",
     "script-loader": "^0.7.0",
     "seamless-immutable": "^7.0.1",
     "seedrandom": "^2.4.3",

src/shared/components/downloadControls/DownloadControls.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import SvgSaver from 'svgsaver';
 import svgToPdfDownload from "shared/lib/svgToPdfDownload";
 import FadeInteraction from "../fadeInteraction/FadeInteraction";
 import {observer} from "mobx-react";
@@ -9,6 +8,7 @@ import fileDownload from 'react-file-download';
 import DefaultTooltip from "../defaultTooltip/DefaultTooltip";
 import classnames from "classnames";
 import styles from "./DownloadControls.module.scss";
+import {saveSvg, saveSvgAsPng} from "save-svg-as-png";
 
 type ButtonSpec = { key:string, content:JSX.Element, onClick:()=>void, disabled?: boolean };
 
@@ -53,15 +53,14 @@ function makeMenuItem(spec:ButtonSpec) {
 
 @observer
 export default class DownloadControls extends React.Component<IDownloadControlsProps, {}> {
-    private svgsaver = new SvgSaver();
     @observable private collapsed = true;
 
     @autobind
     private downloadSvg() {
         if (this.props.getSvg) {
             const svg = this.props.getSvg();
             if (svg) {
-                this.svgsaver.asSvg(svg, `${this.props.filename}.svg`);
+                saveSvg(svg, `${this.props.filename}.svg`);
             }
         }
     }
@@ -71,7 +70,7 @@ export default class DownloadControls extends React.Component<IDownloadControlsP
         if (this.props.getSvg) {
             const svg = this.props.getSvg();
             if (svg) {
-                this.svgsaver.asPng(svg, `${this.props.filename}.png`);
+                saveSvgAsPng(svg, `${this.props.filename}.png`, {backgroundColor:"#ffffff"});
             }
         }
     }

typings/missing.d.ts

@@ -3,6 +3,7 @@ declare module '*.scss';
 declare module '*.json';
 
 // these packages are missing typings
+declare module 'save-svg-as-png'
 declare module 'react-file-download';
 declare module 'react-select-checked';
 declare module 'react-zeroclipboard';