add ArrayTracer

css/stylesheet.css

@@ -131,11 +131,12 @@ section {
     right: 0;
 }
 
-.visualize_container {
+.module_container {
     top: 0;
     bottom: 50%;
     left: 0;
     right: 0;
+    text-align: center;
 }
 
 .tab_container {
@@ -217,7 +218,7 @@ pre {
     bottom: 0;
     right: 0;
     padding: 12px;
-    z-index: 2;
+    z-index: 4;
 }
 
 .toast {
@@ -231,4 +232,22 @@ pre {
 .toast.error {
     border-color: rgb(150, 0, 0);
     background: rgba(120, 0, 0, .8);
+}
+
+.mtbl-table {
+    display: inline-table;
+    color: white;
+    table-layout: fixed;
+}
+
+.mtbl-row {
+    display: table-row;
+}
+
+.mtbl-cell {
+    padding: 3px 6px;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    background: #888;
 }
\ No newline at end of file

index.html

@@ -32,7 +32,7 @@
 </section>
 <div class="workspace">
     <div class="viewer_container">
-        <section class="visualize_container"></section>
+        <section class="module_container"></section>
         <section class="tab_container">
             <div class="tab active" id="tab_description">
                 <div class="wrapper">
@@ -85,6 +85,8 @@
 <script src="js/tracer.js"></script>
 <script src="js/module/graph.js"></script>
 <script src="js/module/weighted_graph.js"></script>
+<script src="js/module/array2d.js"></script>
+<script src="js/module/array1d.js"></script>
 <script src="js/script.js"></script>
 </body>
 </html>
\ No newline at end of file

js/module/array1d.js

+function Array1DTracer(module) {
+    return Array2DTracer.call(this, module || Array1DTracer);
+}
+
+Array1DTracer.prototype = Object.create(Array2DTracer.prototype);
+Array1DTracer.prototype.constructor = Array1DTracer;
+
+// Override
+Array1DTracer.prototype.createRandomData = function (N, min, max) {
+    return Array2DTracer.prototype.createRandomData.call(this, 1, N, min, max)[0];
+};
+
+// Override
+Array1DTracer.prototype.setData = function (D) {
+    return Array2DTracer.prototype.setData.call(this, [D]);
+};
+
+// Override
+Array1DTracer.prototype._change = function (s, e) {
+    if (s instanceof Array) {
+        this.pushStep({type: 'select', indexes: s, color: tableColor.changed}, true);
+        this.pushStep({type: 'deselect', indexes: s}, false);
+    } else if (e !== undefined) {
+        this.pushStep({type: 'select', index: s, color: tableColor.changed}, true);
+        this.pushStep({type: 'deselect', index: s}, false);
+    } else {
+        this.pushStep({type: 'select', s: s, e: e, color: tableColor.changed}, true);
+        this.pushStep({type: 'deselect', s: s, e: e}, false);
+    }
+};
+
+// Override
+Array1DTracer.prototype._select = function (s, e) {
+    if (s instanceof Array) {
+        this.pushStep({type: 'select', indexes: s}, true);
+    } else if (e !== undefined) {
+        this.pushStep({type: 'select', index: s}, true);
+    } else {
+        this.pushStep({type: 'select', s: s, e: e}, true);
+    }
+};
+
+// Override
+Array1DTracer.prototype._deselect = function (s, e) {
+    if (s instanceof Array) {
+        this.pushStep({type: 'deselect', indexes: s}, true);
+    } else if (e !== undefined) {
+        this.pushStep({type: 'deselect', index: s}, true);
+    } else {
+        this.pushStep({type: 'deselect', s: s, e: e}, true);
+    }
+};
+
+// Override
+Array1DTracer.prototype.processStep = function (step, options) {
+    switch (step.type) {
+        case 'select':
+        case 'deselect':
+            var select = step.type == 'select';
+            var color = select ? step.color !== undefined ? step.color : tableColor.selected : tableColor.default;
+            if (step.indexes) {
+                step.indexes.forEach(function (index) {
+                    paintColor(0, index, 0, index, color);
+                });
+            } else {
+                var s = step.s;
+                var e = step.e;
+                if (s === undefined) s = step.index;
+                if (e === undefined) e = step.index;
+                paintColor(0, s, 0, e, color);
+            }
+            break;
+    }
+};
\ No newline at end of file

js/module/array2d.js

+var $table = null;
+
+function Array2DTracer(module) {
+    if (Tracer.call(this, module || Array2DTracer)) {
+        initTable();
+        return true;
+    }
+    return false;
+}
+
+Array2DTracer.prototype = Object.create(Tracer.prototype);
+Array2DTracer.prototype.constructor = Array2DTracer;
+
+// Override
+Array2DTracer.prototype.resize = function () {
+    Tracer.prototype.resize.call(this);
+
+    var $parent = $table.parent();
+    $table.css('margin-top', $parent.height() / 2 - $table.height() / 2);
+};
+
+// Override
+Array2DTracer.prototype.clear = function () {
+    Tracer.prototype.clear.call(this);
+
+    clearTableColor();
+};
+
+Array2DTracer.prototype.createRandomData = function (N, M, min, max) {
+    if (!N) N = 10;
+    if (!M) M = 10;
+    if (min === undefined) min = 1;
+    if (max === undefined) max = 9;
+    var D = [];
+    for (var i = 0; i < N; i++) {
+        D.push([]);
+        for (var j = 0; j < M; j++) {
+            D[i].push((Math.random() * (max - min + 1) | 0) + min);
+        }
+    }
+    return D;
+};
+
+// Override
+Array2DTracer.prototype.setData = function (D) {
+    if (Tracer.prototype.setData.call(this, arguments)) return true;
+
+    $table.empty();
+    for (var i = 0; i < D.length; i++) {
+        var $row = $('<div class="mtbl-row">');
+        $table.append($row);
+        for (var j = 0; j < D[i].length; j++) {
+            var $cell = $('<div class="mtbl-cell">').text(D[i][j]);
+            $row.append($cell);
+        }
+    }
+    this.resize();
+
+    return false;
+};
+
+Array2DTracer.prototype._change = function (sx, sy, ex, ey) {
+    if (sx instanceof Array) {
+        this.pushStep({type: 'select', coords: sx, color: tableColor.changed}, true);
+        this.pushStep({type: 'deselect', coords: sx}, false);
+    } else if (ex !== undefined && ey !== undefined) {
+        this.pushStep({type: 'select', sx: sx, sy: sy, ex: ex, ey: ey, color: tableColor.changed}, true);
+        this.pushStep({type: 'deselect', sx: sx, sy: sy, ex: ex, ey: ey}, false);
+    } else {
+        this.pushStep({type: 'select', x: sx, y: sy, color: tableColor.changed}, true);
+        this.pushStep({type: 'deselect', x: sx, y: sy}, false);
+    }
+};
+
+Array2DTracer.prototype._changeRow = function (x, sy, ey) {
+    this.pushStep({type: 'select', x: x, sy: sy, ey: ey, color: tableColor.changed}, true);
+    this.pushStep({type: 'deselect', x: x, sy: sy, ey: ey}, false);
+};
+
+Array2DTracer.prototype._changeCol = function (y, sx, ex) {
+    this.pushStep({type: 'select', y: y, sx: sx, ex: ex, color: tableColor.changed}, true);
+    this.pushStep({type: 'deselect', y: y, sx: sx, ex: ex}, false);
+};
+
+Array2DTracer.prototype._select = function (sx, sy, ex, ey) {
+    if (sx instanceof Array) {
+        this.pushStep({type: 'select', coords: sx}, true);
+    } else if (ex !== undefined && ey !== undefined) {
+        this.pushStep({type: 'select', sx: sx, sy: sy, ex: ex, ey: ey}, true);
+    } else {
+        this.pushStep({type: 'select', x: sx, y: sy}, true);
+    }
+};
+
+Array2DTracer.prototype._selectRow = function (x, sy, ey) {
+    this.pushStep({type: 'select', x: x, sy: sy, ey: ey}, true);
+};
+
+Array2DTracer.prototype._selectCol = function (y, sx, ex) {
+    this.pushStep({type: 'select', y: y, sx: sx, ex: ex}, true);
+};
+
+Array2DTracer.prototype._deselect = function (sx, sy, ex, ey) {
+    if (sx instanceof Array) {
+        this.pushStep({type: 'deselect', coords: sx}, true);
+    } else if (ex !== undefined && ey !== undefined) {
+        this.pushStep({type: 'deselect', sx: sx, sy: sy, ex: ex, ey: ey}, true);
+    } else {
+        this.pushStep({type: 'deselect', x: sx, y: sy}, true);
+    }
+};
+
+Array2DTracer.prototype._deselectRow = function (x, sy, ey) {
+    this.pushStep({type: 'deselect', x: x, sy: sy, ey: ey}, true);
+};
+
+Array2DTracer.prototype._deselectCol = function (y, sx, ex) {
+    this.pushStep({type: 'deselect', y: y, sx: sx, ex: ex}, true);
+};
+
+Array2DTracer.prototype.processStep = function (step, options) {
+    switch (step.type) {
+        case 'select':
+        case 'deselect':
+            var select = step.type == 'select';
+            var color = select ? step.color !== undefined ? step.color : tableColor.selected : tableColor.default;
+            if (step.coords) {
+                step.coords.forEach(function (coord) {
+                    var x = coord.x;
+                    var y = coord.y;
+                    paintColor(x, y, x, y, color);
+                });
+            } else {
+                var sx = step.sx;
+                var sy = step.sy;
+                var ex = step.ex;
+                var ey = step.ey;
+                if (sx === undefined) sx = step.x;
+                if (sy === undefined) sy = step.y;
+                if (ex === undefined) ex = step.x;
+                if (ey === undefined) ey = step.y;
+                paintColor(sx, sy, ex, ey, color);
+            }
+            break;
+    }
+};
+
+// Override
+Array2DTracer.prototype.prevStep = function () {
+    this.clear();
+    $('#tab_trace .wrapper').empty();
+    var finalIndex = this.traceIndex - 1;
+    if (finalIndex < 0) {
+        this.traceIndex = -1;
+        return;
+    }
+    for (var i = 0; i < finalIndex; i++) {
+        this.step(i, {virtual: true});
+    }
+    this.step(finalIndex);
+};
+
+var initTable = function () {
+    $('.module_container').empty();
+    $table = $('<div class="mtbl-table">');
+    $('.module_container').append($table);
+};
+
+var tableColor = {
+    selected: '#0ff',
+    changed: '#f00',
+    default: ''
+};
+
+var paintColor = function (sx, sy, ex, ey, color) {
+    for (var i = sx; i <= ex; i++) {
+        var $row = $table.find('.mtbl-row').eq(i);
+        for (var j = sy; j <= ey; j++) {
+            $row.find('.mtbl-cell').eq(j).css('background', color);
+        }
+    }
+};
+
+var clearTableColor = function () {
+    $table.find('.mtbl-cell').css('background', '');
+};
\ No newline at end of file

js/module/graph.js

 var s = null, graph = null, sigmaCanvas = null;
 
 function GraphTracer(module) {
-    if (Tracer.call(this, module || WeightedGraphTracer)) {
+    if (Tracer.call(this, module || GraphTracer)) {
         initGraph();
         return true;
     }
@@ -25,9 +25,8 @@ GraphTracer.prototype.clear = function () {
     clearGraphColor();
 };
 
+// Override
 GraphTracer.prototype.createRandomData = function (N, ratio) {
-    Tracer.prototype.createRandomData.call(this, arguments);
-
     if (!N) N = 5;
     if (!ratio) ratio = .3;
     var G = [];
@@ -131,10 +130,6 @@ GraphTracer.prototype.setData = function (G) {
     return false;
 };
 
-GraphTracer.prototype._clear = function () {
-    this.pushStep({type: 'clear'}, true);
-};
-
 GraphTracer.prototype._visit = function (target, source) {
     this.pushStep({type: 'visit', target: target, source: source}, true);
 };
@@ -145,10 +140,6 @@ GraphTracer.prototype._leave = function (target, source) {
 
 GraphTracer.prototype.processStep = function (step, options) {
     switch (step.type) {
-        case 'clear':
-            this.clear();
-            printTrace('clear traces');
-            break;
         case 'visit':
         case 'leave':
             var visit = step.type == 'visit';
@@ -192,7 +183,7 @@ GraphTracer.prototype.prevStep = function () {
 };
 
 var initGraph = function () {
-    $('.visualize_container').empty();
+    $('.module_container').empty();
     if (sigmaCanvas == null) {
         sigmaCanvas = $.extend(true, {}, sigma.canvas);
     } else {
@@ -200,7 +191,7 @@ var initGraph = function () {
     }
     s = new sigma({
         renderer: {
-            container: $('.visualize_container')[0],
+            container: $('.module_container')[0],
             type: 'canvas'
         },
         settings: {

js/module/weighted_graph.js

@@ -16,9 +16,8 @@ WeightedGraphTracer.prototype.clear = function () {
     clearWeights();
 };
 
+// Override
 WeightedGraphTracer.prototype.createRandomData = function (N, ratio, min, max) {
-    Tracer.prototype.createRandomData.call(this, arguments);
-
     if (!N) N = 5;
     if (!ratio) ratio = .3;
     if (!min) min = 1;

js/script.js

@@ -13,7 +13,7 @@ var codeEditor = initEditor('code');
 dataEditor.on('change', function () {
     try {
         eval(dataEditor.getValue());
-        lastModule = _tracer && _tracer.module;
+        lastModule = tracer && tracer.module;
         _tracer = tracer;
     } catch (err) {
     }
@@ -134,7 +134,7 @@ $('#navigation').click(function () {
 $('#btn_run').click(function () {
     try {
         eval(dataEditor.getValue());
-        lastModule = _tracer && _tracer.module;
+        lastModule = tracer && tracer.module;
         _tracer = tracer;
         _tracer.reset();
         eval(codeEditor.getValue());
@@ -183,7 +183,7 @@ $(window).resize(_tracer.resize);
 var dividers = [
     ['v', $('.sidemenu'), $('.workspace')],
     ['v', $('.viewer_container'), $('.editor_container')],
-    ['h', $('.visualize_container'), $('.tab_container')],
+    ['h', $('.module_container'), $('.tab_container')],
     ['h', $('.data_container'), $('.code_container')]
 ];
 for (var i = 0; i < dividers.length; i++) {

js/tracer.js

@@ -62,6 +62,10 @@ Tracer.prototype._pace = function (interval) {
     this.pushStep({type: 'pace', interval: interval}, false);
 };
 
+Tracer.prototype._clear = function () {
+    this.pushStep({type: 'clear'}, true);
+};
+
 Tracer.prototype.visualize = function (options) {
     options = options || {};
     options.interval = options.interval || 500;
@@ -108,6 +112,10 @@ Tracer.prototype.step = function (i, options) {
             case 'pace':
                 tracer.traceOptions.interval = step.interval;
                 break;
+            case 'clear':
+                this.clear();
+                printTrace('clear traces');
+                break;
             default:
                 tracer.module.prototype.processStep.call(tracer, step, options);
         }