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

Add support of sync scrolling to edit area

Browse source
This commit is contained in:
Cheng-Han, Wu 2016-05-25 13:25:05 +08:00
parent f3418a619c
commit bf1dc237a9
2 changed files with 81 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
public/js/index.js
View file

@ -743,6 +743,7 @@ function windowResizeInner(callback) {
if (editor.getOption('scrollbarStyle') === 'native') {
clearMap();
syncScrollToView();
syncScrollToEdit();
updateScrollspy();
if (callback && typeof callback === 'function')
callback();
@ -752,6 +753,7 @@ function windowResizeInner(callback) {
setTimeout(function () {
clearMap();
syncScrollToView();
syncScrollToEdit();
editor.setOption('viewportMargin', viewportMargin);
//add or update user cursors
for (var i = 0; i < onlineUsers.length; i++) {
@ -822,7 +824,6 @@ function checkEditorScrollbar() {
// workaround simple scroll bar knob
// will get wrong position when editor height changed
var scrollInfo = editor.getScrollInfo();
if (!preventSyncScroll) preventSyncScroll = true;
editor.scrollTo(null, scrollInfo.top - 1);
editor.scrollTo(null, scrollInfo.top);
}
@ -1027,15 +1028,6 @@ var unlockNavbar = _.debounce(function () {
$('.navbar').removeClass('locked');
}, 200);
function syncScrollToEdit() {
if (!scrollMap || !lineHeightMap)
buildMapInner();
var scrollMapNearest = closestIndex(scrollMap, lastInfo.view.scroll.top);
var lineHeightMapNearest = closestIndex(lineHeightMap, scrollMapNearest);
var height = lineHeightMapNearest * defaultTextHeight;
editor.scrollTo(null, height);
}
function closestIndex(arr, closestTo) {
var closest = Math.max.apply(null, arr); //Get the highest number in arr in case it match nothing.
var index = 0;
@ -2422,11 +2414,9 @@ editor.on('beforeChange', function (cm, change) {
cmClient.editorAdapter.ignoreNextChange = true;
});
editor.on('cut', function () {
preventSyncScroll = 3;
windowResize(); //workaround for scrollMap
});
editor.on('paste', function () {
preventSyncScroll = 3;
windowResize(); //workaround for scrollMap
});
editor.on('changes', function (cm, changes) {
@ -2596,6 +2586,8 @@ function updateViewInner() {
clearMap();
//buildMap();
updateTitleReminder();
syncScrollToView();
syncScrollToEdit();
}
var updateHistoryDebounce = 600;

100
public/js/syncscroll.js
View file

@ -107,28 +107,89 @@ md.use(window.markdownitContainer, 'danger', { render: renderContainer });
var preventSyncScroll = false;
//var editorScrollThrottle = 100;
var editScrollThrottle = 1;
var viewScrollThrottle = 20;
var buildMapThrottle = 100;
var viewScrolling = false;
var viewScrollingDelay = 200;
var viewScrollingTimer = null;
//editor.on('scroll', _.throttle(syncScrollToView, editorScrollThrottle));
var editScrolling = false;
var editScrollingDelay = 100;
var editScrollingTimer = null;
if (editor.getOption('scrollbarStyle') === 'native') {
ui.area.codemirrorScroll.on('scroll', syncScrollToView);
ui.area.codemirrorScroll.on('scroll', _.throttle(syncScrollToView, editScrollThrottle));
} else {
editor.on('scroll', syncScrollToView);
editor.on('scroll', _.throttle(syncScrollToView, editScrollThrottle));
}
ui.area.view.on('scroll', function () {
ui.area.view.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle));
var preventViewScroll = false;
function syncScrollToEdit(e) {
if (currentMode != modeType.both) return;
if (preventViewScroll) {
if (typeof preventViewScroll === 'number') {
preventViewScroll--;
} else {
preventViewScroll = false;
}
return;
}
if (!scrollMap || !lineHeightMap) {
buildMap(true);
return;
}
if (editScrolling) return;
var scrollTop = ui.area.view[0].scrollTop;
var lineIndex = 0;
for (var i = 0, l = scrollMap.length; i < l; i++) {
if (scrollMap[i] > scrollTop) {
break;
} else {
lineIndex = i;
}
}
var lineNo = 0;
var lineDiff = 0;
for (var i = 0, l = lineHeightMap.length; i < l; i++) {
if (lineHeightMap[i] > lineIndex) {
break;
} else {
lineNo = lineHeightMap[i];
lineDiff = lineHeightMap[i + 1] - lineNo;
}
}
var scrollInfo = editor.getScrollInfo();
var textHeight = editor.defaultTextHeight();
var posTo = 0;
var topDiffPercent = 0;
var posToNextDiff = 0;
var preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight;
var preLastLineNo = Math.round(preLastLineHeight / textHeight);
if (scrollInfo.height > scrollInfo.clientHeight && lineNo >= preLastLineNo) {
posTo = preLastLineHeight;
topDiffPercent = (scrollTop - scrollMap[preLastLineNo]) / (viewBottom - scrollMap[preLastLineNo]);
posToNextDiff = Math.ceil(textHeight * topDiffPercent);
} else {
posTo = lineNo * textHeight;
topDiffPercent = (scrollTop - scrollMap[lineNo]) / (scrollMap[lineNo + lineDiff] - scrollMap[lineNo]);
posToNextDiff = Math.ceil(textHeight * lineDiff * topDiffPercent);
}
editor.scrollTo(0, posTo + posToNextDiff);
preventSyncScroll = true;
viewScrolling = true;
clearTimeout(viewScrollingTimer);
viewScrollingTimer = setTimeout(function () {
viewScrolling = false;
}, viewScrollingDelay);
});
//editor.on('scroll', _.debounce(syncScrollToView, syncScrollDelay));
//ui.area.view.on('scroll', _.debounce(syncScrollToEdit, 50));
}
var scrollMap, lineHeightMap, viewTop, viewBottom;
@ -291,19 +352,12 @@ function syncScrollToView(event, _lineNo) {
if (viewScrolling) return;
posTo = scrollMap[lineHeightMap[_lineNo]];
}
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");
/*
if (posDiff > scrollInfo.clientHeight / 5) {
var duration = posDiff / 50;
ui.area.view.stop(true, true).animate({
scrollTop: posTo
}, duration >= 100 ? duration : 100, "linear");
} else {
ui.area.view.stop(true, true).scrollTop(posTo);
}
*/
ui.area.view.stop(true, true).scrollTop(posTo);
preventViewScroll = true;
editScrolling = true;
clearTimeout(editScrollingTimer);
editScrollingTimer = setTimeout(function () {
editScrolling = false;
}, editScrollingDelay);
}