sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Unable to preventDefault errors in Chrome (#130)

Browse Source 
* Fixed Unable to preventDefault errors in Chrome

* Cleanup wheel event listener
This commit is contained in:
Timur Khazamov 2020-01-05 01:11:23 +05:00 committed by Christopher Chedeau
parent 34b8883739
commit aa01be2dbe
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/index.tsx
View File

@ -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
@ -1172,7 +1179,7 @@ class App extends React.Component<{}, AppState> {
isResizingElements = true;
} else {
let hitElement = null;
// We need to to hit testing from front (end of the array) to back (beginning of the array)
for (let i = elements.length - 1; i >= 0; --i) {
if (hitTest(elements[i], x, y)) {
@ -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,