Fix drag-select on scrollable content.

This commit is contained in:
Lars Jung 2016-08-09 22:28:01 +02:00
parent 0f4fe15195
commit 4d96cb47ad
2 changed files with 18 additions and 7 deletions

View file

@ -2,4 +2,5 @@
overflow: auto; overflow: auto;
flex: 1 1 auto; flex: 1 1 auto;
order: 50; order: 50;
position: relative;
} }

View file

@ -68,11 +68,20 @@ const rectsDoOverlap = (rect1, rect2) => {
return maxLeft <= minRight && maxTop <= minBottom; return maxLeft <= minRight && maxTop <= minBottom;
}; };
const getPointer = ev => {
const content = dom('#content')[0];
const r = elRect(content);
const x = ev.pageX - r.l + content.scrollLeft;
const y = ev.pageY - r.t + content.scrollTop;
return {x, y};
};
const selectionUpdate = ev => { const selectionUpdate = ev => {
const left = mmin(dragStartX, ev.pageX); const {x, y} = getPointer(ev);
const top = mmin(dragStartY, ev.pageY); const left = mmin(dragStartX, x);
const width = mabs(dragStartX - ev.pageX); const top = mmin(dragStartY, y);
const height = mabs(dragStartY - ev.pageY); const width = mabs(dragStartX - x);
const height = mabs(dragStartY - y);
const isCtrlPressed = ev.ctrlKey || ev.metaKey; const isCtrlPressed = ev.ctrlKey || ev.metaKey;
if (!isCtrlPressed && width < 4 && height < 4) { if (!isCtrlPressed && width < 4 && height < 4) {
@ -125,8 +134,9 @@ const selectionStart = ev => {
return; return;
} }
dragStartX = ev.pageX; const {x, y} = getPointer(ev);
dragStartY = ev.pageY; dragStartX = x;
dragStartY = y;
$document $document
.on('mousemove', selectionUpdate) .on('mousemove', selectionUpdate)
@ -180,7 +190,7 @@ const init = () => {
event.sub('view.changed', onViewChanged); event.sub('view.changed', onViewChanged);
if (settings.clickndrag) { if (settings.clickndrag) {
$selectionRect.hide().appTo('body'); $selectionRect.hide().appTo('#content');
dom('#content') dom('#content')
.on('mousedown', selectionStart) .on('mousedown', selectionStart)