diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index 32c9d4eff..573440cfc 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -13,6 +13,7 @@ import { EDGE_ID_SEPARATOR } from '../constants/naming'; import { doLayout } from './nodes-layout'; import Node from './node'; import NodesError from './nodes-error'; +import Logo from '../components/logo'; const log = debug('scope:nodes-chart'); @@ -226,6 +227,7 @@ export default class NodesChart extends React.Component { {errorEmpty} {errorMaxNodesExceeded} + {edgeElements} diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index 80bb4f3c7..89f6f6934 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -96,7 +96,11 @@ export default class App extends React.Component { details={this.state.nodeDetails} />}
- +
+ + + +
diff --git a/client/app/scripts/components/logo.js b/client/app/scripts/components/logo.js index fe5c53e4d..90ae97c61 100644 --- a/client/app/scripts/components/logo.js +++ b/client/app/scripts/components/logo.js @@ -3,59 +3,57 @@ import React from 'react'; export default class Logo extends React.Component { render() { return ( -
- - - - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + + + ); } } diff --git a/client/app/scripts/utils/file-utils.js b/client/app/scripts/utils/file-utils.js index 2533e6f81..72fcd7612 100644 --- a/client/app/scripts/utils/file-utils.js +++ b/client/app/scripts/utils/file-utils.js @@ -43,28 +43,31 @@ function setInlineStyles(svg, emptySvgDeclarationComputed) { return tree; } + // make sure logo shows up + svg.setAttribute('class', 'exported'); + // hardcode computed css styles inside svg const allElements = traverse(svg); let i = allElements.length; while (i--) { explicitlySetStyle(allElements[i]); } + // set font svg.setAttribute('style', 'font-family: "Roboto", sans-serif;'); } -function download(source) { +function download(source, name) { let filename = 'untitled'; - if (source.id) { - filename = source.id; - } else if (source.class) { - filename = source.class; + if (name) { + filename = name; } else if (window.document.title) { - filename = window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase(); + filename = window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase() + + '-' + (+new Date); } - const url = window.URL.createObjectURL(new Blob(source.source, + const url = window.URL.createObjectURL(new Blob(source, {'type': 'text\/xml'} )); @@ -103,12 +106,7 @@ function getSVG(doc, emptySvgDeclarationComputed) { const source = (new XMLSerializer()).serializeToString(svg); - return { - class: svg.getAttribute('class'), - id: svg.getAttribute('id'), - childElementCount: svg.childElementCount, - source: [doctype + source] - }; + return [doctype + source]; } function cleanup() { @@ -117,9 +115,13 @@ function cleanup() { [].forEach.call(crowbarElements, function(el) { el.parentNode.removeChild(el); }); + + // hide embedded logo + const svg = document.getElementById('nodes-chart-canvas'); + svg.setAttribute('class', ''); } -export function saveGraph() { +export function saveGraph(filename) { window.URL = (window.URL || window.webkitURL); // add empty svg element @@ -128,7 +130,7 @@ export function saveGraph() { const emptySvgDeclarationComputed = getComputedStyle(emptySvg); const svgSource = getSVG(document, emptySvgDeclarationComputed); - download(svgSource); + download(svgSource, filename); cleanup(); } diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 8ca23f663..aa49b27a0 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -290,6 +290,17 @@ h2 { top: 0px; } + .logo { + display: none; + } + + svg.exported { + .logo { + display: inline; + transform: scale(0.25); + } + } + text { font-family: @base-font; fill: @text-secondary-color;