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

updated docs

Browse Source
This commit is contained in:
Klemek
2019-07-17 11:15:01 +02:00
parent a5da517317
commit 1bfdde5346
9 changed files with 1209 additions and 1468 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build_preview.js
+1 -1
View File
@@ -58,7 +58,7 @@ const data = {
from: 'node1',
to: 'node2',
color: '#333333',
bottom: 'hello'
bottom: '"hello"'
}
]
};
dist/fa-diagrams.js
Vendored
+133 -85
View File
@@ -8257,7 +8257,7 @@ const rendering = require('./rendering');
const self = {
/**
* @param {{options: Object|undefined, nodes: Object[]|undefined, links: Object[]|undefined}} data
* @param {{options: Object?, nodes: Object[]?, links: Object[]?}} data
* @returns {string}
*/
compute: (data) => {
@@ -8692,27 +8692,19 @@ try {
console.error('fa-diagrams: SVG resources could not be loaded: ' + err);
}
/**
* @typedef Node2
* @property {string} name
* @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
*/
/**
* @typedef Link2
* @property {string} from
* @property {string} to
* @property {string|undefined} type
* @property {Object|undefined} bottom
* @property {Object|undefined} top
* @typedef SubElement2
* @property {string|undefined} text
* @property {string|{path:string,width:number:height:number}|undefined} icon
* @property {string|undefined} color
* @property {string|undefined} font
* @property {string|undefined} font-size
* @property {string|undefined} font-style
* @property {number|undefined} margin
* @property {number|undefined} line-height
* @property {number|undefined} scale
*/
const SUB_DEF = {
'_': 'string',
'text': 'string',
@@ -8731,6 +8723,17 @@ const SUB_DEF = {
'scale': 'number'
};
/**
* @typedef Node2
* @property {string} name
* @property {number} x
* @property {number} y
* @property {string|{path:string,width:number:height:number}} icon
* @property {SubElement2|undefined} bottom
* @property {SubElement2|undefined} top
* @property {SubElement2|undefined} left
* @property {SubElement2|undefined} right
*/
const NODE_DEF = {
'name': '!string',
'icon': {
@@ -8749,6 +8752,16 @@ const NODE_DEF = {
'right': SUB_DEF
};
/**
* @typedef Link2
* @property {string} from
* @property {string} to
* @property {string|undefined} type
* @property {SubElement2|undefined} bottom
* @property {SubElement2|undefined} top
* @property {SubElement2|undefined} left
* @property {SubElement2|undefined} right
*/
const LINK_DEF = {
'from': '!string',
'to': '!string',
@@ -8912,7 +8925,7 @@ module.exports = (options) => {
* @param {number} lineHeight
* @param {number} x
* @param {string} anchor
* @return {Object}
* @return {Object} svg text
*/
getSvgText: (text, lineHeight, x, anchor) => {
text = text.trim();
@@ -8933,36 +8946,16 @@ module.exports = (options) => {
},
/**
* @param {Node2} node
* @param {Node2|Link2} element
* @param {string} side
* @param {SubElement2} subE
* @param {boolean?} reverse
* @param {boolean?} link
* @returns {Object} svg group
*/
renderNode: (node) => {
const icon = self.getIcon(node.icon);
if (!icon)
return null;
const scale = (node['scale'] || options['icons']['scale']) * DEFAULT_SCALE;
const g = {
'_attributes': {
'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`,
},
'g': [{
'_attributes': {
'transform': `scale(${scale / icon.height} ${scale / icon.height}) translate(${-icon.width / 2} ${-icon.height / 2})`,
'stroke': (node['color'] || options['icons']['color'] || undefined),
'fill': (node['color'] || options['icons']['color'] || undefined)
},
'path': {
'_attributes': {
'd': icon.path,
}
}
}]
};
['bottom', 'top', 'left', 'right'].forEach(side => {
const subE = node[side];
if (subE && subE.text) {
renderSubText: (element, side, subE, reverse, link) => {
const fontSize = subE['font-size'] || options['texts']['font-size'];
const margin = subE['margin'] || options['texts']['margin'];
const margin = (subE['margin'] || options['texts']['margin']) / (link ? 4 : 1);
let pos;
let anchor;
switch (side) {
@@ -8980,7 +8973,6 @@ module.exports = (options) => {
break;
case 'right':
pos = {x: 1, y: 0};
anchor = 'start';
break;
}
@@ -8989,30 +8981,63 @@ module.exports = (options) => {
const textHeight = text['tspan'] ? text['tspan'].length - 1 : 0;
text['_attributes'] = {
'font-family': subE['font'] || options['texts']['font'],
'font-size': fontSize,
'font-family': subE['font'],
'font-size': subE['font-size'],
'text-anchor': anchor,
'x': pos.x * fontSize / 2,
'y': (pos.y + 0.25) * fontSize - (1 - pos.y) * textHeight * fontSize * lineHeight / 2
};
g['g'].push({
return {
'_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)
'transform': `${reverse?'rotate(180) ':''}translate(${pos.x * margin} ${pos.y * margin}) scale(${1 / options['scale']} ${1 / options['scale']})`,
'fill': (subE['color'] || element['color'] || options['texts']['color'] || options[link ? 'links' : 'icons']['color'] || undefined),
},
'text': text
});
};
},
/**
* @param {Node2} node
* @return {Object} svg group
*/
renderNode: (node) => {
const groups = [];
const icon = self.getIcon(node.icon);
if (icon) {
const scale = (node['scale'] || options['icons']['scale']) * DEFAULT_SCALE;
groups.push({
'_attributes': {
'transform': `scale(${scale / icon.height} ${scale / icon.height}) translate(${-icon.width / 2} ${-icon.height / 2})`,
'fill': (node['color'] || options['icons']['color'] || undefined)
},
'path': {
'_attributes': {
'd': icon.path,
}
}
});
}
return g;
['bottom', 'top', 'left', 'right'].forEach(side => {
const subE = node[side];
if (subE && subE.text)
groups.push(self.renderSubText(node, side, subE));
});
return !groups.length ? null : {
'_attributes': {
'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`,
},
'g': groups
};
},
/**
* @param {Object<string,Node2>} nodes
* @param {Link2} link
* @return {Object} svg group
*/
renderLink: (nodes, link) => {
const src = nodes[link.from];
@@ -9022,8 +9047,12 @@ 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;
console.log(angle);
const groups = [];
const scale = (link['scale'] || options['links']['scale']) * DEFAULT_SCALE;
let size = link['size'] || options['links']['size'];
if (!size) {
@@ -9039,17 +9068,10 @@ module.exports = (options) => {
const path = self.getLinkPath(link.type, size);
if (!path)
return null;
return {
'_attributes': {
'transform': `translate(${posX} ${posY}) rotate(${angle})`
},
'g': {
if (path) {
groups.push({
'_attributes': {
'transform': `scale(${scale / 512} ${scale / 512}) translate(${(-256 * size)} ${-256})`,
'stroke': (link['color'] || options['links']['color'] || undefined),
'fill': (link['color'] || options['links']['color'] || undefined)
},
'path': {
@@ -9057,7 +9079,30 @@ module.exports = (options) => {
'd': path
}
}
});
}
const reverse = Math.abs(angle) > 90;
if (!reverse) {
link.top = link.top || link.left;
link.bottom = link.bottom || link.right;
} else {
link.top = link.top || link.right;
link.bottom = link.bottom || link.left;
}
['bottom', 'top'].forEach(side => {
const subE = link[side];
if (subE && subE.text)
groups.push(self.renderSubText(link, side, subE, reverse, true));
});
return !groups.length ? null : {
'_attributes': {
'transform': `translate(${posX} ${posY}) rotate(${angle})`
},
'g': groups
};
},
@@ -9065,7 +9110,7 @@ module.exports = (options) => {
* Convert xml-js data into correct svg xml string
* @param {Object} data
* @param {{w:number, h:number}} bounds
* @returns {string}
* @returns {string} SVG data
*/
toXML: (data, bounds) => {
const xml = {
@@ -9075,8 +9120,10 @@ module.exports = (options) => {
'viewBox': `0 0 ${bounds.w * options['h-spacing']} ${bounds.h}`,
'width': bounds.w * options['h-spacing'] * options['scale'] / DEFAULT_SCALE,
'height': bounds.h * options['scale'] / DEFAULT_SCALE,
'stroke': options['color'],
'fill': options['color']
'font-family': options['texts']['font'],
'font-size': options['texts']['font-size'],
'fill': options['color'],
'stroke-width': 0
}
}
};
@@ -9092,26 +9139,12 @@ module.exports = (options) => {
/**
* @param {Object<string,Node2>} nodes
* @param {Link2[]} links
* @returns {string} SVG data
*/
compute: (nodes, links) => {
const data = {'g': []};
Object.keys(nodes).forEach(key => {
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);
});
links.forEach((link, i) => {
const res = utils.isValid(link, LINK_DEF);
if (res)
@@ -9127,6 +9160,21 @@ module.exports = (options) => {
data['g'].push(group);
});
Object.keys(nodes).forEach(key => {
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);
});
const bounds = self.getBounds(nodes);
return self.toXML(data, bounds);
dist/fa-diagrams.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/fa-diagrams.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/sample.yml
+1 -1
View File
@@ -11,4 +11,4 @@ links:
- from: node1
to: node2
color: "#333333"
bottom: hello
bottom: '"hello"'
package-lock.json
Generated
+185 -498
View File
File diff suppressed because it is too large Load Diff
package.json
+3 -2
View File
@@ -38,12 +38,13 @@
]
},
"devDependencies": {
"uglify-es": "^3.3.9",
"browserify": "^16.3.0",
"coveralls": "^3.0.4",
"jest": "^24.8.0",
"jshint": "^2.10.2",
"node-svn-ultimate": "^1.2.0",
"rimraf": "^2.6.3"
"rimraf": "^2.6.3",
"uglify-es": "^3.3.9",
"yaml": "^1.6.0"
}
}
preview/links.svg
+2 -1
View File
@@ -1,4 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5" stroke="black" fill="black">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5"
font-family="Arial" font-size="15" fill="black" stroke-width="0">
<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"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

preview/sample.svg
+16 -12
View File
@@ -1,23 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="832" height="320" stroke="black" fill="black">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="832" height="320" font-family="Arial" font-size="15"
fill="black" stroke-width="0">
<g transform="translate(1.3 0.5) rotate(0)">
<g transform="scale(0.00078125 0.00078125) translate(-448 -256)" 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 transform="translate(0 0.05) scale(0.0078125 0.0078125)" fill="#333333">
<text text-anchor="middle" x="0" y="18.75">"hello"</text>
</g>
</g>
<g transform="translate(0.65 0.5)">
<g transform="scale(0.00078125 0.00078125) translate(-320 -256)" stroke="#4E342E" fill="#4E342E">
<g transform="scale(0.00078125 0.00078125) translate(-320 -256)" 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.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 transform="translate(0 0.2) scale(0.0078125 0.0078125)" fill="#4E342E">
<text 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">
<g transform="scale(0.00078125 0.00078125) translate(-248 -256)" 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.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)">
<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 transform="translate(0 0.2) scale(0.0078125 0.0078125)" fill="#455A64">
<text text-anchor="middle" x="0" y="18.75">world</text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB