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

dashed links

Browse Source
This commit is contained in:
Klemek
2019-07-15 15:14:51 +02:00
parent e4124f91c4
commit 3588a387d9
9 changed files with 613 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+12 -22
View File
@@ -12,7 +12,7 @@
* [x] SVG output
* [x] Node's icon rendering
* [x] Simple links rendering
* [ ] Dashed links rendering
* [x] Dashed links rendering
* [ ] Colors
* [ ] Sub-elements
* [ ] More options
@@ -118,6 +118,16 @@ const data = {
};
const svg = faDiagrams.compute(data); // string containing xml data
//export as SVG with fs
const fs = require('fs');
fs.writeFileSync('diagram.svg', svg, {encoding:'utf-8'});
//export as PNG with svg2img (npm i svg2img)
const svg2img = require('svg2img');
svg2img(svg, function(error, buffer) {
fs.writeFileSync('diagram.png', buffer);
});
```
Will produce the following diagram:
@@ -238,27 +248,7 @@ It's very flexible as you can copy-paste from an HTML page `far fa-circle` and i
Here are the accepted types and their preview :
* **default**:
![default](preview/link-default.svg)
* **double**:
![default](preview/link-double.svg)
* **line**:
![default](preview/link-line.svg)
* **dashed**:
(soon)
* **dashed-line**:
(soon)
* **split-double**:
![](preview/links.svg)
(soon)
build_preview.js
+18 -4
View File
@@ -3,20 +3,34 @@ const fs = require('fs');
const rendering = require('./src/rendering')({
'scale': 0.05,
'h-spacing': 1,
beautify: true,
});
['default', 'double', 'line'].forEach(type => {
fs.writeFileSync(`preview/link-${type}.svg`, rendering.toXML({
const g = [];
['default', 'line', 'double', 'split-double', 'dashed', 'dashed-line', 'dashed-double', 'dashed-split-double'].forEach((type, i) => {
g.push({
'g': {
'_attributes': {
'transform': 'translate(0 -128)'
'transform': `translate(${(i % 2) * 1536 + 256} ${Math.floor(i / 2) * 712 + 150})`
},
'path': {
'_attributes': {
'd': rendering.getLinkPath(type, 2)
}
},
'text': {
'_attributes': {
'x': 512,
'y': 0,
'font-family': 'Verdana',
'font-size': 120,
'text-anchor': 'middle'
},
'_text': type
}
}
}, {w: 1024, h: 256}), {encoding: 'utf-8'});
});
});
fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h: 4 * 712 + 100}), {encoding: 'utf-8'});
package-lock.json
Generated
+499 -162
View File
File diff suppressed because it is too large Load Diff
preview/link-default.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 256" width="128" height="32">
<g transform="translate(0 -128)">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.97v46.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.971V216z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 381 B

preview/link-double.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 256" width="128" height="32">
<g transform="translate(0 -128)">
<path d="M889.999 216h-755.94v-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.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 493 B

preview/link-line.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 256" width="128" height="32">
<g transform="translate(0 -128)">
<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"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 282 B

preview/links.svg
+50
View File
@@ -0,0 +1,50 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

src/index.js
+4 -2
View File
@@ -1,8 +1,11 @@
const placing = require('./placing');
const rendering = require('./rendering');
const self = {
/**
* @param {{options: Object, nodes: Object[], links: Object[]}} data
* @returns {string}
*/
compute: (data) => {
const options = data['options'] || {};
@@ -22,7 +25,6 @@ const self = {
return rendering(options['rendering']).compute(nodes, links);
},
};
module.exports = self; // Node
src/rendering.js
+30 -8
View File
@@ -125,16 +125,38 @@ module.exports = (options) => {
* @return {string|null}
*/
getLinkPath: (type, width) => {
const arrowHead = 'v46.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.059'; //134.059
const arrowHeadR = 'v-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.059'; //134.059
const lineEnd = 'c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12'; // 12
const lineStart = 'c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12'; // 12
const dashedStep = `${lineStart}h56${lineEnd}`; // 80
switch (type) {
case 'none':
return null;
case 'line':
return `M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h${width * 512 - 24}c6.627 0 12 -5.373 12 -12v-56c0 -6.627 -5.373 -12 -12 -12z`;
case 'double':
const size = width * 512 - 268.06;
return `M${134.059 + size} 216h-${size}v-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.059h${size}v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z`;
default:
return `M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h${width * 512 - 146.03}v46.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.971V216z`;
return `M12 216${lineStart}h${width * 512 - 146.059}${arrowHead}z`;
case 'line':
return `M12 216${lineStart}h${width * 512 - 24}${lineEnd}z`;
case 'double':
return `M134.059 216${arrowHeadR}h${width * 512 - 268.06}${arrowHead}z`;
case 'split-double':
return `M12 126${lineStart}h${width * 512 - 146.059}${arrowHead}M134.059 306${arrowHeadR}h${width * 512 - 146.059}${lineEnd}z`;
case 'dashed':
const n1 = Math.floor((width * 512 - 134.059) / (80 * 2.1));
const space1 = ((width * 512 - 134.059) - n1 * 56 - 24) / (n1);
return `M12 216${new Array(n1).fill(`${dashedStep}h${space1}`).join('')}v80${arrowHead}z`;
case 'dashed-line':
const n2 = Math.floor(width * 512 / (80 * 2.1));
const space2 = (width * 512 - n2 * 56 - 24) / (n2 - 1);
return `M12 216${new Array(n2).fill(dashedStep).join(`h${space2}`)}z`;
case 'dashed-double':
const n3 = Math.floor((width * 512 - 134.059 * 2) / (80 * 2.1));
const space3 = ((width * 512 - 134.059 * 2) - n3 * 56 - 24) / (n3 + 1);
return `M134.059 216${arrowHeadR}m${space3}-80${new Array(n3).fill(`${dashedStep}h${space3}`).join('')}v80${arrowHead}z`;
case 'dashed-split-double':
const n4 = Math.floor((width * 512 - 134.059) / (80 * 2.1));
const space4 = ((width * 512 - 134.059) - n4 * 56 - 24) / (n4);
return `M12 126${new Array(n4).fill(`${dashedStep}h${space4}`).join('')}v80${arrowHead}M134.059 306${arrowHeadR}m${space4} -80${new Array(n4).fill(`${dashedStep}`).join(`h${space4}`)}z`;
}
},
@@ -199,6 +221,7 @@ module.exports = (options) => {
const posY = (src.y + dst.y) / 2 + 0.5;
const angle = Math.atan2(dst.y - src.y, (dst.x - src.x) * options['h-spacing']) * 180 / Math.PI;
const scale = (link['scale'] || options['links']['scale']) * DEFAULT_SCALE;
let size = link['size'] || options['links']['size'];
@@ -210,7 +233,7 @@ module.exports = (options) => {
if (dy > 0)
dy -= LINK_MARGIN * 2;
size = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)) / DEFAULT_SCALE;
size = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)) / scale;
}
const path = self.getLinkPath(link.type, size);
@@ -218,7 +241,6 @@ module.exports = (options) => {
if (!path)
return;
const scale = (link['scale'] || options['links']['scale']) * DEFAULT_SCALE;
const group = {
'_attributes': {
'transform': `translate(${posX} ${posY}) rotate(${angle})`