remove global vars

index.html

@@ -111,7 +111,7 @@
 <script src="js/sigma/plugins/sigma.plugins.dragNodes.min.js"></script>
 <script src="js/ace/ace.js"></script>
 <script src="js/ace/ext-language_tools.js"></script>
-<script src="js/module/tracer_manager.js"></script>
+<script src="js/tracer_manager.js"></script>
 <script src="js/module/tracer.js"></script>
 <script src="js/module/log_tracer.js"></script>
 <script src="js/module/array2d.js"></script>

js/module/array2d.js

@@ -13,7 +13,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
         this.$container.append(this.$table);
     },
     _notify: function (x, y, v) {
-        tm.pushStep(this.capsule, {
+        this.tm.pushStep(this.capsule, {
             type: 'notify',
             x: x,
             y: y,
@@ -22,7 +22,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
         return this;
     },
     _denotify: function (x, y) {
-        tm.pushStep(this.capsule, {
+        this.tm.pushStep(this.capsule, {
             type: 'denotify',
             x: x,
             y: y
@@ -93,14 +93,14 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
             type: type
         };
         $.extend(step, coord);
-        tm.pushStep(this.capsule, step);
+        this.tm.pushStep(this.capsule, step);
     },
     processStep: function (step, options) {
         switch (step.type) {
             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));
+                    $row.find('.mtbl-cell').eq(step.y).text(TracerUtil.refineNumber(step.v));
                 }
             case 'denotify':
             case 'select':
@@ -130,7 +130,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(refineNumber(D[i][j]));
+                    $(this).text(TracerUtil.refineNumber(D[i][j]));
                 });
             });
             return true;
@@ -143,7 +143,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(refineNumber(D[i][j]));
+                    .text(TracerUtil.refineNumber(D[i][j]));
                 $row.append($cell);
             }
         }

js/module/directed_graph.js

@@ -46,15 +46,15 @@ DirectedGraphTracer.prototype = $.extend(true, Object.create(Tracer.prototype),
         this.graph = this.capsule.graph = this.s.graph;
     },
     _setTreeData: function (G, root) {
-        tm.pushStep(this.capsule, {type: 'setTreeData', arguments: arguments});
+        this.tm.pushStep(this.capsule, {type: 'setTreeData', arguments: arguments});
         return this;
     },
     _visit: function (target, source) {
-        tm.pushStep(this.capsule, {type: 'visit', target: target, source: source});
+        this.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});
+        this.tm.pushStep(this.capsule, {type: 'leave', target: target, source: source});
         return this;
     },
     processStep: function (step, options) {

js/module/log_tracer.js

@@ -13,7 +13,7 @@ LogTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
         this.$container.append(this.$wrapper);
     },
     _print: function (msg) {
-        tm.pushStep(this.capsule, {type: 'print', msg: msg});
+        this.tm.pushStep(this.capsule, {type: 'print', msg: msg});
         return this;
     },
     processStep: function (step, options) {

js/module/tracer.js

 function Tracer(name) {
     this.module = this.constructor;
-    this.capsule = tm.allocate(this);
+    this.capsule = this.tm.allocate(this);
     $.extend(this, this.capsule);
     this.setName(name);
     return this.new;
@@ -8,23 +8,24 @@ function Tracer(name) {
 
 Tracer.prototype = {
     constructor: Tracer,
+    tm: null,
     _setData: function () {
         var args = Array.prototype.slice.call(arguments);
-        tm.pushStep(this.capsule, {type: 'setData', args: toJSON(args)});
+        this.tm.pushStep(this.capsule, {type: 'setData', args: TracerUtil.toJSON(args)});
         return this;
     },
     _clear: function () {
-        tm.pushStep(this.capsule, {type: 'clear'});
+        this.tm.pushStep(this.capsule, {type: 'clear'});
         return this;
     },
     _wait: function () {
-        tm.newStep();
+        this.tm.newStep();
         return this;
     },
     processStep: function (step, options) {
         switch (step.type) {
             case 'setData':
-                this.setData.apply(this, fromJSON(step.args));
+                this.setData.apply(this, TracerUtil.fromJSON(step.args));
                 break;
             case 'clear':
                 this.clear();
@@ -42,7 +43,7 @@ Tracer.prototype = {
         $name.text(name || this.defaultName);
     },
     setData: function () {
-        var data = toJSON(arguments);
+        var data = TracerUtil.toJSON(arguments);
         if (!this.new && this.lastData == data) return true;
         this.new = this.capsule.new = false;
         this.lastData = this.capsule.lastData = data;

js/module/weighted_directed_graph.js

@@ -30,22 +30,22 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
         });
     },
     _weight: function (target, weight) {
-        tm.pushStep(this.capsule, {type: 'weight', target: target, weight: weight});
+        this.tm.pushStep(this.capsule, {type: 'weight', target: target, weight: weight});
         return this;
     },
     _visit: function (target, source, weight) {
-        tm.pushStep(this.capsule, {type: 'visit', target: target, source: source, weight: weight});
+        this.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});
+        this.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 = refineNumber(step.weight);
+                if (step.weight !== undefined) targetNode.weight = TracerUtil.refineNumber(step.weight);
                 break;
             case 'visit':
             case 'leave':
@@ -53,7 +53,7 @@ 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 = refineNumber(step.weight);
+                if (step.weight !== undefined) targetNode.weight = TracerUtil.refineNumber(step.weight);
                 if (step.source !== undefined) {
                     var edgeId = this.e(step.source, step.target);
                     var edge = this.graph.edges(edgeId);
@@ -97,7 +97,7 @@ WeightedDirectedGraphTracer.prototype = $.extend(true, Object.create(DirectedGra
                         target: this.n(j),
                         color: this.color.default,
                         size: 1,
-                        weight: refineNumber(G[i][j])
+                        weight: TracerUtil.refineNumber(G[i][j])
                     });
                 }
             }

js/script.js

-$.ajaxSetup({cache: false, dataType: "text"});
+var executeData = function (tracerManager, data) {
+    try {
+        tracerManager.deallocateAll();
+        eval(data);
+        tracerManager.visualize();
+    } catch (err) {
+        return err;
+    } finally {
+        tracerManager.removeUnallocated();
+    }
+};
+var executeDataAndCode = function (tracerManager, data, code) {
+    try {
+        tracerManager.deallocateAll();
+        eval(data);
+        eval(code);
+        tracerManager.visualize();
+    } catch (err) {
+        return err;
+    } finally {
+        tracerManager.removeUnallocated();
+    }
+};
+(function () {
+    $.ajaxSetup({cache: false, dataType: "text"});
 
-$(document).on('click', 'a', function (e) {
+    $(document).on('click', 'a', function (e) {
         e.preventDefault();
 
         if (!window.open($(this).attr('href'), '_blank')) {
             alert('Please allow popups for this site');
         }
-});
-$('.btn input').click(function (e) {
+    });
+    $('.btn input').click(function (e) {
         e.stopPropagation();
-});
+    });
 
-var tm = new TracerManager();
+    var tm = new TracerManager();
+    Tracer.prototype.tm = tm;
 
-$('#interval').on('change', function () {
+    $('#interval').on('change', function () {
         tm.interval = Number.parseFloat($(this).val() * 1000);
         showInfoToast('Tracing interval has been set to ' + tm.interval / 1000 + ' second(s).');
-});
+    });
 
-var $module_container = $('.module_container');
-ace.require("ace/ext/language_tools");
-var initEditor = function (id) {
+    var $module_container = $('.module_container');
+    ace.require("ace/ext/language_tools");
+    var initEditor = function (id) {
         var editor = ace.edit(id);
         editor.setOptions({
             enableBasicAutocompletion: true,
@@ -31,41 +56,34 @@ var initEditor = function (id) {
         editor.session.setMode("ace/mode/javascript");
         editor.$blockScrolling = Infinity;
         return editor;
-};
-var dataEditor = initEditor('data');
-var codeEditor = initEditor('code');
-var lastFile = null;
-dataEditor.on('change', function () {
+    };
+    var dataEditor = initEditor('data');
+    var codeEditor = initEditor('code');
+    var lastFile = null;
+    dataEditor.on('change', function () {
         var data = dataEditor.getValue();
         if (lastFile) cachedFile[lastFile].data = data;
-    try {
-        tm.deallocateAll();
-        eval(data);
-        tm.visualize();
-    } catch (err) {
-    } finally {
-        tm.removeUnallocated();
-    }
-});
-codeEditor.on('change', function () {
+        executeData(tm, data);
+    });
+    codeEditor.on('change', function () {
         var code = codeEditor.getValue();
         if (lastFile) cachedFile[lastFile].code = code;
-});
+    });
 
-var cachedFile = {};
-var loading = false;
-var isScratchPaper = function (category, algorithm) {
+    var cachedFile = {};
+    var loading = false;
+    var isScratchPaper = function (category, algorithm) {
         return category == null && algorithm == 'scratch_paper';
-};
-var getAlgorithmDir = function (category, algorithm) {
+    };
+    var getAlgorithmDir = function (category, algorithm) {
         if (isScratchPaper(category, algorithm)) return './algorithm/scratch_paper/';
         return './algorithm/' + category + '/' + algorithm + '/';
-};
-var getFileDir = function (category, algorithm, file) {
+    };
+    var getFileDir = function (category, algorithm, file) {
         if (isScratchPaper(category, algorithm)) return './algorithm/scratch_paper/';
         return './algorithm/' + category + '/' + algorithm + '/' + file + '/';
-};
-var loadFile = function (category, algorithm, file, explanation) {
+    };
+    var loadFile = function (category, algorithm, file, explanation) {
         if (checkLoading()) return;
         $('#explanation').html(explanation);
 
@@ -94,15 +112,15 @@ var loadFile = function (category, algorithm, file, explanation) {
                 }).fail(onFail);
             }).fail(onFail);
         }
-};
-var checkLoading = function () {
+    };
+    var checkLoading = function () {
         if (loading) {
             showErrorToast('Wait until it completes loading of previous file.');
             return true;
         }
         return false;
-};
-var showDescription = function (data) {
+    };
+    var showDescription = function (data) {
         var $container = $('#tab_desc > .wrapper');
         $container.empty();
         for (var key in data) {
@@ -124,8 +142,8 @@ var showDescription = function (data) {
                 }
             }
         }
-};
-var showAlgorithm = function (category, algorithm) {
+    };
+    var showAlgorithm = function (category, algorithm) {
         var $menu;
         var category_name;
         var algorithm_name;
@@ -150,8 +168,8 @@ var showAlgorithm = function (category, algorithm) {
         lastFile = null;
         dataEditor.setValue('');
         codeEditor.setValue('');
-};
-var showFiles = function (category, algorithm, files) {
+    };
+    var showFiles = function (category, algorithm, files) {
         $('.files_bar > .wrapper').empty();
         var init = false;
         for (var file in files) {
@@ -169,8 +187,8 @@ var showFiles = function (category, algorithm, files) {
             })(file, files[file]);
         }
         $('.files_bar > .wrapper').scroll();
-};
-$('.files_bar > .btn-left').click(function () {
+    };
+    $('.files_bar > .btn-left').click(function () {
         var $wrapper = $('.files_bar > .wrapper');
         var clipWidth = $wrapper.width();
         var scrollLeft = $wrapper.scrollLeft();
@@ -182,8 +200,8 @@ $('.files_bar > .btn-left').click(function () {
                 return false;
             }
         });
-});
-$('.files_bar > .btn-right').click(function () {
+    });
+    $('.files_bar > .btn-right').click(function () {
         var $wrapper = $('.files_bar > .wrapper');
         var clipWidth = $wrapper.width();
         var scrollLeft = $wrapper.scrollLeft();
@@ -195,8 +213,8 @@ $('.files_bar > .btn-right').click(function () {
                 return false;
             }
         });
-});
-$('.files_bar > .wrapper').scroll(function () {
+    });
+    $('.files_bar > .wrapper').scroll(function () {
         var definitelyBigger = function (x, y) {
             return x > y + 2;
         };
@@ -217,8 +235,8 @@ $('.files_bar > .wrapper').scroll(function () {
         $wrapper.toggleClass('shadow-right', righter);
         $('.files_bar > .btn-left').attr('disabled', !lefter);
         $('.files_bar > .btn-right').attr('disabled', !righter);
-});
-var loadAlgorithm = function (category, algorithm) {
+    });
+    var loadAlgorithm = function (category, algorithm) {
         if (checkLoading()) return;
         showAlgorithm(category, algorithm);
 
@@ -231,10 +249,10 @@ var loadAlgorithm = function (category, algorithm) {
             showDescription(data);
             showFiles(category, algorithm, files);
         });
-};
-var list = {};
-var anyOpened = false;
-$.getJSON('./algorithm/category.json', function (data) {
+    };
+    var list = {};
+    var anyOpened = false;
+    $.getJSON('./algorithm/category.json', function (data) {
         list = data;
         for (var category in list) {
             (function (category) {
@@ -265,16 +283,16 @@ $.getJSON('./algorithm/category.json', function (data) {
                 }
             })(category);
         }
-});
-$('#powered-by').click(function () {
+    });
+    $('#powered-by').click(function () {
         $('#powered-by-list button').toggleClass('collapse');
-});
-$('#scratch-paper').click(function () {
+    });
+    $('#scratch-paper').click(function () {
         loadAlgorithm(null, 'scratch_paper');
-});
+    });
 
-var sidemenu_percent;
-$('#navigation').click(function () {
+    var sidemenu_percent;
+    $('#navigation').click(function () {
         var $sidemenu = $('.sidemenu');
         var $workspace = $('.workspace');
         $sidemenu.toggleClass('active');
@@ -288,9 +306,9 @@ $('#navigation').click(function () {
             $workspace.css('left', 0);
         }
         tm.resize();
-});
+    });
 
-var showErrorToast = function (err) {
+    var showErrorToast = function (err) {
         var $toast = $('<div class="toast error">').append(err);
         $('.toast_container').append($toast);
         setTimeout(function () {
@@ -298,9 +316,9 @@ var showErrorToast = function (err) {
                 $toast.remove();
             });
         }, 3000);
-};
+    };
 
-var showInfoToast = function (info) {
+    var showInfoToast = function (info) {
         var $toast = $('<div class="toast info">').append(info);
         $('.toast_container').append($toast);
         setTimeout(function () {
@@ -308,12 +326,12 @@ var showInfoToast = function (info) {
                 $toast.remove();
             });
         }, 3000);
-};
+    };
 
-$('#shared').mouseup(function () {
+    $('#shared').mouseup(function () {
         $(this).select();
-});
-$('#btn_share').click(function () {
+    });
+    $('#btn_share').click(function () {
         var $icon = $(this).find('.fa-share');
         $icon.addClass('fa-spin fa-spin-faster');
         shareScratchPaper(function (url) {
@@ -322,60 +340,56 @@ $('#btn_share').click(function () {
             $('#shared').val(url);
             showInfoToast('Shareable link is created.');
         });
-});
-$('#btn_run').click(function () {
+    });
+    $('#btn_run').click(function () {
         $('#btn_trace').click();
-    try {
-        tm.deallocateAll();
-        eval(dataEditor.getValue());
-        eval(codeEditor.getValue());
-        tm.visualize();
-    } catch (err) {
+        var data = dataEditor.getValue();
+        var code = codeEditor.getValue();
+        var err = executeDataAndCode(tm, data, code);
+        if (err) {
             console.error(err);
             showErrorToast(err);
-    } finally {
-        tm.removeUnallocated();
         }
-});
-$('#btn_pause').click(function () {
+    });
+    $('#btn_pause').click(function () {
         if (tm.isPause()) {
             tm.resumeStep();
         } else {
             tm.pauseStep();
         }
-});
-$('#btn_prev').click(function () {
+    });
+    $('#btn_prev').click(function () {
         tm.pauseStep();
         tm.prevStep();
-});
-$('#btn_next').click(function () {
+    });
+    $('#btn_next').click(function () {
         tm.pauseStep();
         tm.nextStep();
-});
+    });
 
-$('#btn_desc').click(function () {
+    $('#btn_desc').click(function () {
         $('.tab_container > .tab').removeClass('active');
         $('#tab_desc').addClass('active');
         $('.tab_bar > button').removeClass('active');
         $(this).addClass('active');
-});
-$('#btn_trace').click(function () {
+    });
+    $('#btn_trace').click(function () {
         $('.tab_container > .tab').removeClass('active');
         $('#tab_module').addClass('active');
         $('.tab_bar > button').removeClass('active');
         $(this).addClass('active');
-});
+    });
 
-$(window).resize(function () {
+    $(window).resize(function () {
         tm.resize();
-});
+    });
 
-var dividers = [
+    var dividers = [
         ['v', $('.sidemenu'), $('.workspace')],
         ['v', $('.viewer_container'), $('.editor_container')],
         ['h', $('.data_container'), $('.code_container')]
-];
-for (var i = 0; i < dividers.length; i++) {
+    ];
+    for (var i = 0; i < dividers.length; i++) {
         var divider = dividers[i];
         (function (divider) {
             var vertical = divider[0] == 'v';
@@ -447,24 +461,24 @@ for (var i = 0; i < dividers.length; i++) {
 
             $second.append($divider);
         })(divider);
-}
+    }
 
-$module_container.on('mousedown', '.module_wrapper', function (e) {
+    $module_container.on('mousedown', '.module_wrapper', function (e) {
         tm.findOwner(this).mousedown(e);
-});
-$module_container.on('mousemove', '.module_wrapper', function (e) {
+    });
+    $module_container.on('mousemove', '.module_wrapper', function (e) {
         tm.findOwner(this).mousemove(e);
-});
-$(document).mouseup(function (e) {
+    });
+    $(document).mouseup(function (e) {
         tm.command('mouseup', e);
-});
-$module_container.on('DOMMouseScroll mousewheel', '.module_wrapper', function (e) {
+    });
+    $module_container.on('DOMMouseScroll mousewheel', '.module_wrapper', function (e) {
         tm.findOwner(this).mousewheel(e);
-});
+    });
 
 // Share scratch paper
 
-var getParameterByName = function (name) {
+    var getParameterByName = function (name) {
         var url = window.location.href;
         name = name.replace(/[\[\]]/g, "\\$&");
         var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
@@ -472,9 +486,9 @@ var getParameterByName = function (name) {
         if (!results) return null;
         if (!results[2]) return '';
         return decodeURIComponent(results[2].replace(/\+/g, " "));
-};
+    };
 
-var shareScratchPaper = function (callback) {
+    var shareScratchPaper = function (callback) {
         var gist = {
             'description': 'temp',
             'public': true,
@@ -487,9 +501,9 @@ var shareScratchPaper = function (callback) {
             var data = JSON.parse(res);
             if (callback) callback(location.protocol + '//' + location.host + location.pathname + '?scratch-paper=' + data.id);
         });
-};
+    };
 
-var loadScratchPaper = function (gistID) {
+    var loadScratchPaper = function (gistID) {
         anyOpened = true;
         $.get('https://api.github.com/gists/' + gistID, function (res) {
             var data = JSON.parse(res);
@@ -503,25 +517,10 @@ var loadScratchPaper = function (gistID) {
             };
             loadAlgorithm(category, algorithm);
         });
-};
+    };
 
-var gistID = getParameterByName('scratch-paper');
-if (gistID) {
+    var gistID = getParameterByName('scratch-paper');
+    if (gistID) {
         loadScratchPaper(gistID);
-}
-
-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
+    }
+})();
\ No newline at end of file

js/module/tracer_manager.js → js/tracer_manager.js

@@ -10,7 +10,7 @@ var TracerManager = function () {
 TracerManager.prototype = {
     add: function (tracer) {
         var $container = $('<section class="module_wrapper">');
-        $module_container.append($container);
+        $('.module_container').append($container);
         var capsule = {
             module: tracer.module,
             tracer: tracer,
@@ -177,3 +177,19 @@ TracerManager.prototype = {
         return selectedCapsule.tracer;
     }
 };
+
+var TracerUtil = {
+    toJSON: function (obj) {
+        return JSON.stringify(obj, function (key, value) {
+            return value === Infinity ? "Infinity" : value;
+        });
+    },
+    fromJSON: function (obj) {
+        return JSON.parse(obj, function (key, value) {
+            return value === "Infinity" ? Infinity : value;
+        });
+    },
+    refineNumber: function (number) {
+        return number === Infinity ? '∞' : number;
+    }
+};
\ No newline at end of file