Skip to content

Commit

Permalink
fix: Make some events expllicitly active to avoid console warnings (e…
Browse files Browse the repository at this point in the history
…xcalidraw#8757)

Avoid chrome/edge reporting of by-default blocking event handlers
  • Loading branch information
mtolmacs authored Nov 21, 2024
1 parent 840f142 commit d21e000
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 14 deletions.
47 changes: 33 additions & 14 deletions packages/excalidraw/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2557,19 +2557,27 @@ class App extends React.Component<AppProps, AppState> {
{ passive: false },
),
addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false),
addEventListener(document, EVENT.POINTER_UP, this.removePointer), // #3553
addEventListener(document, EVENT.COPY, this.onCopy),
addEventListener(document, EVENT.POINTER_UP, this.removePointer, {
passive: false,
}), // #3553
addEventListener(document, EVENT.COPY, this.onCopy, { passive: false }),
addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }),
addEventListener(
document,
EVENT.POINTER_MOVE,
this.updateCurrentCursorPosition,
{ passive: false },
),
// rerender text elements on font load to fix #637 && #1553
addEventListener(document.fonts, "loadingdone", (event) => {
const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
this.fonts.onLoaded(fontFaces);
}),
addEventListener(
document.fonts,
"loadingdone",
(event) => {
const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
this.fonts.onLoaded(fontFaces);
},
{ passive: false },
),
// Safari-only desktop pinch zoom
addEventListener(
document,
Expand All @@ -2589,12 +2597,17 @@ class App extends React.Component<AppProps, AppState> {
this.onGestureEnd as any,
false,
),
addEventListener(window, EVENT.FOCUS, () => {
this.maybeCleanupAfterMissingPointerUp(null);
// browsers (chrome?) tend to free up memory a lot, which results
// in canvas context being cleared. Thus re-render on focus.
this.triggerRender(true);
}),
addEventListener(
window,
EVENT.FOCUS,
() => {
this.maybeCleanupAfterMissingPointerUp(null);
// browsers (chrome?) tend to free up memory a lot, which results
// in canvas context being cleared. Thus re-render on focus.
this.triggerRender(true);
},
{ passive: false },
),
);

if (this.state.viewModeEnabled) {
Expand All @@ -2610,16 +2623,20 @@ class App extends React.Component<AppProps, AppState> {
document,
EVENT.FULLSCREENCHANGE,
this.onFullscreenChange,
{ passive: false },
),
addEventListener(document, EVENT.PASTE, this.pasteFromClipboard),
addEventListener(document, EVENT.CUT, this.onCut),
addEventListener(document, EVENT.PASTE, this.pasteFromClipboard, {
passive: false,
}),
addEventListener(document, EVENT.CUT, this.onCut, { passive: false }),
addEventListener(window, EVENT.RESIZE, this.onResize, false),
addEventListener(window, EVENT.UNLOAD, this.onUnload, false),
addEventListener(window, EVENT.BLUR, this.onBlur, false),
addEventListener(
this.excalidrawContainerRef.current,
EVENT.WHEEL,
this.handleWheel,
{ passive: false },
),
addEventListener(
this.excalidrawContainerRef.current,
Expand All @@ -2641,6 +2658,7 @@ class App extends React.Component<AppProps, AppState> {
getNearestScrollableContainer(this.excalidrawContainerRef.current!),
EVENT.SCROLL,
this.onScroll,
{ passive: false },
),
);
}
Expand Down Expand Up @@ -9806,6 +9824,7 @@ class App extends React.Component<AppProps, AppState> {
this.interactiveCanvas.addEventListener(
EVENT.TOUCH_START,
this.onTouchStart,
{ passive: false },
);
this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTouchEnd);
// -----------------------------------------------------------------------
Expand Down
1 change: 1 addition & 0 deletions packages/excalidraw/components/SearchMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ export const SearchMenu = () => {
// as well as to handle events before App ones
return addEventListener(window, EVENT.KEYDOWN, eventHandler, {
capture: true,
passive: false,
});
}, [setAppState, stableState, app]);

Expand Down

0 comments on commit d21e000

Please sign in to comment.