diff --git a/package.json b/package.json index e622c9386374..826c0afad004 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@types/react": "17.0.39", "@types/react-dom": "17.0.11", "@types/socket.io-client": "1.4.36", - "browser-fs-access": "0.29.1", + "browser-fs-access": "0.31.0", "clsx": "1.1.1", "fake-indexeddb": "3.1.7", "firebase": "8.3.3", @@ -90,6 +90,7 @@ "prettier": "@excalidraw/prettier-config", "private": true, "scripts": { + "setup": "yarn && cd src/packages/excalidraw && yarn", "build-node": "node ./scripts/build-node.js", "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build", "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build", @@ -115,6 +116,8 @@ "test": "yarn test:app", "autorelease": "node scripts/autorelease.js", "prerelease": "node scripts/prerelease.js", - "release": "node scripts/release.js" + "release": "node scripts/release.js", + "pull": "git pull upstream master --rebase", + "publish": "cd src/packages/excalidraw && npm run build:umd && yarn publish" } } diff --git a/src/actions/manager.tsx b/src/actions/manager.tsx index 246bfe7a6cd7..d8ce13cc4e6e 100644 --- a/src/actions/manager.tsx +++ b/src/actions/manager.tsx @@ -83,7 +83,7 @@ export class ActionManager { .sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0)) .filter( (action) => - (action.name in canvasActions + (canvasActions && action.name in canvasActions ? canvasActions[action.name as keyof typeof canvasActions] : true) && action.keyTest && @@ -141,7 +141,7 @@ export class ActionManager { if ( this.actions[name] && "PanelComponent" in this.actions[name] && - (name in canvasActions + (canvasActions && name in canvasActions ? canvasActions[name as keyof typeof canvasActions] : true) ) { diff --git a/src/components/App.tsx b/src/components/App.tsx index f88d069a5f79..369b7304c023 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -167,7 +167,10 @@ import { } from "../keys"; import { distance2d, getGridPoint, isPathALoop } from "../math"; import { renderSceneThrottled } from "../renderer/renderScene"; -import { invalidateShapeForElement } from "../renderer/renderElement"; +import { + clearRenderCache, + invalidateShapeForElement, +} from "../renderer/renderElement"; import { calculateScrollCenter, getTextBindableContainerAtPosition, @@ -270,7 +273,7 @@ const DeviceContext = React.createContext(deviceContextInitialValue); export const useDevice = () => useContext(DeviceContext); const ExcalidrawContainerContext = React.createContext<{ container: HTMLDivElement | null; - id: string | null; + id?: string | null; }>({ container: null, id: null }); export const useExcalidrawContainer = () => useContext(ExcalidrawContainerContext); @@ -385,6 +388,7 @@ class App extends React.Component { setActiveTool: this.setActiveTool, setCursor: this.setCursor, resetCursor: this.resetCursor, + app: this, } as const; if (typeof excalidrawRef === "function") { excalidrawRef(api); @@ -484,6 +488,7 @@ class App extends React.Component { return (
{ > { } showThemeBtn={ typeof this.props?.theme === "undefined" && + this.props.UIOptions.canvasActions && this.props.UIOptions.canvasActions.theme } libraryReturnUrl={this.props.libraryReturnUrl} @@ -787,6 +794,13 @@ class App extends React.Component { }; } + if (initialData?.scrollX != null) { + scene.appState.scrollX = initialData.scrollX; + } + if (initialData?.scrollY != null) { + scene.appState.scrollY = initialData.scrollY; + } + this.resetHistory(); this.syncActionResult({ ...scene, @@ -917,6 +931,25 @@ class App extends React.Component { this.unmounted = true; this.removeEventListeners(); this.scene.destroy(); + clearRenderCache(); + + this.scene = new Scene(); + this.history = new History(); + this.actionManager = new ActionManager( + this.syncActionResult, + () => this.state, + () => this.scene.getElementsIncludingDeleted(), + this, + ); + this.library = new Library(this); + this.canvas = null; + this.rc = null; + + // @ts-ignore + this.excalidrawContainerRef.current = undefined; + this.nearestScrollableContainer = undefined; + this.excalidrawContainerValue = { container: null, id: "unmounted" }; + clearTimeout(touchTimeout); touchTimeout = 0; } @@ -975,6 +1008,7 @@ class App extends React.Component { this.disableEvent, false, ); + document.fonts?.removeEventListener?.("loadingdone", this.onFontLoaded); document.removeEventListener( EVENT.GESTURE_START, @@ -1122,6 +1156,15 @@ class App extends React.Component { }); } + if ( + !this.props.UIOptions.canvasActions && + this.state.openMenu === "canvas" + ) { + this.setState({ + openMenu: null, + }); + } + if (this.props.name && prevProps.name !== this.props.name) { this.setState({ name: this.props.name, @@ -1269,6 +1312,7 @@ class App extends React.Component { this.scene.getElementsIncludingDeleted(), this.state, this.files, + this.props.id, ); } } diff --git a/src/components/Avatar.scss b/src/components/Avatar.scss index d3f8c8bd309a..0a27c45b4736 100644 --- a/src/components/Avatar.scss +++ b/src/components/Avatar.scss @@ -4,7 +4,7 @@ .Avatar { width: 2.5rem; height: 2.5rem; - border-radius: 1.25rem; + border-radius: 50%; display: flex; justify-content: center; align-items: center; diff --git a/src/components/Island.scss b/src/components/Island.scss index 499d13ad3d51..95e8e82b7006 100644 --- a/src/components/Island.scss +++ b/src/components/Island.scss @@ -6,10 +6,49 @@ border-radius: var(--border-radius-lg); padding: calc(var(--padding) * var(--space-factor)); position: relative; - transition: box-shadow 0.5s ease-in-out; &.zen-mode { box-shadow: none; } + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-thumb); + } + &::-webkit-scrollbar-thumb:hover { + background-color: var(--color-scrollbar-thumb-hover); + } + + &::-webkit-scrollbar-thumb:active { + background-color: var(--color-scrollbar-thumb-active); + } + } + + .App-menu_top { + .Stack_vertical { + .Island { + min-width: 216px; + } + .Stack_horizontal { + justify-content: center !important; + } + } + } + + &.excalidraw--view-mode { + .App-menu_top { + .Stack_vertical { + .Island { + min-width: auto; + } + } + } } } diff --git a/src/components/JSONExportDialog.tsx b/src/components/JSONExportDialog.tsx index 98e0519f3786..f8d075048fb5 100644 --- a/src/components/JSONExportDialog.tsx +++ b/src/components/JSONExportDialog.tsx @@ -2,9 +2,9 @@ import React, { useState } from "react"; import { NonDeletedExcalidrawElement } from "../element/types"; import { t } from "../i18n"; import { useDevice } from "./App"; -import { AppState, ExportOpts, BinaryFiles } from "../types"; +import { AppState, CanvasActions, ExportOpts, BinaryFiles } from "../types"; import { Dialog } from "./Dialog"; -import { exportFile, exportToFileIcon, link } from "./icons"; +import { exportToFileIcon, link } from "./icons"; import { ToolButton } from "./ToolButton"; import { actionSaveFileToDisk } from "../actions/actionExport"; import { Card } from "./Card"; @@ -98,7 +98,7 @@ export const JSONExportDialog = ({ appState: AppState; files: BinaryFiles; actionManager: ActionManager; - exportOpts: ExportOpts; + exportOpts: CanvasActions["export"]; canvas: HTMLCanvasElement | null; }) => { const [modalIsShown, setModalIsShown] = useState(false); @@ -111,16 +111,20 @@ export const JSONExportDialog = ({ <> { - setModalIsShown(true); + if (typeof exportOpts === "function") { + actionManager.executeAction(actionSaveFileToDisk); + } else { + setModalIsShown(true); + } }} data-testid="json-export-button" - icon={exportFile} + icon={exportToFileIcon} type="button" aria-label={t("buttons.export")} showAriaLabel={useDevice().isMobile} title={t("buttons.export")} /> - {modalIsShown && ( + {modalIsShown && exportOpts && typeof exportOpts !== "function" && ( void; actionManager: ActionManager; appState: AppState; files: BinaryFiles; @@ -69,6 +70,7 @@ interface LayerUIProps { onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void; } const LayerUI = ({ + onHomeButtonClick, actionManager, appState, files, @@ -98,7 +100,7 @@ const LayerUI = ({ const device = useDevice(); const renderJSONExportDialog = () => { - if (!UIOptions.canvasActions.export) { + if (!UIOptions.canvasActions || !UIOptions.canvasActions.export) { return null; } @@ -115,7 +117,7 @@ const LayerUI = ({ }; const renderImageExportDialog = () => { - if (!UIOptions.canvasActions.saveAsImage) { + if (!UIOptions.canvasActions || !UIOptions.canvasActions.saveAsImage) { return null; } @@ -162,10 +164,6 @@ const LayerUI = ({ ); }; - const Separator = () => { - return
; - }; - const renderViewModeCanvasActions = () => { return (
- + {actionManager.renderAction("clearCanvas")} - {actionManager.renderAction("loadScene")} {renderJSONExportDialog()} {renderImageExportDialog()} - {onCollabButtonClick && ( - {viewModeEnabled - ? renderViewModeCanvasActions() - : renderCanvasActions()} + {UIOptions.canvasActions && + (viewModeEnabled + ? renderViewModeCanvasActions() + : renderCanvasActions())} {shouldRenderSelectedShapeActions && renderSelectedShapeActions()} {!viewModeEnabled && ( @@ -378,8 +375,12 @@ const LayerUI = ({ - {renderTopRightUI?.(device.isMobile, appState)} + {renderTopRightUI?.(device.isMobile, appState, canvas)}
@@ -530,6 +531,7 @@ const LayerUI = ({ <> {dialogs} ) : ( @@ -606,6 +609,7 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => { const keys = Object.keys(prevAppState) as (keyof Partial)[]; return ( + prev.renderTopRightUI === next.renderTopRightUI && prev.renderCustomFooter === next.renderCustomFooter && prev.langCode === next.langCode && prev.elements === next.elements && diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx index ea45b393eaa2..7b82c250c6df 100644 --- a/src/components/MobileMenu.tsx +++ b/src/components/MobileMenu.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { AppState } from "../types"; +import { AppProps, AppState } from "../types"; import { ActionManager } from "../actions/manager"; import { t } from "../i18n"; import Stack from "./Stack"; @@ -7,7 +7,6 @@ import { showSelectedShapeActions } from "../element"; import { NonDeletedExcalidrawElement } from "../element/types"; import { FixedSideContainer } from "./FixedSideContainer"; import { Island } from "./Island"; -import { HintViewer } from "./HintViewer"; import { calculateScrollCenter, getSelectedElements } from "../scene"; import { SelectedShapeActions, ShapesSwitcher } from "./Actions"; import { Section } from "./Section"; @@ -18,8 +17,11 @@ import { UserList } from "./UserList"; import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle"; import { LibraryButton } from "./LibraryButton"; import { PenModeButton } from "./PenModeButton"; +import { ToolButton } from "./ToolButton"; +import { home } from "./icons"; type MobileMenuProps = { + onHomeButtonClick?: () => void; appState: AppState; actionManager: ActionManager; renderJSONExportDialog: () => React.ReactNode; @@ -42,11 +44,14 @@ type MobileMenuProps = { renderTopRightUI?: ( isMobile: boolean, appState: AppState, + canvas: HTMLCanvasElement | null, ) => JSX.Element | null; renderStats: () => JSX.Element | null; + UIOptions: AppProps["UIOptions"]; }; export const MobileMenu = ({ + onHomeButtonClick, appState, elements, libraryMenu, @@ -65,10 +70,13 @@ export const MobileMenu = ({ onImageAction, renderTopRightUI, renderStats, + UIOptions, }: MobileMenuProps) => { const renderToolbar = () => { return ( + {/* placeholder for grid 3-column template */} +
{(heading) => ( @@ -89,7 +97,15 @@ export const MobileMenu = ({ /> - {renderTopRightUI && renderTopRightUI(true, appState)} + )}
- +
+ {renderTopRightUI?.(true, appState, canvas)} +
); }; @@ -126,16 +144,19 @@ export const MobileMenu = ({ getSelectedElements(elements, appState).length === 0; if (viewModeEnabled) { - return ( + return UIOptions.canvasActions ? (
{actionManager.renderAction("toggleCanvasMenu")}
+ ) : ( +
Excalidraw
); } return (
- {actionManager.renderAction("toggleCanvasMenu")} + {UIOptions.canvasActions && + actionManager.renderAction("toggleCanvasMenu")} {actionManager.renderAction("toggleEditMenu")} {actionManager.renderAction("undo")} @@ -196,7 +217,7 @@ export const MobileMenu = ({ }} > - {appState.openMenu === "canvas" ? ( + {UIOptions.canvasActions && appState.openMenu === "canvas" ? (
@@ -207,6 +228,7 @@ export const MobileMenu = ({ {t("labels.collaborators")} diff --git a/src/components/PublishLibrary.tsx b/src/components/PublishLibrary.tsx index 37543b6b063a..5491db14d856 100644 --- a/src/components/PublishLibrary.tsx +++ b/src/components/PublishLibrary.tsx @@ -225,10 +225,13 @@ const PublishLibrary = ({ formData.append("twitterHandle", libraryData.twitterHandle); formData.append("website", libraryData.website); - fetch(`${process.env.REACT_APP_LIBRARY_BACKEND}/submit`, { - method: "post", - body: formData, - }) + fetch( + `https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries/submit`, + { + method: "post", + body: formData, + }, + ) .then( (response) => { if (response.ok) { diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss index 7057110c9f33..0f40a3119de4 100644 --- a/src/components/ToolIcon.scss +++ b/src/components/ToolIcon.scss @@ -187,7 +187,7 @@ .ToolIcon.ToolIcon_type_floating { display: inline-block; position: absolute; - right: -8px; + right: calc(-2 * var(--space-factor)); margin-left: 0; border-radius: 20px 0 0 20px; diff --git a/src/components/UserList.scss b/src/components/UserList.scss index 139d1b2dc09b..feadde6f6b39 100644 --- a/src/components/UserList.scss +++ b/src/components/UserList.scss @@ -1,21 +1,50 @@ .excalidraw { + $marginTop: 60px; + // eye-balled + $bottomOffset: 60px; + .UserList { pointer-events: none; /*github corner*/ - padding: var(--space-factor) var(--space-factor) var(--space-factor) - var(--space-factor); + padding: var(--space-factor); display: flex; - flex-wrap: wrap; justify-content: flex-end; + overflow: hidden; + border-radius: 60px; + &:empty { display: none; } + + &.layout-vertical { + grid-column: 3; + flex-direction: column-reverse; + position: absolute; + top: $marginTop; + right: var(--space-factor); + max-height: calc( + 100vh - var(--space-factor) - #{$marginTop} - #{$bottomOffset} + + var(--itemOffset) + ); + + .Avatar { + width: 2.4rem; + height: 2.4rem; + } + + padding-bottom: max(calc(var(--itemOffset) * -1), 0px); + } } .UserList > * { pointer-events: all; - margin: 0 0 var(--space-factor) var(--space-factor); + } + .UserList.layout-vertical > * { + margin-bottom: var(--itemOffset); + } + .UserList.layout-horizontal > * { + margin-right: var(--itemOffset); } .UserList_mobile { diff --git a/src/components/UserList.tsx b/src/components/UserList.tsx index b9f7a36a08dc..3798f1132d78 100644 --- a/src/components/UserList.tsx +++ b/src/components/UserList.tsx @@ -11,7 +11,14 @@ export const UserList: React.FC<{ mobile?: boolean; collaborators: AppState["collaborators"]; actionManager: ActionManager; -}> = ({ className, mobile, collaborators, actionManager }) => { + layout: "vertical" | "horizontal"; +}> = ({ className, mobile, collaborators, actionManager, layout }) => { + const threshold = layout === "vertical" ? 6 : 3; + const offset = + collaborators.size > threshold + ? Math.min(collaborators.size - threshold, 15) * -2 + : 4; + const uniqueCollaborators = new Map(); collaborators.forEach((collaborator, socketId) => { @@ -45,7 +52,14 @@ export const UserList: React.FC<{ }); return ( -
+
{avatars}
); diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 9e0ce7e84309..41cc762293cc 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -938,3 +938,7 @@ export const editIcon = createIcon( export const eraser = createIcon( , ); + +export const home = createIcon( + "M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z", +); diff --git a/src/constants.ts b/src/constants.ts index b1638f39f1cb..bcbb94d52e30 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,5 +1,5 @@ import cssVariables from "./css/variables.module.scss"; -import { AppProps } from "./types"; +import { AppProps, CanvasActions, ExportOpts } from "./types"; import { FontFamilyValues } from "./element/types"; export const APP_NAME = "Excalidraw"; @@ -142,7 +142,12 @@ export const URL_HASH_KEYS = { addLibrary: "addLibrary", } as const; -export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = { +export const DEFAULT_UI_OPTIONS: Merge< + AppProps["UIOptions"], + { + canvasActions: Merge, { export: ExportOpts }>; + } +> = { canvasActions: { changeViewBackgroundColor: true, clearCanvas: true, @@ -159,7 +164,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = { // sm screen export const MQ_SM_MAX_WIDTH = 640; // md screen -export const MQ_MAX_WIDTH_PORTRAIT = 730; +export const MQ_MAX_WIDTH_PORTRAIT = 800; export const MQ_MAX_WIDTH_LANDSCAPE = 1000; export const MQ_MAX_HEIGHT_LANDSCAPE = 500; // sidebar diff --git a/src/css/styles.scss b/src/css/styles.scss index 920f7e7aeacc..c63c010a34f5 100644 --- a/src/css/styles.scss +++ b/src/css/styles.scss @@ -249,9 +249,8 @@ .App-top-bar { z-index: var(--zIndex-layerUI); - display: flex; - flex-direction: column; - align-items: center; + display: grid; + grid-template-columns: 1fr max-content 1fr; } .App-bottom-bar { @@ -584,6 +583,30 @@ ::-webkit-scrollbar-thumb:active { background: var(--button-gray-2); } + + .HomeButton.ToolIcon.ToolIcon_type_floating { + display: inline-block; + position: absolute; + top: 60px; + left: calc(-2 * var(--space-factor)); + right: auto; + border-radius: 0 20px 20px 0; + + background-color: var(--button-gray-1); + &:hover { + background-color: var(--button-gray-1); + } + &:active { + background-color: var(--button-gray-2); + } + + .ToolIcon__icon { + border-radius: inherit; + } + svg { + position: static; + } + } } .ErrorSplash.excalidraw { diff --git a/src/css/theme.scss b/src/css/theme.scss index 1827a74bc2ad..b28e1fac84b6 100644 --- a/src/css/theme.scss +++ b/src/css/theme.scss @@ -78,7 +78,7 @@ --popup-bg-color: #2c2c2c; --popup-secondary-bg-color: #222; --popup-text-color: #{$oc-gray-4}; - --popup-text-inverted-color: #2c2c2c; + --popup-text-inverted-color: #635c5c; --select-highlight-color: #{$oc-blue-4}; --shadow-island: 1px 1px 5px #{transparentize($oc-black, 0.7)}; --text-primary-color: #{$oc-gray-4}; diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index 8f35772e3629..2ab49905526a 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -1,29 +1,14 @@ import LanguageDetector from "i18next-browser-languagedetector"; import { useCallback, useEffect, useRef, useState } from "react"; import { trackEvent } from "../analytics"; -import { getDefaultAppState } from "../appState"; import { ErrorDialog } from "../components/ErrorDialog"; import { TopErrorBoundary } from "../components/TopErrorBoundary"; -import { - APP_NAME, - COOKIES, - EVENT, - TITLE_TIMEOUT, - VERSION_TIMEOUT, -} from "../constants"; +import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants"; import { loadFromBlob } from "../data/blob"; -import { - ExcalidrawElement, - FileId, - NonDeletedExcalidrawElement, -} from "../element/types"; +import { ExcalidrawElement, FileId } from "../element/types"; import { useCallbackRefState } from "../hooks/useCallbackRefState"; import { t } from "../i18n"; -import { - Excalidraw, - defaultLang, - languages, -} from "../packages/excalidraw/index"; +import { Excalidraw, defaultLang } from "../packages/excalidraw/index"; import { AppState, LibraryItems, @@ -51,9 +36,7 @@ import Collab, { collabDialogShownAtom, isCollaboratingAtom, } from "./collab/Collab"; -import { LanguageList } from "./components/LanguageList"; import { - exportToBackend, getCollaborationLinkData, isCollaborationLink, loadScene, @@ -65,11 +48,8 @@ import { } from "./data/localStorage"; import CustomStats from "./CustomStats"; import { restore, restoreAppState, RestoredDataState } from "../data/restore"; -import { Tooltip } from "../components/Tooltip"; -import { shield } from "../components/icons"; import "./index.scss"; -import { ExportToExcalidrawPlus } from "./components/ExportToExcalidrawPlus"; import { updateStaleImageStatuses } from "./data/FileManager"; import { newElementWith } from "../element/mutateElement"; @@ -83,10 +63,6 @@ import { jotaiStore, useAtomWithInitialValue } from "../jotai"; import { reconcileElements } from "./collab/reconciliation"; import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library"; -const isExcalidrawPlusSignedUser = document.cookie.includes( - COOKIES.AUTH_STATE_COOKIE, -); - const languageDetector = new LanguageDetector(); languageDetector.init({ languageUtils: {}, @@ -197,38 +173,14 @@ const initializeScene = async (opts: { return { scene: null, isExternalScene: false }; }; -const PlusLPLinkJSX = ( -

- Introducing Excalidraw+ -
- - Try out now! - -

-); - -const PlusAppLinkJSX = ( - - Go to Excalidraw+ - -); - const ExcalidrawWrapper = () => { const [errorMessage, setErrorMessage] = useState(""); let currentLangCode = languageDetector.detect() || defaultLang.code; if (Array.isArray(currentLangCode)) { currentLangCode = currentLangCode[0]; } - const [langCode, setLangCode] = useState(currentLangCode); + const [langCode] = useState(currentLangCode); + // initial state // --------------------------------------------------------------------------- @@ -395,7 +347,6 @@ const ExcalidrawWrapper = () => { if (Array.isArray(langCode)) { langCode = langCode[0]; } - setLangCode(langCode); excalidrawAPI.updateScene({ ...localDataState, }); @@ -536,124 +487,16 @@ const ExcalidrawWrapper = () => { } }; - const onExportToBackend = async ( - exportedElements: readonly NonDeletedExcalidrawElement[], - appState: AppState, - files: BinaryFiles, - canvas: HTMLCanvasElement | null, - ) => { - if (exportedElements.length === 0) { - return window.alert(t("alerts.cannotExportEmptyCanvas")); - } - if (canvas) { - try { - await exportToBackend( - exportedElements, - { - ...appState, - viewBackgroundColor: appState.exportBackground - ? appState.viewBackgroundColor - : getDefaultAppState().viewBackgroundColor, - }, - files, - ); - } catch (error: any) { - if (error.name !== "AbortError") { - const { width, height } = canvas; - console.error(error, { width, height }); - setErrorMessage(error.message); - } - } - } - }; - const renderTopRightUI = useCallback( (isMobile: boolean, appState: AppState) => { - if (isMobile) { - return null; - } - - return ( -
- {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX} -
- ); + return
placeholder
; }, [], ); - const renderFooter = useCallback( - (isMobile: boolean) => { - const renderEncryptedIcon = () => ( - - - {shield} - - - ); - - const renderLanguageList = () => ( - setLangCode(langCode)} - languages={languages} - currentLangCode={langCode} - /> - ); - if (isMobile) { - const isTinyDevice = window.innerWidth < 362; - return ( -
-
- {t("labels.language")} - {renderLanguageList()} -
- {/* FIXME remove after 2021-05-20 */} -
- {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX} -
-
- ); - } - return ( - <> - {renderEncryptedIcon()} - {renderLanguageList()} - - ); - }, - [langCode], - ); + const renderFooter = useCallback((isMobile: boolean) => { + return <>; + }, []); const renderCustomStats = () => { return ( @@ -680,6 +523,7 @@ const ExcalidrawWrapper = () => { })} > { onPointerUpdate={collabAPI?.onPointerUpdate} UIOptions={{ canvasActions: { - export: { - onExportToBackend, - renderCustomUI: (elements, appState, files) => { - return ( - { - excalidrawAPI?.updateScene({ - appState: { - errorMessage: error.message, - }, - }); - }} - /> - ); - }, - }, + clearCanvas: false, + export: () => {}, }, }} renderTopRightUI={renderTopRightUI} @@ -717,6 +544,7 @@ const ExcalidrawWrapper = () => { handleKeyboardGlobally={true} onLibraryChange={onLibraryChange} autoFocus={true} + theme="light" /> {excalidrawAPI && } {errorMessage && ( diff --git a/src/global.d.ts b/src/global.d.ts index 3bff2b5daeb1..cddb1611c469 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -6,6 +6,10 @@ interface Document { type: "loading" | "loadingdone" | "loadingerror", listener: (this: Document, ev: Event) => any, ): void; + removeEventListener?( + type: "loading" | "loadingdone" | "loadingerror", + listener: (this: Document, ev: Event) => any, + ): void; }; } @@ -31,6 +35,8 @@ interface Clipboard extends EventTarget { write(data: any[]): Promise; } +type Merge = Omit & N; + type Mutable = { -readonly [P in keyof T]: T[P]; }; diff --git a/src/i18n.ts b/src/i18n.ts index cf6ab15065a0..88bc6bc2b7fd 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -87,7 +87,7 @@ export const setLanguage = async (lang: Language) => { currentLangData = {}; } else { currentLangData = await import( - /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json` + /* webpackChunkName: "locales/[request]" */ `./locales/en.json` ); } }; diff --git a/src/locales/en.json b/src/locales/en.json index 31570400b4d8..cf911e260b98 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -71,7 +71,7 @@ "layers": "Layers", "actions": "Actions", "language": "Language", - "liveCollaboration": "Live collaboration", + "liveCollaboration": "Sharing", "duplicateSelection": "Duplicate", "untitled": "Untitled", "name": "Name", @@ -138,7 +138,7 @@ "copyToClipboard": "Copy to clipboard", "copyPngToClipboard": "Copy PNG to clipboard", "scale": "Scale", - "save": "Save to current file", + "save": "Save (to active file)", "saveAs": "Save as", "load": "Load", "getShareableLink": "Get shareable link", @@ -154,6 +154,7 @@ "undo": "Undo", "redo": "Redo", "resetLibrary": "Reset library", + "roomDialog": "Sharing", "createNewRoom": "Create new room", "fullScreen": "Full screen", "darkMode": "Dark mode", diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx index fc567a5cb26e..2bf42b7a2cff 100644 --- a/src/packages/excalidraw/index.tsx +++ b/src/packages/excalidraw/index.tsx @@ -14,6 +14,7 @@ import { jotaiScope, jotaiStore } from "../../jotai"; const ExcalidrawBase = (props: ExcalidrawProps) => { const { + onHomeButtonClick, onChange, initialData, excalidrawRef, @@ -39,6 +40,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { onLinkOpen, onPointerDown, onScrollChange, + id, } = props; const canvasActions = props.UIOptions?.canvasActions; @@ -51,9 +53,9 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { }, }; - if (canvasActions?.export) { - UIOptions.canvasActions.export.saveFileToDisk = - canvasActions.export?.saveFileToDisk ?? + if (canvasActions && typeof canvasActions.export === "object") { + canvasActions.export.saveFileToDisk = + canvasActions.export?.saveFileToDisk || DEFAULT_UI_OPTIONS.canvasActions.export.saveFileToDisk; } @@ -79,6 +81,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => { jotaiStore} scope={jotaiScope}> )[]; canvasOptionKeys.every((key) => { + if (!prevUIOptions?.canvasActions || !nextUIOptions?.canvasActions) { + return prevUIOptions?.canvasActions === nextUIOptions?.canvasActions; + } if ( key === "export" && prevUIOptions?.canvasActions?.export && nextUIOptions?.canvasActions?.export ) { + if ( + typeof prevUIOptions.canvasActions.export === "function" || + typeof nextUIOptions.canvasActions.export === "function" + ) { + return ( + prevUIOptions.canvasActions.export === + nextUIOptions.canvasActions.export + ); + } return ( prevUIOptions.canvasActions.export.saveFileToDisk === nextUIOptions.canvasActions.export.saveFileToDisk @@ -194,8 +210,8 @@ export { restoreLibraryItems, } from "../../data/restore"; export { - exportToCanvas, exportToBlob, + exportToCanvas, exportToSvg, serializeAsJSON, serializeLibraryAsJSON, @@ -225,3 +241,11 @@ export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../../utils"; +export { + getDefaultAppState, + cleanAppStateForExport, + clearAppStateForLocalStorage, +} from "../../appState"; + +export { jotaiScope, jotaiStore } from "../../jotai"; +export { libraryItemsAtom } from "../../data/library"; diff --git a/src/packages/excalidraw/main.js b/src/packages/excalidraw/main.js index b1668faf70a4..25c55a77b099 100644 --- a/src/packages/excalidraw/main.js +++ b/src/packages/excalidraw/main.js @@ -1,4 +1,7 @@ -if (process.env.NODE_ENV === "production") { +if ( + process.env.NODE_ENV === "production" || + window.__excalidraw_env__ === "production" +) { module.exports = require("./dist/excalidraw.production.min.js"); } else { module.exports = require("./dist/excalidraw.development.js"); diff --git a/src/packages/excalidraw/package.json b/src/packages/excalidraw/package.json index 4c3397a51547..f3c3acb21dd8 100644 --- a/src/packages/excalidraw/package.json +++ b/src/packages/excalidraw/package.json @@ -1,6 +1,6 @@ { - "name": "@excalidraw/excalidraw", - "version": "0.12.0", + "name": "@dwelle/excalidraw", + "version": "0.3.73", "main": "main.js", "types": "types/packages/excalidraw/index.d.ts", "files": [ @@ -11,15 +11,8 @@ "access": "public" }, "description": "Excalidraw as a React component", - "repository": "https://github.com/excalidraw/excalidraw", "license": "MIT", - "keywords": [ - "excalidraw", - "excalidraw-embed", - "react", - "npm", - "npm excalidraw" - ], + "keywords": [], "browserslist": { "production": [ ">0.2%", @@ -69,7 +62,7 @@ "webpack-dev-server": "4.9.3", "webpack-merge": "5.8.0" }, - "bugs": "https://github.com/excalidraw/excalidraw/issues", + "repository": "https://github.com/dwelle/excalidraw", "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw", "scripts": { "gen:types": "tsc --project ../../../tsconfig-types.json", diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 92f48a76b61e..3bd3dbcaad22 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -300,12 +300,12 @@ const drawElementOnCanvas = ( context.globalAlpha = 1; }; -const elementWithCanvasCache = new WeakMap< +let elementWithCanvasCache = new WeakMap< ExcalidrawElement, ExcalidrawElementWithCanvas >(); -const shapeCache = new WeakMap(); +let shapeCache = new WeakMap(); type ElementShape = Drawable | Drawable[] | null; @@ -332,6 +332,12 @@ export const setShapeForElement = ( export const invalidateShapeForElement = (element: ExcalidrawElement) => shapeCache.delete(element); +export const clearRenderCache = () => { + elementWithCanvasCache = new WeakMap(); + shapeCache = new WeakMap(); + pathsCache = new WeakMap(); +}; + export const generateRoughOptions = ( element: ExcalidrawElement, continuousPath = false, @@ -1044,7 +1050,7 @@ export const renderElementToSvg = ( } }; -export const pathsCache = new WeakMap([]); +export let pathsCache = new WeakMap([]); export function generateFreeDrawShape(element: ExcalidrawFreeDrawElement) { const svgPathData = getFreeDrawSvgPath(element); diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index 9df354078a73..4eecf7acc8a5 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -322,7 +322,11 @@ export const renderScene = ( selectionColors.push( ...renderConfig.remoteSelectedElementIds[element.id].map( (socketId) => { - const { background } = getClientColors(socketId, appState); + const picture = appState.collaborators.get(socketId)?.avatarUrl; + const { background } = getClientColors( + picture || socketId, + appState, + ); return background; }, ), @@ -430,7 +434,6 @@ export const renderScene = ( // Paint remote pointers for (const clientId in renderConfig.remotePointerViewportCoords) { let { x, y } = renderConfig.remotePointerViewportCoords[clientId]; - x -= appState.offsetLeft; y -= appState.offsetTop; @@ -448,7 +451,11 @@ export const renderScene = ( y = Math.max(y, 0); y = Math.min(y, normalizedCanvasHeight - height); - const { background, stroke } = getClientColors(clientId, appState); + const picture = appState.collaborators.get(clientId)?.avatarUrl; + const { background, stroke } = getClientColors( + picture || clientId, + appState, + ); context.save(); context.strokeStyle = stroke; diff --git a/src/scene/export.ts b/src/scene/export.ts index 9dacc755b2d8..6b3ec048e9c3 100644 --- a/src/scene/export.ts +++ b/src/scene/export.ts @@ -135,11 +135,11 @@ export const exportToSvg = async ( diff --git a/src/types.ts b/src/types.ts index 1539d533c041..e44367bc8929 100644 --- a/src/types.ts +++ b/src/types.ts @@ -248,6 +248,8 @@ export type ExcalidrawAPIRefValue = export type ExcalidrawInitialDataState = Merge< ImportedDataState, { + scrollX?: number; + scrollY?: number; libraryItems?: | Required["libraryItems"] | Promise["libraryItems"]>; @@ -255,15 +257,21 @@ export type ExcalidrawInitialDataState = Merge< >; export interface ExcalidrawProps { + id?: string | null; onChange?: ( elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, + id?: string | null, ) => void; initialData?: | ExcalidrawInitialDataState | null | Promise; + onHomeButtonClick?: () => void; + user?: { + name?: string | null; + }; excalidrawRef?: ForwardRef; onCollabButtonClick?: () => void; isCollaborating?: boolean; @@ -279,6 +287,7 @@ export interface ExcalidrawProps { renderTopRightUI?: ( isMobile: boolean, appState: AppState, + canvas: HTMLCanvasElement | null, ) => JSX.Element | null; renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null; langCode?: Language["code"]; @@ -343,28 +352,29 @@ export type ExportOpts = { ) => JSX.Element; }; -type CanvasActions = { +export type CanvasActions = { changeViewBackgroundColor?: boolean; clearCanvas?: boolean; - export?: false | ExportOpts; + export?: false | ExportOpts | (() => void); loadScene?: boolean; saveToActiveFile?: boolean; theme?: boolean; saveAsImage?: boolean; }; -export type AppProps = Merge< - ExcalidrawProps, - { - UIOptions: { - canvasActions: Required & { export: ExportOpts }; - dockedSidebarBreakpoint?: number; - }; - detectScroll: boolean; - handleKeyboardGlobally: boolean; - isCollaborating: boolean; - } ->; +export type UIOptions = { + canvasActions?: CanvasActions | false; +}; + +export type AppProps = ExcalidrawProps & { + UIOptions: { + canvasActions: Required | false; + dockedSidebarBreakpoint?: number; + }; + detectScroll: boolean; + handleKeyboardGlobally: boolean; + isCollaborating: boolean; +}; /** A subset of App class properties that we need to use elsewhere * in the app, eg Manager. Factored out into a separate type to keep DRY. */ @@ -475,6 +485,7 @@ export type ExcalidrawImperativeAPI = { setActiveTool: InstanceType["setActiveTool"]; setCursor: InstanceType["setCursor"]; resetCursor: InstanceType["resetCursor"]; + app: InstanceType; }; export type Device = Readonly<{ diff --git a/yarn.lock b/yarn.lock index fab36d5391cb..d6a5e9c15a14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3387,10 +3387,10 @@ brorand@^1.0.1, brorand@^1.1.0: resolved "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz" integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8= -browser-fs-access@0.29.1: - version "0.29.1" - resolved "https://registry.yarnpkg.com/browser-fs-access/-/browser-fs-access-0.29.1.tgz#8a9794c73cf86b9aec74201829999c597128379c" - integrity sha512-LSvVX5e21LRrXqVMhqtAwj5xPgDb+fXAIH80NsnCQ9xuZPs2xWsOREi24RKgZa1XOiQRbcmVrv87+ulOKsgjxw== +browser-fs-access@0.31.0: + version "0.31.0" + resolved "https://registry.yarnpkg.com/browser-fs-access/-/browser-fs-access-0.31.0.tgz#b2ac17322b81f3c89eaddcfc871b5fdbac174734" + integrity sha512-OndIM5LkmHfx01D3YuVvPpW3fochBeXFS3yhDzcD/Yk7S3lx5RZGltnf7xwbr5V0B8XuN2becZmtceOQFZgQPw== browser-process-hrtime@^1.0.0: version "1.0.0"