modify all the agorithms since tracer modules are revised

css/stylesheet.css

@@ -169,7 +169,6 @@ section {
     position: absolute;
     width: 100%;
     height: 100%;
-    overflow: scroll;
     visibility: hidden;
 }
 
@@ -182,15 +181,20 @@ section {
     visibility: visible;
 }
 
+.module_wrapper {
+    overflow: scroll;
+}
+
 .module_wrapper .name {
-    position: absolute;
+    position: fixed;
+    z-index: 5;
     padding: 4px;
     font-size: 14px;
     background: rgb(44, 44, 44);
 }
 
 .module_wrapper .wrapper {
-    padding: 16px;
+    padding: 24px 16px;
     box-sizing: border-box;
 }
 
@@ -297,6 +301,6 @@ pre {
     background: #00f;
 }
 
-.mtbl-cell.notifying {
+.mtbl-cell.notified {
     background: #f00;
 }

js/module/array1d.js

@@ -4,12 +4,13 @@ function Array1DTracer(module) {
 
 Array1DTracer.prototype = $.extend(true, Object.create(Array2DTracer.prototype), {
     constructor: Array1DTracer,
-    _notify: function (idx1, idx2) {
-        if (idx2 === undefined) {
-            Array2DTracer.prototype._notify.call(this, 0, idx1);
-        } else {
-            Array2DTracer.prototype._notify.call(this, 0, idx1, 0, idx2);
-        }
+    _notify: function (idx, v) {
+        Array2DTracer.prototype._notify.call(this, 0, idx, v);
+        return this;
+    },
+    _denotify: function (idx) {
+        Array2DTracer.prototype._denotify.call(this, 0, idx);
+        return this;
     },
     _select: function (s, e) {
         if (e === undefined) {
@@ -17,16 +18,7 @@ Array1DTracer.prototype = $.extend(true, Object.create(Array2DTracer.prototype),
         } else {
             Array2DTracer.prototype._selectRow.call(this, 0, s, e);
         }
-    },
-    _selectSet: function (indexes) {
-        var coords = [];
-        indexes.forEach(function (index) {
-            coords.push({
-                x: 0,
-                y: index
-            });
-        });
-        Array2DTracer.prototype._selectSet.call(this, coords);
+        return this;
     },
     _deselect: function (s, e) {
         if (e === undefined) {
@@ -34,16 +26,7 @@ Array1DTracer.prototype = $.extend(true, Object.create(Array2DTracer.prototype),
         } else {
             Array2DTracer.prototype._deselectRow.call(this, 0, s, e);
         }
-    },
-    _deselectSet: function (indexes) {
-        var coords = [];
-        indexes.forEach(function (index) {
-            coords.push({
-                x: 0,
-                y: index
-            });
-        });
-        Array2DTracer.prototype._deselectSet.call(this, coords);
+        return this;
     },
     setData: function (D) {
         return Array2DTracer.prototype.setData.call(this, [D]);

js/module/array2d.js

@@ -12,54 +12,59 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
         this.$table = this.capsule.$table = $('<div class="mtbl-table">');
         this.$container.append(this.$table);
     },
-    _notify: function (x1, y1, x2, y2) {
+    _notify: function (x1, y1, v1, x2, y2, v2) {
         var second = x2 !== undefined && y2 !== undefined;
         tm.pushStep(this.capsule, {
-            type: 'notifying',
+            type: 'notify',
             x: x1,
             y: y1,
-            value: this.D[x1][y1]
+            v: v1
         }, !second);
         if (second) tm.pushStep(this.capsule, {
-            type: 'notifying',
+            type: 'notify',
             x: x2,
             y: y2,
-            value: this.D[x2][y2]
+            v: v2
         });
+        return this;
+    },
+    _denotify: function (x1, y1, x2, y2) {
+        var second = x2 !== undefined && y2 !== undefined;
         tm.pushStep(this.capsule, {
-            type: 'notified',
+            type: 'denotify',
             x: x1,
             y: y1
-        }, false);
+        });
         if (second) tm.pushStep(this.capsule, {
-            type: 'notified',
+            type: 'denotify',
             x: x2,
             y: y2
-        }, false);
+        });
+        return this;
     },
     _select: function (sx, sy, ex, ey) {
         this.pushSelectingStep('select', null, arguments);
+        return this;
     },
     _selectRow: function (x, sy, ey) {
         this.pushSelectingStep('select', 'row', arguments);
+        return this;
     },
     _selectCol: function (y, sx, ex) {
         this.pushSelectingStep('select', 'col', arguments);
-    },
-    _selectSet: function (coords) {
-        this.pushSelectingStep('select', 'set', arguments);
+        return this;
     },
     _deselect: function (sx, sy, ex, ey) {
         this.pushSelectingStep('deselect', null, arguments);
+        return this;
     },
     _deselectRow: function (x, sy, ey) {
         this.pushSelectingStep('deselect', 'row', arguments);
+        return this;
     },
     _deselectCol: function (y, sx, ex) {
         this.pushSelectingStep('deselect', 'col', arguments);
-    },
-    _deselectSet: function (coords) {
-        this.pushSelectingStep('deselect', 'set', arguments);
+        return this;
     },
     pushSelectingStep: function () {
         var args = Array.prototype.slice.call(arguments);
@@ -82,11 +87,6 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
                     ex: args[2]
                 };
                 break;
-            case 'set':
-                coord = {
-                    coords: args[0]
-                };
-                break;
             default:
                 if (args[2] === undefined && args[3] === undefined) {
                     coord = {
@@ -106,44 +106,37 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
             type: type
         };
         $.extend(step, coord);
-        tm.pushStep(this.capsule, step, type == 'select');
+        tm.pushStep(this.capsule, step);
     },
     processStep: function (step, options) {
         var tracer = this;
 
         switch (step.type) {
-            case 'notifying':
-                var $row = this.$table.find('.mtbl-row').eq(step.x);
-                $row.find('.mtbl-cell').eq(step.y).text(step.value);
-            case 'notified':
+            case 'notify':
+                if (step.v) {
+                    var $row = this.$table.find('.mtbl-row').eq(step.x);
+                    $row.find('.mtbl-cell').eq(step.y).text(refineNumber(step.v));
+                }
+            case 'denotify':
             case 'select':
             case 'deselect':
-                var colorClass = step.type == 'select' || step.type == 'deselect' ? this.colorClass.selected : this.colorClass.notifying;
-                var addClass = step.type == 'select' || step.type == 'notifying';
-                if (step.coords) {
-                    step.coords.forEach(function (coord) {
-                        var x = coord.x;
-                        var y = coord.y;
-                        tracer.paintColor(x, y, x, y, colorClass, addClass);
-                    });
-                } 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;
-                    this.paintColor(sx, sy, ex, ey, colorClass, addClass);
-                }
+                var colorClass = step.type == 'select' || step.type == 'deselect' ? this.colorClass.selected : this.colorClass.notified;
+                var addClass = step.type == 'select' || step.type == 'notify';
+                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;
+                this.paintColor(sx, sy, ex, ey, colorClass, addClass);
                 break;
             default:
                 Tracer.prototype.processStep.call(this, step, options);
         }
     },
     setData: function (D) {
-        this.D = D;
         this.viewX = this.viewY = 0;
         this.paddingH = 6;
         this.paddingV = 3;
@@ -152,7 +145,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
         if (Tracer.prototype.setData.apply(this, arguments)) {
             this.$table.find('.mtbl-row').each(function (i) {
                 $(this).children().each(function (j) {
-                    $(this).text(D[i][j]);
+                    $(this).text(refineNumber(D[i][j]));
                 });
             });
             return true;
@@ -165,7 +158,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
             for (var j = 0; j < D[i].length; j++) {
                 var $cell = $('<div class="mtbl-cell">')
                     .css(this.getCellCss())
-                    .text(D[i][j]);
+                    .text(refineNumber(D[i][j]));
                 $row.append($cell);
             }
         }
@@ -253,7 +246,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
     },
     colorClass: {
         selected: 'selected',
-        notifying: 'notifying'
+        notified: 'notified'
     }
 });
 

js/module/directed_graph.js

@@ -47,12 +47,15 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
     },
     _setTreeData: function (G, root) {
         tm.pushStep(this.capsule, {type: 'setTreeData', arguments: arguments});
+        return this;
     },
     _visit: function (target, source) {
         tm.pushStep(this.capsule, {type: 'visit', target: target, source: source});
+        return this;
     },
     _leave: function (target, source) {
         tm.pushStep(this.capsule, {type: 'leave', target: target, source: source});
+        return this;
     },
     processStep: function (step, options) {
         switch (step.type) {
@@ -71,8 +74,11 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
                     edge.color = color;
                     this.graph.dropEdge(edgeId).addEdge(edge);
                 }
-                var source = step.source;
-                if (source === undefined) source = '';
+                if (this.logTracer) {
+                    var source = step.source;
+                    if (source === undefined) source = '';
+                    this.logTracer.print(visit ? source + ' -> ' + step.target : source + ' <- ' + step.target);
+                }
                 break;
             default:
                 Tracer.prototype.processStep.call(this, step, options);

js/module/log_tracer.js

@@ -14,11 +14,12 @@ LogTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
     },
     _print: function (msg, delay) {
         tm.pushStep(this.capsule, {type: 'print', msg: msg}, delay);
+        return this;
     },
     processStep: function (step, options) {
         switch (step.type) {
             case 'print':
-                this.printTrace(step.msg);
+                this.print(step.msg);
                 break;
         }
     },
@@ -30,7 +31,7 @@ LogTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
 
         this.$wrapper.empty();
     },
-    printTrace: function (message) {
+    print: function (message) {
         this.$wrapper.append($('<span>').append(message + '<br/>'));
     },
     scrollToEnd: function (duration) {

js/module/tracer.js

@@ -14,19 +14,23 @@ Tracer.prototype = {
     init: function () {
         this.$container.append($('<span class="name">').text(this.name));
     },
-    _setData: function () {
-        tm.pushStep(this.capsule, {type: 'setData', arguments: arguments});
+    _setData: function (a) {
+        var args = Array.prototype.slice.call(arguments);
+        tm.pushStep(this.capsule, {type: 'setData', args: toJSON(args)});
+        return this;
     },
     _clear: function () {
         tm.pushStep(this.capsule, {type: 'clear'});
+        return this;
     },
     _next: function () {
         tm.newStep();
+        return this;
     },
     processStep: function (step, options) {
         switch (step.type) {
             case 'setData':
-                this.setData.apply(this, step.arguments);
+                this.setData.apply(this, fromJSON(step.args));
                 break;
             case 'clear':
                 this.clear();
@@ -34,7 +38,7 @@ Tracer.prototype = {
         }
     },
     setData: function () {
-        var data = JSON.stringify(arguments);
+        var data = toJSON(arguments);
         if (!this.new && this.lastData == data) return true;
         this.new = this.capsule.new = false;
         this.lastData = this.capsule.lastData = data;
@@ -46,6 +50,12 @@ Tracer.prototype = {
     },
     clear: function () {
     },
+    attach: function (tracer) {
+        if (tracer.module == LogTracer) {
+            this.logTracer = tracer;
+        }
+        return this;
+    },
     mousedown: function (e) {
     },
     mousemove: function (e) {

js/module/tracer_manager.js

@@ -41,7 +41,6 @@ TracerManager.prototype = {
             count++;
             selectedCapsule = this.add(newTracer);
         }
-        console.log(newTracer);
         selectedCapsule.name = newTracer.constructor.name + count;
         return selectedCapsule;
     },

js/module/weighted_directed_graph.js

@@ -31,18 +31,21 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
     },
     _weight: function (target, weight, delay) {
         tm.pushStep(this.capsule, {type: 'weight', target: target, weight: weight}, delay);
+        return this;
     },
     _visit: function (target, source, weight) {
         tm.pushStep(this.capsule, {type: 'visit', target: target, source: source, weight: weight});
+        return this;
     },
     _leave: function (target, source, weight) {
         tm.pushStep(this.capsule, {type: 'leave', target: target, source: source, weight: weight});
+        return this;
     },
     processStep: function (step, options) {
         switch (step.type) {
             case 'weight':
                 var targetNode = this.graph.nodes(this.n(step.target));
-                if (step.weight !== undefined) targetNode.weight = step.weight;
+                if (step.weight !== undefined) targetNode.weight = refineNumber(step.weight);
                 break;
             case 'visit':
             case 'leave':
@@ -50,15 +53,18 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
                 var targetNode = this.graph.nodes(this.n(step.target));
                 var color = visit ? this.color.visited : this.color.left;
                 targetNode.color = color;
-                if (step.weight !== undefined) targetNode.weight = step.weight;
+                if (step.weight !== undefined) targetNode.weight = refineNumber(step.weight);
                 if (step.source !== undefined) {
                     var edgeId = this.e(step.source, step.target);
                     var edge = this.graph.edges(edgeId);
                     edge.color = color;
                     this.graph.dropEdge(edgeId).addEdge(edge);
                 }
-                var source = step.source;
-                if (source === undefined) source = '';
+                if (this.logTracer) {
+                    var source = step.source;
+                    if (source === undefined) source = '';
+                    this.logTracer.print(visit ? source + ' -> ' + step.target : source + ' <- ' + step.target);
+                }
                 break;
             default:
                 DirectedGraphTracer.prototype.processStep.call(this, step, options);
@@ -91,7 +97,7 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
                         target: this.n(j),
                         color: this.color.default,
                         size: 1,
-                        weight: G[i][j]
+                        weight: refineNumber(G[i][j])
                     });
                 }
             }

js/script.js

@@ -389,4 +389,20 @@ if (/[?&]scratch-paper=/.test(location.search)) {
     var gistID = getParameterByName('scratch-paper');
     console.log(gistID);
     loadScratchPaper(gistID);
-}
\ No newline at end of file
+}
+
+var toJSON = function (obj) {
+    return JSON.stringify(obj, function (key, value) {
+        return value === Infinity ? "Infinity" : value;
+    });
+};
+
+var fromJSON = function (obj) {
+    return JSON.parse(obj, function (key, value) {
+        return value === "Infinity" ? Infinity : value;
+    });
+};
+
+var refineNumber = function (number) {
+    return number === Infinity ? '∞' : number;
+};
\ No newline at end of file