Skip to content

Commit 8f2218e

Browse files
anwerjanwerj
committed
Before Imaging
1 parent 31248d9 commit 8f2218e

File tree

7 files changed

+191
-134
lines changed

7 files changed

+191
-134
lines changed

‎README.md

-25
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,2 @@
11
# unison
22

3-
### Nodes
4-
Nodes are the participants for unison
5-
6-
node.id = Unique Identifier for a node
7-
node.label = Display text for a node
8-
node.icon.type = Type for a node icon default,fontawesome
9-
node.icon.path = for fontawesome shoudl the id
10-
11-
### Edges
12-
Nodes talks to each other via a vertice.
13-
edge.id = Unique Identifier for the edge
14-
edge.label = Display text for a edge
15-
edge.from.id = node.id of the from
16-
edge.from.* = Overide the properties of from node
17-
edge.to.id = node.id of the to
18-
edge.to.* = Overide the properties of from node
19-
20-
### Options
21-
Options for the flow unison, options can be overridden by format options
22-
23-
### Format
24-
Options to override the basic flow for VisJs, D3js or Sequence Diagram.
25-
visjs = VisJs options
26-
d3js = D3js options
27-
sequence = Sequence diagram options

‎assets/unison.css

+25-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
html,
22
body,
33
#mynetwork {
4+
font-family: "verdana";
45
margin: 0px;
56
padding: 0px;
67
}
@@ -10,41 +11,58 @@ body,
1011
left: 0px;
1112
top: 0px;
1213
bottom: 0px;
13-
right: 25%;
14+
right: 34%;
1415
min-height: 100vh;
1516
border-right: 1px solid lightgray;
1617
background: white;
1718
}
1819

1920
#text {
2021
position: absolute;
21-
padding: 1em 0 1em 1em;
2222
top: 0;
2323
right: 0;
24-
width: 25%;
24+
width: 34%;
2525
z-index: 1;
2626
border-left: 1px solid lightgray;
2727
background: whitesmoke;
2828
height: 100vh;
2929
overflow: scroll;
30+
background: #2d2d2d;
31+
color: whitesmoke;
32+
}
33+
#text #options{
34+
padding: 1em;
3035
}
3136
#text>#editor {
32-
margin-top: 20px;
3337
width: 100%;
34-
max-height: 70vh;
35-
min-height: 80%;
38+
max-height: 86vh;
39+
min-height: 86vh;
3640
font-size: 14px;
3741
}
3842
#text>#json {
43+
display: none;
3944
margin-top: 20px;
4045
height: 20vh;
4146
min-width: 100%;
4247
border: none;
4348
font-family: monospace;
4449
font-size: 14px;
45-
padding: 6px;
50+
padding: 6px 6px 6px 35px;
51+
background: #2d2d2d;
52+
color: #f07679;
4653
}
4754

4855
#title {
4956
margin-bottom: 5em;
5057
}
58+
#text select,
59+
#text button,
60+
#text option {
61+
color: #fffdfd;
62+
background: #766969;
63+
border: none;
64+
border-radius: 6px;
65+
padding: 3px 8px;
66+
margin: 0 2px 5px 0;
67+
font-size: 11px;
68+
}

‎examples/complex_nodes.yaml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
nodes:
3+
node1: {}
4+
node2: {label: NodeTwo, fontawesome: trash}
5+
node3: {}
6+
node4: {label: NodeFour}
7+
8+
edges:
9+
- to: {$ref: node2, id: node2-1, label: The very good level with no issues}
10+
from: node1
11+
12+
- to: { $ref: node1, id: node1-1, label : Ref of node1, img: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIGhlaWdodD0iMTAwcHgiIHdpZHRoPSIxMDBweCI+CjxnPgoJPHBhdGggZD0iTTI4LjEsMzYuNmM0LjYsMS45LDEyLjIsMS42LDIwLjksMS4xYzguOS0wLjQsMTktMC45LDI4LjksMC45YzYuMywxLjIsMTEuOSwzLjEsMTYuOCw2Yy0xLjUtMTIuMi03LjktMjMuNy0xOC42LTMxLjMgICBjLTQuOS0wLjItOS45LDAuMy0xNC44LDEuNEM0Ny44LDE3LjksMzYuMiwyNS42LDI4LjEsMzYuNnoiLz4KCTxwYXRoIGQ9Ik03MC4zLDkuOEM1Ny41LDMuNCw0Mi44LDMuNiwzMC41LDkuNWMtMyw2LTguNCwxOS42LTUuMywyNC45YzguNi0xMS43LDIwLjktMTkuOCwzNS4yLTIzLjFDNjMuNywxMC41LDY3LDEwLDcwLjMsOS44eiIvPgoJPHBhdGggZD0iTTE2LjUsNTEuM2MwLjYtMS43LDEuMi0zLjQsMi01LjFjLTMuOC0zLjQtNy41LTctMTEtMTAuOGMtMi4xLDYuMS0yLjgsMTIuNS0yLjMsMTguN0M5LjYsNTEuMSwxMy40LDUwLjIsMTYuNSw1MS4zeiIvPgoJPHBhdGggZD0iTTksMzEuNmMzLjUsMy45LDcuMiw3LjYsMTEuMSwxMS4xYzAuOC0xLjYsMS43LTMuMSwyLjYtNC42YzAuMS0wLjIsMC4zLTAuNCwwLjQtMC42Yy0yLjktMy4zLTMuMS05LjItMC42LTE3LjYgICBjMC44LTIuNywxLjgtNS4zLDIuNy03LjRjLTUuMiwzLjQtOS44LDgtMTMuMywxMy43QzEwLjgsMjcuOSw5LjgsMjkuNyw5LDMxLjZ6Ii8+Cgk8cGF0aCBkPSJNMTUuNCw1NC43Yy0yLjYtMS02LjEsMC43LTkuNywzLjRjMS4yLDYuNiwzLjksMTMsOCwxOC41QzEzLDY5LjMsMTMuNSw2MS44LDE1LjQsNTQuN3oiLz4KCTxwYXRoIGQ9Ik0zOS44LDU3LjZDNTQuMyw2Ni43LDcwLDczLDg2LjUsNzYuNGMwLjYtMC44LDEuMS0xLjYsMS43LTIuNWM0LjgtNy43LDctMTYuMyw2LjgtMjQuOGMtMTMuOC05LjMtMzEuMy04LjQtNDUuOC03LjcgICBjLTkuNSwwLjUtMTcuOCwwLjktMjMuMi0xLjdjLTAuMSwwLjEtMC4yLDAuMy0wLjMsMC40Yy0xLDEuNy0yLDMuNC0yLjksNS4xQzI4LjIsNDkuNywzMy44LDUzLjksMzkuOCw1Ny42eiIvPgoJPHBhdGggZD0iTTI2LjIsODguMmMzLjMsMiw2LjcsMy42LDEwLjIsNC43Yy0zLjUtNi4yLTYuMy0xMi42LTguOC0xOC41Yy0zLjEtNy4yLTUuOC0xMy41LTktMTcuMmMtMS45LDgtMiwxNi40LTAuMywyNC43ICAgQzIwLjYsODQuMiwyMy4yLDg2LjMsMjYuMiw4OC4yeiIvPgoJPHBhdGggZD0iTTMwLjksNzNjMi45LDYuOCw2LjEsMTQuNCwxMC41LDIxLjJjMTUuNiwzLDMyLTIuMyw0Mi42LTE0LjZDNjcuNyw3Niw1Mi4yLDY5LjYsMzcuOSw2MC43QzMyLDU3LDI2LjUsNTMsMjEuMyw0OC42ICAgYy0wLjYsMS41LTEuMiwzLTEuNyw0LjZDMjQuMSw1Ny4xLDI3LjMsNjQuNSwzMC45LDczeiIvPgo8L2c+Cjwvc3ZnPg=="}
13+
from: node2-1
14+
value: 0
15+
16+
- to: node3
17+
from: node2-1
18+
value: 1
19+
20+
- to: node4
21+
22+
- to: node4
23+
from: node1-1

‎index.html

+65-24
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<title>Unison, unifying JSON for artisans</title>
44
<link rel="stylesheet" href="assets/unison.css">
55
<link rel="icon" href="/favicon.png">
6+
67
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
78
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.13.1/js-yaml.min.js"></script>
89
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
@@ -14,12 +15,14 @@
1415
</head>
1516
<body>
1617
<div id="text">
17-
Unison, unifying JSON for artisans. <br>
18-
<select id="urls"></select><br>
19-
<button id="refresh">Refresh(meta+R)</button>
20-
<button id="redraw">Redraw(meta+S)</button>
18+
<div id="options">
19+
Unison, <small>unifying JSON for artisans. </small><br><br>
20+
<select id="urls"></select><br>
21+
<button id="refresh">Refresh</button>
22+
<button id="redraw">Redraw</button>
23+
</div>
2124
<div id="editor"></div>
22-
<textarea id="json" class="prettyprint"></textarea>
25+
<pre id="json" class="prettyprint"></pre>
2326
</div>
2427

2528
<div id="mynetwork"></div>
@@ -29,26 +32,48 @@
2932
$(document).ready(function () {
3033
var editor;
3134
var network;
35+
var localKey;
3236
var _ = {
3337
refreshing : false,
3438
script : null,
3539
};
3640

3741
var run = function () {
3842
var raw = editor.getValue().trim();
39-
console.log(raw);
43+
44+
localStorage.setItem('current:' + localKey, raw);
4045

4146
var config = jsyaml.load(raw);
4247

43-
$('#text #json').val(JSON.stringify(config, null, 2));
48+
$('#text #json').text(JSON.stringify(config, null, 2));
4449

4550
// Create display module
4651
var module = VisNetworkModule(config);
4752

4853
network = new Processor(module).load(config).run();
4954
}
5055

51-
var refresh = function(force)
56+
var loadEditor = function (data) {
57+
58+
$('#editor').html(data);
59+
60+
// pass options to ace.edit
61+
editor = ace.edit('editor', {
62+
theme: 'ace/theme/tomorrow_night_eighties',
63+
mode: "ace/mode/yaml",
64+
selectionStyle: "text",
65+
tabSize : 2,
66+
useSoftTabs : true,
67+
keyboardHandler : 'vim',
68+
fontSize: '13px',
69+
});
70+
editor.container.style.lineHeight = 2
71+
editor.renderer.updateFontSize()
72+
73+
run();
74+
}
75+
76+
var refresh = function(remote, force)
5277
{
5378
if ('object' === typeof network)
5479
{
@@ -59,6 +84,19 @@
5984
editor.destroy();
6085
}
6186

87+
localKey = $('#urls').val();
88+
var local = localStorage.getItem('current:' + localKey);
89+
90+
if ((typeof local === 'string'))
91+
{
92+
if (remote === false)
93+
{
94+
loadEditor(local);
95+
96+
return;
97+
}
98+
}
99+
62100
var url = $('#urls').val() + '?' + (force === true ? (new Date().getTime()) : '')
63101

64102
var raw = null;
@@ -74,18 +112,7 @@
74112
data = JSON.stringify(data);
75113
}
76114

77-
$('#editor').html(data);
78-
79-
// pass options to ace.edit
80-
editor = ace.edit('editor', {
81-
mode: "ace/mode/yaml",
82-
selectionStyle: "text",
83-
tabSize : 2,
84-
useSoftTabs : true,
85-
keyboardHandler : 'vim'
86-
});
87-
88-
run();
115+
loadEditor(data);
89116
});
90117
}
91118

@@ -97,6 +124,7 @@
97124
new URL('examples/complex_upi.json5', location).toString(),
98125
new URL('examples/complex_members.yaml', location).toString(),
99126
new URL('examples/complex_upi.yaml', location).toString(),
127+
new URL('examples/complex_nodes.yaml', location).toString(),
100128
];
101129
var index = (urls.length - 1)
102130

@@ -119,7 +147,11 @@
119147
{
120148
return;
121149
}
122-
refresh(true);
150+
if (confirm('Are you sure you want to refresh, it will remove any local changes'))
151+
{
152+
// Remote and fresh only
153+
refresh(true, true);
154+
}
123155
});
124156
$('#redraw').click(function () {
125157
run();
@@ -128,6 +160,13 @@
128160
$(window).bind('keydown', function(event) {
129161
if (event.ctrlKey || event.metaKey) {
130162
var letter = String.fromCharCode(event.which).toLowerCase();
163+
164+
switch (event.which) {
165+
case 13:
166+
// Enter is considered, save
167+
letter = 's';
168+
}
169+
131170
switch (letter) {
132171
case 's':
133172
event.preventDefault();
@@ -137,17 +176,19 @@
137176
if (! event.shiftKey)
138177
{
139178
event.preventDefault();
140-
refresh(true);
179+
// Local first else fresh
180+
refresh(false, true);
141181
}
142182
break;
143183
default:
144-
console.log('Key pressed', letter);
184+
console.debug('Key pressed', letter, event.which);
145185
}
146186
}
147187
});
148188

149189
setUrl();
150-
refresh(true);
190+
// Local first else cached
191+
refresh(false, false);
151192
});
152193

153194
</script>

‎src/processor.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ var Processor = function (module) {
8686
*/
8787
node : function (i, d) {
8888

89-
console.log(i, d);
89+
console.debug(i, d);
9090
var draft = {
9191
_ : 'node',
9292
ref : d.id && (d.ref || d),
@@ -102,13 +102,14 @@ var Processor = function (module) {
102102
},
103103
target : new links(i.t),
104104
source : new links(i.s),
105+
img : i.img || null
105106
};
106107

107108
return draft;
108109
},
109110
edge : function (i, d) {
110111

111-
console.log(i, d);
112+
console.debug(i, d);
112113
var draft = {
113114
_ : 'edge',
114115
id : i.id,
@@ -316,7 +317,7 @@ var Processor = function (module) {
316317

317318
// Set Edge as node.to to edge.from
318319

319-
console.log(draft.from);
320+
console.debug(draft.from);
320321
// from.to[(new String(draft.value || draft.id)).toString()] = draft;
321322
from.target.push(draft, draft.value || draft.id);
322323

@@ -337,7 +338,7 @@ var Processor = function (module) {
337338
edges.push(draft);
338339
});
339340

340-
console.log(nodes._, edges._);
341+
console.debug(nodes._, edges._);
341342

342343
return this;
343344
},

0 commit comments

Comments
 (0)