improve coloring

js/module/tracer/array2d.js

@@ -14,16 +14,12 @@ class Array2DTracer extends Tracer {
   constructor(name) {
     super(name);
 
-    this.selectColor = '#2962ff';
-    this.notifyColor = '#c51162';
-
     if (this.isNew) initView(this);
   }
 
   _notify(x, y, v) {
     this.manager.pushStep(this.capsule, {
       type: 'notify',
-      color: this.notifyColor,
       x: x,
       y: y,
       v: v
@@ -145,8 +141,7 @@ class Array2DTracer extends Tracer {
         }
     }
     var step = {
-      type: type,
-      color: this.selectColor
+      type: type
     };
     $.extend(step, coord);
     this.manager.pushStep(this.capsule, step);
@@ -163,8 +158,8 @@ class Array2DTracer extends Tracer {
       case 'denotify':
       case 'select':
       case 'deselect':
-        var colorClass = step.color;
-        var addClass = step.type == 'select' || step.type == 'notify';
+        var color = step.type == 'select' || step.type == 'deselect' ? this.color.selected : this.color.notified;
+        var paint = step.type == 'select' || step.type == 'notify';
         var sx = step.sx;
         var sy = step.sy;
         var ex = step.ex;
@@ -173,7 +168,7 @@ class Array2DTracer extends Tracer {
         if (sy === undefined) sy = step.y;
         if (ex === undefined) ex = step.x;
         if (ey === undefined) ey = step.y;
-        this.paintColor(sx, sy, ex, ey, colorClass, addClass);
+        this.paintColor(sx, sy, ex, ey, color, paint);
         break;
       case 'separate':
         this.deseparate(step.x, step.y);
@@ -292,22 +287,19 @@ class Array2DTracer extends Tracer {
     this.refresh();
   }
 
-  paintColor(sx, sy, ex, ey, colorClass, addClass) {
+  paintColor(sx, sy, ex, ey, color, paint) {
     for (var i = sx; i <= ex; i++) {
       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[0].style.backgroundColor = colorClass;
-        else $col[0].style.backgroundColor = "";
+        if (paint) $col.css('background', color);
+        else $col.css('background', '');
       }
     }
   }
 
   clearColor() {
-    var divs = this.$table.find('.mtbl-col');
-    for (var i = 0; i < divs.length; i++){
-      divs[i].style.backgroundColor = "";
-    }
+    this.$table.find('.mtbl-col').css('background', '');
   }
 
   separate(x, y) {

js/module/tracer/chart.js

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

js/module/tracer/coordinate_system.js

@@ -25,8 +25,7 @@ class CoordinateSystemTracer extends DirectedGraphTracer {
         x: C[i][0],
         y: C[i][1],
         label: '' + i,
-        size: 1,
-        color: this.defaultColor
+        size: 1
       });
     this.graph.read({
       nodes: nodes,
@@ -49,7 +48,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.visitedColor : this.leftColor;
+        var color = visit ? this.color.visited : this.color.left;
         targetNode.color = color;
         if (step.source !== undefined) {
           var edgeId = this.e(step.source, step.target);
@@ -62,7 +61,6 @@ class CoordinateSystemTracer extends DirectedGraphTracer {
               id: this.e(step.target, step.source),
               source: this.n(step.source),
               target: this.n(step.target),
-              color: color,
               size: 1
             });
           }

js/module/tracer/directed_graph.js

@@ -14,11 +14,6 @@ class DirectedGraphTracer extends Tracer {
   constructor(name) {
     super(name);
 
-    this.selectColor = '#2962ff';
-    this.visitedColor = '#f50057';
-    this.leftColor = '#616161';
-    this.defaultColor = '#bdbdbd';
-
     if (this.isNew) initView(this);
   }
 
@@ -57,7 +52,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.visitedColor : this.leftColor;
+        var color = visit ? this.color.visited : this.color.left;
         targetNode.color = color;
         if (step.source !== undefined) {
           var edgeId = this.e(step.source, step.target);
@@ -135,7 +130,7 @@ class DirectedGraphTracer extends Tracer {
         x: .5 + Math.sin(currentAngle) / 2,
         y: .5 + Math.cos(currentAngle) / 2,
         size: 1,
-        color: this.defaultColor,
+        color: this.color.default,
         weight: 0
       });
 
@@ -147,7 +142,7 @@ class DirectedGraphTracer extends Tracer {
               id: this.e(i, j),
               source: this.n(i),
               target: this.n(j),
-              color: this.defaultColor,
+              color: this.color.default,
               size: 1,
               weight: refineByType(value)
             });
@@ -160,7 +155,7 @@ class DirectedGraphTracer extends Tracer {
               id: this.e(i, j),
               source: this.n(i),
               target: this.n(j),
-              color: this.defaultColor,
+              color: this.color.default,
               size: 1,
               weight: refineByType(G[i][j])
             });
@@ -208,10 +203,10 @@ class DirectedGraphTracer extends Tracer {
     var tracer = this;
 
     this.graph.nodes().forEach(function (node) {
-      node.color = tracer.defaultColor;
+      node.color = tracer.color.default;
     });
     this.graph.edges().forEach(function (edge) {
-      edge.color = tracer.defaultColor;
+      edge.color = tracer.color.default;
     });
   }
 

js/module/tracer/tracer.js

@@ -15,11 +15,13 @@ class Tracer {
   constructor(name) {
     this.module = this.constructor;
 
-    this.selectColor;
-    this.notifyColor;
-    this.defaultColor;
-    this.leftColor;
-    this.visitedColor;
+    this.color = {
+      selected: '#2962ff',
+      notified: '#f50057',
+      visited: '#f50057',
+      left: '#616161',
+      default: '#bdbdbd'
+    };
 
     this.manager = app.getTracerManager();
     this.capsule = this.manager.allocate(this);
@@ -48,24 +50,24 @@ class Tracer {
     return this;
   }
 
-  _setSelectFillColor(c) {
-    this.selectColor = c;
+  _setSelectedColor(c) {
+    this.color.selected = c;
   }
 
-  _setNotifyFillColor(c) {
-    this.notifyColor = c;
+  _setNotifiedColor(c) {
+    this.color.notified = c;
   }
 
-  _setDefaultFillColor(c){
-    this.defaultColor = c;
+  _setVisitedColor(c) {
+    this.color.visited = c;
   }
 
-  _setLeftFillColor(c){
-    this.leftColor = c;
+  _setLeftColor(c) {
+    this.color.left = c;
   }
 
-  _setVisitedFillColor(c){
-    this.visitedColor = c;
+  _setDefaultColor(c) {
+    this.color.default = c;
   }
 
   processStep(step, options) {

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.selectColor : this.visitedColor : this.leftColor;
+        var color = visit ? step.weight === undefined ? this.color.selected : this.color.visited : this.color.left;
         targetNode.color = color;
         if (step.weight !== undefined) targetNode.weight = refineByType(step.weight);
         if (step.source !== undefined) {