fix toggle show invisibles and add it to the demo

Author: fjakobs

demo/demo_startup.js

@@ -77,15 +77,37 @@ exports.launch = function(env) {
     docs.php.setMode(new PhpMode());
     docs.php.setUndoManager(new UndoManager());
 
-    var docEl = document.getElementById("doc");
 
     var container = document.getElementById("editor");
     env.editor = new Editor(new Renderer(container, theme));
+    
+    var modes = {
+        text: new TextMode(),
+        xml: new XmlMode(),
+        html: new HtmlMode(),
+        css: new CssMode(),
+        javascript: new JavaScriptMode(),
+        python: new PythonMode(),
+        php: new PhpMode()
+    };
+
+    function getMode() {
+        return modes[modeEl.value];
+    }
+
+
+    var modeEl = document.getElementById("mode");
+    function setMode() {
+        env.editor.getDocument().setMode(modes[modeEl.value] || modes.text);
+    }
+    modeEl.onchange = setMode;
+    setMode();
 
+    var docEl = document.getElementById("doc");
     function onDocChange() {
-        var doc = getDoc();
+        var doc = docs[docEl.value];
         env.editor.setDocument(doc);
-
+    
         var mode = doc.getMode();
         if (mode instanceof JavaScriptMode) {
             modeEl.value = "javascript";
@@ -108,55 +130,50 @@ exports.launch = function(env) {
         else {
             modeEl.value = "text";
         }
-
+    
         env.editor.focus();
     }
     docEl.onchange = onDocChange;
+    onDocChange();
 
-    function getDoc() {
-        return docs[docEl.value];
-    }
-
-    var modeEl = document.getElementById("mode");
-    modeEl.onchange = function() {
-        env.editor.getDocument().setMode(modes[modeEl.value] || modes.text);
-    };
-
-    var modes = {
-        text: new TextMode(),
-        xml: new XmlMode(),
-        html: new HtmlMode(),
-        css: new CssMode(),
-        javascript: new JavaScriptMode(),
-        python: new PythonMode(),
-        php: new PhpMode()
-    };
-
-    function getMode() {
-        return modes[modeEl.value];
-    }
 
     var themeEl = document.getElementById("theme");
-    themeEl.onchange = function() {
+    function setTheme() {
         env.editor.setTheme(themeEl.value);
     };
+    themeEl.onchange = setTheme;
+    setTheme();
+
 
     var selectEl = document.getElementById("select_style");
-    selectEl.onchange = function() {
+    function setSelectionStyle() {
         if (selectEl.checked) {
             env.editor.setSelectionStyle("line");
         } else {
             env.editor.setSelectionStyle("text");
         }
     };
+    selectEl.onchange = setSelectionStyle;
+    setSelectionStyle();
+
 
     var activeEl = document.getElementById("highlight_active");
-    activeEl.onchange = function() {
+    function setHighlightActiveLine() {
         env.editor.setHighlightActiveLine(!!activeEl.checked);
     };
+    activeEl.onchange = setHighlightActiveLine;
+    setHighlightActiveLine();
+
+
+    var showHiddenEl = document.getElementById("show_hidden");
+    function setShowInvisibles() {
+        env.editor.setShowInvisibles(!!showHiddenEl.checked);
+    };
+    showHiddenEl.onchange = setShowInvisibles;
+    setShowInvisibles();
 
-    onDocChange();
 
+    // for debugging
     window.jump = function() {
         var jump = document.getElementById("jump");
         var cursor = env.editor.getCursorPosition();

editor.html

@@ -113,6 +113,10 @@
         <label for="highlight_active">Highlight active line</label>
         <input type="checkbox" name="highlight_active" id="highlight_active" checked>        
       </td>
+      <td>
+        <label for="show_hidden">Show invisibles</label>
+        <input type="checkbox" name="show_hidden" id="show_hidden">
+      </td>
       <td align="right">
         <img src="demo/logo.png">        
       </td>

lib/ace/layer/text.js

@@ -129,14 +129,18 @@ var Text = function(parentEl) {
         this.doc = doc;
     };
 
-    this.$showInvisibles = false;
+    this.showInvisibles = false;
     this.setShowInvisibles = function(showInvisibles) {
-        this.$showInvisibles = showInvisibles;
+        if (this.showInvisibles == showInvisibles)
+            return false;
+            
+        this.showInvisibles = showInvisibles;
+        return true;
     };
 
     this.$computeTabString = function() {
         var tabSize = this.doc.getTabSize();
-        if (this.$showInvisibles) {
+        if (this.showInvisibles) {
             var halfTab = (tabSize) / 2;
             this.$tabString = "<span class='ace_invisible'>"
                 + new Array(Math.floor(halfTab)).join("&nbsp;")
@@ -263,7 +267,7 @@ var Text = function(parentEl) {
     };
 
     this.$renderLine = function(stringBuilder, row, tokens) {
-//        if (this.$showInvisibles) {
+//        if (this.showInvisibles) {
 //            var self = this;
 //            var spaceRe = /[\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]+/g;
 //            var spaceReplace = function(space) {
@@ -294,7 +298,7 @@ var Text = function(parentEl) {
             }
         };
 
-        if (this.$showInvisibles) {
+        if (this.showInvisibles) {
             if (row !== this.doc.getLength() - 1) {
                 stringBuilder.push("<span class='ace_invisible'>" + this.EOL_CHAR + "</span>");
             } else {

lib/ace/virtual_renderer.js

@@ -229,16 +229,13 @@ var VirtualRenderer = function(container, theme) {
         });
     };
 
-    this.$showInvisibles = true;
     this.setShowInvisibles = function(showInvisibles) {
-        this.$showInvisibles = showInvisibles;
-        this.$textLayer.setShowInvisibles(showInvisibles);
-
-        this.$loop.schedule(this.CHANGE_TEXT);
+        if (this.$textLayer.setShowInvisibles(showInvisibles))
+            this.$loop.schedule(this.CHANGE_TEXT);
     };
 
     this.getShowInvisibles = function() {
-        return this.$showInvisibles;
+        return this.$textLayer.showInvisibles;
     };
 
     this.$showPrintMargin = true;
@@ -453,7 +450,7 @@ var VirtualRenderer = function(container, theme) {
 
     this.$getLongestLine = function() {
         var charCount = this.doc.getScreenWidth();
-        if (this.$showInvisibles)
+        if (this.$textLayer.showInvisibles)
             charCount += 1;
 
         return Math.max(this.$size.scrollerWidth - this.$padding * 2, Math.round(charCount * this.characterWidth));