Added "Download SVG" option

src/chart.tsx

@@ -134,6 +134,12 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     );
   }
 
+  private getSvgContents() {
+    const svg = document.getElementById('chart')!.cloneNode(true) as Element;
+    svg.removeAttribute('transform');
+    return svg.outerHTML;
+  }
+
   /** Shows the print dialog to print the currently displayed chart. */
   print() {
     const printWindow = document.createElement('iframe');
@@ -141,11 +147,8 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     printWindow.style.top = '-1000px';
     printWindow.style.left = '-1000px';
     printWindow.onload = () => {
-      const svg = document.getElementById('chart')!.cloneNode(true) as Element;
-      svg.removeAttribute('transform');
-      const contents = svg.outerHTML;
       printWindow.contentDocument!.open();
-      printWindow.contentDocument!.write(contents);
+      printWindow.contentDocument!.write(this.getSvgContents());
       printWindow.contentDocument!.close();
       // Doesn't work on Firefox without the setTimeout.
       setTimeout(() => {
@@ -156,4 +159,14 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     };
     document.body.appendChild(printWindow);
   }
+
+  downloadSvg() {
+    const hiddenElement = document.createElement('a');
+    hiddenElement.href = URL.createObjectURL(
+      new Blob([this.getSvgContents()], {type: 'image/svg+xml'}),
+    );
+    hiddenElement.target = '_blank';
+    hiddenElement.download = 'topola.svg';
+    hiddenElement.click();
+  }
 }

src/chart_view.tsx

@@ -255,4 +255,10 @@ export class ChartView extends React.Component<RouteComponentProps, State> {
       this.chartRef.print();
     }
   }
+
+  downloadSvg() {
+    if (this.chartRef) {
+      this.chartRef.downloadSvg();
+    }
+  }
 }

src/index.tsx

@@ -47,6 +47,7 @@ if (browser && browser.name === 'ie') {
               <TopBar
                 {...props}
                 onPrint={() => chartViewRef && chartViewRef.print()}
+                onDownloadSvg={() => chartViewRef && chartViewRef.downloadSvg()}
               />
             )}
           />

src/top_bar.tsx

@@ -12,6 +12,7 @@ import {
   Modal,
   Input,
   Form,
+  Dropdown,
 } from 'semantic-ui-react';
 
 /** Menus and dialogs state. */
@@ -22,6 +23,7 @@ interface State {
 
 interface Props {
   onPrint: () => void;
+  onDownloadSvg: () => void;
 }
 
 export class TopBar extends React.Component<
@@ -175,6 +177,21 @@ export class TopBar extends React.Component<
           <Icon name="print" />
           <FormattedMessage id="menu.print" defaultMessage="Print" />
         </Menu.Item>
+        <Dropdown
+          trigger={
+            <div>
+              <Icon name="download" />
+              <FormattedMessage id="menu.download" defaultMessage="Download" />
+            </div>
+          }
+          className="item"
+        >
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => this.props.onDownloadSvg()}>
+              <FormattedMessage id="menu.svg_file" defaultMessage="SVG file" />
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
         <Menu.Item
           as="a"
           href="https://github.com/PeWu/topola-viewer"

src/translations/pl.json

@@ -2,6 +2,8 @@
   "menu.load_from_url": "Otwórz URL",
   "menu.load_from_file": "Otwórz plik",
   "menu.print": "Drukuj",
+  "menu.download": "Pobierz",
+  "menu.svg_file": "Plik SVG",
   "menu.github": "Źródła na GitHub",
   "intro.title": "Topola Genealogy",
   "intro.description": "Topola Genealogy pozwala przeglądać drzewo genealogiczne w interaktywny sposób.",