Files
Codiad/components/collaborative/init.js
JakeGrice 2fbd0c815b Fix for codiad issue #450 / collab improvements
I found the only mechanism in place that pushes your client-side changes to the server-side copy is the 500ms synchronize interval, which stops when the collaboration logic stops, and that stops after the initial sync unless there is another user online. So I believe a piece is missing and I added a throttled onChange event that will also push changes to the server, making it more responsive. Another addition was firing the initial $synchronizeText right away instead of waiting for the first 500ms interval.

This still needs to be tested, I'm continuing to test it. It heavily improves the jumbled text issue for a single user. For collaborative, it is actually extremely responsive! But be warned! If you log in with multiple instances on the SAME user to test collab, it doesn't seem to work and it actually gets out of sync. But that's not really intended use anyways so you shouldn't be doing that :)
2013-09-06 23:06:31 -04:00

640 lines
26 KiB
JavaScript

/*
* Copyright (c) Codiad (codiad.com) & Florent Galland & Luc Verdier,
* distributed as-is and without warranty under the MIT License. See
* [root]/license.txt for more. This information must remain intact.
*/
(function (global, $) {
/* FIXME Dynamically load diff match patch lib. Is there any better way? */
$.getScript('lib/diff_match_patch.js');
var codiad = global.codiad;
$(function () {
codiad.collaborative.init();
});
//////////////////////////////////////////////////////////////////
//
// Collaborative Component for Codiad
// ---------------------------------
// Displays in real time the selection position and
// the changes when concurrently editing files.
//
//////////////////////////////////////////////////////////////////
codiad.collaborative = {
controller: 'components/collaborative/controller.php',
/* The filename of the file to wich we are currently registered as a
* collaborator. Might be null if we are not collaborating to any file. */
currentFilename: null,
/* Store the text shadows for every edited files.
* {'filename': shadowString, ... } */
shadows: {},
/* Store the currently displayed usernames and their corresponding
* current selection.
* [username: {start: {row: 12, column: 14}, end: {row: 14, column: 19}}, ... ] */
displayedSelections: [],
/* Time interval in milisecond to send an heartbeat to the server. */
heartbeatInterval: 5000,
/* Status of the collaboration logic. */
enableCollaboration: false,
init: function () {
var _this = this;
/* Make sure to start clean by unregistering from any file first. */
this.unregisterAsCollaboratorFromAllFiles();
this.removeSelectionAndChangesForAllFiles();
/* TODO For debug only, remove this for production. */
//this.removeServerTextForAllFiles();
this.$onSelectionChange = this.onSelectionChange.bind(this);
this.$onChange = this.onChange.bind(this);
this.$postSelectionChange = this.postSelectionChange.bind(this);
this.$updateCollaboratorsSelections = this.updateCollaboratorsSelections.bind(this);
this.$displaySelections = this.displaySelections.bind(this);
this.$synchronizeText = this.synchronizeText.bind(this);
this.$postSynchronizeText = this.postSynchronizeText.bind(this);
this.$sendHeartbeat = this.sendHeartbeat.bind(this);
/* Subscribe to know when a file is being closed. */
amplify.subscribe('active.onClose', function (path) {
if (_this.currentFilename === path) {
_this.unregisterAsCollaboratorOfCurrentFile();
_this.removeAllSelections();
}
});
/* Subscribe to know when a file become active. */
amplify.subscribe('active.onFocus', function (path) {
_this.unregisterAsCollaboratorOfCurrentFile();
_this.registerAsCollaboratorOfActiveFile();
/* Create the initial shadow for the current file. */
_this.shadows[_this.currentFilename] = _this._getCurrentFileText();
_this.sendAsShadow(_this.currentFilename, _this.shadows[_this.currentFilename]);
_this.addListeners();
});
/* Start to send an heartbeat to notify the server that we are
* alive. */
setInterval(this.$sendHeartbeat, this.heartbeatInterval);
/* Start the collaboration logic. */
this.setCollaborationStatus(true);
$(".collaborative-selection,.collaborative-selection-tooltip").live({
mouseenter: function () {
var markup = $(this).parent();
_this.showTooltipForMarkup(markup);
},
mouseleave: function () {
var markup = $(this).parent();
_this.showTooltipForMarkup(markup, 500);
}
});
},
/* Start or stop the collaboration logic. */
setCollaborationStatus: function (enableCollaboration) {
/* Some static variables to hold the setInterval reference. */
if (typeof this.setCollaborationStatus.updateSelectionsIntervalRef === 'undefined') {
this.setCollaborationStatus.updateSelectionsIntervalRef = null;
}
if (typeof this.setCollaborationStatus.synchronizeTextIntervalRef === 'undefined') {
this.setCollaborationStatus.synchronizeTextIntervalRef = null;
}
if (enableCollaboration && !this.enableCollaboration) {
console.log('Starting collaboration logic.');
this.enableCollaboration = true;
/* Start to ask periodically for the potential other collaborators
* selection. */
this.setCollaborationStatus.updateSelectionsIntervalRef =
setInterval(this.$updateCollaboratorsSelections, 500);
/* Start to ask periodically for the potential other collaborators
* changes. */
this.setCollaborationStatus.synchronizeTextIntervalRef =
setInterval(this.$synchronizeText, 500);
/* Sync right away for responsiveness - there's often already a
* server copy of the collab file */
this.$synchronizeText();
} else if (!enableCollaboration && this.enableCollaboration) {
console.log('Stopping collaboration logic.');
this.enableCollaboration = false;
clearInterval(this.setCollaborationStatus.updateSelectionsIntervalRef);
clearInterval(this.setCollaborationStatus.synchronizeTextIntervalRef);
this.removeAllSelections();
}
},
removeSelectionAndChangesForAllFiles: function () {
$.post(this.controller,
{ action: 'removeSelectionAndChangesForAllFiles' },
function (data) {
// console.log('complete unregistering from all');
// console.log(data);
codiad.jsend.parse(data);
});
},
removeServerTextForAllFiles: function () {
$.post(this.controller,
{ action: 'removeServerTextForAllFiles' },
function (data) {
// console.log('complete unregistering from all');
// console.log(data);
codiad.jsend.parse(data);
});
},
unregisterAsCollaboratorFromAllFiles: function () {
$.post(this.controller,
{ action: 'unregisterFromAllFiles' },
function (data) {
// console.log('complete unregistering from all');
// console.log(data);
codiad.jsend.parse(data);
});
},
registerAsCollaboratorOfActiveFile: function () {
var filename = codiad.active.getPath();
this.currentFilename = filename;
$.post(this.controller,
{ action: 'registerToFile', filename: filename },
function (data) {
// console.log('complete registering');
// console.log(data);
codiad.jsend.parse(data);
});
},
unregisterAsCollaboratorOfCurrentFile: function () {
// console.log('unregister ' + this.currentFilename);
if (this.currentFilename !== null) {
$.post(this.controller,
{ action: 'unregisterFromFile', filename: this.currentFilename },
function (data) {
// console.log('complete unregistering');
// console.log(data);
codiad.jsend.parse(data);
});
this.currentFilename = null;
}
},
sendHeartbeat: function () {
var _this = this;
$.post(this.controller,
{ action: 'sendHeartbeat' },
function (data) {
/* The data returned by the server contains the number
* of connected collaborators. */
data = codiad.jsend.parse(data);
if (data.collaboratorCount > 1) {
/* Someone else is connected, start the
* collaboration logic. */
_this.setCollaborationStatus(true);
} else {
/* We are the only conected user, stop the
* collaboration logic. */
_this.setCollaborationStatus(false);
}
});
},
/* Add appropriate listeners to the current EditSession. */
addListeners: function () {
this.addListenerToOnSelectionChange();
this.addListenerToOnChange();
},
/* Remove listeners from the current EditSession. */
removeListeners: function () {
this.removeListenerToOnSelectionChange();
this.removeListenerToOnChange();
},
addListenerToOnSelectionChange: function () {
var selection = this._getSelection();
selection.addEventListener('changeCursor', this.$onSelectionChange);
selection.addEventListener('changeSelection', this.$onSelectionChange);
},
removeListenerToOnSelectionChange: function () {
var selection = this._getSelection();
selection.removeEventListener('changeCursor', this.$onSelectionChange);
selection.removeEventListener('changeSelection', this.$onSelectionChange);
},
addListenerToOnChange: function () {
var editor = this._getEditor();
editor.addEventListener('change', this.$onChange);
},
removeListenerToOnChange: function () {
var editor = this._getEditor();
editor.removeEventListener('change', this.$onChange);
},
onChange: function(e) {
this.$synchronizeText();
},
/* Throttling mechanism for postSelectionChange */
onSelectionChange: function (e) {
var minInterval = 250;
var now = new Date().getTime();
if (typeof(this.onSelectionChange.lastSelectionChange) === 'undefined') {
this.onSelectionChange.lastSelectionChange = now;
}
var interval = now - this.onSelectionChange.lastSelectionChange;
this.onSelectionChange.lastSelectionChange = now;
if (interval < minInterval) {
var intervalDifference = minInterval - interval;
clearTimeout(this.onSelectionChange.deferredPost);
this.onSelectionChange.deferredPost = setTimeout(this.$postSelectionChange, intervalDifference);
}
else {
this.$postSelectionChange();
}
},
postSelectionChange: function () {
var post = { action: 'sendSelectionChange',
filename: codiad.active.getPath(),
selection: JSON.stringify(this._getSelection().getRange()) };
$.post(this.controller, post, function (data) {
// console.log('complete selection change');
// console.log(data);
codiad.jsend.parse(data);
});
},
/* Request the server for the collaborators selections for the current
* file. */
updateCollaboratorsSelections: function () {
var _this = this;
if (this.currentFilename !== null) {
$.post(this.controller,
{ action: 'getUsersAndSelectionsForFile', filename: this.currentFilename },
function (data) {
// console.log('complete getUsersAndSelectionsForFile');
// console.log(data);
var selections = codiad.jsend.parse(data);
_this.$displaySelections(selections);
/* The server returned the selections for the
* currently active users. If a user which is no
* more active has a visible selection, remove it. */
if (_this.displayedSelections !== null) {
for (var username in _this.displayedSelections) {
if (_this.displayedSelections.hasOwnProperty(username)) {
if (selections === null || !(username in selections)) {
_this.removeSelection(username);
}
}
}
}
_this.displayedSelections = selections;
});
}
},
/* Displays a selection in the current file for the given user.
* The expected selection object is compatible with what is returned
* from the getUsersAndSelectionsForFile action on the server
* controller.
* Selection object example:
* {username: {start: {row: 12, column: 14}, end: {row: 14, column: 19}}} */
displaySelections: function (selections) {
// console.log('displaySelection');
for (var username in selections) {
if (selections.hasOwnProperty(username)) {
var markup = $('#selection-' + username);
if (markup.length === 0) {
/* The markup for the selection of this user does not
* exist yet. Append it to the dom. */
markup = $(this.getSelectionMarkupForUser(username));
$('body').append(markup);
}
var screenCoordinates = this._getEditor().renderer
.textToScreenCoordinates(selections[username].selection.start.row,
selections[username].selection.start.column);
/* Check if the selection has changed. */
if (markup.css('left').slice(0, -2) !== String(screenCoordinates.pageX) ||
markup.css('top').slice(0, -2) !== String(screenCoordinates.pageY)) {
markup.css({
left: screenCoordinates.pageX,
top: screenCoordinates.pageY
});
markup.children('.collaborative-selection').css('background-color', selections[username].color);
markup.children('.collaborative-selection-tooltip').css('background-color', selections[username].color);
this.showTooltipForMarkup(markup, 2000);
}
}
}
},
/* Show the tooltip of the given markup. If duration is defined,
* the tooltip is automaticaly hidden when the time is elapsed. */
showTooltipForMarkup: function (markup, duration) {
var timeoutRef = markup.attr('hideTooltipTimeoutRef');
if (timeoutRef !== undefined) {
clearTimeout(timeoutRef);
markup.removeAttr('hideTooltipTimeoutRef');
}
markup.children('.collaborative-selection-tooltip').fadeIn('fast');
if (duration !== undefined) {
timeoutRef = setTimeout(this._hideTooltipAndRemoveAttrForBoundMarkup.bind(markup), duration);
markup.attr('hideTooltipTimeoutRef', timeoutRef);
}
},
/* This function must be bound with the markup which contains
* the tooltip to hide. */
_hideTooltipAndRemoveAttrForBoundMarkup: function () {
this.children('.collaborative-selection-tooltip').fadeOut('fast');
this.removeAttr('hideTooltipTimeoutRef');
},
/* Remove the selection corresponding to the given username. */
removeSelection: function (username) {
console.log('remove ' + username);
$('#selection-' + username).remove();
delete this.displayedSelections[username];
},
/* Remove all the visible selections. */
removeAllSelections: function () {
if (this.displayedSelections !== null) {
for (var username in this.displayedSelections) {
if (this.displayedSelections.hasOwnProperty(username)) {
this.removeSelection(username);
}
}
}
},
/* Throttling mechanism for postSynchronizeText */
synchronizeText: function () {
var _this = this;
var now = new Date().getTime();
var minInterval = 350;
if (typeof(this.synchronizeText.lastRun) === 'undefined') {
this.synchronizeText.lastRun = now;
}
var interval = now - this.synchronizeText.lastRun;
var _this = this;
var successCallback = function() {
_this.synchronizeText.lastRun = now;
_this.$postSynchronizeText();
};
clearTimeout(this.synchronizeText.deferredPost);
if (interval < minInterval) {
var intervalDifference = minInterval - interval;
this.synchronizeText.deferredPost = setTimeout(successCallback, intervalDifference);
}
else {
successCallback();
}
},
/* Make a diff of the current file text with the shadow and send it to
* the server. */
postSynchronizeText: function () {
var _this = this;
var currentFilename = this.currentFilename;
/* Do not send any request if no file is focused. */
if (currentFilename === null) {
return;
}
/* Save the current text state, because it can be modified by the
* user on the UI thread. */
var currentText = this._getCurrentFileText();
/* Make a diff between the current text and the previously saved
* shadow. */
codiad.workerManager.addTask({
taskType: 'diff',
id: 'collaborative_' + currentFilename,
original: _this.shadows[currentFilename],
changed: currentText
}, function (success, patch) {
if (success) {
/* Send our edits to the server, and get in response a
* patch of the edits in the server text. */
// console.log(patch);
_this.shadows[currentFilename] = currentText;
var post = { action: 'synchronizeText',
filename: currentFilename,
patch: patch };
// console.log(post);
$.post(this.controller, post, function (data) {
// console.log('complete synchronizeText');
// console.log(data);
var patchFromServer = codiad.jsend.parse(data);
if (patchFromServer === 'error') { return; }
// console.log(patchFromServer);
/* Apply the patch from the server text to the shadow
* and the current text. */
var dmp = new diff_match_patch();
var patchedShadow = dmp.patch_apply(dmp.patch_fromText(patchFromServer), _this.shadows[currentFilename]);
// console.log(patchedShadow);
_this.shadows[currentFilename] = patchedShadow[0];
/* Update the current text. */
currentText = _this._getCurrentFileText();
var patchedCurrentText = dmp.patch_apply(dmp.patch_fromText(patchFromServer), currentText)[0];
var diff = dmp.diff_main(currentText, patchedCurrentText);
var deltas = _this.diffToAceDeltas(diff, currentText);
_this._getDocument().applyDeltas(deltas);
});
} else {
console.log('problem diffing');
console.log(patch);
}
}, this);
},
/* Send the string 'shadow' as server shadow for 'filename'. */
sendAsShadow: function (filename, shadow) {
$.post(this.controller,
{ action: 'sendShadow',
filename: filename,
shadow: shadow },
function (data) {
// console.log('complete sendShadow');
// console.log(data);
codiad.jsend.parse(data);
});
},
/* Helper method that return a Ace editor delta change from a
* diff_match_patch diff object and the original text that was
* used to compute the diff. */
diffToAceDeltas: function (diff, originalText) {
var dmp = new diff_match_patch();
var deltas = dmp.diff_toDelta(diff).split('\t');
/*
* Code deeply inspired by chaoscollective / Space_Editor
*/
var offset = 0;
var row = 1;
var col = 1;
var aceDeltas = [];
var aceDelta = {};
for (var i = 0; i < deltas.length; ++i) {
var type = deltas[i].charAt(0);
var data = decodeURI(deltas[i].substring(1));
switch (type) {
case "=":
/* The new text is equal to the original text for a
* number of characters. */
var unchangedCharactersCount = parseInt(data, 10);
for (var j = 0; j < unchangedCharactersCount; ++j) {
if (originalText.charAt(offset + j) == "\n") {
++row;
col = 1;
} else {
col++;
}
}
offset += unchangedCharactersCount;
break;
case "+":
/* Some characters were added. */
aceDelta = {
action: "insertText",
range: {
start: {row: (row - 1), column: (col - 1)},
end: {row: (row - 1), column: (col - 1)}
},
text: data
};
aceDeltas.push(aceDelta);
var innerRows = data.split("\n");
var innerRowsCount = innerRows.length - 1;
row += innerRowsCount;
if (innerRowsCount <= 0) {
col += data.length;
} else {
col = innerRows[innerRowsCount].length + 1;
}
break;
case "-":
/* Some characters were subtracted. */
var deletedCharactersCount = parseInt(data, 10);
var removedData = originalText.substring(offset, offset + deletedCharactersCount);
var removedRows = removedData.split("\n");
var removedRowsCount = removedRows.length - 1;
var endRow = row + removedRowsCount;
var endCol = col;
if (removedRowsCount <= 0) {
endCol = col + deletedCharactersCount;
} else {
endCol = removedRows[removedRowsCount].length + 1;
}
aceDelta = {
action: "removeText",
range: {
start: {row: (row - 1), column: (col - 1)},
end: {row: (endRow - 1), column: (endCol - 1)}
},
text: data
};
aceDeltas.push(aceDelta);
offset += deletedCharactersCount;
break;
default:
/* Return an innofensive empty list of Ace deltas. */
console.log("Unhandled case '" + type + "' while building Ace deltas.");
return [];
}
}
return aceDeltas;
},
getSelectionMarkupForUser: function (username) {
return '<div id="selection-' + username + '" class="collaborative-selection-wrapper">' +
'<div class="collaborative-selection"></div>' +
'<div class="collaborative-selection-tooltip">' + username + '</div>' +
'</div>';
},
/* Set of helper methods to manipulate the editor. */
_getEditor: function () {
return codiad.editor.getActive();
},
_getEditSession: function () {
return codiad.editor.getActive().getSession();
},
_getSelection: function () {
return codiad.editor.getActive().getSelection();
},
_getDocument: function () {
return codiad.editor.getActive().getSession().getDocument();
},
_getCurrentFileText: function () {
return codiad.editor.getActive().getSession().getValue();
}
};
})(this, jQuery);