chore(deps-dev): bump @babel/core from 7.17.2 to 7.18.2 in /src/packages/utils

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",
@@ -112,6 +113,8 @@
     "test:typecheck": "tsc",
     "test:update": "yarn test:app --updateSnapshot --watchAll=false",
     "test": "yarn test:app",
-    "autorelease": "node scripts/autorelease.js"
+    "autorelease": "node scripts/autorelease.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

@@ -165,7 +165,10 @@ import {
 } from "../keys";
 import { distance2d, getGridPoint, isPathALoop } from "../math";
 import { renderScene } from "../renderer";
-import { invalidateShapeForElement } from "../renderer/renderElement";
+import {
+  clearRenderCache,
+  invalidateShapeForElement,
+} from "../renderer/renderElement";
 import {
   calculateScrollCenter,
   getTextBindableContainerAtPosition,
@@ -267,7 +270,7 @@ const DeviceTypeContext = React.createContext(defaultDeviceTypeContext);
 export const useDeviceType = () => useContext(DeviceTypeContext);
 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.deviceType.isMobile,
         })}
@@ -499,6 +504,7 @@ class App extends React.Component<AppProps, AppState> {
         >
           <DeviceTypeContext.Provider value={this.deviceType}>
             <LayerUI
+              onHomeButtonClick={this.props.onHomeButtonClick}
               canvas={this.canvas}
               appState={this.state}
               files={this.files}
@@ -528,6 +534,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,
@@ -882,6 +896,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;
   }
@@ -922,6 +955,7 @@ class App extends React.Component<AppProps, AppState> {
       this.disableEvent,
       false,
     );
+    document.fonts?.removeEventListener?.("loadingdone", this.onFontLoaded);
 
     document.removeEventListener(
       EVENT.GESTURE_START,
@@ -1059,6 +1093,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,
@@ -1205,6 +1248,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 { useDeviceType } 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={useDeviceType().isMobile}
         title={t("buttons.export")}
       />
-      {modalIsShown && (
+      {modalIsShown && exportOpts && typeof exportOpts !== "function" && (
         <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <JSONExportModal
             elements={elements}