vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix image export centering issue

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-15 12:44:29 -08:00
parent 88de302ab8
commit 7942ac137f
14 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/mindplot/src/components/export/BinaryImageExporter.ts
View File

@ -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();

38
packages/mindplot/src/components/export/SVGExporter.ts
View File

@ -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;
}

2
packages/mindplot/test/unit/export/expected/bug2.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

2
packages/mindplot/test/unit/export/expected/bug3.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 443 KiB

After

Width:  |  Height:  |  Size: 443 KiB

2
packages/mindplot/test/unit/export/expected/cdata-support.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

2
packages/mindplot/test/unit/export/expected/complex.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 328 KiB

After

Width:  |  Height:  |  Size: 328 KiB

2
packages/mindplot/test/unit/export/expected/emptyNodes.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

2
packages/mindplot/test/unit/export/expected/enc.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

2
packages/mindplot/test/unit/export/expected/i18n.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

2
packages/mindplot/test/unit/export/expected/i18n2.svg
View File

@ -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">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

2
packages/mindplot/test/unit/export/expected/issue.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

2
packages/mindplot/test/unit/export/expected/npe.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

2
packages/mindplot/test/unit/export/expected/process.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

2
packages/mindplot/test/unit/export/expected/welcome.svg
View File

@ -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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 83 KiB