forked from KeanW/AcadZMachine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
nodemap.js
303 lines (250 loc) · 8.2 KB
/
nodemap.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
// Global state
var cy;
var layOpts;
var curNode = null;
var curX = 100;
var curY = 100;
var incX = 100;
var incY = 100;
// Shaping layer extension
function sendGraphObjects(jsonArgs) {
var jsonResponse =
exec(
JSON.stringify({
functionName: 'CreateGraph',
invokeAsCommand: false,
functionParams: jsonArgs
})
);
var jsonObj = JSON.parse(jsonResponse);
if (jsonObj.retCode !== Acad.ErrorStatus.eJsOk) {
throw Error(jsonObj.retErrorString);
}
return jsonObj.result;
}
// Our two callbacks will be registered on page load
function init() {
registerCallback("setloc", setLocation);
registerCallback("getgraph", getGraph);
}
// The callbacks themselves
function getGraph(args) {
var ns =
cy.nodes().map(
function (e) {
var o = {};
o.data = e.data();
o.pos = e.position();
return o;
});
var es = cy.edges().map(function (e) { return e.data(); });
sendGraphObjects({ nodes: ns, edges: es });
}
function setLocation(args) {
var oargs = JSON.parse(args);
// Check whether the specified target is already in the graph
var el = cy.elements("#" + oargs.id);
var added = false;
if (oargs.id !== null && curNode !== oargs.id) {
// If the node isn't in the graph, add it and highlight it
if (el.length == 0) {
// Set the position based on the current node
// (which may have been moved manually)
if (curNode != null) {
var cel = cy.elements("#" + curNode);
if (cel.length > 0) {
pos = cel[0].position();
if (pos) {
curX = pos.x;
curY = pos.y;
}
}
}
// If we have a recognised direction, offset the new node position
// spatially from the previous one
switch (oargs.dir) {
case "N":
case "NORTH":
case "U":
case "UP":
curY -= incY;
break;
case "S":
case "SOUTH":
case "D":
case "DOWN":
curY += incY;
break;
case "E":
case "EAST":
curX += incX;
break;
case "W":
case "WEST":
curX -= incX;
break;
case "NE":
case "NORTHEAST":
curX += incX;
curY -= incY;
break;
case "NW":
case "NORTHWEST":
curX -= incX;
curY -= incY;
break;
case "SE":
case "SOUTHEAST":
curX += incX;
curY += incY;
break;
case "SW":
case "SOUTHWEST":
curX -= incX;
curY += incY;
break;
default:
}
// Add the node at the specified location and highlight it
var node =
cy.add([
{ group: "nodes", data: oargs, position: { x: curX, y: curY } }
]);
highlightNode(node);
added = true;
}
else {
// Otherwise - if the node exists in the graph - then highlight it
// and get its position as the current one
highlightNode(el[0]);
pos = el[0].position();
if (pos) {
curX = pos.x;
curY = pos.y;
}
}
// Now we know we have our node in the graph, if we have a previous one,
// make sure there's an edge connecting them
if (curNode != null) {
// Check whether the edge exists
var edId = curNode + "-" + oargs.id;
var ed = cy.elements("#" + edId);
if (ed.length == 0) {
// If not then add it to the graph
cy.add([
{
group: "edges",
data:
{
id: edId, source: curNode, target: oargs.id, name: oargs.dir,
dirs: [oargs.dir]
}
}
]);
}
else {
// If it exists, make sure the direction is added to the list
// of directions and to the edge's label (the name will have the
// directions in the order they were found... we could also sort
// them alphabetically (or whatever) with a bit more work)
var e = ed[0];
var d = e.data();
if (d.dirs.indexOf(oargs.dir) < 0) {
d.dirs.push(oargs.dir);
e.data("name", d.name + "," + oargs.dir);
}
}
}
// We have a new current node
curNode = oargs.id;
}
// Update the layout if a node has been added
// (no need to do this when an edge has been added)
if (added) {
cy.layout(layOpts);
}
}
// Helper function to highlight a node via CSS
function highlightNode(node) {
cy.nodes('*').removeClass('highlighted');
node.addClass('highlighted');
}
$(function () { // on DOM ready
layOpts = {
name: 'cola',
animate: true, // whether to show the layout as it's running
refresh: 1, // number of ticks per frame; higher is faster but more jerky
maxSimulationTime: 4000, // max length in ms to run the layout
ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
fit: true, // on every layout reposition of nodes, fit the viewport
padding: 30, // padding around the simulation
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
// layout event callbacks
ready: function () { }, // on layoutready
stop: function () { }, // on layoutstop
// positioning options
randomize: true, // use random node positions at beginning of layout
avoidOverlap: true, // if true, prevents overlap of node bounding boxes
handleDisconnected: true, // if true, avoids disconnected components from overlapping
nodeSpacing: function (node) { return 10; }, // extra spacing around nodes
flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
// different methods of specifying edge length
// each can be a constant numerical value or a function like `function( edge ){ return 2; }`
edgeLength: undefined, // sets edge length directly in simulation
edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
edgeJaccardLength: undefined, // jaccard edge length in simulation
// iterations of cola algorithm; uses default values on undefined
unconstrIter: undefined, // unconstrained initial layout iterations
userConstIter: undefined, // initial layout iterations with user-specified constraints
allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
// infinite layout options
infinite: false // overrides all other options for a forces-all-the-time mode
}
cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector('edge')
.css({
'content': 'data(name)',
'color': '#888',
'target-arrow-shape': 'triangle',
'width': 4,
'line-color': '#ddd',
'target-arrow-color': '#ddd'
})
.selector('.highlighted')
.css({
'background-color': '#f00',
'line-color': '#f00',
'target-arrow-color': '#f00',
'transition-property':
'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: { nodes: [], edges: [] },
layout: layOpts
});
}); // on DOM ready