From 74023713c7bd47f71ac162bb675a753fa3099b46 Mon Sep 17 00:00:00 2001 From: nightwing Date: Tue, 10 Apr 2018 16:54:56 +0400 Subject: [PATCH] update collab plugin to work with new ace --- plugins/c9.ide.collab/author_layer.js | 168 ++++-------------- plugins/c9.ide.collab/collab.css | 14 ++ plugins/c9.ide.collab/cursor_layer.js | 27 +-- .../node_modules/ace/lib/ace/layer/gutter.js | 8 +- 4 files changed, 67 insertions(+), 150 deletions(-) diff --git a/plugins/c9.ide.collab/author_layer.js b/plugins/c9.ide.collab/author_layer.js index e9489ad3..ea35e48b 100644 --- a/plugins/c9.ide.collab/author_layer.js +++ b/plugins/c9.ide.collab/author_layer.js @@ -48,9 +48,16 @@ define(function(require, module, exports) { return; session._emit("changeBackMarker"); - var gutter = ace.renderer.$gutterLayer; - gutter.update = updateGutter; - gutter.update(ace.renderer.layerConfig); + var renderer = ace.renderer; + renderer.$gutterLayer.$padding = null; + renderer.$loop.schedule(renderer.CHANGE_GUTTER); + if (showAuthorInfo) { + renderer.$gutterLayer.on("afterRender", decorateGutter); + } + else { + renderer.$gutterLayer.off("afterRender", decorateGutter); + clearGutterDecorations(renderer); + } } function drawAuthInfos(html, markerLayer, session, config) { @@ -105,142 +112,45 @@ define(function(require, module, exports) { } } - function updateGutter(config) { - var session = this.session; - var firstRow = config.firstRow; - var lastRow = Math.min(config.lastRow + config.gutterOffset, // needed to compensate for hor scollbar - session.getLength() - 1); - var fold = session.getNextFoldLine(firstRow); - var foldStart = fold ? fold.start.row : Infinity; - var foldWidgets = this.$showFoldWidgets && session.foldWidgets; - var breakpoints = session.$breakpoints; - var decorations = session.$decorations; - var firstLineNumber = session.$firstLineNumber; - var lastLineNumber = 0; - - var gutterRenderer = session.gutterRenderer || this.$renderer; + function decorateGutter(e, gutter) { + var session = gutter.session; var editorDoc = session.doc; var doc = session.collabDoc; - var range = new Range(firstRow, 0, lastRow, editorDoc.getLine(lastRow).length); var isCollabGutter = doc && showAuthorInfo && util.isRealCollab(workspace); + + var config = gutter.config; + var range = new Range(config.firstRow, 0, config.lastRow, Number.MAX_VALUE); var authorKeysCache = isCollabGutter && createAuthorKeyCache(editorDoc, doc.authAttribs, range).authorKeys; - var colorPool = workspace.colorPool; var reversedAuthorPool = workspace.reversedAuthorPool; - var cell = null; - var index = -1; - var row = firstRow; - while (true) { - if (row > foldStart) { - row = fold.end.row + 1; - fold = session.getNextFoldLine(row, fold); - foldStart = fold ? fold.start.row : Infinity; + if (!isCollabGutter) + return clearGutterDecorations(); + var cells = gutter.$lines.cells; + for (var i = 0; i < cells.length; i++) { + var cell = cells[i]; + var authorKey = authorKeysCache[cell.row]; + var authorColor = "transparent"; + var fullname = null; + if (authorKey) { + var uid = reversedAuthorPool[authorKey]; + authorColor = util.formatColor(colorPool[uid]); + var user = workspace.users[uid]; + fullname = user && user.fullname; } - if (row > lastRow) { - while (this.$cells.length > index + 1) { - cell = this.$cells.pop(); - this.element.removeChild(cell.element); - } - break; - } - - cell = this.$cells[++index]; - if (!cell) { - cell = { element: null, textNode: null, foldWidget: null }; - cell.element = dom.createElement("div"); - cell.textNode = document.createTextNode(''); - cell.element.appendChild(cell.textNode); - this.element.appendChild(cell.element); - this.$cells[index] = cell; - } - - var className = "ace_gutter-cell "; - if (breakpoints[row]) - className += breakpoints[row]; - if (decorations[row]) - className += decorations[row]; - if (this.$annotations[row]) - className += this.$annotations[row].className; - if (cell.element.className != className) - cell.element.className = className; - - var height = session.getRowLength(row) * config.lineHeight + "px"; - if (height != cell.element.style.height) - cell.element.style.height = height; - - if (isCollabGutter) { - var authorKey = authorKeysCache[row]; - var authorColor = "transparent"; - var fullname = null; - if (authorKey) { - var uid = reversedAuthorPool[authorKey]; - authorColor = util.formatColor(colorPool[uid]); - var user = workspace.users[uid]; - fullname = user && user.fullname; - } - cell.element.style.borderLeft = "solid 5px " + authorColor; - cell.element.setAttribute("uid", fullname ? uid : ""); - } else { - cell.element.style.borderLeft = ""; - cell.element.setAttribute("uid", ""); - } - - if (foldWidgets) { - var c = foldWidgets[row]; - // check if cached value is invalidated and we need to recompute - if (c == null) - c = foldWidgets[row] = session.getFoldWidget(row); - } - - if (c) { - if (!cell.foldWidget) { - cell.foldWidget = dom.createElement("span"); - cell.element.appendChild(cell.foldWidget); - } - var className = "ace_fold-widget ace_" + c; - if (c == "start" && row == foldStart && row < fold.end.row) - className += " ace_closed"; - else - className += " ace_open"; - if (cell.foldWidget.className != className) - cell.foldWidget.className = className; - - var height = config.lineHeight + "px"; - if (cell.foldWidget.style.height != height) - cell.foldWidget.style.height = height; - } else { - if (cell.foldWidget) { - cell.element.removeChild(cell.foldWidget); - cell.foldWidget = null; - } - } - - var text = lastLineNumber = gutterRenderer - ? gutterRenderer.getText(session, row) - : row + firstLineNumber; - if (text != cell.textNode.data) - cell.textNode.data = text; - - row++; + cell.element.style.borderLeft = "solid 5px " + authorColor; + cell.element.setAttribute("uid", fullname ? uid : ""); } - - this.element.style.height = config.minHeight + "px"; - - if (this.$fixedWidth || session.$useWrapMode) - lastLineNumber = session.getLength() + firstLineNumber; - - var gutterWidth = gutterRenderer - ? gutterRenderer.getWidth(session, lastLineNumber, config) - : lastLineNumber.toString().length * config.characterWidth; - - var padding = this.$padding || this.$computePadding(); - gutterWidth += padding.left + padding.right + (isCollabGutter ? 5 : 0); - if (gutterWidth !== this.gutterWidth && !isNaN(gutterWidth)) { - this.gutterWidth = gutterWidth; - this.element.style.width = Math.ceil(this.gutterWidth) + "px"; - this._emit("changeGutterWidth", gutterWidth); + } + + function clearGutterDecorations(renderer) { + renderer.$gutterLayer.$lines.cellCache.length = 0; + var cells = renderer.$gutterLayer.$lines.cells; + for (var i = 0; i < cells.length; i++) { + var cell = cells[i]; + cell.element.style.borderLeft = ""; + cell.element.setAttribute("uid", ""); } } diff --git a/plugins/c9.ide.collab/collab.css b/plugins/c9.ide.collab/collab.css index ade5c881..37dccb27 100644 --- a/plugins/c9.ide.collab/collab.css +++ b/plugins/c9.ide.collab/collab.css @@ -85,3 +85,17 @@ color: rgb(217, 255, 15); padding: 1px 2px 1px 2px; } + +.ace_collab_cursor { + position: absolute; + z-index: 11; +} + +.ace_collab_cursor:before { + content: ""; + width: 6px; + height: 5px; + display: block; + background: inherit; + margin-left: -2px; +} \ No newline at end of file diff --git a/plugins/c9.ide.collab/cursor_layer.js b/plugins/c9.ide.collab/cursor_layer.js index 984f1f78..20cd7e45 100644 --- a/plugins/c9.ide.collab/cursor_layer.js +++ b/plugins/c9.ide.collab/cursor_layer.js @@ -40,27 +40,16 @@ define(function(require, module, exports) { } function drawCursor(pos, html, markerLayer, session, config, bgColor) { - var cursorStyle = "background-color:" + util.formatColor(bgColor) + ";"; - var top = markerLayer.$getTop(pos.row, config); var left = Math.round(markerLayer.$padding + pos.column * config.characterWidth); - html.push( - "
", - "
" + + markerLayer.elt( + "ace_collab_cursor", + "height:" + config.lineHeight + "px;" + + "width:" + 2 + "px;" + + "top:" + top + "px;" + + "left:" + left + "px;" + + "background-color:" + util.formatColor(bgColor) + ";" ); } diff --git a/plugins/node_modules/ace/lib/ace/layer/gutter.js b/plugins/node_modules/ace/lib/ace/layer/gutter.js index 4e75ee66..e4ac8376 100644 --- a/plugins/node_modules/ace/lib/ace/layer/gutter.js +++ b/plugins/node_modules/ace/lib/ace/layer/gutter.js @@ -163,6 +163,7 @@ var Gutter = function(parentEl) { row++; } + this._signal("afterRender"); this.$updateGutterWidth(config); }; @@ -270,6 +271,7 @@ var Gutter = function(parentEl) { this.updateLineHighlight(); + this._signal("afterRender"); this.$updateGutterWidth(config); }; @@ -416,8 +418,10 @@ var Gutter = function(parentEl) { return {left: 0, right: 0}; var style = dom.computedStyle(this.element.firstChild); this.$padding = {}; - this.$padding.left = parseInt(style.paddingLeft) + 1 || 0; - this.$padding.right = parseInt(style.paddingRight) || 0; + this.$padding.left = (parseInt(style.borderLeftWidth) || 0) + + (parseInt(style.paddingLeft) || 0) + 1; + this.$padding.right = (parseInt(style.borderRightWidth) || 0) + + (parseInt(style.paddingRight) || 0); return this.$padding; };