smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Make some events expllicitly active to avoid console warnings (#8757)

Browse source 
Avoid chrome/edge reporting of by-default blocking event handlers
This commit is contained in:
Márk Tolmács 2024-11-21 15:18:18 +01:00 • committed by GitHub
parent 840f1428c4
commit d21e0008dd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

47
packages/excalidraw/components/App.tsx
View file

@ -2557,19 +2557,27 @@ class App extends React.Component<AppProps, AppState> {
{ passive: false }, { passive: false },
), ),
addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false), addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false),
addEventListener(document, EVENT.POINTER_UP, this.removePointer), // #3553 addEventListener(document, EVENT.POINTER_UP, this.removePointer, {
addEventListener(document, EVENT.COPY, this.onCopy), passive: false,
}), // #3553
addEventListener(document, EVENT.COPY, this.onCopy, { passive: false }),
addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }), addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }),
addEventListener( addEventListener(
document, document,
EVENT.POINTER_MOVE, EVENT.POINTER_MOVE,
this.updateCurrentCursorPosition, this.updateCurrentCursorPosition,
{ passive: false },
), ),
// rerender text elements on font load to fix #637 && #1553 // rerender text elements on font load to fix #637 && #1553
addEventListener(document.fonts, "loadingdone", (event) => { addEventListener(
const fontFaces = (event as FontFaceSetLoadEvent).fontfaces; document.fonts,
this.fonts.onLoaded(fontFaces); "loadingdone",
}), (event) => {
const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
this.fonts.onLoaded(fontFaces);
},
{ passive: false },
),
// Safari-only desktop pinch zoom // Safari-only desktop pinch zoom
addEventListener( addEventListener(
document, document,
@ -2589,12 +2597,17 @@ class App extends React.Component<AppProps, AppState> {
this.onGestureEnd as any, this.onGestureEnd as any,
false, false,
), ),
addEventListener(window, EVENT.FOCUS, () => { addEventListener(
this.maybeCleanupAfterMissingPointerUp(null); window,
// browsers (chrome?) tend to free up memory a lot, which results EVENT.FOCUS,
// in canvas context being cleared. Thus re-render on focus. () => {
this.triggerRender(true); 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) { if (this.state.viewModeEnabled) {
@ -2610,9 +2623,12 @@ class App extends React.Component<AppProps, AppState> {
document, document,
EVENT.FULLSCREENCHANGE, EVENT.FULLSCREENCHANGE,
this.onFullscreenChange, this.onFullscreenChange,
{ passive: false },
), ),
addEventListener(document, EVENT.PASTE, this.pasteFromClipboard), addEventListener(document, EVENT.PASTE, this.pasteFromClipboard, {
addEventListener(document, EVENT.CUT, this.onCut), passive: false,
}),
addEventListener(document, EVENT.CUT, this.onCut, { passive: false }),
addEventListener(window, EVENT.RESIZE, this.onResize, false), addEventListener(window, EVENT.RESIZE, this.onResize, false),
addEventListener(window, EVENT.UNLOAD, this.onUnload, false), addEventListener(window, EVENT.UNLOAD, this.onUnload, false),
addEventListener(window, EVENT.BLUR, this.onBlur, false), addEventListener(window, EVENT.BLUR, this.onBlur, false),
@ -2620,6 +2636,7 @@ class App extends React.Component<AppProps, AppState> {
this.excalidrawContainerRef.current, this.excalidrawContainerRef.current,
EVENT.WHEEL, EVENT.WHEEL,
this.handleWheel, this.handleWheel,
{ passive: false },
), ),
addEventListener( addEventListener(
this.excalidrawContainerRef.current, this.excalidrawContainerRef.current,
@ -2641,6 +2658,7 @@ class App extends React.Component<AppProps, AppState> {
getNearestScrollableContainer(this.excalidrawContainerRef.current!), getNearestScrollableContainer(this.excalidrawContainerRef.current!),
EVENT.SCROLL, EVENT.SCROLL,
this.onScroll, this.onScroll,
{ passive: false },
), ),
); );
} }
@ -9806,6 +9824,7 @@ class App extends React.Component<AppProps, AppState> {
this.interactiveCanvas.addEventListener( this.interactiveCanvas.addEventListener(
EVENT.TOUCH_START, EVENT.TOUCH_START,
this.onTouchStart, this.onTouchStart,
{ passive: false },
); );
this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTouchEnd); this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTouchEnd);
// ----------------------------------------------------------------------- // -----------------------------------------------------------------------

1
packages/excalidraw/components/SearchMenu.tsx
View file

@ -294,6 +294,7 @@ export const SearchMenu = () => {
// as well as to handle events before App ones // as well as to handle events before App ones
return addEventListener(window, EVENT.KEYDOWN, eventHandler, { return addEventListener(window, EVENT.KEYDOWN, eventHandler, {
capture: true, capture: true,
passive: false,
}); });
}, [setAppState, stableState, app]); }, [setAppState, stableState, app]);