Skip to content

Commit ac6f03b

Browse files
author
Kevin Nadro
committed
added color customization
The coders are able to set the tracer’s colors to anything they want! Since I use the style background color attribute on the div it can accept a wide variety of values for the background color. I first wanted to pass in some color value when calling notify or select but then I realized there is a lot of issues with the amount of parameters . So I thought of doing some sort of global set like the HTML canvas/context does. Tracer now has 5 new methods for setting the colors. _Set(name)FillColor(color_goes_here). The logic of the setting fillColor and it being displayed should be similar to the canvas/context fillStyle setting. It will keep using that color until the color is switched again. I had to change the clear method inside array2d.js also to handle the new coloring change.
1 parent aba5538 commit ac6f03b

6 files changed

Lines changed: 57 additions & 32 deletions

File tree

‎js/module/tracer/array2d.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,16 @@ class Array2DTracer extends Tracer {
1414
constructor(name) {
1515
super(name);
1616

17-
this.colorClass = {
18-
selected: 'selected',
19-
notified: 'notified'
20-
};
17+
this.selectColor = '#2962ff';
18+
this.notifyColor = '#c51162';
2119

2220
if (this.isNew) initView(this);
2321
}
2422

2523
_notify(x, y, v) {
2624
this.manager.pushStep(this.capsule, {
2725
type: 'notify',
26+
color: this.notifyColor,
2827
x: x,
2928
y: y,
3029
v: v
@@ -146,7 +145,8 @@ class Array2DTracer extends Tracer {
146145
}
147146
}
148147
var step = {
149-
type: type
148+
type: type,
149+
color: this.selectColor
150150
};
151151
$.extend(step, coord);
152152
this.manager.pushStep(this.capsule, step);
@@ -163,7 +163,7 @@ class Array2DTracer extends Tracer {
163163
case 'denotify':
164164
case 'select':
165165
case 'deselect':
166-
var colorClass = step.type == 'select' || step.type == 'deselect' ? this.colorClass.selected : this.colorClass.notified;
166+
var colorClass = step.color;
167167
var addClass = step.type == 'select' || step.type == 'notify';
168168
var sx = step.sx;
169169
var sy = step.sy;
@@ -297,14 +297,17 @@ class Array2DTracer extends Tracer {
297297
var $row = this.$table.find('.mtbl-row').eq(i);
298298
for (var j = sy; j <= ey; j++) {
299299
var $col = $row.find('.mtbl-col').eq(j);
300-
if (addClass) $col.addClass(colorClass);
301-
else $col.removeClass(colorClass);
300+
if(addClass) $col[0].style.backgroundColor = colorClass;
301+
else $col[0].style.backgroundColor = "";
302302
}
303303
}
304304
}
305305

306306
clearColor() {
307-
this.$table.find('.mtbl-col').removeClass(Object.keys(this.colorClass).join(' '));
307+
var divs = this.$table.find('.mtbl-col');
308+
for (var i = 0; i < divs.length; i++){
309+
divs[i].style.backgroundColor = "";
310+
}
308311
}
309312

310313
separate(x, y) {

‎js/module/tracer/chart.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ class ChartTracer extends Tracer {
1010
constructor(name) {
1111
super(name);
1212

13-
this.color = {
14-
selected: '#2962ff',
15-
notified: '#c51162',
16-
default: 'rgb(136, 136, 136)'
17-
};
13+
this.selectColor = '#2962ff';
14+
this.notifyColor = '#c51162';
15+
this.defaultColor = 'rgb(136, 136, 136)';
1816

1917
if (this.isNew) initView(this);
2018
}
@@ -27,7 +25,7 @@ class ChartTracer extends Tracer {
2725
}
2826

2927
var color = [];
30-
for (var i = 0; i < C.length; i++) color.push(this.color.default);
28+
for (var i = 0; i < C.length; i++) color.push(this.defaultColor);
3129
this.chart.config.data = {
3230
labels: C.map(String),
3331
datasets: [{
@@ -83,7 +81,7 @@ class ChartTracer extends Tracer {
8381
case 'denotify':
8482
case 'select':
8583
case 'deselect':
86-
let color = step.type == 'notify' ? this.color.notified : step.type == 'select' ? this.color.selected : this.color.default;
84+
let color = step.type == 'notify' ? this.notifyColor : step.type == 'select' ? this.selectColor : this.defaultColor;
8785
if (step.e !== undefined)
8886
for (var i = step.s; i <= step.e; i++)
8987
this.chart.config.data.datasets[0].backgroundColor[i] = color;
@@ -109,7 +107,7 @@ class ChartTracer extends Tracer {
109107
if (data.datasets.length) {
110108
const backgroundColor = data.datasets[0].backgroundColor;
111109
for (let i = 0; i < backgroundColor.length; i++) {
112-
backgroundColor[i] = this.color.default;
110+
backgroundColor[i] = this.defaultColor;
113111
}
114112
this.chart.update();
115113
}

‎js/module/tracer/coordinate_system.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class CoordinateSystemTracer extends DirectedGraphTracer {
2626
y: C[i][1],
2727
label: '' + i,
2828
size: 1,
29-
color: this.color.default
29+
color: this.defaultColor
3030
});
3131
this.graph.read({
3232
nodes: nodes,
@@ -49,7 +49,7 @@ class CoordinateSystemTracer extends DirectedGraphTracer {
4949
case 'leave':
5050
var visit = step.type == 'visit';
5151
var targetNode = this.graph.nodes(this.n(step.target));
52-
var color = visit ? this.color.visited : this.color.left;
52+
var color = visit ? this.visitedColor : this.leftColor;
5353
targetNode.color = color;
5454
if (step.source !== undefined) {
5555
var edgeId = this.e(step.source, step.target);

‎js/module/tracer/directed_graph.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,10 @@ class DirectedGraphTracer extends Tracer {
1414
constructor(name) {
1515
super(name);
1616

17-
this.color = {
18-
selected: '#2962ff',
19-
visited: '#f50057',
20-
left: '#616161',
21-
default: '#bdbdbd'
22-
};
17+
this.selectColor = '#2962ff';
18+
this.visitedColor = '#f50057';
19+
this.leftColor = '#616161';
20+
this.defaultColor = '#bdbdbd';
2321

2422
if (this.isNew) initView(this);
2523
}
@@ -59,7 +57,7 @@ class DirectedGraphTracer extends Tracer {
5957
case 'leave':
6058
var visit = step.type == 'visit';
6159
var targetNode = this.graph.nodes(this.n(step.target));
62-
var color = visit ? this.color.visited : this.color.left;
60+
var color = visit ? this.visitedColor : this.leftColor;
6361
targetNode.color = color;
6462
if (step.source !== undefined) {
6563
var edgeId = this.e(step.source, step.target);
@@ -137,7 +135,7 @@ class DirectedGraphTracer extends Tracer {
137135
x: .5 + Math.sin(currentAngle) / 2,
138136
y: .5 + Math.cos(currentAngle) / 2,
139137
size: 1,
140-
color: this.color.default,
138+
color: this.defaultColor,
141139
weight: 0
142140
});
143141

@@ -149,7 +147,7 @@ class DirectedGraphTracer extends Tracer {
149147
id: this.e(i, j),
150148
source: this.n(i),
151149
target: this.n(j),
152-
color: this.color.default,
150+
color: this.defaultColor,
153151
size: 1,
154152
weight: refineByType(value)
155153
});
@@ -162,7 +160,7 @@ class DirectedGraphTracer extends Tracer {
162160
id: this.e(i, j),
163161
source: this.n(i),
164162
target: this.n(j),
165-
color: this.color.default,
163+
color: this.defaultColor,
166164
size: 1,
167165
weight: refineByType(G[i][j])
168166
});
@@ -210,10 +208,10 @@ class DirectedGraphTracer extends Tracer {
210208
var tracer = this;
211209

212210
this.graph.nodes().forEach(function (node) {
213-
node.color = tracer.color.default;
211+
node.color = tracer.defaultColor;
214212
});
215213
this.graph.edges().forEach(function (edge) {
216-
edge.color = tracer.color.default;
214+
edge.color = tracer.defaultColor;
217215
});
218216
}
219217

‎js/module/tracer/tracer.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ class Tracer {
1515
constructor(name) {
1616
this.module = this.constructor;
1717

18+
this.selectColor;
19+
this.notifyColor;
20+
this.defaultColor;
21+
this.leftColor;
22+
this.visitedColor;
23+
1824
this.manager = app.getTracerManager();
1925
this.capsule = this.manager.allocate(this);
2026
$.extend(this, this.capsule);
@@ -42,6 +48,26 @@ class Tracer {
4248
return this;
4349
}
4450

51+
_setSelectFillColor(c) {
52+
this.selectColor = c;
53+
}
54+
55+
_setNotifyFillColor(c) {
56+
this.notifyColor = c;
57+
}
58+
59+
_setDefaultFillColor(c){
60+
this.defaultColor = c;
61+
}
62+
63+
_setLeftFillColor(c){
64+
this.leftColor = c;
65+
}
66+
67+
_setVisitedFillColor(c){
68+
this.visitedColor = c;
69+
}
70+
4571
processStep(step, options) {
4672
const {
4773
type,

‎js/module/tracer/weighted_directed_graph.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class WeightedDirectedGraphTracer extends DirectedGraphTracer {
5656
case 'leave':
5757
var visit = step.type == 'visit';
5858
var targetNode = this.graph.nodes(this.n(step.target));
59-
var color = visit ? step.weight === undefined ? this.color.selected : this.color.visited : this.color.left;
59+
var color = visit ? step.weight === undefined ? this.selectColor : this.visitedColor : this.leftColor;
6060
targetNode.color = color;
6161
if (step.weight !== undefined) targetNode.weight = refineByType(step.weight);
6262
if (step.source !== undefined) {

0 commit comments

Comments
 (0)