working nodes sub-texts
This commit is contained in:
Klemek
@@ -180,11 +180,11 @@ Will produce the following diagram:
|
||||
| `rendering.links.scale` | 1 | default scaling of links | in link |
|
||||
| `rendering.links.color` | `''` | color of all links (might be redefined in link definition) | in link |
|
||||
| `rendering.links.size` | 0 | forced size/length of the links (0 means it will be computed from the distance between the nodes) | in link |
|
||||
| `rendering.texts.font` | `'sans-serif'` | font family of the texts (might be redefined in sub-elements definition) | in text |
|
||||
| `rendering.texts.font-size` | 12 | font size of the texts | in sub-text |
|
||||
| `rendering.texts.font` | `'Arial'` | font family of the texts (might be redefined in sub-elements definition) | in text |
|
||||
| `rendering.texts.font-size` | 15 | font size of the texts | in sub-text |
|
||||
| `rendering.texts.font-style` | `'normal'` | font style of the texts (see [Font styles](#font-styles)) | in sub-text |
|
||||
| `rendering.texts.color` | `''` | color of all texts | in sub-text |
|
||||
| `rendering.texts.margin` | 0.35 | margin between texts and elements | in sub-text |
|
||||
| `rendering.texts.margin` | 0.2 | margin between texts and elements | in sub-text |
|
||||
| `rendering.texts.line-height` | 1.2 | height of each line in font size | in sub-text |
|
||||
|
||||
### `nodes`
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+2
-2
@@ -48,11 +48,11 @@
|
||||
</div>
|
||||
<div id="right"></div>
|
||||
<script>
|
||||
$(document).ready(() => {
|
||||
$.getJSON('sample.json', (data) => {
|
||||
$('#input').val(JSON.stringify(data, null, 4)).trigger('paste');
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
let timeout;
|
||||
$('#input').on('change keyup paste', () => {
|
||||
clearTimeout(timeout);
|
||||
@@ -61,7 +61,7 @@
|
||||
let data = JSON.parse($('#input').val());
|
||||
$('#right').html(faDiagrams.compute(data));
|
||||
}catch(err){
|
||||
$('#right').html(`<h2>${err.replaceAll('\n','<br>')}</h2>`);
|
||||
$('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);
|
||||
}
|
||||
|
||||
}, 500);
|
||||
|
||||
+5
-5
@@ -1,18 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="1664" height="640" stroke="black" fill="black">
|
||||
<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(-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 transform="translate(0 0.2) scale(0.0078125 0.0078125)" stroke="#4E342E" fill="#4E342E">
|
||||
<text font-family="Arial" font-size="15" text-anchor="middle" x="0" y="18.75">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 transform="translate(0 0.2) scale(0.0078125 0.0078125)" stroke="#455A64" fill="#455A64">
|
||||
<text font-family="Arial" font-size="15" text-anchor="middle" x="0" y="18.75">world</text>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(1.3 0.5) rotate(0)">
|
||||
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
+4
-6
@@ -90,7 +90,7 @@ const LINK_DEF = {
|
||||
|
||||
const DEFAULT_OPTIONS = {
|
||||
'beautify': false,
|
||||
'scale': 256,
|
||||
'scale': 128,
|
||||
'h-spacing': 1.3,
|
||||
'color': 'black',
|
||||
'icons': {
|
||||
@@ -103,8 +103,8 @@ const DEFAULT_OPTIONS = {
|
||||
'size': 0
|
||||
},
|
||||
'texts': {
|
||||
'font': 'sans-serif',
|
||||
'font-size': 12,
|
||||
'font': 'Arial',
|
||||
'font-size': 15,
|
||||
'font-style': 'normal',
|
||||
'color': '',
|
||||
'margin': 0.2,
|
||||
@@ -313,9 +313,7 @@ module.exports = (options) => {
|
||||
}
|
||||
|
||||
const lineHeight = subE['line-height'] || options['texts']['line-height'];
|
||||
|
||||
const text = self.getSvgText(subE.text, lineHeight, pos.x * fontSize / 2, anchor);
|
||||
|
||||
const textHeight = text['tspan'] ? text['tspan'].length - 1 : 0;
|
||||
|
||||
text['_attributes'] = {
|
||||
@@ -328,7 +326,7 @@ module.exports = (options) => {
|
||||
|
||||
g['g'].push({
|
||||
'_attributes': {
|
||||
'transform': `translate(${pos.x * margin} ${pos.y * margin}) scale(${1 / (options['scale'] * DEFAULT_SCALE)} ${1 / (options['scale'] * DEFAULT_SCALE)})`,
|
||||
'transform': `translate(${pos.x * margin} ${pos.y * margin}) scale(${1 / options['scale']} ${1 / options['scale']})`,
|
||||
'stroke': (subE['color'] || node['color'] || options['texts']['color'] || options['icons']['color'] || undefined),
|
||||
'fill': (subE['color'] || node['color'] || options['texts']['color'] || options['icons']['color'] || undefined)
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user