diff --git a/src/layer/gutter.js b/src/layer/gutter.js index abc8619ee7e..89017f868aa 100644 --- a/src/layer/gutter.js +++ b/src/layer/gutter.js @@ -15,6 +15,7 @@ class Gutter{ * @param {HTMLElement} parentEl */ constructor(parentEl) { + this.$showCursorMarker = null; this.element = dom.createElement("div"); this.element.className = "ace_layer ace_gutter-layer"; parentEl.appendChild(this.element); @@ -172,6 +173,9 @@ class Gutter{ this._signal("afterRender"); this.$updateGutterWidth(config); + + if (this.$showCursorMarker) + this.$updateCursorMarker(); } /** @@ -214,6 +218,9 @@ class Gutter{ } updateLineHighlight() { + if (this.$showCursorMarker) + this.$updateCursorMarker(); + if (!this.$highlightGutterLine) return; var row = this.session.selection.cursor.row; @@ -242,6 +249,28 @@ class Gutter{ } } + $updateCursorMarker() { + if (!this.session) + return; + var session = this.session; + if (!this.$highlightElement) { + this.$highlightElement = dom.createElement("div"); + this.$highlightElement.className = "ace_gutter-cursor"; + this.element.appendChild(this.$highlightElement); + } + var pos = session.selection.cursor; + var config = this.config; + var lines = this.$lines; + + var screenTop = config.firstRowScreen * config.lineHeight; + var screenPage = Math.floor(screenTop / lines.canvasHeight); + var lineTop = session.documentToScreenRow(pos) * config.lineHeight; + var top = lineTop - (screenPage * lines.canvasHeight); + + dom.setStyle(this.$highlightElement.style, "height", config.lineHeight + "px"); + dom.setStyle(this.$highlightElement.style, "top", top + "px"); + } + /** * @param {LayerConfig} config */ diff --git a/src/theme/cloud_editor-css.js b/src/theme/cloud_editor-css.js index d93e1d9d6c2..a6cc1eb93cc 100644 --- a/src/theme/cloud_editor-css.js +++ b/src/theme/cloud_editor-css.js @@ -46,21 +46,16 @@ module.exports = ` border: 1px solid #697077; } -.ace-cloud_editor .ace_gutter-active-line::before, +.ace-cloud_editor .ace_gutter-cursor, .ace-cloud_editor .ace_marker-layer .ace_active-line { box-sizing: border-box; border-top: 1px solid #9191ac; border-bottom: 1px solid #9191ac; } -.ace-cloud_editor .ace_gutter-active-line::before { - content: ""; +.ace-cloud_editor .ace_gutter-cursor { position: absolute; - height: 100%; width: 100%; - left: 0; - z-index: 1; - pointer-events: none; } .ace-cloud_editor .ace_marker-layer .ace_selected-word { diff --git a/src/theme/cloud_editor.js b/src/theme/cloud_editor.js index 23a5eb5a835..ee8c1beeb09 100644 --- a/src/theme/cloud_editor.js +++ b/src/theme/cloud_editor.js @@ -1,6 +1,8 @@ exports.isDark = false; exports.cssClass = "ace-cloud_editor"; exports.cssText = require("./cloud_editor-css"); +/**@internal */ +exports.$showGutterCursorMarker = true; var dom = require("../lib/dom"); dom.importCssString(exports.cssText, exports.cssClass, false); diff --git a/src/theme/cloud_editor_dark-css.js b/src/theme/cloud_editor_dark-css.js index 9ff17345bfe..3ac9ddd6930 100644 --- a/src/theme/cloud_editor_dark-css.js +++ b/src/theme/cloud_editor_dark-css.js @@ -46,21 +46,16 @@ module.exports = ` border: 1px solid #e8e8e8; } -.ace-cloud_editor_dark .ace_gutter-active-line::before, +.ace-cloud_editor_dark .ace_gutter-cursor, .ace-cloud_editor_dark .ace_marker-layer .ace_active-line { box-sizing: border-box; border-top: 1px solid #75777a; border-bottom: 1px solid #75777a; } -.ace-cloud_editor_dark .ace_gutter-active-line::before { - content: ""; +.ace-cloud_editor_dark .ace_gutter-cursor { position: absolute; - height: 100%; width: 100%; - left: 0; - z-index: 1; - pointer-events: none; } .ace-cloud_editor_dark .ace_marker-layer .ace_selected-word { diff --git a/src/theme/cloud_editor_dark.js b/src/theme/cloud_editor_dark.js index 9aa93b85cd3..ae45daf3b88 100644 --- a/src/theme/cloud_editor_dark.js +++ b/src/theme/cloud_editor_dark.js @@ -1,6 +1,8 @@ exports.isDark = true; exports.cssClass = "ace-cloud_editor_dark"; exports.cssText = require("./cloud_editor_dark-css"); +/**@internal */ +exports.$showGutterCursorMarker = true; var dom = require("../lib/dom"); dom.importCssString(exports.cssText, exports.cssClass, false); diff --git a/src/virtual_renderer.js b/src/virtual_renderer.js index 4184510ae74..2aea1ec6805 100644 --- a/src/virtual_renderer.js +++ b/src/virtual_renderer.js @@ -2013,6 +2013,15 @@ class VirtualRenderer { if (_self.$padding && padding != _self.$padding) _self.setPadding(padding); + if (_self.$gutterLayer) { + var showGutterCursor = module["$showGutterCursorMarker"]; + if (showGutterCursor && !_self.$gutterLayer.$showCursorMarker) { + _self.$gutterLayer.$showCursorMarker = "theme"; + } else if (!showGutterCursor && _self.$gutterLayer.$showCursorMarker == "theme") { + _self.$gutterLayer.$showCursorMarker = null; + } + } + // this is kept only for backwards compatibility _self.$theme = module.cssClass;