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

use fake horizontal scrollbar

Browse source
This commit is contained in:
nightwing 2013-06-20 15:44:07 +04:00
commit 43f1788ad4
5 changed files with 302 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -71,8 +71,8 @@
.ace_scrollbar { .ace_scrollbar {
position: absolute; position: absolute;
overflow-x: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: auto;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -84,6 +84,22 @@
left: 0; 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 { .ace_print-margin {
position: absolute; position: absolute;
height: 100%; height: 100%;

4
lib/ace/edit_session.js
View file

@ -985,7 +985,7 @@ var EditSession = function(text, mode) {
* *
**/ **/
this.setScrollTop = function(scrollTop) { this.setScrollTop = function(scrollTop) {
scrollTop = Math.round(Math.max(0, scrollTop)); scrollTop = Math.round(scrollTop);
if (this.$scrollTop === scrollTop || isNaN(scrollTop)) if (this.$scrollTop === scrollTop || isNaN(scrollTop))
return; return;
@ -1006,7 +1006,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} * [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) { this.setScrollLeft = function(scrollLeft) {
scrollLeft = Math.round(Math.max(0, scrollLeft)); scrollLeft = Math.round(scrollLeft);
if (this.$scrollLeft === scrollLeft || isNaN(scrollLeft)) if (this.$scrollLeft === scrollLeft || isNaN(scrollLeft))
return; return;

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

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

85
lib/ace/scrollbar.js
View file

@ -47,7 +47,7 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
* *
* @constructor * @constructor
**/ **/
var ScrollBar = function(parent) { var ScrollBarV = function(parent) {
this.element = dom.createElement("div"); this.element = dom.createElement("div");
this.element.className = "ace_scrollbar"; this.element.className = "ace_scrollbar";
@ -63,26 +63,73 @@ var ScrollBar = function(parent) {
// in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar // 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 // make element a little bit wider to retain scrollbar when page is zoomed
this.width = dom.scrollbarWidth(parent.ownerDocument); this.width = dom.scrollbarWidth(parent.ownerDocument);
this.fullWidth = this.width;
this.element.style.width = (this.width || 15) + 5 + "px"; 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() { (function() {
oop.implement(this, EventEmitter); 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. * Emitted when the scroll bar, well, scrolls.
* @event scroll * @event scroll
* @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position * @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position
**/ **/
this.onScroll = function() { this.onScrollV = function() {
if (!this.skipEvent) { if (!this.skipEvent) {
this.scrollTop = this.element.scrollTop; this.scrollTop = this.element.scrollTop;
this._emit("scroll", {data: this.scrollTop}); this._emit("scroll", {data: this.scrollTop});
} }
this.skipEvent = false; 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 the width of the scroll bar.
@ -92,6 +139,10 @@ var ScrollBar = function(parent) {
return this.width; return this.width;
}; };
this.getHeight = function() {
return this.height;
};
/** /**
* Sets the height of the scroll bar, in pixels. * Sets the height of the scroll bar, in pixels.
* @param {Number} height The new height * @param {Number} height The new height
@ -99,6 +150,10 @@ var ScrollBar = function(parent) {
this.setHeight = function(height) { this.setHeight = function(height) {
this.element.style.height = height + "px"; 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. * Sets the inner height of the scroll bar, in pixels.
@ -107,22 +162,36 @@ var ScrollBar = function(parent) {
this.setInnerHeight = function(height) { this.setInnerHeight = function(height) {
this.inner.style.height = height + "px"; 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. * Sets the scroll top of the scroll bar.
* @param {Number} scrollTop The new scroll top * @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) { this.setScrollTop = function(scrollTop) {
if (this.scrollTop != scrollTop) { if (this.scrollTop != scrollTop) {
this.skipEvent = true; this.skipEvent = true;
this.scrollTop = this.element.scrollTop = scrollTop; 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;
}); });

289
lib/ace/virtual_renderer.js
View file

@ -40,7 +40,8 @@ var GutterLayer = require("./layer/gutter").Gutter;
var MarkerLayer = require("./layer/marker").Marker; var MarkerLayer = require("./layer/marker").Marker;
var TextLayer = require("./layer/text").Text; var TextLayer = require("./layer/text").Text;
var CursorLayer = require("./layer/cursor").Cursor; 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 RenderLoop = require("./renderloop").RenderLoop;
var EventEmitter = require("./lib/event_emitter").EventEmitter; var EventEmitter = require("./lib/event_emitter").EventEmitter;
var editorCss = require("./requirejs/text!./css/editor.css"); var editorCss = require("./requirejs/text!./css/editor.css");
@ -102,22 +103,23 @@ var VirtualRenderer = function(container, theme) {
// Indicates whether the horizontal scrollbar is visible // Indicates whether the horizontal scrollbar is visible
this.$horizScroll = false; this.$horizScroll = false;
this.$vScroll = false;
this.scrollBar = new ScrollBar(this.container); this.scrollBar =
this.scrollBar.addEventListener("scroll", function(e) { this.scrollBarV = new ScrollBarV(this.container);
this.scrollBarH = new ScrollBarH(this.container);
this.scrollBarV.addEventListener("scroll", function(e) {
if (!_self.$scrollAnimation) 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.scrollTop = 0;
this.scrollLeft = 0; this.scrollLeft = 0;
event.addListener(this.scroller, "scroll", function() {
var scrollLeft = _self.scroller.scrollLeft;
_self.scrollLeft = scrollLeft;
_self.session.setScrollLeft(scrollLeft);
});
this.cursorPos = { this.cursorPos = {
row : 0, row : 0,
column : 0 column : 0
@ -126,6 +128,7 @@ var VirtualRenderer = function(container, theme) {
this.$textLayer.addEventListener("changeCharacterSize", function() { this.$textLayer.addEventListener("changeCharacterSize", function() {
_self.updateCharacterSize(); _self.updateCharacterSize();
_self.onResize(true); _self.onResize(true);
_self._signal("changeCharacterSize");
}); });
this.$size = { this.$size = {
@ -148,6 +151,15 @@ var VirtualRenderer = function(container, theme) {
offset : 0, offset : 0,
height : 1 height : 1
}; };
this.scrollMargin = {
left: 0,
right: 0,
top: 0,
bottom: 0,
v: 0,
h: 0
}
this.$loop = new RenderLoop( this.$loop = new RenderLoop(
this.$renderChanges.bind(this), this.$renderChanges.bind(this),
@ -175,6 +187,22 @@ var VirtualRenderer = function(container, theme) {
this.CHANGE_FULL = 512; this.CHANGE_FULL = 512;
this.CHANGE_H_SCROLL = 1024; 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); oop.implement(this, EventEmitter);
this.updateCharacterSize = function() { this.updateCharacterSize = function() {
@ -281,9 +309,6 @@ var VirtualRenderer = function(container, theme) {
* *
**/ **/
this.onResize = function(force, gutterWidth, width, height) { this.onResize = function(force, gutterWidth, width, height) {
var changes = this.$changes || 0;
var size = this.$size;
if (this.resizing > 2) if (this.resizing > 2)
return; return;
else if (this.resizing > 1) else if (this.resizing > 1)
@ -291,41 +316,11 @@ var VirtualRenderer = function(container, theme) {
else else
this.resizing = force ? 1 : 0; this.resizing = force ? 1 : 0;
if (!height) if (!height)
height = dom.getInnerHeight(this.container); height = this.container.clientHeight;
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;
}
}
if (!width) if (!width)
width = dom.getInnerWidth(this.container); width = this.container.clientWidth;
if (width && (force || this.resizing > 1 || size.width != width)) { var changes = this.$updateCachedSize(force, gutterWidth, width, height);
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;
}
if (!this.$size.scrollerHeight) if (!this.$size.scrollerHeight)
return; return;
@ -341,17 +336,57 @@ var VirtualRenderer = function(container, theme) {
if (force) if (force)
delete this.resizing; 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() { this.onGutterResize = function() {
var width = this.$size.width; var width = this.$size.width;
var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0; var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
this.scroller.style.left = gutterWidth + "px"; this.$updateCachedSize(true, gutterWidth, this.$size.width, this.$size.height);
this.$size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
if (this.session.getUseWrapMode() && this.adjustWrapLimit()) if (this.session.getUseWrapMode() && this.adjustWrapLimit())
this.$loop.schedule(this.CHANGE_FULL); this.$loop.schedule(this.CHANGE_FULL);
else else {
this.$computeLayerConfig();
this.$loop.schedule(this.CHANGE_MARKER); this.$loop.schedule(this.CHANGE_MARKER);
}
}; };
/** /**
@ -534,6 +569,8 @@ var VirtualRenderer = function(container, theme) {
// move text input over the cursor // move text input over the cursor
// this is required for iOS and IME // this is required for iOS and IME
this.$moveTextAreaToCursor = function() { this.$moveTextAreaToCursor = function() {
this.textarea.style.cssText = "top:0;left:0;position:fixed"
return
if (!this.$keepTextAreaAtCursor) if (!this.$keepTextAreaAtCursor)
return; return;
var config = this.layerConfig; var config = this.layerConfig;
@ -619,29 +656,56 @@ var VirtualRenderer = function(container, theme) {
this.$loop.schedule(this.CHANGE_FULL); this.$loop.schedule(this.CHANGE_FULL);
this.$updatePrintMargin(); this.$updatePrintMargin();
}; };
this.setScrollMargin = function(top, left, bottom, 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 whether the horizontal scrollbar is set to be always visible. * @returns {Boolean}
* @returns {Boolean} **/
**/
this.getHScrollBarAlwaysVisible = function() { this.getHScrollBarAlwaysVisible = function() {
return this.$hScrollBarAlwaysVisible; return this.$hScrollBarAlwaysVisible;
}; };
/** /**
* Identifies whether you want to show the horizontal scrollbar or not. * Identifies whether you want to show the horizontal scrollbar or not.
* @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
* **/
*
**/
this.setHScrollBarAlwaysVisible = function(alwaysVisible) { this.setHScrollBarAlwaysVisible = function(alwaysVisible) {
this.setOption("hScrollBarAlwaysVisible", 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); * Identifies whether you want to show the horizontal scrollbar or not.
this.scrollBar.setScrollTop(this.scrollTop); * @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) { this.$renderChanges = function(changes, force) {
@ -649,7 +713,9 @@ var VirtualRenderer = function(container, theme) {
this.$changes = changes; this.$changes = changes;
return; return;
} }
this.$logChanges(changes);
this._signal("beforeRender"); this._signal("beforeRender");
// text, scrolling and resize changes can cause the view port size to change // text, scrolling and resize changes can cause the view port size to change
if (changes & this.CHANGE_FULL || if (changes & this.CHANGE_FULL ||
@ -662,21 +728,17 @@ var VirtualRenderer = function(container, theme) {
// horizontal scrolling // horizontal scrolling
if (changes & this.CHANGE_H_SCROLL) { if (changes & this.CHANGE_H_SCROLL) {
this.scroller.scrollLeft = this.scrollLeft; this.$updateScrollBarH();
this.content.style.marginLeft = -this.scrollLeft + "px";
// read the value after writing it since the value might get clipped this.scroller.className = this.scrollLeft <= 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
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";
} }
// full // full
if (changes & this.CHANGE_FULL) { if (changes & this.CHANGE_FULL) {
this.$textLayer.checkForSizeChanges(); this.$textLayer.checkForSizeChanges();
// update scrollbar first to not lose scroll position when gutter calls resize // update scrollbar first to not lose scroll position when gutter calls resize
this.$updateScrollBar(); this.$updateScrollBarV();
this.$updateScrollBarH();
this.$textLayer.update(this.layerConfig); this.$textLayer.update(this.layerConfig);
if (this.$showGutter) if (this.$showGutter)
this.$gutterLayer.update(this.layerConfig); this.$gutterLayer.update(this.layerConfig);
@ -691,6 +753,7 @@ var VirtualRenderer = function(container, theme) {
// scrolling // scrolling
if (changes & this.CHANGE_SCROLL) { if (changes & this.CHANGE_SCROLL) {
this.$updateScrollBarV();
if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES) if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES)
this.$textLayer.update(this.layerConfig); this.$textLayer.update(this.layerConfig);
else else
@ -703,7 +766,6 @@ var VirtualRenderer = function(container, theme) {
this.$cursorLayer.update(this.layerConfig); this.$cursorLayer.update(this.layerConfig);
this.$highlightGutterLine && this.$updateGutterLineHighlight(); this.$highlightGutterLine && this.$updateGutterLineHighlight();
this.$moveTextAreaToCursor(); this.$moveTextAreaToCursor();
this.$updateScrollBar();
this._signal("afterRender"); this._signal("afterRender");
return; return;
} }
@ -736,35 +798,70 @@ var VirtualRenderer = function(container, theme) {
this.$markerBack.update(this.layerConfig); this.$markerBack.update(this.layerConfig);
} }
if (changes & this.CHANGE_SIZE) if (changes & this.CHANGE_SIZE) {
this.$updateScrollBar(); this.$updateScrollBarV();
this.$updateScrollBarH();
}
this._signal("afterRender"); this._signal("afterRender");
}; };
this.setSize = function(height, width) {
this.scrollBar.element.style.display = "";
this.scrollBar.width = this.scrollBar.orginalWidth;
this.container.style.height = config.height + "px";
this.scrollTop = height - this.maxLines * this.lineHeight;
};
this.$computeLayerConfig = function() { this.$computeLayerConfig = function() {
if (!this.$size.scrollerHeight) if (!this.$size.scrollerHeight)
return this.onResize(true); return this.onResize(true);
var session = this.session; var session = this.session;
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 offset = this.scrollTop % this.lineHeight;
var minHeight = this.$size.scrollerHeight + this.lineHeight; var minHeight = this.$size.scrollerHeight + this.lineHeight;
var longestLine = this.$getLongestLine(); var longestLine = this.$getLongestLine();
var horizScroll = this.$hScrollBarAlwaysVisible || this.$size.scrollerWidth - longestLine < 0; var horizScroll = this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0;
if (!horizScroll && this.$hScrollBarAlwaysVisible)
horizScroll = true;
var horizScrollChanged = this.$horizScroll !== horizScroll; var horizScrollChanged = this.$horizScroll !== horizScroll;
this.$horizScroll = horizScroll;
if (horizScrollChanged) { if (horizScrollChanged) {
this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden"; this.$horizScroll = horizScroll;
// when we hide scrollbar scroll event isn't emited this.scrollBarH.setVisible(horizScroll);
// leaving session with wrong scrollLeft value
if (!horizScroll)
this.session.setScrollLeft(0);
} }
var maxHeight = this.session.getScreenLength() * this.lineHeight;
this.session.setScrollTop(Math.max(0, Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight))); var vScroll = 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)));
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)));
var lineCount = Math.ceil(minHeight / this.lineHeight) - 1; var lineCount = Math.ceil(minHeight / this.lineHeight) - 1;
var firstRow = Math.max(0, Math.round((this.scrollTop - offset) / this.lineHeight)); var firstRow = Math.max(0, Math.round((this.scrollTop - offset) / this.lineHeight));
@ -815,7 +912,7 @@ var VirtualRenderer = function(container, theme) {
// Horizontal scrollbar visibility may have changed, which changes // Horizontal scrollbar visibility may have changed, which changes
// the client height of the scroller // the client height of the scroller
if (horizScrollChanged) if (horizScrollChanged || vScrollChanged)
this.onResize(true); this.onResize(true);
}; };
@ -952,6 +1049,10 @@ var VirtualRenderer = function(container, theme) {
if (this.scrollTop > top) { if (this.scrollTop > top) {
if (offset) if (offset)
top -= offset * this.$size.scrollerHeight; top -= offset * this.$size.scrollerHeight;
if (top == 0)
top = - this.scrollMargin.top;
else if (top == 0)
top = + this.scrollMargin.bottom;
this.session.setScrollTop(top); this.session.setScrollTop(top);
} else if (this.scrollTop + this.$size.scrollerHeight < top + this.lineHeight) { } else if (this.scrollTop + this.$size.scrollerHeight < top + this.lineHeight) {
if (offset) if (offset)
@ -963,7 +1064,7 @@ var VirtualRenderer = function(container, theme) {
if (scrollLeft > left) { if (scrollLeft > left) {
if (left < this.$padding + 2 * this.layerConfig.characterWidth) if (left < this.$padding + 2 * this.layerConfig.characterWidth)
left = 0; left = -this.scrollMargin.left;
this.session.setScrollLeft(left); this.session.setScrollLeft(left);
} else if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) { } else if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) {
this.session.setScrollLeft(Math.round(left + this.characterWidth - this.$size.scrollerWidth)); this.session.setScrollLeft(Math.round(left + this.characterWidth - this.$size.scrollerWidth));
@ -1119,9 +1220,6 @@ var VirtualRenderer = function(container, theme) {
* @returns {Number} * @returns {Number}
**/ **/
this.scrollToX = function(scrollLeft) { this.scrollToX = function(scrollLeft) {
if (scrollLeft < 0)
scrollLeft = 0;
if (this.scrollLeft !== scrollLeft) if (this.scrollLeft !== scrollLeft)
this.scrollLeft = scrollLeft; this.scrollLeft = scrollLeft;
this.$loop.schedule(this.CHANGE_H_SCROLL); this.$loop.schedule(this.CHANGE_H_SCROLL);
@ -1148,9 +1246,10 @@ var VirtualRenderer = function(container, theme) {
* @returns {Boolean} * @returns {Boolean}
**/ **/
this.isScrollableBy = function(deltaX, deltaY) { this.isScrollableBy = function(deltaX, deltaY) {
if (deltaY < 0 && this.session.getScrollTop() >= 1) if (deltaY < 0 && this.session.getScrollTop() >= 1 - this.scrollMargin.top)
return true; 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; return true;
// todo: handle horizontal scrolling // todo: handle horizontal scrolling
}; };
@ -1424,13 +1523,19 @@ config.defineOptions(VirtualRenderer.prototype, "renderer", {
value: true value: true
}, },
hScrollBarAlwaysVisible: { hScrollBarAlwaysVisible: {
set: function(alwaysVisible) { set: function(val) {
this.$hScrollBarAlwaysVisible = alwaysVisible;
if (!this.$hScrollBarAlwaysVisible || !this.$horizScroll) if (!this.$hScrollBarAlwaysVisible || !this.$horizScroll)
this.$loop.schedule(this.CHANGE_SCROLL); this.$loop.schedule(this.CHANGE_SCROLL);
}, },
initialValue: false initialValue: false
}, },
vScrollBarAlwaysVisible: {
set: function(val) {
if (!this.$vScrollBarAlwaysVisible || !this.$vScroll)
this.$loop.schedule(this.CHANGE_SCROLL);
},
initialValue: false
},
fontSize: { fontSize: {
set: function(size) { set: function(size) {
if (typeof size == "number") if (typeof size == "number")