highlight current line when running

css/stylesheet.css

@@ -536,3 +536,45 @@ button[disabled] {
     background: rgba(0, 0, 0, .15);
     box-shadow: 0px 0px 10px 3px #1a1a1a inset;
 }
+
+.executing {
+    background: rgba(255, 0, 0, .3);
+    position: absolute;
+    width: 100% !important;
+    left: 0 !important;
+
+    -webkit-animation: line_highlight .1s;
+    -moz-animation: line_highlight .1s;
+    -ms-animation: line_highlight .1s;
+    -o-animation: line_highlight .1s;
+    animation: line_highlight .1s;
+}
+
+@keyframes line_highlight {
+    from { background: rgba(255, 0, 0, .1); }
+    to   { background: rgba(255, 0, 0, .3); }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes line_highlight {
+    from { background: rgba(255, 0, 0, .1); }
+    to   { background: rgba(255, 0, 0, .3); }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes line_highlight {
+    from { background: rgba(255, 0, 0, .1); }
+    to   { background: rgba(255, 0, 0, .3); }
+}
+
+/* Internet Explorer */
+@-ms-keyframes line_highlight {
+    from { background: rgba(255, 0, 0, .1); }
+    to   { background: rgba(255, 0, 0, .3); }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes line_highlight {
+    from { background: rgba(255, 0, 0, .1); }
+    to   { background: rgba(255, 0, 0, .3); }
+}
\ No newline at end of file

js/dom/top_menu.js

 'use strict';
 
+const app = require('../app');
+
 const flowControlBtns = [ $('#btn_pause'), $('#btn_prev'), $('#btn_next') ];
 const setFlowControlState = (isDisabled) => {
   flowControlBtns.forEach($btn => $btn.attr('disabled', isDisabled));
@@ -16,6 +18,7 @@ const disableFlowControl = () => {
 const resetTopMenuButtons = () => {
   $('.top-menu-buttons button').removeClass('active');
   disableFlowControl();
+  app.getEditor().unhighlightLine();
 };
 
 const setInterval = (val) => {

js/editor/executor.js

 'use strict';
 
-const execute = (tracerManager, code) => {
+const execute = (tracerManager, code, dataLines) => {
   // all modules available to eval are obtained from window
   try {
     tracerManager.deallocateAll();
-    eval(code);
+    const lines = code.split('\n');
+    const newLines = [];
+    lines.forEach((line, i) => {
+      newLines.push(line.replace(/(.+\. *_wait *)(\( *\))/g, `$1(${i - dataLines})`));
+    });
+    eval(newLines.join('\n'));
     tracerManager.visualize();
   } catch (err) {
     return err;
@@ -18,7 +23,8 @@ const executeData = (tracerManager, algoData) => {
 };
 
 const executeDataAndCode = (tracerManager, algoData, algoCode) => {
-  return execute(tracerManager, `${algoData};${algoCode}`);
+  const dataLines = algoData.split('\n').length;
+  return execute(tracerManager, `${algoData}\n${algoCode}`, dataLines);
 };
 
 module.exports = {

js/editor/index.js

@@ -3,6 +3,7 @@
 const app = require('../app');
 const createEditor = require('./create');
 const Executor = require('./executor');
+const TopMenu = require('../dom/top_menu');
 
 function Editor(tracerManager) {
   if (!tracerManager) {
@@ -10,6 +11,7 @@ function Editor(tracerManager) {
   }
 
   ace.require('ace/ext/language_tools');
+  const Range = ace.require("ace/range").Range;
 
   this.dataEditor = createEditor('data');
   this.codeEditor = createEditor('code');
@@ -53,6 +55,17 @@ function Editor(tracerManager) {
     return Executor.executeDataAndCode(tracerManager, data, code);
   };
 
+  this.highlightLine = (lineNumber) => {
+    const session = this.codeEditor.getSession();
+    if (this.marker) session.removeMarker(this.marker);
+    this.marker = session.addMarker(new Range(lineNumber, 0, lineNumber, Infinity), "executing", "line", true);
+  };
+
+  this.unhighlightLine = () => {
+    const session = this.codeEditor.getSession();
+    if (this.marker) session.removeMarker(this.marker);
+  };
+
   // listeners
 
   this.dataEditor.on('change', () => {
@@ -74,7 +87,9 @@ function Editor(tracerManager) {
         code
       });
     }
+    tracerManager.reset();
+    TopMenu.resetTopMenuButtons();
   });
-};
+}
 
 module.exports = Editor;
\ No newline at end of file

js/module/tracer/directed_graph.js

@@ -203,9 +203,11 @@ class DirectedGraphTracer extends Tracer {
     super.clear();
 
     this.clearGraphColor();
+    this.refresh();
   }
 
   clearGraphColor() {
+    console.log('clearGraphColor');
     var tracer = this;
 
     this.graph.nodes().forEach(function (node) {

js/module/tracer/tracer.js

@@ -37,8 +37,8 @@ class Tracer {
     return this;
   }
 
-  _wait() {
-    this.manager.newStep();
+  _wait(line) {
+    this.manager.newStep(line);
     return this;
   }
 

js/tracer_manager/manager.js

 'use strict';
 
+const app = require('../app');
 const ModuleContainer = require('../dom/module_container');
 const TopMenu = require('../dom/top_menu');
 
@@ -139,19 +140,19 @@ TracerManager.prototype = {
   pushStep(capsule, step) {
     if (this.stepCnt++ > stepLimit) throw "Tracer's stack overflow";
     let len = this.traces.length;
-    let last = [];
-    if (len === 0) {
-      this.traces.push(last);
-    } else {
-      last = this.traces[len - 1];
-    }
+    if (len == 0) len += this.newStep();
+    const last = this.traces[len - 1];
     last.push(extend(step, {
       capsule
     }));
   },
 
-  newStep() {
-    this.traces.push([]);
+  newStep(line = -1) {
+    let len = this.traces.length;
+    if (len > 0 && ~line) {
+      this.traces[len - 1].push(line);
+    }
+    return this.traces.push([]);
   },
 
   pauseStep() {
@@ -177,6 +178,10 @@ TracerManager.prototype = {
     this.traceIndex = i;
     const trace = this.traces[i];
     trace.forEach((step) => {
+      if (typeof step === 'number') {
+        app.getEditor().highlightLine(step);
+        return;
+      }
       step.capsule.tracer.processStep(step, options);
     });
 

public/algorithm_visualizer.css

@@ -665,3 +665,30 @@ button[disabled] {
     background: rgba(0, 0, 0, .15);
     box-shadow: 0px 0px 10px 3px #1a1a1a inset;
 }
+
+.executing {
+    background: rgba(255, 0, 0, .3);
+    position: absolute;
+    width: 100% !important;
+    left: 0 !important;
+
+    -webkit-animation: line_highlight .1s;
+    animation: line_highlight .1s;
+}
+
+@keyframes line_highlight {
+    from { background: rgba(255, 0, 0, .1); }
+    to   { background: rgba(255, 0, 0, .3); }
+}
+
+/* Firefox < 16 */
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes line_highlight {
+    from { background: rgba(255, 0, 0, .1); }
+    to   { background: rgba(255, 0, 0, .3); }
+}
+
+/* Internet Explorer */
+
+/* Opera < 12.1 */
\ No newline at end of file

public/algorithm_visualizer.min.css

@@ -13,4 +13,4 @@
  * "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
  * https://github.com/simonwhitaker/github-fork-ribbon-css
 */.github-fork-ribbon{width:12.1em;height:12.1em;position:absolute;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px}.github-fork-ribbon.fixed{position:fixed}.github-fork-ribbon:after,.github-fork-ribbon:before{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.15));box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);pointer-events:auto}.github-fork-ribbon:after{content:attr(title);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,.7)}.github-fork-ribbon.left-bottom,.github-fork-ribbon.left-top{right:auto;left:0}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before{right:auto;left:-3.23em}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{top:auto;bottom:3.23em}.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
-#explanation,.btn,button{white-space:nowrap;text-overflow:ellipsis}.tab>.wrapper,nav,pre,section{box-sizing:border-box}.btn,button,pre{margin:0;outline:0}body,html{margin:0;padding:0;overflow:hidden}body{background:#3f3f3f;font-family:Roboto,sans-serif;color:#bbb;-webkit-font-smoothing:subpixel-antialiased}::-webkit-scrollbar{display:none}a{text-decoration:none}*{color:inherit}:not(input){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.btn{display:inline-table}.btn>.wrapper{display:table-cell;vertical-align:middle}.btn,button{vertical-align:top;border:none;height:100%;padding:0 12px;background:0 0;font-size:12px;overflow:hidden}.btn:hover,button:not([disabled]):hover{background:rgba(0,0,0,.15)!important;cursor:pointer}.btn.active,button.active{background:#262626}.btn input,button input{outline:0;background:rgba(0,0,0,.3);padding:4px;border:none}.divider{position:absolute!important;z-index:3}.tab,.workspace{position:absolute}.divider.vertical{cursor:ew-resize}.divider.horizontal{cursor:ns-resize}nav{height:30px;width:100%;padding:0 16px}nav h3{display:inline}.nav-arrow{padding:0 4px}#navigation span:empty+.nav-arrow{display:none}.top-menu-buttons{float:right;height:100%}#shared{width:128px}#shared.collapse{display:none}#interval{width:24px;text-align:right}.sidemenu{top:30px;right:85%;visibility:hidden;overflow:scroll;padding-bottom:120px}.sidemenu.active{visibility:visible}.sidemenu #footer{border-top:2px solid #262626}.sidemenu button{display:block;width:100%;height:30px;text-align:left}button.category{background:rgba(0,0,0,.1)}button.indent{padding-left:28px}button.collapse{display:none}.workspace{top:30px;bottom:0;left:15%;right:0}.editor_container,.viewer_container,nav,section{position:absolute;top:0;bottom:0;left:0;right:0}nav,section{border:1px solid #262626}.viewer_container{right:50%}.editor_container{left:50%}.module_container{overflow:hidden;border:none}.module_wrapper,.tab{overflow:scroll}.tab_container{top:30px}.tab{width:100%;height:100%;visibility:hidden}.tab>.wrapper{padding:16px}.tab.active{visibility:visible}.module_wrapper .name{position:fixed;z-index:5;padding:4px;font-size:14px;background:rgba(0,0,0,.4)}.module_wrapper>.wrapper{padding:24px 16px;box-sizing:border-box}#tab_desc h3{border-bottom:1px solid #515151;padding:5px;margin:2px}#tab_desc>.wrapper a,#tab_doc>.wrapper a{text-decoration:underline}.files_bar,.tab_bar{height:30px}.files_bar>*{position:absolute;height:100%}.files_bar>button{width:30px}.files_bar>button:disabled{background:rgba(0,0,0,.15)}.files_bar>.btn-left{left:0}.files_bar>.btn-right{right:0}.files_bar>.wrapper{left:30px;right:30px;overflow:scroll;white-space:nowrap}.files_bar>.wrapper>button{max-width:80%}.files_bar>.wrapper.shadow-left{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-right{box-shadow:inset -16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-left.shadow-right{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6),inset -16px 0 16px -16px rgba(0,0,0,.6)}.explanation_container{border:none;top:30px;height:30px;background:#262626;padding:8px;font-size:12px}#explanation:before{font-family:FontAwesome;content:'\f05a\00a0\00a0'}#explanation{display:block;overflow:hidden}.explanation_container:hover{z-index:5;height:auto;bottom:auto;box-shadow:0 8px 8px -8px rgba(0,0,0,.8)}.explanation_container:hover #explanation{white-space:normal}.data_container{top:60px;bottom:60%}.code_container{top:40%}pre{height:100%;width:100%;padding:0;border:1px solid #515151;background:#2b2b2b;resize:none}.toast_container{position:absolute;bottom:0;right:0;padding:12px;z-index:4}.toast{width:280px;border:1px solid;border-radius:4px;padding:16px;margin:16px}.toast.error{border-color:#960000;background:rgba(120,0,0,.8)}.toast.info{border-color:#009600;background:rgba(0,120,0,.8)}.github-fork-ribbon{position:fixed}#loading-slider,.break,.line{position:absolute}.github-fork-ribbon.left-bottom:before{background-color:#333}.fa-spin-faster{-webkit-animation:fa-spin 1s infinite ease-in-out;animation:fa-spin 1s infinite ease-in-out}.mtbl-wrapper{width:100%;height:100%}.mtbl-table{display:inline-table;color:#fff;table-layout:fixed}.mtbl-row{display:table-row}.mtbl-col{display:table-cell;vertical-align:middle;text-align:center;background:#888}.mtbl-empty-row{display:table-row;background:#3f3f3f;height:2px}.mtbl-empty-col{display:table-cell;background:#3f3f3f;width:2px}.mtbl-col.selected{background:#00f}.mtbl-col.notified{background:red}.mchrt-chart{width:100%;height:100%}#loading-slider{z-index:6;width:100%;height:2px}#loading-slider.loaded{visibility:hidden}.line{background:#4a8df8;width:100%;left:0;right:0;top:0;height:3px}.break{background:#222;width:6px;height:2px}.dot1{-webkit-animation:loading 2s infinite;animation:loading 2s infinite}.dot2{-webkit-animation:loading 2s .5s infinite;animation:loading 2s .5s infinite}.dot3{-webkit-animation:loading 2s 1s infinite;animation:loading 2s 1s infinite}@-webkit-keyframes loading{from{left:0}to{left:100%}}@keyframes loading{from{left:0}to{left:100%}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.applications li,.complexity{margin:10px 0}.complexity-type,.top-menu-buttons button.active{font-weight:700}.top-menu-buttons button.active .fa{color:#00e676}#btn_pause>.btn-text:before{content:'Pause'}#btn_pause.active>.btn-text:before{content:'Resume'}button[disabled]{cursor:not-allowed;opacity:.6}#btn_pause{width:86px}.top-menu-buttons button.active,.top-menu-buttons button:active{background:rgba(0,0,0,.15);box-shadow:0 0 10px 3px #1a1a1a inset}
\ No newline at end of file
+#explanation,.btn,button{white-space:nowrap;text-overflow:ellipsis}.tab>.wrapper,nav,pre,section{box-sizing:border-box}.btn,button,pre{margin:0;outline:0}body,html{margin:0;padding:0;overflow:hidden}body{background:#3f3f3f;font-family:Roboto,sans-serif;color:#bbb;-webkit-font-smoothing:subpixel-antialiased}::-webkit-scrollbar{display:none}a{text-decoration:none}*{color:inherit}:not(input){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.btn{display:inline-table}.btn>.wrapper{display:table-cell;vertical-align:middle}.btn,button{vertical-align:top;border:none;height:100%;padding:0 12px;background:0 0;font-size:12px;overflow:hidden}.btn:hover,button:not([disabled]):hover{background:rgba(0,0,0,.15)!important;cursor:pointer}.btn.active,button.active{background:#262626}.btn input,button input{outline:0;background:rgba(0,0,0,.3);padding:4px;border:none}.divider{position:absolute!important;z-index:3}.tab,.workspace{position:absolute}.divider.vertical{cursor:ew-resize}.divider.horizontal{cursor:ns-resize}nav{height:30px;width:100%;padding:0 16px}nav h3{display:inline}.nav-arrow{padding:0 4px}#navigation span:empty+.nav-arrow{display:none}.top-menu-buttons{float:right;height:100%}#shared{width:128px}#shared.collapse{display:none}#interval{width:24px;text-align:right}.sidemenu{top:30px;right:85%;visibility:hidden;overflow:scroll;padding-bottom:120px}.sidemenu.active{visibility:visible}.sidemenu #footer{border-top:2px solid #262626}.sidemenu button{display:block;width:100%;height:30px;text-align:left}button.category{background:rgba(0,0,0,.1)}button.indent{padding-left:28px}button.collapse{display:none}.workspace{top:30px;bottom:0;left:15%;right:0}.editor_container,.viewer_container,nav,section{position:absolute;top:0;bottom:0;left:0;right:0}nav,section{border:1px solid #262626}.viewer_container{right:50%}.editor_container{left:50%}.module_container{overflow:hidden;border:none}.module_wrapper,.tab{overflow:scroll}.tab_container{top:30px}.tab{width:100%;height:100%;visibility:hidden}.tab>.wrapper{padding:16px}.tab.active{visibility:visible}.module_wrapper .name{position:fixed;z-index:5;padding:4px;font-size:14px;background:rgba(0,0,0,.4)}.module_wrapper>.wrapper{padding:24px 16px;box-sizing:border-box}#tab_desc h3{border-bottom:1px solid #515151;padding:5px;margin:2px}#tab_desc>.wrapper a,#tab_doc>.wrapper a{text-decoration:underline}.files_bar,.tab_bar{height:30px}.files_bar>*{position:absolute;height:100%}.files_bar>button{width:30px}.files_bar>button:disabled{background:rgba(0,0,0,.15)}.files_bar>.btn-left{left:0}.files_bar>.btn-right{right:0}.files_bar>.wrapper{left:30px;right:30px;overflow:scroll;white-space:nowrap}.files_bar>.wrapper>button{max-width:80%}.files_bar>.wrapper.shadow-left{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-right{box-shadow:inset -16px 0 16px -16px rgba(0,0,0,.6)}.files_bar>.wrapper.shadow-left.shadow-right{box-shadow:inset 16px 0 16px -16px rgba(0,0,0,.6),inset -16px 0 16px -16px rgba(0,0,0,.6)}.explanation_container{border:none;top:30px;height:30px;background:#262626;padding:8px;font-size:12px}#explanation:before{font-family:FontAwesome;content:'\f05a\00a0\00a0'}#explanation{display:block;overflow:hidden}.explanation_container:hover{z-index:5;height:auto;bottom:auto;box-shadow:0 8px 8px -8px rgba(0,0,0,.8)}.explanation_container:hover #explanation{white-space:normal}.data_container{top:60px;bottom:60%}.code_container{top:40%}pre{height:100%;width:100%;padding:0;border:1px solid #515151;background:#2b2b2b;resize:none}.toast_container{position:absolute;bottom:0;right:0;padding:12px;z-index:4}.toast{width:280px;border:1px solid;border-radius:4px;padding:16px;margin:16px}.toast.error{border-color:#960000;background:rgba(120,0,0,.8)}.toast.info{border-color:#009600;background:rgba(0,120,0,.8)}.github-fork-ribbon{position:fixed}#loading-slider,.break,.executing,.line{position:absolute}.github-fork-ribbon.left-bottom:before{background-color:#333}.fa-spin-faster{-webkit-animation:fa-spin 1s infinite ease-in-out;animation:fa-spin 1s infinite ease-in-out}.mtbl-wrapper{width:100%;height:100%}.mtbl-table{display:inline-table;color:#fff;table-layout:fixed}.mtbl-row{display:table-row}.mtbl-col{display:table-cell;vertical-align:middle;text-align:center;background:#888}.mtbl-empty-row{display:table-row;background:#3f3f3f;height:2px}.mtbl-empty-col{display:table-cell;background:#3f3f3f;width:2px}.mtbl-col.selected{background:#00f}.mtbl-col.notified{background:red}.mchrt-chart{width:100%;height:100%}#loading-slider{z-index:6;width:100%;height:2px}#loading-slider.loaded{visibility:hidden}.line{background:#4a8df8;width:100%;left:0;right:0;top:0;height:3px}.break{background:#222;width:6px;height:2px}.dot1{-webkit-animation:loading 2s infinite;animation:loading 2s infinite}.dot2{-webkit-animation:loading 2s .5s infinite;animation:loading 2s .5s infinite}.dot3{-webkit-animation:loading 2s 1s infinite;animation:loading 2s 1s infinite}@-webkit-keyframes loading{from{left:0}to{left:100%}}@keyframes loading{from{left:0}to{left:100%}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.applications li,.complexity{margin:10px 0}.complexity-type,.top-menu-buttons button.active{font-weight:700}.top-menu-buttons button.active .fa{color:#00e676}#btn_pause>.btn-text:before{content:'Pause'}#btn_pause.active>.btn-text:before{content:'Resume'}button[disabled]{cursor:not-allowed;opacity:.6}#btn_pause{width:86px}.top-menu-buttons button.active,.top-menu-buttons button:active{background:rgba(0,0,0,.15);box-shadow:0 0 10px 3px #1a1a1a inset}.executing{background:rgba(255,0,0,.3);width:100%!important;left:0!important;-webkit-animation:line_highlight .1s;animation:line_highlight .1s}@keyframes line_highlight{from{background:rgba(255,0,0,.1)}to{background:rgba(255,0,0,.3)}}@-webkit-keyframes line_highlight{from{background:rgba(255,0,0,.1)}to{background:rgba(255,0,0,.3)}}
\ No newline at end of file