Skip to content

Commit

Permalink
update collab plugin to work with new ace
Browse files Browse the repository at this point in the history
  • Loading branch information
@nightwing
nightwing committed Apr 17, 2018
1 parent 4835f14 commit 7402371
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 150 deletions.
168 changes: 39 additions & 129 deletions plugins/c9.ide.collab/author_layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 (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;
}
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;
}

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", "");
}
}

Expand Down
14 changes: 14 additions & 0 deletions plugins/c9.ide.collab/collab.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
27 changes: 8 additions & 19 deletions plugins/c9.ide.collab/cursor_layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
"<div class='ace_selection' style='",
"left:", left, "px;",
"top:", top + 2, "px;",
"height:", config.lineHeight - 2, "px;",
"width:", 2, "px;",
"z-index: 10;",
(cursorStyle || ""),
"'></div>",
"<div class='ace_selection' style='",
"left:", left - 2, "px;",
"top:", top, "px;",
"height:", 5, "px;",
"width:", 6, "px;",
"z-index: 10;",
(cursorStyle || ""),
"'></div>"

markerLayer.elt(
"ace_collab_cursor",
"height:" + config.lineHeight + "px;" +
"width:" + 2 + "px;" +
"top:" + top + "px;" +
"left:" + left + "px;" +
"background-color:" + util.formatColor(bgColor) + ";"
);
}

Expand Down
8 changes: 6 additions & 2 deletions plugins/node_modules/ace/lib/ace/layer/gutter.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 7402371

Please sign in to comment.