use fake horizontal scrollbar
This commit is contained in:
nightwing
parent
2d9225326c
commit
43f1788ad4
5 changed files with 302 additions and 126 deletions
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -985,7 +985,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;
|
||||
|
||||
|
|
@ -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}
|
||||
**/
|
||||
this.setScrollLeft = function(scrollLeft) {
|
||||
scrollLeft = Math.round(Math.max(0, scrollLeft));
|
||||
scrollLeft = Math.round(scrollLeft);
|
||||
if (this.$scrollLeft === scrollLeft || isNaN(scrollLeft))
|
||||
return;
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
|
|||
*
|
||||
* @constructor
|
||||
**/
|
||||
var ScrollBar = function(parent) {
|
||||
var ScrollBarV = function(parent) {
|
||||
this.element = dom.createElement("div");
|
||||
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
|
||||
// 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.
|
||||
|
|
@ -92,6 +139,10 @@ 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
|
||||
|
|
@ -99,6 +150,10 @@ var ScrollBar = function(parent) {
|
|||
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.
|
||||
|
|
@ -107,22 +162,36 @@ var ScrollBar = function(parent) {
|
|||
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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
@ -281,9 +309,6 @@ var VirtualRenderer = function(container, theme) {
|
|||
*
|
||||
**/
|
||||
this.onResize = function(force, gutterWidth, width, height) {
|
||||
var changes = this.$changes || 0;
|
||||
var size = this.$size;
|
||||
|
||||
if (this.resizing > 2)
|
||||
return;
|
||||
else if (this.resizing > 1)
|
||||
|
|
@ -291,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;
|
||||
|
|
@ -341,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);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -534,6 +569,8 @@ 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;
|
||||
|
|
@ -619,29 +656,56 @@ var VirtualRenderer = function(container, theme) {
|
|||
this.$loop.schedule(this.CHANGE_FULL);
|
||||
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 {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) {
|
||||
|
|
@ -649,7 +713,9 @@ var VirtualRenderer = function(container, theme) {
|
|||
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 ||
|
||||
|
|
@ -662,21 +728,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);
|
||||
|
|
@ -691,6 +753,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
|
||||
|
|
@ -703,7 +766,6 @@ var VirtualRenderer = function(container, theme) {
|
|||
this.$cursorLayer.update(this.layerConfig);
|
||||
this.$highlightGutterLine && this.$updateGutterLineHighlight();
|
||||
this.$moveTextAreaToCursor();
|
||||
this.$updateScrollBar();
|
||||
this._signal("afterRender");
|
||||
return;
|
||||
}
|
||||
|
|
@ -736,35 +798,70 @@ var VirtualRenderer = function(container, theme) {
|
|||
this.$markerBack.update(this.layerConfig);
|
||||
}
|
||||
|
||||
if (changes & this.CHANGE_SIZE)
|
||||
this.$updateScrollBar();
|
||||
if (changes & this.CHANGE_SIZE) {
|
||||
this.$updateScrollBarV();
|
||||
this.$updateScrollBarH();
|
||||
}
|
||||
|
||||
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() {
|
||||
if (!this.$size.scrollerHeight)
|
||||
return this.onResize(true);
|
||||
|
||||
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 minHeight = this.$size.scrollerHeight + this.lineHeight;
|
||||
|
||||
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;
|
||||
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);
|
||||
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 = 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 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
|
||||
// the client height of the scroller
|
||||
if (horizScrollChanged)
|
||||
if (horizScrollChanged || vScrollChanged)
|
||||
this.onResize(true);
|
||||
};
|
||||
|
||||
|
|
@ -952,6 +1049,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)
|
||||
|
|
@ -963,7 +1064,7 @@ 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));
|
||||
|
|
@ -1119,9 +1220,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);
|
||||
|
|
@ -1148,9 +1246,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
|
||||
};
|
||||
|
|
@ -1424,13 +1523,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")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue