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

working nodes sub-texts

Browse Source
This commit is contained in:
Klemek
2019-07-16 18:34:05 +02:00
parent c7264235b1
commit 64d952f8bc
6 changed files with 117 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+7 -10
View File
@@ -95,29 +95,26 @@ node build.sh
const faDiagrams = require('fa-diagrams'); const faDiagrams = require('fa-diagrams');
const data = { const data = {
options: {
rendering:{
icons:{
color:'#4E342E'
}
}
},
nodes: [ nodes: [
{ {
name: 'node1', name: 'node1',
icon: 'server', icon: 'laptop-code',
color: '#4E342E',
bottom: 'my app',
}, },
{ {
name: 'node2', name: 'node2',
icon: 'globe', icon: 'globe',
color:'#455A64', color: '#455A64',
bottom: 'world'
} }
], ],
links: [ links: [
{ {
from: 'node1', from: 'node1',
to: 'node2', to: 'node2',
color:'#333333', color: '#333333',
bottom: 'hello'
} }
] ]
}; };
build_preview.js
+2 -11
View File
@@ -38,21 +38,12 @@ fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h:
const faDiagrams = require('./src/index'); const faDiagrams = require('./src/index');
const data = { const data = {
options: {
rendering: {
beautify: true,
icons: {
color: '#4E342E'
}
}
},
nodes: [ nodes: [
{ {
name: 'node1', name: 'node1',
icon: 'laptop-code', icon: 'laptop-code',
bottom: 'my\napp', color: '#4E342E',
top:'my app', bottom: 'my app',
left:'my\napp'
}, },
{ {
name: 'node2', name: 'node2',
docs/sample.json
+24 -1
View File
@@ -1 +1,24 @@
{"options":{"rendering":{"icons":{"color":"#4E342E"}}},"nodes":[{"name":"node1","icon":"server"},{"name":"node2","icon":"globe","color":"#455A64"}],"links":[{"from":"node1","to":"node2","color":"#333333"}]} {
"nodes": [
{
"name": "node1",
"icon": "laptop-code",
"color": "#4E342E",
"bottom": "my app"
},
{
"name": "node2",
"icon": "globe",
"color": "#455A64",
"bottom": "world"
}
],
"links": [
{
"from": "node1",
"to": "node2",
"color": "#333333",
"bottom": "hello"
}
]
}
preview/sample.svg
+23 -1
View File
@@ -1 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="832" height="320" stroke="black" fill="black"><g transform="translate(0.65 0.5)"><g transform="scale(0.00078125 0.00078125) translate(-256 -256)" stroke="#4E342E" fill="#4E342E"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"/></g></g><g transform="translate(1.9500000000000002 0.5)"><g transform="scale(0.00078125 0.00078125) translate(-248 -256)" stroke="#455A64" fill="#455A64"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></g></g><g transform="translate(1.3 0.5) rotate(0)"><g transform="scale(0.00078125 0.00078125) translate(-448 -256)" stroke="#333333" fill="#333333"><path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h749.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"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="1664" height="640" stroke="black" fill="black">
<g transform="translate(0.65 0.5)">
<g transform="scale(0.00078125 0.00078125) translate(-320 -256)" stroke="#4E342E" fill="#4E342E">
<path d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"/>
</g>
<g transform="translate(0 0.2) scale(0.009765625 0.009765625)" stroke="#4E342E" fill="#4E342E">
<text font-family="sans-serif" font-size="12" text-anchor="middle" x="0" y="15">my app</text>
</g>
</g>
<g transform="translate(1.9500000000000002 0.5)">
<g transform="scale(0.00078125 0.00078125) translate(-248 -256)" stroke="#455A64" fill="#455A64">
<path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/>
</g>
<g transform="translate(0 0.2) scale(0.009765625 0.009765625)" stroke="#455A64" fill="#455A64">
<text font-family="sans-serif" font-size="12" text-anchor="middle" x="0" y="15">world</text>
</g>
</g>
<g transform="translate(1.3 0.5) rotate(0)">
<g transform="scale(0.00078125 0.00078125) translate(-448 -256)" stroke="#333333" fill="#333333">
<path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h749.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"/>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

src/rendering.js
+13 -10
View File
@@ -238,19 +238,20 @@ module.exports = (options) => {
/** /**
* @param {string} text * @param {string} text
* @param {number} lineHeight * @param {number} lineHeight
* @param {number} x
* @param {string} anchor * @param {string} anchor
* @return {Object} * @return {Object}
*/ */
getSvgText: (text, lineHeight, anchor) => { getSvgText: (text, lineHeight, x, anchor) => {
text = text.trim(); text = text.trim();
if (!text.includes('\n')) if (!text.includes('\n'))
return {'_text': text}; return {'_text': text};
const list = []; const list = [];
text.split('\n').map(t => t.trim()).forEach((line,i) => { text.split('\n').map(t => t.trim()).forEach((line, i) => {
list.push({ list.push({
'_attributes': { '_attributes': {
'x': 0, 'x': x,
'dy': `${i*lineHeight}em`, 'dy': i === 0 ? '0' : `${lineHeight}em`,
'text-anchor': anchor 'text-anchor': anchor
}, },
'_text': line '_text': line
@@ -311,16 +312,18 @@ module.exports = (options) => {
break; break;
} }
const text = self.getSvgText(subE.text, subE['line-height'] || options['texts']['line-height'], anchor); const lineHeight = subE['line-height'] || options['texts']['line-height'];
const textHeight = text['tspan'] ? text['tspan'].length : 0; const text = self.getSvgText(subE.text, lineHeight, pos.x * fontSize / 2, anchor);
const textHeight = text['tspan'] ? text['tspan'].length - 1 : 0;
text['_attributes'] = { text['_attributes'] = {
'font-family': subE['font'] || options['texts']['font'], 'font-family': subE['font'] || options['texts']['font'],
'font-size': fontSize, 'font-size': fontSize,
'text-anchor': anchor, 'text-anchor': anchor,
'x': pos.x * fontSize, 'x': pos.x * fontSize / 2,
'y': (pos.y + 0.25) * fontSize - textHeight * fontSize / 2 'y': (pos.y + 0.25) * fontSize - (1 - pos.y) * textHeight * fontSize * lineHeight / 2
}; };
g['g'].push({ g['g'].push({
@@ -412,8 +415,8 @@ module.exports = (options) => {
}); });
return convert.js2xml(xml, { return convert.js2xml(xml, {
compact: true, compact: true,
spaces: options['beautify'] ? '\t' : 0 spaces: options['beautify'] ? 4 : 0
}); }).replace(/<\/tspan>(\s*)<tspan/gm, '<\/tspan><tspan'); //fix text rendering
}, },
/** /**