diff --git a/packages/mindplot/src/components/export/BinaryImageExporter.ts b/packages/mindplot/src/components/export/BinaryImageExporter.ts index 35d87d4d..7aaf0980 100644 --- a/packages/mindplot/src/components/export/BinaryImageExporter.ts +++ b/packages/mindplot/src/components/export/BinaryImageExporter.ts @@ -52,10 +52,22 @@ class BinaryImageExporter extends Exporter { // Get the device pixel ratio, falling back to 1. But, I will double the resolution to look nicer. const dpr = (window.devicePixelRatio || 1) * 2; - // Create canvas ... + // Create canvas size ... const canvas = document.createElement('canvas'); - canvas.setAttribute('width', (this.width * dpr).toString()); - canvas.setAttribute('height', (this.height * dpr).toString()); + let width: number; + let height: number; + if (this.adjustToFit) { + // Size must match with SVG image size ... + const size = svgExporter.getImgSize(); + width = (size.width * dpr); + height = (size.height * dpr); + } else { + // Use screensize as size .. + width = (this.width * dpr); + height = (this.height * dpr); + } + canvas.setAttribute('width', width.toFixed(0)); + canvas.setAttribute('height', height.toFixed(0)); // Render the image and wait for the response ... const img = new Image(); diff --git a/packages/mindplot/src/components/export/SVGExporter.ts b/packages/mindplot/src/components/export/SVGExporter.ts index d5f38758..6a45ae81 100644 --- a/packages/mindplot/src/components/export/SVGExporter.ts +++ b/packages/mindplot/src/components/export/SVGExporter.ts @@ -25,7 +25,7 @@ class SVGExporter extends Exporter { private static regexpTranslate = /translate\((-?[0-9]+.[0-9]+),(-?[0-9]+.[0-9]+)\)/; - private static padding = 100; + private static padding = 30; private adjustToFit: boolean; @@ -54,7 +54,7 @@ class SVGExporter extends Exporter { // Does need to be adjust ?. if (this.adjustToFit) { - svgDoc = this.normalizeToFit(svgDoc); + svgDoc = this._normalizeToFit(svgDoc); } const result = new XMLSerializer() @@ -63,10 +63,9 @@ class SVGExporter extends Exporter { return Promise.resolve(result); } - private normalizeToFit(document: Document): Document { + private _calcualteDimensions(): { minX: number, maxX: number, minY: number, maxY: number } { // Collect all group elements ... const rectElems = Array.from(document.querySelectorAll('g>rect')); - const translates: SizeType[] = rectElems .map((rect: Element) => { const g = rect.parentElement; @@ -96,15 +95,40 @@ class SVGExporter extends Exporter { const widths = translates.map((t) => t.width).sort((a, b) => a - b); const heights = translates.map((t) => t.height).sort((a, b) => a - b); - const svgElem = document.firstChild as Element; const minX = widths[0] - SVGExporter.padding; const minY = heights[0] - SVGExporter.padding; const maxX = widths[widths.length - 1] + SVGExporter.padding; const maxY = heights[heights.length - 1] + SVGExporter.padding; - svgElem.setAttribute('viewBox', `${minX} ${minY} ${maxX + Math.abs(minX)} ${maxY + Math.abs(minY)}`); - svgElem.setAttribute('preserveAspectRatio', 'xMidYMid'); + return { + minX, maxX, minY, maxY, + }; + } + + getImgSize(): SizeType { + const { + minX, maxX, minY, maxY, + } = this._calcualteDimensions(); + + const width = maxX + Math.abs(minX); + const height = maxY + Math.abs(minY); + return { width, height }; + } + + private _normalizeToFit(document: Document): Document { + const { + minX, maxX, minY, maxY, + } = this._calcualteDimensions(); + const svgElem = document.firstChild as Element; + + const width = maxX + Math.abs(minX); + const height = maxY + Math.abs(minY); + + svgElem.setAttribute('viewBox', `${minX} ${minY} ${width} ${height}`); + svgElem.setAttribute('preserveAspectRatio', 'xMinYMin'); + svgElem.setAttribute('width', width.toFixed(0)); + svgElem.setAttribute('height', height.toFixed(0)); return document; } diff --git a/packages/mindplot/test/unit/export/expected/bug2.svg b/packages/mindplot/test/unit/export/expected/bug2.svg index 122cc29f..2091190d 100644 --- a/packages/mindplot/test/unit/export/expected/bug2.svg +++ b/packages/mindplot/test/unit/export/expected/bug2.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/bug3.svg b/packages/mindplot/test/unit/export/expected/bug3.svg index 69ada57f..f2f5ff45 100644 --- a/packages/mindplot/test/unit/export/expected/bug3.svg +++ b/packages/mindplot/test/unit/export/expected/bug3.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/cdata-support.svg b/packages/mindplot/test/unit/export/expected/cdata-support.svg index bc9d6920..98152aa4 100644 --- a/packages/mindplot/test/unit/export/expected/cdata-support.svg +++ b/packages/mindplot/test/unit/export/expected/cdata-support.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/complex.svg b/packages/mindplot/test/unit/export/expected/complex.svg index 622325e3..343f1cef 100644 --- a/packages/mindplot/test/unit/export/expected/complex.svg +++ b/packages/mindplot/test/unit/export/expected/complex.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/emptyNodes.svg b/packages/mindplot/test/unit/export/expected/emptyNodes.svg index d5d4e261..9f9e20c6 100644 --- a/packages/mindplot/test/unit/export/expected/emptyNodes.svg +++ b/packages/mindplot/test/unit/export/expected/emptyNodes.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/enc.svg b/packages/mindplot/test/unit/export/expected/enc.svg index f30d59a1..74481d31 100644 --- a/packages/mindplot/test/unit/export/expected/enc.svg +++ b/packages/mindplot/test/unit/export/expected/enc.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/i18n.svg b/packages/mindplot/test/unit/export/expected/i18n.svg index 8a67939b..351707ef 100644 --- a/packages/mindplot/test/unit/export/expected/i18n.svg +++ b/packages/mindplot/test/unit/export/expected/i18n.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/i18n2.svg b/packages/mindplot/test/unit/export/expected/i18n2.svg index c9edd6b0..d79c9227 100644 --- a/packages/mindplot/test/unit/export/expected/i18n2.svg +++ b/packages/mindplot/test/unit/export/expected/i18n2.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/issue.svg b/packages/mindplot/test/unit/export/expected/issue.svg index 962c0a8b..7a2a354b 100644 --- a/packages/mindplot/test/unit/export/expected/issue.svg +++ b/packages/mindplot/test/unit/export/expected/issue.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/npe.svg b/packages/mindplot/test/unit/export/expected/npe.svg index e6aaa9a1..12c7461d 100644 --- a/packages/mindplot/test/unit/export/expected/npe.svg +++ b/packages/mindplot/test/unit/export/expected/npe.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/process.svg b/packages/mindplot/test/unit/export/expected/process.svg index eca717ed..5198b29b 100644 --- a/packages/mindplot/test/unit/export/expected/process.svg +++ b/packages/mindplot/test/unit/export/expected/process.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/mindplot/test/unit/export/expected/welcome.svg b/packages/mindplot/test/unit/export/expected/welcome.svg index 5d2f8327..e0b2c360 100644 --- a/packages/mindplot/test/unit/export/expected/welcome.svg +++ b/packages/mindplot/test/unit/export/expected/welcome.svg @@ -1,4 +1,4 @@ - +