Merge pull request #343 from Gozala/bugs/paddings-342

Make padding text specific to layer type, so that print margin and active line highlight are not affected.

lib/ace/layer/cursor.js

@@ -55,6 +55,11 @@ var Cursor = function(parentEl) {
 
 (function() {
 
+    this.$padding = 0;
+    this.setPadding = function(padding) {
+        this.$padding = padding;
+    };
+
     this.setSession = function(session) {
         this.session = session;
     };
@@ -66,7 +71,7 @@ var Cursor = function(parentEl) {
     };
 
     this.showCursor = function() {
-        this.isVisible = true;   
+        this.isVisible = true;
         dom.removeCssClass(this.cursor, "ace_hidden");
         this.cursor.style.visibility = "visible";
         this.restartTimer();
@@ -97,7 +102,8 @@ var Cursor = function(parentEl) {
 
         var position = this.session.selection.getCursor();
         var pos = this.session.documentToScreenPosition(position);
-        var cursorLeft = Math.round(pos.column * this.config.characterWidth);
+        var cursorLeft = Math.round(this.$padding +
+                                    pos.column * this.config.characterWidth);
         var cursorTop = (pos.row - (onScreen ? this.config.firstRowScreen : 0)) *
             this.config.lineHeight;
 

lib/ace/layer/marker.js

@@ -50,6 +50,12 @@ var Marker = function(parentEl) {
 
 (function() {
 
+    this.$padding = 0;
+
+    this.setPadding = function(padding) {
+        this.$padding = padding;
+    };
+
     this.setSession = function(session) {
         this.session = session;
     };
@@ -65,7 +71,7 @@ var Marker = function(parentEl) {
 
         this.config = config;
 
-        var html = [];        
+        var html = [];
         for ( var key in this.markers) {
             var marker = this.markers[key];
 
@@ -76,7 +82,9 @@ var Marker = function(parentEl) {
 
             if (marker.renderer) {
                 var top = this.$getTop(range.start.row, config);
-                var left = Math.round(range.start.column * config.characterWidth);        
+                var left = Math.round(this.$padding +
+                                      range.start.column *
+                                      config.characterWidth);
                 marker.renderer(html, range, left, top, config);
             }
             else if (range.isMultiLine()) {
@@ -162,7 +170,8 @@ var Marker = function(parentEl) {
         var height = layerConfig.lineHeight;
         var width = Math.round((range.end.column + (extraLength || 0) - range.start.column) * layerConfig.characterWidth);
         var top = this.$getTop(range.start.row, layerConfig);
-        var left = Math.round(range.start.column * layerConfig.characterWidth);
+        var left = Math.round(this.$padding +
+                              range.start.column * layerConfig.characterWidth);
 
         stringBuilder.push(
             "<div class='", clazz, "' style='",

lib/ace/layer/text.js

@@ -49,6 +49,7 @@ var EventEmitter = require("pilot/event_emitter").EventEmitter;
 var Text = function(parentEl) {
     this.element = dom.createElement("div");
     this.element.className = "ace_layer ace_text-layer";
+    this.element.style.width = "auto";
     parentEl.appendChild(this.element);
 
     this.$characterSize = this.$measureSizes() || {width: 0, height: 0};
@@ -63,6 +64,12 @@ var Text = function(parentEl) {
     this.EOL_CHAR = "¬";
     this.TAB_CHAR = "→";
     this.SPACE_CHAR = "·";
+    this.$padding = 0;
+
+    this.setPadding = function(padding) {
+        this.$padding = padding;
+        this.element.style.padding = "0 " + padding + "px";
+    };
 
     this.getLineHeight = function() {
         return this.$characterSize.height || 1;

lib/ace/virtual_renderer.js

@@ -372,7 +372,10 @@ var VirtualRenderer = function(container, theme) {
     this.$padding = null;
     this.setPadding = function(padding) {
         this.$padding = padding;
-        this.content.style.padding = "0 " + padding + "px";
+        this.$textLayer.setPadding(padding);
+        this.$cursorLayer.setPadding(padding);
+        this.$markerFront.setPadding(padding);
+        this.$markerBack.setPadding(padding);
         this.$loop.schedule(this.CHANGE_FULL);
         this.$updatePrintMargin();
     };
@@ -577,7 +580,7 @@ var VirtualRenderer = function(container, theme) {
         if (this.$textLayer.showInvisibles)
             charCount += 1;
 
-        return Math.max(this.$size.scrollerWidth - this.$padding * 2, Math.round(charCount * this.characterWidth));
+        return Math.max(this.$size.scrollerWidth, Math.round(charCount * this.characterWidth));
     };
 
     this.updateFrontMarkers = function() {