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

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();
}
}
});