fix some bugs

css/stylesheet.css

@@ -234,6 +234,11 @@ pre {
     background: rgba(120, 0, 0, .8);
 }
 
+.mtbl-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
 .mtbl-table {
     display: inline-table;
     color: white;

js/module/array2d.js

@@ -3,7 +3,6 @@ var $table = null;
 function Array2DTracer(module) {
     if (Tracer.call(this, module || Array2DTracer)) {
         initTable();
-        initNavigator(this);
         return true;
     }
     return false;
@@ -44,12 +43,20 @@ Array2DTracer.prototype.createRandomData = function (N, M, min, max) {
 // Override
 Array2DTracer.prototype.setData = function (D) {
     this.D = D;
-    if (Tracer.prototype.setData.call(this, arguments)) return true;
-
     this.viewX = this.viewY = 0;
     this.paddingH = 6;
     this.paddingV = 3;
     this.fontSize = 16;
+
+    if (Tracer.prototype.setData.call(this, arguments)) {
+        $('.mtbl-row').each(function (i) {
+            $(this).children().each(function (j) {
+                $(this).text(D[i][j]);
+            });
+        });
+        return true;
+    }
+
     $table.empty();
     for (var i = 0; i < D.length; i++) {
         var $row = $('<div class="mtbl-row">');
@@ -167,8 +174,8 @@ Array2DTracer.prototype.processStep = function (step, options) {
 
 Array2DTracer.prototype.getCellCss = function () {
     return {
-        padding: this.paddingV + 'px ' + this.paddingH + 'px',
-        'font-size': this.fontSize
+        padding: this.paddingV.toFixed(1) + 'px ' + this.paddingH.toFixed(1) + 'px',
+        'font-size': this.fontSize.toFixed(1) + 'px'
     };
 };
 
@@ -198,48 +205,58 @@ Array2DTracer.prototype.prevStep = function () {
     this.step(finalIndex);
 };
 
-var initTable = function () {
-    $('.module_container').empty();
-    $table = $('<div class="mtbl-table">');
-    $('.module_container').append($table);
+// Override
+Array2DTracer.prototype.mousedown = function (e) {
+    Tracer.prototype.mousedown.call(this, e);
+
+    this.dragX = e.pageX;
+    this.dragY = e.pageY;
+    this.dragging = true;
 };
 
-var initNavigator = function (tracer) {
-    var x, y, dragging = false;
-    var $parent = $table.parent();
-    $parent.mousedown(function (e) {
-        x = e.pageX;
-        y = e.pageY;
-        dragging = true;
-    });
-    $parent.mousemove(function (e) {
-        if (dragging) {
-            tracer.viewX += e.pageX - x;
-            tracer.viewY += e.pageY - y;
-            x = e.pageX;
-            y = e.pageY;
-            tracer.refresh();
-        }
-    });
-    $(document).mouseup(function (e) {
-        dragging = false;
-    });
-
-    $parent.bind('DOMMouseScroll mousewheel', function (e, delta) {
-        e = e.originalEvent;
-        var delta = (e.wheelDelta !== undefined && e.wheelDelta) ||
-            (e.detail !== undefined && -e.detail);
-        var weight = 1.01;
-        var ratio = delta > 0 ? 1 / weight : weight;
-        if (tracer.fontSize < 8 && ratio < 1) return false;
-        if (tracer.fontSize > 36 && ratio > 1) return false;
-        tracer.paddingV *= ratio;
-        tracer.paddingH *= ratio;
-        tracer.fontSize *= ratio;
-        $('.mtbl-cell').css(tracer.getCellCss());
-        tracer.refresh();
-        e.preventDefault();
-    });
+// Override
+Array2DTracer.prototype.mousemove = function (e) {
+    Tracer.prototype.mousemove.call(this, e);
+
+    if (this.dragging) {
+        this.viewX += e.pageX - this.dragX;
+        this.viewY += e.pageY - this.dragY;
+        this.dragX = e.pageX;
+        this.dragY = e.pageY;
+        this.refresh();
+    }
+};
+
+// Override
+Array2DTracer.prototype.mouseup = function (e) {
+    Tracer.prototype.mouseup.call(this, e);
+
+    this.dragging = false;
+};
+
+// Override
+Array2DTracer.prototype.mousewheel = function (e) {
+    Tracer.prototype.mousewheel.call(this, e);
+
+    e.preventDefault();
+    e = e.originalEvent;
+    var delta = (e.wheelDelta !== undefined && e.wheelDelta) ||
+        (e.detail !== undefined && -e.detail);
+    var weight = 1.01;
+    var ratio = delta > 0 ? 1 / weight : weight;
+    if (this.fontSize < 4 && ratio < 1) return;
+    if (this.fontSize > 40 && ratio > 1) return;
+    this.paddingV *= ratio;
+    this.paddingH *= ratio;
+    this.fontSize *= ratio;
+    $('.mtbl-cell').css(this.getCellCss());
+    this.refresh();
+};
+
+var initTable = function () {
+    $module_container.empty();
+    $table = $('<div class="mtbl-table">');
+    $module_container.append($table);
 };
 
 var paintColor = function (sx, sy, ex, ey, colorClass, addClass) {
@@ -254,7 +271,7 @@ var paintColor = function (sx, sy, ex, ey, colorClass, addClass) {
 };
 
 var clearTableColor = function () {
-    $table.find('.mtbl-cell').css('background', '');
+    $table.find('.mtbl-cell').removeClass(Object.keys(tableColorClass).join(' '));
 };
 
 var tableColorClass = {

js/module/graph.js

@@ -182,7 +182,7 @@ GraphTracer.prototype.prevStep = function () {
 };
 
 var initGraph = function () {
-    $('.module_container').empty();
+    $module_container.empty();
     if (sigmaCanvas == null) {
         sigmaCanvas = $.extend(true, {}, sigma.canvas);
     } else {
@@ -190,7 +190,7 @@ var initGraph = function () {
     }
     s = new sigma({
         renderer: {
-            container: $('.module_container')[0],
+            container: $module_container[0],
             type: 'canvas'
         },
         settings: {

js/script.js

 $.ajaxSetup({cache: false, dataType: "text"});
 
+var $module_container = $('.module_container');
 var _tracer = new Tracer();
 var initEditor = function (id) {
     var editor = ace.edit(id);
@@ -257,4 +258,17 @@ for (var i = 0; i < dividers.length; i++) {
 
         $second.append($divider);
     })(divider);
-}
\ No newline at end of file
+}
+
+$module_container.mousedown(function (e) {
+    _tracer.mousedown(e);
+});
+$module_container.mousemove(function (e) {
+    _tracer.mousemove(e);
+});
+$(document).mouseup(function (e) {
+    _tracer.mouseup(e);
+});
+$module_container.bind('DOMMouseScroll mousewheel', function (e) {
+    _tracer.mousewheel(e);
+});
\ No newline at end of file

js/tracer.js

@@ -141,6 +141,18 @@ Tracer.prototype.nextStep = function () {
     this.step(this.traceIndex + 1);
 };
 
+Tracer.prototype.mousedown = function (e) {
+};
+
+Tracer.prototype.mousemove = function (e) {
+};
+
+Tracer.prototype.mouseup = function (e) {
+};
+
+Tracer.prototype.mousewheel = function (e) {
+};
+
 var printTrace = function (message) {
     $('#tab_trace .wrapper').append($('<span>').append(message + '<br/>'));
 };