jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1488 from ajaxorg/renderer

Browse source 
Renderer improvements
This commit is contained in:
Ruben Daniels 2013-06-27 07:55:22 -07:00
commit 81f7dd7fbb
13 changed files with 395 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

48
demo/autoresize.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
.ace_editor {
position: relative !important;
border: 1px solid lightgray;
margin: auto;
height: 200px;
width: 80%;
}
.scrollmargin {
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<pre id="editor">autoresizing editor</pre>
<div class="scrollmargin"></div>
<pre id="editor2">minHeight = 2 lines</pre>
<script src="../build/src/ace.js"></script>
<script>
// create first editor
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow");
editor.session.setMode("ace/mode/html");
editor.setAutoScrollEditorIntoView();
editor.setOption("maxLines", 100);
var editor2 = ace.edit("editor2");
editor2.setTheme("ace/theme/tomorrow_night_blue");
editor2.session.setMode("ace/mode/html");
editor2.setAutoScrollEditorIntoView();
editor2.setOption("maxLines", 30);
editor2.setOption("minLines", 2);
</script>
</body>
</html>

62
demo/kitchen-sink/layout.js
View file

@ -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;

4
doc/site/js/main.js
View file

@ -63,8 +63,6 @@ $(function() {
tabs.find(tab_a_selector).click(function(e) {
e.preventDefault();
embedded_editor.resize();
editor.resize();
if ($(this).attr("href") === "/") {
window.location = "http://ace.ajax.org";
return;
@ -101,6 +99,8 @@ $(function() {
}
$(this).tab("show");
embedded_editor.resize();
editor.resize();
var state = {};
state.nav = $(this).attr("href").substr(1);

41
lib/ace/autocomplete/popup.js
View file

@ -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");
};

20
lib/ace/css/editor.css
View file

@ -71,8 +71,8 @@
.ace_scrollbar {
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
overflow: hidden;
overflow-y: auto;
right: 0;
top: 0;
bottom: 0;
@ -84,6 +84,22 @@
left: 0;
}
.ace_scrollbar-h {
position: absolute;
overflow-x: auto;
overflow-y: hidden;
right: 0;
left: 0;
bottom: 0;
}
.ace_scrollbar-inner {
position: absolute;
height: 1px;
left: 0;
}
.ace_print-margin {
position: absolute;
height: 100%;

4
lib/ace/edit_session.js
View file

@ -990,7 +990,7 @@ var EditSession = function(text, mode) {
*
**/
this.setScrollTop = function(scrollTop) {
scrollTop = Math.round(Math.max(0, scrollTop));
scrollTop = Math.round(scrollTop);
if (this.$scrollTop === scrollTop || isNaN(scrollTop))
return;
@ -1011,7 +1011,7 @@ var EditSession = function(text, mode) {
* [Sets the value of the distance between the left of the editor and the leftmost part of the visible content.]{: #EditSession.setScrollLeft}
**/
this.setScrollLeft = function(scrollLeft) {
scrollLeft = Math.round(Math.max(0, scrollLeft));
scrollLeft = Math.round(scrollLeft);
if (this.$scrollLeft === scrollLeft || isNaN(scrollLeft))
return;

2
lib/ace/editor.js
View file

@ -2259,6 +2259,8 @@ config.defineOptions(Editor.prototype, "editor", {
displayIndentGuides: "renderer",
fontSize: "renderer",
fontFamily: "renderer",
maxLines: "renderer",
minLines: "renderer",
scrollSpeed: "$mouseHandler",
dragDelay: "$mouseHandler",

30
lib/ace/ext/textarea.js
View file

@ -288,21 +288,18 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
settingDiv.hideButton.focus();
editor.on("focus", function onFocus() {
editor.removeListener("focus", onFocus);
settingDiv.style.display = "none"
settingDiv.style.display = "none";
});
} else {
editor.focus();
};
}
};
editor.$setOption = editor.setOption;
editor.setOption = function(key, value) {
if (options[key] == value) return;
switch (key) {
case "gutter":
renderer.setShowGutter(toBool(value));
break;
case "mode":
if (value != "text") {
// Load the required mode file. Files get loaded only once.
@ -366,18 +363,9 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
break;
}
break;
case "useSoftTabs":
session.setUseSoftTabs(toBool(value));
break;
case "showPrintMargin":
renderer.setShowPrintMargin(toBool(value));
break;
case "showInvisibles":
editor.setShowInvisibles(toBool(value));
break;
default:
editor.$setOption(key, toBool(value));
}
options[key] = value;
@ -391,9 +379,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
return options;
};
for (var option in exports.options) {
editor.setOption(option, exports.options[option]);
}
editor.setOptions(exports.options);
return editor;
}
@ -493,7 +479,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
cValue == "true" ? "checked='true'" : "",
"'></input>"
);
return
return;
}
builder.push("<select title='" + option + "'>");
for (var value in obj) {

107
lib/ace/scrollbar.js
View file

@ -37,8 +37,6 @@ var event = require("./lib/event");
var EventEmitter = require("./lib/event_emitter").EventEmitter;
/**
*
*
* A set of methods for setting and retrieving the editor's scrollbar.
* @class ScrollBar
**/
@ -47,12 +45,9 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
* Creates a new `ScrollBar`. `parent` is the owner of the scroll bar.
* @param {DOMElement} parent A DOM element
*
*
*
*
* @constructor
**/
var ScrollBar = function(parent) {
var ScrollBarV = function(parent) {
this.element = dom.createElement("div");
this.element.className = "ace_scrollbar";
@ -62,38 +57,81 @@ var ScrollBar = function(parent) {
parent.appendChild(this.element);
// in OSX lion the scrollbars appear to have no width. In this case resize
// the to show the scrollbar but still pretend that the scrollbar has a width
// in OSX lion the scrollbars appear to have no width. In this case resize the
// element to show the scrollbar but still pretend that the scrollbar has a width
// of 0px
// in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar
// make element a little bit wider to retain scrollbar when page is zoomed
this.width = dom.scrollbarWidth(parent.ownerDocument);
this.fullWidth = this.width;
this.element.style.width = (this.width || 15) + 5 + "px";
this.setVisible(false);
this.element.style.overflowY = "scroll";
event.addListener(this.element, "scroll", this.onScrollV.bind(this));
};
event.addListener(this.element, "scroll", this.onScroll.bind(this));
var ScrollBarH = function(parent) {
this.element = dom.createElement("div");
this.element.className = "ace_scrollbar-h";
this.inner = dom.createElement("div");
this.inner.className = "ace_scrollbar-inner";
this.element.appendChild(this.inner);
parent.appendChild(this.element);
// in OSX lion the scrollbars appear to have no width. In this case resize the
// element to show the scrollbar but still pretend that the scrollbar has a width
// of 0px
// in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar
// make element a little bit wider to retain scrollbar when page is zoomed
this.height = dom.scrollbarWidth(parent.ownerDocument);
this.fullHeight = this.height;
this.element.style.height = (this.height || 15) + 5 + "px";
this.setVisible(false);
this.element.style.overflowX = "scroll";
event.addListener(this.element, "scroll", this.onScrollH.bind(this));
};
(function() {
oop.implement(this, EventEmitter);
this.setVisible = function(show) {
if (show) {
this.element.style.display = "";
if (this.fullWidth)
this.width = this.fullWidth;
if (this.fullHeight)
this.height = this.fullHeight;
} else {
this.element.style.display = "none";
this.height = this.width = 0;
}
};
/**
* Emitted when the scroll bar, well, scrolls.
* @event scroll
* @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position
*
*
*
**/
this.onScroll = function() {
this.onScrollV = function() {
if (!this.skipEvent) {
this.scrollTop = this.element.scrollTop;
this._emit("scroll", {data: this.scrollTop});
}
this.skipEvent = false;
};
this.onScrollH = function() {
if (!this.skipEvent) {
this.scrollLeft = this.element.scrollLeft;
this._emit("scroll", {data: this.scrollLeft});
}
this.skipEvent = false;
};
/**
*
* Returns the width of the scroll bar.
* @returns {Number}
**/
@ -101,46 +139,59 @@ var ScrollBar = function(parent) {
return this.width;
};
this.getHeight = function() {
return this.height;
};
/**
* Sets the height of the scroll bar, in pixels.
* @param {Number} height The new height
*
*
*
**/
this.setHeight = function(height) {
this.element.style.height = height + "px";
};
this.setWidth = function(width) {
this.element.style.width = width + "px";
};
/**
* Sets the inner height of the scroll bar, in pixels.
* @param {Number} height The new inner height
*
*
*
**/
this.setInnerHeight = function(height) {
this.inner.style.height = height + "px";
};
this.setInnerWidth = function(width) {
this.inner.style.width = width + "px";
};
// on chrome 17+ for small zoom levels after calling this function
// this.element.scrollTop != scrollTop which makes page to scroll up.
/**
* Sets the scroll top of the scroll bar.
* @param {Number} scrollTop The new scroll top
*
*
*
**/
// on chrome 17+ for small zoom levels after calling this function
// this.element.scrollTop != scrollTop which makes page to scroll up.
this.setScrollTop = function(scrollTop) {
if (this.scrollTop != scrollTop) {
this.skipEvent = true;
this.scrollTop = this.element.scrollTop = scrollTop;
}
};
this.setScrollLeft = function(scrollLeft) {
if (this.scrollLeft != scrollLeft) {
this.skipEvent = true;
this.scrollLeft = this.element.scrollLeft = scrollLeft;
}
};
}).call(ScrollBar.prototype);
}).call(ScrollBarV.prototype);
ScrollBarH.prototype = ScrollBarV.prototype;
exports.ScrollBar = ScrollBar;
exports.ScrollBar = ScrollBarV; // backward compatibility
exports.ScrollBarV = ScrollBarV;
exports.ScrollBarH = ScrollBarH;
});

2
lib/ace/snippets/objc.snippets
View file

@ -165,7 +165,7 @@ snippet fora
${4}
}
# Try / Catch Block
snippet @try
snippet @try
@try {
${1:statements}
}

2
lib/ace/snippets/php.snippets
View file

@ -15,7 +15,7 @@ snippet ns
snippet use
use ${1:Foo\Bar\Baz};
${2}
snippet c
snippet c
${1:abstract }class ${2:`Filename()`}
{
${3}

8
lib/ace/snippets/r.snippets
View file

@ -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

321
lib/ace/virtual_renderer.js
View file

@ -40,7 +40,8 @@ var GutterLayer = require("./layer/gutter").Gutter;
var MarkerLayer = require("./layer/marker").Marker;
var TextLayer = require("./layer/text").Text;
var CursorLayer = require("./layer/cursor").Cursor;
var ScrollBar = require("./scrollbar").ScrollBar;
var ScrollBarH = require("./scrollbar").ScrollBarH;
var ScrollBarV = require("./scrollbar").ScrollBarV;
var RenderLoop = require("./renderloop").RenderLoop;
var EventEmitter = require("./lib/event_emitter").EventEmitter;
var editorCss = require("./requirejs/text!./css/editor.css");
@ -102,22 +103,23 @@ var VirtualRenderer = function(container, theme) {
// Indicates whether the horizontal scrollbar is visible
this.$horizScroll = false;
this.$vScroll = false;
this.scrollBar = new ScrollBar(this.container);
this.scrollBar.addEventListener("scroll", function(e) {
this.scrollBar =
this.scrollBarV = new ScrollBarV(this.container);
this.scrollBarH = new ScrollBarH(this.container);
this.scrollBarV.addEventListener("scroll", function(e) {
if (!_self.$scrollAnimation)
_self.session.setScrollTop(e.data);
_self.session.setScrollTop(e.data - _self.scrollMargin.top);
});
this.scrollBarH.addEventListener("scroll", function(e) {
if (!_self.$scrollAnimation)
_self.session.setScrollLeft(e.data - _self.scrollMargin.left);
});
this.scrollTop = 0;
this.scrollLeft = 0;
event.addListener(this.scroller, "scroll", function() {
var scrollLeft = _self.scroller.scrollLeft;
_self.scrollLeft = scrollLeft;
_self.session.setScrollLeft(scrollLeft);
});
this.cursorPos = {
row : 0,
column : 0
@ -126,6 +128,7 @@ var VirtualRenderer = function(container, theme) {
this.$textLayer.addEventListener("changeCharacterSize", function() {
_self.updateCharacterSize();
_self.onResize(true);
_self._signal("changeCharacterSize");
});
this.$size = {
@ -148,6 +151,15 @@ var VirtualRenderer = function(container, theme) {
offset : 0,
height : 1
};
this.scrollMargin = {
left: 0,
right: 0,
top: 0,
bottom: 0,
v: 0,
h: 0
}
this.$loop = new RenderLoop(
this.$renderChanges.bind(this),
@ -175,6 +187,22 @@ 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())
// };
oop.implement(this, EventEmitter);
this.updateCharacterSize = function() {
@ -270,6 +298,7 @@ var VirtualRenderer = function(container, theme) {
this.$textLayer.checkForSizeChanges();
};
this.$changes = 0;
/**
* [Triggers a resize of the editor.]{: #VirtualRenderer.onResize}
* @param {Boolean} force If `true`, recomputes the size, even if the height and width haven't changed
@ -280,9 +309,6 @@ var VirtualRenderer = function(container, theme) {
*
**/
this.onResize = function(force, gutterWidth, width, height) {
var changes = 0;
var size = this.$size;
if (this.resizing > 2)
return;
else if (this.resizing > 1)
@ -290,41 +316,11 @@ var VirtualRenderer = function(container, theme) {
else
this.resizing = force ? 1 : 0;
if (!height)
height = dom.getInnerHeight(this.container);
if (height && (force || size.height != height)) {
size.height = height;
changes = this.CHANGE_SIZE;
size.scrollerHeight = this.scroller.clientHeight;
if (force || !size.scrollerHeight) {
size.scrollerHeight = size.height;
if (this.$horizScroll)
size.scrollerHeight -= this.scrollBar.getWidth();
}
this.scrollBar.setHeight(size.scrollerHeight);
if (this.session) {
this.session.setScrollTop(this.getScrollTop());
changes = changes | this.CHANGE_FULL;
}
}
height = this.container.clientHeight;
if (!width)
width = dom.getInnerWidth(this.container);
width = this.container.clientWidth;
if (width && (force || this.resizing > 1 || size.width != width)) {
changes = this.CHANGE_SIZE;
size.width = width;
var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
this.scroller.style.left = gutterWidth + "px";
size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
this.scroller.style.right = this.scrollBar.getWidth() + "px";
if (this.session && this.session.getUseWrapMode() && this.adjustWrapLimit() || force)
changes = changes | this.CHANGE_FULL;
}
var changes = this.$updateCachedSize(force, gutterWidth, width, height);
if (!this.$size.scrollerHeight)
return;
@ -340,17 +336,57 @@ var VirtualRenderer = function(container, theme) {
if (force)
delete this.resizing;
};
this.$updateCachedSize = function(force, gutterWidth, width, height) {
var changes = this.$changes || 0;
var size = this.$size;
if (height && (force || size.height != height)) {
size.height = height;
changes = this.CHANGE_SIZE;
size.scrollerHeight = size.height;
if (this.$horizScroll)
size.scrollerHeight -= this.scrollBarH.getHeight();
this.scrollBarV.setHeight(size.scrollerHeight);
if (this.session) {
this.session.setScrollTop(this.getScrollTop());
changes = changes | this.CHANGE_SCROLL;
}
}
if (width && (force || this.resizing > 1 || size.width != width)) {
changes = this.CHANGE_SIZE;
size.width = width;
var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
this.scrollBarH.element.style.left =
this.scroller.style.left = gutterWidth + "px";
size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBarV.getWidth());
this.scroller.style.right = this.scrollBarV.getWidth() + "px";
this.scroller.style.bottom = this.scrollBarH.getHeight() + "px";
this.scrollBarH.setWidth(size.scrollerWidth);
if (this.session && this.session.getUseWrapMode() && this.adjustWrapLimit() || force)
changes = changes | this.CHANGE_FULL;
}
return changes;
};
this.onGutterResize = function() {
var width = this.$size.width;
var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
this.scroller.style.left = gutterWidth + "px";
this.$size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
this.$updateCachedSize(true, gutterWidth, this.$size.width, this.$size.height);
if (this.session.getUseWrapMode() && this.adjustWrapLimit())
this.$loop.schedule(this.CHANGE_FULL);
else
else {
this.$computeLayerConfig();
this.$loop.schedule(this.CHANGE_MARKER);
}
};
/**
@ -618,35 +654,66 @@ var VirtualRenderer = function(container, theme) {
this.$loop.schedule(this.CHANGE_FULL);
this.$updatePrintMargin();
};
this.setScrollMargin = function(top, bottom, left, right) {
var sm = this.scrollMargin;
sm.top = top|0;
sm.bottom = bottom|0;
sm.right = right|0;
sm.left = left|0;
sm.v = sm.top + sm.bottom;
sm.h = sm.left + sm.right;
this.updateFull();
};
/**
*
* Returns whether the horizontal scrollbar is set to be always visible.
* @returns {Boolean}
**/
* Returns whether the horizontal scrollbar is set to be always visible.
* @returns {Boolean}
**/
this.getHScrollBarAlwaysVisible = function() {
return this.$hScrollBarAlwaysVisible;
};
/**
* Identifies whether you want to show the horizontal scrollbar or not.
* @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
*
*
**/
* Identifies whether you want to show the horizontal scrollbar or not.
* @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
**/
this.setHScrollBarAlwaysVisible = function(alwaysVisible) {
this.setOption("hScrollBarAlwaysVisible", alwaysVisible);
};
/**
* Returns whether the horizontal scrollbar is set to be always visible.
* @returns {Boolean}
**/
this.getVScrollBarAlwaysVisible = function() {
return this.$hScrollBarAlwaysVisible;
};
this.$updateScrollBar = function() {
this.scrollBar.setInnerHeight(this.layerConfig.maxHeight);
this.scrollBar.setScrollTop(this.scrollTop);
/**
* Identifies whether you want to show the horizontal scrollbar or not.
* @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
**/
this.setVScrollBarAlwaysVisible = function(alwaysVisible) {
this.setOption("vScrollBarAlwaysVisible", alwaysVisible);
};
this.$updateScrollBarV = function() {
this.scrollBarV.setInnerHeight(this.layerConfig.maxHeight + this.scrollMargin.v);
this.scrollBarV.setScrollTop(this.scrollTop + this.scrollMargin.top);
};
this.$updateScrollBarH = function() {
this.scrollBarH.setInnerWidth(this.layerConfig.width + 2 * this.$padding + this.scrollMargin.h);
this.scrollBarH.setScrollLeft(this.scrollLeft + this.scrollMargin.left);
};
this.$renderChanges = function(changes, force) {
if (!force && (!changes || !this.session || !this.container.offsetWidth))
return;
if (!force && (!changes || !this.session || !this.container.offsetWidth)) {
this.$changes = changes;
return;
}
// this.$logChanges(changes);
this._signal("beforeRender");
// text, scrolling and resize changes can cause the view port size to change
if (changes & this.CHANGE_FULL ||
@ -659,21 +726,17 @@ var VirtualRenderer = function(container, theme) {
// horizontal scrolling
if (changes & this.CHANGE_H_SCROLL) {
this.scroller.scrollLeft = this.scrollLeft;
// read the value after writing it since the value might get clipped
var scrollLeft = this.scroller.scrollLeft;
this.scrollLeft = scrollLeft;
this.session.setScrollLeft(scrollLeft);
this.scroller.className = this.scrollLeft == 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
this.$updateScrollBarH();
this.content.style.marginLeft = -this.scrollLeft + "px";
this.scroller.className = this.scrollLeft <= 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
}
// full
if (changes & this.CHANGE_FULL) {
this.$textLayer.checkForSizeChanges();
// update scrollbar first to not lose scroll position when gutter calls resize
this.$updateScrollBar();
this.$updateScrollBarV();
this.$updateScrollBarH();
this.$textLayer.update(this.layerConfig);
if (this.$showGutter)
this.$gutterLayer.update(this.layerConfig);
@ -688,6 +751,7 @@ var VirtualRenderer = function(container, theme) {
// scrolling
if (changes & this.CHANGE_SCROLL) {
this.$updateScrollBarV();
if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES)
this.$textLayer.update(this.layerConfig);
else
@ -700,7 +764,6 @@ var VirtualRenderer = function(container, theme) {
this.$cursorLayer.update(this.layerConfig);
this.$highlightGutterLine && this.$updateGutterLineHighlight();
this.$moveTextAreaToCursor();
this.$updateScrollBar();
this._signal("afterRender");
return;
}
@ -733,35 +796,79 @@ var VirtualRenderer = function(container, theme) {
this.$markerBack.update(this.layerConfig);
}
if (changes & this.CHANGE_SIZE)
this.$updateScrollBar();
if (changes & this.CHANGE_SIZE || changes & this.CHANGE_LINES) {
this.$updateScrollBarV();
this.$updateScrollBarH();
}
this._signal("afterRender");
};
this.$autosize = function(height, width) {
var height = this.session.getScreenLength() * this.lineHeight;
var maxHeight = this.$maxLines * this.lineHeight;
var desiredHeight = Math.max(
(this.$minLines||1) * this.lineHeight,
Math.min(maxHeight, height)
);
var vScroll = height > maxHeight;
if (desiredHeight != this.desiredHeight ||
this.$size.height != this.desiredHeight || vScroll != this.$vScroll) {
if (vScroll != this.$vScroll) {
this.$vScroll = vScroll;
this.scrollBarV.setVisible(vScroll);
}
var w = this.container.clientWidth;
this.container.style.height = desiredHeight + "px";
this.$updateCachedSize(true, this.$gutterWidth, w, 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()
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.$hScrollBarAlwaysVisible || this.$size.scrollerWidth - longestLine < 0;
var horizScrollChanged = this.$horizScroll !== horizScroll;
this.$horizScroll = horizScroll;
if (horizScrollChanged) {
this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden";
// when we hide scrollbar scroll event isn't emited
// leaving session with wrong scrollLeft value
if (!horizScroll)
this.session.setScrollLeft(0);
var hScrollChanged = this.$horizScroll !== horizScroll;
if (hScrollChanged) {
this.$horizScroll = horizScroll;
this.scrollBarH.setVisible(horizScroll);
}
var maxHeight = this.session.getScreenLength() * this.lineHeight;
this.session.setScrollTop(Math.max(0, Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight)));
var vScroll = !hideScrollbars && (this.$vScrollBarAlwaysVisible ||
this.$size.scrollerHeight - maxHeight < 0);
var vScrollChanged = this.$vScroll !== vScroll;
if (vScrollChanged) {
this.$vScroll = vScroll;
this.scrollBarV.setVisible(vScroll);
}
this.session.setScrollTop(Math.max(-this.scrollMargin.top,
Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight + this.scrollMargin.v)));
this.session.setScrollLeft(Math.max(-this.scrollMargin.left, Math.min(this.scrollLeft,
longestLine + 2 * this.$padding - this.$size.scrollerWidth + this.scrollMargin.h)));
var lineCount = Math.ceil(minHeight / this.lineHeight) - 1;
var firstRow = Math.max(0, Math.round((this.scrollTop - offset) / this.lineHeight));
@ -812,8 +919,10 @@ var VirtualRenderer = function(container, theme) {
// Horizontal scrollbar visibility may have changed, which changes
// the client height of the scroller
if (horizScrollChanged)
if (hScrollChanged || vScrollChanged) {
this.onResize(true);
this._signal("scrollbarVisibilityChanged");
}
};
this.$updateLines = function() {
@ -949,6 +1058,10 @@ var VirtualRenderer = function(container, theme) {
if (this.scrollTop > top) {
if (offset)
top -= offset * this.$size.scrollerHeight;
if (top == 0)
top = - this.scrollMargin.top;
else if (top == 0)
top = + this.scrollMargin.bottom;
this.session.setScrollTop(top);
} else if (this.scrollTop + this.$size.scrollerHeight < top + this.lineHeight) {
if (offset)
@ -960,10 +1073,12 @@ var VirtualRenderer = function(container, theme) {
if (scrollLeft > left) {
if (left < this.$padding + 2 * this.layerConfig.characterWidth)
left = 0;
left = -this.scrollMargin.left;
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);
}
};
@ -1116,9 +1231,6 @@ var VirtualRenderer = function(container, theme) {
* @returns {Number}
**/
this.scrollToX = function(scrollLeft) {
if (scrollLeft < 0)
scrollLeft = 0;
if (this.scrollLeft !== scrollLeft)
this.scrollLeft = scrollLeft;
this.$loop.schedule(this.CHANGE_H_SCROLL);
@ -1145,9 +1257,10 @@ var VirtualRenderer = function(container, theme) {
* @returns {Boolean}
**/
this.isScrollableBy = function(deltaX, deltaY) {
if (deltaY < 0 && this.session.getScrollTop() >= 1)
if (deltaY < 0 && this.session.getScrollTop() >= 1 - this.scrollMargin.top)
return true;
if (deltaY > 0 && this.session.getScrollTop() + this.$size.scrollerHeight - this.layerConfig.maxHeight < -1)
if (deltaY > 0 && this.session.getScrollTop() + this.$size.scrollerHeight
- this.layerConfig.maxHeight < -1 + this.scrollMargin.bottom)
return true;
// todo: handle horizontal scrolling
};
@ -1422,13 +1535,19 @@ config.defineOptions(VirtualRenderer.prototype, "renderer", {
value: true
},
hScrollBarAlwaysVisible: {
set: function(alwaysVisible) {
this.$hScrollBarAlwaysVisible = alwaysVisible;
set: function(val) {
if (!this.$hScrollBarAlwaysVisible || !this.$horizScroll)
this.$loop.schedule(this.CHANGE_SCROLL);
},
initialValue: false
},
vScrollBarAlwaysVisible: {
set: function(val) {
if (!this.$vScrollBarAlwaysVisible || !this.$vScroll)
this.$loop.schedule(this.CHANGE_SCROLL);
},
initialValue: false
},
fontSize: {
set: function(size) {
if (typeof size == "number")
@ -1443,6 +1562,16 @@ config.defineOptions(VirtualRenderer.prototype, "renderer", {
this.container.style.fontFamily = name;
this.updateFontSize();
}
},
maxLines: {
set: function(val) {
this.updateFull();
}
},
minLines: {
set: function(name) {
this.updateFull();
}
}
});