diff --git a/css/editor.css b/css/editor.css index 3cd216ea..4aa470f6 100644 --- a/css/editor.css +++ b/css/editor.css @@ -14,6 +14,7 @@ position: absolute; overflow-x: scroll; overflow-y: hidden; + height: 100%; } .editor .sb { @@ -29,11 +30,17 @@ left: 0px; } +.editor .printMargin { + position: absolute; + height: 100%; +} + .layer { z-index: 0; position: absolute; overflow: hidden; white-space: nowrap; + height: 100%; } .text-layer { diff --git a/css/tm.css b/css/tm.css index 1745966c..938c2ee4 100644 --- a/css/tm.css +++ b/css/tm.css @@ -15,6 +15,11 @@ font-size: 12px; } +.editor .printMargin { + width: 1px; + background: rgb(191, 191, 191); +} + .gutter-layer { right: 10px; text-align: right; diff --git a/src/ace/Editor.js b/src/ace/Editor.js index 5a5486e4..1e0244d5 100644 --- a/src/ace/Editor.js +++ b/src/ace/Editor.js @@ -360,18 +360,32 @@ ace.Editor = function(renderer, doc) { return this.$highlightActiveLine; }; - this.$showInvisibles = true; this.setShowInvisibles = function(showInvisibles) { - showInvisibles = !!showInvisibles; - if (this.$showInvisibles == showInvisibles) return; + if (this.getShowInvisibles() == showInvisibles) + return; - this.$showInvisibles = showInvisibles; this.renderer.setShowInvisibles(showInvisibles); this.renderer.draw(); }; this.getShowInvisibles = function() { - return this.showInvisibles; + return this.renderer.getShowInvisibles(); + }; + + this.setShowPrintMargin = function(showPrintMargin) { + this.renderer.setShowPrintMargin(showPrintMargin); + }; + + this.getShowPrintMargin = function() { + return this.renderer.getShowPrintMargin(); + }; + + this.setPrintMarginColumn = function(showPrintMargin) { + this.renderer.setPrintMarginColumn(showPrintMargin); + }; + + this.getPrintMarginColumn = function() { + return this.renderer.getPrintMarginColumn(); }; this.$readOnly = false; diff --git a/src/ace/VirtualRenderer.js b/src/ace/VirtualRenderer.js index 3472d1a8..e8552a53 100644 --- a/src/ace/VirtualRenderer.js +++ b/src/ace/VirtualRenderer.js @@ -13,7 +13,7 @@ ace.VirtualRenderer = function(container) { this.container.appendChild(this.gutter); this.content = document.createElement("div"); - this.scroller.appendChild(this.content) + this.scroller.appendChild(this.content); this.gutterLayer = new ace.layer.Gutter(this.gutter); this.markerLayer = new ace.layer.Marker(this.content); @@ -38,6 +38,7 @@ ace.VirtualRenderer = function(container) { column : 0 }; + this.$updatePrintMargin(); this.onResize(); }; @@ -60,6 +61,45 @@ ace.VirtualRenderer = function(container) { this.textLayer.setShowInvisibles(showInvisibles); }; + this.getShowInvisibles = function() { + return this.showInvisibles; + }; + + this.$showPrintMargin = true; + this.setShowPrintMargin = function(showPrintMargin) { + this.$showPrintMargin = showPrintMargin; + this.$updatePrintMargin(); + }; + + this.getShowPrintMargin = function() { + return this.$showPrintMargin; + }; + + this.$printMarginColumn = 80; + this.setPrintMarginColumn = function(showPrintMargin) { + this.$printMarginColumn = showPrintMargin; + this.$updatePrintMargin(); + }; + + this.getPrintMarginColumn = function() { + return this.$printMarginColumn; + }; + + this.$updatePrintMargin = function() { + if (!this.$showPrintMargin && !this.$printMarginEl) + return; + + if (!this.$printMarginEl) { + this.$printMarginEl = document.createElement("div"); + this.$printMarginEl.className = "printMargin"; + this.content.insertBefore(this.$printMarginEl, this.gutter.element); + } + + var style = this.$printMarginEl.style; + style.left = (this.characterWidth * this.$printMarginColumn) + "px"; + style.visibility = this.$showPrintMargin ? "visible" : "hidden"; + }; + this.getContainerElement = function() { return this.container; }; @@ -79,7 +119,6 @@ ace.VirtualRenderer = function(container) { this.onResize = function() { var height = ace.getInnerHeight(this.container); - this.gutter.style.height = height + "px"; this.scroller.style.height = height + "px"; this.scrollBar.setHeight(height); @@ -129,7 +168,7 @@ ace.VirtualRenderer = function(container) { var charCount = this.doc.getWidth(); if (this.$showInvisibles) charCount += 1; - + var longestLine = Math.max(this.scroller.clientWidth, Math.round(charCount * this.characterWidth)); var lineCount = Math.ceil(minHeight / this.lineHeight); @@ -143,21 +182,19 @@ ace.VirtualRenderer = function(container) { lineHeight : this.lineHeight, characterWidth : this.characterWidth }; - + this.content.style.marginTop = (-offset) + "px"; for ( var i = 0; i < this.layers.length; i++) { var layer = this.layers[i]; var style = layer.element.style; - style.height = minHeight + "px"; style.width = longestLine + "px"; layer.update(layerConfig); }; this.gutterLayer.element.style.marginTop = (-offset) + "px"; - this.gutterLayer.element.style.height = minHeight + "px"; this.gutterLayer.update(layerConfig); this.$updateScrollBar();