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

add option to autoresize editor vertically

Browse source
This commit is contained in:
nightwing 2013-06-25 20:59:06 +04:00
commit 0479acfea7
6 changed files with 62 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -103,11 +103,6 @@ var Split = function(){
exports.singleLineEditor = function(el) { exports.singleLineEditor = function(el) {
var renderer = new Renderer(el); var renderer = new Renderer(el);
el.style.overflow = "hidden"; 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) { renderer.screenToTextCoordinates = function(x, y) {
var pos = this.pixelToScreenCoordinates(x, y); var pos = this.pixelToScreenCoordinates(x, y);
@ -117,61 +112,7 @@ exports.singleLineEditor = function(el) {
); );
}; };
renderer.maxLines = 4; 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.setStyle("ace_one-line"); renderer.setStyle("ace_one-line");
var editor = new Editor(renderer); var editor = new Editor(renderer);
@ -182,7 +123,6 @@ exports.singleLineEditor = function(el) {
editor.setShowPrintMargin(false); editor.setShowPrintMargin(false);
editor.renderer.setShowGutter(false); editor.renderer.setShowGutter(false);
editor.renderer.setHighlightGutterLine(false); editor.renderer.setHighlightGutterLine(false);
editor.$mouseHandler.$focusWaitTimout = 0; editor.$mouseHandler.$focusWaitTimout = 0;
return editor; return editor;

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

@ -42,42 +42,8 @@ var dom = require("../lib/dom");
var $singleLineEditor = function(el) { var $singleLineEditor = function(el) {
var renderer = new Renderer(el); var renderer = new Renderer(el);
renderer.maxLines = 4; 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();
};
var editor = new Editor(renderer); var editor = new Editor(renderer);
editor.setHighlightActiveLine(false); editor.setHighlightActiveLine(false);
@ -108,7 +74,7 @@ var AcePopup = function(parentNode) {
popup.renderer.$cursorLayer.restartTimer = noop; popup.renderer.$cursorLayer.restartTimer = noop;
popup.renderer.$cursorLayer.element.style.opacity = 0; popup.renderer.$cursorLayer.element.style.opacity = 0;
popup.renderer.maxLines = 8; popup.renderer.$maxLines = 8;
popup.renderer.$keepTextAreaAtCursor = false; popup.renderer.$keepTextAreaAtCursor = false;
popup.setHighlightActiveLine(true); popup.setHighlightActiveLine(true);
@ -221,6 +187,7 @@ var AcePopup = function(parentNode) {
el.style.left = pos.left + "px"; el.style.left = pos.left + "px";
el.style.display = ""; el.style.display = "";
this.renderer.$textLayer.checkForSizeChanges();
this._signal("show"); this._signal("show");
}; };

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

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

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

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

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

@ -85,13 +85,13 @@ snippet la
snippet l_ snippet l_
l_ply(${1:list}, ${2:function}) l_ply(${1:list}, ${2:function})
snippet md snippet md
mdply(${1:matrix}, ${2:function}) mdply(${1:matrix}, ${2:function})
snippet ml snippet ml
mlply(${1:matrix}, ${2:function}) mlply(${1:matrix}, ${2:function})
snippet ma snippet ma
maply(${1:matrix}, ${2:function}) maply(${1:matrix}, ${2:function})
snippet m_ snippet m_
m_ply(${1:matrix}, ${2:function}) m_ply(${1:matrix}, ${2:function})
# plot functions # plot functions

95
lib/ace/virtual_renderer.js
View file

@ -187,21 +187,21 @@ 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) { // this.$logChanges = function(changes) {
var a = "" // var a = ""
if (changes & this.CHANGE_CURSOR) a += " cursor"; // if (changes & this.CHANGE_CURSOR) a += " cursor";
if (changes & this.CHANGE_MARKER) a += " marker"; // if (changes & this.CHANGE_MARKER) a += " marker";
if (changes & this.CHANGE_GUTTER) a += " gutter"; // if (changes & this.CHANGE_GUTTER) a += " gutter";
if (changes & this.CHANGE_SCROLL) a += " scroll"; // if (changes & this.CHANGE_SCROLL) a += " scroll";
if (changes & this.CHANGE_LINES) a += " lines"; // if (changes & this.CHANGE_LINES) a += " lines";
if (changes & this.CHANGE_TEXT) a += " text"; // if (changes & this.CHANGE_TEXT) a += " text";
if (changes & this.CHANGE_SIZE) a += " size"; // if (changes & this.CHANGE_SIZE) a += " size";
if (changes & this.CHANGE_MARKER_BACK) a += " marker_back"; // if (changes & this.CHANGE_MARKER_BACK) a += " marker_back";
if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front"; // if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front";
if (changes & this.CHANGE_FULL) a += " full"; // if (changes & this.CHANGE_FULL) a += " full";
if (changes & this.CHANGE_H_SCROLL) a += " h_scroll"; // if (changes & this.CHANGE_H_SCROLL) a += " h_scroll";
console.log(a.trim()) // console.log(a.trim())
}; // };
oop.implement(this, EventEmitter); oop.implement(this, EventEmitter);
@ -569,8 +569,6 @@ 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;
@ -657,7 +655,7 @@ var VirtualRenderer = function(container, theme) {
this.$updatePrintMargin(); this.$updatePrintMargin();
}; };
this.setScrollMargin = function(top, left, bottom, right) { this.setScrollMargin = function(top, bottom, left, right) {
var sm = this.scrollMargin; var sm = this.scrollMargin;
sm.top = top|0; sm.top = top|0;
sm.bottom = bottom|0; sm.bottom = bottom|0;
@ -714,7 +712,7 @@ var VirtualRenderer = function(container, theme) {
return; return;
} }
this.$logChanges(changes); // 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
@ -807,50 +805,55 @@ var VirtualRenderer = function(container, theme) {
}; };
this.setSize = function(height, width) { this.$autosize = function(height, width) {
this.scrollBar.element.style.display = ""; var height = this.session.getScreenLength() * this.lineHeight;
this.scrollBar.width = this.scrollBar.orginalWidth; var maxHeight = this.$maxLines * this.lineHeight;
this.container.style.height = config.height + "px"; var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height));
var vScroll = height > maxHeight;
this.scrollTop = height - this.maxLines * this.lineHeight; if (desiredHeight != this.desiredHeight ||
this.$size.height != this.desiredHeight || vScroll != this.$vScroll) {
if (vScroll != this.$vScroll) {
this.$vScroll = vScroll;
this.scrollBarV.setVisible(vScroll);
}
this.container.style.height = desiredHeight + "px";
this.$updateCachedSize(true, this.$gutterWidth, this.$size.width, desiredHeight);
// this.$loop.changes = 0;
this.desiredHeight = desiredHeight;
}
}; };
this.$computeLayerConfig = function() { this.$computeLayerConfig = function() {
if (this.$maxLines && this.lineHeight > 1)
this.$autosize();
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 hideScrollbars = this.$size.height <= 2 * this.lineHeight;
var screenLines = this.session.getScreenLength() 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 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 = !hideScrollbars && (this.$hScrollBarAlwaysVisible ||
this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0);
var horizScroll = this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0; var hScrollChanged = this.$horizScroll !== horizScroll;
if (!horizScroll && this.$hScrollBarAlwaysVisible) if (hScrollChanged) {
horizScroll = true;
var horizScrollChanged = this.$horizScroll !== horizScroll;
if (horizScrollChanged) {
this.$horizScroll = horizScroll; this.$horizScroll = horizScroll;
this.scrollBarH.setVisible(horizScroll); this.scrollBarH.setVisible(horizScroll);
} }
var vScroll = this.$vScrollBarAlwaysVisible || this.$size.scrollerHeight - maxHeight < 0; var vScroll = !hideScrollbars && (this.$vScrollBarAlwaysVisible ||
this.$size.scrollerHeight - maxHeight < 0);
var vScrollChanged = this.$vScroll !== vScroll; var vScrollChanged = this.$vScroll !== vScroll;
if (vScrollChanged) { if (vScrollChanged) {
this.$vScroll = vScroll; this.$vScroll = vScroll;
@ -859,7 +862,7 @@ var VirtualRenderer = function(container, theme) {
this.session.setScrollTop(Math.max(-this.scrollMargin.top, this.session.setScrollTop(Math.max(-this.scrollMargin.top,
Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight + this.scrollMargin.v))); 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, this.session.setScrollLeft(Math.max(-this.scrollMargin.left, Math.min(this.scrollLeft,
longestLine + 2 * this.$padding - this.$size.scrollerWidth + this.scrollMargin.h))); longestLine + 2 * this.$padding - this.$size.scrollerWidth + this.scrollMargin.h)));
@ -912,8 +915,10 @@ var VirtualRenderer = function(container, theme) {
// Horizontal scrollbar visibility may have changed, which changes // Horizontal scrollbar visibility may have changed, which changes
// the client height of the scroller // the client height of the scroller
if (horizScrollChanged || vScrollChanged) if (hScrollChanged || vScrollChanged) {
this.onResize(true); this.onResize(true);
this._signal("scrollbarVisibilityChanged");
}
}; };
this.$updateLines = function() { this.$updateLines = function() {
@ -1068,6 +1073,8 @@ var VirtualRenderer = function(container, theme) {
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));
} else if (scrollLeft <= this.$padding && left - scrollLeft < this.characterWidth) {
this.session.setScrollLeft(0);
} }
}; };