mirror of https://github.com/status-im/codimd.git
Update to improve sync scroll to edit performance and fix sync scroll behavior on many situations
This commit is contained in:
Cheng-Han, Wu
parent
954137b760
commit
e9b0ce8e04
|
|
@ -722,8 +722,11 @@ function windowResizeInner(callback) {
|
|||
if (loaded) {
|
||||
if (editor.getOption('scrollbarStyle') === 'native') {
|
||||
clearMap();
|
||||
syncScrollToView();
|
||||
syncScrollToEdit();
|
||||
if (editorHasFocus()) {
|
||||
syncScrollToView();
|
||||
} else {
|
||||
syncScrollToEdit();
|
||||
}
|
||||
updateScrollspy();
|
||||
if (callback && typeof callback === 'function')
|
||||
callback();
|
||||
|
|
@ -732,8 +735,11 @@ function windowResizeInner(callback) {
|
|||
editor.setOption('viewportMargin', Infinity);
|
||||
setTimeout(function () {
|
||||
clearMap();
|
||||
syncScrollToView();
|
||||
syncScrollToEdit();
|
||||
if (editorHasFocus()) {
|
||||
syncScrollToView();
|
||||
} else {
|
||||
syncScrollToEdit();
|
||||
}
|
||||
editor.setOption('viewportMargin', viewportMargin);
|
||||
//add or update user cursors
|
||||
for (var i = 0; i < onlineUsers.length; i++) {
|
||||
|
|
@ -774,6 +780,7 @@ function checkResponsive() {
|
|||
}
|
||||
|
||||
var lastEditorWidth = 0;
|
||||
var previousFocusOnEditor = null;
|
||||
|
||||
function checkEditorStyle() {
|
||||
var desireHeight = statusBar ? (ui.area.edit.height() - statusBar.outerHeight()) : ui.area.edit.height();
|
||||
|
|
@ -806,6 +813,11 @@ function checkEditorStyle() {
|
|||
}
|
||||
if (!ui.area.resize.syncToggle.length) {
|
||||
ui.area.resize.syncToggle = $('<button class="btn btn-lg btn-default ui-sync-toggle" title="Toggle sync scrolling"><i class="fa fa-link fa-fw"></i></button>');
|
||||
ui.area.resize.syncToggle.hover(function () {
|
||||
previousFocusOnEditor = editorHasFocus();
|
||||
}, function () {
|
||||
previousFocusOnEditor = null;
|
||||
});
|
||||
ui.area.resize.syncToggle.click(function () {
|
||||
syncscroll = !syncscroll;
|
||||
checkSyncToggle();
|
||||
|
|
@ -822,6 +834,13 @@ function checkEditorStyle() {
|
|||
|
||||
function checkSyncToggle() {
|
||||
if (syncscroll) {
|
||||
if (previousFocusOnEditor) {
|
||||
preventSyncScrollToView = false;
|
||||
syncScrollToView();
|
||||
} else {
|
||||
preventSyncScrollToEdit = false;
|
||||
syncScrollToEdit();
|
||||
}
|
||||
ui.area.resize.syncToggle.find('i').removeClass('fa-unlink').addClass('fa-link');
|
||||
} else {
|
||||
ui.area.resize.syncToggle.find('i').removeClass('fa-link').addClass('fa-unlink');
|
||||
|
|
@ -1003,10 +1022,15 @@ function changeMode(type) {
|
|||
restoreInfo();
|
||||
|
||||
if (lastMode == modeType.view && currentMode == modeType.both) {
|
||||
preventSyncScrollToView = true;
|
||||
preventSyncScrollToView = 2;
|
||||
syncScrollToEdit();
|
||||
}
|
||||
|
||||
if (lastMode == modeType.edit && currentMode == modeType.both) {
|
||||
preventSyncScrollToEdit = 2;
|
||||
syncScrollToView();
|
||||
}
|
||||
|
||||
if (lastMode != modeType.edit && currentMode == modeType.edit) {
|
||||
editor.refresh();
|
||||
}
|
||||
|
|
@ -2595,8 +2619,11 @@ function updateViewInner() {
|
|||
clearMap();
|
||||
//buildMap();
|
||||
updateTitleReminder();
|
||||
syncScrollToView();
|
||||
syncScrollToEdit();
|
||||
if (editorHasFocus()) {
|
||||
syncScrollToView();
|
||||
} else {
|
||||
syncScrollToEdit();
|
||||
}
|
||||
}
|
||||
|
||||
var updateHistoryDebounce = 600;
|
||||
|
|
|
|||
|
|
@ -110,17 +110,15 @@ var syncscroll = true;
|
|||
var preventSyncScrollToEdit = false;
|
||||
var preventSyncScrollToView = false;
|
||||
|
||||
var editScrollThrottle = 1;
|
||||
var editScrollThrottle = 2;
|
||||
var viewScrollThrottle = 10;
|
||||
var buildMapThrottle = 100;
|
||||
|
||||
var viewScrolling = false;
|
||||
var viewScrollingDelay = 200;
|
||||
var viewScrollingTimer = null;
|
||||
var viewScrollingDebounce = 200;
|
||||
|
||||
var editScrolling = false;
|
||||
var editScrollingDelay = 100;
|
||||
var editScrollingTimer = null;
|
||||
var editScrollingDebounce = 200;
|
||||
|
||||
if (editor.getOption('scrollbarStyle') === 'native') {
|
||||
ui.area.codemirrorScroll.on('scroll', _.throttle(syncScrollToView, editScrollThrottle));
|
||||
|
|
@ -145,7 +143,7 @@ var buildMap = _.throttle(buildMapInner, buildMapThrottle);
|
|||
// Build offsets for each line (lines can be wrapped)
|
||||
// That's a bit dirty to process each line everytime, but ok for demo.
|
||||
// Optimizations are required only for big texts.
|
||||
function buildMapInner(syncBack) {
|
||||
function buildMapInner(callback) {
|
||||
var i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount,
|
||||
acc, _scrollMap;
|
||||
|
||||
|
|
@ -217,12 +215,15 @@ function buildMapInner(syncBack) {
|
|||
scrollMap = _scrollMap;
|
||||
lineHeightMap = _lineHeightMap;
|
||||
|
||||
if (loaded && syncBack) {
|
||||
syncScrollToView();
|
||||
syncScrollToEdit();
|
||||
}
|
||||
if (loaded && callback) callback();
|
||||
}
|
||||
|
||||
// sync view scroll progress to edit
|
||||
var viewScrollingTimeout = _.debounce(viewScrollingTimeoutInner, viewScrollingDebounce);
|
||||
|
||||
function viewScrollingTimeoutInner() {
|
||||
viewScrolling = false;
|
||||
}
|
||||
|
||||
function syncScrollToEdit(e) {
|
||||
if (currentMode != modeType.both || !syncscroll) return;
|
||||
|
|
@ -235,7 +236,7 @@ function syncScrollToEdit(e) {
|
|||
return;
|
||||
}
|
||||
if (!scrollMap || !lineHeightMap) {
|
||||
buildMap(true);
|
||||
buildMap(syncScrollToEdit);
|
||||
return;
|
||||
}
|
||||
if (editScrolling) return;
|
||||
|
|
@ -272,21 +273,30 @@ function syncScrollToEdit(e) {
|
|||
if (scrollInfo.height > scrollInfo.clientHeight && scrollTop >= preLastLinePos) {
|
||||
posTo = preLastLineHeight;
|
||||
topDiffPercent = (scrollTop - preLastLinePos) / (viewBottom - preLastLinePos);
|
||||
posToNextDiff = Math.ceil(textHeight * topDiffPercent);
|
||||
posToNextDiff = textHeight * topDiffPercent;
|
||||
posTo += Math.floor(posToNextDiff);
|
||||
} else {
|
||||
posTo = lineNo * textHeight;
|
||||
topDiffPercent = (scrollTop - scrollMap[lineNo]) / (scrollMap[lineNo + lineDiff] - scrollMap[lineNo]);
|
||||
posToNextDiff = Math.ceil(textHeight * lineDiff * topDiffPercent);
|
||||
posToNextDiff = textHeight * lineDiff * topDiffPercent;
|
||||
posTo += Math.floor(posToNextDiff);
|
||||
}
|
||||
|
||||
editor.scrollTo(0, posTo + posToNextDiff);
|
||||
preventSyncScrollToView = true;
|
||||
var posDiff = Math.abs(scrollInfo.top - posTo);
|
||||
var duration = posDiff / 50;
|
||||
ui.area.codemirrorScroll.stop(true, true).animate({
|
||||
scrollTop: posTo
|
||||
}, duration >= 100 ? duration : 100, "linear");
|
||||
|
||||
viewScrolling = true;
|
||||
clearTimeout(viewScrollingTimer);
|
||||
viewScrollingTimer = setTimeout(function () {
|
||||
viewScrolling = false;
|
||||
}, viewScrollingDelay);
|
||||
viewScrollingTimeout();
|
||||
}
|
||||
|
||||
// sync edit scroll progress to view
|
||||
var editScrollingTimeout = _.debounce(editScrollingTimeoutInner, editScrollingDebounce);
|
||||
|
||||
function editScrollingTimeoutInner() {
|
||||
editScrolling = false;
|
||||
}
|
||||
|
||||
function syncScrollToView(event, _lineNo) {
|
||||
|
|
@ -300,7 +310,7 @@ function syncScrollToView(event, _lineNo) {
|
|||
return;
|
||||
}
|
||||
if (!scrollMap || !lineHeightMap) {
|
||||
buildMap(true);
|
||||
buildMap(syncScrollToView);
|
||||
return;
|
||||
}
|
||||
if (viewScrolling) return;
|
||||
|
|
@ -328,12 +338,12 @@ function syncScrollToView(event, _lineNo) {
|
|||
posTo = scrollMap[lineHeightMap[_lineNo]];
|
||||
}
|
||||
|
||||
ui.area.view.stop(true, true).scrollTop(posTo);
|
||||
preventSyncScrollToEdit = true;
|
||||
var posDiff = Math.abs(ui.area.view.scrollTop() - posTo);
|
||||
var duration = posDiff / 50;
|
||||
ui.area.view.stop(true, true).animate({
|
||||
scrollTop: posTo
|
||||
}, duration >= 100 ? duration : 100, "linear");
|
||||
|
||||
editScrolling = true;
|
||||
clearTimeout(editScrollingTimer);
|
||||
editScrollingTimer = setTimeout(function () {
|
||||
editScrolling = false;
|
||||
}, editScrollingDelay);
|
||||
editScrollingTimeout();
|
||||
}
|
||||
Loading…
Reference in New Issue