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

fix: prevent browser zoom inside Excalidraw (#5426)

Browse Source 
* fix: prevent browser zoom inside Excalidraw

* prevent default only for =/-
This commit is contained in:
Aakansha Doshi 2022-07-08 17:53:40 +05:30 committed by GitHub
parent e3908e6fe3
commit 5deb93a083
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/App.tsx
View File

@ -929,6 +929,7 @@ class App extends React.Component<AppProps, AppState> {
document.removeEventListener(EVENT.COPY, this.onCopy); document.removeEventListener(EVENT.COPY, this.onCopy);
document.removeEventListener(EVENT.PASTE, this.pasteFromClipboard); document.removeEventListener(EVENT.PASTE, this.pasteFromClipboard);
document.removeEventListener(EVENT.CUT, this.onCut); document.removeEventListener(EVENT.CUT, this.onCut);
document.removeEventListener(EVENT.WHEEL, this.onWheel);
this.nearestScrollableContainer?.removeEventListener( this.nearestScrollableContainer?.removeEventListener(
EVENT.SCROLL, EVENT.SCROLL,
this.onScroll, this.onScroll,
@ -977,6 +978,8 @@ class App extends React.Component<AppProps, AppState> {
this.removeEventListeners(); this.removeEventListeners();
document.addEventListener(EVENT.POINTER_UP, this.removePointer); // #3553 document.addEventListener(EVENT.POINTER_UP, this.removePointer); // #3553
document.addEventListener(EVENT.COPY, this.onCopy); document.addEventListener(EVENT.COPY, this.onCopy);
document.addEventListener(EVENT.WHEEL, this.onWheel, { passive: false });
if (this.props.handleKeyboardGlobally) { if (this.props.handleKeyboardGlobally) {
document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false); document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
} }
@ -1710,6 +1713,7 @@ class App extends React.Component<AppProps, AppState> {
private onKeyDown = withBatchedUpdates( private onKeyDown = withBatchedUpdates(
(event: React.KeyboardEvent | KeyboardEvent) => { (event: React.KeyboardEvent | KeyboardEvent) => {
// normalize `event.key` when CapsLock is pressed #2372 // normalize `event.key` when CapsLock is pressed #2372
if ( if (
"Proxy" in window && "Proxy" in window &&
((!event.shiftKey && /^[A-Z]$/.test(event.key)) || ((!event.shiftKey && /^[A-Z]$/.test(event.key)) ||
@ -1733,6 +1737,14 @@ class App extends React.Component<AppProps, AppState> {
}); });
} }
// prevent browser zoom in input fields
if (event[KEYS.CTRL_OR_CMD] && isWritableElement(event.target)) {
if (event.code === CODES.MINUS || event.code === CODES.EQUAL) {
event.preventDefault();
return;
}
}
// bail if // bail if
if ( if (
// inside an input // inside an input
@ -1915,6 +1927,13 @@ class App extends React.Component<AppProps, AppState> {
}, },
); );
private onWheel = withBatchedUpdates((event: MouseEvent) => {
// prevent browser pinch zoom on DOM elements
if (!(event.target instanceof HTMLCanvasElement)) {
event.preventDefault();
}
});
private onKeyUp = withBatchedUpdates((event: KeyboardEvent) => { private onKeyUp = withBatchedUpdates((event: KeyboardEvent) => {
if (event.key === KEYS.SPACE) { if (event.key === KEYS.SPACE) {
if (this.state.viewModeEnabled) { if (this.state.viewModeEnabled) {
@ -5726,7 +5745,6 @@ class App extends React.Component<AppProps, AppState> {
private handleWheel = withBatchedUpdates((event: WheelEvent) => { private handleWheel = withBatchedUpdates((event: WheelEvent) => {
event.preventDefault(); event.preventDefault();
if (isPanning) { if (isPanning) {
return; return;
} }