|
|
|
@ -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(<App />, rootElement);
|
|
|
|
|
ReactDOM.render(<App />, rootElement);
|
|
|
|
|