foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use excalidrawAPI.setToast for reconnection toast message

Browse Source
This commit is contained in:
Ryan Di 2022-09-01 19:31:08 +08:00
parent a1b1a2f9a3
commit df5a5f7d86
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/excalidraw-app/app_constants.ts
View File

@ -8,6 +8,7 @@ export const SYNC_BROWSER_TABS_TIMEOUT = 50;
export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
export const HIDDEN_DISCONNECT_TIMEOUT = 30000; export const HIDDEN_DISCONNECT_TIMEOUT = 30000;
export const RECONNECT_TOAST_DURATION = 2000;
export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
// 1 year (https://stackoverflow.com/a/25201898/927631) // 1 year (https://stackoverflow.com/a/25201898/927631)

30
src/excalidraw-app/index.tsx
View File

@ -44,6 +44,7 @@ import {
import { import {
FIREBASE_STORAGE_PREFIXES, FIREBASE_STORAGE_PREFIXES,
HIDDEN_DISCONNECT_TIMEOUT, HIDDEN_DISCONNECT_TIMEOUT,
RECONNECT_TOAST_DURATION,
STORAGE_KEYS, STORAGE_KEYS,
SYNC_BROWSER_TABS_TIMEOUT, SYNC_BROWSER_TABS_TIMEOUT,
} from "./app_constants"; } from "./app_constants";
@ -84,7 +85,6 @@ import { Provider, useAtom } from "jotai";
import { jotaiStore, useAtomWithInitialValue } from "../jotai"; import { jotaiStore, useAtomWithInitialValue } from "../jotai";
import { reconcileElements } from "./collab/reconciliation"; import { reconcileElements } from "./collab/reconciliation";
import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library"; import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
import { Toast } from "../components/Toast";
polyfill(); polyfill();
window.EXCALIDRAW_THROTTLE_RENDER = true; window.EXCALIDRAW_THROTTLE_RENDER = true;
@ -250,8 +250,8 @@ const PlusAppLinkJSX = (
const ExcalidrawWrapper = () => { const ExcalidrawWrapper = () => {
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
const [toast, setToast] = useState<AppState["toast"]>(null);
const disconnectRef = useRef(false); const disconnectRef = useRef(false);
const toastRef = useRef<AppState["toast"]>(null);
let currentLangCode = languageDetector.detect() || defaultLang.code; let currentLangCode = languageDetector.detect() || defaultLang.code;
if (Array.isArray(currentLangCode)) { if (Array.isArray(currentLangCode)) {
currentLangCode = currentLangCode[0]; currentLangCode = currentLangCode[0];
@ -482,17 +482,17 @@ const ExcalidrawWrapper = () => {
} else { } else {
cancelPrevDisconnect(); cancelPrevDisconnect();
disconnect(); disconnect();
setToast(null); excalidrawAPI.setToast(null);
} }
} else { } else {
cancelPrevDisconnect(); cancelPrevDisconnect();
if (!collabAPI.isCollaborating()) { if (!collabAPI.isCollaborating()) {
if (!toast && disconnectRef.current) { if (!toastRef.current && disconnectRef.current) {
setToast({ toastRef.current = {
message: t("toast.reconnectRoomServer"), message: t("toast.reconnectRoomServer"),
duration: Infinity, duration: RECONNECT_TOAST_DURATION,
closable: true, closable: true,
}); };
} }
disconnectRef.current && disconnectRef.current &&
(await initializeScene({ collabAPI, excalidrawAPI }).then( (await initializeScene({ collabAPI, excalidrawAPI }).then(
@ -504,12 +504,16 @@ const ExcalidrawWrapper = () => {
...data.scene, ...data.scene,
...restore(data.scene, null, null), ...restore(data.scene, null, null),
commitToHistory: true, commitToHistory: true,
appState: {
...excalidrawAPI.getAppState(),
toast: toastRef.current,
},
}); });
excalidrawAPI.scrollToContent(); excalidrawAPI.scrollToContent();
} }
}, },
)); ));
setToast(null); toastRef.current = null;
disconnectRef.current = false; disconnectRef.current = false;
} }
} }
@ -744,7 +748,7 @@ const ExcalidrawWrapper = () => {
return ( return (
<div <div
style={{ height: "100%" }} style={{ height: "100%" }}
className={clsx("excalidraw-app excalidraw", { className={clsx("excalidraw-app", {
"is-collaborating": isCollaborating, "is-collaborating": isCollaborating,
})} })}
> >
@ -794,14 +798,6 @@ const ExcalidrawWrapper = () => {
onClose={() => setErrorMessage("")} onClose={() => setErrorMessage("")}
/> />
)} )}
{toast && (
<Toast
message={toast.message}
duration={toast.duration}
closable={toast.closable}
onClose={() => setToast(null)}
/>
)}
</div> </div>
); );
}; };