Improve scrollbar-mouse interaction (#667)

* fix scrollbar detection on high devicePixelRatio devices

* don't create a new element on pointerdown over a scrollbar

* Return scrollbars from renderScene and use it in isOverScrollBars

* remove unneeded setState

* show default cursor when hovering or dragging a scrollbar

* disable scrollbars when in multielement mode

Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
lissitz 2020-03-01 21:43:35 +01:00 committed by GitHub
parent 8e0206cc1e
commit e920c078b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 109 additions and 45 deletions

View file

@ -1,6 +1,7 @@
import { ExcalidrawElement } from "../element/types";
import { getCommonBounds } from "../element";
import { FlooredNumber } from "../types";
import { ScrollBars } from "./types";
const SCROLLBAR_MARGIN = 4;
export const SCROLLBAR_WIDTH = 6;
@ -19,7 +20,7 @@ export function getScrollBars(
scrollY: FlooredNumber;
zoom: number;
},
) {
): ScrollBars {
// This is the bounding box of all the elements
const [
elementsMinX,
@ -83,28 +84,7 @@ export function getScrollBars(
};
}
export function isOverScrollBars(
elements: readonly ExcalidrawElement[],
x: number,
y: number,
viewportWidth: number,
viewportHeight: number,
{
scrollX,
scrollY,
zoom,
}: {
scrollX: FlooredNumber;
scrollY: FlooredNumber;
zoom: number;
},
) {
const scrollBars = getScrollBars(elements, viewportWidth, viewportHeight, {
scrollX,
scrollY,
zoom,
});
export function isOverScrollBars(scrollBars: ScrollBars, x: number, y: number) {
const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [
scrollBars.horizontal,
scrollBars.vertical,