diff --git a/src/index.tsx b/src/index.tsx
index a2b8c806..ee1e26a9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -293,6 +293,33 @@ function getScrollbars(
};
}
+function isOverScrollBars(
+ x: number,
+ y: number,
+ canvasWidth: number,
+ canvasHeight: number,
+ scrollX: number,
+ scrollY: number
+) {
+ const scrollBars = getScrollbars(canvasWidth, canvasHeight, scrollX, scrollY);
+
+ const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [
+ scrollBars.horizontal,
+ scrollBars.vertical
+ ].map(
+ scrollBar =>
+ scrollBar.x <= x &&
+ x <= scrollBar.x + scrollBar.width &&
+ scrollBar.y <= y &&
+ y <= scrollBar.y + scrollBar.height
+ );
+
+ return {
+ isOverHorizontalScrollBar,
+ isOverVerticalScrollBar
+ };
+}
+
function handlerRectangles(element: ExcalidrawElement, sceneState: SceneState) {
const elementX1 = element.x;
const elementX2 = element.x + element.width;
@@ -1259,6 +1286,19 @@ class App extends React.Component<{}, AppState> {
document.activeElement.blur();
}
+ // Handle scrollbars dragging
+ const {
+ isOverHorizontalScrollBar,
+ isOverVerticalScrollBar
+ } = isOverScrollBars(
+ e.clientX - CANVAS_WINDOW_OFFSET_LEFT,
+ e.clientY - CANVAS_WINDOW_OFFSET_TOP,
+ canvasWidth,
+ canvasHeight,
+ this.state.scrollX,
+ this.state.scrollY
+ );
+
const x =
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
@@ -1371,12 +1411,33 @@ class App extends React.Component<{}, AppState> {
let lastX = x;
let lastY = y;
+ if (isOverHorizontalScrollBar || isOverVerticalScrollBar) {
+ lastX = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
+ lastY = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
+ }
+
const onMouseMove = (e: MouseEvent) => {
const target = e.target;
if (!(target instanceof HTMLElement)) {
return;
}
+ if (isOverHorizontalScrollBar) {
+ const x = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
+ const dx = x - lastX;
+ this.setState(state => ({ scrollX: state.scrollX - dx }));
+ lastX = x;
+ return;
+ }
+
+ if (isOverVerticalScrollBar) {
+ const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
+ const dy = y - lastY;
+ this.setState(state => ({ scrollY: state.scrollY - dy }));
+ lastY = y;
+ return;
+ }
+
if (isResizingElements && this.state.resizingElement) {
const el = this.state.resizingElement;
const selectedElements = elements.filter(el => el.isSelected);
@@ -1563,4 +1624,4 @@ const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const rc = rough.canvas(canvas);
const context = canvas.getContext("2d")!;
-ReactDOM.render(, rootElement);
\ No newline at end of file
+ReactDOM.render(, rootElement);