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

[skip CI] updated docs to use YAML

Browse Source
This commit is contained in:
Klemek
2019-07-16 19:48:13 +02:00
parent 244dc7af6b
commit d80af61e7a
7 changed files with 974 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build_preview.js
+2 -1
View File
@@ -1,4 +1,5 @@
const fs = require('fs');
const YAML = require('yaml');
const rendering = require('./src/rendering')({
'scale': 0.05,
@@ -62,6 +63,6 @@ const data = {
]
};
fs.writeFileSync('docs/sample.json', JSON.stringify(data, null, 4), {encoding: 'utf-8'});
fs.writeFileSync('docs/sample.yml', YAML.stringify(data, null, 4), {encoding: 'utf-8'});
fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'});
dist/fa-diagrams.js
Vendored
+107 -9
View File
@@ -8698,6 +8698,10 @@ try {
* @property {number} x
* @property {number} y
* @property {string|{path:string,width:number:height:number}} icon
* @property {Object|undefined} bottom
* @property {Object|undefined} top
* @property {Object|undefined} left
* @property {Object|undefined} right
*/
/**
@@ -8705,6 +8709,8 @@ try {
* @property {string} from
* @property {string} to
* @property {string|undefined} type
* @property {Object|undefined} bottom
* @property {Object|undefined} top
*/
const SUB_DEF = {
@@ -8720,7 +8726,9 @@ const SUB_DEF = {
'font': 'string',
'font-size': 'number',
'font-style': 'string',
'scale': 'number',
'margin': 'number',
'line-height': 'number',
'scale': 'number'
};
const NODE_DEF = {
@@ -8767,10 +8775,12 @@ const DEFAULT_OPTIONS = {
'size': 0
},
'texts': {
'font': 'sans-serif',
'font-size': '20',
'font': 'Arial',
'font-size': 15,
'font-style': 'normal',
'color': ''
'color': '',
'margin': 0.2,
'line-height': 1.2
}
};
@@ -8897,6 +8907,31 @@ module.exports = (options) => {
return {w: maxX + 1, h: maxY + 1};
},
/**
* @param {string} text
* @param {number} lineHeight
* @param {number} x
* @param {string} anchor
* @return {Object}
*/
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) => {
list.push({
'_attributes': {
'x': x,
'dy': i === 0 ? '0' : `${lineHeight}em`,
'text-anchor': anchor
},
'_text': line
});
});
return {'tspan': list};
},
/**
* @param {Node2} node
*/
@@ -8905,11 +8940,11 @@ module.exports = (options) => {
if (!icon)
return null;
const scale = (node['scale'] || options['icons']['scale']) * DEFAULT_SCALE;
return {
const g = {
'_attributes': {
'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`,
},
'g': {
'g': [{
'_attributes': {
'transform': `scale(${scale / icon.height} ${scale / icon.height}) translate(${-icon.width / 2} ${-icon.height / 2})`,
'stroke': (node['color'] || options['icons']['color'] || undefined),
@@ -8920,8 +8955,59 @@ module.exports = (options) => {
'd': icon.path,
}
}
}
}]
};
['bottom', 'top', 'left', 'right'].forEach(side => {
const subE = node[side];
if (subE && subE.text) {
const fontSize = subE['font-size'] || options['texts']['font-size'];
const margin = subE['margin'] || options['texts']['margin'];
let pos;
let anchor;
switch (side) {
case 'bottom':
pos = {x: 0, y: 1};
anchor = 'middle';
break;
case 'top':
pos = {x: 0, y: -1};
anchor = 'middle';
break;
case 'left':
pos = {x: -1, y: 0};
anchor = 'end';
break;
case 'right':
pos = {x: 1, y: 0};
anchor = 'start';
break;
}
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'] = {
'font-family': subE['font'] || options['texts']['font'],
'font-size': fontSize,
'text-anchor': anchor,
'x': pos.x * fontSize / 2,
'y': (pos.y + 0.25) * fontSize - (1 - pos.y) * textHeight * fontSize * lineHeight / 2
};
g['g'].push({
'_attributes': {
'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)
},
'text': text
});
}
});
return g;
},
/**
@@ -8999,8 +9085,8 @@ module.exports = (options) => {
});
return convert.js2xml(xml, {
compact: true,
spaces: options['beautify'] ? '\t' : 0
});
spaces: options['beautify'] ? 4 : 0
}).replace(/<\/tspan>(\s*)<tspan/gm, '<\/tspan><tspan'); //fix text rendering
},
/**
@@ -9015,6 +9101,12 @@ module.exports = (options) => {
const res = utils.isValid(nodes[key], NODE_DEF);
if (res)
throw `Node '${key}' is invalid at key '${res}'`;
['bottom', 'top', 'left', 'right'].forEach(sub => {
if (typeof nodes[key][sub] === 'string')
nodes[key][sub] = {text: nodes[key][sub]};
});
const group = self.renderNode(nodes[key]);
if (group)
data['g'].push(group);
@@ -9024,6 +9116,12 @@ module.exports = (options) => {
const res = utils.isValid(link, LINK_DEF);
if (res)
throw `Link ${i} (${link.from}->${link.to}) is invalid at key '${res}'`;
['bottom', 'top'].forEach(sub => {
if (typeof link[sub] === 'string')
link[sub] = {text: link[sub]};
});
const group = self.renderLink(nodes, link);
if (group)
data['g'].push(group);
dist/fa-diagrams.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/index.html
+5 -4
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>fa-diagrams example</title>
<script src="jquery-3.4.1.min.js"></script>
<script src="yaml.min.js"></script>
<script src="fa-diagrams-data.min.js"></script>
<script src="fa-diagrams.min.js"></script>
<style>
@@ -44,13 +45,13 @@
</head>
<body>
<div id="left">
<textarea id="input"></textarea>
<textarea id="input" autocomplete="false" spellcheck="false"></textarea>
</div>
<div id="right"></div>
<script>
$(document).ready(() => {
$.getJSON('sample.json', (data) => {
$('#input').val(JSON.stringify(data, null, 4)).trigger('paste');
$.getJSON('sample.yml', (data) => {
$('#input').val(YAML.stringify(data, null, 4)).trigger('paste');
});
let timeout;
@@ -58,7 +59,7 @@
clearTimeout(timeout);
timeout = setTimeout(() => {
try{
let data = JSON.parse($('#input').val());
let data = YAML.parse($('#input').val());
$('#right').html(faDiagrams.compute(data));
}catch(err){
$('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);
docs/sample.json
-24
View File
@@ -1,24 +0,0 @@
{
"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"
}
]
}
docs/sample.yml
+14
View File
@@ -0,0 +1,14 @@
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
docs/yaml.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long