klemek/fa-diagrams
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

preview rendered

Browse Source
This commit is contained in:
Klemek
2019-07-15 15:52:36 +02:00
parent b61ddf744a
commit 07a45e9888
6 changed files with 117 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+25 -23
View File
@@ -92,29 +92,31 @@ node build.sh
const faDiagrams = require('fa-diagrams');
const data = {
options: {
font: 'Courier New'
options: {
rendering:{
icons:{
color:'#4E342E'
}
}
},
nodes: [
{
name: 'node1',
icon: 'server',
},
nodes: [
{
name: 'node1',
icon: 'server',
bottom: {text: 'myserver' },
top: {icon: 'node'}
},
{
name: 'node2',
icon: 'globe',
bottom: {text: 'world'}
}
],
links: [
{
from: 'node1',
to: 'node2',
bottom: {text: 'Hello World!'}
}
]
{
name: 'node2',
icon: 'globe',
color:'#455A64',
}
],
links: [
{
from: 'node1',
to: 'node2',
color:'#333333',
}
]
};
const svg = faDiagrams.compute(data); // string containing xml data
@@ -132,7 +134,7 @@ svg2img(svg, function(error, buffer) {
Will produce the following diagram:
![sample](preview/sample.png)
![sample](preview/sample.svg)
### Html script
build_preview.js
+33 -1
View File
@@ -33,4 +33,36 @@ const g = [];
});
});
fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h: 4 * 712 + 100}), {encoding: 'utf-8'});
fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h: 4 * 712 + 100}), {encoding: 'utf-8'});
const faDiagrams = require('./src/index');
const data = {
options: {
rendering: {
icons: {
color: '#4E342E'
}
}
},
nodes: [
{
name: 'node1',
icon: 'server',
},
{
name: 'node2',
icon: 'globe',
color: '#455A64',
}
],
links: [
{
from: 'node1',
to: 'node2',
color: '#333333',
}
]
};
fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'});
preview/links.svg
+50 -49
View File
@@ -1,50 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5">
<g>
<g transform="translate(256 150)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">default</text>
</g>
</g>
<g>
<g transform="translate(1792 150)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h1000c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">line</text>
</g>
</g>
<g>
<g transform="translate(256 862)">
<path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h755.94v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">double</text>
</g>
</g>
<g>
<g transform="translate(1792 862)">
<path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h877.941c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">split-double</text>
</g>
</g>
<g>
<g transform="translate(256 1574)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed</text>
</g>
</g>
<g>
<g transform="translate(1792 1574)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-line</text>
</g>
</g>
<g>
<g transform="translate(256 2286)">
<path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m101.5764-80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-double</text>
</g>
</g>
<g>
<g transform="translate(1792 2286)">
<path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m117.18820000000001 -80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-split-double</text>
</g>
</g>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5" stroke="black"
fill="black">
<g>
<g transform="translate(256 150)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">default</text>
</g>
</g>
<g>
<g transform="translate(1792 150)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h1000c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">line</text>
</g>
</g>
<g>
<g transform="translate(256 862)">
<path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h755.94v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">double</text>
</g>
</g>
<g>
<g transform="translate(1792 862)">
<path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059h877.941c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">split-double</text>
</g>
</g>
<g>
<g transform="translate(256 1574)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed</text>
</g>
</g>
<g>
<g transform="translate(1792 1574)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h132.8c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-line</text>
</g>
</g>
<g>
<g transform="translate(256 2286)">
<path d="M134.059 216v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m101.5764-80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h101.5764v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-double</text>
</g>
</g>
<g>
<g transform="translate(1792 2286)">
<path d="M12 126c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001v80v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059M134.059 306v-46.059c0-21.382-25.851-32.09-40.971-16.971l-86.059 86.059c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971v-46.059m117.18820000000001 -80c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12h117.18820000000001c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h56c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z"/>
<text x="512" y="0" font-family="Verdana" font-size="120" text-anchor="middle">dashed-split-double</text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

src/rendering.js
+1
View File
@@ -24,6 +24,7 @@ try {
*/
const SUB_DEF = {
'_': 'string',
'text': 'string',
'icon': 'string',
'color': 'string',
src/utils.js
+2 -2
View File
@@ -28,7 +28,7 @@ const self = {
* @returns {null|string}
*/
isValid: (obj, def) => {
const keys = Object.keys(def);
const keys = Object.keys(def).filter(k => k !== '_');
let key;
let type;
for (let i = 0; i < keys.length; i++) {
@@ -37,7 +37,7 @@ const self = {
if (type === 'object' && obj[key].length > 0)
type = 'array';
if (typeof def[key] === 'object') {
if (type && type !== 'object')
if (type && type !== 'object' && type !== def[key]['_'])
return key;
const res = self.isValid(type ? obj[key] : undefined, def[key]);
if (res)
test/utils.test.js
+6
View File
@@ -71,6 +71,12 @@ describe('isValid', () => {
test('invalid sub-object', () => {
expect(utils.isValid({a: 5}, {a: {b: 'number'}})).toBe('a');
});
test('valid alternative sub-object', () => {
expect(utils.isValid({a: 5}, {a: {b: 'number', '_': 'number'}})).toBe(null);
});
test('invalid alternative sub-object', () => {
expect(utils.isValid({a: 'hello'}, {a: {b: 'number', '_': 'number'}})).toBe('a');
});
test('undefined not required sub-object', () => {
expect(utils.isValid({}, {a: {b: 'number'}})).toBe(null);
});