diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx index b718e5ed..d437a6a1 100644 --- a/src/components/Actions.tsx +++ b/src/components/Actions.tsx @@ -111,7 +111,7 @@ export const ShapesSwitcher = ({ isLibraryOpen, }: { elementType: ExcalidrawElement["type"]; - setAppState: (appState: Partial) => void; + setAppState: React.Component["setState"]; isLibraryOpen: boolean; }) => ( <> diff --git a/src/components/App.tsx b/src/components/App.tsx index a800b09f..024296e9 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -987,13 +987,18 @@ class App extends React.Component { const elements = this.scene.getElements(); const selectedElements = getSelectedElements(elements, this.state); - exportCanvas( - "clipboard", - selectedElements.length ? selectedElements : elements, - this.state, - this.canvas!, - this.state, - ); + try { + exportCanvas( + "clipboard", + selectedElements.length ? selectedElements : elements, + this.state, + this.canvas!, + this.state, + ); + } catch (error) { + console.error(error); + this.setState({ errorMessage: error.message }); + } }; private copyToClipboardAsSvg = () => { @@ -1001,13 +1006,18 @@ class App extends React.Component { this.scene.getElements(), this.state, ); - exportCanvas( - "clipboard-svg", - selectedElements.length ? selectedElements : this.scene.getElements(), - this.state, - this.canvas!, - this.state, - ); + try { + exportCanvas( + "clipboard-svg", + selectedElements.length ? selectedElements : this.scene.getElements(), + this.state, + this.canvas!, + this.state, + ); + } catch (error) { + console.error(error); + this.setState({ errorMessage: error.message }); + } }; private static resetTapTwice() { diff --git a/src/components/BackgroundPickerAndDarkModeToggle.tsx b/src/components/BackgroundPickerAndDarkModeToggle.tsx index d7dfc5f8..f2eba131 100644 --- a/src/components/BackgroundPickerAndDarkModeToggle.tsx +++ b/src/components/BackgroundPickerAndDarkModeToggle.tsx @@ -10,7 +10,7 @@ export const BackgroundPickerAndDarkModeToggle = ({ }: { actionManager: ActionManager; appState: AppState; - setAppState: any; + setAppState: React.Component["setState"]; }) => (
{actionManager.renderAction("changeViewBackgroundColor")} diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 44b0d2a9..73c3886c 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -49,7 +49,7 @@ interface LayerUIProps { actionManager: ActionManager; appState: AppState; canvas: HTMLCanvasElement | null; - setAppState: any; + setAppState: React.Component["setState"]; elements: readonly NonDeletedExcalidrawElement[]; onRoomCreate: () => void; onUsernameChange: (username: string) => void; @@ -103,7 +103,7 @@ const LibraryMenuItems = ({ onRemoveFromLibrary: (index: number) => void; onInsertShape: (elements: LibraryItem) => void; onAddToLibrary: (elements: LibraryItem) => void; - setAppState: any; + setAppState: React.Component["setState"]; }) => { const isMobile = useIsMobile(); const numCells = library.length + (pendingElements.length > 0 ? 1 : 0); @@ -202,7 +202,7 @@ const LibraryMenu = ({ onClickOutside: (event: MouseEvent) => void; onInsertShape: (elements: LibraryItem) => void; onAddToLibrary: () => void; - setAppState: any; + setAppState: React.Component["setState"]; }) => { const ref = useRef(null); useOnClickOutside(ref, onClickOutside); @@ -309,18 +309,23 @@ const LayerUI = ({ ); const renderExportDialog = () => { - const createExporter = (type: ExportType): ExportCB => ( + const createExporter = (type: ExportType): ExportCB => async ( exportedElements, scale, ) => { if (canvas) { - exportCanvas(type, exportedElements, appState, canvas, { - exportBackground: appState.exportBackground, - name: appState.name, - viewBackgroundColor: appState.viewBackgroundColor, - scale, - shouldAddWatermark: appState.shouldAddWatermark, - }); + try { + await exportCanvas(type, exportedElements, appState, canvas, { + exportBackground: appState.exportBackground, + name: appState.name, + viewBackgroundColor: appState.viewBackgroundColor, + scale, + shouldAddWatermark: appState.shouldAddWatermark, + }); + } catch (error) { + console.error(error); + setAppState({ errorMessage: error.message }); + } } }; return ( @@ -331,18 +336,23 @@ const LayerUI = ({ onExportToPng={createExporter("png")} onExportToSvg={createExporter("svg")} onExportToClipboard={createExporter("clipboard")} - onExportToBackend={(exportedElements) => { + onExportToBackend={async (exportedElements) => { if (canvas) { - exportCanvas( - "backend", - exportedElements, - { - ...appState, - selectedElementIds: {}, - }, - canvas, - appState, - ); + try { + await exportCanvas( + "backend", + exportedElements, + { + ...appState, + selectedElementIds: {}, + }, + canvas, + appState, + ); + } catch (error) { + console.error(error); + setAppState({ errorMessage: error.message }); + } } }} /> @@ -577,7 +587,7 @@ const LayerUI = ({ )} {appState.showShortcutsDialog && ( setAppState({ showShortcutsDialog: null })} + onClose={() => setAppState({ showShortcutsDialog: false })} /> )} {renderFixedSideContainer()} diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx index 5f75724d..1bc82b0b 100644 --- a/src/components/MobileMenu.tsx +++ b/src/components/MobileMenu.tsx @@ -23,7 +23,7 @@ type MobileMenuProps = { appState: AppState; actionManager: ActionManager; exportButton: React.ReactNode; - setAppState: any; + setAppState: React.Component["setState"]; elements: readonly NonDeletedExcalidrawElement[]; libraryMenu: JSX.Element | null; onRoomCreate: () => void;