diff options
Diffstat (limited to 'excalidraw-app')
46 files changed, 7472 insertions, 0 deletions
diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx new file mode 100644 index 0000000..3d413f0 --- /dev/null +++ b/excalidraw-app/App.tsx @@ -0,0 +1,1154 @@ +import polyfill from "@excalidraw/excalidraw/polyfill"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { trackEvent } from "@excalidraw/excalidraw/analytics"; +import { getDefaultAppState } from "@excalidraw/excalidraw/appState"; +import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog"; +import { TopErrorBoundary } from "./components/TopErrorBoundary"; +import { + APP_NAME, + EVENT, + THEME, + TITLE_TIMEOUT, + VERSION_TIMEOUT, +} from "@excalidraw/excalidraw/constants"; +import { loadFromBlob } from "@excalidraw/excalidraw/data/blob"; +import type { + FileId, + NonDeletedExcalidrawElement, + OrderedExcalidrawElement, +} from "@excalidraw/excalidraw/element/types"; +import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState"; +import { t } from "@excalidraw/excalidraw/i18n"; +import { + Excalidraw, + LiveCollaborationTrigger, + TTDDialogTrigger, + CaptureUpdateAction, + reconcileElements, +} from "@excalidraw/excalidraw"; +import type { + AppState, + ExcalidrawImperativeAPI, + BinaryFiles, + ExcalidrawInitialDataState, + UIAppState, +} from "@excalidraw/excalidraw/types"; +import type { ResolvablePromise } from "@excalidraw/excalidraw/utils"; +import { + debounce, + getVersion, + getFrame, + isTestEnv, + preventUnload, + resolvablePromise, + isRunningInIframe, +} from "@excalidraw/excalidraw/utils"; +import { + FIREBASE_STORAGE_PREFIXES, + isExcalidrawPlusSignedUser, + STORAGE_KEYS, + SYNC_BROWSER_TABS_TIMEOUT, +} from "./app_constants"; +import type { CollabAPI } from "./collab/Collab"; +import Collab, { + collabAPIAtom, + isCollaboratingAtom, + isOfflineAtom, +} from "./collab/Collab"; +import { + exportToBackend, + getCollaborationLinkData, + isCollaborationLink, + loadScene, +} from "./data"; +import { + importFromLocalStorage, + importUsernameFromLocalStorage, +} from "./data/localStorage"; +import CustomStats from "./CustomStats"; +import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore"; +import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore"; +import { + ExportToExcalidrawPlus, + exportToExcalidrawPlus, +} from "./components/ExportToExcalidrawPlus"; +import { updateStaleImageStatuses } from "./data/FileManager"; +import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement"; +import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks"; +import { loadFilesFromFirebase } from "./data/firebase"; +import { + LibraryIndexedDBAdapter, + LibraryLocalStorageMigrationAdapter, + LocalData, +} from "./data/LocalData"; +import { isBrowserStorageStateNewer } from "./data/tabSync"; +import clsx from "clsx"; +import { + parseLibraryTokensFromUrl, + useHandleLibrary, +} from "@excalidraw/excalidraw/data/library"; +import { AppMainMenu } from "./components/AppMainMenu"; +import { AppWelcomeScreen } from "./components/AppWelcomeScreen"; +import { AppFooter } from "./components/AppFooter"; +import { + Provider, + useAtom, + useAtomValue, + useAtomWithInitialValue, + appJotaiStore, +} from "./app-jotai"; + +import "./index.scss"; +import type { ResolutionType } from "@excalidraw/excalidraw/utility-types"; +import { ShareableLinkDialog } from "@excalidraw/excalidraw/components/ShareableLinkDialog"; +import { openConfirmModal } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirmState"; +import { OverwriteConfirmDialog } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirm"; +import Trans from "@excalidraw/excalidraw/components/Trans"; +import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog"; +import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError"; +import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile"; +import { + CommandPalette, + DEFAULT_CATEGORIES, +} from "@excalidraw/excalidraw/components/CommandPalette/CommandPalette"; +import { + GithubIcon, + XBrandIcon, + DiscordIcon, + ExcalLogo, + usersIcon, + exportToPlus, + share, + youtubeIcon, +} from "@excalidraw/excalidraw/components/icons"; +import { useHandleAppTheme } from "./useHandleAppTheme"; +import { getPreferredLanguage } from "./app-language/language-detector"; +import { useAppLangCode } from "./app-language/language-state"; +import DebugCanvas, { + debugRenderer, + isVisualDebuggerEnabled, + loadSavedDebugState, +} from "./components/DebugCanvas"; +import { AIComponents } from "./components/AI"; +import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport"; +import { isElementLink } from "@excalidraw/excalidraw/element/elementLink"; + +polyfill(); + +window.EXCALIDRAW_THROTTLE_RENDER = true; + +declare global { + interface BeforeInstallPromptEventChoiceResult { + outcome: "accepted" | "dismissed"; + } + + interface BeforeInstallPromptEvent extends Event { + prompt(): Promise<void>; + userChoice: Promise<BeforeInstallPromptEventChoiceResult>; + } + + interface WindowEventMap { + beforeinstallprompt: BeforeInstallPromptEvent; + } +} + +let pwaEvent: BeforeInstallPromptEvent | null = null; + +// Adding a listener outside of the component as it may (?) need to be +// subscribed early to catch the event. +// +// Also note that it will fire only if certain heuristics are met (user has +// used the app for some time, etc.) +window.addEventListener( + "beforeinstallprompt", + (event: BeforeInstallPromptEvent) => { + // prevent Chrome <= 67 from automatically showing the prompt + event.preventDefault(); + // cache for later use + pwaEvent = event; + }, +); + +let isSelfEmbedding = false; + +if (window.self !== window.top) { + try { + const parentUrl = new URL(document.referrer); + const currentUrl = new URL(window.location.href); + if (parentUrl.origin === currentUrl.origin) { + isSelfEmbedding = true; + } + } catch (error) { + // ignore + } +} + +const shareableLinkConfirmDialog = { + title: t("overwriteConfirm.modal.shareableLink.title"), + description: ( + <Trans + i18nKey="overwriteConfirm.modal.shareableLink.description" + bold={(text) => <strong>{text}</strong>} + br={() => <br />} + /> + ), + actionLabel: t("overwriteConfirm.modal.shareableLink.button"), + color: "danger", +} as const; + +const initializeScene = async (opts: { + collabAPI: CollabAPI | null; + excalidrawAPI: ExcalidrawImperativeAPI; +}): Promise< + { scene: ExcalidrawInitialDataState | null } & ( + | { isExternalScene: true; id: string; key: string } + | { isExternalScene: false; id?: null; key?: null } + ) +> => { + const searchParams = new URLSearchParams(window.location.search); + const id = searchParams.get("id"); + const jsonBackendMatch = window.location.hash.match( + /^#json=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/, + ); + const externalUrlMatch = window.location.hash.match(/^#url=(.*)$/); + + const localDataState = importFromLocalStorage(); + + let scene: RestoredDataState & { + scrollToContent?: boolean; + } = await loadScene(null, null, localDataState); + + let roomLinkData = getCollaborationLinkData(window.location.href); + const isExternalScene = !!(id || jsonBackendMatch || roomLinkData); + if (isExternalScene) { + if ( + // don't prompt if scene is empty + !scene.elements.length || + // don't prompt for collab scenes because we don't override local storage + roomLinkData || + // otherwise, prompt whether user wants to override current scene + (await openConfirmModal(shareableLinkConfirmDialog)) + ) { + if (jsonBackendMatch) { + scene = await loadScene( + jsonBackendMatch[1], + jsonBackendMatch[2], + localDataState, + ); + } + scene.scrollToContent = true; + if (!roomLinkData) { + window.history.replaceState({}, APP_NAME, window.location.origin); + } + } else { + // https://github.com/excalidraw/excalidraw/issues/1919 + if (document.hidden) { + return new Promise((resolve, reject) => { + window.addEventListener( + "focus", + () => initializeScene(opts).then(resolve).catch(reject), + { + once: true, + }, + ); + }); + } + + roomLinkData = null; + window.history.replaceState({}, APP_NAME, window.location.origin); + } + } else if (externalUrlMatch) { + window.history.replaceState({}, APP_NAME, window.location.origin); + + const url = externalUrlMatch[1]; + try { + const request = await fetch(window.decodeURIComponent(url)); + const data = await loadFromBlob(await request.blob(), null, null); + if ( + !scene.elements.length || + (await openConfirmModal(shareableLinkConfirmDialog)) + ) { + return { scene: data, isExternalScene }; + } + } catch (error: any) { + return { + scene: { + appState: { + errorMessage: t("alerts.invalidSceneUrl"), + }, + }, + isExternalScene, + }; + } + } + + if (roomLinkData && opts.collabAPI) { + const { excalidrawAPI } = opts; + + const scene = await opts.collabAPI.startCollaboration(roomLinkData); + + return { + // when collaborating, the state may have already been updated at this + // point (we may have received updates from other clients), so reconcile + // elements and appState with existing state + scene: { + ...scene, + appState: { + ...restoreAppState( + { + ...scene?.appState, + theme: localDataState?.appState?.theme || scene?.appState?.theme, + }, + excalidrawAPI.getAppState(), + ), + // necessary if we're invoking from a hashchange handler which doesn't + // go through App.initializeScene() that resets this flag + isLoading: false, + }, + elements: reconcileElements( + scene?.elements || [], + excalidrawAPI.getSceneElementsIncludingDeleted() as RemoteExcalidrawElement[], + excalidrawAPI.getAppState(), + ), + }, + isExternalScene: true, + id: roomLinkData.roomId, + key: roomLinkData.roomKey, + }; + } else if (scene) { + return isExternalScene && jsonBackendMatch + ? { + scene, + isExternalScene, + id: jsonBackendMatch[1], + key: jsonBackendMatch[2], + } + : { scene, isExternalScene: false }; + } + return { scene: null, isExternalScene: false }; +}; + +const ExcalidrawWrapper = () => { + const [errorMessage, setErrorMessage] = useState(""); + const isCollabDisabled = isRunningInIframe(); + + const { editorTheme, appTheme, setAppTheme } = useHandleAppTheme(); + + const [langCode, setLangCode] = useAppLangCode(); + + // initial state + // --------------------------------------------------------------------------- + + const initialStatePromiseRef = useRef<{ + promise: ResolvablePromise<ExcalidrawInitialDataState | null>; + }>({ promise: null! }); + if (!initialStatePromiseRef.current.promise) { + initialStatePromiseRef.current.promise = + resolvablePromise<ExcalidrawInitialDataState | null>(); + } + + const debugCanvasRef = useRef<HTMLCanvasElement>(null); + + useEffect(() => { + trackEvent("load", "frame", getFrame()); + // Delayed so that the app has a time to load the latest SW + setTimeout(() => { + trackEvent("load", "version", getVersion()); + }, VERSION_TIMEOUT); + }, []); + + const [excalidrawAPI, excalidrawRefCallback] = + useCallbackRefState<ExcalidrawImperativeAPI>(); + + const [, setShareDialogState] = useAtom(shareDialogStateAtom); + const [collabAPI] = useAtom(collabAPIAtom); + const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => { + return isCollaborationLink(window.location.href); + }); + const collabError = useAtomValue(collabErrorIndicatorAtom); + + useHandleLibrary({ + excalidrawAPI, + adapter: LibraryIndexedDBAdapter, + // TODO maybe remove this in several months (shipped: 24-03-11) + migrationAdapter: LibraryLocalStorageMigrationAdapter, + }); + + const [, forceRefresh] = useState(false); + + useEffect(() => { + if (import.meta.env.DEV) { + const debugState = loadSavedDebugState(); + + if (debugState.enabled && !window.visualDebug) { + window.visualDebug = { + data: [], + }; + } else { + delete window.visualDebug; + } + forceRefresh((prev) => !prev); + } + }, [excalidrawAPI]); + + useEffect(() => { + if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) { + return; + } + + const loadImages = ( + data: ResolutionType<typeof initializeScene>, + isInitialLoad = false, + ) => { + if (!data.scene) { + return; + } + if (collabAPI?.isCollaborating()) { + if (data.scene.elements) { + collabAPI + .fetchImageFilesFromFirebase({ + elements: data.scene.elements, + forceFetchFiles: true, + }) + .then(({ loadedFiles, erroredFiles }) => { + excalidrawAPI.addFiles(loadedFiles); + updateStaleImageStatuses({ + excalidrawAPI, + erroredFiles, + elements: excalidrawAPI.getSceneElementsIncludingDeleted(), + }); + }); + } + } else { + const fileIds = + data.scene.elements?.reduce((acc, element) => { + if (isInitializedImageElement(element)) { + return acc.concat(element.fileId); + } + return acc; + }, [] as FileId[]) || []; + + if (data.isExternalScene) { + loadFilesFromFirebase( + `${FIREBASE_STORAGE_PREFIXES.shareLinkFiles}/${data.id}`, + data.key, + fileIds, + ).then(({ loadedFiles, erroredFiles }) => { + excalidrawAPI.addFiles(loadedFiles); + updateStaleImageStatuses({ + excalidrawAPI, + erroredFiles, + elements: excalidrawAPI.getSceneElementsIncludingDeleted(), + }); + }); + } else if (isInitialLoad) { + if (fileIds.length) { + LocalData.fileStorage + .getFiles(fileIds) + .then(({ loadedFiles, erroredFiles }) => { + if (loadedFiles.length) { + excalidrawAPI.addFiles(loadedFiles); + } + updateStaleImageStatuses({ + excalidrawAPI, + erroredFiles, + elements: excalidrawAPI.getSceneElementsIncludingDeleted(), + }); + }); + } + // on fresh load, clear unused files from IDB (from previous + // session) + LocalData.fileStorage.clearObsoleteFiles({ currentFileIds: fileIds }); + } + } + }; + + initializeScene({ collabAPI, excalidrawAPI }).then(async (data) => { + loadImages(data, /* isInitialLoad */ true); + initialStatePromiseRef.current.promise.resolve(data.scene); + }); + + const onHashChange = async (event: HashChangeEvent) => { + event.preventDefault(); + const libraryUrlTokens = parseLibraryTokensFromUrl(); + if (!libraryUrlTokens) { + if ( + collabAPI?.isCollaborating() && + !isCollaborationLink(window.location.href) + ) { + collabAPI.stopCollaboration(false); + } + excalidrawAPI.updateScene({ appState: { isLoading: true } }); + + initializeScene({ collabAPI, excalidrawAPI }).then((data) => { + loadImages(data); + if (data.scene) { + excalidrawAPI.updateScene({ + ...data.scene, + ...restore(data.scene, null, null, { repairBindings: true }), + captureUpdate: CaptureUpdateAction.IMMEDIATELY, + }); + } + }); + } + }; + + const titleTimeout = setTimeout( + () => (document.title = APP_NAME), + TITLE_TIMEOUT, + ); + + const syncData = debounce(() => { + if (isTestEnv()) { + return; + } + if ( + !document.hidden && + ((collabAPI && !collabAPI.isCollaborating()) || isCollabDisabled) + ) { + // don't sync if local state is newer or identical to browser state + if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) { + const localDataState = importFromLocalStorage(); + const username = importUsernameFromLocalStorage(); + setLangCode(getPreferredLanguage()); + excalidrawAPI.updateScene({ + ...localDataState, + captureUpdate: CaptureUpdateAction.NEVER, + }); + LibraryIndexedDBAdapter.load().then((data) => { + if (data) { + excalidrawAPI.updateLibrary({ + libraryItems: data.libraryItems, + }); + } + }); + collabAPI?.setUsername(username || ""); + } + + if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_FILES)) { + const elements = excalidrawAPI.getSceneElementsIncludingDeleted(); + const currFiles = excalidrawAPI.getFiles(); + const fileIds = + elements?.reduce((acc, element) => { + if ( + isInitializedImageElement(element) && + // only load and update images that aren't already loaded + !currFiles[element.fileId] + ) { + return acc.concat(element.fileId); + } + return acc; + }, [] as FileId[]) || []; + if (fileIds.length) { + LocalData.fileStorage + .getFiles(fileIds) + .then(({ loadedFiles, erroredFiles }) => { + if (loadedFiles.length) { + excalidrawAPI.addFiles(loadedFiles); + } + updateStaleImageStatuses({ + excalidrawAPI, + erroredFiles, + elements: excalidrawAPI.getSceneElementsIncludingDeleted(), + }); + }); + } + } + } + }, SYNC_BROWSER_TABS_TIMEOUT); + + const onUnload = () => { + LocalData.flushSave(); + }; + + const visibilityChange = (event: FocusEvent | Event) => { + if (event.type === EVENT.BLUR || document.hidden) { + LocalData.flushSave(); + } + if ( + event.type === EVENT.VISIBILITY_CHANGE || + event.type === EVENT.FOCUS + ) { + syncData(); + } + }; + + window.addEventListener(EVENT.HASHCHANGE, onHashChange, false); + window.addEventListener(EVENT.UNLOAD, onUnload, false); + window.addEventListener(EVENT.BLUR, visibilityChange, false); + document.addEventListener(EVENT.VISIBILITY_CHANGE, visibilityChange, false); + window.addEventListener(EVENT.FOCUS, visibilityChange, false); + return () => { + window.removeEventListener(EVENT.HASHCHANGE, onHashChange, false); + window.removeEventListener(EVENT.UNLOAD, onUnload, false); + window.removeEventListener(EVENT.BLUR, visibilityChange, false); + window.removeEventListener(EVENT.FOCUS, visibilityChange, false); + document.removeEventListener( + EVENT.VISIBILITY_CHANGE, + visibilityChange, + false, + ); + clearTimeout(titleTimeout); + }; + }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode]); + + useEffect(() => { + const unloadHandler = (event: BeforeUnloadEvent) => { + LocalData.flushSave(); + + if ( + excalidrawAPI && + LocalData.fileStorage.shouldPreventUnload( + excalidrawAPI.getSceneElements(), + ) + ) { + preventUnload(event); + } + }; + window.addEventListener(EVENT.BEFORE_UNLOAD, unloadHandler); + return () => { + window.removeEventListener(EVENT.BEFORE_UNLOAD, unloadHandler); + }; + }, [excalidrawAPI]); + + const onChange = ( + elements: readonly OrderedExcalidrawElement[], + appState: AppState, + files: BinaryFiles, + ) => { + if (collabAPI?.isCollaborating()) { + collabAPI.syncElements(elements); + } + + // this check is redundant, but since this is a hot path, it's best + // not to evaludate the nested expression every time + if (!LocalData.isSavePaused()) { + LocalData.save(elements, appState, files, () => { + if (excalidrawAPI) { + let didChange = false; + + const elements = excalidrawAPI + .getSceneElementsIncludingDeleted() + .map((element) => { + if ( + LocalData.fileStorage.shouldUpdateImageElementStatus(element) + ) { + const newElement = newElementWith(element, { status: "saved" }); + if (newElement !== element) { + didChange = true; + } + return newElement; + } + return element; + }); + + if (didChange) { + excalidrawAPI.updateScene({ + elements, + captureUpdate: CaptureUpdateAction.NEVER, + }); + } + } + }); + } + + // Render the debug scene if the debug canvas is available + if (debugCanvasRef.current && excalidrawAPI) { + debugRenderer( + debugCanvasRef.current, + appState, + window.devicePixelRatio, + () => forceRefresh((prev) => !prev), + ); + } + }; + + const [latestShareableLink, setLatestShareableLink] = useState<string | null>( + null, + ); + + const onExportToBackend = async ( + exportedElements: readonly NonDeletedExcalidrawElement[], + appState: Partial<AppState>, + files: BinaryFiles, + ) => { + if (exportedElements.length === 0) { + throw new Error(t("alerts.cannotExportEmptyCanvas")); + } + try { + const { url, errorMessage } = await exportToBackend( + exportedElements, + { + ...appState, + viewBackgroundColor: appState.exportBackground + ? appState.viewBackgroundColor + : getDefaultAppState().viewBackgroundColor, + }, + files, + ); + + if (errorMessage) { + throw new Error(errorMessage); + } + + if (url) { + setLatestShareableLink(url); + } + } catch (error: any) { + if (error.name !== "AbortError") { + const { width, height } = appState; + console.error(error, { + width, + height, + devicePixelRatio: window.devicePixelRatio, + }); + throw new Error(error.message); + } + } + }; + + const renderCustomStats = ( + elements: readonly NonDeletedExcalidrawElement[], + appState: UIAppState, + ) => { + return ( + <CustomStats + setToast={(message) => excalidrawAPI!.setToast({ message })} + appState={appState} + elements={elements} + /> + ); + }; + + const isOffline = useAtomValue(isOfflineAtom); + + const onCollabDialogOpen = useCallback( + () => setShareDialogState({ isOpen: true, type: "collaborationOnly" }), + [setShareDialogState], + ); + + // browsers generally prevent infinite self-embedding, there are + // cases where it still happens, and while we disallow self-embedding + // by not whitelisting our own origin, this serves as an additional guard + if (isSelfEmbedding) { + return ( + <div + style={{ + display: "flex", + alignItems: "center", + justifyContent: "center", + textAlign: "center", + height: "100%", + }} + > + <h1>I'm not a pretzel!</h1> + </div> + ); + } + + const ExcalidrawPlusCommand = { + label: "kj-diagramming cloud", + category: DEFAULT_CATEGORIES.links, + predicate: true, + icon: <div style={{ width: 14 }}>{ExcalLogo}</div>, + keywords: ["plus", "cloud", "server"], + perform: () => { + window.open( + `${ + import.meta.env.VITE_APP_PLUS_LP + }/plus?utm_source=excalidraw&utm_medium=app&utm_content=command_palette`, + "_blank", + ); + }, + }; + const ExcalidrawPlusAppCommand = { + label: "Sign up", + category: DEFAULT_CATEGORIES.links, + predicate: true, + icon: <div style={{ width: 14 }}>{ExcalLogo}</div>, + keywords: [ + "diagramming", + "plus", + "cloud", + "server", + "signin", + "login", + "signup", + ], + perform: () => { + window.open( + `${ + import.meta.env.VITE_APP_PLUS_APP + }?utm_source=excalidraw&utm_medium=app&utm_content=command_palette`, + "_blank", + ); + }, + }; + + return ( + <div + style={{ height: "100%" }} + className={clsx("excalidraw-app", { + "is-collaborating": isCollaborating, + })} + > + <Excalidraw + excalidrawAPI={excalidrawRefCallback} + onChange={onChange} + initialData={initialStatePromiseRef.current.promise} + isCollaborating={isCollaborating} + onPointerUpdate={collabAPI?.onPointerUpdate} + UIOptions={{ + canvasActions: { + toggleTheme: true, + export: { + onExportToBackend, + renderCustomUI: excalidrawAPI + ? (elements, appState, files) => { + return ( + <ExportToExcalidrawPlus + elements={elements} + appState={appState} + files={files} + name={excalidrawAPI.getName()} + onError={(error) => { + excalidrawAPI?.updateScene({ + appState: { + errorMessage: error.message, + }, + }); + }} + onSuccess={() => { + excalidrawAPI.updateScene({ + appState: { openDialog: null }, + }); + }} + /> + ); + } + : undefined, + }, + }, + }} + langCode={langCode} + renderCustomStats={renderCustomStats} + detectScroll={false} + handleKeyboardGlobally={true} + autoFocus={true} + theme={editorTheme} + renderTopRightUI={(isMobile) => { + if (isMobile || !collabAPI || isCollabDisabled) { + return null; + } + return ( + <div className="top-right-ui"> + {collabError.message && <CollabError collabError={collabError} />} + <LiveCollaborationTrigger + isCollaborating={isCollaborating} + onSelect={() => + setShareDialogState({ isOpen: true, type: "share" }) + } + /> + </div> + ); + }} + onLinkOpen={(element, event) => { + if (element.link && isElementLink(element.link)) { + event.preventDefault(); + excalidrawAPI?.scrollToContent(element.link, { animate: true }); + } + }} + > + <AppMainMenu + onCollabDialogOpen={onCollabDialogOpen} + isCollaborating={isCollaborating} + isCollabEnabled={!isCollabDisabled} + theme={appTheme} + setTheme={(theme) => setAppTheme(theme)} + refresh={() => forceRefresh((prev) => !prev)} + /> + <AppWelcomeScreen + onCollabDialogOpen={onCollabDialogOpen} + isCollabEnabled={!isCollabDisabled} + /> + <OverwriteConfirmDialog> + <OverwriteConfirmDialog.Actions.ExportToImage /> + <OverwriteConfirmDialog.Actions.SaveToDisk /> + {excalidrawAPI && ( + <OverwriteConfirmDialog.Action + title={t("overwriteConfirm.action.excalidrawPlus.title")} + actionLabel={t("overwriteConfirm.action.excalidrawPlus.button")} + onClick={() => { + exportToExcalidrawPlus( + excalidrawAPI.getSceneElements(), + excalidrawAPI.getAppState(), + excalidrawAPI.getFiles(), + excalidrawAPI.getName(), + ); + }} + > + {t("overwriteConfirm.action.excalidrawPlus.description")} + </OverwriteConfirmDialog.Action> + )} + </OverwriteConfirmDialog> + <AppFooter onChange={() => excalidrawAPI?.refresh()} /> + {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />} + + <TTDDialogTrigger /> + {isCollaborating && isOffline && ( + <div className="collab-offline-warning"> + {t("alerts.collabOfflineWarning")} + </div> + )} + {latestShareableLink && ( + <ShareableLinkDialog + link={latestShareableLink} + onCloseRequest={() => setLatestShareableLink(null)} + setErrorMessage={setErrorMessage} + /> + )} + {excalidrawAPI && !isCollabDisabled && ( + <Collab excalidrawAPI={excalidrawAPI} /> + )} + + <ShareDialog + collabAPI={collabAPI} + onExportToBackend={async () => { + if (excalidrawAPI) { + try { + await onExportToBackend( + excalidrawAPI.getSceneElements(), + excalidrawAPI.getAppState(), + excalidrawAPI.getFiles(), + ); + } catch (error: any) { + setErrorMessage(error.message); + } + } + }} + /> + + {errorMessage && ( + <ErrorDialog onClose={() => setErrorMessage("")}> + {errorMessage} + </ErrorDialog> + )} + + <CommandPalette + customCommandPaletteItems={[ + { + label: t("labels.liveCollaboration"), + category: DEFAULT_CATEGORIES.app, + keywords: [ + "team", + "multiplayer", + "share", + "public", + "session", + "invite", + ], + icon: usersIcon, + perform: () => { + setShareDialogState({ + isOpen: true, + type: "collaborationOnly", + }); + }, + }, + { + label: t("roomDialog.button_stopSession"), + category: DEFAULT_CATEGORIES.app, + predicate: () => !!collabAPI?.isCollaborating(), + keywords: [ + "stop", + "session", + "end", + "leave", + "close", + "exit", + "collaboration", + ], + perform: () => { + if (collabAPI) { + collabAPI.stopCollaboration(); + if (!collabAPI.isCollaborating()) { + setShareDialogState({ isOpen: false }); + } + } + }, + }, + { + label: t("labels.share"), + category: DEFAULT_CATEGORIES.app, + predicate: true, + icon: share, + keywords: [ + "link", + "shareable", + "readonly", + "export", + "publish", + "snapshot", + "url", + "collaborate", + "invite", + ], + perform: async () => { + setShareDialogState({ isOpen: true, type: "share" }); + }, + }, + { + label: "GitHub", + icon: GithubIcon, + category: DEFAULT_CATEGORIES.links, + predicate: true, + keywords: [ + "issues", + "bugs", + "requests", + "report", + "features", + "social", + "community", + ], + perform: () => { + window.open( + "https://github.com/excalidraw/excalidraw", + "_blank", + "noopener noreferrer", + ); + }, + }, + { + label: t("labels.followUs"), + icon: XBrandIcon, + category: DEFAULT_CATEGORIES.links, + predicate: true, + keywords: ["twitter", "contact", "social", "community"], + perform: () => { + window.open( + "https://x.com/excalidraw", + "_blank", + "noopener noreferrer", + ); + }, + }, + { + label: t("labels.discordChat"), + category: DEFAULT_CATEGORIES.links, + predicate: true, + icon: DiscordIcon, + keywords: [ + "chat", + "talk", + "contact", + "bugs", + "requests", + "report", + "feedback", + "suggestions", + "social", + "community", + ], + perform: () => { + window.open( + "https://discord.gg/UexuTaE", + "_blank", + "noopener noreferrer", + ); + }, + }, + { + label: "YouTube", + icon: youtubeIcon, + category: DEFAULT_CATEGORIES.links, + predicate: true, + keywords: ["features", "tutorials", "howto", "help", "community"], + perform: () => { + window.open( + "https://youtube.com/@excalidraw", + "_blank", + "noopener noreferrer", + ); + }, + }, + ...(isExcalidrawPlusSignedUser + ? [ + { + ...ExcalidrawPlusAppCommand, + label: "Sign in / Go to kj-diagramming cloud", + }, + ] + : [ExcalidrawPlusCommand, ExcalidrawPlusAppCommand]), + + { + label: t("overwriteConfirm.action.excalidrawPlus.button"), + category: DEFAULT_CATEGORIES.export, + icon: exportToPlus, + predicate: true, + keywords: ["plus", "export", "save", "backup"], + perform: () => { + if (excalidrawAPI) { + exportToExcalidrawPlus( + excalidrawAPI.getSceneElements(), + excalidrawAPI.getAppState(), + excalidrawAPI.getFiles(), + excalidrawAPI.getName(), + ); + } + }, + }, + { + ...CommandPalette.defaultItems.toggleTheme, + perform: () => { + setAppTheme( + editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK, + ); + }, + }, + { + label: t("labels.installPWA"), + category: DEFAULT_CATEGORIES.app, + predicate: () => !!pwaEvent, + perform: () => { + if (pwaEvent) { + pwaEvent.prompt(); + pwaEvent.userChoice.then(() => { + // event cannot be reused, but we'll hopefully + // grab new one as the event should be fired again + pwaEvent = null; + }); + } + }, + }, + ]} + /> + {isVisualDebuggerEnabled() && excalidrawAPI && ( + <DebugCanvas + appState={excalidrawAPI.getAppState()} + scale={window.devicePixelRatio} + ref={debugCanvasRef} + /> + )} + </Excalidraw> + </div> + ); +}; + +const ExcalidrawApp = () => { + const isCloudExportWindow = + window.location.pathname === "/excalidraw-plus-export"; + if (isCloudExportWindow) { + return <ExcalidrawPlusIframeExport />; + } + + return ( + <TopErrorBoundary> + <Provider store={appJotaiStore}> + <ExcalidrawWrapper /> + </Provider> + </TopErrorBoundary> + ); +}; + +export default ExcalidrawApp; diff --git a/excalidraw-app/CustomStats.tsx b/excalidraw-app/CustomStats.tsx new file mode 100644 index 0000000..96ca55d --- /dev/null +++ b/excalidraw-app/CustomStats.tsx @@ -0,0 +1,85 @@ +import { useEffect, useState } from "react"; +import { debounce, getVersion, nFormatter } from "@excalidraw/excalidraw/utils"; +import { + getElementsStorageSize, + getTotalStorageSize, +} from "./data/localStorage"; +import { DEFAULT_VERSION } from "@excalidraw/excalidraw/constants"; +import { t } from "@excalidraw/excalidraw/i18n"; +import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard"; +import type { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types"; +import type { UIAppState } from "@excalidraw/excalidraw/types"; +import { Stats } from "@excalidraw/excalidraw"; + +type StorageSizes = { scene: number; total: number }; + +const STORAGE_SIZE_TIMEOUT = 500; + +const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => { + cb({ + scene: getElementsStorageSize(), + total: getTotalStorageSize(), + }); +}, STORAGE_SIZE_TIMEOUT); + +type Props = { + setToast: (message: string) => void; + elements: readonly NonDeletedExcalidrawElement[]; + appState: UIAppState; +}; +const CustomStats = (props: Props) => { + const [storageSizes, setStorageSizes] = useState<StorageSizes>({ + scene: 0, + total: 0, + }); + + useEffect(() => { + getStorageSizes((sizes) => { + setStorageSizes(sizes); + }); + }, [props.elements, props.appState]); + useEffect(() => () => getStorageSizes.cancel(), []); + + const version = getVersion(); + let hash; + let timestamp; + + if (version !== DEFAULT_VERSION) { + timestamp = version.slice(0, 16).replace("T", " "); + hash = version.slice(21); + } else { + timestamp = t("stats.versionNotAvailable"); + } + + return ( + <Stats.StatsRows order={-1}> + <Stats.StatsRow heading>{t("stats.version")}</Stats.StatsRow> + <Stats.StatsRow + style={{ textAlign: "center", cursor: "pointer" }} + onClick={async () => { + try { + await copyTextToSystemClipboard(getVersion()); + props.setToast(t("toast.copyToClipboard")); + } catch {} + }} + title={t("stats.versionCopy")} + > + {timestamp} + <br /> + {hash} + </Stats.StatsRow> + + <Stats.StatsRow heading>{t("stats.storage")}</Stats.StatsRow> + <Stats.StatsRow columns={2}> + <div>{t("stats.scene")}</div> + <div>{nFormatter(storageSizes.scene, 1)}</div> + </Stats.StatsRow> + <Stats.StatsRow columns={2}> + <div>{t("stats.total")}</div> + <div>{nFormatter(storageSizes.total, 1)}</div> + </Stats.StatsRow> + </Stats.StatsRows> + ); +}; + +export default CustomStats; diff --git a/excalidraw-app/ExcalidrawPlusIframeExport.tsx b/excalidraw-app/ExcalidrawPlusIframeExport.tsx new file mode 100644 index 0000000..1f9cd63 --- /dev/null +++ b/excalidraw-app/ExcalidrawPlusIframeExport.tsx @@ -0,0 +1,222 @@ +import { useLayoutEffect, useRef } from "react"; +import { STORAGE_KEYS } from "./app_constants"; +import { LocalData } from "./data/LocalData"; +import type { + FileId, + OrderedExcalidrawElement, +} from "@excalidraw/excalidraw/element/types"; +import type { AppState, BinaryFileData } from "@excalidraw/excalidraw/types"; +import { ExcalidrawError } from "@excalidraw/excalidraw/errors"; +import { base64urlToString } from "@excalidraw/excalidraw/data/encode"; + +const EVENT_REQUEST_SCENE = "REQUEST_SCENE"; + +const EXCALIDRAW_PLUS_ORIGIN = import.meta.env.VITE_APP_PLUS_APP; + +// ----------------------------------------------------------------------------- +// outgoing message +// ----------------------------------------------------------------------------- +type MESSAGE_REQUEST_SCENE = { + type: "REQUEST_SCENE"; + jwt: string; +}; + +type MESSAGE_FROM_PLUS = MESSAGE_REQUEST_SCENE; + +// incoming messages +// ----------------------------------------------------------------------------- +type MESSAGE_READY = { type: "READY" }; +type MESSAGE_ERROR = { type: "ERROR"; message: string }; +type MESSAGE_SCENE_DATA = { + type: "SCENE_DATA"; + elements: OrderedExcalidrawElement[]; + appState: Pick<AppState, "viewBackgroundColor">; + files: { loadedFiles: BinaryFileData[]; erroredFiles: Map<FileId, true> }; +}; + +type MESSAGE_FROM_EDITOR = MESSAGE_ERROR | MESSAGE_SCENE_DATA | MESSAGE_READY; +// ----------------------------------------------------------------------------- + +const parseSceneData = async ({ + rawElementsString, + rawAppStateString, +}: { + rawElementsString: string | null; + rawAppStateString: string | null; +}): Promise<MESSAGE_SCENE_DATA> => { + if (!rawElementsString || !rawAppStateString) { + throw new ExcalidrawError("Elements or appstate is missing."); + } + + try { + const elements = JSON.parse( + rawElementsString, + ) as OrderedExcalidrawElement[]; + + if (!elements.length) { + throw new ExcalidrawError("Scene is empty, nothing to export."); + } + + const appState = JSON.parse(rawAppStateString) as Pick< + AppState, + "viewBackgroundColor" + >; + + const fileIds = elements.reduce((acc, el) => { + if ("fileId" in el && el.fileId) { + acc.push(el.fileId); + } + return acc; + }, [] as FileId[]); + + const files = await LocalData.fileStorage.getFiles(fileIds); + + return { + type: "SCENE_DATA", + elements, + appState, + files, + }; + } catch (error: any) { + throw error instanceof ExcalidrawError + ? error + : new ExcalidrawError("Failed to parse scene data."); + } +}; + +const verifyJWT = async ({ + token, + publicKey, +}: { + token: string; + publicKey: string; +}) => { + try { + if (!publicKey) { + throw new ExcalidrawError("Public key is undefined"); + } + + const [header, payload, signature] = token.split("."); + + if (!header || !payload || !signature) { + throw new ExcalidrawError("Invalid JWT format"); + } + + // JWT is using Base64URL encoding + const decodedPayload = base64urlToString(payload); + const decodedSignature = base64urlToString(signature); + + const data = `${header}.${payload}`; + const signatureArrayBuffer = Uint8Array.from(decodedSignature, (c) => + c.charCodeAt(0), + ); + + const keyData = publicKey.replace(/-----\w+ PUBLIC KEY-----/g, ""); + const keyArrayBuffer = Uint8Array.from(atob(keyData), (c) => + c.charCodeAt(0), + ); + + const key = await crypto.subtle.importKey( + "spki", + keyArrayBuffer, + { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" }, + true, + ["verify"], + ); + + const isValid = await crypto.subtle.verify( + "RSASSA-PKCS1-v1_5", + key, + signatureArrayBuffer, + new TextEncoder().encode(data), + ); + + if (!isValid) { + throw new Error("Invalid JWT"); + } + + const parsedPayload = JSON.parse(decodedPayload); + + // Check for expiration + const currentTime = Math.floor(Date.now() / 1000); + if (parsedPayload.exp && parsedPayload.exp < currentTime) { + throw new Error("JWT has expired"); + } + } catch (error) { + console.error("Failed to verify JWT:", error); + throw new Error(error instanceof Error ? error.message : "Invalid JWT"); + } +}; + +export const ExcalidrawPlusIframeExport = () => { + const readyRef = useRef(false); + + useLayoutEffect(() => { + const handleMessage = async (event: MessageEvent<MESSAGE_FROM_PLUS>) => { + if (event.origin !== EXCALIDRAW_PLUS_ORIGIN) { + throw new ExcalidrawError("Invalid origin"); + } + + if (event.data.type === EVENT_REQUEST_SCENE) { + if (!event.data.jwt) { + throw new ExcalidrawError("JWT is missing"); + } + + try { + try { + await verifyJWT({ + token: event.data.jwt, + publicKey: import.meta.env.VITE_APP_PLUS_EXPORT_PUBLIC_KEY, + }); + } catch (error: any) { + console.error(`Failed to verify JWT: ${error.message}`); + throw new ExcalidrawError("Failed to verify JWT"); + } + + const parsedSceneData: MESSAGE_SCENE_DATA = await parseSceneData({ + rawAppStateString: localStorage.getItem( + STORAGE_KEYS.LOCAL_STORAGE_APP_STATE, + ), + rawElementsString: localStorage.getItem( + STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS, + ), + }); + + event.source!.postMessage(parsedSceneData, { + targetOrigin: EXCALIDRAW_PLUS_ORIGIN, + }); + } catch (error) { + const responseData: MESSAGE_ERROR = { + type: "ERROR", + message: + error instanceof ExcalidrawError + ? error.message + : "Failed to export scene data", + }; + event.source!.postMessage(responseData, { + targetOrigin: EXCALIDRAW_PLUS_ORIGIN, + }); + } + } + }; + + window.addEventListener("message", handleMessage); + + // so we don't send twice in StrictMode + if (!readyRef.current) { + readyRef.current = true; + const message: MESSAGE_FROM_EDITOR = { type: "READY" }; + window.parent.postMessage(message, EXCALIDRAW_PLUS_ORIGIN); + } + + return () => { + window.removeEventListener("message", handleMessage); + }; + }, []); + + // Since this component is expected to run in a hidden iframe on Excaildraw+, + // it doesn't need to render anything. All the data we need is available in + // LocalStorage and IndexedDB. It only needs to handle the messaging between + // the parent window and the iframe with the relevant data. + return null; +}; diff --git a/excalidraw-app/app-jotai.ts b/excalidraw-app/app-jotai.ts new file mode 100644 index 0000000..1591803 --- /dev/null +++ b/excalidraw-app/app-jotai.ts @@ -0,0 +1,37 @@ +// eslint-disable-next-line no-restricted-imports +import { + atom, + Provider, + useAtom, + useAtomValue, + useSetAtom, + createStore, + type PrimitiveAtom, +} from "jotai"; +import { useLayoutEffect } from "react"; + +export const appJotaiStore = createStore(); + +export { atom, Provider, useAtom, useAtomValue, useSetAtom }; + +export const useAtomWithInitialValue = < + T extends unknown, + A extends PrimitiveAtom<T>, +>( + atom: A, + initialValue: T | (() => T), +) => { + const [value, setValue] = useAtom(atom); + + useLayoutEffect(() => { + if (typeof initialValue === "function") { + // @ts-ignore + setValue(initialValue()); + } else { + setValue(initialValue); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return [value, setValue] as const; +}; diff --git a/excalidraw-app/app-language/LanguageList.tsx b/excalidraw-app/app-language/LanguageList.tsx new file mode 100644 index 0000000..001d4ea --- /dev/null +++ b/excalidraw-app/app-language/LanguageList.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { useI18n, languages } from "@excalidraw/excalidraw/i18n"; +import { useSetAtom } from "../app-jotai"; +import { appLangCodeAtom } from "./language-state"; + +export const LanguageList = ({ style }: { style?: React.CSSProperties }) => { + const { t, langCode } = useI18n(); + const setLangCode = useSetAtom(appLangCodeAtom); + + return ( + <select + className="dropdown-select dropdown-select__language" + onChange={({ target }) => setLangCode(target.value)} + value={langCode} + aria-label={t("buttons.selectLanguage")} + style={style} + > + {languages.map((lang) => ( + <option key={lang.code} value={lang.code}> + {lang.label} + </option> + ))} + </select> + ); +}; diff --git a/excalidraw-app/app-language/language-detector.ts b/excalidraw-app/app-language/language-detector.ts new file mode 100644 index 0000000..52da490 --- /dev/null +++ b/excalidraw-app/app-language/language-detector.ts @@ -0,0 +1,25 @@ +import LanguageDetector from "i18next-browser-languagedetector"; +import { defaultLang, languages } from "@excalidraw/excalidraw"; + +export const languageDetector = new LanguageDetector(); + +languageDetector.init({ + languageUtils: {}, +}); + +export const getPreferredLanguage = () => { + const detectedLanguages = languageDetector.detect(); + + const detectedLanguage = Array.isArray(detectedLanguages) + ? detectedLanguages[0] + : detectedLanguages; + + const initialLanguage = + (detectedLanguage + ? // region code may not be defined if user uses generic preferred language + // (e.g. chinese vs instead of chinese-simplified) + languages.find((lang) => lang.code.startsWith(detectedLanguage))?.code + : null) || defaultLang.code; + + return initialLanguage; +}; diff --git a/excalidraw-app/app-language/language-state.ts b/excalidraw-app/app-language/language-state.ts new file mode 100644 index 0000000..f491c22 --- /dev/null +++ b/excalidraw-app/app-language/language-state.ts @@ -0,0 +1,15 @@ +import { useEffect } from "react"; +import { atom, useAtom } from "../app-jotai"; +import { getPreferredLanguage, languageDetector } from "./language-detector"; + +export const appLangCodeAtom = atom(getPreferredLanguage()); + +export const useAppLangCode = () => { + const [langCode, setLangCode] = useAtom(appLangCodeAtom); + + useEffect(() => { + languageDetector.cacheUserLanguage(langCode); + }, [langCode]); + + return [langCode, setLangCode] as const; +}; diff --git a/excalidraw-app/app_constants.ts b/excalidraw-app/app_constants.ts new file mode 100644 index 0000000..461b4b7 --- /dev/null +++ b/excalidraw-app/app_constants.ts @@ -0,0 +1,59 @@ +// time constants (ms) +export const SAVE_TO_LOCAL_STORAGE_TIMEOUT = 300; +export const INITIAL_SCENE_UPDATE_TIMEOUT = 5000; +export const FILE_UPLOAD_TIMEOUT = 300; +export const LOAD_IMAGES_TIMEOUT = 500; +export const SYNC_FULL_SCENE_INTERVAL_MS = 20000; +export const SYNC_BROWSER_TABS_TIMEOUT = 50; +export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps +export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day + +export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB +// 1 year (https://stackoverflow.com/a/25201898/927631) +export const FILE_CACHE_MAX_AGE_SEC = 31536000; + +export const WS_EVENTS = { + SERVER_VOLATILE: "server-volatile-broadcast", + SERVER: "server-broadcast", + USER_FOLLOW_CHANGE: "user-follow", + USER_FOLLOW_ROOM_CHANGE: "user-follow-room-change", +} as const; + +export enum WS_SUBTYPES { + INVALID_RESPONSE = "INVALID_RESPONSE", + INIT = "SCENE_INIT", + UPDATE = "SCENE_UPDATE", + MOUSE_LOCATION = "MOUSE_LOCATION", + IDLE_STATUS = "IDLE_STATUS", + USER_VISIBLE_SCENE_BOUNDS = "USER_VISIBLE_SCENE_BOUNDS", +} + +export const FIREBASE_STORAGE_PREFIXES = { + shareLinkFiles: `/files/shareLinks`, + collabFiles: `/files/rooms`, +}; + +export const ROOM_ID_BYTES = 10; + +export const STORAGE_KEYS = { + LOCAL_STORAGE_ELEMENTS: "excalidraw", + LOCAL_STORAGE_APP_STATE: "excalidraw-state", + LOCAL_STORAGE_COLLAB: "excalidraw-collab", + LOCAL_STORAGE_THEME: "kj-diagramming-theme", + LOCAL_STORAGE_DEBUG: "excalidraw-debug", + VERSION_DATA_STATE: "version-dataState", + VERSION_FILES: "version-files", + + IDB_LIBRARY: "excalidraw-library", + + // do not use apart from migrations + __LEGACY_LOCAL_STORAGE_LIBRARY: "excalidraw-library", +} as const; + +export const COOKIES = { + AUTH_STATE_COOKIE: "excplus-auth", +} as const; + +export const isExcalidrawPlusSignedUser = document.cookie.includes( + COOKIES.AUTH_STATE_COOKIE, +); diff --git a/excalidraw-app/bug-issue-template.js b/excalidraw-app/bug-issue-template.js new file mode 100644 index 0000000..bc04886 --- /dev/null +++ b/excalidraw-app/bug-issue-template.js @@ -0,0 +1,11 @@ +export default (sentryErrorId) => ` +### Scene content + +\`\`\` +Paste scene content here +\`\`\` + +### Sentry Error ID + +${sentryErrorId} +`; diff --git a/excalidraw-app/collab/Collab.tsx b/excalidraw-app/collab/Collab.tsx new file mode 100644 index 0000000..9a16e05 --- /dev/null +++ b/excalidraw-app/collab/Collab.tsx @@ -0,0 +1,1018 @@ +import throttle from "lodash.throttle"; +import { PureComponent } from "react"; +import type { + BinaryFileData, + ExcalidrawImperativeAPI, + SocketId, + Collaborator, + Gesture, +} from "@excalidraw/excalidraw/types"; +import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog"; +import { APP_NAME, ENV, EVENT } from "@excalidraw/excalidraw/constants"; +import type { ImportedDataState } from "@excalidraw/excalidraw/data/types"; +import type { + ExcalidrawElement, + FileId, + InitializedExcalidrawImageElement, + OrderedExcalidrawElement, +} from "@excalidraw/excalidraw/element/types"; +import { + CaptureUpdateAction, + getSceneVersion, + restoreElements, + zoomToFitBounds, + reconcileElements, +} from "@excalidraw/excalidraw"; +import { + assertNever, + preventUnload, + resolvablePromise, + throttleRAF, +} from "@excalidraw/excalidraw/utils"; +import { + CURSOR_SYNC_TIMEOUT, + FILE_UPLOAD_MAX_BYTES, + FIREBASE_STORAGE_PREFIXES, + INITIAL_SCENE_UPDATE_TIMEOUT, + LOAD_IMAGES_TIMEOUT, + WS_SUBTYPES, + SYNC_FULL_SCENE_INTERVAL_MS, + WS_EVENTS, +} from "../app_constants"; +import type { + SocketUpdateDataSource, + SyncableExcalidrawElement, +} from "../data"; +import { + generateCollaborationLinkData, + getCollaborationLink, + getSyncableElements, +} from "../data"; +import { + isSavedToFirebase, + loadFilesFromFirebase, + loadFromFirebase, + saveFilesToFirebase, + saveToFirebase, +} from "../data/firebase"; +import { + importUsernameFromLocalStorage, + saveUsernameToLocalStorage, +} from "../data/localStorage"; +import Portal from "./Portal"; +import { t } from "@excalidraw/excalidraw/i18n"; +import { + IDLE_THRESHOLD, + ACTIVE_THRESHOLD, + UserIdleState, +} from "@excalidraw/excalidraw/constants"; +import { + encodeFilesForUpload, + FileManager, + updateStaleImageStatuses, +} from "../data/FileManager"; +import { AbortError } from "@excalidraw/excalidraw/errors"; +import { + isImageElement, + isInitializedImageElement, +} from "@excalidraw/excalidraw/element/typeChecks"; +import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement"; +import { decryptData } from "@excalidraw/excalidraw/data/encryption"; +import { resetBrowserStateVersions } from "../data/tabSync"; +import { LocalData } from "../data/LocalData"; +import { appJotaiStore, atom } from "../app-jotai"; +import type { Mutable, ValueOf } from "@excalidraw/excalidraw/utility-types"; +import { getVisibleSceneBounds } from "@excalidraw/excalidraw/element/bounds"; +import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils"; +import { collabErrorIndicatorAtom } from "./CollabError"; +import type { + ReconciledExcalidrawElement, + RemoteExcalidrawElement, +} from "@excalidraw/excalidraw/data/reconcile"; + +export const collabAPIAtom = atom<CollabAPI | null>(null); +export const isCollaboratingAtom = atom(false); +export const isOfflineAtom = atom(false); + +interface CollabState { + errorMessage: string | null; + /** errors related to saving */ + dialogNotifiedErrors: Record<string, boolean>; + username: string; + activeRoomLink: string | null; +} + +export const activeRoomLinkAtom = atom<string | null>(null); + +type CollabInstance = InstanceType<typeof Collab>; + +export interface CollabAPI { + /** function so that we can access the latest value from stale callbacks */ + isCollaborating: () => boolean; + onPointerUpdate: CollabInstance["onPointerUpdate"]; + startCollaboration: CollabInstance["startCollaboration"]; + stopCollaboration: CollabInstance["stopCollaboration"]; + syncElements: CollabInstance["syncElements"]; + fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"]; + setUsername: CollabInstance["setUsername"]; + getUsername: CollabInstance["getUsername"]; + getActiveRoomLink: CollabInstance["getActiveRoomLink"]; + setCollabError: CollabInstance["setErrorDialog"]; +} + +interface CollabProps { + excalidrawAPI: ExcalidrawImperativeAPI; +} + +class Collab extends PureComponent<CollabProps, CollabState> { + portal: Portal; + fileManager: FileManager; + excalidrawAPI: CollabProps["excalidrawAPI"]; + activeIntervalId: number | null; + idleTimeoutId: number | null; + + private socketInitializationTimer?: number; + private lastBroadcastedOrReceivedSceneVersion: number = -1; + private collaborators = new Map<SocketId, Collaborator>(); + + constructor(props: CollabProps) { + super(props); + this.state = { + errorMessage: null, + dialogNotifiedErrors: {}, + username: importUsernameFromLocalStorage() || "", + activeRoomLink: null, + }; + this.portal = new Portal(this); + this.fileManager = new FileManager({ + getFiles: async (fileIds) => { + const { roomId, roomKey } = this.portal; + if (!roomId || !roomKey) { + throw new AbortError(); + } + + return loadFilesFromFirebase(`files/rooms/${roomId}`, roomKey, fileIds); + }, + saveFiles: async ({ addedFiles }) => { + const { roomId, roomKey } = this.portal; + if (!roomId || !roomKey) { + throw new AbortError(); + } + + const { savedFiles, erroredFiles } = await saveFilesToFirebase({ + prefix: `${FIREBASE_STORAGE_PREFIXES.collabFiles}/${roomId}`, + files: await encodeFilesForUpload({ + files: addedFiles, + encryptionKey: roomKey, + maxBytes: FILE_UPLOAD_MAX_BYTES, + }), + }); + + return { + savedFiles: savedFiles.reduce( + (acc: Map<FileId, BinaryFileData>, id) => { + const fileData = addedFiles.get(id); + if (fileData) { + acc.set(id, fileData); + } + return acc; + }, + new Map(), + ), + erroredFiles: erroredFiles.reduce( + (acc: Map<FileId, BinaryFileData>, id) => { + const fileData = addedFiles.get(id); + if (fileData) { + acc.set(id, fileData); + } + return acc; + }, + new Map(), + ), + }; + }, + }); + this.excalidrawAPI = props.excalidrawAPI; + this.activeIntervalId = null; + this.idleTimeoutId = null; + } + + private onUmmount: (() => void) | null = null; + + componentDidMount() { + window.addEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload); + window.addEventListener("online", this.onOfflineStatusToggle); + window.addEventListener("offline", this.onOfflineStatusToggle); + window.addEventListener(EVENT.UNLOAD, this.onUnload); + + const unsubOnUserFollow = this.excalidrawAPI.onUserFollow((payload) => { + this.portal.socket && this.portal.broadcastUserFollowed(payload); + }); + const throttledRelayUserViewportBounds = throttleRAF( + this.relayVisibleSceneBounds, + ); + const unsubOnScrollChange = this.excalidrawAPI.onScrollChange(() => + throttledRelayUserViewportBounds(), + ); + this.onUmmount = () => { + unsubOnUserFollow(); + unsubOnScrollChange(); + }; + + this.onOfflineStatusToggle(); + + const collabAPI: CollabAPI = { + isCollaborating: this.isCollaborating, + onPointerUpdate: this.onPointerUpdate, + startCollaboration: this.startCollaboration, + syncElements: this.syncElements, + fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase, + stopCollaboration: this.stopCollaboration, + setUsername: this.setUsername, + getUsername: this.getUsername, + getActiveRoomLink: this.getActiveRoomLink, + setCollabError: this.setErrorDialog, + }; + + appJotaiStore.set(collabAPIAtom, collabAPI); + + if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) { + window.collab = window.collab || ({} as Window["collab"]); + Object.defineProperties(window, { + collab: { + configurable: true, + value: this, + }, + }); + } + } + + onOfflineStatusToggle = () => { + appJotaiStore.set(isOfflineAtom, !window.navigator.onLine); + }; + + componentWillUnmount() { + window.removeEventListener("online", this.onOfflineStatusToggle); + window.removeEventListener("offline", this.onOfflineStatusToggle); + window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload); + window.removeEventListener(EVENT.UNLOAD, this.onUnload); + window.removeEventListener(EVENT.POINTER_MOVE, this.onPointerMove); + window.removeEventListener( + EVENT.VISIBILITY_CHANGE, + this.onVisibilityChange, + ); + if (this.activeIntervalId) { + window.clearInterval(this.activeIntervalId); + this.activeIntervalId = null; + } + if (this.idleTimeoutId) { + window.clearTimeout(this.idleTimeoutId); + this.idleTimeoutId = null; + } + this.onUmmount?.(); + } + + isCollaborating = () => appJotaiStore.get(isCollaboratingAtom)!; + + private setIsCollaborating = (isCollaborating: boolean) => { + appJotaiStore.set(isCollaboratingAtom, isCollaborating); + }; + + private onUnload = () => { + this.destroySocketClient({ isUnload: true }); + }; + + private beforeUnload = withBatchedUpdates((event: BeforeUnloadEvent) => { + const syncableElements = getSyncableElements( + this.getSceneElementsIncludingDeleted(), + ); + + if ( + this.isCollaborating() && + (this.fileManager.shouldPreventUnload(syncableElements) || + !isSavedToFirebase(this.portal, syncableElements)) + ) { + // this won't run in time if user decides to leave the site, but + // the purpose is to run in immediately after user decides to stay + this.saveCollabRoomToFirebase(syncableElements); + + preventUnload(event); + } + }); + + saveCollabRoomToFirebase = async ( + syncableElements: readonly SyncableExcalidrawElement[], + ) => { + try { + const storedElements = await saveToFirebase( + this.portal, + syncableElements, + this.excalidrawAPI.getAppState(), + ); + + this.resetErrorIndicator(); + + if (this.isCollaborating() && storedElements) { + this.handleRemoteSceneUpdate(this._reconcileElements(storedElements)); + } + } catch (error: any) { + const errorMessage = /is longer than.*?bytes/.test(error.message) + ? t("errors.collabSaveFailed_sizeExceeded") + : t("errors.collabSaveFailed"); + + if ( + !this.state.dialogNotifiedErrors[errorMessage] || + !this.isCollaborating() + ) { + this.setErrorDialog(errorMessage); + this.setState({ + dialogNotifiedErrors: { + ...this.state.dialogNotifiedErrors, + [errorMessage]: true, + }, + }); + } + + if (this.isCollaborating()) { + this.setErrorIndicator(errorMessage); + } + + console.error(error); + } + }; + + stopCollaboration = (keepRemoteState = true) => { + this.queueBroadcastAllElements.cancel(); + this.queueSaveToFirebase.cancel(); + this.loadImageFiles.cancel(); + this.resetErrorIndicator(true); + + this.saveCollabRoomToFirebase( + getSyncableElements( + this.excalidrawAPI.getSceneElementsIncludingDeleted(), + ), + ); + + if (this.portal.socket && this.fallbackInitializationHandler) { + this.portal.socket.off( + "connect_error", + this.fallbackInitializationHandler, + ); + } + + if (!keepRemoteState) { + LocalData.fileStorage.reset(); + this.destroySocketClient(); + } else if (window.confirm(t("alerts.collabStopOverridePrompt"))) { + // hack to ensure that we prefer we disregard any new browser state + // that could have been saved in other tabs while we were collaborating + resetBrowserStateVersions(); + + window.history.pushState({}, APP_NAME, window.location.origin); + this.destroySocketClient(); + + LocalData.fileStorage.reset(); + + const elements = this.excalidrawAPI + .getSceneElementsIncludingDeleted() + .map((element) => { + if (isImageElement(element) && element.status === "saved") { + return newElementWith(element, { status: "pending" }); + } + return element; + }); + + this.excalidrawAPI.updateScene({ + elements, + captureUpdate: CaptureUpdateAction.NEVER, + }); + } + }; + + private destroySocketClient = (opts?: { isUnload: boolean }) => { + this.lastBroadcastedOrReceivedSceneVersion = -1; + this.portal.close(); + this.fileManager.reset(); + if (!opts?.isUnload) { + this.setIsCollaborating(false); + this.setActiveRoomLink(null); + this.collaborators = new Map(); + this.excalidrawAPI.updateScene({ + collaborators: this.collaborators, + }); + LocalData.resumeSave("collaboration"); + } + }; + + private fetchImageFilesFromFirebase = async (opts: { + elements: readonly ExcalidrawElement[]; + /** + * Indicates whether to fetch files that are errored or pending and older + * than 10 seconds. + * + * Use this as a mechanism to fetch files which may be ok but for some + * reason their status was not updated correctly. + */ + forceFetchFiles?: boolean; + }) => { + const unfetchedImages = opts.elements + .filter((element) => { + return ( + isInitializedImageElement(element) && + !this.fileManager.isFileTracked(element.fileId) && + !element.isDeleted && + (opts.forceFetchFiles + ? element.status !== "pending" || + Date.now() - element.updated > 10000 + : element.status === "saved") + ); + }) + .map((element) => (element as InitializedExcalidrawImageElement).fileId); + + return await this.fileManager.getFiles(unfetchedImages); + }; + + private decryptPayload = async ( + iv: Uint8Array, + encryptedData: ArrayBuffer, + decryptionKey: string, + ): Promise<ValueOf<SocketUpdateDataSource>> => { + try { + const decrypted = await decryptData(iv, encryptedData, decryptionKey); + + const decodedData = new TextDecoder("utf-8").decode( + new Uint8Array(decrypted), + ); + return JSON.parse(decodedData); + } catch (error) { + window.alert(t("alerts.decryptFailed")); + console.error(error); + return { + type: WS_SUBTYPES.INVALID_RESPONSE, + }; + } + }; + + private fallbackInitializationHandler: null | (() => any) = null; + + startCollaboration = async ( + existingRoomLinkData: null | { roomId: string; roomKey: string }, + ) => { + if (!this.state.username) { + import("@excalidraw/random-username").then(({ getRandomUsername }) => { + const username = getRandomUsername(); + this.setUsername(username); + }); + } + + if (this.portal.socket) { + return null; + } + + let roomId; + let roomKey; + + if (existingRoomLinkData) { + ({ roomId, roomKey } = existingRoomLinkData); + } else { + ({ roomId, roomKey } = await generateCollaborationLinkData()); + window.history.pushState( + {}, + APP_NAME, + getCollaborationLink({ roomId, roomKey }), + ); + } + + // TODO: `ImportedDataState` type here seems abused + const scenePromise = resolvablePromise< + | (ImportedDataState & { elements: readonly OrderedExcalidrawElement[] }) + | null + >(); + + this.setIsCollaborating(true); + LocalData.pauseSave("collaboration"); + + const { default: socketIOClient } = await import( + /* webpackChunkName: "socketIoClient" */ "socket.io-client" + ); + + const fallbackInitializationHandler = () => { + this.initializeRoom({ + roomLinkData: existingRoomLinkData, + fetchScene: true, + }).then((scene) => { + scenePromise.resolve(scene); + }); + }; + this.fallbackInitializationHandler = fallbackInitializationHandler; + + try { + this.portal.socket = this.portal.open( + socketIOClient(import.meta.env.VITE_APP_WS_SERVER_URL, { + transports: ["websocket", "polling"], + }), + roomId, + roomKey, + ); + + this.portal.socket.once("connect_error", fallbackInitializationHandler); + } catch (error: any) { + console.error(error); + this.setErrorDialog(error.message); + return null; + } + + if (!existingRoomLinkData) { + const elements = this.excalidrawAPI.getSceneElements().map((element) => { + if (isImageElement(element) && element.status === "saved") { + return newElementWith(element, { status: "pending" }); + } + return element; + }); + // remove deleted elements from elements array to ensure we don't + // expose potentially sensitive user data in case user manually deletes + // existing elements (or clears scene), which would otherwise be persisted + // to database even if deleted before creating the room. + this.excalidrawAPI.updateScene({ + elements, + captureUpdate: CaptureUpdateAction.NEVER, + }); + + this.saveCollabRoomToFirebase(getSyncableElements(elements)); + } + + // fallback in case you're not alone in the room but still don't receive + // initial SCENE_INIT message + this.socketInitializationTimer = window.setTimeout( + fallbackInitializationHandler, + INITIAL_SCENE_UPDATE_TIMEOUT, + ); + + // All socket listeners are moving to Portal + this.portal.socket.on( + "client-broadcast", + async (encryptedData: ArrayBuffer, iv: Uint8Array) => { + if (!this.portal.roomKey) { + return; + } + + const decryptedData = await this.decryptPayload( + iv, + encryptedData, + this.portal.roomKey, + ); + + switch (decryptedData.type) { + case WS_SUBTYPES.INVALID_RESPONSE: + return; + case WS_SUBTYPES.INIT: { + if (!this.portal.socketInitialized) { + this.initializeRoom({ fetchScene: false }); + const remoteElements = decryptedData.payload.elements; + const reconciledElements = + this._reconcileElements(remoteElements); + this.handleRemoteSceneUpdate(reconciledElements); + // noop if already resolved via init from firebase + scenePromise.resolve({ + elements: reconciledElements, + scrollToContent: true, + }); + } + break; + } + case WS_SUBTYPES.UPDATE: + this.handleRemoteSceneUpdate( + this._reconcileElements(decryptedData.payload.elements), + ); + break; + case WS_SUBTYPES.MOUSE_LOCATION: { + const { pointer, button, username, selectedElementIds } = + decryptedData.payload; + + const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] = + decryptedData.payload.socketId || + // @ts-ignore legacy, see #2094 (#2097) + decryptedData.payload.socketID; + + this.updateCollaborator(socketId, { + pointer, + button, + selectedElementIds, + username, + }); + + break; + } + + case WS_SUBTYPES.USER_VISIBLE_SCENE_BOUNDS: { + const { sceneBounds, socketId } = decryptedData.payload; + + const appState = this.excalidrawAPI.getAppState(); + + // we're not following the user + // (shouldn't happen, but could be late message or bug upstream) + if (appState.userToFollow?.socketId !== socketId) { + console.warn( + `receiving remote client's (from ${socketId}) viewport bounds even though we're not subscribed to it!`, + ); + return; + } + + // cross-follow case, ignore updates in this case + if ( + appState.userToFollow && + appState.followedBy.has(appState.userToFollow.socketId) + ) { + return; + } + + this.excalidrawAPI.updateScene({ + appState: zoomToFitBounds({ + appState, + bounds: sceneBounds, + fitToViewport: true, + viewportZoomFactor: 1, + }).appState, + }); + + break; + } + + case WS_SUBTYPES.IDLE_STATUS: { + const { userState, socketId, username } = decryptedData.payload; + this.updateCollaborator(socketId, { + userState, + username, + }); + break; + } + + default: { + assertNever(decryptedData, null); + } + } + }, + ); + + this.portal.socket.on("first-in-room", async () => { + if (this.portal.socket) { + this.portal.socket.off("first-in-room"); + } + const sceneData = await this.initializeRoom({ + fetchScene: true, + roomLinkData: existingRoomLinkData, + }); + scenePromise.resolve(sceneData); + }); + + this.portal.socket.on( + WS_EVENTS.USER_FOLLOW_ROOM_CHANGE, + (followedBy: SocketId[]) => { + this.excalidrawAPI.updateScene({ + appState: { followedBy: new Set(followedBy) }, + }); + + this.relayVisibleSceneBounds({ force: true }); + }, + ); + + this.initializeIdleDetector(); + + this.setActiveRoomLink(window.location.href); + + return scenePromise; + }; + + private initializeRoom = async ({ + fetchScene, + roomLinkData, + }: + | { + fetchScene: true; + roomLinkData: { roomId: string; roomKey: string } | null; + } + | { fetchScene: false; roomLinkData?: null }) => { + clearTimeout(this.socketInitializationTimer!); + if (this.portal.socket && this.fallbackInitializationHandler) { + this.portal.socket.off( + "connect_error", + this.fallbackInitializationHandler, + ); + } + if (fetchScene && roomLinkData && this.portal.socket) { + this.excalidrawAPI.resetScene(); + + try { + const elements = await loadFromFirebase( + roomLinkData.roomId, + roomLinkData.roomKey, + this.portal.socket, + ); + if (elements) { + this.setLastBroadcastedOrReceivedSceneVersion( + getSceneVersion(elements), + ); + + return { + elements, + scrollToContent: true, + }; + } + } catch (error: any) { + // log the error and move on. other peers will sync us the scene. + console.error(error); + } finally { + this.portal.socketInitialized = true; + } + } else { + this.portal.socketInitialized = true; + } + return null; + }; + + private _reconcileElements = ( + remoteElements: readonly ExcalidrawElement[], + ): ReconciledExcalidrawElement[] => { + const localElements = this.getSceneElementsIncludingDeleted(); + const appState = this.excalidrawAPI.getAppState(); + const restoredRemoteElements = restoreElements(remoteElements, null); + const reconciledElements = reconcileElements( + localElements, + restoredRemoteElements as RemoteExcalidrawElement[], + appState, + ); + + // Avoid broadcasting to the rest of the collaborators the scene + // we just received! + // Note: this needs to be set before updating the scene as it + // synchronously calls render. + this.setLastBroadcastedOrReceivedSceneVersion( + getSceneVersion(reconciledElements), + ); + + return reconciledElements; + }; + + private loadImageFiles = throttle(async () => { + const { loadedFiles, erroredFiles } = + await this.fetchImageFilesFromFirebase({ + elements: this.excalidrawAPI.getSceneElementsIncludingDeleted(), + }); + + this.excalidrawAPI.addFiles(loadedFiles); + + updateStaleImageStatuses({ + excalidrawAPI: this.excalidrawAPI, + erroredFiles, + elements: this.excalidrawAPI.getSceneElementsIncludingDeleted(), + }); + }, LOAD_IMAGES_TIMEOUT); + + private handleRemoteSceneUpdate = ( + elements: ReconciledExcalidrawElement[], + ) => { + this.excalidrawAPI.updateScene({ + elements, + captureUpdate: CaptureUpdateAction.NEVER, + }); + + this.loadImageFiles(); + }; + + private onPointerMove = () => { + if (this.idleTimeoutId) { + window.clearTimeout(this.idleTimeoutId); + this.idleTimeoutId = null; + } + + this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD); + + if (!this.activeIntervalId) { + this.activeIntervalId = window.setInterval( + this.reportActive, + ACTIVE_THRESHOLD, + ); + } + }; + + private onVisibilityChange = () => { + if (document.hidden) { + if (this.idleTimeoutId) { + window.clearTimeout(this.idleTimeoutId); + this.idleTimeoutId = null; + } + if (this.activeIntervalId) { + window.clearInterval(this.activeIntervalId); + this.activeIntervalId = null; + } + this.onIdleStateChange(UserIdleState.AWAY); + } else { + this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD); + this.activeIntervalId = window.setInterval( + this.reportActive, + ACTIVE_THRESHOLD, + ); + this.onIdleStateChange(UserIdleState.ACTIVE); + } + }; + + private reportIdle = () => { + this.onIdleStateChange(UserIdleState.IDLE); + if (this.activeIntervalId) { + window.clearInterval(this.activeIntervalId); + this.activeIntervalId = null; + } + }; + + private reportActive = () => { + this.onIdleStateChange(UserIdleState.ACTIVE); + }; + + private initializeIdleDetector = () => { + document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove); + document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange); + }; + + setCollaborators(sockets: SocketId[]) { + const collaborators: InstanceType<typeof Collab>["collaborators"] = + new Map(); + for (const socketId of sockets) { + collaborators.set( + socketId, + Object.assign({}, this.collaborators.get(socketId), { + isCurrentUser: socketId === this.portal.socket?.id, + }), + ); + } + this.collaborators = collaborators; + this.excalidrawAPI.updateScene({ collaborators }); + } + + updateCollaborator = (socketId: SocketId, updates: Partial<Collaborator>) => { + const collaborators = new Map(this.collaborators); + const user: Mutable<Collaborator> = Object.assign( + {}, + collaborators.get(socketId), + updates, + { + isCurrentUser: socketId === this.portal.socket?.id, + }, + ); + collaborators.set(socketId, user); + this.collaborators = collaborators; + + this.excalidrawAPI.updateScene({ + collaborators, + }); + }; + + public setLastBroadcastedOrReceivedSceneVersion = (version: number) => { + this.lastBroadcastedOrReceivedSceneVersion = version; + }; + + public getLastBroadcastedOrReceivedSceneVersion = () => { + return this.lastBroadcastedOrReceivedSceneVersion; + }; + + public getSceneElementsIncludingDeleted = () => { + return this.excalidrawAPI.getSceneElementsIncludingDeleted(); + }; + + onPointerUpdate = throttle( + (payload: { + pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"]; + button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"]; + pointersMap: Gesture["pointers"]; + }) => { + payload.pointersMap.size < 2 && + this.portal.socket && + this.portal.broadcastMouseLocation(payload); + }, + CURSOR_SYNC_TIMEOUT, + ); + + relayVisibleSceneBounds = (props?: { force: boolean }) => { + const appState = this.excalidrawAPI.getAppState(); + + if (this.portal.socket && (appState.followedBy.size > 0 || props?.force)) { + this.portal.broadcastVisibleSceneBounds( + { + sceneBounds: getVisibleSceneBounds(appState), + }, + `follow@${this.portal.socket.id}`, + ); + } + }; + + onIdleStateChange = (userState: UserIdleState) => { + this.portal.broadcastIdleChange(userState); + }; + + broadcastElements = (elements: readonly OrderedExcalidrawElement[]) => { + if ( + getSceneVersion(elements) > + this.getLastBroadcastedOrReceivedSceneVersion() + ) { + this.portal.broadcastScene(WS_SUBTYPES.UPDATE, elements, false); + this.lastBroadcastedOrReceivedSceneVersion = getSceneVersion(elements); + this.queueBroadcastAllElements(); + } + }; + + syncElements = (elements: readonly OrderedExcalidrawElement[]) => { + this.broadcastElements(elements); + this.queueSaveToFirebase(); + }; + + queueBroadcastAllElements = throttle(() => { + this.portal.broadcastScene( + WS_SUBTYPES.UPDATE, + this.excalidrawAPI.getSceneElementsIncludingDeleted(), + true, + ); + const currentVersion = this.getLastBroadcastedOrReceivedSceneVersion(); + const newVersion = Math.max( + currentVersion, + getSceneVersion(this.getSceneElementsIncludingDeleted()), + ); + this.setLastBroadcastedOrReceivedSceneVersion(newVersion); + }, SYNC_FULL_SCENE_INTERVAL_MS); + + queueSaveToFirebase = throttle( + () => { + if (this.portal.socketInitialized) { + this.saveCollabRoomToFirebase( + getSyncableElements( + this.excalidrawAPI.getSceneElementsIncludingDeleted(), + ), + ); + } + }, + SYNC_FULL_SCENE_INTERVAL_MS, + { leading: false }, + ); + + setUsername = (username: string) => { + this.setState({ username }); + saveUsernameToLocalStorage(username); + }; + + getUsername = () => this.state.username; + + setActiveRoomLink = (activeRoomLink: string | null) => { + this.setState({ activeRoomLink }); + appJotaiStore.set(activeRoomLinkAtom, activeRoomLink); + }; + + getActiveRoomLink = () => this.state.activeRoomLink; + + setErrorIndicator = (errorMessage: string | null) => { + appJotaiStore.set(collabErrorIndicatorAtom, { + message: errorMessage, + nonce: Date.now(), + }); + }; + + resetErrorIndicator = (resetDialogNotifiedErrors = false) => { + appJotaiStore.set(collabErrorIndicatorAtom, { message: null, nonce: 0 }); + if (resetDialogNotifiedErrors) { + this.setState({ + dialogNotifiedErrors: {}, + }); + } + }; + + setErrorDialog = (errorMessage: string | null) => { + this.setState({ + errorMessage, + }); + }; + + render() { + const { errorMessage } = this.state; + + return ( + <> + {errorMessage != null && ( + <ErrorDialog onClose={() => this.setErrorDialog(null)}> + {errorMessage} + </ErrorDialog> + )} + </> + ); + } +} + +declare global { + interface Window { + collab: InstanceType<typeof Collab>; + } +} + +if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) { + window.collab = window.collab || ({} as Window["collab"]); +} + +export default Collab; + +export type TCollabClass = Collab; diff --git a/excalidraw-app/collab/CollabError.scss b/excalidraw-app/collab/CollabError.scss new file mode 100644 index 0000000..bb774d0 --- /dev/null +++ b/excalidraw-app/collab/CollabError.scss @@ -0,0 +1,35 @@ +@import "../../packages/excalidraw/css/variables.module.scss"; + +.excalidraw { + .collab-errors-button { + width: 26px; + height: 26px; + margin-inline-end: 1rem; + + color: var(--color-danger); + + flex-shrink: 0; + } + + .collab-errors-button-shake { + animation: strong-shake 0.15s 6; + } + + @keyframes strong-shake { + 0% { + transform: rotate(0deg); + } + 25% { + transform: rotate(10deg); + } + 50% { + transform: rotate(0deg); + } + 75% { + transform: rotate(-10deg); + } + 100% { + transform: rotate(0deg); + } + } +} diff --git a/excalidraw-app/collab/CollabError.tsx b/excalidraw-app/collab/CollabError.tsx new file mode 100644 index 0000000..76828cf --- /dev/null +++ b/excalidraw-app/collab/CollabError.tsx @@ -0,0 +1,54 @@ +import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip"; +import { warning } from "@excalidraw/excalidraw/components/icons"; +import clsx from "clsx"; +import { useEffect, useRef, useState } from "react"; +import { atom } from "../app-jotai"; + +import "./CollabError.scss"; + +type ErrorIndicator = { + message: string | null; + /** used to rerun the useEffect responsible for animation */ + nonce: number; +}; + +export const collabErrorIndicatorAtom = atom<ErrorIndicator>({ + message: null, + nonce: 0, +}); + +const CollabError = ({ collabError }: { collabError: ErrorIndicator }) => { + const [isAnimating, setIsAnimating] = useState(false); + const clearAnimationRef = useRef<string | number>(0); + + useEffect(() => { + setIsAnimating(true); + clearAnimationRef.current = window.setTimeout(() => { + setIsAnimating(false); + }, 1000); + + return () => { + window.clearTimeout(clearAnimationRef.current); + }; + }, [collabError.message, collabError.nonce]); + + if (!collabError.message) { + return null; + } + + return ( + <Tooltip label={collabError.message} long={true}> + <div + className={clsx("collab-errors-button", { + "collab-errors-button-shake": isAnimating, + })} + > + {warning} + </div> + </Tooltip> + ); +}; + +CollabError.displayName = "CollabError"; + +export default CollabError; diff --git a/excalidraw-app/collab/Portal.tsx b/excalidraw-app/collab/Portal.tsx new file mode 100644 index 0000000..1788d39 --- /dev/null +++ b/excalidraw-app/collab/Portal.tsx @@ -0,0 +1,256 @@ +import type { + SocketUpdateData, + SocketUpdateDataSource, + SyncableExcalidrawElement, +} from "../data"; +import { isSyncableElement } from "../data"; + +import type { TCollabClass } from "./Collab"; + +import type { OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types"; +import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants"; +import type { + OnUserFollowedPayload, + SocketId, +} from "@excalidraw/excalidraw/types"; +import type { UserIdleState } from "@excalidraw/excalidraw/constants"; +import { trackEvent } from "@excalidraw/excalidraw/analytics"; +import throttle from "lodash.throttle"; +import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement"; +import { encryptData } from "@excalidraw/excalidraw/data/encryption"; +import type { Socket } from "socket.io-client"; +import { CaptureUpdateAction } from "@excalidraw/excalidraw"; + +class Portal { + collab: TCollabClass; + socket: Socket | null = null; + socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized + roomId: string | null = null; + roomKey: string | null = null; + broadcastedElementVersions: Map<string, number> = new Map(); + + constructor(collab: TCollabClass) { + this.collab = collab; + } + + open(socket: Socket, id: string, key: string) { + this.socket = socket; + this.roomId = id; + this.roomKey = key; + + // Initialize socket listeners + this.socket.on("init-room", () => { + if (this.socket) { + this.socket.emit("join-room", this.roomId); + trackEvent("share", "room joined"); + } + }); + this.socket.on("new-user", async (_socketId: string) => { + this.broadcastScene( + WS_SUBTYPES.INIT, + this.collab.getSceneElementsIncludingDeleted(), + /* syncAll */ true, + ); + }); + this.socket.on("room-user-change", (clients: SocketId[]) => { + this.collab.setCollaborators(clients); + }); + + return socket; + } + + close() { + if (!this.socket) { + return; + } + this.queueFileUpload.flush(); + this.socket.close(); + this.socket = null; + this.roomId = null; + this.roomKey = null; + this.socketInitialized = false; + this.broadcastedElementVersions = new Map(); + } + + isOpen() { + return !!( + this.socketInitialized && + this.socket && + this.roomId && + this.roomKey + ); + } + + async _broadcastSocketData( + data: SocketUpdateData, + volatile: boolean = false, + roomId?: string, + ) { + if (this.isOpen()) { + const json = JSON.stringify(data); + const encoded = new TextEncoder().encode(json); + const { encryptedBuffer, iv } = await encryptData(this.roomKey!, encoded); + + this.socket?.emit( + volatile ? WS_EVENTS.SERVER_VOLATILE : WS_EVENTS.SERVER, + roomId ?? this.roomId, + encryptedBuffer, + iv, + ); + } + } + + queueFileUpload = throttle(async () => { + try { + await this.collab.fileManager.saveFiles({ + elements: this.collab.excalidrawAPI.getSceneElementsIncludingDeleted(), + files: this.collab.excalidrawAPI.getFiles(), + }); + } catch (error: any) { + if (error.name !== "AbortError") { + this.collab.excalidrawAPI.updateScene({ + appState: { + errorMessage: error.message, + }, + }); + } + } + + let isChanged = false; + const newElements = this.collab.excalidrawAPI + .getSceneElementsIncludingDeleted() + .map((element) => { + if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) { + isChanged = true; + // this will signal collaborators to pull image data from server + // (using mutation instead of newElementWith otherwise it'd break + // in-progress dragging) + return newElementWith(element, { status: "saved" }); + } + return element; + }); + + if (isChanged) { + this.collab.excalidrawAPI.updateScene({ + elements: newElements, + captureUpdate: CaptureUpdateAction.NEVER, + }); + } + }, FILE_UPLOAD_TIMEOUT); + + broadcastScene = async ( + updateType: WS_SUBTYPES.INIT | WS_SUBTYPES.UPDATE, + elements: readonly OrderedExcalidrawElement[], + syncAll: boolean, + ) => { + if (updateType === WS_SUBTYPES.INIT && !syncAll) { + throw new Error("syncAll must be true when sending SCENE.INIT"); + } + + // sync out only the elements we think we need to to save bandwidth. + // periodically we'll resync the whole thing to make sure no one diverges + // due to a dropped message (server goes down etc). + const syncableElements = elements.reduce((acc, element) => { + if ( + (syncAll || + !this.broadcastedElementVersions.has(element.id) || + element.version > this.broadcastedElementVersions.get(element.id)!) && + isSyncableElement(element) + ) { + acc.push(element); + } + return acc; + }, [] as SyncableExcalidrawElement[]); + + const data: SocketUpdateDataSource[typeof updateType] = { + type: updateType, + payload: { + elements: syncableElements, + }, + }; + + for (const syncableElement of syncableElements) { + this.broadcastedElementVersions.set( + syncableElement.id, + syncableElement.version, + ); + } + + this.queueFileUpload(); + + await this._broadcastSocketData(data as SocketUpdateData); + }; + + broadcastIdleChange = (userState: UserIdleState) => { + if (this.socket?.id) { + const data: SocketUpdateDataSource["IDLE_STATUS"] = { + type: WS_SUBTYPES.IDLE_STATUS, + payload: { + socketId: this.socket.id as SocketId, + userState, + username: this.collab.state.username, + }, + }; + return this._broadcastSocketData( + data as SocketUpdateData, + true, // volatile + ); + } + }; + + broadcastMouseLocation = (payload: { + pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"]; + button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"]; + }) => { + if (this.socket?.id) { + const data: SocketUpdateDataSource["MOUSE_LOCATION"] = { + type: WS_SUBTYPES.MOUSE_LOCATION, + payload: { + socketId: this.socket.id as SocketId, + pointer: payload.pointer, + button: payload.button || "up", + selectedElementIds: + this.collab.excalidrawAPI.getAppState().selectedElementIds, + username: this.collab.state.username, + }, + }; + + return this._broadcastSocketData( + data as SocketUpdateData, + true, // volatile + ); + } + }; + + broadcastVisibleSceneBounds = ( + payload: { + sceneBounds: SocketUpdateDataSource["USER_VISIBLE_SCENE_BOUNDS"]["payload"]["sceneBounds"]; + }, + roomId: string, + ) => { + if (this.socket?.id) { + const data: SocketUpdateDataSource["USER_VISIBLE_SCENE_BOUNDS"] = { + type: WS_SUBTYPES.USER_VISIBLE_SCENE_BOUNDS, + payload: { + socketId: this.socket.id as SocketId, + username: this.collab.state.username, + sceneBounds: payload.sceneBounds, + }, + }; + + return this._broadcastSocketData( + data as SocketUpdateData, + true, // volatile + roomId, + ); + } + }; + + broadcastUserFollowed = (payload: OnUserFollowedPayload) => { + if (this.socket?.id) { + this.socket.emit(WS_EVENTS.USER_FOLLOW_CHANGE, payload); + } + }; +} + +export default Portal; diff --git a/excalidraw-app/components/AI.tsx b/excalidraw-app/components/AI.tsx new file mode 100644 index 0000000..ba13849 --- /dev/null +++ b/excalidraw-app/components/AI.tsx @@ -0,0 +1,159 @@ +import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types"; +import { + DiagramToCodePlugin, + exportToBlob, + getTextFromElements, + MIME_TYPES, + TTDDialog, +} from "@excalidraw/excalidraw"; +import { getDataURL } from "@excalidraw/excalidraw/data/blob"; +import { safelyParseJSON } from "@excalidraw/excalidraw/utils"; + +export const AIComponents = ({ + excalidrawAPI, +}: { + excalidrawAPI: ExcalidrawImperativeAPI; +}) => { + return ( + <> + <DiagramToCodePlugin + generate={async ({ frame, children }) => { + const appState = excalidrawAPI.getAppState(); + + const blob = await exportToBlob({ + elements: children, + appState: { + ...appState, + exportBackground: true, + viewBackgroundColor: appState.viewBackgroundColor, + }, + exportingFrame: frame, + files: excalidrawAPI.getFiles(), + mimeType: MIME_TYPES.jpg, + }); + + const dataURL = await getDataURL(blob); + + const textFromFrameChildren = getTextFromElements(children); + + const response = await fetch( + `${ + import.meta.env.VITE_APP_AI_BACKEND + }/v1/ai/diagram-to-code/generate`, + { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + texts: textFromFrameChildren, + image: dataURL, + theme: appState.theme, + }), + }, + ); + + if (!response.ok) { + const text = await response.text(); + const errorJSON = safelyParseJSON(text); + + if (!errorJSON) { + throw new Error(text); + } + + if (errorJSON.statusCode === 429) { + return { + html: `<html> + <body style="margin: 0; text-align: center"> + <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; padding: 0 60px"> + <div style="color:red">Too many requests today,</br>please try again tomorrow!</div> + </br> + </br> + <div>You can also try <a href="${ + import.meta.env.VITE_APP_PLUS_LP + }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noreferrer noopener">kj-diagramming cloud</a> to get more requests.</div> + </div> + </body> + </html>`, + }; + } + + throw new Error(errorJSON.message || text); + } + + try { + const { html } = await response.json(); + + if (!html) { + throw new Error("Generation failed (invalid response)"); + } + return { + html, + }; + } catch (error: any) { + throw new Error("Generation failed (invalid response)"); + } + }} + /> + + <TTDDialog + onTextSubmit={async (input) => { + try { + const response = await fetch( + `${ + import.meta.env.VITE_APP_AI_BACKEND + }/v1/ai/text-to-diagram/generate`, + { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ prompt: input }), + }, + ); + + const rateLimit = response.headers.has("X-Ratelimit-Limit") + ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10) + : undefined; + + const rateLimitRemaining = response.headers.has( + "X-Ratelimit-Remaining", + ) + ? parseInt( + response.headers.get("X-Ratelimit-Remaining") || "0", + 10, + ) + : undefined; + + const json = await response.json(); + + if (!response.ok) { + if (response.status === 429) { + return { + rateLimit, + rateLimitRemaining, + error: new Error( + "Too many requests today, please try again tomorrow!", + ), + }; + } + + throw new Error(json.message || "Generation failed..."); + } + + const generatedResponse = json.generatedResponse; + if (!generatedResponse) { + throw new Error("Generation failed..."); + } + + return { generatedResponse, rateLimit, rateLimitRemaining }; + } catch (err: any) { + throw new Error("Request failed"); + } + }} + /> + </> + ); +}; diff --git a/excalidraw-app/components/AppFooter.tsx b/excalidraw-app/components/AppFooter.tsx new file mode 100644 index 0000000..e81df7c --- /dev/null +++ b/excalidraw-app/components/AppFooter.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Footer } from "@excalidraw/excalidraw/index"; +import { EncryptedIcon } from "./EncryptedIcon"; +import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink"; +import { isExcalidrawPlusSignedUser } from "../app_constants"; +import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas"; + +export const AppFooter = React.memo( + ({ onChange }: { onChange: () => void }) => { + return ( + <Footer> + <div + style={{ + display: "flex", + gap: ".5rem", + alignItems: "center", + }} + > + {isVisualDebuggerEnabled() && <DebugFooter onChange={onChange} />} + {isExcalidrawPlusSignedUser ? ( + <ExcalidrawPlusAppLink /> + ) : ( + <EncryptedIcon /> + )} + </div> + </Footer> + ); + }, +); diff --git a/excalidraw-app/components/AppMainMenu.tsx b/excalidraw-app/components/AppMainMenu.tsx new file mode 100644 index 0000000..426ec69 --- /dev/null +++ b/excalidraw-app/components/AppMainMenu.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { + loginIcon, + ExcalLogo, + eyeIcon, +} from "@excalidraw/excalidraw/components/icons"; +import type { Theme } from "@excalidraw/excalidraw/element/types"; +import { MainMenu } from "@excalidraw/excalidraw/index"; +import { isExcalidrawPlusSignedUser } from "../app_constants"; +import { LanguageList } from "../app-language/LanguageList"; +import { saveDebugState } from "./DebugCanvas"; + +export const AppMainMenu: React.FC<{ + onCollabDialogOpen: () => any; + isCollaborating: boolean; + isCollabEnabled: boolean; + theme: Theme | "system"; + setTheme: (theme: Theme | "system") => void; + refresh: () => void; +}> = React.memo((props) => { + return ( + <MainMenu> + <MainMenu.DefaultItems.LoadScene /> + <MainMenu.DefaultItems.SaveToActiveFile /> + <MainMenu.DefaultItems.Export /> + <MainMenu.DefaultItems.SaveAsImage /> + {props.isCollabEnabled && ( + <MainMenu.DefaultItems.LiveCollaborationTrigger + isCollaborating={props.isCollaborating} + onSelect={() => props.onCollabDialogOpen()} + /> + )} + <MainMenu.DefaultItems.CommandPalette className="highlighted" /> + <MainMenu.DefaultItems.SearchMenu /> + <MainMenu.DefaultItems.Help /> + <MainMenu.DefaultItems.ClearCanvas /> + <MainMenu.Separator /> + <MainMenu.ItemLink + icon={ExcalLogo} + href={`${ + import.meta.env.VITE_APP_PLUS_LP + }/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger`} + className="" + > + kj-diagramming cloud + </MainMenu.ItemLink> + <MainMenu.DefaultItems.Socials /> + <MainMenu.ItemLink + icon={loginIcon} + href={`${import.meta.env.VITE_APP_PLUS_APP}${ + isExcalidrawPlusSignedUser ? "" : "/sign-up" + }?utm_source=signin&utm_medium=app&utm_content=hamburger`} + className="highlighted" + > + {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"} + </MainMenu.ItemLink> + {import.meta.env.DEV && ( + <MainMenu.Item + icon={eyeIcon} + onClick={() => { + if (window.visualDebug) { + delete window.visualDebug; + saveDebugState({ enabled: false }); + } else { + window.visualDebug = { data: [] }; + saveDebugState({ enabled: true }); + } + props?.refresh(); + }} + > + Visual Debug + </MainMenu.Item> + )} + <MainMenu.Separator /> + <MainMenu.DefaultItems.ToggleTheme + allowSystemTheme + theme={props.theme} + onSelect={props.setTheme} + /> + <MainMenu.ItemCustom> + <LanguageList style={{ width: "100%" }} /> + </MainMenu.ItemCustom> + <MainMenu.DefaultItems.ChangeCanvasBackground /> + </MainMenu> + ); +}); diff --git a/excalidraw-app/components/AppWelcomeScreen.tsx b/excalidraw-app/components/AppWelcomeScreen.tsx new file mode 100644 index 0000000..139a951 --- /dev/null +++ b/excalidraw-app/components/AppWelcomeScreen.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import { loginIcon } from "@excalidraw/excalidraw/components/icons"; +import { useI18n } from "@excalidraw/excalidraw/i18n"; +import { WelcomeScreen } from "@excalidraw/excalidraw/index"; +import { isExcalidrawPlusSignedUser } from "../app_constants"; +import { POINTER_EVENTS } from "@excalidraw/excalidraw/constants"; + +export const AppWelcomeScreen: React.FC<{ + onCollabDialogOpen: () => any; + isCollabEnabled: boolean; +}> = React.memo((props) => { + const { t } = useI18n(); + let headingContent; + + if (isExcalidrawPlusSignedUser) { + headingContent = t("welcomeScreen.app.center_heading_plus") + .split(/(kj-diagramming)/) + .map((bit, idx) => { + if (bit === "kj-diagramming") { + return ( + <a + style={{ pointerEvents: POINTER_EVENTS.inheritFromUI }} + href={`${ + import.meta.env.VITE_APP_PLUS_APP + }?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`} + key={idx} + > + kj-diagramming + </a> + ); + } + return bit; + }); + } else { + headingContent = t("welcomeScreen.app.center_heading"); + } + + return ( + <WelcomeScreen> + <WelcomeScreen.Hints.MenuHint> + {t("welcomeScreen.app.menuHint")} + </WelcomeScreen.Hints.MenuHint> + <WelcomeScreen.Hints.ToolbarHint /> + <WelcomeScreen.Hints.HelpHint /> + <WelcomeScreen.Center> + <WelcomeScreen.Center.Heading> + {headingContent} + </WelcomeScreen.Center.Heading> + <WelcomeScreen.Center.Menu> + <WelcomeScreen.Center.MenuItemLoadScene /> + <WelcomeScreen.Center.MenuItemHelp /> + {props.isCollabEnabled && ( + <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger + onSelect={() => props.onCollabDialogOpen()} + /> + )} + {!isExcalidrawPlusSignedUser && ( + <WelcomeScreen.Center.MenuItemLink + href={`${ + import.meta.env.VITE_APP_PLUS_LP + }/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest`} + shortcut={null} + icon={loginIcon} + > + Sign up + </WelcomeScreen.Center.MenuItemLink> + )} + </WelcomeScreen.Center.Menu> + </WelcomeScreen.Center> + </WelcomeScreen> + ); +}); diff --git a/excalidraw-app/components/DebugCanvas.tsx b/excalidraw-app/components/DebugCanvas.tsx new file mode 100644 index 0000000..31898ba --- /dev/null +++ b/excalidraw-app/components/DebugCanvas.tsx @@ -0,0 +1,344 @@ +import { useCallback, useImperativeHandle, useRef } from "react"; +import { type AppState } from "@excalidraw/excalidraw/types"; +import { throttleRAF } from "@excalidraw/excalidraw/utils"; +import { + bootstrapCanvas, + getNormalizedCanvasDimensions, +} from "@excalidraw/excalidraw/renderer/helpers"; +import type { DebugElement } from "@excalidraw/excalidraw/visualdebug"; +import { + ArrowheadArrowIcon, + CloseIcon, + TrashIcon, +} from "@excalidraw/excalidraw/components/icons"; +import { STORAGE_KEYS } from "../app_constants"; +import type { Curve } from "../../packages/math"; +import { + isLineSegment, + type GlobalPoint, + type LineSegment, +} from "../../packages/math"; +import { isCurve } from "../../packages/math/curve"; + +const renderLine = ( + context: CanvasRenderingContext2D, + zoom: number, + segment: LineSegment<GlobalPoint>, + color: string, +) => { + context.save(); + context.strokeStyle = color; + context.beginPath(); + context.moveTo(segment[0][0] * zoom, segment[0][1] * zoom); + context.lineTo(segment[1][0] * zoom, segment[1][1] * zoom); + context.stroke(); + context.restore(); +}; + +const renderCubicBezier = ( + context: CanvasRenderingContext2D, + zoom: number, + [start, control1, control2, end]: Curve<GlobalPoint>, + color: string, +) => { + context.save(); + context.strokeStyle = color; + context.beginPath(); + context.moveTo(start[0] * zoom, start[1] * zoom); + context.bezierCurveTo( + control1[0] * zoom, + control1[1] * zoom, + control2[0] * zoom, + control2[1] * zoom, + end[0] * zoom, + end[1] * zoom, + ); + context.stroke(); + context.restore(); +}; + +const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => { + context.strokeStyle = "#888"; + context.save(); + context.beginPath(); + context.moveTo(-10 * zoom, -10 * zoom); + context.lineTo(10 * zoom, 10 * zoom); + context.moveTo(10 * zoom, -10 * zoom); + context.lineTo(-10 * zoom, 10 * zoom); + context.stroke(); + context.save(); +}; + +const render = ( + frame: DebugElement[], + context: CanvasRenderingContext2D, + appState: AppState, +) => { + frame.forEach((el: DebugElement) => { + switch (true) { + case isLineSegment(el.data): + renderLine( + context, + appState.zoom.value, + el.data as LineSegment<GlobalPoint>, + el.color, + ); + break; + case isCurve(el.data): + renderCubicBezier( + context, + appState.zoom.value, + el.data as Curve<GlobalPoint>, + el.color, + ); + break; + default: + throw new Error(`Unknown element type ${JSON.stringify(el)}`); + } + }); +}; + +const _debugRenderer = ( + canvas: HTMLCanvasElement, + appState: AppState, + scale: number, + refresh: () => void, +) => { + const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions( + canvas, + scale, + ); + + if (appState.height !== canvas.height || appState.width !== canvas.width) { + refresh(); + } + + const context = bootstrapCanvas({ + canvas, + scale, + normalizedWidth, + normalizedHeight, + viewBackgroundColor: "transparent", + }); + + // Apply zoom + context.save(); + context.translate( + appState.scrollX * appState.zoom.value, + appState.scrollY * appState.zoom.value, + ); + + renderOrigin(context, appState.zoom.value); + + if ( + window.visualDebug?.currentFrame && + window.visualDebug?.data && + window.visualDebug.data.length > 0 + ) { + // Render only one frame + const [idx] = debugFrameData(); + + render(window.visualDebug.data[idx], context, appState); + } else { + // Render all debug frames + window.visualDebug?.data.forEach((frame) => { + render(frame, context, appState); + }); + } + + if (window.visualDebug) { + window.visualDebug!.data = + window.visualDebug?.data.map((frame) => + frame.filter((el) => el.permanent), + ) ?? []; + } +}; + +const debugFrameData = (): [number, number] => { + const currentFrame = window.visualDebug?.currentFrame ?? 0; + const frameCount = window.visualDebug?.data.length ?? 0; + + if (frameCount > 0) { + return [currentFrame % frameCount, window.visualDebug?.currentFrame ?? 0]; + } + + return [0, 0]; +}; + +export const saveDebugState = (debug: { enabled: boolean }) => { + try { + localStorage.setItem( + STORAGE_KEYS.LOCAL_STORAGE_DEBUG, + JSON.stringify(debug), + ); + } catch (error: any) { + console.error(error); + } +}; + +export const debugRenderer = throttleRAF( + ( + canvas: HTMLCanvasElement, + appState: AppState, + scale: number, + refresh: () => void, + ) => { + _debugRenderer(canvas, appState, scale, refresh); + }, + { trailing: true }, +); + +export const loadSavedDebugState = () => { + let debug; + try { + const savedDebugState = localStorage.getItem( + STORAGE_KEYS.LOCAL_STORAGE_DEBUG, + ); + if (savedDebugState) { + debug = JSON.parse(savedDebugState) as { enabled: boolean }; + } + } catch (error: any) { + console.error(error); + } + + return debug ?? { enabled: false }; +}; + +export const isVisualDebuggerEnabled = () => + Array.isArray(window.visualDebug?.data); + +export const DebugFooter = ({ onChange }: { onChange: () => void }) => { + const moveForward = useCallback(() => { + if ( + !window.visualDebug?.currentFrame || + isNaN(window.visualDebug?.currentFrame ?? -1) + ) { + window.visualDebug!.currentFrame = 0; + } + window.visualDebug!.currentFrame += 1; + onChange(); + }, [onChange]); + const moveBackward = useCallback(() => { + if ( + !window.visualDebug?.currentFrame || + isNaN(window.visualDebug?.currentFrame ?? -1) || + window.visualDebug?.currentFrame < 1 + ) { + window.visualDebug!.currentFrame = 1; + } + window.visualDebug!.currentFrame -= 1; + onChange(); + }, [onChange]); + const reset = useCallback(() => { + window.visualDebug!.currentFrame = undefined; + onChange(); + }, [onChange]); + const trashFrames = useCallback(() => { + if (window.visualDebug) { + window.visualDebug.currentFrame = undefined; + window.visualDebug.data = []; + } + onChange(); + }, [onChange]); + + return ( + <> + <button + className="ToolIcon_type_button" + data-testid="debug-forward" + aria-label="Move forward" + type="button" + onClick={trashFrames} + > + <div + className="ToolIcon__icon" + aria-hidden="true" + aria-disabled="false" + > + {TrashIcon} + </div> + </button> + <button + className="ToolIcon_type_button" + data-testid="debug-forward" + aria-label="Move forward" + type="button" + onClick={moveBackward} + > + <div + className="ToolIcon__icon" + aria-hidden="true" + aria-disabled="false" + > + <ArrowheadArrowIcon flip /> + </div> + </button> + <button + className="ToolIcon_type_button" + data-testid="debug-forward" + aria-label="Move forward" + type="button" + onClick={reset} + > + <div + className="ToolIcon__icon" + aria-hidden="true" + aria-disabled="false" + > + {CloseIcon} + </div> + </button> + <button + className="ToolIcon_type_button" + data-testid="debug-backward" + aria-label="Move backward" + type="button" + onClick={moveForward} + > + <div + className="ToolIcon__icon" + aria-hidden="true" + aria-disabled="false" + > + <ArrowheadArrowIcon /> + </div> + </button> + </> + ); +}; + +interface DebugCanvasProps { + appState: AppState; + scale: number; + ref?: React.Ref<HTMLCanvasElement>; +} + +const DebugCanvas = ({ appState, scale, ref }: DebugCanvasProps) => { + const { width, height } = appState; + + const canvasRef = useRef<HTMLCanvasElement>(null); + useImperativeHandle<HTMLCanvasElement | null, HTMLCanvasElement | null>( + ref, + () => canvasRef.current, + [canvasRef], + ); + + return ( + <canvas + style={{ + width, + height, + position: "absolute", + zIndex: 2, + pointerEvents: "none", + }} + width={width * scale} + height={height * scale} + ref={canvasRef} + > + Debug Canvas + </canvas> + ); +}; + +export default DebugCanvas; diff --git a/excalidraw-app/components/EncryptedIcon.tsx b/excalidraw-app/components/EncryptedIcon.tsx new file mode 100644 index 0000000..a3a8417 --- /dev/null +++ b/excalidraw-app/components/EncryptedIcon.tsx @@ -0,0 +1,21 @@ +import { shield } from "@excalidraw/excalidraw/components/icons"; +import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip"; +import { useI18n } from "@excalidraw/excalidraw/i18n"; + +export const EncryptedIcon = () => { + const { t } = useI18n(); + + return ( + <a + className="encrypted-icon tooltip" + href="https://plus.excalidraw.com/blog/end-to-end-encryption" + target="_blank" + rel="noopener noreferrer" + aria-label={t("encrypted.link")} + > + <Tooltip label={t("encrypted.tooltip")} long={true}> + {shield} + </Tooltip> + </a> + ); +}; diff --git a/excalidraw-app/components/ExcalidrawPlusAppLink.tsx b/excalidraw-app/components/ExcalidrawPlusAppLink.tsx new file mode 100644 index 0000000..88cc0fc --- /dev/null +++ b/excalidraw-app/components/ExcalidrawPlusAppLink.tsx @@ -0,0 +1,19 @@ +import { isExcalidrawPlusSignedUser } from "../app_constants"; + +export const ExcalidrawPlusAppLink = () => { + if (!isExcalidrawPlusSignedUser) { + return null; + } + return ( + <a + href={`${ + import.meta.env.VITE_APP_PLUS_APP + }?utm_source=excalidraw&utm_medium=app&utm_content=signedInUserRedirectButton#excalidraw-redirect`} + target="_blank" + rel="noreferrer" + className="plus-button" + > + Go to kj-diagramming cloud + </a> + ); +}; diff --git a/excalidraw-app/components/ExportToExcalidrawPlus.tsx b/excalidraw-app/components/ExportToExcalidrawPlus.tsx new file mode 100644 index 0000000..782ecd9 --- /dev/null +++ b/excalidraw-app/components/ExportToExcalidrawPlus.tsx @@ -0,0 +1,133 @@ +import React from "react"; +import { Card } from "@excalidraw/excalidraw/components/Card"; +import { ToolButton } from "@excalidraw/excalidraw/components/ToolButton"; +import { serializeAsJSON } from "@excalidraw/excalidraw/data/json"; +import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase"; +import type { + FileId, + NonDeletedExcalidrawElement, +} from "@excalidraw/excalidraw/element/types"; +import type { + AppState, + BinaryFileData, + BinaryFiles, +} from "@excalidraw/excalidraw/types"; +import { nanoid } from "nanoid"; +import { useI18n } from "@excalidraw/excalidraw/i18n"; +import { + encryptData, + generateEncryptionKey, +} from "@excalidraw/excalidraw/data/encryption"; +import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks"; +import { FILE_UPLOAD_MAX_BYTES } from "../app_constants"; +import { encodeFilesForUpload } from "../data/FileManager"; +import { uploadBytes, ref } from "firebase/storage"; +import { MIME_TYPES } from "@excalidraw/excalidraw/constants"; +import { trackEvent } from "@excalidraw/excalidraw/analytics"; +import { getFrame } from "@excalidraw/excalidraw/utils"; +import { ExcalidrawLogo } from "@excalidraw/excalidraw/components/ExcalidrawLogo"; + +export const exportToExcalidrawPlus = async ( + elements: readonly NonDeletedExcalidrawElement[], + appState: Partial<AppState>, + files: BinaryFiles, + name: string, +) => { + const storage = await loadFirebaseStorage(); + + const id = `${nanoid(12)}`; + + const encryptionKey = (await generateEncryptionKey())!; + const encryptedData = await encryptData( + encryptionKey, + serializeAsJSON(elements, appState, files, "database"), + ); + + const blob = new Blob( + [encryptedData.iv, new Uint8Array(encryptedData.encryptedBuffer)], + { + type: MIME_TYPES.binary, + }, + ); + + const storageRef = ref(storage, `/migrations/scenes/${id}`); + await uploadBytes(storageRef, blob, { + customMetadata: { + data: JSON.stringify({ version: 2, name }), + created: Date.now().toString(), + }, + }); + + const filesMap = new Map<FileId, BinaryFileData>(); + for (const element of elements) { + if (isInitializedImageElement(element) && files[element.fileId]) { + filesMap.set(element.fileId, files[element.fileId]); + } + } + + if (filesMap.size) { + const filesToUpload = await encodeFilesForUpload({ + files: filesMap, + encryptionKey, + maxBytes: FILE_UPLOAD_MAX_BYTES, + }); + + await saveFilesToFirebase({ + prefix: `/migrations/files/scenes/${id}`, + files: filesToUpload, + }); + } + + window.open( + `${ + import.meta.env.VITE_APP_PLUS_APP + }/import?excalidraw=${id},${encryptionKey}`, + ); +}; + +export const ExportToExcalidrawPlus: React.FC<{ + elements: readonly NonDeletedExcalidrawElement[]; + appState: Partial<AppState>; + files: BinaryFiles; + name: string; + onError: (error: Error) => void; + onSuccess: () => void; +}> = ({ elements, appState, files, name, onError, onSuccess }) => { + const { t } = useI18n(); + return ( + <Card color="primary"> + <div className="Card-icon"> + <ExcalidrawLogo + style={{ + [`--color-logo-icon` as any]: "#fff", + width: "2.8rem", + height: "2.8rem", + }} + /> + </div> + <h2>Excalidraw+</h2> + <div className="Card-details"> + {t("exportDialog.excalidrawplus_description")} + </div> + <ToolButton + className="Card-button" + type="button" + title={t("exportDialog.excalidrawplus_button")} + aria-label={t("exportDialog.excalidrawplus_button")} + showAriaLabel={true} + onClick={async () => { + try { + trackEvent("export", "eplus", `ui (${getFrame()})`); + await exportToExcalidrawPlus(elements, appState, files, name); + onSuccess(); + } catch (error: any) { + console.error(error); + if (error.name !== "AbortError") { + onError(new Error(t("exportDialog.excalidrawplus_exportError"))); + } + } + }} + /> + </Card> + ); +}; diff --git a/excalidraw-app/components/GitHubCorner.tsx b/excalidraw-app/components/GitHubCorner.tsx new file mode 100644 index 0000000..4d74242 --- /dev/null +++ b/excalidraw-app/components/GitHubCorner.tsx @@ -0,0 +1,45 @@ +import oc from "open-color"; +import React from "react"; +import { THEME } from "@excalidraw/excalidraw/constants"; +import type { Theme } from "@excalidraw/excalidraw/element/types"; + +// https://github.com/tholman/github-corners +export const GitHubCorner = React.memo( + ({ theme, dir }: { theme: Theme; dir: string }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + width="40" + height="40" + viewBox="0 0 250 250" + className="rtl-mirror" + style={{ + marginTop: "calc(var(--space-factor) * -1)", + [dir === "rtl" ? "marginLeft" : "marginRight"]: + "calc(var(--space-factor) * -1)", + }} + > + <a + href="https://github.com/excalidraw/excalidraw" + target="_blank" + rel="noopener noreferrer" + aria-label="GitHub repository" + > + <path + d="M0 0l115 115h15l12 27 108 108V0z" + fill={theme === THEME.LIGHT ? oc.gray[6] : oc.gray[7]} + /> + <path + className="octo-arm" + d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" + style={{ transformOrigin: "130px 106px" }} + fill={theme === THEME.LIGHT ? oc.white : "var(--default-bg-color)"} + /> + <path + className="octo-body" + d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" + fill={theme === THEME.LIGHT ? oc.white : "var(--default-bg-color)"} + /> + </a> + </svg> + ), +); diff --git a/excalidraw-app/components/TopErrorBoundary.tsx b/excalidraw-app/components/TopErrorBoundary.tsx new file mode 100644 index 0000000..e7e00be --- /dev/null +++ b/excalidraw-app/components/TopErrorBoundary.tsx @@ -0,0 +1,146 @@ +import React from "react"; +import * as Sentry from "@sentry/browser"; +import { t } from "@excalidraw/excalidraw/i18n"; +import Trans from "@excalidraw/excalidraw/components/Trans"; + +interface TopErrorBoundaryState { + hasError: boolean; + sentryEventId: string; + localStorage: string; +} + +export class TopErrorBoundary extends React.Component< + any, + TopErrorBoundaryState +> { + state: TopErrorBoundaryState = { + hasError: false, + sentryEventId: "", + localStorage: "", + }; + + render() { + return this.state.hasError ? this.errorSplash() : this.props.children; + } + + componentDidCatch(error: Error, errorInfo: any) { + const _localStorage: any = {}; + for (const [key, value] of Object.entries({ ...localStorage })) { + try { + _localStorage[key] = JSON.parse(value); + } catch (error: any) { + _localStorage[key] = value; + } + } + + Sentry.withScope((scope) => { + scope.setExtras(errorInfo); + const eventId = Sentry.captureException(error); + + this.setState((state) => ({ + hasError: true, + sentryEventId: eventId, + localStorage: JSON.stringify(_localStorage), + })); + }); + } + + private selectTextArea(event: React.MouseEvent<HTMLTextAreaElement>) { + if (event.target !== document.activeElement) { + event.preventDefault(); + (event.target as HTMLTextAreaElement).select(); + } + } + + private async createGithubIssue() { + let body = ""; + try { + const templateStrFn = ( + await import( + /* webpackChunkName: "bug-issue-template" */ "../bug-issue-template" + ) + ).default; + body = encodeURIComponent(templateStrFn(this.state.sentryEventId)); + } catch (error: any) { + console.error(error); + } + + window.open( + `https://github.com/excalidraw/excalidraw/issues/new?body=${body}`, + "_blank", + "noopener noreferrer", + ); + } + + private errorSplash() { + return ( + <div className="ErrorSplash excalidraw"> + <div className="ErrorSplash-messageContainer"> + <div className="ErrorSplash-paragraph bigger align-center"> + <Trans + i18nKey="errorSplash.headingMain" + button={(el) => ( + <button onClick={() => window.location.reload()}>{el}</button> + )} + /> + </div> + <div className="ErrorSplash-paragraph align-center"> + <Trans + i18nKey="errorSplash.clearCanvasMessage" + button={(el) => ( + <button + onClick={() => { + try { + localStorage.clear(); + window.location.reload(); + } catch (error: any) { + console.error(error); + } + }} + > + {el} + </button> + )} + /> + <br /> + <div className="smaller"> + <span role="img" aria-label="warning"> + ⚠️ + </span> + {t("errorSplash.clearCanvasCaveat")} + <span role="img" aria-hidden="true"> + ⚠️ + </span> + </div> + </div> + <div> + <div className="ErrorSplash-paragraph"> + {t("errorSplash.trackedToSentry", { + eventId: this.state.sentryEventId, + })} + </div> + <div className="ErrorSplash-paragraph"> + <Trans + i18nKey="errorSplash.openIssueMessage" + button={(el) => ( + <button onClick={() => this.createGithubIssue()}>{el}</button> + )} + /> + </div> + <div className="ErrorSplash-paragraph"> + <div className="ErrorSplash-details"> + <label>{t("errorSplash.sceneContent")}</label> + <textarea + rows={5} + onPointerDown={this.selectTextArea} + readOnly={true} + value={this.state.localStorage} + /> + </div> + </div> + </div> + </div> + </div> + ); + } +} diff --git a/excalidraw-app/data/FileManager.ts b/excalidraw-app/data/FileManager.ts new file mode 100644 index 0000000..f5f4eac --- /dev/null +++ b/excalidraw-app/data/FileManager.ts @@ -0,0 +1,273 @@ +import { CaptureUpdateAction } from "@excalidraw/excalidraw"; +import { compressData } from "@excalidraw/excalidraw/data/encode"; +import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement"; +import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks"; +import type { + ExcalidrawElement, + ExcalidrawImageElement, + FileId, + InitializedExcalidrawImageElement, +} from "@excalidraw/excalidraw/element/types"; +import { t } from "@excalidraw/excalidraw/i18n"; +import type { + BinaryFileData, + BinaryFileMetadata, + ExcalidrawImperativeAPI, + BinaryFiles, +} from "@excalidraw/excalidraw/types"; + +type FileVersion = Required<BinaryFileData>["version"]; + +export class FileManager { + /** files being fetched */ + private fetchingFiles = new Map<ExcalidrawImageElement["fileId"], true>(); + private erroredFiles_fetch = new Map< + ExcalidrawImageElement["fileId"], + true + >(); + /** files being saved */ + private savingFiles = new Map< + ExcalidrawImageElement["fileId"], + FileVersion + >(); + /* files already saved to persistent storage */ + private savedFiles = new Map<ExcalidrawImageElement["fileId"], FileVersion>(); + private erroredFiles_save = new Map< + ExcalidrawImageElement["fileId"], + FileVersion + >(); + + private _getFiles; + private _saveFiles; + + constructor({ + getFiles, + saveFiles, + }: { + getFiles: (fileIds: FileId[]) => Promise<{ + loadedFiles: BinaryFileData[]; + erroredFiles: Map<FileId, true>; + }>; + saveFiles: (data: { addedFiles: Map<FileId, BinaryFileData> }) => Promise<{ + savedFiles: Map<FileId, BinaryFileData>; + erroredFiles: Map<FileId, BinaryFileData>; + }>; + }) { + this._getFiles = getFiles; + this._saveFiles = saveFiles; + } + + /** + * returns whether file is saved/errored, or being processed + */ + isFileTracked = (id: FileId) => { + return ( + this.savedFiles.has(id) || + this.savingFiles.has(id) || + this.fetchingFiles.has(id) || + this.erroredFiles_fetch.has(id) || + this.erroredFiles_save.has(id) + ); + }; + + isFileSavedOrBeingSaved = (file: BinaryFileData) => { + const fileVersion = this.getFileVersion(file); + return ( + this.savedFiles.get(file.id) === fileVersion || + this.savingFiles.get(file.id) === fileVersion + ); + }; + + getFileVersion = (file: BinaryFileData) => { + return file.version ?? 1; + }; + + saveFiles = async ({ + elements, + files, + }: { + elements: readonly ExcalidrawElement[]; + files: BinaryFiles; + }) => { + const addedFiles: Map<FileId, BinaryFileData> = new Map(); + + for (const element of elements) { + const fileData = + isInitializedImageElement(element) && files[element.fileId]; + + if ( + fileData && + // NOTE if errored during save, won't retry due to this check + !this.isFileSavedOrBeingSaved(fileData) + ) { + addedFiles.set(element.fileId, files[element.fileId]); + this.savingFiles.set(element.fileId, this.getFileVersion(fileData)); + } + } + + try { + const { savedFiles, erroredFiles } = await this._saveFiles({ + addedFiles, + }); + + for (const [fileId, fileData] of savedFiles) { + this.savedFiles.set(fileId, this.getFileVersion(fileData)); + } + + for (const [fileId, fileData] of erroredFiles) { + this.erroredFiles_save.set(fileId, this.getFileVersion(fileData)); + } + + return { + savedFiles, + erroredFiles, + }; + } finally { + for (const [fileId] of addedFiles) { + this.savingFiles.delete(fileId); + } + } + }; + + getFiles = async ( + ids: FileId[], + ): Promise<{ + loadedFiles: BinaryFileData[]; + erroredFiles: Map<FileId, true>; + }> => { + if (!ids.length) { + return { + loadedFiles: [], + erroredFiles: new Map(), + }; + } + for (const id of ids) { + this.fetchingFiles.set(id, true); + } + + try { + const { loadedFiles, erroredFiles } = await this._getFiles(ids); + + for (const file of loadedFiles) { + this.savedFiles.set(file.id, this.getFileVersion(file)); + } + for (const [fileId] of erroredFiles) { + this.erroredFiles_fetch.set(fileId, true); + } + + return { loadedFiles, erroredFiles }; + } finally { + for (const id of ids) { + this.fetchingFiles.delete(id); + } + } + }; + + /** a file element prevents unload only if it's being saved regardless of + * its `status`. This ensures that elements who for any reason haven't + * beed set to `saved` status don't prevent unload in future sessions. + * Technically we should prevent unload when the origin client haven't + * yet saved the `status` update to storage, but that should be taken care + * of during regular beforeUnload unsaved files check. + */ + shouldPreventUnload = (elements: readonly ExcalidrawElement[]) => { + return elements.some((element) => { + return ( + isInitializedImageElement(element) && + !element.isDeleted && + this.savingFiles.has(element.fileId) + ); + }); + }; + + /** + * helper to determine if image element status needs updating + */ + shouldUpdateImageElementStatus = ( + element: ExcalidrawElement, + ): element is InitializedExcalidrawImageElement => { + return ( + isInitializedImageElement(element) && + this.savedFiles.has(element.fileId) && + element.status === "pending" + ); + }; + + reset() { + this.fetchingFiles.clear(); + this.savingFiles.clear(); + this.savedFiles.clear(); + this.erroredFiles_fetch.clear(); + this.erroredFiles_save.clear(); + } +} + +export const encodeFilesForUpload = async ({ + files, + maxBytes, + encryptionKey, +}: { + files: Map<FileId, BinaryFileData>; + maxBytes: number; + encryptionKey: string; +}) => { + const processedFiles: { + id: FileId; + buffer: Uint8Array; + }[] = []; + + for (const [id, fileData] of files) { + const buffer = new TextEncoder().encode(fileData.dataURL); + + const encodedFile = await compressData<BinaryFileMetadata>(buffer, { + encryptionKey, + metadata: { + id, + mimeType: fileData.mimeType, + created: Date.now(), + lastRetrieved: Date.now(), + }, + }); + + if (buffer.byteLength > maxBytes) { + throw new Error( + t("errors.fileTooBig", { + maxSize: `${Math.trunc(maxBytes / 1024 / 1024)}MB`, + }), + ); + } + + processedFiles.push({ + id, + buffer: encodedFile, + }); + } + + return processedFiles; +}; + +export const updateStaleImageStatuses = (params: { + excalidrawAPI: ExcalidrawImperativeAPI; + erroredFiles: Map<FileId, true>; + elements: readonly ExcalidrawElement[]; +}) => { + if (!params.erroredFiles.size) { + return; + } + params.excalidrawAPI.updateScene({ + elements: params.excalidrawAPI + .getSceneElementsIncludingDeleted() + .map((element) => { + if ( + isInitializedImageElement(element) && + params.erroredFiles.has(element.fileId) + ) { + return newElementWith(element, { + status: "error", + }); + } + return element; + }), + captureUpdate: CaptureUpdateAction.NEVER, + }); +}; diff --git a/excalidraw-app/data/LocalData.ts b/excalidraw-app/data/LocalData.ts new file mode 100644 index 0000000..3ab0ad9 --- /dev/null +++ b/excalidraw-app/data/LocalData.ts @@ -0,0 +1,258 @@ +/** + * This file deals with saving data state (appState, elements, images, ...) + * locally to the browser. + * + * Notes: + * + * - DataState refers to full state of the app: appState, elements, images, + * though some state is saved separately (collab username, library) for one + * reason or another. We also save different data to different storage + * (localStorage, indexedDB). + */ + +import { + createStore, + entries, + del, + getMany, + set, + setMany, + get, +} from "idb-keyval"; +import { clearAppStateForLocalStorage } from "@excalidraw/excalidraw/appState"; +import { + CANVAS_SEARCH_TAB, + DEFAULT_SIDEBAR, +} from "@excalidraw/excalidraw/constants"; +import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library"; +import type { ImportedDataState } from "@excalidraw/excalidraw/data/types"; +import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element"; +import type { + ExcalidrawElement, + FileId, +} from "@excalidraw/excalidraw/element/types"; +import type { + AppState, + BinaryFileData, + BinaryFiles, +} from "@excalidraw/excalidraw/types"; +import type { MaybePromise } from "@excalidraw/excalidraw/utility-types"; +import { debounce } from "@excalidraw/excalidraw/utils"; +import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants"; +import { FileManager } from "./FileManager"; +import { Locker } from "./Locker"; +import { updateBrowserStateVersion } from "./tabSync"; + +const filesStore = createStore("files-db", "files-store"); + +class LocalFileManager extends FileManager { + clearObsoleteFiles = async (opts: { currentFileIds: FileId[] }) => { + await entries(filesStore).then((entries) => { + for (const [id, imageData] of entries as [FileId, BinaryFileData][]) { + // if image is unused (not on canvas) & is older than 1 day, delete it + // from storage. We check `lastRetrieved` we care about the last time + // the image was used (loaded on canvas), not when it was initially + // created. + if ( + (!imageData.lastRetrieved || + Date.now() - imageData.lastRetrieved > 24 * 3600 * 1000) && + !opts.currentFileIds.includes(id as FileId) + ) { + del(id, filesStore); + } + } + }); + }; +} + +const saveDataStateToLocalStorage = ( + elements: readonly ExcalidrawElement[], + appState: AppState, +) => { + try { + const _appState = clearAppStateForLocalStorage(appState); + + if ( + _appState.openSidebar?.name === DEFAULT_SIDEBAR.name && + _appState.openSidebar.tab === CANVAS_SEARCH_TAB + ) { + _appState.openSidebar = null; + } + + localStorage.setItem( + STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS, + JSON.stringify(clearElementsForLocalStorage(elements)), + ); + localStorage.setItem( + STORAGE_KEYS.LOCAL_STORAGE_APP_STATE, + JSON.stringify(_appState), + ); + updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE); + } catch (error: any) { + // Unable to access window.localStorage + console.error(error); + } +}; + +type SavingLockTypes = "collaboration"; + +export class LocalData { + private static _save = debounce( + async ( + elements: readonly ExcalidrawElement[], + appState: AppState, + files: BinaryFiles, + onFilesSaved: () => void, + ) => { + saveDataStateToLocalStorage(elements, appState); + + await this.fileStorage.saveFiles({ + elements, + files, + }); + onFilesSaved(); + }, + SAVE_TO_LOCAL_STORAGE_TIMEOUT, + ); + + /** Saves DataState, including files. Bails if saving is paused */ + static save = ( + elements: readonly ExcalidrawElement[], + appState: AppState, + files: BinaryFiles, + onFilesSaved: () => void, + ) => { + // we need to make the `isSavePaused` check synchronously (undebounced) + if (!this.isSavePaused()) { + this._save(elements, appState, files, onFilesSaved); + } + }; + + static flushSave = () => { + this._save.flush(); + }; + + private static locker = new Locker<SavingLockTypes>(); + + static pauseSave = (lockType: SavingLockTypes) => { + this.locker.lock(lockType); + }; + + static resumeSave = (lockType: SavingLockTypes) => { + this.locker.unlock(lockType); + }; + + static isSavePaused = () => { + return document.hidden || this.locker.isLocked(); + }; + + // --------------------------------------------------------------------------- + + static fileStorage = new LocalFileManager({ + getFiles(ids) { + return getMany(ids, filesStore).then( + async (filesData: (BinaryFileData | undefined)[]) => { + const loadedFiles: BinaryFileData[] = []; + const erroredFiles = new Map<FileId, true>(); + + const filesToSave: [FileId, BinaryFileData][] = []; + + filesData.forEach((data, index) => { + const id = ids[index]; + if (data) { + const _data: BinaryFileData = { + ...data, + lastRetrieved: Date.now(), + }; + filesToSave.push([id, _data]); + loadedFiles.push(_data); + } else { + erroredFiles.set(id, true); + } + }); + + try { + // save loaded files back to storage with updated `lastRetrieved` + setMany(filesToSave, filesStore); + } catch (error) { + console.warn(error); + } + + return { loadedFiles, erroredFiles }; + }, + ); + }, + async saveFiles({ addedFiles }) { + const savedFiles = new Map<FileId, BinaryFileData>(); + const erroredFiles = new Map<FileId, BinaryFileData>(); + + // before we use `storage` event synchronization, let's update the flag + // optimistically. Hopefully nothing fails, and an IDB read executed + // before an IDB write finishes will read the latest value. + updateBrowserStateVersion(STORAGE_KEYS.VERSION_FILES); + + await Promise.all( + [...addedFiles].map(async ([id, fileData]) => { + try { + await set(id, fileData, filesStore); + savedFiles.set(id, fileData); + } catch (error: any) { + console.error(error); + erroredFiles.set(id, fileData); + } + }), + ); + + return { savedFiles, erroredFiles }; + }, + }); +} +export class LibraryIndexedDBAdapter { + /** IndexedDB database and store name */ + private static idb_name = STORAGE_KEYS.IDB_LIBRARY; + /** library data store key */ + private static key = "libraryData"; + + private static store = createStore( + `${LibraryIndexedDBAdapter.idb_name}-db`, + `${LibraryIndexedDBAdapter.idb_name}-store`, + ); + + static async load() { + const IDBData = await get<LibraryPersistedData>( + LibraryIndexedDBAdapter.key, + LibraryIndexedDBAdapter.store, + ); + + return IDBData || null; + } + + static save(data: LibraryPersistedData): MaybePromise<void> { + return set( + LibraryIndexedDBAdapter.key, + data, + LibraryIndexedDBAdapter.store, + ); + } +} + +/** LS Adapter used only for migrating LS library data + * to indexedDB */ +export class LibraryLocalStorageMigrationAdapter { + static load() { + const LSData = localStorage.getItem( + STORAGE_KEYS.__LEGACY_LOCAL_STORAGE_LIBRARY, + ); + if (LSData != null) { + const libraryItems: ImportedDataState["libraryItems"] = + JSON.parse(LSData); + if (libraryItems) { + return { libraryItems }; + } + } + return null; + } + static clear() { + localStorage.removeItem(STORAGE_KEYS.__LEGACY_LOCAL_STORAGE_LIBRARY); + } +} diff --git a/excalidraw-app/data/Locker.ts b/excalidraw-app/data/Locker.ts new file mode 100644 index 0000000..c99673e --- /dev/null +++ b/excalidraw-app/data/Locker.ts @@ -0,0 +1,18 @@ +export class Locker<T extends string> { + private locks = new Map<T, true>(); + + lock = (lockType: T) => { + this.locks.set(lockType, true); + }; + + /** @returns whether no locks remaining */ + unlock = (lockType: T) => { + this.locks.delete(lockType); + return !this.isLocked(); + }; + + /** @returns whether some (or specific) locks are present */ + isLocked(lockType?: T) { + return lockType ? this.locks.has(lockType) : !!this.locks.size; + } +} diff --git a/excalidraw-app/data/firebase.ts b/excalidraw-app/data/firebase.ts new file mode 100644 index 0000000..a871b48 --- /dev/null +++ b/excalidraw-app/data/firebase.ts @@ -0,0 +1,313 @@ +import { reconcileElements } from "@excalidraw/excalidraw"; +import type { + ExcalidrawElement, + FileId, + OrderedExcalidrawElement, +} from "@excalidraw/excalidraw/element/types"; +import { getSceneVersion } from "@excalidraw/excalidraw/element"; +import type Portal from "../collab/Portal"; +import { restoreElements } from "@excalidraw/excalidraw/data/restore"; +import type { + AppState, + BinaryFileData, + BinaryFileMetadata, + DataURL, +} from "@excalidraw/excalidraw/types"; +import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants"; +import { decompressData } from "@excalidraw/excalidraw/data/encode"; +import { + encryptData, + decryptData, +} from "@excalidraw/excalidraw/data/encryption"; +import { MIME_TYPES } from "@excalidraw/excalidraw/constants"; +import type { SyncableExcalidrawElement } from "."; +import { getSyncableElements } from "."; +import { initializeApp } from "firebase/app"; +import { + getFirestore, + doc, + getDoc, + runTransaction, + Bytes, +} from "firebase/firestore"; +import { getStorage, ref, uploadBytes } from "firebase/storage"; +import type { Socket } from "socket.io-client"; +import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile"; + +// private +// ----------------------------------------------------------------------------- + +let FIREBASE_CONFIG: Record<string, any>; +try { + FIREBASE_CONFIG = JSON.parse(import.meta.env.VITE_APP_FIREBASE_CONFIG); +} catch (error: any) { + console.warn( + `Error JSON parsing firebase config. Supplied value: ${ + import.meta.env.VITE_APP_FIREBASE_CONFIG + }`, + ); + FIREBASE_CONFIG = {}; +} + +let firebaseApp: ReturnType<typeof initializeApp> | null = null; +let firestore: ReturnType<typeof getFirestore> | null = null; +let firebaseStorage: ReturnType<typeof getStorage> | null = null; + +const _initializeFirebase = () => { + if (!firebaseApp) { + firebaseApp = initializeApp(FIREBASE_CONFIG); + } + return firebaseApp; +}; + +const _getFirestore = () => { + if (!firestore) { + firestore = getFirestore(_initializeFirebase()); + } + return firestore; +}; + +const _getStorage = () => { + if (!firebaseStorage) { + firebaseStorage = getStorage(_initializeFirebase()); + } + return firebaseStorage; +}; + +// ----------------------------------------------------------------------------- + +export const loadFirebaseStorage = async () => { + return _getStorage(); +}; + +type FirebaseStoredScene = { + sceneVersion: number; + iv: Bytes; + ciphertext: Bytes; +}; + +const encryptElements = async ( + key: string, + elements: readonly ExcalidrawElement[], +): Promise<{ ciphertext: ArrayBuffer; iv: Uint8Array }> => { + const json = JSON.stringify(elements); + const encoded = new TextEncoder().encode(json); + const { encryptedBuffer, iv } = await encryptData(key, encoded); + + return { ciphertext: encryptedBuffer, iv }; +}; + +const decryptElements = async ( + data: FirebaseStoredScene, + roomKey: string, +): Promise<readonly ExcalidrawElement[]> => { + const ciphertext = data.ciphertext.toUint8Array(); + const iv = data.iv.toUint8Array(); + + const decrypted = await decryptData(iv, ciphertext, roomKey); + const decodedData = new TextDecoder("utf-8").decode( + new Uint8Array(decrypted), + ); + return JSON.parse(decodedData); +}; + +class FirebaseSceneVersionCache { + private static cache = new WeakMap<Socket, number>(); + static get = (socket: Socket) => { + return FirebaseSceneVersionCache.cache.get(socket); + }; + static set = ( + socket: Socket, + elements: readonly SyncableExcalidrawElement[], + ) => { + FirebaseSceneVersionCache.cache.set(socket, getSceneVersion(elements)); + }; +} + +export const isSavedToFirebase = ( + portal: Portal, + elements: readonly ExcalidrawElement[], +): boolean => { + if (portal.socket && portal.roomId && portal.roomKey) { + const sceneVersion = getSceneVersion(elements); + + return FirebaseSceneVersionCache.get(portal.socket) === sceneVersion; + } + // if no room exists, consider the room saved so that we don't unnecessarily + // prevent unload (there's nothing we could do at that point anyway) + return true; +}; + +export const saveFilesToFirebase = async ({ + prefix, + files, +}: { + prefix: string; + files: { id: FileId; buffer: Uint8Array }[]; +}) => { + const storage = await loadFirebaseStorage(); + + const erroredFiles: FileId[] = []; + const savedFiles: FileId[] = []; + + await Promise.all( + files.map(async ({ id, buffer }) => { + try { + const storageRef = ref(storage, `${prefix}/${id}`); + await uploadBytes(storageRef, buffer, { + cacheControl: `public, max-age=${FILE_CACHE_MAX_AGE_SEC}`, + }); + savedFiles.push(id); + } catch (error: any) { + erroredFiles.push(id); + } + }), + ); + + return { savedFiles, erroredFiles }; +}; + +const createFirebaseSceneDocument = async ( + elements: readonly SyncableExcalidrawElement[], + roomKey: string, +) => { + const sceneVersion = getSceneVersion(elements); + const { ciphertext, iv } = await encryptElements(roomKey, elements); + return { + sceneVersion, + ciphertext: Bytes.fromUint8Array(new Uint8Array(ciphertext)), + iv: Bytes.fromUint8Array(iv), + } as FirebaseStoredScene; +}; + +export const saveToFirebase = async ( + portal: Portal, + elements: readonly SyncableExcalidrawElement[], + appState: AppState, +) => { + const { roomId, roomKey, socket } = portal; + if ( + // bail if no room exists as there's nothing we can do at this point + !roomId || + !roomKey || + !socket || + isSavedToFirebase(portal, elements) + ) { + return null; + } + + const firestore = _getFirestore(); + const docRef = doc(firestore, "scenes", roomId); + + const storedScene = await runTransaction(firestore, async (transaction) => { + const snapshot = await transaction.get(docRef); + + if (!snapshot.exists()) { + const storedScene = await createFirebaseSceneDocument(elements, roomKey); + + transaction.set(docRef, storedScene); + + return storedScene; + } + + const prevStoredScene = snapshot.data() as FirebaseStoredScene; + const prevStoredElements = getSyncableElements( + restoreElements(await decryptElements(prevStoredScene, roomKey), null), + ); + const reconciledElements = getSyncableElements( + reconcileElements( + elements, + prevStoredElements as OrderedExcalidrawElement[] as RemoteExcalidrawElement[], + appState, + ), + ); + + const storedScene = await createFirebaseSceneDocument( + reconciledElements, + roomKey, + ); + + transaction.update(docRef, storedScene); + + // Return the stored elements as the in memory `reconciledElements` could have mutated in the meantime + return storedScene; + }); + + const storedElements = getSyncableElements( + restoreElements(await decryptElements(storedScene, roomKey), null), + ); + + FirebaseSceneVersionCache.set(socket, storedElements); + + return storedElements; +}; + +export const loadFromFirebase = async ( + roomId: string, + roomKey: string, + socket: Socket | null, +): Promise<readonly SyncableExcalidrawElement[] | null> => { + const firestore = _getFirestore(); + const docRef = doc(firestore, "scenes", roomId); + const docSnap = await getDoc(docRef); + if (!docSnap.exists()) { + return null; + } + const storedScene = docSnap.data() as FirebaseStoredScene; + const elements = getSyncableElements( + restoreElements(await decryptElements(storedScene, roomKey), null), + ); + + if (socket) { + FirebaseSceneVersionCache.set(socket, elements); + } + + return elements; +}; + +export const loadFilesFromFirebase = async ( + prefix: string, + decryptionKey: string, + filesIds: readonly FileId[], +) => { + const loadedFiles: BinaryFileData[] = []; + const erroredFiles = new Map<FileId, true>(); + + await Promise.all( + [...new Set(filesIds)].map(async (id) => { + try { + const url = `https://firebasestorage.googleapis.com/v0/b/${ + FIREBASE_CONFIG.storageBucket + }/o/${encodeURIComponent(prefix.replace(/^\//, ""))}%2F${id}`; + const response = await fetch(`${url}?alt=media`); + if (response.status < 400) { + const arrayBuffer = await response.arrayBuffer(); + + const { data, metadata } = await decompressData<BinaryFileMetadata>( + new Uint8Array(arrayBuffer), + { + decryptionKey, + }, + ); + + const dataURL = new TextDecoder().decode(data) as DataURL; + + loadedFiles.push({ + mimeType: metadata.mimeType || MIME_TYPES.binary, + id, + dataURL, + created: metadata?.created || Date.now(), + lastRetrieved: metadata?.created || Date.now(), + }); + } else { + erroredFiles.set(id, true); + } + } catch (error: any) { + erroredFiles.set(id, true); + console.error(error); + } + }), + ); + + return { loadedFiles, erroredFiles }; +}; diff --git a/excalidraw-app/data/index.ts b/excalidraw-app/data/index.ts new file mode 100644 index 0000000..6ecb98f --- /dev/null +++ b/excalidraw-app/data/index.ts @@ -0,0 +1,338 @@ +import { + compressData, + decompressData, +} from "@excalidraw/excalidraw/data/encode"; +import { + decryptData, + generateEncryptionKey, + IV_LENGTH_BYTES, +} from "@excalidraw/excalidraw/data/encryption"; +import { serializeAsJSON } from "@excalidraw/excalidraw/data/json"; +import { restore } from "@excalidraw/excalidraw/data/restore"; +import type { ImportedDataState } from "@excalidraw/excalidraw/data/types"; +import type { SceneBounds } from "@excalidraw/excalidraw/element/bounds"; +import { isInvisiblySmallElement } from "@excalidraw/excalidraw/element/sizeHelpers"; +import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks"; +import type { + ExcalidrawElement, + FileId, + OrderedExcalidrawElement, +} from "@excalidraw/excalidraw/element/types"; +import { t } from "@excalidraw/excalidraw/i18n"; +import type { + AppState, + BinaryFileData, + BinaryFiles, + SocketId, +} from "@excalidraw/excalidraw/types"; +import type { UserIdleState } from "@excalidraw/excalidraw/constants"; +import type { MakeBrand } from "@excalidraw/excalidraw/utility-types"; +import { bytesToHexString } from "@excalidraw/excalidraw/utils"; +import type { WS_SUBTYPES } from "../app_constants"; +import { + DELETED_ELEMENT_TIMEOUT, + FILE_UPLOAD_MAX_BYTES, + ROOM_ID_BYTES, +} from "../app_constants"; +import { encodeFilesForUpload } from "./FileManager"; +import { saveFilesToFirebase } from "./firebase"; + +export type SyncableExcalidrawElement = OrderedExcalidrawElement & + MakeBrand<"SyncableExcalidrawElement">; + +export const isSyncableElement = ( + element: OrderedExcalidrawElement, +): element is SyncableExcalidrawElement => { + if (element.isDeleted) { + if (element.updated > Date.now() - DELETED_ELEMENT_TIMEOUT) { + return true; + } + return false; + } + return !isInvisiblySmallElement(element); +}; + +export const getSyncableElements = ( + elements: readonly OrderedExcalidrawElement[], +) => + elements.filter((element) => + isSyncableElement(element), + ) as SyncableExcalidrawElement[]; + +const BACKEND_V2_GET = import.meta.env.VITE_APP_BACKEND_V2_GET_URL; +const BACKEND_V2_POST = import.meta.env.VITE_APP_BACKEND_V2_POST_URL; + +const generateRoomId = async () => { + const buffer = new Uint8Array(ROOM_ID_BYTES); + window.crypto.getRandomValues(buffer); + return bytesToHexString(buffer); +}; + +export type EncryptedData = { + data: ArrayBuffer; + iv: Uint8Array; +}; + +export type SocketUpdateDataSource = { + INVALID_RESPONSE: { + type: WS_SUBTYPES.INVALID_RESPONSE; + }; + SCENE_INIT: { + type: WS_SUBTYPES.INIT; + payload: { + elements: readonly ExcalidrawElement[]; + }; + }; + SCENE_UPDATE: { + type: WS_SUBTYPES.UPDATE; + payload: { + elements: readonly ExcalidrawElement[]; + }; + }; + MOUSE_LOCATION: { + type: WS_SUBTYPES.MOUSE_LOCATION; + payload: { + socketId: SocketId; + pointer: { x: number; y: number; tool: "pointer" | "laser" }; + button: "down" | "up"; + selectedElementIds: AppState["selectedElementIds"]; + username: string; + }; + }; + USER_VISIBLE_SCENE_BOUNDS: { + type: WS_SUBTYPES.USER_VISIBLE_SCENE_BOUNDS; + payload: { + socketId: SocketId; + username: string; + sceneBounds: SceneBounds; + }; + }; + IDLE_STATUS: { + type: WS_SUBTYPES.IDLE_STATUS; + payload: { + socketId: SocketId; + userState: UserIdleState; + username: string; + }; + }; +}; + +export type SocketUpdateDataIncoming = + SocketUpdateDataSource[keyof SocketUpdateDataSource]; + +export type SocketUpdateData = + SocketUpdateDataSource[keyof SocketUpdateDataSource] & { + _brand: "socketUpdateData"; + }; + +const RE_COLLAB_LINK = /^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/; + +export const isCollaborationLink = (link: string) => { + const hash = new URL(link).hash; + return RE_COLLAB_LINK.test(hash); +}; + +export const getCollaborationLinkData = (link: string) => { + const hash = new URL(link).hash; + const match = hash.match(RE_COLLAB_LINK); + if (match && match[2].length !== 22) { + window.alert(t("alerts.invalidEncryptionKey")); + return null; + } + return match ? { roomId: match[1], roomKey: match[2] } : null; +}; + +export const generateCollaborationLinkData = async () => { + const roomId = await generateRoomId(); + const roomKey = await generateEncryptionKey(); + + if (!roomKey) { + throw new Error("Couldn't generate room key"); + } + + return { roomId, roomKey }; +}; + +export const getCollaborationLink = (data: { + roomId: string; + roomKey: string; +}) => { + return `${window.location.origin}${window.location.pathname}#room=${data.roomId},${data.roomKey}`; +}; + +/** + * Decodes shareLink data using the legacy buffer format. + * @deprecated + */ +const legacy_decodeFromBackend = async ({ + buffer, + decryptionKey, +}: { + buffer: ArrayBuffer; + decryptionKey: string; +}) => { + let decrypted: ArrayBuffer; + + try { + // Buffer should contain both the IV (fixed length) and encrypted data + const iv = buffer.slice(0, IV_LENGTH_BYTES); + const encrypted = buffer.slice(IV_LENGTH_BYTES, buffer.byteLength); + decrypted = await decryptData(new Uint8Array(iv), encrypted, decryptionKey); + } catch (error: any) { + // Fixed IV (old format, backward compatibility) + const fixedIv = new Uint8Array(IV_LENGTH_BYTES); + decrypted = await decryptData(fixedIv, buffer, decryptionKey); + } + + // We need to convert the decrypted array buffer to a string + const string = new window.TextDecoder("utf-8").decode( + new Uint8Array(decrypted), + ); + const data: ImportedDataState = JSON.parse(string); + + return { + elements: data.elements || null, + appState: data.appState || null, + }; +}; + +const importFromBackend = async ( + id: string, + decryptionKey: string, +): Promise<ImportedDataState> => { + try { + const response = await fetch(`${BACKEND_V2_GET}${id}`); + + if (!response.ok) { + window.alert(t("alerts.importBackendFailed")); + return {}; + } + const buffer = await response.arrayBuffer(); + + try { + const { data: decodedBuffer } = await decompressData( + new Uint8Array(buffer), + { + decryptionKey, + }, + ); + const data: ImportedDataState = JSON.parse( + new TextDecoder().decode(decodedBuffer), + ); + + return { + elements: data.elements || null, + appState: data.appState || null, + }; + } catch (error: any) { + console.warn( + "error when decoding shareLink data using the new format:", + error, + ); + return legacy_decodeFromBackend({ buffer, decryptionKey }); + } + } catch (error: any) { + window.alert(t("alerts.importBackendFailed")); + console.error(error); + return {}; + } +}; + +export const loadScene = async ( + id: string | null, + privateKey: string | null, + // Supply local state even if importing from backend to ensure we restore + // localStorage user settings which we do not persist on server. + // Non-optional so we don't forget to pass it even if `undefined`. + localDataState: ImportedDataState | undefined | null, +) => { + let data; + if (id != null && privateKey != null) { + // the private key is used to decrypt the content from the server, take + // extra care not to leak it + data = restore( + await importFromBackend(id, privateKey), + localDataState?.appState, + localDataState?.elements, + { repairBindings: true, refreshDimensions: false }, + ); + } else { + data = restore(localDataState || null, null, null, { + repairBindings: true, + }); + } + + return { + elements: data.elements, + appState: data.appState, + // note: this will always be empty because we're not storing files + // in the scene database/localStorage, and instead fetch them async + // from a different database + files: data.files, + }; +}; + +type ExportToBackendResult = + | { url: null; errorMessage: string } + | { url: string; errorMessage: null }; + +export const exportToBackend = async ( + elements: readonly ExcalidrawElement[], + appState: Partial<AppState>, + files: BinaryFiles, +): Promise<ExportToBackendResult> => { + const encryptionKey = await generateEncryptionKey("string"); + + const payload = await compressData( + new TextEncoder().encode( + serializeAsJSON(elements, appState, files, "database"), + ), + { encryptionKey }, + ); + + try { + const filesMap = new Map<FileId, BinaryFileData>(); + for (const element of elements) { + if (isInitializedImageElement(element) && files[element.fileId]) { + filesMap.set(element.fileId, files[element.fileId]); + } + } + + const filesToUpload = await encodeFilesForUpload({ + files: filesMap, + encryptionKey, + maxBytes: FILE_UPLOAD_MAX_BYTES, + }); + + const response = await fetch(BACKEND_V2_POST, { + method: "POST", + body: payload.buffer, + }); + const json = await response.json(); + if (json.id) { + const url = new URL(window.location.href); + // We need to store the key (and less importantly the id) as hash instead + // of queryParam in order to never send it to the server + url.hash = `json=${json.id},${encryptionKey}`; + const urlString = url.toString(); + + await saveFilesToFirebase({ + prefix: `/files/shareLinks/${json.id}`, + files: filesToUpload, + }); + + return { url: urlString, errorMessage: null }; + } else if (json.error_class === "RequestTooLargeError") { + return { + url: null, + errorMessage: t("alerts.couldNotCreateShareableLinkTooBig"), + }; + } + + return { url: null, errorMessage: t("alerts.couldNotCreateShareableLink") }; + } catch (error: any) { + console.error(error); + + return { url: null, errorMessage: t("alerts.couldNotCreateShareableLink") }; + } +}; diff --git a/excalidraw-app/data/localStorage.ts b/excalidraw-app/data/localStorage.ts new file mode 100644 index 0000000..640dfdb --- /dev/null +++ b/excalidraw-app/data/localStorage.ts @@ -0,0 +1,99 @@ +import type { ExcalidrawElement } from "@excalidraw/excalidraw/element/types"; +import type { AppState } from "@excalidraw/excalidraw/types"; +import { + clearAppStateForLocalStorage, + getDefaultAppState, +} from "@excalidraw/excalidraw/appState"; +import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element"; +import { STORAGE_KEYS } from "../app_constants"; + +export const saveUsernameToLocalStorage = (username: string) => { + try { + localStorage.setItem( + STORAGE_KEYS.LOCAL_STORAGE_COLLAB, + JSON.stringify({ username }), + ); + } catch (error: any) { + // Unable to access window.localStorage + console.error(error); + } +}; + +export const importUsernameFromLocalStorage = (): string | null => { + try { + const data = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB); + if (data) { + return JSON.parse(data).username; + } + } catch (error: any) { + // Unable to access localStorage + console.error(error); + } + + return null; +}; + +export const importFromLocalStorage = () => { + let savedElements = null; + let savedState = null; + + try { + savedElements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS); + savedState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE); + } catch (error: any) { + // Unable to access localStorage + console.error(error); + } + + let elements: ExcalidrawElement[] = []; + if (savedElements) { + try { + elements = clearElementsForLocalStorage(JSON.parse(savedElements)); + } catch (error: any) { + console.error(error); + // Do nothing because elements array is already empty + } + } + + let appState = null; + if (savedState) { + try { + appState = { + ...getDefaultAppState(), + ...clearAppStateForLocalStorage( + JSON.parse(savedState) as Partial<AppState>, + ), + }; + } catch (error: any) { + console.error(error); + // Do nothing because appState is already null + } + } + return { elements, appState }; +}; + +export const getElementsStorageSize = () => { + try { + const elements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS); + const elementsSize = elements?.length || 0; + return elementsSize; + } catch (error: any) { + console.error(error); + return 0; + } +}; + +export const getTotalStorageSize = () => { + try { + const appState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE); + const collab = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB); + + const appStateSize = appState?.length || 0; + const collabSize = collab?.length || 0; + + return appStateSize + collabSize + getElementsStorageSize(); + } catch (error: any) { + console.error(error); + return 0; + } +}; diff --git a/excalidraw-app/data/tabSync.ts b/excalidraw-app/data/tabSync.ts new file mode 100644 index 0000000..0617a55 --- /dev/null +++ b/excalidraw-app/data/tabSync.ts @@ -0,0 +1,39 @@ +import { STORAGE_KEYS } from "../app_constants"; + +// in-memory state (this tab's current state) versions. Currently just +// timestamps of the last time the state was saved to browser storage. +const LOCAL_STATE_VERSIONS = { + [STORAGE_KEYS.VERSION_DATA_STATE]: -1, + [STORAGE_KEYS.VERSION_FILES]: -1, +}; + +type BrowserStateTypes = keyof typeof LOCAL_STATE_VERSIONS; + +export const isBrowserStorageStateNewer = (type: BrowserStateTypes) => { + const storageTimestamp = JSON.parse(localStorage.getItem(type) || "-1"); + return storageTimestamp > LOCAL_STATE_VERSIONS[type]; +}; + +export const updateBrowserStateVersion = (type: BrowserStateTypes) => { + const timestamp = Date.now(); + try { + localStorage.setItem(type, JSON.stringify(timestamp)); + LOCAL_STATE_VERSIONS[type] = timestamp; + } catch (error) { + console.error("error while updating browser state verison", error); + } +}; + +export const resetBrowserStateVersions = () => { + try { + for (const key of Object.keys( + LOCAL_STATE_VERSIONS, + ) as BrowserStateTypes[]) { + const timestamp = -1; + localStorage.setItem(key, JSON.stringify(timestamp)); + LOCAL_STATE_VERSIONS[key] = timestamp; + } + } catch (error) { + console.error("error while resetting browser state verison", error); + } +}; diff --git a/excalidraw-app/debug.ts b/excalidraw-app/debug.ts new file mode 100644 index 0000000..38ba805 --- /dev/null +++ b/excalidraw-app/debug.ts @@ -0,0 +1,135 @@ +declare global { + interface Window { + debug: typeof Debug; + } +} + +const lessPrecise = (num: number, precision = 5) => + parseFloat(num.toPrecision(precision)); + +const getAvgFrameTime = (times: number[]) => + lessPrecise(times.reduce((a, b) => a + b) / times.length); + +const getFps = (frametime: number) => lessPrecise(1000 / frametime); + +export class Debug { + public static DEBUG_LOG_TIMES = true; + + private static TIMES_AGGR: Record<string, { t: number; times: number[] }> = + {}; + private static TIMES_AVG: Record< + string, + { t: number; times: number[]; avg: number | null } + > = {}; + private static LAST_DEBUG_LOG_CALL = 0; + private static DEBUG_LOG_INTERVAL_ID: null | number = null; + + private static setupInterval = () => { + if (Debug.DEBUG_LOG_INTERVAL_ID === null) { + console.info("%c(starting perf recording)", "color: lime"); + Debug.DEBUG_LOG_INTERVAL_ID = window.setInterval(Debug.debugLogger, 1000); + } + Debug.LAST_DEBUG_LOG_CALL = Date.now(); + }; + + private static debugLogger = () => { + if ( + Date.now() - Debug.LAST_DEBUG_LOG_CALL > 600 && + Debug.DEBUG_LOG_INTERVAL_ID !== null + ) { + window.clearInterval(Debug.DEBUG_LOG_INTERVAL_ID); + Debug.DEBUG_LOG_INTERVAL_ID = null; + for (const [name, { avg }] of Object.entries(Debug.TIMES_AVG)) { + if (avg != null) { + console.info( + `%c${name} run avg: ${avg}ms (${getFps(avg)} fps)`, + "color: blue", + ); + } + } + console.info("%c(stopping perf recording)", "color: red"); + Debug.TIMES_AGGR = {}; + Debug.TIMES_AVG = {}; + return; + } + if (Debug.DEBUG_LOG_TIMES) { + for (const [name, { t, times }] of Object.entries(Debug.TIMES_AGGR)) { + if (times.length) { + console.info( + name, + lessPrecise(times.reduce((a, b) => a + b)), + times.sort((a, b) => a - b).map((x) => lessPrecise(x)), + ); + Debug.TIMES_AGGR[name] = { t, times: [] }; + } + } + for (const [name, { t, times, avg }] of Object.entries(Debug.TIMES_AVG)) { + if (times.length) { + const avgFrameTime = getAvgFrameTime(times); + console.info(name, `${avgFrameTime}ms (${getFps(avgFrameTime)} fps)`); + Debug.TIMES_AVG[name] = { + t, + times: [], + avg: + avg != null ? getAvgFrameTime([avg, avgFrameTime]) : avgFrameTime, + }; + } + } + } + }; + + public static logTime = (time?: number, name = "default") => { + Debug.setupInterval(); + const now = performance.now(); + const { t, times } = (Debug.TIMES_AGGR[name] = Debug.TIMES_AGGR[name] || { + t: 0, + times: [], + }); + if (t) { + times.push(time != null ? time : now - t); + } + Debug.TIMES_AGGR[name].t = now; + }; + public static logTimeAverage = (time?: number, name = "default") => { + Debug.setupInterval(); + const now = performance.now(); + const { t, times } = (Debug.TIMES_AVG[name] = Debug.TIMES_AVG[name] || { + t: 0, + times: [], + }); + if (t) { + times.push(time != null ? time : now - t); + } + Debug.TIMES_AVG[name].t = now; + }; + + private static logWrapper = + (type: "logTime" | "logTimeAverage") => + <T extends any[], R>(fn: (...args: T) => R, name = "default") => { + return (...args: T) => { + const t0 = performance.now(); + const ret = fn(...args); + Debug.logTime(performance.now() - t0, name); + return ret; + }; + }; + + public static logTimeWrap = Debug.logWrapper("logTime"); + public static logTimeAverageWrap = Debug.logWrapper("logTimeAverage"); + + public static perfWrap = <T extends any[], R>( + fn: (...args: T) => R, + name = "default", + ) => { + return (...args: T) => { + // eslint-disable-next-line no-console + console.time(name); + const ret = fn(...args); + // eslint-disable-next-line no-console + console.timeEnd(name); + return ret; + }; + }; +} +//@ts-ignore +window.debug = Debug; diff --git a/excalidraw-app/global.d.ts b/excalidraw-app/global.d.ts new file mode 100644 index 0000000..92b7c08 --- /dev/null +++ b/excalidraw-app/global.d.ts @@ -0,0 +1,6 @@ +import "@excalidraw/excalidraw/global"; +import "@excalidraw/excalidraw/css"; + +interface Window { + __EXCALIDRAW_SHA__: string | undefined; +} diff --git a/excalidraw-app/index.html b/excalidraw-app/index.html new file mode 100644 index 0000000..0e7772f --- /dev/null +++ b/excalidraw-app/index.html @@ -0,0 +1,252 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>kj-diagramming | Hand-drawn look & feel • Collaborative • Secure</title> + <meta + name="viewport" + content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no" + /> + <meta name="referrer" content="origin" /> + <meta name="mobile-web-app-capable" content="yes" /> + <meta name="theme-color" content="#121212" /> + + <!-- Primary Meta Tags --> + <meta + name="title" + content="kj-diagramming — Collaborative whiteboarding made easy" + /> + <meta + name="description" + content="kj-diagramming is a virtual collaborative whiteboard tool (an excalidraw fork) that lets you easily sketch diagrams with a hand-drawn feel." + /> + <meta name="image" content="/og-image-3.png" /> + + <!-- Open Graph / Facebook --> + <meta property="og:site_name" content="kj-diagramming" /> + <meta property="og:type" content="website" /> + <meta property="og:url" content="/" /> + <meta + property="og:title" + content="kj-diagramming — Collaborative whiteboarding made easy" + /> + <meta property="og:image:alt" content="kj-diagramming logo" /> + <meta + property="og:description" + content="kj-diagramming is a virtual collaborative whiteboard tool (an excalidraw fork) that lets you easily sketch diagrams with a hand-drawn feel." + /> + <meta property="og:image" content="/og-image-3.png" /> + + <!-- Twitter --> + <meta property="twitter:card" content="summary_large_image" /> + <meta property="twitter:site" content="@kjdiagramming" /> + <meta property="twitter:url" content="/" /> + <meta + property="twitter:title" + content="kj-diagramming — Collaborative whiteboarding made easy" + /> + <meta + property="twitter:description" + content="kj-diagramming is a virtual collaborative whiteboard tool (an excalidraw fork) that lets you easily sketch diagrams with a hand-drawn feel." + /> + <meta + property="twitter:image" + content="/og-image-3.png" + /> + + <link rel="canonical" href="/" /> + + <!-------------------------------------------------------------------------> + <!-- to minimize white flash on load when user has dark mode enabled --> + <script> + try { + function setTheme(theme) { + if (theme === "dark") { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + } + + function getTheme() { + const theme = window.localStorage.getItem("kj-diagramming-theme"); + + if (theme && theme === "system") { + return window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"; + } else { + return theme || "light"; + } + } + + setTheme(getTheme()); + } catch (e) { + console.error("Error setting dark mode", e); + } + </script> + <style> + html.dark { + background-color: #121212; + color: #fff; + } + </style> + + <!-- Warmup the connection for Google fonts --> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + + <!-------------------------------------------------------------------------> + <% if (typeof PROD != 'undefined' && PROD == true) { %> + <script> + // Redirect plus users which have auto-redirect enabled. + // + // Redirect only the bare root path, so link/room/library urls are not + // redirected. + // + // Putting into index.html for best performance (can't redirect on server + // due to location.hash checks). + if ( + window.location.pathname === "/" && + !window.location.hash && + !window.location.search && + // if its present redirect + document.cookie.includes("excplus-autoredirect=true") + ) { + // disabled in this fork + } + </script> + + <!-- Following placeholder is replaced during the build step --> + <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS --> + + <!-- Register Assistant as the UI font, before the scene inits --> + <link + rel="stylesheet" + href="../packages/excalidraw/fonts/fonts.css" + type="text/css" + /> + + <% } else { %> + <script> + window.EXCALIDRAW_ASSET_PATH = window.origin; + </script> + <% } %> + + <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> + <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> + <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> + + <!-- kj-diagramming version --> + <meta name="version" content="{version}" /> + + <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' && + VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %> + <script> + { + const _WebSocket = window.WebSocket; + window.WebSocket = function (url) { + if (/ws:\/\/localhost:.+?\/sockjs-node/.test(url)) { + console.info( + "[!!!] Live reload is disabled via VITE_APP_DEV_DISABLE_LIVE_RELOAD [!!!]", + ); + } else { + return new _WebSocket(url); + } + }; + } + </script> + <% } %> + <script> + // setting this so that libraries installation reuses this window tab. + window.name = "_kj-diagramming"; + </script> + + <!-- FIXME: remove this when we update CRA (fix SW caching) --> + <style> + body, + html { + margin: 0; + -webkit-text-size-adjust: 100%; + + width: 100%; + height: 100%; + overflow: hidden; + } + + .visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + white-space: nowrap; + user-select: none; + } + + #root { + height: 100%; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + @media screen and (min-width: 1200px) { + #root { + -webkit-touch-callout: default; + -webkit-user-select: auto; + -khtml-user-select: auto; + -moz-user-select: auto; + -ms-user-select: auto; + user-select: auto; + } + } + </style> + </head> + + <body> + <noscript> You need to enable JavaScript to run this app. </noscript> + <header> + <h1 class="visually-hidden">kj-diagramming</h1> + </header> + <div id="root"></div> + <script type="module" src="index.tsx"></script> + <% if (typeof PROD != 'undefined' && PROD == true) { %> + <!-- 100% privacy friendly analytics --> + <script> + // need to load this script dynamically bcs. of iframe embed tracking + var scriptEle = document.createElement("script"); + scriptEle.setAttribute( + "src", + "https://scripts.simpleanalyticscdn.com/latest.js", + ); + scriptEle.setAttribute("type", "text/javascript"); + scriptEle.setAttribute("defer", true); + scriptEle.setAttribute("async", true); + // if iframe + if (window.self !== window.top) { + scriptEle.setAttribute("data-auto-collect", true); + } + + document.body.appendChild(scriptEle); + + // if iframe + if (window.self !== window.top) { + scriptEle.addEventListener("load", () => { + if (window.sa_pageview) { + window.window.sa_event(action, { + category: "iframe", + label: "embed", + value: window.location.pathname, + }); + } + }); + } + </script> + <!-- end LEGACY GOOGLE ANALYTICS --> + <% } %> + </body> +</html> diff --git a/excalidraw-app/index.scss b/excalidraw-app/index.scss new file mode 100644 index 0000000..cfaaf9c --- /dev/null +++ b/excalidraw-app/index.scss @@ -0,0 +1,117 @@ +.excalidraw { + --color-primary-contrast-offset: #625ee0; // to offset Chubb illusion + + &.theme--dark { + --color-primary-contrast-offset: #726dff; // to offset Chubb illusion + } + + .top-right-ui { + display: flex; + justify-content: center; + align-items: flex-start; + } + + .footer-center { + justify-content: flex-end; + margin-top: auto; + margin-bottom: auto; + margin-inline-start: auto; + } + + .encrypted-icon { + border-radius: var(--space-factor); + color: var(--color-primary); + margin-top: auto; + margin-bottom: auto; + margin-inline-start: auto; + margin-inline-end: 0.6em; + z-index: var(--zIndex-layerUI); + + svg { + width: 1.2rem; + height: 1.2rem; + } + } + + .dropdown-menu-container { + .dropdown-menu-item { + &.active-collab { + background-color: #ecfdf5; + color: #064e3c; + } + &.highlighted { + color: var(--color-promo); + font-weight: 700; + .dropdown-menu-item__icon g { + stroke-width: 2; + } + } + } + } + + &.theme--dark { + .dropdown-menu-item { + &.active-collab { + background-color: #064e3c; + color: #ecfdf5; + } + } + } + + .collab-offline-warning { + pointer-events: none; + position: absolute; + top: 6.5rem; + left: 50%; + transform: translateX(-50%); + padding: 0.5rem 1rem; + font-size: 0.875rem; + text-align: center; + line-height: 1.5; + border-radius: var(--border-radius-md); + background-color: var(--color-warning); + color: var(--color-text-warning); + z-index: 6; + white-space: pre; + } +} + +.excalidraw-app.is-collaborating { + [data-testid="clear-canvas-button"] { + display: none; + } +} + +.plus-button { + display: flex; + justify-content: center; + cursor: pointer; + align-items: center; + border: 1px solid var(--color-primary); + padding: 0.5rem 0.75rem; + border-radius: var(--border-radius-lg); + background-color: var(--island-bg-color); + color: var(--color-primary) !important; + text-decoration: none !important; + + font-size: 0.75rem; + box-sizing: border-box; + height: var(--lg-button-size); + + &:hover { + background-color: var(--color-primary); + color: white !important; + } + + &:active { + background-color: var(--color-primary-darker); + } +} + +.theme--dark { + .plus-button { + &:hover { + color: black !important; + } + } +} diff --git a/excalidraw-app/index.tsx b/excalidraw-app/index.tsx new file mode 100644 index 0000000..a28bd9e --- /dev/null +++ b/excalidraw-app/index.tsx @@ -0,0 +1,15 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import ExcalidrawApp from "./App"; +import { registerSW } from "virtual:pwa-register"; + +import "../excalidraw-app/sentry"; +window.__EXCALIDRAW_SHA__ = import.meta.env.VITE_APP_GIT_SHA; +const rootElement = document.getElementById("root")!; +const root = createRoot(rootElement); +registerSW(); +root.render( + <StrictMode> + <ExcalidrawApp /> + </StrictMode>, +); diff --git a/excalidraw-app/package.json b/excalidraw-app/package.json new file mode 100644 index 0000000..e5dcde0 --- /dev/null +++ b/excalidraw-app/package.json @@ -0,0 +1,56 @@ +{ + "name": "excalidraw-app", + "version": "1.0.0", + "private": true, + "homepage": ".", + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all", + "not safari < 12", + "not kaios <= 2.5", + "not edge < 79", + "not chrome < 70", + "not and_uc < 13", + "not samsung < 10" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "engines": { + "node": "18.0.0 - 22.x.x" + }, + "dependencies": { + "@excalidraw/random-username": "1.0.0", + "@sentry/browser": "9.0.1", + "callsites": "4.2.0", + "firebase": "11.3.1", + "i18next-browser-languagedetector": "6.1.4", + "idb-keyval": "6.0.3", + "jotai": "2.11.0", + "react": "19.0.0", + "react-dom": "19.0.0", + "socket.io-client": "4.7.2", + "vite-plugin-html": "3.2.2" + }, + "prettier": "@excalidraw/prettier-config", + "scripts": { + "build-node": "node ./scripts/build-node.js", + "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build", + "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build", + "build:version": "node ../scripts/build-version.js", + "build": "yarn build:app && yarn build:version", + "start": "yarn && vite", + "start:production": "yarn build && yarn serve", + "serve": "npx http-server build -a localhost -p 5001 -o", + "build:preview": "yarn build && vite preview --port 5000" + }, + "devDependencies": { + "vite-plugin-sitemap": "0.7.1" + } +} diff --git a/excalidraw-app/sentry.ts b/excalidraw-app/sentry.ts new file mode 100644 index 0000000..30b84f3 --- /dev/null +++ b/excalidraw-app/sentry.ts @@ -0,0 +1,81 @@ +import * as Sentry from "@sentry/browser"; +import callsites from "callsites"; + +const SentryEnvHostnameMap: { [key: string]: string } = { + "excalidraw.com": "production", + "staging.excalidraw.com": "staging", + "vercel.app": "staging", +}; + +const SENTRY_DISABLED = import.meta.env.VITE_APP_DISABLE_SENTRY === "true"; + +// Disable Sentry locally or inside the Docker to avoid noise/respect privacy +const onlineEnv = + !SENTRY_DISABLED && + Object.keys(SentryEnvHostnameMap).find( + (item) => window.location.hostname.indexOf(item) >= 0, + ); + +Sentry.init({ + dsn: onlineEnv + ? "https://7bfc596a5bf945eda6b660d3015a5460@sentry.io/5179260" + : undefined, + environment: onlineEnv ? SentryEnvHostnameMap[onlineEnv] : undefined, + release: import.meta.env.VITE_APP_GIT_SHA, + ignoreErrors: [ + "undefined is not an object (evaluating 'window.__pad.performLoop')", // Only happens on Safari, but spams our servers. Doesn't break anything + "InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.", // Not much we can do about the IndexedDB closing error + /(Failed to fetch|(fetch|loading) dynamically imported module)/i, // This is happening when a service worker tries to load an old asset + /QuotaExceededError: (The quota has been exceeded|.*setItem.*Storage)/i, // localStorage quota exceeded + "Internal error opening backing store for indexedDB.open", // Private mode and disabled indexedDB + ], + integrations: [ + Sentry.captureConsoleIntegration({ + levels: ["error"], + }), + ], + beforeSend(event) { + if (event.request?.url) { + event.request.url = event.request.url.replace(/#.*$/, ""); + } + + if (!event.exception) { + event.exception = { + values: [ + { + type: "ConsoleError", + value: event.message ?? "Unknown error", + stacktrace: { + frames: callsites() + .slice(1) + .filter( + (frame) => + frame.getFileName() && + !frame.getFileName()?.includes("@sentry_browser.js"), + ) + .map((frame) => ({ + filename: frame.getFileName() ?? undefined, + function: frame.getFunctionName() ?? undefined, + in_app: !( + frame.getFileName()?.includes("node_modules") ?? false + ), + lineno: frame.getLineNumber() ?? undefined, + colno: frame.getColumnNumber() ?? undefined, + })), + }, + mechanism: { + type: "instrument", + handled: true, + data: { + function: "console.error", + handler: "Sentry.beforeSend", + }, + }, + }, + ], + }; + } + + return event; + }, +}); diff --git a/excalidraw-app/share/ShareDialog.scss b/excalidraw-app/share/ShareDialog.scss new file mode 100644 index 0000000..436f411 --- /dev/null +++ b/excalidraw-app/share/ShareDialog.scss @@ -0,0 +1,166 @@ +@import "../../packages/excalidraw/css/variables.module.scss"; + +.excalidraw { + .ShareDialog { + display: flex; + flex-direction: column; + gap: 1.5rem; + + @include isMobile { + height: calc(100vh - 5rem); + } + + &__separator { + border-top: 1px solid var(--dialog-border-color); + text-align: center; + display: flex; + justify-content: center; + align-items: center; + margin-top: 1em; + + span { + background: var(--island-bg-color); + padding: 0px 0.75rem; + transform: translateY(-1ch); + display: inline-flex; + line-height: 1; + } + } + + &__popover { + @keyframes ShareDialog__popover__scaleIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + box-sizing: border-box; + z-index: 100; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + padding: 0.125rem 0.5rem; + gap: 0.125rem; + + height: 1.125rem; + + border: none; + border-radius: 0.6875rem; + + font-family: "Assistant"; + font-style: normal; + font-weight: 600; + font-size: 0.75rem; + line-height: 110%; + + background: var(--color-success); + color: var(--color-success-text); + + & > svg { + width: 0.875rem; + height: 0.875rem; + } + + transform-origin: var(--radix-popover-content-transform-origin); + animation: ShareDialog__popover__scaleIn 150ms ease-out; + } + + &__picker { + font-family: "Assistant"; + + &__illustration { + display: flex; + width: 100%; + align-items: center; + justify-content: center; + + & svg { + filter: var(--theme-filter); + } + } + + &__header { + display: flex; + width: 100%; + align-items: center; + justify-content: center; + + font-weight: 700; + font-size: 1.3125rem; + line-height: 130%; + + color: var(--color-primary); + } + + &__description { + font-weight: 400; + font-size: 0.875rem; + line-height: 150%; + + text-align: center; + + color: var(--text-primary-color); + + & strong { + display: block; + font-weight: 700; + } + } + + &__button { + display: flex; + + align-items: center; + justify-content: center; + } + } + + &__active { + &__share { + display: none !important; + + @include isMobile { + display: flex !important; + } + } + + &__header { + margin: 0; + } + + &__linkRow { + display: flex; + flex-direction: row; + align-items: flex-end; + gap: 0.75rem; + } + + &__description { + border-top: 1px solid var(--color-gray-20); + + padding: 0.5rem 0.5rem 0; + font-weight: 400; + font-size: 0.75rem; + line-height: 150%; + + & p { + margin: 0; + } + + & p + p { + margin-top: 1em; + } + } + + &__actions { + display: flex; + justify-content: center; + } + } + } +} diff --git a/excalidraw-app/share/ShareDialog.tsx b/excalidraw-app/share/ShareDialog.tsx new file mode 100644 index 0000000..bba7e36 --- /dev/null +++ b/excalidraw-app/share/ShareDialog.tsx @@ -0,0 +1,290 @@ +import { useEffect, useRef, useState } from "react"; +import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard"; +import { trackEvent } from "@excalidraw/excalidraw/analytics"; +import { getFrame } from "@excalidraw/excalidraw/utils"; +import { useI18n } from "@excalidraw/excalidraw/i18n"; +import { KEYS } from "@excalidraw/excalidraw/keys"; +import { Dialog } from "@excalidraw/excalidraw/components/Dialog"; +import { + copyIcon, + LinkIcon, + playerPlayIcon, + playerStopFilledIcon, + share, + shareIOS, + shareWindows, +} from "@excalidraw/excalidraw/components/icons"; +import { TextField } from "@excalidraw/excalidraw/components/TextField"; +import { FilledButton } from "@excalidraw/excalidraw/components/FilledButton"; +import type { CollabAPI } from "../collab/Collab"; +import { activeRoomLinkAtom } from "../collab/Collab"; +import { useUIAppState } from "@excalidraw/excalidraw/context/ui-appState"; +import { useCopyStatus } from "@excalidraw/excalidraw/hooks/useCopiedIndicator"; +import { atom, useAtom, useAtomValue } from "../app-jotai"; + +import "./ShareDialog.scss"; + +type OnExportToBackend = () => void; +type ShareDialogType = "share" | "collaborationOnly"; + +export const shareDialogStateAtom = atom< + { isOpen: false } | { isOpen: true; type: ShareDialogType } +>({ isOpen: false }); + +const getShareIcon = () => { + const navigator = window.navigator as any; + const isAppleBrowser = /Apple/.test(navigator.vendor); + const isWindowsBrowser = navigator.appVersion.indexOf("Win") !== -1; + + if (isAppleBrowser) { + return shareIOS; + } else if (isWindowsBrowser) { + return shareWindows; + } + + return share; +}; + +export type ShareDialogProps = { + collabAPI: CollabAPI | null; + handleClose: () => void; + onExportToBackend: OnExportToBackend; + type: ShareDialogType; +}; + +const ActiveRoomDialog = ({ + collabAPI, + activeRoomLink, + handleClose, +}: { + collabAPI: CollabAPI; + activeRoomLink: string; + handleClose: () => void; +}) => { + const { t } = useI18n(); + const [, setJustCopied] = useState(false); + const timerRef = useRef<number>(0); + const ref = useRef<HTMLInputElement>(null); + const isShareSupported = "share" in navigator; + const { onCopy, copyStatus } = useCopyStatus(); + + const copyRoomLink = async () => { + try { + await copyTextToSystemClipboard(activeRoomLink); + } catch (e) { + collabAPI.setCollabError(t("errors.copyToSystemClipboardFailed")); + } + + setJustCopied(true); + + if (timerRef.current) { + window.clearTimeout(timerRef.current); + } + + timerRef.current = window.setTimeout(() => { + setJustCopied(false); + }, 3000); + + ref.current?.select(); + }; + + const shareRoomLink = async () => { + try { + await navigator.share({ + title: t("roomDialog.shareTitle"), + text: t("roomDialog.shareTitle"), + url: activeRoomLink, + }); + } catch (error: any) { + // Just ignore. + } + }; + + return ( + <> + <h3 className="ShareDialog__active__header"> + {t("labels.liveCollaboration").replace(/\./g, "")} + </h3> + <TextField + defaultValue={collabAPI.getUsername()} + placeholder="Your name" + label="Your name" + onChange={collabAPI.setUsername} + onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()} + /> + <div className="ShareDialog__active__linkRow"> + <TextField + ref={ref} + label="Link" + readonly + fullWidth + value={activeRoomLink} + /> + {isShareSupported && ( + <FilledButton + size="large" + variant="icon" + label="Share" + icon={getShareIcon()} + className="ShareDialog__active__share" + onClick={shareRoomLink} + /> + )} + <FilledButton + size="large" + label={t("buttons.copyLink")} + icon={copyIcon} + status={copyStatus} + onClick={() => { + copyRoomLink(); + onCopy(); + }} + /> + </div> + <div className="ShareDialog__active__description"> + <p> + <span + role="img" + aria-hidden="true" + className="ShareDialog__active__description__emoji" + > + 🔒{" "} + </span> + {t("roomDialog.desc_privacy")} + </p> + <p>{t("roomDialog.desc_exitSession")}</p> + </div> + + <div className="ShareDialog__active__actions"> + <FilledButton + size="large" + variant="outlined" + color="danger" + label={t("roomDialog.button_stopSession")} + icon={playerStopFilledIcon} + onClick={() => { + trackEvent("share", "room closed"); + collabAPI.stopCollaboration(); + if (!collabAPI.isCollaborating()) { + handleClose(); + } + }} + /> + </div> + </> + ); +}; + +const ShareDialogPicker = (props: ShareDialogProps) => { + const { t } = useI18n(); + + const { collabAPI } = props; + + const startCollabJSX = collabAPI ? ( + <> + <div className="ShareDialog__picker__header"> + {t("labels.liveCollaboration").replace(/\./g, "")} + </div> + + <div className="ShareDialog__picker__description"> + <div style={{ marginBottom: "1em" }}>{t("roomDialog.desc_intro")}</div> + {t("roomDialog.desc_privacy")} + </div> + + <div className="ShareDialog__picker__button"> + <FilledButton + size="large" + label={t("roomDialog.button_startSession")} + icon={playerPlayIcon} + onClick={() => { + trackEvent("share", "room creation", `ui (${getFrame()})`); + collabAPI.startCollaboration(null); + }} + /> + </div> + + {props.type === "share" && ( + <div className="ShareDialog__separator"> + <span>{t("shareDialog.or")}</span> + </div> + )} + </> + ) : null; + + return ( + <> + {startCollabJSX} + + {props.type === "share" && ( + <> + <div className="ShareDialog__picker__header"> + {t("exportDialog.link_title")} + </div> + <div className="ShareDialog__picker__description"> + {t("exportDialog.link_details")} + </div> + + <div className="ShareDialog__picker__button"> + <FilledButton + size="large" + label={t("exportDialog.link_button")} + icon={LinkIcon} + onClick={async () => { + await props.onExportToBackend(); + props.handleClose(); + }} + /> + </div> + </> + )} + </> + ); +}; + +const ShareDialogInner = (props: ShareDialogProps) => { + const activeRoomLink = useAtomValue(activeRoomLinkAtom); + + return ( + <Dialog size="small" onCloseRequest={props.handleClose} title={false}> + <div className="ShareDialog"> + {props.collabAPI && activeRoomLink ? ( + <ActiveRoomDialog + collabAPI={props.collabAPI} + activeRoomLink={activeRoomLink} + handleClose={props.handleClose} + /> + ) : ( + <ShareDialogPicker {...props} /> + )} + </div> + </Dialog> + ); +}; + +export const ShareDialog = (props: { + collabAPI: CollabAPI | null; + onExportToBackend: OnExportToBackend; +}) => { + const [shareDialogState, setShareDialogState] = useAtom(shareDialogStateAtom); + + const { openDialog } = useUIAppState(); + + useEffect(() => { + if (openDialog) { + setShareDialogState({ isOpen: false }); + } + }, [openDialog, setShareDialogState]); + + if (!shareDialogState.isOpen) { + return null; + } + + return ( + <ShareDialogInner + handleClose={() => setShareDialogState({ isOpen: false })} + collabAPI={props.collabAPI} + onExportToBackend={props.onExportToBackend} + type={shareDialogState.type} + /> + ); +}; diff --git a/excalidraw-app/tests/LanguageList.test.tsx b/excalidraw-app/tests/LanguageList.test.tsx new file mode 100644 index 0000000..a0cfe07 --- /dev/null +++ b/excalidraw-app/tests/LanguageList.test.tsx @@ -0,0 +1,34 @@ +import { defaultLang } from "@excalidraw/excalidraw/i18n"; +import { UI } from "@excalidraw/excalidraw/tests/helpers/ui"; +import { + screen, + fireEvent, + waitFor, + render, +} from "@excalidraw/excalidraw/tests/test-utils"; + +import ExcalidrawApp from "../App"; + +describe("Test LanguageList", () => { + it("rerenders UI on language change", async () => { + await render(<ExcalidrawApp />); + + // select rectangle tool to show properties menu + UI.clickTool("rectangle"); + // english lang should display `thin` label + expect(screen.queryByTitle(/thin/i)).not.toBeNull(); + fireEvent.click(document.querySelector(".dropdown-menu-button")!); + + fireEvent.change(document.querySelector(".dropdown-select__language")!, { + target: { value: "de-DE" }, + }); + // switching to german, `thin` label should no longer exist + await waitFor(() => expect(screen.queryByTitle(/thin/i)).toBeNull()); + // reset language + fireEvent.change(document.querySelector(".dropdown-select__language")!, { + target: { value: defaultLang.code }, + }); + // switching back to English + await waitFor(() => expect(screen.queryByTitle(/thin/i)).not.toBeNull()); + }); +}); diff --git a/excalidraw-app/tests/MobileMenu.test.tsx b/excalidraw-app/tests/MobileMenu.test.tsx new file mode 100644 index 0000000..a6eef3b --- /dev/null +++ b/excalidraw-app/tests/MobileMenu.test.tsx @@ -0,0 +1,51 @@ +import ExcalidrawApp from "../App"; +import { + mockBoundingClientRect, + render, + restoreOriginalGetBoundingClientRect, +} from "@excalidraw/excalidraw/tests/test-utils"; + +import { UI } from "@excalidraw/excalidraw/tests/helpers/ui"; + +describe("Test MobileMenu", () => { + const { h } = window; + const dimensions = { height: 400, width: 800 }; + + beforeAll(() => { + mockBoundingClientRect(dimensions); + }); + + beforeEach(async () => { + await render(<ExcalidrawApp />); + // @ts-ignore + h.app.refreshViewportBreakpoints(); + // @ts-ignore + h.app.refreshEditorBreakpoints(); + }); + + afterAll(() => { + restoreOriginalGetBoundingClientRect(); + }); + + it("should set device correctly", () => { + expect(h.app.device).toMatchInlineSnapshot(` + { + "editor": { + "canFitSidebar": false, + "isMobile": true, + }, + "isTouchScreen": false, + "viewport": { + "isLandscape": false, + "isMobile": true, + }, + } + `); + }); + + it("should initialize with welcome screen and hide once user interacts", async () => { + expect(document.querySelector(".welcome-screen-center")).toMatchSnapshot(); + UI.clickTool("rectangle"); + expect(document.querySelector(".welcome-screen-center")).toBeNull(); + }); +}); diff --git a/excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap b/excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap new file mode 100644 index 0000000..77fc147 --- /dev/null +++ b/excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap @@ -0,0 +1,247 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Test MobileMenu > should initialize with welcome screen and hide once user interacts 1`] = ` +<div + class="welcome-screen-center" +> + <div + class="welcome-screen-center__logo excalifont welcome-screen-decor" + > + <div + class="ExcalidrawLogo is-small" + > + <svg + class="ExcalidrawLogo-icon" + fill="none" + viewBox="0 0 40 40" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M39.9 32.889a.326.326 0 0 0-.279-.056c-2.094-3.083-4.774-6-7.343-8.833l-.419-.472a.212.212 0 0 0-.056-.139.586.586 0 0 0-.167-.111l-.084-.083-.056-.056c-.084-.167-.28-.278-.475-.167-.782.39-1.507.973-2.206 1.528-.92.722-1.842 1.445-2.708 2.25a8.405 8.405 0 0 0-.977 1.028c-.14.194-.028.361.14.444-.615.611-1.23 1.223-1.843 1.861a.315.315 0 0 0-.084.223c0 .083.056.166.111.194l1.09.833v.028c1.535 1.528 4.244 3.611 7.12 5.861.418.334.865.667 1.284 1 .195.223.39.473.558.695.084.11.28.139.391.055.056.056.14.111.196.167a.398.398 0 0 0 .167.056.255.255 0 0 0 .224-.111.394.394 0 0 0 .055-.167c.029 0 .028.028.056.028a.318.318 0 0 0 .224-.084l5.082-5.528a.309.309 0 0 0 0-.444Zm-14.63-1.917a.485.485 0 0 0 .111.14c.586.5 1.2 1 1.843 1.555l-2.569-1.945-.251-.166c-.056-.028-.112-.084-.168-.111l-.195-.167.056-.056.055-.055.112-.111c.866-.861 2.346-2.306 3.1-3.028-.81.805-2.43 3.167-2.095 3.944Zm8.767 6.89-2.122-1.612a44.713 44.713 0 0 0-2.625-2.5c1.145.861 2.122 1.611 2.262 1.75 1.117.972 1.06.806 1.815 1.445l.921.666a1.06 1.06 0 0 1-.251.25Zm.558.416-.056-.028c.084-.055.168-.111.252-.194l-.196.222ZM1.089 5.75c.055.361.14.722.195 1.056.335 1.833.67 3.5 1.284 4.75l.252.944c.084.361.223.806.363.917 1.424 1.25 3.602 3.11 5.947 4.889a.295.295 0 0 0 .363 0s0 .027.028.027a.254.254 0 0 0 .196.084.318.318 0 0 0 .223-.084c2.988-3.305 5.221-6.027 6.813-8.305.112-.111.14-.278.14-.417.111-.111.195-.25.307-.333.111-.111.111-.306 0-.39l-.028-.027c0-.055-.028-.139-.084-.167-.698-.666-1.2-1.138-1.731-1.638-.922-.862-1.871-1.75-3.881-3.75l-.028-.028c-.028-.028-.056-.056-.112-.056-.558-.194-1.703-.389-3.127-.639C6.087 2.223 3.21 1.723.614.944c0 0-.168 0-.196.028l-.083.084c-.028.027-.056.055-.224.11h.056-.056c.028.167.028.278.084.473 0 .055.112.5.112.555l.782 3.556Zm15.496 3.278-.335-.334c.084.112.196.195.335.334Zm-3.546 4.666-.056.056c0-.028.028-.056.056-.056Zm-2.038-10c.168.167.866.834 1.033.973-.726-.334-2.54-1.167-3.379-1.445.838.167 1.983.334 2.346.472ZM1.424 2.306c.419.722.754 3.222 1.089 5.666-.196-.778-.335-1.555-.503-2.278-.251-1.277-.503-2.416-.838-3.416.056 0 .14 0 .252.028Zm-.168-.584c-.112 0-.223-.028-.307-.028 0-.027 0-.055-.028-.055.14 0 .223.028.335.083Zm-1.089.222c0-.027 0-.027 0 0ZM39.453 1.333c.028-.11-.558-.61-.363-.639.42-.027.42-.666 0-.666-.558.028-1.144.166-1.675.25-.977.194-1.982.389-2.96.61-2.205.473-4.383.973-6.561 1.557-.67.194-1.424.333-2.066.666-.224.111-.196.333-.084.472-.056.028-.084.028-.14.056-.195.028-.363.056-.558.083-.168.028-.252.167-.224.334 0 .027.028.083.028.11-1.173 1.556-2.485 3.195-3.909 4.945-1.396 1.611-2.876 3.306-4.356 5.056-4.719 5.5-10.052 11.75-15.943 17.25a.268.268 0 0 0 0 .389c.028.027.056.055.084.055-.084.084-.168.14-.252.222-.056.056-.084.111-.084.167a.605.605 0 0 0-.111.139c-.112.111-.112.305.028.389.111.11.307.11.39-.028.029-.028.029-.056.056-.056a.44.44 0 0 1 .615 0c.335.362.67.723.977 1.028l-.698-.583c-.112-.111-.307-.083-.39.028-.113.11-.085.305.027.389l7.427 6.194c.056.056.112.056.196.056s.14-.028.195-.084l.168-.166c.028.027.083.027.111.027.084 0 .14-.027.196-.083 10.052-10.055 18.15-17.639 27.42-24.417.083-.055.111-.166.111-.25.112 0 .196-.083.251-.194 1.704-5.194 2.039-9.806 2.15-12.083v-.028c0-.028.028-.056.028-.083.028-.056.028-.084.028-.084a1.626 1.626 0 0 0-.111-1.028ZM21.472 9.5c.446-.5.893-1.028 1.34-1.5-2.876 3.778-7.65 9.583-14.408 16.5 4.607-5.083 9.242-10.333 13.068-15ZM5.193 35.778h.084-.084Zm3.462 3.194c-.027-.028-.027-.028 0-.028v.028Zm4.16-3.583c.224-.25.448-.472.699-.722 0 0 0 .027.028.027-.252.223-.475.445-.726.695Zm1.146-1.111c.14-.14.279-.334.446-.5l.028-.028c1.648-1.694 3.351-3.389 5.082-5.111l.028-.028c.419-.333.921-.694 1.368-1.028a379.003 379.003 0 0 0-6.952 6.695ZM24.794 6.472c-.921 1.195-1.954 2.778-2.82 4.028-2.736 3.944-11.532 13.583-11.727 13.75a1976.983 1976.983 0 0 1-8.042 7.639l-.167.167c-.14-.167-.14-.417.028-.556C14.49 19.861 22.03 10.167 25.074 5.917c-.084.194-.14.36-.28.555Zm4.83 5.695c-1.116-.64-1.646-1.64-1.34-2.611l.084-.334c.028-.083.084-.194.14-.277.307-.5.754-.917 1.257-1.167.027 0 .055 0 .083-.028-.028-.056-.028-.139-.028-.222.028-.167.14-.278.335-.278.335 0 1.369.306 1.76.639.111.083.223.194.335.305.14.167.363.445.474.667.056.028.112.306.196.445.056.222.111.472.084.694-.028.028 0 .194-.028.194a2.668 2.668 0 0 1-.363 1.028c-.028.028-.028.056-.056.084l-.028.027c-.14.223-.335.417-.53.556-.643.444-1.369.583-2.095.389 0 0-.195-.084-.28-.111Zm8.154-.834a39.098 39.098 0 0 1-.893 3.167c0 .028-.028.083 0 .111-.056 0-.084.028-.14.056-2.206 1.61-4.356 3.305-6.506 5.028 1.843-1.64 3.686-3.306 5.613-4.945.558-.5.949-1.139 1.06-1.861l.28-1.667v-.055c.14-.334.67-.195.586.166Z" + fill="currentColor" + /> + </svg> + <svg + class="ExcalidrawLogo-text" + fill="none" + viewBox="0 0 450 55" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M429.27 96.74c2.47-1.39 4.78-3.02 6.83-4.95 1.43-1.35 2.73-2.86 3.81-4.51-.66.9-1.4 1.77-2.23 2.59-2.91 2.84-5.72 5.09-8.42 6.87h.01ZM343.6 69.36c.33 3.13.58 6.27.79 9.4.09 1.37.18 2.75.25 4.12-.12-4.46-.27-8.93-.5-13.39-.11-2.08-.24-4.16-.4-6.24-.06 1.79-.11 3.85-.13 6.11h-.01ZM378.47 98.34c.01-.37.07-1.13.01-6.51-.11 1.9-.22 3.81-.31 5.71-.07 1.42-.22 2.91-.16 4.35.39.03.78.07 1.17.1-.92-.85-.76-2.01-.72-3.66l.01.01ZM344.09 86.12c-.09-2.41-.22-4.83-.39-7.24v12.21c.15-.05.32-.09.47-.14.05-1.61-.03-3.23-.09-4.83h.01ZM440.69 66.79c-.22-.34-.45-.67-.69-.99-3.71-4.87-9.91-7.14-15.65-8.55-1.05-.26-2.12-.49-3.18-.71 2.29.59 4.48 1.26 6.64 2.02 7.19 2.54 10.57 5.41 12.88 8.23ZM305.09 72.46l1.2 3.6c.84 2.53 1.67 5.06 2.46 7.61.24.78.5 1.57.73 2.36.22-.04.44-.08.67-.12a776.9 776.9 0 0 1-5.01-13.57c-.02.04-.03.09-.05.13v-.01ZM345.49 90.25v.31c1.48-.42 3.05-.83 4.66-1.2-1.56.25-3.12.52-4.66.89ZM371.02 90.22c0-.57-.04-1.14-.11-1.71-.06-.02-.12-.04-.19-.05-.21-.05-.43-.08-.65-.11.42.16.74.88.95 1.87ZM398.93 54.23c-.13 0-.27-.01-.4-.02l.03.4c.11-.15.23-.27.37-.38ZM401.57 62.28v-.15c-1.22-.24-2.86-.61-3.23-1.25-.09-.15-.18-.51-.27-.98-.09.37-.2.73-.33 1.09 1.24.56 2.52.98 3.83 1.29ZM421.73 88.68c-2.97 1.65-6.28 3.12-9.69 3.68v.18c4.72-.14 11.63-3.85 16.33-8.38-2.04 1.75-4.33 3.24-6.63 4.53l-.01-.01ZM411.28 80.92c-.05-1.2-.09-2.4-.15-3.6-.21 5.66-.46 11.38-.47 14.51.24-.02.48-.04.71-.07.15-3.61.05-7.23-.09-10.83v-.01Z" + transform="translate(-144.023 -51.76)" + /> + <path + d="M425.38 67.41c-3.5-1.45-7.19-2.57-14.06-3.62.09 1.97.06 4.88-.03 8.12.03.04.06.09.06.15.19 1.36.28 2.73.37 4.1.25 3.77.39 7.55.41 11.33 0 1.38-.01 2.76-.07 4.13 1.4-.25 2.78-.65 4.12-1.15 4.07-1.5 7.94-3.78 11.28-6.54 2.33-1.92 5.13-4.49 5.88-7.58.63-3.53-2.45-6.68-7.97-8.96l.01.02ZM411.35 92.53v-.06l-.34.03c.11.01.22.03.34.03ZM314.26 64.06c-.23-.59-.47-1.17-.7-1.75.57 1.62 1.11 3.25 1.6 4.9l.15.54 2.35 6.05c.32.82.66 1.64.98 2.46-1.38-4.1-2.83-8.17-4.39-12.2h.01ZM156.82 103.07c-.18.13-.38.23-.58.33 1.32-.03 2.66-.2 3.93-.34.86-.09 1.72-.22 2.58-.33-2.12.1-4.12.17-5.94.34h.01ZM210.14 68.88s.03.04.05.07c.18-.31.39-.64.58-.96-.21.3-.42.6-.64.89h.01ZM201.65 82.8c-.5.77-1.02 1.56-1.49 2.37 1.11-1.55 2.21-3.1 3.2-4.59-.23.23-.49.51-.75.79-.32.47-.65.95-.96 1.43ZM194.03 98.66c-.33-.4-.65-.84-1.05-1.17-.24-.2-.07-.49.17-.56-.23-.26-.42-.5-.63-.75 1.51-2.55 3.93-5.87 6.4-9.28-.17-.08-.29-.28-.2-.49.04-.09.09-.17.13-.26-1.21 1.78-2.42 3.55-3.61 5.33-.87 1.31-1.74 2.64-2.54 4-.29.5-.63 1.04-.87 1.61.81.65 1.63 1.27 2.47 1.88-.09-.11-.18-.21-.27-.32v.01ZM307.79 82.93c-1-3.17-2.05-6.32-3.1-9.48-1.62 4.08-3.69 9.17-6.16 15.19 3.32-1.04 6.77-1.87 10.27-2.5-.32-1.08-.67-2.15-1.01-3.21ZM149.5 80.7c.05-1.71.04-3.43 0-5.14-.1 2.26-.16 4.51-.22 6.77-.02.73-.03 1.46-.04 2.19.14-1.27.2-2.55.24-3.82h.02ZM228.98 98.3c.39 1.25.91 3.03.94 3.91.06-.03.12-.07.17-.1.08-1.29-.55-2.65-1.11-3.81ZM307.72 53.36c.81.5 1.53 1.04 2.07 1.49-.38-.8-.78-1.58-1.21-2.35-.17.03-.34.06-.51.11-.43.12-.86.26-1.29.41.35-.01.53.1.94.34ZM283.69 96.14c3.91-7.25 6.89-13.35 8.88-18.15l1.1-2.66c-1.27 2.64-2.56 5.27-3.83 7.9-1.53 3.15-3.06 6.31-4.58 9.47-.87 1.81-1.76 3.62-2.54 5.47.04.02.07.04.11.07.05.05.1.09.15.14.05-.73.27-1.48.71-2.24ZM289.92 103.23s-.04.01-.05.03c0-.02.04-.03.05-.04.05-.05.11-.1.16-.15l.21-.21c-.55 0-1.5-.27-2.55-.72.4.26.8.51 1.22.74.24.13.48.26.73.37.05.02.1.03.14.05a.27.27 0 0 1 .08-.07h.01ZM269.23 68.49c-.39-.19-.82-.48-1.33-.87-3.06-1.56-6.31-2.78-9.36-2.35-3.5.49-5.7 1.11-7.74 2.44 5.71-2.6 12.82-2.07 18.44.79l-.01-.01ZM177.87 53.69l1.06.03c-.96-.22-2-.25-2.89-.3-4.95-.26-9.99.33-14.86 1.19-2.44.43-4.88.95-7.28 1.59 9.09-1.76 15.69-2.77 23.97-2.51ZM219.85 55.51c-.18.12-.36.27-.56.45-.45.53-.86 1.11-1.26 1.66-1.91 2.61-3.71 5.31-5.57 7.95l-.12.18 8.05-10.11c-.18-.05-.36-.1-.55-.13h.01ZM510.71 54.1c.12-.15.29-.3.53-.45.69-.4 3.72-.63 5.87-.74-.36-.02-.73-.04-1.09-.05-1.84-.03-3.67.09-5.49.35.05.3.12.59.18.88v.01ZM510.76 86.02c1.37-3.07 2.49-6.27 3.57-9.46.55-1.64 1.12-3.3 1.6-4.97-1.59 4.01-3.67 9.14-6.2 15.3.24-.08.5-.14.74-.22.1-.22.19-.44.29-.65ZM566.95 75.76c.11-.02.23.03.31.11-.05-.13-.09-.26-.14-.39-.05.09-.11.18-.17.28ZM511.33 86.41c3.08-.89 6.24-1.62 9.46-2.14-1.51-3.98-2.98-7.96-4.39-11.87-.05.15-.09.31-.14.46-1.02 3.32-2.15 6.61-3.39 9.85-.48 1.25-.98 2.49-1.53 3.7h-.01ZM578.24 74.45c.11-.44.23-.87.35-1.31-.31.7-.64 1.39-.97 2.08.09.21.19.4.28.61.12-.46.23-.92.35-1.38h-.01ZM520.62 53.11c-.09 0-.18-.01-.28-.02.38.34.29 1.08.93 2.53l6.65 17.15c2.2 5.68 4.69 11.36 7.41 16.87l1.06 2.17c-2.95-7.05-5.92-14.08-8.87-21.13-1.58-3.79-3.16-7.59-4.7-11.4-.78-1.92-1.73-3.89-2.25-5.91-.03-.1 0-.19.04-.26h.01ZM578.78 77.87c1.45-5.77 3.07-10.43 3.58-13.36.05-.34.16-.88.31-1.55-.67 1.79-1.37 3.56-2.08 5.33-.12.43-.23.86-.35 1.29-.65 2.43-1.29 4.86-1.9 7.3.14.33.29.65.43 1l.01-.01ZM545.3 94.66c.02-.44.03-.83.05-1.12.02-1.01.05-2.02.11-3.02.03-6.66-.46-14.33-1.46-22.8-.13-.42-.27-1.24-.56-2.89 0-.02 0-.04-.01-.06.62 6.61.95 13.25 1.32 19.87.17 3.08.33 6.16.52 9.23.02.25.03.52.04.78l-.01.01ZM580.77 102.81c.13.2.27.38.37.49.27-.11.53-.22.8-.32-.43.09-.82.05-1.17-.16v-.01ZM530.48 104.07h.33c-.36-.13-.71-.32-1.04-.56.14.24.3.47.45.7.06-.08.14-.13.26-.13v-.01ZM542.63 58.82c.06.23.11.47.15.71.14-.33.36-.62.7-.86-.28.05-.57.11-.85.15ZM583.81 57.87c.15-.7.29-1.41.42-2.11-.14.45-.28.9-.42 1.34-.46 1.44-.89 2.89-1.31 4.34.44-1.19.88-2.37 1.31-3.57ZM523.62 91.48c-4.66 1.17-9.05 2.89-14.02 5.27 4.65-1.84 9.48-3.29 14.28-4.63-.09-.22-.17-.41-.26-.64ZM460.64 78.3c-.04-2.9-.11-5.81-.28-8.71-.1-1.68-.17-3.43-.5-5.09-.07.02-.14.03-.2.05.3 6.54.45 12.17.51 17.12.17-.07.34-.14.51-.2 0-1.06-.01-2.11-.03-3.17h-.01ZM470.63 63.24c-3.38-.26-6.81.32-10.1 1.1.41 2.01.47 4.14.57 6.18.18 3.55.25 7.11.27 10.67 3.31-1.38 6.5-3.12 9.3-5.35 1.96-1.56 3.86-3.41 5.02-5.66.73-1.41 1.19-3.22.26-4.65-1.09-1.7-3.46-2.14-5.32-2.29ZM460.29 63.68c1-.24 2.01-.46 3.04-.65-1.15.16-2.37.38-3.71.69v.13c.07-.02.15-.04.22-.05.11-.13.3-.18.45-.11v-.01ZM457.24 100.96c.43-.03.86-.07 1.29-.11.14-.49.27-.99.38-1.49-.44.7-1 1.23-1.67 1.6ZM482.88 104.98c-.18.23-.36.38-.55.47.14.09.27.19.4.28a70.76 70.76 0 0 0 4.37-4.63c.76-.89 1.52-1.81 2.19-2.77-.3-.27-.61-.53-.92-.79-.07 1.94-4.62 6.32-5.49 7.45v-.01Z" + transform="translate(-144.023 -51.76)" + /> + <path + d="M474.36 63.31c-.4-.16-.84-.27-1.29-.37 1.56.42 3.08 1.22 3.76 2.74.62 1.4.32 2.95-.28 4.32.7-1.22.94-2.34.74-3.47-.24-1.33-1.19-2.54-2.93-3.21v-.01ZM477.34 89.18c-1.2-.81-2.4-1.62-3.6-2.42-.14.1-.26.19-.4.29 1.4.67 2.73 1.39 4 2.13ZM465.88 93.85c.37.25.74.5 1.1.75.46.32.92.65 1.38.97-1.57-1.2-2.01-1.61-2.49-1.72h.01ZM574.92 90.06c-2.28-5.21-4.93-11.13-5.67-12.26-.1-.15-1.57-3.01-1.63-3.08 0 0-.01.02-.02.02.4 1.37 1.09 2.69 1.65 3.99 2.14 4.95 4.36 9.86 6.67 14.73.6 1.26 1.21 2.52 1.83 3.78-.75-2.01-1.64-4.45-2.83-7.18ZM448.73 65.29c.1.2.22.38.34.57.22-.02.43-.06.65-.08v-.08c-.14-.05-.25 0-.99-.41ZM460.16 94.81c-.02.31-.06.59-.1.89-.03 1.71-.33 3.43-.79 5.07.15-.02.3-.03.45-.05.01-.04.02-.08.03-.11.09-.34.15-.69.2-1.03.17-1.07.25-2.16.33-3.24.05-.69.08-1.39.12-2.08-.27.1-.27.26-.24.57v-.02Z" + transform="translate(-144.023 -51.76)" + /> + <path + d="m328.67 98.12-3.22-6.58c-1.29-2.63-2.53-5.29-3.72-7.97-.25-.85-.52-1.69-.79-2.53-.81-2.57-1.67-5.12-2.55-7.67-1.92-5.53-3.9-11.08-6.32-16.41-.72-1.58-1.46-3.44-2.63-4.79-.03-.17-.16-.29-.34-.36a.282.282 0 0 0-.23-.04c-.06-.01-.12 0-.18.01-.74.06-1.5.38-2.19.61-2.22.77-4.4 1.64-6.63 2.38-.03-.08-.06-.16-.09-.25-.15-.42-.82-.24-.67.19.03.09.07.19.1.28l-.18.06c-.36.11-.28.6 0 .68.18 1.18.63 2.36.98 3.49.03.09.06.17.08.26-.08.23-.17.46-.24.64-.37.98-.79 1.94-1.21 2.9-1.27 2.89-2.62 5.75-3.98 8.6-3.18 6.67-6.44 13.31-9.64 19.97-1.08 2.25-2.2 4.5-3.15 6.81-.13.32.24.5.5.37 1.34 1.33 2.84 2.5 4.4 3.57.65.44 1.31.87 2.01 1.24.4.22.86.48 1.33.5.24.01.35-.19.33-.37.11-.1.21-.21.28-.28.41-.41.81-.84 1.2-1.26.85-.92 1.69-1.87 2.5-2.84 6.31-2.34 12.6-4.31 18.71-5.84 2.14 5.3 3.43 8.43 3.97 9.58.55 1.05 1.15 1.88 1.82 2.52 1.32.56 6.96-.03 9.23-1.96.87-1.28 1.19-2.67.93-4.15-.09-.5-.22-.95-.4-1.33l-.01-.03Zm-20.09-45.61c.43.77.83 1.56 1.21 2.35-.54-.45-1.27-.99-2.07-1.49-.42-.24-.6-.35-.94-.34.43-.15.85-.29 1.29-.41.17-.05.34-.08.51-.11Zm-25.86 45.66c.78-1.85 1.67-3.66 2.54-5.47 1.51-3.16 3.05-6.31 4.58-9.47 1.28-2.63 2.56-5.26 3.83-7.9l-1.1 2.66c-1.99 4.79-4.97 10.9-8.88 18.15-.43.76-.66 1.51-.71 2.24-.05-.05-.1-.09-.15-.14a.259.259 0 0 0-.11-.07Zm6.24 4.71c-.42-.23-.82-.48-1.22-.74 1.05.45 2 .72 2.55.72l-.21.21c-.05.05-.11.1-.16.15-.01.01-.04.03-.05.04 0-.02.03-.02.05-.03a.27.27 0 0 0-.08.07c-.05-.02-.1-.03-.14-.05-.25-.1-.49-.24-.73-.37h-.01Zm15.73-29.43c1.05 3.15 2.1 6.31 3.1 9.48.34 1.06.69 2.13 1.01 3.21-3.5.63-6.95 1.46-10.27 2.5 2.48-6.03 4.54-11.11 6.16-15.19Zm4.79 12.57c-.23-.79-.49-1.58-.73-2.36-.79-2.54-1.63-5.08-2.46-7.61l-1.2-3.6c.02-.04.04-.09.05-.13 1.6 4.45 3.28 9 5.01 13.57l-.67.12v.01Zm5.83-18.27-.15-.54c-.49-1.64-1.03-3.28-1.6-4.9.23.58.47 1.17.7 1.75 1.56 4.03 3.01 8.1 4.39 12.2-.33-.82-.67-1.64-.98-2.46l-2.35-6.05h-.01ZM390.43 79.37c-.13-10.43-.22-17.5-.24-19.97-.24-1.6.21-2.88-.65-3.65-.14-.13-.32-.23-.52-.32h.03c.45 0 .45-.69 0-.7-1.75-.03-3.5-.04-5.25-.14-1.38-.08-2.76-.21-4.15-.31-.07 0-.12.01-.17.04-.21-.07-.47.03-.45.31l.03.45c-.11.14-.19.3-.22.5-.21 1.26-.32 13.67-.36 23.59-.32 5.79-.67 11.57-.97 17.36-.09 1.73-.29 3.54-.21 5.3-.39.02-.38.64.04.69v.12c.05.44.74.45.7 0v-.06c1.1.09 2.2.21 3.3.3 1.14.19 2.44.2 3.29.17 1.73-.05 2.92-.05 3.8-.37.45-.05.9-.11 1.35-.17.44-.06.25-.73-.19-.67h-.01c.24-.32.45-.72.62-1.25.66-1.84.41-6.36.34-11.33l-.13-9.9.02.01Zm-12.26 18.17c.09-1.91.2-3.81.31-5.71.06 5.38 0 6.14-.01 6.51-.05 1.65-.21 2.81.72 3.66-.39-.04-.78-.07-1.17-.1-.06-1.44.09-2.93.16-4.35l-.01-.01ZM588.97 53.85c-2.06-.25-3.17-.51-3.76-.6a.3.3 0 0 1 .04-.08c.22-.39-.39-.75-.6-.35-.56 1.02-.9 2.19-1.26 3.29-.61 1.88-1.17 3.78-1.72 5.68-.63 2.19-1.24 4.39-1.83 6.59-.81 2.03-1.67 4.05-2.61 6.03-1.7-3.64-3.11-6.04-4.03-7.57-2.26-3.74-2.85-5.48-3.57-6.08l.31-.09c.43-.12.25-.8-.19-.67-1.06.3-2.12.6-3.17.95-.93.32-1.85.69-2.76 1.07-.13.05-.19.16-.22.27-.04.02-.08.05-.11.07-.04-.06-.07-.12-.11-.18a.354.354 0 0 0-.48-.12c-.16.09-.22.32-.13.48l.33.54c0 .09.02.18.06.28.51 1.16.78 1.38.72 1.47-2.42 3.44-5.41 7.86-6.2 9.1-1.27 1.97-2.01 3.14-2.45 3.84l-.91-6.56-.43-4.1c-.19-1.85-.37-3.23-.53-4.13-.19-1.1-.3-2.15-.45-3.16-.2-1.36-.29-2.06-.47-2.42h.04c.45.02.45-.68 0-.7-3.43-.16-6.81.94-10.17 1.48-.24-.22-.73-.04-.58.32.24.59.33 1.25.43 1.87.17 1.06.29 2.13.4 3.2.32 3.09.53 6.2.74 9.3.44 6.75.77 13.51 1.17 20.26.11 1.95.13 3.96.46 5.89.05.3.37.31.55.14.74 1.71 2.87 1.27 6.13 1.27 1.34 0 2.39.04 2.99-.11.02.32.48.53.63.18 3.61-8.26 7.41-16.46 12.05-24.2.03-.05.04-.1.05-.15.3.73.64 1.45.94 2.16.97 2.26 1.97 4.52 2.98 6.76 2.26 5.03 4.54 10.07 7.09 14.96.47.9.94 1.79 1.47 2.65.2.32.4.67.66.96-.18.25 0 .68.34.54.91-.38 1.82-.75 2.76-1.07 1.04-.35 2.11-.65 3.17-.95.39-.11.28-.66-.07-.68.62-.4.95-.96.87-1.91-.3-3.34.72-7.47.86-8.52l2.14-11.43c1.75-10.74 3.13-17.51 3.23-20.86.02-.49.08-2.84.13-3.24.17-1.25.48-1-4.96-1.65l.03-.02Zm-46.19 5.67c-.04-.24-.09-.48-.15-.71l.85-.15c-.34.24-.56.53-.7.86Zm1.95 25.12c-.36-6.63-.7-13.26-1.32-19.87 0 .02 0 .04.01.06.29 1.65.44 2.47.56 2.89 1 8.46 1.5 16.14 1.46 22.8-.06.99-.1 2-.11 3.02-.01.29-.03.68-.05 1.12-.01-.26-.03-.53-.04-.78-.19-3.08-.35-6.16-.52-9.23l.01-.01Zm36.4 18.66c-.11-.11-.24-.29-.37-.49.35.21.74.26 1.17.16-.27.11-.53.22-.8.32v.01Zm-.89-33.72c.12-.43.23-.86.35-1.29.71-1.77 1.41-3.55 2.08-5.33-.15.68-.26 1.22-.31 1.55-.5 2.94-2.13 7.59-3.58 13.36-.15-.35-.29-.66-.43-1 .61-2.44 1.25-4.87 1.9-7.3l-.01.01Zm3.56-12.48c.14-.44.28-.89.42-1.34-.13.7-.27 1.41-.42 2.11-.43 1.19-.86 2.38-1.31 3.57.42-1.45.85-2.9 1.31-4.34Zm-5.22 16.05c-.11.44-.23.87-.35 1.31-.12.46-.23.92-.35 1.38-.1-.22-.19-.4-.28-.61.34-.69.66-1.38.97-2.08h.01Zm-11.64 2.62c.06-.1.12-.19.17-.28.05.13.09.26.14.39a.398.398 0 0 0-.31-.11Zm2.3 2.98c-.56-1.3-1.25-2.63-1.65-3.99 0 0 .01-.02.02-.02.06.08 1.52 2.93 1.63 3.08.73 1.13 3.38 7.04 5.67 12.26 1.2 2.73 2.08 5.17 2.83 7.18-.62-1.25-1.23-2.51-1.83-3.78-2.31-4.87-4.53-9.78-6.67-14.73ZM275.92 87.03c-1.06-2.18-1.13-3.45-2.44-2.93-1.52.57-2.94 1.3-4.5 2.1-1.4.72-2.68 1.44-3.92 2.12.01-.25-.24-.5-.51-.34-4.8 2.93-12.41 4.7-17.28 1.31-1.98-1.77-3.32-4.15-3.97-5.78-.29-.95-.49-1.94-.63-2.93-.14-3.34 1.58-6.53 3.9-9.12.8-.79 1.68-1.51 2.66-2.12 3.7-2.3 8.22-3.07 12.51-2.51 2.71.35 5.32 1.24 7.71 2.55.39.22.75-.39.35-.6-.18-.1-.37-.18-.55-.27.56.27 1.03.33 1.51.19l-.48.39c-.15.11-.23.3-.13.48.09.15.33.24.48.13 1.3-.97 2.46-2.09 3.45-3.37.37-.29.64-.6.65-.97v-.02c.08-.33-.03-.7-.21-1.08-.31-.87-.98-2.01-2.19-3.26-2.43-2.52-3.79-3.45-5.68-4.26-1.14-.49-3.12-1.06-4.42-1.23-3.28-.42-10.64-1.21-18.18 4.11-7.74 5.46-11.94 12.3-12.23 20.61-.08 2.06.04 3.98.34 5.71.74 4.18 2.57 8 5.44 11.34 4.26 4.99 9.76 7.52 16.34 7.52 4.85 0 9.69-1.77 14.89-4.62.23-.12.45-.23.68-.35 2.19-1.1 4.37-2.23 6.46-3.5.49-.3 1.03-.61 1.5-.98 1.47-.87 1.11-1.12.49-2.95-.39-1.14-.76-2.7-2.06-5.36l.02-.01Zm-17.38-21.76c3.05-.42 6.31.79 9.36 2.35.51.39.94.68 1.33.87-5.61-2.86-12.72-3.39-18.44-.79 2.05-1.33 4.24-1.95 7.74-2.44l.01.01ZM443.67 72.67c-.4-2.2-1.15-4.33-2.37-6.22-1.49-2.32-3.58-4.19-5.91-5.64-6.17-3.81-13.75-5.11-20.83-6.01-3.23-.41-6.47-.69-9.72-.92l-1.39-.12c-.85-.07-1.52-.1-2.05-.1-1.08-.06-2.17-.12-3.25-.17-.08 0-.14.02-.19.05-.1.05-.18.14-.16.3.27 2.55-.01 5.12-.92 7.52-.15.38.4.56.62.28 1.32.59 2.68 1.05 4.08 1.37 0 2.78-.14 7.58-.33 12.91 0 0 0 .02-.01.03-.61 3.66-.79 7.42-1 11.12-.23 4.01-.43 8.03-.44 12.05 0 .64 0 1.28.03 1.93.02.31 0 .68.15.96.06.11.14.16.24.17-.2.17-.21.54.11.59 3.83.67 7.78.71 11.68.25 2.3-.19 4.87-.65 7.65-1.56 1.85-.54 3.67-1.18 5.43-1.91 7.2-3.02 14.31-8.07 17.35-15.53.76-1.86 1.17-3.8 1.31-5.75.3-1.93.28-3.82-.09-5.58l.01-.02Zm-19.32-15.42c5.74 1.41 11.94 3.68 15.65 8.55.25.32.47.65.69.99-2.3-2.82-5.68-5.69-12.88-8.23-2.16-.76-4.35-1.43-6.64-2.02 1.06.21 2.13.45 3.18.71Zm-25.82-3.04c.13 0 .27.01.4.02-.14.1-.26.23-.37.38 0-.13-.02-.26-.03-.4Zm34.82 22.17c-.75 3.09-3.55 5.66-5.88 7.58-3.35 2.76-7.21 5.03-11.28 6.54-1.33.49-2.71.9-4.12 1.15.06-1.38.08-2.76.07-4.13-.02-3.78-.16-7.56-.41-11.33-.09-1.37-.18-2.74-.37-4.1 0-.06-.03-.11-.06-.15.09-3.25.12-6.16.03-8.12 6.86 1.05 10.56 2.17 14.06 3.62 5.52 2.28 8.59 5.44 7.97 8.96l-.01-.02Zm-22 16.15c-.12 0-.23-.02-.34-.03l.34-.03v.06Zm-.69-.7c0-3.13.26-8.84.47-14.51.06 1.2.11 2.41.15 3.6.15 3.6.25 7.23.09 10.83-.24.03-.48.05-.71.07v.01Zm-12.33-30.94c.37.63 2.01 1.01 3.23 1.25v.15c-1.31-.31-2.59-.73-3.83-1.29.12-.36.23-.72.33-1.09.08.48.18.84.27.98Zm13.7 31.65v-.18c3.41-.56 6.71-2.02 9.69-3.68 2.31-1.28 4.59-2.78 6.63-4.53-4.69 4.53-11.61 8.24-16.33 8.38l.01.01Zm24.07-.75c-2.05 1.93-4.37 3.56-6.83 4.95 2.7-1.78 5.52-4.03 8.42-6.87.82-.82 1.56-1.69 2.23-2.59-1.08 1.65-2.38 3.16-3.81 4.51h-.01ZM187.16 92.14c-.79-2.47-2.1-7.12-3.1-6.87-.19-.01-2.09.77-4.08 1.54-3.06 1.18-5.91 2.13-10.09 2.82-2.74.42-5.87 1.01-10.61 1.06.04-3.34.05-6.01.05-7.99 7.97-.65 12.33-2.11 16.37-3.55 1.11-.39 2.69-1.01 2.63-1.8-.08-.35-.55-1.39-1.17-2.61-.47-1.16-.98-2.31-1.61-3.38-.42-.71-1.04-1.69-1.86-2.06-.11-.08-.22-.13-.29-.12-.02 0-.04 0-.07.01-.19-.04-.39-.05-.6-.01-.17.03-.24.15-.25.28-.04.02-.09.04-.14.05-4.33 1.48-8.85 2.33-13.24 3.61a499.1 499.1 0 0 0-.31-8.19c4.51-.99 8.88-1.38 13.11-1.82 3.68-.38 6.28.12 7.47.34.59.11.9.16 1.16.18h.1c-.1.37.44.66.62.28.02-.04.03-.08.05-.13.15.2.53.22.62-.1.17-.58.19-1.21.21-1.81v-.36c.03-.15.05-.3.07-.45.52-2.47.33-5.09-.64-7.44-.11-.27-.44-.28-.6-.14-.08-.21-.15-.42-.24-.62-.19-.41-.79-.05-.6.35.03.07.05.15.09.22-.98-.42-2.15-.54-3.17-.63-2.17-.19-4.37-.14-6.54 0-5.7.35-11.4 1.3-16.91 2.79-2.08.56-4.13 1.22-6.14 2-4.54 1.05-3.79 1.51-2.17 6.07.18.51.46 1.68.54 1.94.82 2.47 1.08 2.13 3.1 2.13s0 .05 0 .08h.52c-.48 2.66-.51 5.45-.62 8.13-.15 3.48-.22 6.96-.28 10.45 0 .41-.01.82-.02 1.23-.16.29-.33.57-.51.85-.05.38-.09.77-.14 1.18-.42 3.52-.59 6.48-.52 8.8v.34c.02.47.05.76.06.87.16 1.57-.26 3.47 1.35 3.79 1.61.32 3.5.55 4.85.55.11 0 .22-.02.33-.02 1.79.24 3.67.05 5.45-.12 2.85-.28 5.69-.7 8.51-1.19 3.03-.53 6.05-1.14 9.04-1.86 2.4-.58 4.82-1.19 7.13-2.06.51-.19 1.73-.57 2.46-1.14 1.81-.68 2.18-1 1.57-2.67-.23-.62-.48-1.49-.91-2.78l-.03-.02Zm-11.12-38.71c.89.05 1.93.08 2.89.3-.33 0-.68-.02-1.06-.03-8.28-.26-14.88.75-23.97 2.51 2.41-.64 4.85-1.16 7.28-1.59 4.87-.86 9.91-1.45 14.86-1.19Zm-26.53 22.13c.03 1.71.04 3.43 0 5.14-.04 1.27-.11 2.55-.24 3.82 0-.73.02-1.46.04-2.19.05-2.26.12-4.51.22-6.77h-.02Zm6.73 27.85c.2-.1.4-.21.58-.33 1.82-.17 3.82-.24 5.94-.34-.86.11-1.72.24-2.58.33-1.27.14-2.61.31-3.93.34h-.01ZM534.48 85.44c-3.52-8.38-7.07-16.75-10.5-25.17-.63-1.54-1.25-3.09-1.86-4.65-.31-.8-.65-1.6-.87-2.43-.04-.17-.17-.24-.31-.25.1-.2 0-.51-.29-.53-1.59-.08-3.18-.22-4.78-.25-1.96-.03-3.91.13-5.84.42-.31.05-.31.38-.13.56-.03.06-.05.14-.04.22.23 1.54.63 3.06 1.16 4.53.13.35.27.7.41 1.06l-2.68 6.18c-.11.03-.2.09-.25.22-.67 1.9-1.52 3.73-2.34 5.56a536.85 536.85 0 0 1-3.9 8.45c-2.64 5.64-5.34 11.25-7.91 16.93-.44.97-.88 1.94-1.29 2.93-.2.48-.47 1-.55 1.52v.05c-.02.12.02.26.16.34 1.19.73 2.41 1.41 3.66 2.05 1.2.62 2.45 1.25 3.76 1.61.43.12.62-.55.19-.67-1.13-.31-2.2-.83-3.24-1.36 1.09.36 2.1.69 2.75.93 2.82 1.01 2.38 1.1 4.3-3.75 2.1-1.09 4.34-1.96 6.53-2.79 4.35-1.64 8.8-3.03 13.27-4.29.82 2.01 1.77 3.97 2.72 5.92.35.83.62 1.45.79 1.82.22.42.45.8.69 1.15.17.33.33.67.5 1 .42.8.84 1.63 1.4 2.35.23.29.6 0 .55-.31 1.53-.02 3.06-.07 4.58-.27.92-.12 1.82-.32 2.71-.54 1.39-.27 3.85-1.11 3.74-1.42-.67-1.96-1.55-3.87-2.34-5.78-1.57-3.78-3.16-7.56-4.75-11.33v-.01Zm-11.65-26.16c1.54 3.81 3.12 7.6 4.7 11.4 2.94 7.05 5.91 14.09 8.87 21.13l-1.06-2.17c-2.71-5.51-5.2-11.19-7.41-16.87l-6.65-17.15c-.65-1.45-.55-2.19-.93-2.53.09 0 .18.01.28.02a.29.29 0 0 0-.04.26c.52 2.02 1.47 3.98 2.25 5.91h-.01Zm-6.58 13.58c.05-.15.09-.31.14-.46 1.41 3.92 2.88 7.9 4.39 11.87-3.22.52-6.38 1.25-9.46 2.14.55-1.22 1.05-2.46 1.53-3.7 1.24-3.24 2.37-6.53 3.39-9.85h.01Zm-.23-20c.36 0 .73.03 1.09.05-2.15.1-5.18.33-5.87.74-.24.15-.41.3-.53.45-.06-.29-.13-.58-.18-.88 1.82-.26 3.65-.39 5.49-.35v-.01Zm-.09 18.72c-.49 1.67-1.05 3.33-1.6 4.97-1.07 3.19-2.19 6.38-3.57 9.46-.09.21-.19.43-.29.65-.25.07-.5.14-.74.22 2.53-6.16 4.61-11.29 6.2-15.3Zm-6.34 25.16c4.97-2.38 9.37-4.1 14.02-5.27l.26.64c-4.8 1.35-9.63 2.8-14.28 4.63Zm20.17 6.76c.33.23.68.42 1.04.56h-.33c-.12 0-.21.06-.26.13-.15-.23-.31-.45-.45-.7v.01ZM226.57 91.75c-3.55-4.74-6.68-9.11-9.31-12.99 9.2-15.25 10.05-17.81 10.35-18.38.17-.34 1.09-2.27.64-2.53-1.13-.65-1.03-.65-2.97-1.71-1.19-.65-3.04-1.61-4.53-2.12-1.71-.59-1.24-.36-3 2.77-.06.1-.11.2-.17.3-.75 1.02-1.48 2.05-2.2 3.09-1.88 2.71-3.73 5.45-5.69 8.1-3.68-4.91-6.88-8.76-9.51-11.43-.15-.15-.3-.29-.46-.42-1.27-1.28-7.24 3.53-7.93 5.58-.09.09-.19.16-.28.25-.27.26.03.64.33.58.19.65.5 1.29.94 1.91 3.85 5.06 7.19 9.76 9.94 14-1.23 2.61-3.06 5-4.67 7.38l-2.28 3.33c-.5.66-.93 1.23-1.29 1.69-.67.93-2.09 2.61-2.3 3.87-.51.85-1.16 1.84-1.29 2.83-.06.44.61.63.67.19.01-.08.04-.15.06-.22 1.36 1.08 2.76 2.11 4.19 3.11 1.3.91 2.62 1.85 4.04 2.56.21.1.4 0 .48-.17.24.07.48.14.72.2.44.1.62-.57.19-.67-2.02-.48-3.77-1.57-5.23-3.02-.47-.46-.9-.96-1.32-1.46 1.74 1.35 4.2 2.89 5.89 4.14 1.39 1.03 2.85-2.27 4.22-4.2 1.86-2.64 3.96-5.86 5.52-8.29l10.39 14.51c.67.81 1.14 1.21 1.57 1.36-.05.24.12.51.41.4 1.53-.58 3.05-1.19 4.54-1.87 1.52-.69 3.06-1.45 4.36-2.5a.28.28 0 0 0 .12-.23c1.66-1.1.81-1.74-1.41-4.91-1.13-1.58-1.71-2.36-3.7-5.01l-.03-.02Zm2.41 6.54c.56 1.15 1.19 2.52 1.11 3.81-.06.04-.12.07-.17.1-.03-.88-.55-2.66-.94-3.91Zm-16.51-32.73c1.86-2.65 3.65-5.35 5.57-7.95.4-.55.81-1.13 1.26-1.66.19-.18.38-.33.56-.45.18.03.36.08.55.13l-8.05 10.11.12-.18h-.01ZM192.7 95.48c.79-1.37 1.66-2.69 2.54-4 1.19-1.79 2.4-3.56 3.61-5.33-.04.09-.09.17-.13.26-.1.22.03.41.2.49-2.47 3.42-4.89 6.73-6.4 9.28.21.24.4.48.63.75-.24.07-.4.36-.17.56.4.33.72.77 1.05 1.17.09.11.18.21.27.32-.84-.61-1.66-1.24-2.47-1.88.24-.57.58-1.11.87-1.61v-.01Zm7.46-10.32c.47-.81.98-1.59 1.49-2.37.31-.48.64-.95.96-1.43.26-.29.52-.56.75-.79-.99 1.48-2.09 3.03-3.2 4.59Zm10.03-16.22s-.03-.05-.05-.07c.22-.29.43-.59.64-.89-.2.32-.4.65-.58.96h-.01ZM371.54 87.96c-.01-.08-.01-.16-.03-.23-.06-.38-.58-.29-.66.03-.3-.05-.6-.08-.81-.11-1.14-.15-2.29-.19-3.44-.2 1.04-.09 2.09-.18 3.14-.23.45-.02.45-.72 0-.7-6.57.35-13.14 1.23-19.65 2.11-1.53.21-3.05.42-4.57.68-.01 0-.02.01-.04.01-.04-3.33-.13-6.66-.24-9.99-.19-5.7-.4-11.41-.88-17.1-.13-1.51-.23-3.07-.49-4.58 0-.25 0-.48-.02-.68-.06-1.19-.04-2.61-.68-2.78-.16-.07-.72-.16-1.5-.24.22-.17.16-.62-.2-.63-1.19-.04-2.39.09-3.57.23-1.2.14-2.41.32-3.59.6-.16-.1-.41-.06-.5.12-.06.02-.13.03-.19.05-.35.1-.29.55-.03.66-.26.6-.19 2.27-.21 3-.02.66-.66 33.73-.9 40.3-.03.65.06 1.12.04 1.45-.16 3.05.87 4.96 6.34 3.93 1.09-.08 2.75-.77 5.36-1.43 4.13-1.04 5.78-1.52 6.2-1.65 6.43-1.69 6.78-1.97 11.72-2.43.55-.05 4.8-.38 6.03-.3.64.04 1.19.07 1.65.1.09 0 .16-.03.24-.05.1.27.56.33.66-.02.39-1.32.61-2.71.78-4.08.2-1.61.29-3.24.15-4.86.24.03.52-.23.38-.53-.09-.2-.27-.33-.49-.43v-.02Zm-.63.56c.07.57.11 1.14.11 1.71-.21-.99-.53-1.71-.95-1.87.22.03.44.06.65.11.06.01.12.04.19.05Zm-25.41 1.73c1.54-.36 3.1-.64 4.66-.89-1.61.37-3.18.77-4.66 1.2v-.31Zm-.86-7.37c-.07-1.37-.16-2.75-.25-4.12-.21-3.13-.45-6.27-.79-9.4.02-2.25.08-4.31.13-6.11.16 2.08.29 4.16.4 6.24.23 4.46.38 8.93.5 13.39h.01Zm-.94-4c.16 2.41.29 4.83.39 7.24.06 1.6.14 3.22.09 4.83-.15.05-.32.09-.47.14V78.88h-.01ZM483.72 92.83c-3.05-2.28-6.22-4.4-9.38-6.51 8.86-6.49 13.49-12.95 13.73-19.23.04-.76 0-1.5-.13-2.2-.67-3.82-3.5-6.68-8.39-8.48.13.04.27.08.4.13 3.92 1.39 7.74 4.23 8.5 8.56.34 1.95-.05 3.96-.98 5.69-.21.4.39.75.6.35 1.86-3.46 1.46-7.55-.97-10.63-3.53-4.47-9.76-5.88-15.16-6.16-2.32-.12-4.64-.04-6.95.19-6 .32-12.71 1.68-17.63 3.21-.37.11-.67.23-.92.35-.2-.17-.62.02-.57.37v.03c-.64.68-.18 1.64.48 3.21.38.91.67 1.89 1.15 2.58.32.76.68 1.51 1.13 2.19.14.21.38.19.53.07.19-.02.38-.05.57-.08v1.57c-.06.06-.1.13-.11.23-.27 4.18-.34 8.38-.48 12.57l-.3 9.03c-.24 3.91-.44 6.77-.46 7.26-.05.88-.11 1.95.07 2.81-.01.22-.02.43-.04.65 0 .11-.02.23-.03.35 0 .05-.03.27-.01.16-.05.4.5.59.64.28.05.04.12.08.2.08 1.75.13 3.5.28 5.25.3 1.69.02 3.38-.12 5.06-.32.08.23.36.39.55.15.06-.08.11-.17.16-.26.18-.09.24-.32.18-.48.05-.2.1-.4.13-.6.16-.86.25-1.74.33-2.62.11-1.17.17-2.34.23-3.51.15-.01.32-.03.52-.04.36-.03 1.73-.15 2.06-.15.39 0 .7-.02.95-.04 1.76 1.11 3.45 2.35 5.14 3.55 2.83 2.01 5.64 4.04 8.47 6.04 1.42 1 2.85 2 4.29 2.97.1.06.19.07.27.04.08 0 .17-.02.25-.1 1.61-1.56 3.15-3.18 4.6-4.88.75-.88 1.49-1.78 2.15-2.73.01.01.03.02.04.03.34.3.83-.2.49-.49-2.16-1.9-4.34-3.76-6.64-5.48l.03-.01Zm-6.38-3.65a55.72 55.72 0 0 0-4-2.13c.14-.1.26-.19.4-.29 1.2.81 2.4 1.61 3.6 2.42Zm-20.1 11.78c.67-.37 1.23-.91 1.67-1.6-.11.5-.24 1-.38 1.49-.43.04-.86.08-1.29.11Zm2.38-37.24c1.34-.31 2.56-.52 3.71-.69-1.03.19-2.04.41-3.04.65-.14-.07-.34-.02-.45.11-.07.02-.15.04-.22.05v-.13.01Zm.04.84c.07-.02.14-.03.2-.05.34 1.66.41 3.41.5 5.09.17 2.9.24 5.81.28 8.71l.03 3.17c-.17.07-.34.14-.51.2-.06-4.96-.21-10.58-.51-17.12h.01Zm16.04 5.62c-1.16 2.25-3.06 4.1-5.02 5.66-2.8 2.23-5.99 3.97-9.3 5.35-.01-3.56-.09-7.12-.27-10.67-.1-2.04-.16-4.16-.57-6.18 3.3-.78 6.72-1.36 10.1-1.1 1.85.14 4.23.59 5.32 2.29.92 1.43.46 3.24-.26 4.65Zm.85-.18c.6-1.37.9-2.92.28-4.32-.67-1.52-2.2-2.32-3.76-2.74.46.1.89.21 1.29.37 1.74.67 2.69 1.88 2.93 3.21.2 1.13-.05 2.25-.74 3.47V70Zm-27.47-4.14c-.12-.19-.23-.38-.34-.57.74.42.85.36.99.41v.08c-.22.03-.43.06-.65.08Zm11.21 30.46c-.08 1.08-.16 2.17-.33 3.24-.05.35-.11.69-.2 1.03 0 .04-.02.07-.03.11-.15.02-.3.04-.45.05.45-1.64.76-3.36.79-5.07.03-.29.08-.57.1-.89-.03-.31-.03-.47.24-.57-.04.69-.07 1.39-.12 2.08v.02Zm5.6-2.47c.48.11.92.52 2.49 1.72-.46-.32-.92-.65-1.38-.97-.37-.25-.73-.5-1.1-.75h-.01Zm21.23 7.24a70.76 70.76 0 0 1-4.37 4.63c-.14-.09-.27-.19-.4-.28.19-.09.37-.24.55-.47.87-1.14 5.43-5.51 5.49-7.45.31.26.62.53.92.79-.67.97-1.42 1.88-2.19 2.77v.01Z" + fill="currentColor" + transform="translate(-144.023 -51.76)" + /> + </svg> + </div> + </div> + <div + class="welcome-screen-center__heading welcome-screen-decor excalifont" + > + All your data is saved locally in your browser. + </div> + <div + class="welcome-screen-menu" + > + <button + class="welcome-screen-menu-item " + type="button" + > + <div + class="welcome-screen-menu-item__icon" + > + <svg + aria-hidden="true" + class="" + fill="none" + focusable="false" + role="img" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + viewBox="0 0 20 20" + > + <path + d="m9.257 6.351.183.183H15.819c.34 0 .727.182 1.051.506.323.323.505.708.505 1.05v5.819c0 .316-.183.7-.52 1.035-.337.338-.723.522-1.037.522H4.182c-.352 0-.74-.181-1.058-.5-.318-.318-.499-.705-.499-1.057V5.182c0-.351.181-.736.5-1.054.32-.321.71-.503 1.057-.503H6.53l2.726 2.726Z" + stroke-width="1.25" + /> + </svg> + </div> + <div + class="welcome-screen-menu-item__text" + > + Open + </div> + <div + class="welcome-screen-menu-item__shortcut" + > + Ctrl+O + </div> + </button> + <button + class="welcome-screen-menu-item " + type="button" + > + <div + class="welcome-screen-menu-item__icon" + > + <svg + aria-hidden="true" + class="" + fill="none" + focusable="false" + role="img" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + viewBox="0 0 24 24" + > + <g + stroke-width="1.5" + > + <path + d="M0 0h24v24H0z" + fill="none" + stroke="none" + /> + <circle + cx="12" + cy="12" + r="9" + /> + <line + x1="12" + x2="12" + y1="17" + y2="17.01" + /> + <path + d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" + /> + </g> + </svg> + </div> + <div + class="welcome-screen-menu-item__text" + > + Help + </div> + <div + class="welcome-screen-menu-item__shortcut" + > + ? + </div> + </button> + <button + class="welcome-screen-menu-item " + type="button" + > + <div + class="welcome-screen-menu-item__icon" + > + <svg + aria-hidden="true" + class="" + fill="none" + focusable="false" + role="img" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + viewBox="0 0 24 24" + > + <g + stroke-width="1.5" + > + <path + d="M0 0h24v24H0z" + fill="none" + stroke="none" + /> + <circle + cx="9" + cy="7" + r="4" + /> + <path + d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" + /> + <path + d="M16 3.13a4 4 0 0 1 0 7.75" + /> + <path + d="M21 21v-2a4 4 0 0 0 -3 -3.85" + /> + </g> + </svg> + </div> + <div + class="welcome-screen-menu-item__text" + > + Live collaboration... + </div> + </button> + <a + class="welcome-screen-menu-item " + href="undefined/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest" + rel="noreferrer" + target="_blank" + > + <div + class="welcome-screen-menu-item__icon" + > + <svg + aria-hidden="true" + class="" + fill="none" + focusable="false" + role="img" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + viewBox="0 0 24 24" + > + <g + stroke-width="1.5" + > + <path + d="M0 0h24v24H0z" + fill="none" + stroke="none" + /> + <path + d="M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" + /> + <path + d="M21 12h-13l3 -3" + /> + <path + d="M11 15l-3 -3" + /> + </g> + </svg> + </div> + <div + class="welcome-screen-menu-item__text" + > + Sign up + </div> + </a> + </div> +</div> +`; diff --git a/excalidraw-app/tests/collab.test.tsx b/excalidraw-app/tests/collab.test.tsx new file mode 100644 index 0000000..80cf4b0 --- /dev/null +++ b/excalidraw-app/tests/collab.test.tsx @@ -0,0 +1,247 @@ +import { vi } from "vitest"; +import { act, render, waitFor } from "@excalidraw/excalidraw/tests/test-utils"; +import ExcalidrawApp from "../App"; +import { API } from "@excalidraw/excalidraw/tests/helpers/api"; +import { syncInvalidIndices } from "@excalidraw/excalidraw/fractionalIndex"; +import { + createRedoAction, + createUndoAction, +} from "@excalidraw/excalidraw/actions/actionHistory"; +import { CaptureUpdateAction, newElementWith } from "@excalidraw/excalidraw"; + +const { h } = window; + +Object.defineProperty(window, "crypto", { + value: { + getRandomValues: (arr: number[]) => + arr.forEach((v, i) => (arr[i] = Math.floor(Math.random() * 256))), + subtle: { + generateKey: () => {}, + exportKey: () => ({ k: "sTdLvMC_M3V8_vGa3UVRDg" }), + }, + }, +}); + +vi.mock("../../excalidraw-app/data/firebase.ts", () => { + const loadFromFirebase = async () => null; + const saveToFirebase = () => {}; + const isSavedToFirebase = () => true; + const loadFilesFromFirebase = async () => ({ + loadedFiles: [], + erroredFiles: [], + }); + const saveFilesToFirebase = async () => ({ + savedFiles: new Map(), + erroredFiles: new Map(), + }); + + return { + loadFromFirebase, + saveToFirebase, + isSavedToFirebase, + loadFilesFromFirebase, + saveFilesToFirebase, + }; +}); + +vi.mock("socket.io-client", () => { + return { + default: () => { + return { + close: () => {}, + on: () => {}, + once: () => {}, + off: () => {}, + emit: () => {}, + }; + }, + }; +}); + +/** + * These test would deserve to be extended by testing collab with (at least) two clients simultanouesly, + * while having access to both scenes, appstates stores, histories and etc. + * i.e. multiplayer history tests could be a good first candidate, as we could test both history stacks simultaneously. + */ +describe("collaboration", () => { + it("should allow to undo / redo even on force-deleted elements", async () => { + await render(<ExcalidrawApp />); + const rect1Props = { + type: "rectangle", + id: "A", + height: 200, + width: 100, + } as const; + + const rect2Props = { + type: "rectangle", + id: "B", + width: 100, + height: 200, + } as const; + + const rect1 = API.createElement({ ...rect1Props }); + const rect2 = API.createElement({ ...rect2Props }); + + API.updateScene({ + elements: syncInvalidIndices([rect1, rect2]), + captureUpdate: CaptureUpdateAction.IMMEDIATELY, + }); + + API.updateScene({ + elements: syncInvalidIndices([ + rect1, + newElementWith(h.elements[1], { isDeleted: true }), + ]), + captureUpdate: CaptureUpdateAction.IMMEDIATELY, + }); + + await waitFor(() => { + expect(API.getUndoStack().length).toBe(2); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: true }), + ]); + expect(h.elements).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: true }), + ]); + }); + + // one form of force deletion happens when starting the collab, not to sync potentially sensitive data into the server + window.collab.startCollaboration(null); + + await waitFor(() => { + expect(API.getUndoStack().length).toBe(2); + // we never delete from the local snapshot as it is used for correct diff calculation + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: true }), + ]); + expect(h.elements).toEqual([expect.objectContaining(rect1Props)]); + }); + + const undoAction = createUndoAction(h.history, h.store); + act(() => h.app.actionManager.executeAction(undoAction)); + + // with explicit undo (as addition) we expect our item to be restored from the snapshot! + await waitFor(() => { + expect(API.getUndoStack().length).toBe(1); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: false }), + ]); + expect(h.elements).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: false }), + ]); + }); + + // simulate force deleting the element remotely + API.updateScene({ + elements: syncInvalidIndices([rect1]), + captureUpdate: CaptureUpdateAction.NEVER, + }); + + await waitFor(() => { + expect(API.getUndoStack().length).toBe(1); + expect(API.getRedoStack().length).toBe(1); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: true }), + ]); + expect(h.elements).toEqual([expect.objectContaining(rect1Props)]); + }); + + const redoAction = createRedoAction(h.history, h.store); + act(() => h.app.actionManager.executeAction(redoAction)); + + // with explicit redo (as removal) we again restore the element from the snapshot! + await waitFor(() => { + expect(API.getUndoStack().length).toBe(2); + expect(API.getRedoStack().length).toBe(0); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: true }), + ]); + expect(h.elements).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: true }), + ]); + }); + + act(() => h.app.actionManager.executeAction(undoAction)); + + // simulate local update + API.updateScene({ + elements: syncInvalidIndices([ + h.elements[0], + newElementWith(h.elements[1], { x: 100 }), + ]), + captureUpdate: CaptureUpdateAction.IMMEDIATELY, + }); + + await waitFor(() => { + expect(API.getUndoStack().length).toBe(2); + expect(API.getRedoStack().length).toBe(0); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: false, x: 100 }), + ]); + expect(h.elements).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: false, x: 100 }), + ]); + }); + + act(() => h.app.actionManager.executeAction(undoAction)); + + // we expect to iterate the stack to the first visible change + await waitFor(() => { + expect(API.getUndoStack().length).toBe(1); + expect(API.getRedoStack().length).toBe(1); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: false, x: 0 }), + ]); + expect(h.elements).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: false, x: 0 }), + ]); + }); + + // simulate force deleting the element remotely + API.updateScene({ + elements: syncInvalidIndices([rect1]), + captureUpdate: CaptureUpdateAction.NEVER, + }); + + // snapshot was correctly updated and marked the element as deleted + await waitFor(() => { + expect(API.getUndoStack().length).toBe(1); + expect(API.getRedoStack().length).toBe(1); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining(rect1Props), + expect.objectContaining({ ...rect2Props, isDeleted: true, x: 0 }), + ]); + expect(h.elements).toEqual([expect.objectContaining(rect1Props)]); + }); + + act(() => h.app.actionManager.executeAction(redoAction)); + + // with explicit redo (as update) we again restored the element from the snapshot! + await waitFor(() => { + expect(API.getUndoStack().length).toBe(2); + expect(API.getRedoStack().length).toBe(0); + expect(API.getSnapshot()).toEqual([ + expect.objectContaining({ id: "A", isDeleted: false }), + expect.objectContaining({ id: "B", isDeleted: true, x: 100 }), + ]); + expect(h.history.isRedoStackEmpty).toBeTruthy(); + expect(h.elements).toEqual([ + expect.objectContaining({ id: "A", isDeleted: false }), + expect.objectContaining({ id: "B", isDeleted: true, x: 100 }), + ]); + }); + }); +}); diff --git a/excalidraw-app/useHandleAppTheme.ts b/excalidraw-app/useHandleAppTheme.ts new file mode 100644 index 0000000..e319611 --- /dev/null +++ b/excalidraw-app/useHandleAppTheme.ts @@ -0,0 +1,69 @@ +import { useEffect, useLayoutEffect, useState } from "react"; +import { THEME } from "@excalidraw/excalidraw"; +import { EVENT } from "@excalidraw/excalidraw/constants"; +import type { Theme } from "@excalidraw/excalidraw/element/types"; +import { CODES, KEYS } from "@excalidraw/excalidraw/keys"; +import { STORAGE_KEYS } from "./app_constants"; + +const getDarkThemeMediaQuery = (): MediaQueryList | undefined => + window.matchMedia?.("(prefers-color-scheme: dark)"); + +export const useHandleAppTheme = () => { + const [appTheme, setAppTheme] = useState<Theme | "system">(() => { + return ( + (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as + | Theme + | "system" + | null) || THEME.LIGHT + ); + }); + const [editorTheme, setEditorTheme] = useState<Theme>(THEME.LIGHT); + + useEffect(() => { + const mediaQuery = getDarkThemeMediaQuery(); + + const handleChange = (e: MediaQueryListEvent) => { + setEditorTheme(e.matches ? THEME.DARK : THEME.LIGHT); + }; + + if (appTheme === "system") { + mediaQuery?.addEventListener("change", handleChange); + } + + const handleKeydown = (event: KeyboardEvent) => { + if ( + !event[KEYS.CTRL_OR_CMD] && + event.altKey && + event.shiftKey && + event.code === CODES.D + ) { + event.preventDefault(); + event.stopImmediatePropagation(); + setAppTheme(editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK); + } + }; + + document.addEventListener(EVENT.KEYDOWN, handleKeydown, { capture: true }); + + return () => { + mediaQuery?.removeEventListener("change", handleChange); + document.removeEventListener(EVENT.KEYDOWN, handleKeydown, { + capture: true, + }); + }; + }, [appTheme, editorTheme, setAppTheme]); + + useLayoutEffect(() => { + localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, appTheme); + + if (appTheme === "system") { + setEditorTheme( + getDarkThemeMediaQuery()?.matches ? THEME.DARK : THEME.LIGHT, + ); + } else { + setEditorTheme(appTheme); + } + }, [appTheme]); + + return { editorTheme, appTheme, setAppTheme }; +}; diff --git a/excalidraw-app/vite-env.d.ts b/excalidraw-app/vite-env.d.ts new file mode 100644 index 0000000..ade60e8 --- /dev/null +++ b/excalidraw-app/vite-env.d.ts @@ -0,0 +1,49 @@ +/// <reference types="vite-plugin-pwa/vanillajs" /> +/// <reference types="vite-plugin-pwa/info" /> +/// <reference types="vite-plugin-svgr/client" /> +interface ImportMetaEnv { + // The port to run the dev server + VITE_APP_PORT: string; + + VITE_APP_BACKEND_V2_GET_URL: string; + VITE_APP_BACKEND_V2_POST_URL: string; + + // collaboration WebSocket server (https: string + VITE_APP_WS_SERVER_URL: string; + + // set this only if using the collaboration workflow we use on excalidraw.com + VITE_APP_PORTAL_URL: string; + VITE_APP_AI_BACKEND: string; + + VITE_APP_FIREBASE_CONFIG: string; + + // whether to disable live reload / HMR. Usuaully what you want to do when + // debugging Service Workers. + VITE_APP_DEV_DISABLE_LIVE_RELOAD: string; + + VITE_APP_DISABLE_SENTRY: string; + + // Set this flag to false if you want to open the overlay by default + VITE_APP_COLLAPSE_OVERLAY: string; + + // Enable eslint in dev server + VITE_APP_ENABLE_ESLINT: string; + + // Enable PWA in dev server + VITE_APP_ENABLE_PWA: string; + + VITE_APP_PLUS_LP: string; + + VITE_APP_PLUS_APP: string; + + VITE_APP_GIT_SHA: string; + + MODE: string; + + DEV: string; + PROD: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/excalidraw-app/vite.config.mts b/excalidraw-app/vite.config.mts new file mode 100644 index 0000000..1689624 --- /dev/null +++ b/excalidraw-app/vite.config.mts @@ -0,0 +1,269 @@ +import path from "path"; +import { defineConfig, loadEnv } from "vite"; +import react from "@vitejs/plugin-react"; +import svgrPlugin from "vite-plugin-svgr"; +import { ViteEjsPlugin } from "vite-plugin-ejs"; +import { VitePWA } from "vite-plugin-pwa"; +import checker from "vite-plugin-checker"; +import { createHtmlPlugin } from "vite-plugin-html"; +import Sitemap from "vite-plugin-sitemap"; +import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins"; +export default defineConfig(({ mode }) => { + // To load .env variables + const envVars = loadEnv(mode, `../`); + // https://vitejs.dev/config/ + return { + server: { + port: Number(envVars.VITE_APP_PORT || 3000), + // open the browser + open: true, + }, + // We need to specify the envDir since now there are no + //more located in parallel with the vite.config.ts file but in parent dir + envDir: "../", + resolve: { + alias: [ + { + find: /^@excalidraw\/excalidraw$/, + replacement: path.resolve(__dirname, "../packages/excalidraw/index.tsx"), + }, + { + find: /^@excalidraw\/excalidraw\/(.*?)/, + replacement: path.resolve(__dirname, "../packages/excalidraw/$1"), + }, + { + find: /^@excalidraw\/utils$/, + replacement: path.resolve(__dirname, "../packages/utils/index.ts"), + }, + { + find: /^@excalidraw\/utils\/(.*?)/, + replacement: path.resolve(__dirname, "../packages/utils/$1"), + }, + { + find: /^@excalidraw\/math$/, + replacement: path.resolve(__dirname, "../packages/math/index.ts"), + }, + { + find: /^@excalidraw\/math\/(.*?)/, + replacement: path.resolve(__dirname, "../packages/math/$1"), + }, + ], + }, + build: { + outDir: "build", + rollupOptions: { + output: { + assetFileNames(chunkInfo) { + if (chunkInfo?.name?.endsWith(".woff2")) { + const family = chunkInfo.name.split("-")[0]; + return `fonts/${family}/[name][extname]`; + } + + return "assets/[name]-[hash][extname]"; + }, + // Creating separate chunk for locales except for en and percentages.json so they + // can be cached at runtime and not merged with + // app precache. en.json and percentages.json are needed for first load + // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too. + manualChunks(id) { + if ( + id.includes("packages/excalidraw/locales") && + id.match(/en.json|percentages.json/) === null + ) { + const index = id.indexOf("locales/"); + // Taking the substring after "locales/" + return `locales/${id.substring(index + 8)}`; + } + }, + }, + }, + sourcemap: mode !== "production", + // don't auto-inline small assets (i.e. fonts hosted on CDN) + assetsInlineLimit: 0, + }, + plugins: [ + Sitemap({ + hostname: "https://kj-diagramming.local", + outDir: "build", + changefreq: "monthly", + // its static in public folder + generateRobotsTxt: false, + }), + woff2BrowserPlugin(), + react(), + checker({ + typescript: true, + eslint: + envVars.VITE_APP_ENABLE_ESLINT === "false" + ? undefined + : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' }, + overlay: { + initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false", + badgeStyle: "margin-bottom: 4rem; margin-left: 1rem", + }, + }), + svgrPlugin(), + ViteEjsPlugin(), + VitePWA({ + registerType: "autoUpdate", + devOptions: { + /* set this flag to true to enable in Development mode */ + enabled: envVars.VITE_APP_ENABLE_PWA === "true", + }, + + workbox: { + // don't precache fonts, locales and separate chunks + globIgnores: [ + "fonts.css", + "**/locales/**", + "service-worker.js", + "**/*.chunk-*.js", + ], + runtimeCaching: [ + { + urlPattern: new RegExp(".+.woff2"), + handler: "CacheFirst", + options: { + cacheName: "fonts", + expiration: { + maxEntries: 1000, + maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days + }, + cacheableResponse: { + // 0 to cache "opaque" responses from cross-origin requests (i.e. CDN) + statuses: [0, 200], + }, + }, + }, + { + urlPattern: new RegExp("fonts.css"), + handler: "StaleWhileRevalidate", + options: { + cacheName: "fonts", + expiration: { + maxEntries: 50, + }, + }, + }, + { + urlPattern: new RegExp("locales/[^/]+.js"), + handler: "CacheFirst", + options: { + cacheName: "locales", + expiration: { + maxEntries: 50, + maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days + }, + }, + }, + { + urlPattern: new RegExp(".chunk-.+.js"), + handler: "CacheFirst", + options: { + cacheName: "chunk", + expiration: { + maxEntries: 50, + maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days + }, + }, + }, + ], + }, + manifest: { + short_name: "kj-diagramming", + name: "kj-diagramming", + description: + "kj-diagramming is a whiteboard tool (an excalidraw fork) that lets you easily sketch diagrams with a hand-drawn feel.", + icons: [ + { + src: "android-chrome-192x192.png", + sizes: "192x192", + type: "image/png", + }, + { + src: "apple-touch-icon.png", + type: "image/png", + sizes: "180x180", + }, + { + src: "favicon-32x32.png", + sizes: "32x32", + type: "image/png", + }, + { + src: "favicon-16x16.png", + sizes: "16x16", + type: "image/png", + }, + ], + start_url: "/", + id:"kj-diagramming", + display: "standalone", + theme_color: "#121212", + background_color: "#ffffff", + file_handlers: [ + { + action: "/", + accept: { + "application/vnd.excalidraw+json": [".excalidraw"], + }, + }, + ], + share_target: { + action: "/web-share-target", + method: "POST", + enctype: "multipart/form-data", + params: { + files: [ + { + name: "file", + accept: [ + "application/vnd.excalidraw+json", + "application/json", + ".excalidraw", + ], + }, + ], + }, + }, + screenshots: [ + { + src: "/screenshots/virtual-whiteboard.png", + type: "image/png", + sizes: "462x945", + }, + { + src: "/screenshots/wireframe.png", + type: "image/png", + sizes: "462x945", + }, + { + src: "/screenshots/illustration.png", + type: "image/png", + sizes: "462x945", + }, + { + src: "/screenshots/shapes.png", + type: "image/png", + sizes: "462x945", + }, + { + src: "/screenshots/collaboration.png", + type: "image/png", + sizes: "462x945", + }, + { + src: "/screenshots/export.png", + type: "image/png", + sizes: "462x945", + }, + ], + }, + }), + createHtmlPlugin({ + minify: true, + }), + ], + publicDir: "../public", + }; +}); |