custom

Author: dwelle

package.json

@@ -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"
   }
 }

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)
     ) {

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<Device>(deviceContextInitialValue);
 export const useDevice = () => useContext<Device>(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<AppProps, AppState> {
         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<AppProps, AppState> {
     return (
       <div
         className={clsx("excalidraw excalidraw-container", {
+          "excalidraw--zen-mode": zenModeEnabled,
           "excalidraw--view-mode": viewModeEnabled,
           "excalidraw--mobile": this.device.isMobile,
         })}
@@ -499,6 +504,7 @@ class App extends React.Component<AppProps, AppState> {
         >
           <DeviceContext.Provider value={this.device}>
             <LayerUI
+              onHomeButtonClick={this.props.onHomeButtonClick}
               canvas={this.canvas}
               appState={this.state}
               files={this.files}
@@ -529,6 +535,7 @@ class App extends React.Component<AppProps, AppState> {
               }
               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<AppProps, AppState> {
       };
     }
 
+    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<AppProps, AppState> {
     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<AppProps, AppState> {
       this.disableEvent,
       false,
     );
+    document.fonts?.removeEventListener?.("loadingdone", this.onFontLoaded);
 
     document.removeEventListener(
       EVENT.GESTURE_START,
@@ -1122,6 +1156,15 @@ class App extends React.Component<AppProps, AppState> {
       });
     }
 
+    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<AppProps, AppState> {
         this.scene.getElementsIncludingDeleted(),
         this.state,
         this.files,
+        this.props.id,
       );
     }
   }

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;

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;
+        }
+      }
+    }
   }
 }

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 = ({
     <>
       <ToolButton
         onClick={() => {
-          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" && (
         <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <JSONExportModal
             elements={elements}

src/components/LayerUI.tsx

@@ -41,6 +41,7 @@ import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 
 interface LayerUIProps {
+  onHomeButtonClick?: () => 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 <div style={{ width: ".625em" }} />;
-  };
-
   const renderViewModeCanvasActions = () => {
     return (
       <Section
@@ -199,13 +197,11 @@ const LayerUI = ({
          see https://github.com/excalidraw/excalidraw/pull/1445 */}
       <Island padding={2} style={{ zIndex: 1 }}>
         <Stack.Col gap={4}>
-          <Stack.Row gap={1} justifyContent="space-between">
+          <Stack.Row gap={3} justifyContent="space-between">
             {actionManager.renderAction("clearCanvas")}
-            <Separator />
             {actionManager.renderAction("loadScene")}
             {renderJSONExportDialog()}
             {renderImageExportDialog()}
-            <Separator />
             {onCollabButtonClick && (
               <CollabButton
                 isCollaborating={isCollaborating}
@@ -304,9 +300,10 @@ const LayerUI = ({
             gap={4}
             className={clsx({ "disable-pointerEvents": zenModeEnabled })}
           >
-            {viewModeEnabled
-              ? renderViewModeCanvasActions()
-              : renderCanvasActions()}
+            {UIOptions.canvasActions &&
+              (viewModeEnabled
+                ? renderViewModeCanvasActions()
+                : renderCanvasActions())}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
           {!viewModeEnabled && (
@@ -378,8 +375,12 @@ const LayerUI = ({
             <UserList
               collaborators={appState.collaborators}
               actionManager={actionManager}
+              className={clsx("zen-mode-transition", {
+                "transition-right": zenModeEnabled,
+              })}
+              layout="vertical"
             />
-            {renderTopRightUI?.(device.isMobile, appState)}
+            {renderTopRightUI?.(device.isMobile, appState, canvas)}
           </div>
         </div>
       </FixedSideContainer>
@@ -530,6 +531,7 @@ const LayerUI = ({
     <>
       {dialogs}
       <MobileMenu
+        onHomeButtonClick={onHomeButtonClick}
         appState={appState}
         elements={elements}
         actionManager={actionManager}
@@ -548,6 +550,7 @@ const LayerUI = ({
         onImageAction={onImageAction}
         renderTopRightUI={renderTopRightUI}
         renderStats={renderStats}
+        UIOptions={UIOptions}
       />
     </>
   ) : (
@@ -606,6 +609,7 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
 
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
   return (
+    prev.renderTopRightUI === next.renderTopRightUI &&
     prev.renderCustomFooter === next.renderCustomFooter &&
     prev.langCode === next.langCode &&
     prev.elements === next.elements &&