depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Improve authorship markers update performance and use CodeMirror built-in operation queue to avoid making DOM busy

Browse source
This commit is contained in:
Wu Cheng-Han 2016-09-18 16:22:50 +08:00
parent 4cc00c6c40
commit 4421c8ede7
1 changed files with 39 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
public/js/index.js
View file

@ -2138,6 +2138,8 @@ socket.on('version', function (data) {
var authors = []; var authors = [];
var authorship = []; var authorship = [];
var authorshipMarks = {}; var authorshipMarks = {};
var authorMarks = {}; // temp variable
var addTextMarkers = []; // temp variable
function updateLastInfo(data) { function updateLastInfo(data) {
//console.log(data); //console.log(data);
if (data.hasOwnProperty('createtime') && createtime !== data.createtime) { if (data.hasOwnProperty('createtime') && createtime !== data.createtime) {
@ -2161,7 +2163,9 @@ function updateLastInfo(data) {
updateAuthorship(); updateAuthorship();
} }
} }
var updateAuthorship = _.throttle(updateAuthorshipInner, 50); var updateAuthorship = _.throttle(function () {
editor.operation(updateAuthorshipInner);
}, 50);
function initMark() { function initMark() {
return { return {
gutter: { gutter: {
@ -2200,7 +2204,7 @@ var addStyleRule = (function () {
function updateAuthorshipInner() { function updateAuthorshipInner() {
// ignore when ot not synced yet // ignore when ot not synced yet
if (Object.keys(cmClient.state).length > 0) return; if (Object.keys(cmClient.state).length > 0) return;
var authorMarks = {}; authorMarks = {};
for (var i = 0; i < authorship.length; i++) { for (var i = 0; i < authorship.length; i++) {
var atom = authorship[i]; var atom = authorship[i];
var author = authors[atom[0]]; var author = authors[atom[0]];
@ -2269,38 +2273,8 @@ function updateAuthorshipInner() {
} }
} }
} }
var addTextMarkers = []; addTextMarkers = [];
editor.eachLine(function (line) { editor.eachLine(iterateLine);
var lineNumber = editor.getLineNumber(line);
var currMark = authorMarks[lineNumber];
var author = currMark ? authors[currMark.gutter.userid] : null;
if (currMark && author) {
var className = 'authorship-gutter-' + author.color.substr(1);
var gutters = editor.getLineHandle(lineNumber).gutterMarkers;
if (!gutters || !gutters['authorship-gutters'] ||
!gutters['authorship-gutters'].className ||
!gutters['authorship-gutters'].className.indexOf(className) < 0) {
var styleString = gutterStylePrefix + author.color + gutterStylePostfix;
var rule = "." + className + "{" + styleString + "}";
addStyleRule(rule);
var gutter = $('<div>', {
class: 'authorship-gutter ' + className,
title: author.name
});
editor.setGutterMarker(lineNumber, "authorship-gutters", gutter[0]);
}
} else {
editor.setGutterMarker(lineNumber, "authorship-gutters", null);
}
if (currMark && currMark.textmarkers.length > 0) {
for (var i = 0; i < currMark.textmarkers.length; i++) {
var textMarker = currMark.textmarkers[i];
if (textMarker.userid != currMark.gutter.userid) {
addTextMarkers.push(textMarker);
}
}
}
});
var allTextMarks = editor.getAllMarks(); var allTextMarks = editor.getAllMarks();
for (var i = 0; i < allTextMarks.length; i++) { for (var i = 0; i < allTextMarks.length; i++) {
var _textMarker = allTextMarks[i]; var _textMarker = allTextMarks[i];
@ -2342,6 +2316,37 @@ function updateAuthorshipInner() {
} }
authorshipMarks = authorMarks; authorshipMarks = authorMarks;
} }
function iterateLine(line) {
var lineNumber = line.lineNo();
var currMark = authorMarks[lineNumber];
var author = currMark ? authors[currMark.gutter.userid] : null;
if (currMark && author) {
var className = 'authorship-gutter-' + author.color.substr(1);
var gutters = line.gutterMarkers;
if (!gutters || !gutters['authorship-gutters'] ||
!gutters['authorship-gutters'].className ||
!gutters['authorship-gutters'].className.indexOf(className) < 0) {
var styleString = gutterStylePrefix + author.color + gutterStylePostfix;
var rule = "." + className + "{" + styleString + "}";
addStyleRule(rule);
var gutter = $('<div>', {
class: 'authorship-gutter ' + className,
title: author.name
});
editor.setGutterMarker(line, "authorship-gutters", gutter[0]);
}
} else {
editor.setGutterMarker(line, "authorship-gutters", null);
}
if (currMark && currMark.textmarkers.length > 0) {
for (var i = 0; i < currMark.textmarkers.length; i++) {
var textMarker = currMark.textmarkers[i];
if (textMarker.userid != currMark.gutter.userid) {
addTextMarkers.push(textMarker);
}
}
}
}
editor.on('update', function () { editor.on('update', function () {
$('.authorship-gutter:not([data-original-title])').tooltip({ $('.authorship-gutter:not([data-original-title])').tooltip({
container: '.CodeMirror-lines', container: '.CodeMirror-lines',