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.

js/module/tracer/array2d.js

@@ -14,10 +14,8 @@ class Array2DTracer extends Tracer {
   constructor(name) {
     super(name);
 
-    this.colorClass = {
-      selected: 'selected',
-      notified: 'notified'
-    };
+    this.selectColor = '#2962ff';
+    this.notifyColor = '#c51162';
 
     if (this.isNew) initView(this);
   }
@@ -25,6 +23,7 @@ class Array2DTracer extends Tracer {
   _notify(x, y, v) {
     this.manager.pushStep(this.capsule, {
       type: 'notify',
+      color: this.notifyColor,
       x: x,
       y: y,
       v: v
@@ -146,7 +145,8 @@ class Array2DTracer extends Tracer {
         }
     }
     var step = {
-      type: type
+      type: type,
+      color: this.selectColor
     };
     $.extend(step, coord);
     this.manager.pushStep(this.capsule, step);
@@ -163,7 +163,7 @@ class Array2DTracer extends Tracer {
       case 'denotify':
       case 'select':
       case 'deselect':
-        var colorClass = step.type == 'select' || step.type == 'deselect' ? this.colorClass.selected : this.colorClass.notified;
+        var colorClass = step.color;
         var addClass = step.type == 'select' || step.type == 'notify';
         var sx = step.sx;
         var sy = step.sy;
@@ -297,14 +297,17 @@ class Array2DTracer extends Tracer {
       var $row = this.$table.find('.mtbl-row').eq(i);
       for (var j = sy; j <= ey; j++) {
         var $col = $row.find('.mtbl-col').eq(j);
-        if (addClass) $col.addClass(colorClass);
-        else $col.removeClass(colorClass);
+        if(addClass) $col[0].style.backgroundColor = colorClass;
+        else $col[0].style.backgroundColor = "";
       }
     }
   }
 
   clearColor() {
-    this.$table.find('.mtbl-col').removeClass(Object.keys(this.colorClass).join(' '));
+    var divs = this.$table.find('.mtbl-col');
+    for (var i = 0; i < divs.length; i++){
+      divs[i].style.backgroundColor = "";
+    }
   }
 
   separate(x, y) {

js/module/tracer/chart.js

@@ -10,11 +10,9 @@ class ChartTracer extends Tracer {
   constructor(name) {
     super(name);
 
-    this.color = {
-      selected: '#2962ff',
-      notified: '#c51162',
-      default: 'rgb(136, 136, 136)'
-    };
+    this.selectColor = '#2962ff';
+    this.notifyColor = '#c51162';
+    this.defaultColor = 'rgb(136, 136, 136)';
 
     if (this.isNew) initView(this);
   }
@@ -27,7 +25,7 @@ class ChartTracer extends Tracer {
     }
 
     var color = [];
-    for (var i = 0; i < C.length; i++) color.push(this.color.default);
+    for (var i = 0; i < C.length; i++) color.push(this.defaultColor);
     this.chart.config.data = {
       labels: C.map(String),
       datasets: [{
@@ -83,7 +81,7 @@ class ChartTracer extends Tracer {
       case 'denotify':
       case 'select':
       case 'deselect':
-        let color = step.type == 'notify' ? this.color.notified : step.type == 'select' ? this.color.selected : this.color.default;
+        let color = step.type == 'notify' ? this.notifyColor : step.type == 'select' ? this.selectColor : this.defaultColor;
         if (step.e !== undefined)
           for (var i = step.s; i <= step.e; i++)
             this.chart.config.data.datasets[0].backgroundColor[i] = color;
@@ -109,7 +107,7 @@ class ChartTracer extends Tracer {
     if (data.datasets.length) {
       const backgroundColor = data.datasets[0].backgroundColor;
       for (let i = 0; i < backgroundColor.length; i++) {
-        backgroundColor[i] = this.color.default;
+        backgroundColor[i] = this.defaultColor;
       }
       this.chart.update();
     }

js/module/tracer/coordinate_system.js

@@ -26,7 +26,7 @@ class CoordinateSystemTracer extends DirectedGraphTracer {
         y: C[i][1],
         label: '' + i,
         size: 1,
-        color: this.color.default
+        color: this.defaultColor
       });
     this.graph.read({
       nodes: nodes,
@@ -49,7 +49,7 @@ class CoordinateSystemTracer extends DirectedGraphTracer {
       case 'leave':
         var visit = step.type == 'visit';
         var targetNode = this.graph.nodes(this.n(step.target));
-        var color = visit ? this.color.visited : this.color.left;
+        var color = visit ? this.visitedColor : this.leftColor;
         targetNode.color = color;
         if (step.source !== undefined) {
           var edgeId = this.e(step.source, step.target);

js/module/tracer/directed_graph.js

@@ -14,12 +14,10 @@ class DirectedGraphTracer extends Tracer {
   constructor(name) {
     super(name);
 
-    this.color = {
-      selected: '#2962ff',
-      visited: '#f50057',
-      left: '#616161',
-      default: '#bdbdbd'
-    };
+    this.selectColor = '#2962ff';
+    this.visitedColor = '#f50057';
+    this.leftColor = '#616161';
+    this.defaultColor = '#bdbdbd';
 
     if (this.isNew) initView(this);
   }
@@ -59,7 +57,7 @@ class DirectedGraphTracer extends Tracer {
       case 'leave':
         var visit = step.type == 'visit';
         var targetNode = this.graph.nodes(this.n(step.target));
-        var color = visit ? this.color.visited : this.color.left;
+        var color = visit ? this.visitedColor : this.leftColor;
         targetNode.color = color;
         if (step.source !== undefined) {
           var edgeId = this.e(step.source, step.target);
@@ -137,7 +135,7 @@ class DirectedGraphTracer extends Tracer {
         x: .5 + Math.sin(currentAngle) / 2,
         y: .5 + Math.cos(currentAngle) / 2,
         size: 1,
-        color: this.color.default,
+        color: this.defaultColor,
         weight: 0
       });
 
@@ -149,7 +147,7 @@ class DirectedGraphTracer extends Tracer {
               id: this.e(i, j),
               source: this.n(i),
               target: this.n(j),
-              color: this.color.default,
+              color: this.defaultColor,
               size: 1,
               weight: refineByType(value)
             });
@@ -162,7 +160,7 @@ class DirectedGraphTracer extends Tracer {
               id: this.e(i, j),
               source: this.n(i),
               target: this.n(j),
-              color: this.color.default,
+              color: this.defaultColor,
               size: 1,
               weight: refineByType(G[i][j])
             });
@@ -210,10 +208,10 @@ class DirectedGraphTracer extends Tracer {
     var tracer = this;
 
     this.graph.nodes().forEach(function (node) {
-      node.color = tracer.color.default;
+      node.color = tracer.defaultColor;
     });
     this.graph.edges().forEach(function (edge) {
-      edge.color = tracer.color.default;
+      edge.color = tracer.defaultColor;
     });
   }
 

js/module/tracer/tracer.js

@@ -15,6 +15,12 @@ class Tracer {
   constructor(name) {
     this.module = this.constructor;
 
+    this.selectColor;
+    this.notifyColor;
+    this.defaultColor;
+    this.leftColor;
+    this.visitedColor;
+
     this.manager = app.getTracerManager();
     this.capsule = this.manager.allocate(this);
     $.extend(this, this.capsule);
@@ -42,6 +48,26 @@ class Tracer {
     return this;
   }
 
+  _setSelectFillColor(c) {
+    this.selectColor = c;
+  }
+
+  _setNotifyFillColor(c) {
+    this.notifyColor = c;
+  }
+
+  _setDefaultFillColor(c){
+    this.defaultColor = c;
+  }
+
+  _setLeftFillColor(c){
+    this.leftColor = c;
+  }
+
+  _setVisitedFillColor(c){
+    this.visitedColor = c;
+  }
+
   processStep(step, options) {
     const {
       type,

js/module/tracer/weighted_directed_graph.js

@@ -56,7 +56,7 @@ class WeightedDirectedGraphTracer extends DirectedGraphTracer {
       case 'leave':
         var visit = step.type == 'visit';
         var targetNode = this.graph.nodes(this.n(step.target));
-        var color = visit ? step.weight === undefined ? this.color.selected : this.color.visited : this.color.left;
+        var color = visit ? step.weight === undefined ? this.selectColor : this.visitedColor : this.leftColor;
         targetNode.color = color;
         if (step.weight !== undefined) targetNode.weight = refineByType(step.weight);
         if (step.source !== undefined) {