From 1c432b976c83cf2a33af1b620dd690e1dc8206a4 Mon Sep 17 00:00:00 2001 From: Fabian Jakobs Date: Mon, 10 Jan 2011 11:18:57 +0100 Subject: [PATCH] fix toggle show invisibles and add it to the demo --- demo/demo_startup.js | 77 ++++++++++++++++++++++--------------- editor.html | 4 ++ lib/ace/layer/text.js | 14 ++++--- lib/ace/virtual_renderer.js | 11 ++---- 4 files changed, 64 insertions(+), 42 deletions(-) diff --git a/demo/demo_startup.js b/demo/demo_startup.js index 6ffd8771..e113265b 100644 --- a/demo/demo_startup.js +++ b/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(); - onDocChange(); + var showHiddenEl = document.getElementById("show_hidden"); + function setShowInvisibles() { + env.editor.setShowInvisibles(!!showHiddenEl.checked); + }; + showHiddenEl.onchange = setShowInvisibles; + setShowInvisibles(); + + + // for debugging window.jump = function() { var jump = document.getElementById("jump"); var cursor = env.editor.getCursorPosition(); diff --git a/editor.html b/editor.html index a6b28321..f1b20bf5 100644 --- a/editor.html +++ b/editor.html @@ -113,6 +113,10 @@ + + + + diff --git a/lib/ace/layer/text.js b/lib/ace/layer/text.js index 0526bef2..0871523a 100644 --- a/lib/ace/layer/text.js +++ b/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 = "" + new Array(Math.floor(halfTab)).join(" ") @@ -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("" + this.EOL_CHAR + ""); } else { diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index 987a8483..854c0684 100644 --- a/lib/ace/virtual_renderer.js +++ b/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));