From 0479acfea78f4fb3f4cd8e9c122b41748f5844e3 Mon Sep 17 00:00:00 2001 From: nightwing Date: Tue, 25 Jun 2013 20:59:06 +0400 Subject: [PATCH] add option to autoresize editor vertically --- demo/kitchen-sink/layout.js | 62 +--------------------- lib/ace/autocomplete/popup.js | 41 ++------------- lib/ace/snippets/objc.snippets | 2 +- lib/ace/snippets/php.snippets | 2 +- lib/ace/snippets/r.snippets | 8 +-- lib/ace/virtual_renderer.js | 95 ++++++++++++++++++---------------- 6 files changed, 62 insertions(+), 148 deletions(-) diff --git a/demo/kitchen-sink/layout.js b/demo/kitchen-sink/layout.js index 36f85cf3..4729af44 100644 --- a/demo/kitchen-sink/layout.js +++ b/demo/kitchen-sink/layout.js @@ -103,11 +103,6 @@ var Split = function(){ exports.singleLineEditor = function(el) { var renderer = new Renderer(el); el.style.overflow = "hidden"; - renderer.scrollBar.element.style.top = "0"; - renderer.scrollBar.element.style.display = "none"; - renderer.scrollBar.orginalWidth = renderer.scrollBar.width; - renderer.scrollBar.width = 0; - renderer.content.style.height = "auto"; renderer.screenToTextCoordinates = function(x, y) { var pos = this.pixelToScreenCoordinates(x, y); @@ -117,61 +112,7 @@ exports.singleLineEditor = function(el) { ); }; - renderer.maxLines = 4; - renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig; - renderer.$computeLayerConfig = function() { - var config = this.layerConfig; - var height = this.session.getScreenLength() * this.lineHeight; - if (config.height != height) { - var vScroll = height > this.maxLines * this.lineHeight; - - if (vScroll != this.$vScroll) { - if (vScroll) { - this.scrollBar.element.style.display = ""; - this.scrollBar.width = this.scrollBar.orginalWidth; - this.container.style.height = config.height + "px"; - height = config.height; - this.scrollTop = height - this.maxLines * this.lineHeight; - } else { - this.scrollBar.element.style.display = "none"; - this.scrollBar.width = 0; - } - - this.onResize(); - this.$vScroll = vScroll; - } - - if (this.$vScroll) - return renderer.$computeLayerConfigWithScroll(); - - this.container.style.height = height + "px"; - this.scroller.style.height = height + "px"; - this.content.style.height = height + "px"; - this._emit("resize"); - } - - var longestLine = this.$getLongestLine(); - var firstRow = 0; - var lastRow = this.session.getLength(); - - this.scrollTop = 0; - config.width = longestLine; - config.padding = this.$padding; - config.firstRow = 0; - config.firstRowScreen = 0; - config.lastRow = lastRow; - config.lineHeight = this.lineHeight; - config.characterWidth = this.characterWidth; - config.minHeight = height; - config.maxHeight = height; - config.offset = 0; - config.height = height; - - this.$gutterLayer.element.style.marginTop = 0 + "px"; - this.content.style.marginTop = 0 + "px"; - this.content.style.width = longestLine + 2 * this.$padding + "px"; - }; - renderer.isScrollableBy=function(){return false}; + renderer.$maxLines = 4; renderer.setStyle("ace_one-line"); var editor = new Editor(renderer); @@ -182,7 +123,6 @@ exports.singleLineEditor = function(el) { editor.setShowPrintMargin(false); editor.renderer.setShowGutter(false); editor.renderer.setHighlightGutterLine(false); - editor.$mouseHandler.$focusWaitTimout = 0; return editor; diff --git a/lib/ace/autocomplete/popup.js b/lib/ace/autocomplete/popup.js index 85a5d8b7..5b7ce0b3 100644 --- a/lib/ace/autocomplete/popup.js +++ b/lib/ace/autocomplete/popup.js @@ -42,42 +42,8 @@ var dom = require("../lib/dom"); var $singleLineEditor = function(el) { var renderer = new Renderer(el); - renderer.maxLines = 4; - renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig; - renderer.scrollBar.orginalWidth = renderer.scrollBar.getWidth(); - renderer.$computeLayerConfig = function() { - var height = this.session.getScreenLength() * this.lineHeight; - var maxHeight = this.maxLines * this.lineHeight; - var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height)); - var vScroll = height > maxHeight; - if (desiredHeight != this.desiredHeight || vScroll != this.$vScroll) { - if (vScroll != this.$vScroll) { - if (vScroll) { - this.scrollBar.element.style.display = ""; - this.scrollBar.width = this.scrollBar.orginalWidth; - - height = maxHeight; - this.scrollTop = height - this.maxLines * this.lineHeight; - } else { - this.scrollBar.element.style.display = "none"; - this.scrollBar.width = 0; - } - - this.$size.height = 0; - this.$size.width = 0; - - this.$vScroll = vScroll; - } - - this.container.style.height = desiredHeight + "px"; - this.onResize(); - this.$loop.changes = 0; - this.desiredHeight = desiredHeight; - this.scroller.style.overflowX = "hidden"; - } - return renderer.$computeLayerConfigWithScroll(); - }; - + renderer.$maxLines = 4; + var editor = new Editor(renderer); editor.setHighlightActiveLine(false); @@ -108,7 +74,7 @@ var AcePopup = function(parentNode) { popup.renderer.$cursorLayer.restartTimer = noop; popup.renderer.$cursorLayer.element.style.opacity = 0; - popup.renderer.maxLines = 8; + popup.renderer.$maxLines = 8; popup.renderer.$keepTextAreaAtCursor = false; popup.setHighlightActiveLine(true); @@ -221,6 +187,7 @@ var AcePopup = function(parentNode) { el.style.left = pos.left + "px"; el.style.display = ""; + this.renderer.$textLayer.checkForSizeChanges(); this._signal("show"); }; diff --git a/lib/ace/snippets/objc.snippets b/lib/ace/snippets/objc.snippets index 85b80d9e..5517b062 100644 --- a/lib/ace/snippets/objc.snippets +++ b/lib/ace/snippets/objc.snippets @@ -165,7 +165,7 @@ snippet fora ${4} } # Try / Catch Block -snippet @try +snippet @try @try { ${1:statements} } diff --git a/lib/ace/snippets/php.snippets b/lib/ace/snippets/php.snippets index e861a5be..97f17bc1 100644 --- a/lib/ace/snippets/php.snippets +++ b/lib/ace/snippets/php.snippets @@ -15,7 +15,7 @@ snippet ns snippet use use ${1:Foo\Bar\Baz}; ${2} -snippet c +snippet c ${1:abstract }class ${2:`Filename()`} { ${3} diff --git a/lib/ace/snippets/r.snippets b/lib/ace/snippets/r.snippets index 71186e35..cfe482bc 100644 --- a/lib/ace/snippets/r.snippets +++ b/lib/ace/snippets/r.snippets @@ -85,13 +85,13 @@ snippet la snippet l_ l_ply(${1:list}, ${2:function}) -snippet md +snippet md mdply(${1:matrix}, ${2:function}) -snippet ml +snippet ml mlply(${1:matrix}, ${2:function}) -snippet ma +snippet ma maply(${1:matrix}, ${2:function}) -snippet m_ +snippet m_ m_ply(${1:matrix}, ${2:function}) # plot functions diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index 692e1084..a3afedc5 100644 --- a/lib/ace/virtual_renderer.js +++ b/lib/ace/virtual_renderer.js @@ -187,21 +187,21 @@ var VirtualRenderer = function(container, theme) { this.CHANGE_FULL = 512; this.CHANGE_H_SCROLL = 1024; - this.$logChanges = function(changes) { - var a = "" - if (changes & this.CHANGE_CURSOR) a += " cursor"; - if (changes & this.CHANGE_MARKER) a += " marker"; - if (changes & this.CHANGE_GUTTER) a += " gutter"; - if (changes & this.CHANGE_SCROLL) a += " scroll"; - if (changes & this.CHANGE_LINES) a += " lines"; - if (changes & this.CHANGE_TEXT) a += " text"; - if (changes & this.CHANGE_SIZE) a += " size"; - if (changes & this.CHANGE_MARKER_BACK) a += " marker_back"; - if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front"; - if (changes & this.CHANGE_FULL) a += " full"; - if (changes & this.CHANGE_H_SCROLL) a += " h_scroll"; - console.log(a.trim()) - }; + // this.$logChanges = function(changes) { + // var a = "" + // if (changes & this.CHANGE_CURSOR) a += " cursor"; + // if (changes & this.CHANGE_MARKER) a += " marker"; + // if (changes & this.CHANGE_GUTTER) a += " gutter"; + // if (changes & this.CHANGE_SCROLL) a += " scroll"; + // if (changes & this.CHANGE_LINES) a += " lines"; + // if (changes & this.CHANGE_TEXT) a += " text"; + // if (changes & this.CHANGE_SIZE) a += " size"; + // if (changes & this.CHANGE_MARKER_BACK) a += " marker_back"; + // if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front"; + // if (changes & this.CHANGE_FULL) a += " full"; + // if (changes & this.CHANGE_H_SCROLL) a += " h_scroll"; + // console.log(a.trim()) + // }; oop.implement(this, EventEmitter); @@ -569,8 +569,6 @@ var VirtualRenderer = function(container, theme) { // move text input over the cursor // this is required for iOS and IME this.$moveTextAreaToCursor = function() { - this.textarea.style.cssText = "top:0;left:0;position:fixed" - return if (!this.$keepTextAreaAtCursor) return; var config = this.layerConfig; @@ -657,7 +655,7 @@ var VirtualRenderer = function(container, theme) { this.$updatePrintMargin(); }; - this.setScrollMargin = function(top, left, bottom, right) { + this.setScrollMargin = function(top, bottom, left, right) { var sm = this.scrollMargin; sm.top = top|0; sm.bottom = bottom|0; @@ -714,7 +712,7 @@ var VirtualRenderer = function(container, theme) { return; } - this.$logChanges(changes); + // this.$logChanges(changes); this._signal("beforeRender"); // text, scrolling and resize changes can cause the view port size to change @@ -807,50 +805,55 @@ var VirtualRenderer = function(container, theme) { }; - this.setSize = function(height, width) { - this.scrollBar.element.style.display = ""; - this.scrollBar.width = this.scrollBar.orginalWidth; - this.container.style.height = config.height + "px"; + this.$autosize = function(height, width) { + var height = this.session.getScreenLength() * this.lineHeight; + var maxHeight = this.$maxLines * this.lineHeight; + var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height)); + var vScroll = height > maxHeight; - this.scrollTop = height - this.maxLines * this.lineHeight; + if (desiredHeight != this.desiredHeight || + this.$size.height != this.desiredHeight || vScroll != this.$vScroll) { + if (vScroll != this.$vScroll) { + this.$vScroll = vScroll; + this.scrollBarV.setVisible(vScroll); + } + + this.container.style.height = desiredHeight + "px"; + this.$updateCachedSize(true, this.$gutterWidth, this.$size.width, desiredHeight); + // this.$loop.changes = 0; + this.desiredHeight = desiredHeight; + } }; this.$computeLayerConfig = function() { + if (this.$maxLines && this.lineHeight > 1) + this.$autosize(); + if (!this.$size.scrollerHeight) return this.onResize(true); var session = this.session; + var hideScrollbars = this.$size.height <= 2 * this.lineHeight; var screenLines = this.session.getScreenLength() - if (this.$size.maxLines) { - var underflow = screenLines < this.$size.maxLines; - if (underflow != this.underflow) { - - - } else if (true) { - - } - } var maxHeight = screenLines * this.lineHeight; - - var offset = this.scrollTop % this.lineHeight; var minHeight = this.$size.scrollerHeight + this.lineHeight; var longestLine = this.$getLongestLine(); + + var horizScroll = !hideScrollbars && (this.$hScrollBarAlwaysVisible || + this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0); - var horizScroll = this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0; - if (!horizScroll && this.$hScrollBarAlwaysVisible) - horizScroll = true; - - var horizScrollChanged = this.$horizScroll !== horizScroll; - if (horizScrollChanged) { + var hScrollChanged = this.$horizScroll !== horizScroll; + if (hScrollChanged) { this.$horizScroll = horizScroll; this.scrollBarH.setVisible(horizScroll); } - var vScroll = this.$vScrollBarAlwaysVisible || this.$size.scrollerHeight - maxHeight < 0; + var vScroll = !hideScrollbars && (this.$vScrollBarAlwaysVisible || + this.$size.scrollerHeight - maxHeight < 0); var vScrollChanged = this.$vScroll !== vScroll; if (vScrollChanged) { this.$vScroll = vScroll; @@ -859,7 +862,7 @@ var VirtualRenderer = function(container, theme) { this.session.setScrollTop(Math.max(-this.scrollMargin.top, Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight + this.scrollMargin.v))); - console.log(longestLine , this.$size.scrollerWidth) + this.session.setScrollLeft(Math.max(-this.scrollMargin.left, Math.min(this.scrollLeft, longestLine + 2 * this.$padding - this.$size.scrollerWidth + this.scrollMargin.h))); @@ -912,8 +915,10 @@ var VirtualRenderer = function(container, theme) { // Horizontal scrollbar visibility may have changed, which changes // the client height of the scroller - if (horizScrollChanged || vScrollChanged) + if (hScrollChanged || vScrollChanged) { this.onResize(true); + this._signal("scrollbarVisibilityChanged"); + } }; this.$updateLines = function() { @@ -1068,6 +1073,8 @@ var VirtualRenderer = function(container, theme) { this.session.setScrollLeft(left); } else if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) { this.session.setScrollLeft(Math.round(left + this.characterWidth - this.$size.scrollerWidth)); + } else if (scrollLeft <= this.$padding && left - scrollLeft < this.characterWidth) { + this.session.setScrollLeft(0); } };