diff --git a/package-lock.json b/package-lock.json index 1a3bf6f7ab..c0b0dba218 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26160,9 +26160,9 @@ } }, "svg-crowbar": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/svg-crowbar/-/svg-crowbar-0.6.0.tgz", - "integrity": "sha512-vkYwZbSUVZRqJ3KBQvzsDJaliMJL3fFmpdIUb2On1AV82qx9a6r4ZaHuAPa8wg2U+/9QhOGUXLpupj9D1n5koA==" + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/svg-crowbar/-/svg-crowbar-0.6.5.tgz", + "integrity": "sha512-3vQn7XoIxRa4cSCOgCiwlc3vEj17+ruc83FOO7QO2jPwbPwxOw1ynpMlgXmWUxBC0DKQMFgHFZyMsfMCIhY0Jw==" }, "svg-parser": { "version": "2.0.4", @@ -28704,4 +28704,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 2b3bf48bce..23a393e602 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "reselect": "^4.0.0", "seedrandom": "^3.0.5", "snyk": "^1.369.2", - "svg-crowbar": "^0.6.0", + "svg-crowbar": "^0.6.5", "what-input": "^5.2.10" }, "peerDependencies": { @@ -121,4 +121,4 @@ "not op_mini all" ], "snyk": true -} \ No newline at end of file +} diff --git a/src/components/export-modal/export-graph.js b/src/components/export-modal/export-graph.js index 29aa0bc4e6..27af177913 100644 --- a/src/components/export-modal/export-graph.js +++ b/src/components/export-modal/export-graph.js @@ -21,9 +21,13 @@ const exportGraph = ({ format, theme, graphSize, mockFn }) => { clone.classList.add('kedro', `kui-theme--${theme}`, 'pipeline-graph--export'); // Reset zoom/translate - let width = graphSize.width + graphSize.marginx * 2; - let height = graphSize.height + graphSize.marginy * 2; - clone.setAttribute('viewBox', `0 0 ${width} ${height}`); + let width, height; + const hasGraph = isFinite(graphSize.width) && isFinite(graphSize.height); + if (hasGraph) { + width = graphSize.width + graphSize.marginx * 2; + height = graphSize.height + graphSize.marginy * 2; + clone.setAttribute('viewBox', `0 0 ${width} ${height}`); + } clone.querySelector('#zoom-wrapper').removeAttribute('transform'); // Impose a maximum size on PNGs because otherwise they break when downloading @@ -32,8 +36,10 @@ const exportGraph = ({ format, theme, graphSize, mockFn }) => { width = Math.min(width, maxWidth); height = Math.min(height, maxWidth * (height / width)); } - clone.setAttribute('width', width); - clone.setAttribute('height', height); + if (hasGraph) { + clone.setAttribute('width', width); + clone.setAttribute('height', height); + } const style = document.createElement('style'); if (format === 'svg') { @@ -50,8 +56,8 @@ const exportGraph = ({ format, theme, graphSize, mockFn }) => { clone.prepend(style); // Download SVG/PNG - download(clone, 'kedro-pipeline'); - // @TODO: Replace third { css: 'internal' } argument when CORS issue is fixed + const options = format === 'svg' ? { css: 'internal' } : undefined; + download(clone, 'kedro-pipeline', options); // Delete cloned SVG svg.parentNode.removeChild(clone);