Toggle for auto-updating from code editor

nengo_gui/static/ace.js

@@ -50,6 +50,8 @@ Nengo.Ace = function (uid, args) {
     this.console.appendChild(this.console_error);
 
     this.save_disabled = true;
+    this.update_trigger = true; // if an update of the model from the code editor is allowed
+    this.auto_update = true; // automatically update the model based on the text
 
     //Setup the button to toggle the code editor
     $('#Toggle_ace').on('click', function(){self.toggle_shown();});
@@ -96,9 +98,21 @@ Nengo.Ace = function (uid, args) {
         }
     });
 
+    // automatically update the model based on the text
+    Object.defineProperty(this, 'auto_update', {
+        get: function() {
+            return Nengo.config.auto_update;
+        },
+        set: function(val) {
+            this.update_trigger = val;
+            Nengo.config.auto_update = val;
+        }
+    });
+
     this.width = Nengo.config.editor_width;
     this.hidden = Nengo.config.hide_editor;
     this.font_size = Nengo.config.editor_font_size;
+    this.auto_update = Nengo.config.auto_update;
     this.redraw();
 
     $(window).on('resize', function() {self.on_resize();});
@@ -132,9 +146,16 @@ Nengo.Ace.prototype.schedule_updates = function () {
     setInterval(function () {
         var editor_code = self.editor.getValue();
         if (editor_code != self.current_code) {
-            self.ws.send(JSON.stringify({code:editor_code, save:false}));
-            self.current_code = editor_code;
-            self.enable_save();
+            if (self.update_trigger) {
+                self.update_trigger = self.auto_update;
+                self.ws.send(JSON.stringify({code:editor_code, save:false}));
+                self.current_code = editor_code;
+                self.enable_save();
+                $('#Sync_editor_button').addClass('disabled');
+            } else {
+                // Visual indication that the code is different than the model displayed
+                $('#Sync_editor_button').removeClass('disabled');
+            }
         }
     }, 100)
 }

nengo_gui/static/config.js

@@ -7,7 +7,7 @@ Nengo.Config = function(parent, args) {
             get: function() {
                 var val = localStorage.getItem("ng." + key) || default_val;
                 if (type === "boolean") {
-                    return val === "true";
+                    return val === "true" || val === true;
                 } else if (type === "number") {
                     return Number(val);
                 } else {
@@ -31,6 +31,7 @@ Nengo.Config = function(parent, args) {
     define_option("hide_editor", false);
     define_option("editor_width", 580);
     define_option("editor_font_size", 12);
+    define_option("auto_update", true);
 };
 
 Nengo.Config.prototype.restore_defaults = function() {

nengo_gui/static/hotkeys.js

@@ -24,6 +24,9 @@ Nengo.Hotkeys = function () {
                     case 8:
                         var key = 'backspace';
                         break;
+                    case 13:
+                        var key = 'enter';
+                        break;
                     default:
                         var key = String.fromCharCode(ev.keyCode)
                 }
@@ -51,8 +54,8 @@ Nengo.Hotkeys = function () {
                 Nengo.netgraph.notify({ undo: "0" });
                 ev.preventDefault();
             }
-            // run model with spacebar
-            if (key == ' ' && !on_editor) {
+            // run model with spacebar or with shift-enter
+            if ((key == ' ' && !on_editor) || (ev.shiftKey && key == 'enter')) {
                 if (!ev.repeat) {
                     sim.on_pause_click();
                 }
@@ -72,6 +75,17 @@ Nengo.Hotkeys = function () {
             if (key == 'backspace' && !on_editor) {
                 ev.preventDefault();
             }
+            // toggle auto-updating with TODO: pick a good shortcut
+            if (ctrl && ev.shiftKey && key == '1') {
+                Nengo.ace.auto_update = !Nengo.ace.auto_update;
+                Nengo.ace.update_trigger = Nengo.ace.auto_update;
+                ev.preventDefault();
+            }
+            // trigger a single update with TODO: pick a good shortcut
+            if (ctrl && !ev.shiftKey && key == '1') {
+                Nengo.ace.update_trigger = true;
+                ev.preventDefault();
+            }
         }
     });
 }

nengo_gui/static/modal.js

@@ -96,7 +96,7 @@ Nengo.Modal.prototype.help_body = function() {
     this.$div.find('.modal-dialog').addClass('modal-sm');
     var $body = $('<table class="table-striped" width=100%>');
     $body.append('<tr><td>Play / pause</td>' +
-                 '<td align="right">Spacebar</td></tr>');
+                 '<td align="right">Spacebar, ' + shift + '-Enter</td></tr>'); // TODO: make this fit
     $body.append('<tr><td>Undo</td>' +
                  '<td align="right">' + ctrl + '-z</td></tr>');
     $body.append('<tr><td>Redo</td>'+
@@ -106,6 +106,10 @@ Nengo.Modal.prototype.help_body = function() {
                  '<td align="right">' + ctrl + '-m</td></tr>');
     $body.append('<tr><td>Toggle editor</td>'+
                  '<td align="right">' + ctrl + '-e</td></tr>');
+    $body.append('<tr><td>Update display</td>'+
+                 '<td align="right">' + ctrl + '-1</td></tr>'); //TODO: possibly pick a better shortcut key
+    $body.append('<tr><td>Toggle auto-update</td>'+
+                 '<td align="right">' + ctrl + '-' + shift + '-1</td></tr>');
     $body.append('<tr><td>Show hotkeys</td>'+
                  '<td align="right">?</td></tr>');
     $body.append('</table>');
@@ -179,6 +183,15 @@ Nengo.Modal.prototype.main_config = function() {
           '<div class="help-block with-errors"></div>' +
         '</div>' +
       '</div>' +
+      '<div class="form-group">' +
+        '<div class="checkbox">' +
+          '<label for="sync-editor" class="control-label">' +
+            '<input type="checkbox" id="sync-editor">' +
+            'Automatically synchronize model with editor' +
+          '</label>' +
+          '<div class="help-block with-errors"></div>' +
+        '</div>' +
+      '</div>' +
       '<div class="form-group">' +
         '<div class="checkbox">' +
           '<label for="transparent-nets" class="control-label">' +
@@ -216,6 +229,12 @@ Nengo.Modal.prototype.main_config = function() {
     $('#transparent-nets').change(function () {
         Nengo.netgraph.transparent_nets = $('#transparent-nets').prop('checked');
     });
+
+    $('#sync-editor').prop('checked', Nengo.ace.auto_update);
+    $('#sync-editor').change(function () {
+        Nengo.ace.auto_update = $('#sync-editor').prop('checked');
+        Nengo.ace.update_trigger = $('#sync-editor').prop('checked');
+    });
 
     $('#config-fontsize').bind('keyup input', function () {
         Nengo.netgraph.font_size = parseInt($('#config-fontsize').val());

nengo_gui/static/top_toolbar.css

@@ -73,7 +73,7 @@
     background: #666;
 }
 
-#Toggle_ace, #Save_file, #Font_increase, #Font_decrease{
+#Toggle_ace, #Save_file, #Sync_editor_button, #Font_increase, #Font_decrease{
     float: right; 
 }
 

nengo_gui/static/top_toolbar.js

@@ -45,6 +45,9 @@ Nengo.Toolbar = function(filename) {
     $('#Config_button')[0].addEventListener('click', function () {
         self.config_modal();
     });
+    $('#Sync_editor_button')[0].addEventListener('click', function () {
+        Nengo.ace.update_trigger = true;
+    });
     $('#Help_button')[0].addEventListener('click', function () {
         Nengo.hotkeys.callMenu();
     });
@@ -107,6 +110,7 @@ Nengo.Toolbar.prototype.config_modal_show = function() {
     var original = {zoom: Nengo.netgraph.zoom_fonts,
                     font_size: Nengo.netgraph.font_size,
                     aspect_resize: Nengo.netgraph.aspect_resize,
+                    sync_editor: Nengo.ace.auto_update,
                     transparent_nets: Nengo.netgraph.transparent_nets};
 
     Nengo.modal.title('Configure Options');
@@ -128,6 +132,7 @@ Nengo.Toolbar.prototype.config_modal_show = function() {
             Nengo.netgraph.font_size = original["font_size"];
             Nengo.netgraph.transparent_nets = original["transparent_nets"];
             Nengo.netgraph.aspect_resize = original["aspect_resize"];
+            Nengo.ace.auto_update = original["auto_update"];
             $('#cancel-button').attr('data-dismiss', 'modal');
     });
 

nengo_gui/templates/page.html

@@ -55,6 +55,9 @@
                 <li id='Save_file' class='disabled' role="presentation">
                     <a title='Save file' class='glyphicon glyphicon-floppy-save'> </a>
                 </li>
+                <li id='Sync_editor_button' class='disabled' role="presentation">
+                    <a title='Sync diagram with editor' class='glyphicon glyphicon-circle-arrow-left'> </a>
+                </li>
                 <li id='filename' role="presentation"> </li>
             </ul>
         </div>