diff --git a/README.md b/README.md index 6c21647..8eb5953 100644 --- a/README.md +++ b/README.md @@ -95,29 +95,26 @@ node build.sh const faDiagrams = require('fa-diagrams'); const data = { - options: { - rendering:{ - icons:{ - color:'#4E342E' - } - } - }, nodes: [ { name: 'node1', - icon: 'server', + icon: 'laptop-code', + color: '#4E342E', + bottom: 'my app', }, { name: 'node2', icon: 'globe', - color:'#455A64', + color: '#455A64', + bottom: 'world' } ], links: [ { from: 'node1', to: 'node2', - color:'#333333', + color: '#333333', + bottom: 'hello' } ] }; diff --git a/build_preview.js b/build_preview.js index 300d003..d63d203 100644 --- a/build_preview.js +++ b/build_preview.js @@ -38,21 +38,12 @@ fs.writeFileSync(`preview/links.svg`, rendering.toXML({'g': g}, {w: 1536 * 2, h: const faDiagrams = require('./src/index'); const data = { - options: { - rendering: { - beautify: true, - icons: { - color: '#4E342E' - } - } - }, nodes: [ { name: 'node1', icon: 'laptop-code', - bottom: 'my\napp', - top:'my app', - left:'my\napp' + color: '#4E342E', + bottom: 'my app', }, { name: 'node2', diff --git a/docs/sample.json b/docs/sample.json index 8d90df1..a98f45c 100644 --- a/docs/sample.json +++ b/docs/sample.json @@ -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"}]} \ No newline at end of file +{ + "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" + } + ] +} \ No newline at end of file diff --git a/preview/links.svg b/preview/links.svg index 09faf0d..cb0f6ea 100644 --- a/preview/links.svg +++ b/preview/links.svg @@ -1,50 +1,50 @@ - - - - default - - - - - - line - - - - - - double - - - - - - split-double - - - - - - dashed - - - - - - dashed-line - - - - - - dashed-double - - - - - - dashed-split-double - - + + + + default + + + + + + line + + + + + + double + + + + + + split-double + + + + + + dashed + + + + + + dashed-line + + + + + + dashed-double + + + + + + dashed-split-double + + \ No newline at end of file diff --git a/preview/sample.svg b/preview/sample.svg index 8a71816..e7704f9 100644 --- a/preview/sample.svg +++ b/preview/sample.svg @@ -1 +1,23 @@ - \ No newline at end of file + + + + + + + my app + + + + + + + + world + + + + + + + + \ No newline at end of file diff --git a/src/rendering.js b/src/rendering.js index 2501514..06b499f 100644 --- a/src/rendering.js +++ b/src/rendering.js @@ -238,19 +238,20 @@ module.exports = (options) => { /** * @param {string} text * @param {number} lineHeight + * @param {number} x * @param {string} anchor * @return {Object} */ - getSvgText: (text, lineHeight, anchor) => { + getSvgText: (text, lineHeight, x, anchor) => { text = text.trim(); if (!text.includes('\n')) return {'_text': text}; const list = []; - text.split('\n').map(t => t.trim()).forEach((line,i) => { + text.split('\n').map(t => t.trim()).forEach((line, i) => { list.push({ '_attributes': { - 'x': 0, - 'dy': `${i*lineHeight}em`, + 'x': x, + 'dy': i === 0 ? '0' : `${lineHeight}em`, 'text-anchor': anchor }, '_text': line @@ -311,16 +312,18 @@ module.exports = (options) => { 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'] = { 'font-family': subE['font'] || options['texts']['font'], 'font-size': fontSize, 'text-anchor': anchor, - 'x': pos.x * fontSize, - 'y': (pos.y + 0.25) * fontSize - textHeight * fontSize / 2 + 'x': pos.x * fontSize / 2, + 'y': (pos.y + 0.25) * fontSize - (1 - pos.y) * textHeight * fontSize * lineHeight / 2 }; g['g'].push({ @@ -412,8 +415,8 @@ module.exports = (options) => { }); return convert.js2xml(xml, { compact: true, - spaces: options['beautify'] ? '\t' : 0 - }); + spaces: options['beautify'] ? 4 : 0 + }).replace(/<\/tspan>(\s*)