Merge pull request #2496 from ajaxorg/fix/renderer

fix renderer issues with autosize

demo/autoresize.html

@@ -7,14 +7,13 @@
   <style type="text/css" media="screen">
 
 	.ace_editor {
-		position: relative !important;
 		border: 1px solid lightgray;
 		margin: auto;
 		height: 200px;
 		width: 80%;
 	}
 	.scrollmargin {
-		height: 100px;
+		height: 80px;
         text-align: center;
 	}
     </style>
@@ -24,6 +23,8 @@
 <div class="scrollmargin"></div>
 <pre id="editor2">minHeight = 2 lines</pre>
 <div class="scrollmargin"></div>
+<pre id="editor3" style="width: 40%;"></pre>
+<div class="scrollmargin"></div>
 <pre id="editor"></pre>
 
 <script src="kitchen-sink/require.js"></script>
@@ -46,6 +47,14 @@ require(["ace/ace"], function(ace) {
     editor2.setOption("maxLines", 30);
     editor2.setOption("minLines", 2);
 
+    var editor = ace.edit("editor3");
+    editor.setOptions({
+        maxLines: 100,
+        autoScrollEditorIntoView: true,
+        maxLines: 8
+    });
+    editor.renderer.setScrollMargin(10, 10, 10, 10);
+    
     var editor = ace.edit("editor");
     editor.setTheme("ace/theme/tomorrow");
     editor.session.setMode("ace/mode/html");

lib/ace/virtual_renderer.js

@@ -615,7 +615,7 @@ var VirtualRenderer = function(container, theme) {
     * @returns {DOMElement}
     **/
     this.getMouseEventTarget = function() {
-        return this.content;
+        return this.scroller;
     };
 
     /**
@@ -919,6 +919,8 @@ var VirtualRenderer = function(container, theme) {
             (this.$minLines||1) * this.lineHeight,
             Math.min(maxHeight, height)
         ) + this.scrollMargin.v + (this.$extraHeight || 0);
+        if (this.$horizScroll)
+            desiredHeight += this.scrollBarH.getHeight();
         var vScroll = height > maxHeight;
         
         if (desiredHeight != this.desiredHeight ||
@@ -939,9 +941,6 @@ var VirtualRenderer = function(container, theme) {
     };
     
     this.$computeLayerConfig = function() {
-        if (this.$maxLines && this.lineHeight > 1)
-            this.$autosize();
-
         var session = this.session;
         var size = this.$size;
         
@@ -949,9 +948,6 @@ var VirtualRenderer = function(container, theme) {
         var screenLines = this.session.getScreenLength();
         var maxHeight = screenLines * this.lineHeight;
 
-        var offset = this.scrollTop % this.lineHeight;
-        var minHeight = size.scrollerHeight + this.lineHeight;
-
         var longestLine = this.$getLongestLine();
         
         var horizScroll = !hideScrollbars && (this.$hScrollBarAlwaysVisible ||
@@ -962,20 +958,27 @@ var VirtualRenderer = function(container, theme) {
             this.$horizScroll = horizScroll;
             this.scrollBarH.setVisible(horizScroll);
         }
+        // autoresize only after updating hscroll to include scrollbar height in desired height
+        if (this.$maxLines && this.lineHeight > 1)
+            this.$autosize();
+
+        var offset = this.scrollTop % this.lineHeight;
+        var minHeight = size.scrollerHeight + this.lineHeight;
         
         var scrollPastEnd = !this.$maxLines && this.$scrollPastEnd
             ? (size.scrollerHeight - this.lineHeight) * this.$scrollPastEnd
             : 0;
         maxHeight += scrollPastEnd;
         
-        this.session.setScrollTop(Math.max(-this.scrollMargin.top,
+        var sm = this.scrollMargin;
-            Math.min(this.scrollTop, maxHeight - size.scrollerHeight + this.scrollMargin.bottom)));
+        this.session.setScrollTop(Math.max(-sm.top,
+            Math.min(this.scrollTop, maxHeight - size.scrollerHeight + sm.bottom)));
 
-        this.session.setScrollLeft(Math.max(-this.scrollMargin.left, Math.min(this.scrollLeft, 
+        this.session.setScrollLeft(Math.max(-sm.left, Math.min(this.scrollLeft, 
-            longestLine + 2 * this.$padding - size.scrollerWidth + this.scrollMargin.right)));
+            longestLine + 2 * this.$padding - size.scrollerWidth + sm.right)));
         
         var vScroll = !hideScrollbars && (this.$vScrollBarAlwaysVisible ||
-            size.scrollerHeight - maxHeight + scrollPastEnd < 0 || this.scrollTop);
+            size.scrollerHeight - maxHeight + scrollPastEnd < 0 || this.scrollTop > sm.top);
         var vScrollChanged = this.$vScroll !== vScroll;
         if (vScrollChanged) {
             this.$vScroll = vScroll;

lib/ace/virtual_renderer_test.js

@@ -36,26 +36,40 @@ if (typeof process !== "undefined") {
 define(function(require, exports, module) {
 "use strict";
 
+var Editor = require("./edit_session").Editor;
 var EditSession = require("./edit_session").EditSession;
 var VirtualRenderer = require("./virtual_renderer").VirtualRenderer;
 var assert = require("./test/assertions");
 
+var editor = null;
 module.exports = {
-    "test: screen2text the column should be rounded to the next character edge" : function() {
+    setUp: function() {
+        if (editor)
+            editor.destroy()
         var el = document.createElement("div");
-
         if (!el.getBoundingClientRect) {
             console.log("Skipping test: This test only runs in the browser");
             return;
         }
-
         el.style.left = "20px";
         el.style.top = "30px";
         el.style.width = "300px";
         el.style.height = "100px";
         document.body.appendChild(el);
-
         var renderer = new VirtualRenderer(el);
+        var editor = new Editor(renderer);
+        editor.on("destroy", function() {
+            document.body.removeChild(el);
+        });
+    },
+    tearDown: function() {
+        editor && editor.destroy();
+        editor = null;
+    },
+    "test: screen2text the column should be rounded to the next character edge" : function(done) {
+        if (!editor) return done();
+        var renderer = editor.renderer;
+
         renderer.setPadding(0);
         renderer.setSession(new EditSession("1234"));
 
@@ -73,7 +87,23 @@ module.exports = {
         testPixelToText(10, 0, 0, 1);
         testPixelToText(14, 0, 0, 1);
         testPixelToText(15, 0, 0, 2);
-        document.body.removeChild(el);
+        done();
+    },
+    
+    "test scrollmargin + autosize": function(done) {
+        if (!editor) return done();
+        editor.setOptions({
+            maxLines: 100,
+            useWrapMode: true
+        });        
+        editor.renderer.setScrollMargin(10, 10);
+        editor.setValue("\n\n");
+        editor.setValue("\n\n\n\n");
+        editor.renderer.once("afterRender", function() {
+            setTimeout(function() {
+                done();
+            }, 0);
+        });
     }
 
     // change tab size after setDocument (for text layer)