Skip to content

Commit 304d116

Browse files
64json64json
committed
allow multiple tracers
1 parent 90ae4ab commit 304d116

10 files changed

Lines changed: 223 additions & 121 deletions

‎css/stylesheet.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ section {
150150
left: 0;
151151
right: 0;
152152
overflow: hidden;
153+
border: none;
153154
}
154155

155156
.tab_container {

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ <h3>Reference</h3>
107107
<script src="js/sigma/sigma.min.js"></script>
108108
<script src="js/sigma/plugins/sigma.plugins.dragNodes.min.js"></script>
109109
<script src="js/ace/ace.js"></script>
110+
<script src="js/module/tracer_manager.js"></script>
110111
<script src="js/module/tracer.js"></script>
111112
<script src="js/module/directed_graph.js"></script>
112113
<script src="js/module/undirected_graph.js"></script>

‎js/module/array2d.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
1212
constructor: Array2DTracer,
1313
init: function () {
1414
$table = $('<div class="mtbl-table">');
15-
$module_container.append($table);
15+
this.$container.append($table);
1616
},
1717
resize: function () {
1818
Tracer.prototype.resize.call(this);

‎js/module/directed_graph.js‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
var s = null, graph = null, sigmaCanvas = null;
2-
31
function DirectedGraphTracer(module) {
42
if (Tracer.call(this, module || DirectedGraphTracer)) {
53
DirectedGraphTracer.prototype.init.call(this);
@@ -13,14 +11,9 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
1311
init: function () {
1412
var tracer = this;
1513

16-
if (sigmaCanvas == null) {
17-
sigmaCanvas = $.extend(true, {}, sigma.canvas);
18-
} else {
19-
sigma.canvas = $.extend(true, {}, sigmaCanvas);
20-
}
21-
s = new sigma({
14+
this.s = this.capsule.s = new sigma({
2215
renderer: {
23-
container: $module_container[0],
16+
container: this.$container[0],
2417
type: 'canvas'
2518
},
2619
settings: {
@@ -36,25 +29,26 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
3629
minNodeSize: .5,
3730
maxNodeSize: 12,
3831
labelSize: 'proportional',
39-
labelSizeRatio: 1.3
32+
labelSizeRatio: 1.3,
33+
funcLabelsDef: function (node, context, settings) {
34+
tracer.drawLabel(node, context, settings);
35+
},
36+
funcHoversDef: function (node, context, settings, next) {
37+
tracer.drawOnHover(node, context, settings, next);
38+
},
39+
funcEdgesArrow: function (edge, source, target, context, settings) {
40+
var color = tracer.getColor(edge, source, target, settings);
41+
tracer.drawArrow(edge, source, target, color, context, settings);
42+
}
4043
}
4144
});
42-
graph = s.graph;
43-
sigma.canvas.labels.def = function (node, context, settings) {
44-
tracer.drawLabel(node, context, settings);
45-
};
46-
sigma.canvas.hovers.def = function (node, context, settings, next) {
47-
tracer.drawOnHover(node, context, settings, next);
48-
};
49-
sigma.canvas.edges.arrow = function (edge, source, target, context, settings) {
50-
var color = tracer.getColor(edge, source, target, settings);
51-
tracer.drawArrow(edge, source, target, color, context, settings);
52-
};
53-
sigma.plugins.dragNodes(s, s.renderers[0]);
45+
sigma.plugins.dragNodes(this.s, this.s.renderers[0]);
46+
this.graph = this.capsule.graph = this.s.graph;
5447
},
5548
resize: function () {
5649
Tracer.prototype.resize.call(this);
5750

51+
this.s.renderers[0].resize();
5852
this.refresh();
5953
},
6054
clear: function () {
@@ -82,7 +76,7 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
8276
if (this._setData(G, root)) return true;
8377

8478
var place = function (node, x, y) {
85-
var temp = graph.nodes(tracer.n(node));
79+
var temp = tracer.graph.nodes(tracer.n(node));
8680
temp.x = x;
8781
temp.y = y;
8882
};
@@ -107,7 +101,7 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
107101
_setData: function (G) {
108102
if (Tracer.prototype._setData.call(this, arguments)) return true;
109103

110-
graph.clear();
104+
this.graph.clear();
111105
var nodes = [];
112106
var edges = [];
113107
var unitAngle = 2 * Math.PI / G.length;
@@ -135,11 +129,11 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
135129
}
136130
}
137131

138-
graph.read({
132+
this.graph.read({
139133
nodes: nodes,
140134
edges: edges
141135
});
142-
s.camera.goTo({
136+
this.s.camera.goTo({
143137
x: 0,
144138
y: 0,
145139
angle: 0,
@@ -160,14 +154,14 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
160154
case 'visit':
161155
case 'leave':
162156
var visit = step.type == 'visit';
163-
var targetNode = graph.nodes(this.n(step.target));
157+
var targetNode = this.graph.nodes(this.n(step.target));
164158
var color = visit ? this.color.visited : this.color.left;
165159
targetNode.color = color;
166160
if (step.source !== undefined) {
167161
var edgeId = this.e(step.source, step.target);
168-
var edge = graph.edges(edgeId);
162+
var edge = this.graph.edges(edgeId);
169163
edge.color = color;
170-
graph.dropEdge(edgeId).addEdge(edge);
164+
this.graph.dropEdge(edgeId).addEdge(edge);
171165
}
172166
var source = step.source;
173167
if (source === undefined) source = '';
@@ -178,7 +172,7 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
178172
refresh: function () {
179173
Tracer.prototype.refresh.call(this);
180174

181-
s.refresh();
175+
this.s.refresh();
182176
},
183177
prevStep: function () {
184178
this.clear();
@@ -202,10 +196,10 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
202196
clearGraphColor: function () {
203197
var tracer = this;
204198

205-
graph.nodes().forEach(function (node) {
199+
this.graph.nodes().forEach(function (node) {
206200
node.color = tracer.color.default;
207201
});
208-
graph.edges().forEach(function (edge) {
202+
this.graph.edges().forEach(function (edge) {
209203
edge.color = tracer.color.default;
210204
});
211205
},
@@ -308,17 +302,17 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
308302

309303
context.setLineDash([5, 5]);
310304
var nodeIdx = node.id.substring(1);
311-
graph.edges().forEach(function (edge) {
305+
this.graph.edges().forEach(function (edge) {
312306
var ends = edge.id.substring(1).split("_");
313307
if (ends[0] == nodeIdx) {
314308
var color = '#0ff';
315309
var source = node;
316-
var target = graph.nodes('n' + ends[1]);
310+
var target = tracer.graph.nodes('n' + ends[1]);
317311
tracer.drawArrow(edge, source, target, color, context, settings);
318312
if (next) next(edge, source, target, color, context, settings);
319313
} else if (ends[1] == nodeIdx) {
320314
var color = '#ff0';
321-
var source = graph.nodes('n' + ends[0]);
315+
var source = tracer.graph.nodes('n' + ends[0]);
322316
var target = node;
323317
tracer.drawArrow(edge, source, target, color, context, settings);
324318
if (next) next(edge, source, target, color, context, settings);
@@ -342,4 +336,29 @@ var DirectedGraph = {
342336
}
343337
return G;
344338
}
339+
};
340+
341+
sigma.canvas.labels.def = function (node, context, settings) {
342+
var func = settings('funcLabelsDef');
343+
if (func) {
344+
func(node, context, settings);
345+
}
346+
};
347+
sigma.canvas.hovers.def = function (node, context, settings) {
348+
var func = settings('funcHoversDef');
349+
if (func) {
350+
func(node, context, settings);
351+
}
352+
};
353+
sigma.canvas.edges.def = function (edge, source, target, context, settings) {
354+
var func = settings('funcEdgesDef');
355+
if (func) {
356+
func(edge, source, target, context, settings);
357+
}
358+
};
359+
sigma.canvas.edges.arrow = function (edge, source, target, context, settings) {
360+
var func = settings('funcEdgesArrow');
361+
if (func) {
362+
func(edge, source, target, context, settings);
363+
}
345364
};

‎js/module/tracer.js‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
var timer = null;
2-
var lastModule = null, lastData = null;
32
var stepLimit = 1e6;
43

54
var Tracer = function (module) {
65
this.module = module || Tracer;
76
this.traces = [];
8-
this.pause = false;
97
this.traceOptions = null;
108
this.traceIndex = -1;
119
this.stepCnt = 0;
10+
this.capsule = tm.allocate(this);
1211

13-
var moduleChanged = lastModule != module;
14-
if (moduleChanged) $module_container.empty();
15-
return moduleChanged;
12+
$.extend(this, this.capsule);
13+
return this.new;
1614
};
1715

1816
Tracer.prototype = {
@@ -29,8 +27,8 @@ Tracer.prototype = {
2927
},
3028
_setData: function (arguments) {
3129
var data = JSON.stringify(arguments);
32-
if (lastModule == this.module && lastData == data) return true;
33-
lastData = data;
30+
if (!this.new && this.lastData == data) return true;
31+
this.capsule.lastData = data;
3432
return false;
3533
},
3634
pushStep: function (step, delay) {
@@ -66,17 +64,14 @@ Tracer.prototype = {
6664
this.traceIndex = -1;
6765
this.resumeStep();
6866
},
69-
isPause: function () {
70-
return this.pause;
71-
},
7267
pauseStep: function () {
7368
if (this.traceIndex < 0) return;
74-
this.pause = true;
69+
tm.pause = true;
7570
if (timer) clearTimeout(timer);
7671
$('#btn_pause').addClass('active');
7772
},
7873
resumeStep: function () {
79-
this.pause = false;
74+
tm.pause = false;
8075
this.step(this.traceIndex + 1);
8176
$('#btn_pause').removeClass('active');
8277
},
@@ -112,7 +107,7 @@ Tracer.prototype = {
112107
this.refresh();
113108
this.scrollToEnd(Math.min(50, this.traceOptions.interval));
114109
}
115-
if (this.pause) return;
110+
if (tm.pause) return;
116111
timer = setTimeout(function () {
117112
tracer.step(i + 1, options);
118113
}, sleepDuration || this.traceOptions.interval);

‎js/module/tracer_manager.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
var TracerManager = function () {
2+
this.pause = false;
3+
this.capsules = [];
4+
};
5+
6+
TracerManager.prototype = {
7+
add: function (tracer) {
8+
var $container = $('<section class="module_wrapper">');
9+
$module_container.append($container);
10+
var capsule = {
11+
module: tracer.module,
12+
tracer: tracer,
13+
allocated: true,
14+
$container: $container,
15+
new: true
16+
};
17+
this.capsules.push(capsule);
18+
return capsule;
19+
},
20+
allocate: function (newTracer) {
21+
var selectedCapsule = null;
22+
$.each(this.capsules, function (i, capsule) {
23+
if (!capsule.allocated && capsule.module == newTracer.module) {
24+
capsule.tracer = newTracer;
25+
capsule.allocated = true;
26+
capsule.new = false;
27+
selectedCapsule = capsule;
28+
return false;
29+
}
30+
});
31+
console.log('allocated ' + selectedCapsule);
32+
if (selectedCapsule == null) {
33+
selectedCapsule = this.add(newTracer);
34+
}
35+
return selectedCapsule;
36+
},
37+
deallocateAll: function () {
38+
$.each(this.capsules, function (i, capsule) {
39+
capsule.allocated = false;
40+
});
41+
},
42+
removeUnallocated: function () {
43+
var changed = false;
44+
this.capsules = $.grep(this.capsules, function (capsule) {
45+
var removed = !capsule.allocated;
46+
if (capsule.new || removed) changed = true;
47+
if (removed) {
48+
capsule.$container.remove();
49+
}
50+
return !removed;
51+
});
52+
if (changed) this.place();
53+
},
54+
place: function () {
55+
var capsules = this.capsules;
56+
$.each(capsules, function (i, capsule) {
57+
var width = $module_container.width() / capsules.length;
58+
var height = $module_container.height();
59+
var left = width * i;
60+
capsule.$container.css({
61+
top: 0,
62+
left: left,
63+
width: width,
64+
height: height
65+
});
66+
capsule.tracer.resize();
67+
});
68+
},
69+
command: function () {
70+
var args = Array.prototype.slice.call(arguments);
71+
72+
var functionName = args.shift();
73+
$.each(this.capsules, function (i, capsule) {
74+
if (capsule.allocated) {
75+
capsule.tracer.module.prototype[functionName].apply(capsule.tracer, args);
76+
}
77+
});
78+
},
79+
isPause: function () {
80+
return this.pause;
81+
}
82+
};

0 commit comments

Comments
 (0)