From 9f2e504d67bc5ba9f80449efd449e64344c2473f Mon Sep 17 00:00:00 2001 From: nightwing Date: Sat, 14 Jan 2012 21:04:32 +0400 Subject: [PATCH 1/5] fix horizontal scroll desynchronization on windows --- lib/ace/virtual_renderer.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index a195e372..81aded8a 100644 --- a/lib/ace/virtual_renderer.js +++ b/lib/ace/virtual_renderer.js @@ -421,6 +421,10 @@ var VirtualRenderer = function(container, theme) { ) this.$computeLayerConfig(); + // horizontal scrolling + if (changes & this.CHANGE_H_SCROLL) + this.scroller.scrollLeft = this.scrollLeft + // full if (changes & this.CHANGE_FULL) { this.$textLayer.update(this.layerConfig); @@ -477,11 +481,6 @@ var VirtualRenderer = function(container, theme) { if (changes & this.CHANGE_SIZE) this.$updateScrollBar(); - - if (changes & this.CHANGE_H_SCROLL) { - //this.content.style.left = -this.scrollLeft + "px"; - this.scroller.scrollLeft = this.scrollLeft - } }; this.$computeLayerConfig = function() { @@ -495,9 +494,13 @@ var VirtualRenderer = function(container, theme) { var horizScroll = this.$horizScrollAlwaysVisible || this.$size.scrollerWidth - longestLine < 0; var horizScrollChanged = this.$horizScroll !== horizScroll; this.$horizScroll = horizScroll; - if (horizScrollChanged) + if (horizScrollChanged) { this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden"; - + // when we hide scrollbar scroll event isn't emited + // leaving session with wrong scrollLeft value + if (!horizScroll) + this.session.setScrollLeft(0); + } var maxHeight = this.session.getScreenLength() * this.lineHeight; this.session.setScrollTop(Math.max(0, Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight))); From 9f1d8af9373e8e474db8cdc7f456316287128e25 Mon Sep 17 00:00:00 2001 From: nightwing Date: Sat, 14 Jan 2012 21:09:25 +0400 Subject: [PATCH 2/5] on CHANGE_LINES update gutter only if visible lines changed otherwise it's impossible to click on foldwidget after typing at the start of big document --- lib/ace/virtual_renderer.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index 81aded8a..fbc2ecaa 100644 --- a/lib/ace/virtual_renderer.js +++ b/lib/ace/virtual_renderer.js @@ -459,10 +459,11 @@ var VirtualRenderer = function(container, theme) { this.$gutterLayer.update(this.layerConfig); } else if (changes & this.CHANGE_LINES) { - this.$updateLines(); - this.$updateScrollBar(); - if (this.showGutter) - this.$gutterLayer.update(this.layerConfig); + if (this.$updateLines()) { + this.$updateScrollBar(); + if (this.showGutter) + this.$gutterLayer.update(this.layerConfig); + } } else if (changes & this.CHANGE_GUTTER) { if (this.showGutter) this.$gutterLayer.update(this.layerConfig); @@ -581,6 +582,7 @@ var VirtualRenderer = function(container, theme) { // else update only the changed rows this.$textLayer.updateLines(layerConfig, firstRow, lastRow); + return true; }; this.$getLongestLine = function() { From 5dee6a10c3bd7ebf2360a0963753889197e8fd19 Mon Sep 17 00:00:00 2001 From: nightwing Date: Tue, 24 Jan 2012 12:51:59 +0400 Subject: [PATCH 3/5] keep vertical scroll position if gutter size changes during setSession --- lib/ace/virtual_renderer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js index fbc2ecaa..e0326bca 100644 --- a/lib/ace/virtual_renderer.js +++ b/lib/ace/virtual_renderer.js @@ -427,18 +427,20 @@ var VirtualRenderer = function(container, theme) { // full if (changes & this.CHANGE_FULL) { + // update scrollbar first to not loose scroll position when gutter calls resize + this.$updateScrollBar(); this.$textLayer.update(this.layerConfig); if (this.showGutter) this.$gutterLayer.update(this.layerConfig); this.$markerBack.update(this.layerConfig); this.$markerFront.update(this.layerConfig); this.$cursorLayer.update(this.layerConfig); - this.$updateScrollBar(); return; } // scrolling if (changes & this.CHANGE_SCROLL) { + this.$updateScrollBar(); if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES) this.$textLayer.update(this.layerConfig); else @@ -449,7 +451,6 @@ var VirtualRenderer = function(container, theme) { this.$markerBack.update(this.layerConfig); this.$markerFront.update(this.layerConfig); this.$cursorLayer.update(this.layerConfig); - this.$updateScrollBar(); return; } From 0fb16fdaf06316239def7079238938676df39182 Mon Sep 17 00:00:00 2001 From: nightwing Date: Sat, 14 Jan 2012 19:19:12 +0400 Subject: [PATCH 4/5] small css optimization. (based on output from chrome css profiler) --- lib/ace/css/editor.css | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css index 84d82520..47bd1b42 100644 --- a/lib/ace/css/editor.css +++ b/lib/ace/css/editor.css @@ -22,12 +22,6 @@ cursor: text; } -/* setting pointer-events: auto; on node under the mouse, which changes during scroll, - will break mouse wheel scrolling in Safari */ -.ace_content * { - pointer-events: none; -} - .ace_composition { position: absolute; background: #555; @@ -35,12 +29,6 @@ z-index: 4; } -.ace_gutter .ace_layer { - position: relative; - min-width: 54px; - text-align: right; -} - .ace_gutter { position: absolute; overflow : hidden; @@ -125,6 +113,16 @@ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + /* setting pointer-events: auto; on node under the mouse, which changes + during scroll, will break mouse wheel scrolling in Safari */ + pointer-events: none; +} + +.ace_gutter .ace_layer { + position: relative; + min-width: 40px; + text-align: right; + pointer-events: auto; } .ace_text-layer { @@ -222,7 +220,7 @@ cursor: move; } -.ace_folding-enabled .ace_gutter-cell { +.ace_folding-enabled > .ace_gutter-cell { padding-right: 13px; } From f065505bc35e6be6b062743233ad6ccab5bf162e Mon Sep 17 00:00:00 2001 From: nightwing Date: Sat, 14 Jan 2012 20:57:09 +0400 Subject: [PATCH 5/5] use slightly lighter color for folds in textmate theme --- lib/ace/theme/textmate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ace/theme/textmate.js b/lib/ace/theme/textmate.js index 33c8aa25..5011b636 100644 --- a/lib/ace/theme/textmate.js +++ b/lib/ace/theme/textmate.js @@ -59,7 +59,7 @@ exports.cssText = ".ace-tm .ace_editor {\ }\ \ .ace-tm .ace_fold {\ - background-color: #0000A2;\ + background-color: #6B72E6;\ }\ \ .ace-tm .ace_text-layer {\