Fix image export centering issue
@ -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();
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-423.5 -433 1123.5 872" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M191.00,208.00 C200.60,208 210.20,333.00 219.80,333.00"/>
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M191.00,208.00 C200.77,208 210.53,301.00 220.30,301.00"/>
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M191.00,208.00 C200.60,208 210.20,269.00 219.80,269.00"/>
|
||||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-1282.5 -2422 2740 4851" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M607.8536585365854,-1362 L613.2957123430759,-1359.4733321612723 M607.8536585365854,-1362 L605.3269906978576,-1356.5579461935095"/>
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
|
Before Width: | Height: | Size: 443 KiB After Width: | Height: | Size: 443 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-457 -265 961 526" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M-277.25396825396825,-31 L-271.352776723551,-32.084406990632225 M-277.25396825396825,-31 L-276.16956126333605,-25.098808469582778"/>
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-849 -913 3563 1731" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M581.7268292682927,-45 L582.3818502546526,-50.96413845475004 M581.7268292682927,-45 L587.6909677230427,-44.34497901364017"/>
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
|
Before Width: | Height: | Size: 328 KiB After Width: | Height: | Size: 328 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-100 -1117 1112 2240" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M463.00,660.00 C472.77,660 482.53,1017.00 492.30,1017.00"/>
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M463.00,660.00 C472.93,660 482.87,1007.00 492.80,1007.00"/>
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M463.00,660.00 C472.93,660 482.87,975.00 492.80,975.00"/>
|
||||
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-1708.5 -556 6663 1119" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-764.00,19.00 C-773.93,19 -783.87,251.50 -793.80,251.50"/>
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-764.00,19.00 C-773.93,19 -783.87,208.00 -793.80,208.00"/>
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-764.00,19.00 C-773.93,19 -783.87,140.00 -793.80,140.00"/>
|
||||
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-128.5 -152 434 310" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0.00,0.00 C19.77,0 39.53,52.00 59.30,52.00 39.53,55.00 19.77,5.00 0.00,7.00 Z"/>
|
||||
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0.00,0.00 C19.77,0 39.53,-24.00 59.30,-24.00 39.53,-21.00 19.77,5.00 0.00,7.00 Z"/>
|
||||
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0.00,0.00 C19.60,0 39.20,14.00 58.80,14.00 39.20,17.00 19.60,5.00 0.00,7.00 Z"/>
|
||||
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-150 -141 438 288" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0.00,0.00 C26.77,0 53.53,-5.00 80.30,-5.00 53.53,-2.00 26.77,5.00 0.00,7.00 Z"/>
|
||||
<path style="fill:#495879 " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M0.00,0.00 C26.93,0 53.87,41.00 80.80,41.00 53.87,44.00 26.93,5.00 0.00,7.00 Z"/>
|
||||
<g preserveAspectRatio="none" focusable="true" width="100" height="100" transform="translate(-50.00000,-23.00000) scale(1.00000,1.00000)" visibility="visible">
|
||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-1037.5 -338 1835 720" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M83.54929577464789,-187 L88.28751685656984,-183.31906791982922 M83.54929577464789,-187 L79.86836369447711,-182.26177891807805"/>
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-623 -402 1387.5 747" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M326,104 L320.00018895554825,103.95238245202816 M326,104 L326.0476175479718,98.00018895554825"/>
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-898.5 -565 1828.5 1136" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M-296,-173 L-292.3650603359595,-168.2264045375854 M-296,-173 L-300.7735954624146,-169.36506033595953"/>
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
@ -1,4 +1,4 @@
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMidYMid" width="1440" height="900" viewBox="-529 -289 1024 585" style="background-color:white">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" preserveAspectRatio="xMinYMin" width="NaN" height="NaN" viewBox="NaN NaN NaN NaN" style="background-color:white">
|
||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"/>
|
||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M210.85714285714286,-166.5 L204.94844150423523,-165.45728799654572 M210.85714285714286,-166.5 L209.81443085368858,-172.40870135290763"/>
|
||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-254.00,161.00 C-263.77,161 -273.53,190.00 -283.30,190.00"/>
|
||||
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |