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

Working demo with current features

Browse Source
This commit is contained in:
Klemek
2019-07-16 15:40:27 +02:00
parent 75162b8b79
commit d1c1e149df
14 changed files with 15356 additions and 6197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.jshintignore
+1
View File
@@ -1,3 +1,4 @@
/node_modules /node_modules
/build /build
/dist /dist
/docs
README.md
+4 -2
View File
@@ -5,6 +5,8 @@
# (WIP) fa-diagrams # (WIP) fa-diagrams
## SVG diagrams built from Font-Awesome icons ## SVG diagrams built from Font-Awesome icons
**[Demo](https://klemek.github.io/fa-diagrams)**
## RoadMap to v1 ## RoadMap to v1
* [x] Font-Awesome paths scrapping in build * [x] Font-Awesome paths scrapping in build
@@ -48,8 +50,8 @@
Get the scripts from this repository `dist` folder Get the scripts from this repository `dist` folder
```html ```html
<script src="fa-diagrams-data.min.js"></script> <script src="fa-diagrams-data.min.js"></script> <!-- 1.04 MB -->
<script src="fa-diagrams.min.js"></script> <script src="fa-diagrams.min.js"></script> <!-- 107.93 KB -->
``` ```
### CDN (soon) ### CDN (soon)
build_preview.js
+2
View File
@@ -65,4 +65,6 @@ const data = {
] ]
}; };
fs.writeFileSync('docs/sample.json', JSON.stringify(data), {encoding: 'utf-8'});
fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'}); fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'});
dist/fa-diagrams-data.js
Vendored
+1548 -1539
View File
File diff suppressed because one or more lines are too long
dist/fa-diagrams-data.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/fa-diagrams.js
Vendored
+9108 -9
View File
File diff suppressed because it is too large Load Diff
dist/fa-diagrams.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/fa-diagrams-data.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/index.html
+61 -1
View File
@@ -3,10 +3,70 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>fa-diagrams example</title> <title>fa-diagrams example</title>
<script src="jquery-3.4.1.min.js"></script>
<script src="fa-diagrams-data.min.js"></script> <script src="fa-diagrams-data.min.js"></script>
<script src="fa-diagrams.min.js"></script> <script src="fa-diagrams.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
background: none;
}
#left {
position: absolute;
top: 0;
left: 0;
width: calc(30% - 5px);
height: 100vh;
border-right: 5px solid #333;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100vh;
}
#input{
width:100%;
height:100vh;
padding:1em;
}
</style>
</head> </head>
<body> <body>
<h1 id="title">WIP</h1> <div id="left">
<textarea id="input"></textarea>
</div>
<div id="right"></div>
<script>
$.getJSON('sample.json',(data) => {
$('#input').val(JSON.stringify(data, null, 4)).trigger('paste');
});
$(document).ready(() => {
let timeout;
$('#input').on('change keyup paste', () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
try{
let data = JSON.parse($('#input').val());
$('#right').html(faDiagrams.compute(data));
}catch(err){
$('#right').html(`<h2>${err.replaceAll('\n','<br>')}</h2>`);
}
}, 500);
});
});
</script>
</body> </body>
</html> </html>
docs/jquery-3.4.1.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
docs/sample.json
+1
View File
@@ -0,0 +1 @@
{"options":{"rendering":{"icons":{"color":"#4E342E"}}},"nodes":[{"name":"node1","icon":"server"},{"name":"node2","icon":"globe","color":"#455A64"}],"links":[{"from":"node1","to":"node2","color":"#333333"}]}
preview/links.svg
+1 -2
View File
@@ -1,5 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5" stroke="black" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5" stroke="black" fill="black">
fill="black">
<g> <g>
<g transform="translate(256 150)"> <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"/> <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.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

preview/sample.svg
+1 -17
View File
@@ -1,17 +1 @@
<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" 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>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB