mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-04-14 16:40:58 -04:00
Fixed Unable to preventDefault errors in Chrome (#130)
* Fixed Unable to preventDefault errors in Chrome * Cleanup wheel event listener
This commit is contained in:
parent
34b8883739
commit
aa01be2dbe
1 changed files with 24 additions and 8 deletions
|
@ -940,6 +940,8 @@ class App extends React.Component<{}, AppState> {
|
|||
this.forceUpdate();
|
||||
};
|
||||
|
||||
private removeWheelEventListener: (() => void) | undefined;
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
|
@ -1110,13 +1112,18 @@ class App extends React.Component<{}, AppState> {
|
|||
id="canvas"
|
||||
width={window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT}
|
||||
height={window.innerHeight - CANVAS_WINDOW_OFFSET_TOP}
|
||||
onWheel={e => {
|
||||
e.preventDefault();
|
||||
const { deltaX, deltaY } = e;
|
||||
this.setState(state => ({
|
||||
scrollX: state.scrollX - deltaX,
|
||||
scrollY: state.scrollY - deltaY
|
||||
}));
|
||||
ref={canvas => {
|
||||
if (this.removeWheelEventListener) {
|
||||
this.removeWheelEventListener();
|
||||
this.removeWheelEventListener = undefined;
|
||||
}
|
||||
if (canvas) {
|
||||
canvas.addEventListener("wheel", this.handleWheel, {
|
||||
passive: false
|
||||
});
|
||||
this.removeWheelEventListener = () =>
|
||||
canvas.removeEventListener("wheel", this.handleWheel);
|
||||
}
|
||||
}}
|
||||
onMouseDown={e => {
|
||||
// only handle left mouse button
|
||||
|
@ -1394,6 +1401,15 @@ class App extends React.Component<{}, AppState> {
|
|||
);
|
||||
}
|
||||
|
||||
private handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
const { deltaX, deltaY } = e;
|
||||
this.setState(state => ({
|
||||
scrollX: state.scrollX - deltaX,
|
||||
scrollY: state.scrollY - deltaY
|
||||
}));
|
||||
};
|
||||
|
||||
componentDidUpdate() {
|
||||
renderScene(rc, context, {
|
||||
scrollX: this.state.scrollX,
|
||||
|
|
Loading…
Add table
Reference in a new issue