Skip to content

Commit 81f7dd7

Browse files
author
Ruben Daniels
committed
Merge pull request ajaxorg#1488 from ajaxorg/renderer
Renderer improvements
2 parents ea591e2 + 78585a9 commit 81f7dd7

13 files changed

Lines changed: 390 additions & 251 deletions

File tree

‎demo/autoresize.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>Editor</title>
7+
<style type="text/css" media="screen">
8+
9+
.ace_editor {
10+
position: relative !important;
11+
border: 1px solid lightgray;
12+
margin: auto;
13+
height: 200px;
14+
width: 80%;
15+
}
16+
.scrollmargin {
17+
height: 100px;
18+
text-align: center;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<pre id="editor">autoresizing editor</pre>
24+
<div class="scrollmargin"></div>
25+
<pre id="editor2">minHeight = 2 lines</pre>
26+
27+
<script src="../build/src/ace.js"></script>
28+
<script>
29+
30+
// create first editor
31+
var editor = ace.edit("editor");
32+
editor.setTheme("ace/theme/tomorrow");
33+
editor.session.setMode("ace/mode/html");
34+
editor.setAutoScrollEditorIntoView();
35+
editor.setOption("maxLines", 100);
36+
37+
var editor2 = ace.edit("editor2");
38+
editor2.setTheme("ace/theme/tomorrow_night_blue");
39+
editor2.session.setMode("ace/mode/html");
40+
editor2.setAutoScrollEditorIntoView();
41+
editor2.setOption("maxLines", 30);
42+
editor2.setOption("minLines", 2);
43+
44+
45+
</script>
46+
47+
</body>
48+
</html>

‎demo/kitchen-sink/layout.js‎

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -103,11 +103,6 @@ var Split = function(){
103103
exports.singleLineEditor = function(el) {
104104
var renderer = new Renderer(el);
105105
el.style.overflow = "hidden";
106-
renderer.scrollBar.element.style.top = "0";
107-
renderer.scrollBar.element.style.display = "none";
108-
renderer.scrollBar.orginalWidth = renderer.scrollBar.width;
109-
renderer.scrollBar.width = 0;
110-
renderer.content.style.height = "auto";
111106

112107
renderer.screenToTextCoordinates = function(x, y) {
113108
var pos = this.pixelToScreenCoordinates(x, y);
@@ -117,61 +112,7 @@ exports.singleLineEditor = function(el) {
117112
);
118113
};
119114

120-
renderer.maxLines = 4;
121-
renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig;
122-
renderer.$computeLayerConfig = function() {
123-
var config = this.layerConfig;
124-
var height = this.session.getScreenLength() * this.lineHeight;
125-
if (config.height != height) {
126-
var vScroll = height > this.maxLines * this.lineHeight;
127-
128-
if (vScroll != this.$vScroll) {
129-
if (vScroll) {
130-
this.scrollBar.element.style.display = "";
131-
this.scrollBar.width = this.scrollBar.orginalWidth;
132-
this.container.style.height = config.height + "px";
133-
height = config.height;
134-
this.scrollTop = height - this.maxLines * this.lineHeight;
135-
} else {
136-
this.scrollBar.element.style.display = "none";
137-
this.scrollBar.width = 0;
138-
}
139-
140-
this.onResize();
141-
this.$vScroll = vScroll;
142-
}
143-
144-
if (this.$vScroll)
145-
return renderer.$computeLayerConfigWithScroll();
146-
147-
this.container.style.height = height + "px";
148-
this.scroller.style.height = height + "px";
149-
this.content.style.height = height + "px";
150-
this._emit("resize");
151-
}
152-
153-
var longestLine = this.$getLongestLine();
154-
var firstRow = 0;
155-
var lastRow = this.session.getLength();
156-
157-
this.scrollTop = 0;
158-
config.width = longestLine;
159-
config.padding = this.$padding;
160-
config.firstRow = 0;
161-
config.firstRowScreen = 0;
162-
config.lastRow = lastRow;
163-
config.lineHeight = this.lineHeight;
164-
config.characterWidth = this.characterWidth;
165-
config.minHeight = height;
166-
config.maxHeight = height;
167-
config.offset = 0;
168-
config.height = height;
169-
170-
this.$gutterLayer.element.style.marginTop = 0 + "px";
171-
this.content.style.marginTop = 0 + "px";
172-
this.content.style.width = longestLine + 2 * this.$padding + "px";
173-
};
174-
renderer.isScrollableBy=function(){return false};
115+
renderer.$maxLines = 4;
175116

176117
renderer.setStyle("ace_one-line");
177118
var editor = new Editor(renderer);
@@ -182,7 +123,6 @@ exports.singleLineEditor = function(el) {
182123
editor.setShowPrintMargin(false);
183124
editor.renderer.setShowGutter(false);
184125
editor.renderer.setHighlightGutterLine(false);
185-
186126
editor.$mouseHandler.$focusWaitTimout = 0;
187127

188128
return editor;

‎doc/site/js/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,6 @@ $(function() {
6363

6464
tabs.find(tab_a_selector).click(function(e) {
6565
e.preventDefault();
66-
embedded_editor.resize();
67-
editor.resize();
6866
if ($(this).attr("href") === "/") {
6967
window.location = "http://ace.ajax.org";
7068
return;
@@ -101,6 +99,8 @@ $(function() {
10199
}
102100

103101
$(this).tab("show");
102+
embedded_editor.resize();
103+
editor.resize();
104104

105105
var state = {};
106106
state.nav = $(this).attr("href").substr(1);

‎lib/ace/autocomplete/popup.js‎

Lines changed: 4 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -42,42 +42,8 @@ var dom = require("../lib/dom");
4242
var $singleLineEditor = function(el) {
4343
var renderer = new Renderer(el);
4444

45-
renderer.maxLines = 4;
46-
renderer.$computeLayerConfigWithScroll = renderer.$computeLayerConfig;
47-
renderer.scrollBar.orginalWidth = renderer.scrollBar.getWidth();
48-
renderer.$computeLayerConfig = function() {
49-
var height = this.session.getScreenLength() * this.lineHeight;
50-
var maxHeight = this.maxLines * this.lineHeight;
51-
var desiredHeight = Math.max(this.lineHeight, Math.min(maxHeight, height));
52-
var vScroll = height > maxHeight;
53-
if (desiredHeight != this.desiredHeight || vScroll != this.$vScroll) {
54-
if (vScroll != this.$vScroll) {
55-
if (vScroll) {
56-
this.scrollBar.element.style.display = "";
57-
this.scrollBar.width = this.scrollBar.orginalWidth;
58-
59-
height = maxHeight;
60-
this.scrollTop = height - this.maxLines * this.lineHeight;
61-
} else {
62-
this.scrollBar.element.style.display = "none";
63-
this.scrollBar.width = 0;
64-
}
65-
66-
this.$size.height = 0;
67-
this.$size.width = 0;
68-
69-
this.$vScroll = vScroll;
70-
}
71-
72-
this.container.style.height = desiredHeight + "px";
73-
this.onResize();
74-
this.$loop.changes = 0;
75-
this.desiredHeight = desiredHeight;
76-
this.scroller.style.overflowX = "hidden";
77-
}
78-
return renderer.$computeLayerConfigWithScroll();
79-
};
80-
45+
renderer.$maxLines = 4;
46+
8147
var editor = new Editor(renderer);
8248

8349
editor.setHighlightActiveLine(false);
@@ -108,7 +74,7 @@ var AcePopup = function(parentNode) {
10874
popup.renderer.$cursorLayer.restartTimer = noop;
10975
popup.renderer.$cursorLayer.element.style.opacity = 0;
11076

111-
popup.renderer.maxLines = 8;
77+
popup.renderer.$maxLines = 8;
11278
popup.renderer.$keepTextAreaAtCursor = false;
11379

11480
popup.setHighlightActiveLine(true);
@@ -221,6 +187,7 @@ var AcePopup = function(parentNode) {
221187

222188
el.style.left = pos.left + "px";
223189
el.style.display = "";
190+
this.renderer.$textLayer.checkForSizeChanges();
224191

225192
this._signal("show");
226193
};

‎lib/ace/css/editor.css‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@
7171

7272
.ace_scrollbar {
7373
position: absolute;
74-
overflow-x: hidden;
75-
overflow-y: scroll;
74+
overflow: hidden;
75+
overflow-y: auto;
7676
right: 0;
7777
top: 0;
7878
bottom: 0;
@@ -84,6 +84,22 @@
8484
left: 0;
8585
}
8686

87+
.ace_scrollbar-h {
88+
position: absolute;
89+
overflow-x: auto;
90+
overflow-y: hidden;
91+
right: 0;
92+
left: 0;
93+
bottom: 0;
94+
}
95+
96+
.ace_scrollbar-inner {
97+
position: absolute;
98+
height: 1px;
99+
left: 0;
100+
}
101+
102+
87103
.ace_print-margin {
88104
position: absolute;
89105
height: 100%;

‎lib/ace/edit_session.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -990,7 +990,7 @@ var EditSession = function(text, mode) {
990990
*
991991
**/
992992
this.setScrollTop = function(scrollTop) {
993-
scrollTop = Math.round(Math.max(0, scrollTop));
993+
scrollTop = Math.round(scrollTop);
994994
if (this.$scrollTop === scrollTop || isNaN(scrollTop))
995995
return;
996996

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

‎lib/ace/editor.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2259,6 +2259,8 @@ config.defineOptions(Editor.prototype, "editor", {
22592259
displayIndentGuides: "renderer",
22602260
fontSize: "renderer",
22612261
fontFamily: "renderer",
2262+
maxLines: "renderer",
2263+
minLines: "renderer",
22622264

22632265
scrollSpeed: "$mouseHandler",
22642266
dragDelay: "$mouseHandler",

‎lib/ace/ext/textarea.js‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -288,21 +288,18 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
288288
settingDiv.hideButton.focus();
289289
editor.on("focus", function onFocus() {
290290
editor.removeListener("focus", onFocus);
291-
settingDiv.style.display = "none"
291+
settingDiv.style.display = "none";
292292
});
293293
} else {
294294
editor.focus();
295-
};
295+
}
296296
};
297297

298+
editor.$setOption = editor.setOption;
298299
editor.setOption = function(key, value) {
299300
if (options[key] == value) return;
300301

301302
switch (key) {
302-
case "gutter":
303-
renderer.setShowGutter(toBool(value));
304-
break;
305-
306303
case "mode":
307304
if (value != "text") {
308305
// Load the required mode file. Files get loaded only once.
@@ -366,18 +363,9 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
366363
break;
367364
}
368365
break;
369-
370-
case "useSoftTabs":
371-
session.setUseSoftTabs(toBool(value));
372-
break;
373-
374-
case "showPrintMargin":
375-
renderer.setShowPrintMargin(toBool(value));
376-
break;
377-
378-
case "showInvisibles":
379-
editor.setShowInvisibles(toBool(value));
380-
break;
366+
367+
default:
368+
editor.$setOption(key, toBool(value));
381369
}
382370

383371
options[key] = value;
@@ -391,9 +379,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
391379
return options;
392380
};
393381

394-
for (var option in exports.options) {
395-
editor.setOption(option, exports.options[option]);
396-
}
382+
editor.setOptions(exports.options);
397383

398384
return editor;
399385
}
@@ -493,7 +479,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
493479
cValue == "true" ? "checked='true'" : "",
494480
"'></input>"
495481
);
496-
return
482+
return;
497483
}
498484
builder.push("<select title='" + option + "'>");
499485
for (var value in obj) {

0 commit comments

Comments
 (0)