TheCloud/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-08-04 02:36:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: extend wait time for file loading on mobile devices

Browse Source
This commit is contained in:
Ryan Di 2025-07-31 18:51:38 +10:00
parent cff7516318
commit 5457d9c39a
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/excalidraw/data/filesystem.ts
View File

@ -4,7 +4,13 @@ import {
supported as nativeFileSystemSupported, supported as nativeFileSystemSupported,
} from "browser-fs-access"; } from "browser-fs-access";
import { EVENT, MIME_TYPES, debounce } from "@excalidraw/common"; import {
EVENT,
MIME_TYPES,
debounce,
isIOS,
isAndroid,
} from "@excalidraw/common";
import { AbortError } from "../errors"; import { AbortError } from "../errors";
@ -13,6 +19,8 @@ import type { FileSystemHandle } from "browser-fs-access";
type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">; type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
const INPUT_CHANGE_INTERVAL_MS = 500; const INPUT_CHANGE_INTERVAL_MS = 500;
// increase timeout for mobile devices to give more time for file selection
const MOBILE_INPUT_CHANGE_INTERVAL_MS = 2000;
export const fileOpen = <M extends boolean | undefined = false>(opts: { export const fileOpen = <M extends boolean | undefined = false>(opts: {
extensions?: FILE_EXTENSION[]; extensions?: FILE_EXTENSION[];
@ -41,13 +49,22 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
mimeTypes, mimeTypes,
multiple: opts.multiple ?? false, multiple: opts.multiple ?? false,
legacySetup: (resolve, reject, input) => { legacySetup: (resolve, reject, input) => {
const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS); const isMobile = isIOS || isAndroid;
const intervalMs = isMobile
? MOBILE_INPUT_CHANGE_INTERVAL_MS
: INPUT_CHANGE_INTERVAL_MS;
const scheduleRejection = debounce(reject, intervalMs);
const focusHandler = () => { const focusHandler = () => {
checkForFile(); checkForFile();
document.addEventListener(EVENT.KEYUP, scheduleRejection); // on mobile, be less aggressive with rejection
document.addEventListener(EVENT.POINTER_UP, scheduleRejection); if (!isMobile) {
scheduleRejection(); document.addEventListener(EVENT.KEYUP, scheduleRejection);
document.addEventListener(EVENT.POINTER_UP, scheduleRejection);
scheduleRejection();
}
}; };
const checkForFile = () => { const checkForFile = () => {
// this hack might not work when expecting multiple files // this hack might not work when expecting multiple files
if (input.files?.length) { if (input.files?.length) {
@ -55,12 +72,15 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
resolve(ret as RetType); resolve(ret as RetType);
} }
}; };
requestAnimationFrame(() => { requestAnimationFrame(() => {
window.addEventListener(EVENT.FOCUS, focusHandler); window.addEventListener(EVENT.FOCUS, focusHandler);
}); });
const interval = window.setInterval(() => { const interval = window.setInterval(() => {
checkForFile(); checkForFile();
}, INPUT_CHANGE_INTERVAL_MS); }, intervalMs);
return (rejectPromise) => { return (rejectPromise) => {
clearInterval(interval); clearInterval(interval);
scheduleRejection.cancel(); scheduleRejection.cancel();
@ -69,7 +89,9 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
document.removeEventListener(EVENT.POINTER_UP, scheduleRejection); document.removeEventListener(EVENT.POINTER_UP, scheduleRejection);
if (rejectPromise) { if (rejectPromise) {
// so that something is shown in console if we need to debug this // so that something is shown in console if we need to debug this
console.warn("Opening the file was canceled (legacy-fs)."); console.warn(
"Opening the file was canceled (legacy-fs). This may happen on mobile devices.",
);
rejectPromise(new AbortError()); rejectPromise(new AbortError());
} }
}; };