Grid

* refactor: Use the latest vercel configuration instead of now

* Remove redict

package-lock.json

@@ -2663,70 +2663,86 @@
       }
     },
     "@sentry/browser": {
-      "version": "6.0.1",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.0.3.tgz",
-      "integrity": "sha512-iP8Bqxj4Ye8CXA4ja77buPZfXsKiZYUgHFzBQxVMihTHA8ZZLgBMPLQI6uFfHuJJW+1/yLzOf8BhvF2zknAebg==",
+      "integrity": "sha512-Ukxh83Twql4UmUgds9wPWllE62NG71cYvm5AM6daTojvM8wFR2jh7G6GiA0WYfgMb2fw6SlbevB2xb6RDG5DzQ==",
       "requires": {
-        "@sentry/core": "6.0.1",
+        "@sentry/core": "6.0.3",
-        "@sentry/types": "6.0.1",
+        "@sentry/types": "6.0.3",
-        "@sentry/utils": "6.0.1",
+        "@sentry/utils": "6.0.3",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/core": {
-      "version": "6.0.1",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.0.3.tgz",
-      "integrity": "sha512-EoxgodyClasI8PA4GyU8Cp88W3R5ebpiLsE7fCcBcOU0DOBRkO8GAZ5IzfCDtYDJ50c9npivum5Oyj2wf8CXYw==",
+      "integrity": "sha512-UykB/4/98y2DkNvwTiL2ofFPuK3KDHc7rIRNsdj6dg6D+Cf7FRexgmWUUkZrpC/y+QBj0TPqkcFDcZAuQDa3Ag==",
       "requires": {
-        "@sentry/hub": "6.0.1",
+        "@sentry/hub": "6.0.3",
-        "@sentry/minimal": "6.0.1",
+        "@sentry/minimal": "6.0.3",
-        "@sentry/types": "6.0.1",
+        "@sentry/types": "6.0.3",
-        "@sentry/utils": "6.0.1",
+        "@sentry/utils": "6.0.3",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/hub": {
-      "version": "6.0.1",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.0.3.tgz",
-      "integrity": "sha512-pGckNdhKcr7qYVXgSgA/QVGArATcmQu54YFAR5xTnkWVHpAwNmh0fc4CJCc4JBwS/LXSU1Y0nYiLQduVfnv8Cg==",
+      "integrity": "sha512-BfV32tE09rjTWM9W0kk8gzxUC2k1h57Z5dNWJ35na79+LguNNtCcI6fHlFQ3PkJca6ITYof9FI8iQHUfsHFZnw==",
       "requires": {
-        "@sentry/types": "6.0.1",
+        "@sentry/types": "6.0.3",
-        "@sentry/utils": "6.0.1",
+        "@sentry/utils": "6.0.3",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/integrations": {
-      "version": "6.0.1",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-6.0.3.tgz",
-      "integrity": "sha512-5HGwKW0otSVXSLAJ9ezqlux4AYdeX6ElzQgpm6roWEBXEWf/5OyD0n+M3+yHq4NdQXk2kkfL/0DCyNdy8zZX2Q==",
+      "integrity": "sha512-SE/rQ+ttfoC6FlHDibB4e9lV95j78YkjQ6PvYNUe+zGkGIretCJREqgaS+W3qTNYvOdbUViuiiqtdfyvW9nM2g==",
       "requires": {
-        "@sentry/types": "6.0.1",
+        "@sentry/types": "6.0.3",
-        "@sentry/utils": "6.0.1",
+        "@sentry/utils": "6.0.3",
-        "localforage": "1.8.1",
+        "localforage": "^1.8.1",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "@sentry/types": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.0.3.tgz",
+          "integrity": "sha512-266aBQbk9AGedhG2dzXshWbn23LYLElXqlI74DLku48UrU2v7TGKdyik/8/nfOfquCoRSp0GFGYHbItwU124XQ=="
+        },
+        "@sentry/utils": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.0.3.tgz",
+          "integrity": "sha512-lvuBFvZHYs1zYwI8dkC8Z8ryb0aYnwPFUl1rbZiMwJpYI2Dgl1jpqqZWv9luux2rSRYOMid74uGedV708rvEgA==",
+          "requires": {
+            "@sentry/types": "6.0.3",
+            "tslib": "^1.9.3"
+          }
+        }
       }
     },
     "@sentry/minimal": {
-      "version": "6.0.1",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.0.3.tgz",
-      "integrity": "sha512-TQ/M5A+OsxtQJ8dzHwrclxKXpJNdQeM1PUoYhff4BvsOXJScvZb7+Yn0OUEQXEc9pSMNt62tnQy4ct80iAMTHw==",
+      "integrity": "sha512-YsW+nw0SMyyb7UQdjZeKlZjxbGsJFpXNLh9iIp6fHKnoLTTv17YPm2ej9sOikDsQuVotaPg/xn/Qt5wySGHIxw==",
       "requires": {
-        "@sentry/hub": "6.0.1",
+        "@sentry/hub": "6.0.3",
-        "@sentry/types": "6.0.1",
+        "@sentry/types": "6.0.3",
         "tslib": "^1.9.3"
       }
     },
     "@sentry/types": {
-      "version": "6.0.1",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.0.3.tgz",
-      "integrity": "sha512-cEoe19vtam75Tf6eWmaobfbeV8XwBdr5FJoSVTomzcSsEiP2FHGOEhlE7kVBigzeH5Lri0aibiW6BDi1hIqHdg=="
+      "integrity": "sha512-266aBQbk9AGedhG2dzXshWbn23LYLElXqlI74DLku48UrU2v7TGKdyik/8/nfOfquCoRSp0GFGYHbItwU124XQ=="
     },
     "@sentry/utils": {
-      "version": "6.0.1",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.0.3.tgz",
-      "integrity": "sha512-bjGuBYnG6fulZ8mLhPGBxttNu96DCN6d7Glw2sfLf4aurn1kjJ/58hP2c8dH0OqWO5e+rGYTsZ5Dr5kqVKNGTg==",
+      "integrity": "sha512-lvuBFvZHYs1zYwI8dkC8Z8ryb0aYnwPFUl1rbZiMwJpYI2Dgl1jpqqZWv9luux2rSRYOMid74uGedV708rvEgA==",
       "requires": {
-        "@sentry/types": "6.0.1",
+        "@sentry/types": "6.0.3",
         "tslib": "^1.9.3"
       }
     },
@@ -14246,9 +14262,9 @@
       }
     },
     "localforage": {
-      "version": "1.8.1",
+      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
-      "integrity": "sha512-azSSJJfc7h4bVpi0PGi+SmLQKJl2/8NErI+LhJsrORNikMZnhaQ7rv9fHj+ofwgSHrKRlsDCL/639a6nECIKuQ==",
+      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
       "requires": {
         "lie": "3.1.1"
       }

package.json

@@ -19,8 +19,8 @@
     ]
   },
   "dependencies": {
-    "@sentry/browser": "6.0.1",
+    "@sentry/browser": "6.0.3",
-    "@sentry/integrations": "6.0.1",
+    "@sentry/integrations": "6.0.3",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.3",
     "@types/jest": "26.0.20",

scripts/locales-coverage-description.js

@@ -18,6 +18,7 @@ const crowdinMap = {
   "id-ID": "en-id",
   "it-IT": "en-it",
   "ja-JP": "en-ja",
+  "kab-KAB": "en-kab",
   "ko-KR": "en-ko",
   "my-MM": "en-my",
   "nb-NO": "en-nb",
@@ -40,7 +41,7 @@ const crowdinMap = {
 const flags = {
   "ar-SA": "🇸🇦",
   "bg-BG": "🇧🇬",
-  "ca-ES": "🇪🇸",
+  "ca-ES": "🏳",
   "de-DE": "🇩🇪",
   "el-GR": "🇬🇷",
   "es-ES": "🇪🇸",
@@ -53,6 +54,7 @@ const flags = {
   "id-ID": "🇮🇩",
   "it-IT": "🇮🇹",
   "ja-JP": "🇯🇵",
+  "kab-KAB": "🏳",
   "ko-KR": "🇰🇷",
   "my-MM": "🇲🇲",
   "nb-NO": "🇳🇴",
@@ -88,6 +90,7 @@ const languages = {
   "id-ID": "Bahasa Indonesia",
   "it-IT": "Italiano",
   "ja-JP": "日本語",
+  "kab-KAB": "Taqbaylit",
   "ko-KR": "한국어",
   "my-MM": "Burmese",
   "nb-NO": "Norsk bokmål",

src/actions/actionCanvas.tsx

@@ -3,7 +3,7 @@ import { getDefaultAppState } from "../appState";
 import { ColorPicker } from "../components/ColorPicker";
 import { resetZoom, trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { ZOOM_STEP } from "../constants";
+import { GRID_SIZE, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
@@ -52,7 +52,7 @@ export const actionClearCanvas = register({
         elementLocked: appState.elementLocked,
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,
-        gridSize: appState.gridSize,
+        gridSize: appState.gridSize || GRID_SIZE,
         shouldAddWatermark: appState.shouldAddWatermark,
         showStats: appState.showStats,
         pasteDialog: appState.pasteDialog,

src/actions/actionToggleGridMode.tsx

@@ -1,20 +1,21 @@
+import { trackEvent } from "../analytics";
 import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
+import { register } from "./register";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
   perform(elements, appState) {
+    trackEvent("view", "mode", "grid");
     return {
       appState: {
         ...appState,
-        gridSize: this.checked!(appState) ? null : GRID_SIZE,
+        showGrid: !appState.showGrid,
       },
       commitToHistory: false,
     };
   },
-  checked: (appState: AppState) => appState.gridSize !== null,
+  checked: (appState: AppState) => appState.showGrid,
   contextItemLabel: "labels.gridMode",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/actions/actionToggleViewMode.tsx

@@ -0,0 +1,22 @@
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
+import { trackEvent } from "../analytics";
+
+export const actionToggleViewMode = register({
+  name: "viewMode",
+  perform(elements, appState) {
+    trackEvent("view", "mode", "view");
+    return {
+      appState: {
+        ...appState,
+        viewModeEnabled: !this.checked!(appState),
+        selectedElementIds: {},
+      },
+      commitToHistory: false,
+    };
+  },
+  checked: (appState) => appState.viewModeEnabled,
+  contextItemLabel: "labels.viewMode",
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,
+});

src/actions/actionToggleZenMode.tsx

@@ -1,9 +1,12 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { trackEvent } from "../analytics";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
   perform(elements, appState) {
+    trackEvent("view", "mode", "zen");
+
     return {
       appState: {
         ...appState,

src/actions/manager.tsx

@@ -7,11 +7,11 @@ import {
   ActionResult,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 
 // This is the <App> component, but for now we don't care about anything but its
 // `canvas` state.
-type App = { canvas: HTMLCanvasElement | null };
+type App = { canvas: HTMLCanvasElement | null; props: ExcalidrawProps };
 
 export class ActionManager implements ActionsManagerInterface {
   actions = {} as ActionsManagerInterface["actions"];
@@ -66,6 +66,12 @@ export class ActionManager implements ActionsManagerInterface {
     if (data.length === 0) {
       return false;
     }
+    const { viewModeEnabled } = this.getAppState();
+    if (viewModeEnabled) {
+      if (data[0].name !== "viewMode") {
+        return false;
+      }
+    }
 
     event.preventDefault();
     this.updater(

src/actions/shortcuts.ts

@@ -22,7 +22,8 @@ export type ShortcutName =
   | "gridMode"
   | "zenMode"
   | "stats"
-  | "addToLibrary";
+  | "addToLibrary"
+  | "viewMode";
 
 const shortcutMap: Record<ShortcutName, string[]> = {
   cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -56,6 +57,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   zenMode: [getShortcutKey("Alt+Z")],
   stats: [],
   addToLibrary: [],
+  viewMode: [getShortcutKey("Alt+R")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {

src/actions/types.ts

@@ -84,7 +84,8 @@ export type ActionName =
   | "alignVerticallyCentered"
   | "alignHorizontallyCentered"
   | "distributeHorizontally"
-  | "distributeVertically";
+  | "distributeVertically"
+  | "viewMode";
 
 export interface Action {
   name: ActionName;

src/appState.ts

@@ -3,6 +3,7 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
+  GRID_SIZE,
 } from "./constants";
 import { t } from "./i18n";
 import { AppState, NormalizedZoomValue } from "./types";
@@ -41,7 +42,7 @@ export const getDefaultAppState = (): Omit<
     exportBackground: true,
     exportEmbedScene: false,
     fileHandle: null,
-    gridSize: null,
+    gridSize: GRID_SIZE,
     height: window.innerHeight,
     isBindingEnabled: true,
     isLibraryOpen: false,
@@ -63,6 +64,7 @@ export const getDefaultAppState = (): Omit<
     selectionElement: null,
     shouldAddWatermark: false,
     shouldCacheIgnoreZoom: false,
+    showGrid: false,
     showHelpDialog: false,
     showStats: false,
     startBoundElement: null,
@@ -72,6 +74,7 @@ export const getDefaultAppState = (): Omit<
     width: window.innerWidth,
     zenModeEnabled: false,
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
+    viewModeEnabled: false,
   };
 };
 
@@ -119,6 +122,7 @@ const APP_STATE_STORAGE_CONF = (<
   exportEmbedScene: { browser: true, export: false },
   fileHandle: { browser: false, export: false },
   gridSize: { browser: true, export: true },
+  showGrid: { browser: true, export: false },
   height: { browser: false, export: false },
   isBindingEnabled: { browser: false, export: false },
   isLibraryOpen: { browser: false, export: false },
@@ -151,6 +155,7 @@ const APP_STATE_STORAGE_CONF = (<
   width: { browser: false, export: false },
   zenModeEnabled: { browser: true, export: false },
   zoom: { browser: true, export: false },
+  viewModeEnabled: { browser: false, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/components/App.tsx

@@ -2,6 +2,8 @@ import { Point, simplify } from "points-on-curve";
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
+import clsx from "clsx";
+
 import "../actions";
 import {
   actionAddToLibrary,
@@ -175,10 +177,11 @@ import {
   withBatchedUpdates,
 } from "../utils";
 import { isMobile } from "../is-mobile";
-import ContextMenu from "./ContextMenu";
+import ContextMenu, { ContextMenuOption } from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Stats } from "./Stats";
 import { Toast } from "./Toast";
+import { actionToggleViewMode } from "../actions/actionToggleViewMode";
 
 const { history } = createHistory();
 
@@ -295,6 +298,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       offsetLeft,
       offsetTop,
       excalidrawRef,
+      viewModeEnabled = false,
     } = props;
     this.state = {
       ...defaultAppState,
@@ -302,6 +306,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       width,
       height,
       ...this.getCanvasOffsets({ offsetLeft, offsetTop }),
+      viewModeEnabled,
     };
     if (excalidrawRef) {
       const readyPromise =
@@ -342,6 +347,62 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.actionManager.registerAction(createRedoAction(history));
   }
 
+  private renderCanvas() {
+    const canvasScale = window.devicePixelRatio;
+    const {
+      width: canvasDOMWidth,
+      height: canvasDOMHeight,
+      viewModeEnabled,
+    } = this.state;
+    const canvasWidth = canvasDOMWidth * canvasScale;
+    const canvasHeight = canvasDOMHeight * canvasScale;
+    if (viewModeEnabled) {
+      return (
+        <canvas
+          id="canvas"
+          style={{
+            width: canvasDOMWidth,
+            height: canvasDOMHeight,
+            cursor: "grabbing",
+          }}
+          width={canvasWidth}
+          height={canvasHeight}
+          ref={this.handleCanvasRef}
+          onContextMenu={this.handleCanvasContextMenu}
+          onPointerMove={this.handleCanvasPointerMove}
+          onPointerUp={this.removePointer}
+          onPointerCancel={this.removePointer}
+          onTouchMove={this.handleTouchMove}
+          onPointerDown={this.handleCanvasPointerDown}
+        >
+          {t("labels.drawingCanvas")}
+        </canvas>
+      );
+    }
+    return (
+      <canvas
+        id="canvas"
+        style={{
+          width: canvasDOMWidth,
+          height: canvasDOMHeight,
+        }}
+        width={canvasWidth}
+        height={canvasHeight}
+        ref={this.handleCanvasRef}
+        onContextMenu={this.handleCanvasContextMenu}
+        onPointerDown={this.handleCanvasPointerDown}
+        onDoubleClick={this.handleCanvasDoubleClick}
+        onPointerMove={this.handleCanvasPointerMove}
+        onPointerUp={this.removePointer}
+        onPointerCancel={this.removePointer}
+        onTouchMove={this.handleTouchMove}
+        onDrop={this.handleCanvasOnDrop}
+      >
+        {t("labels.drawingCanvas")}
+      </canvas>
+    );
+  }
+
   public render() {
     const {
       zenModeEnabled,
@@ -349,20 +410,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       height: canvasDOMHeight,
       offsetTop,
       offsetLeft,
+      viewModeEnabled,
     } = this.state;
 
     const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props;
-    const canvasScale = window.devicePixelRatio;
-
-    const canvasWidth = canvasDOMWidth * canvasScale;
-    const canvasHeight = canvasDOMHeight * canvasScale;
 
     const DEFAULT_PASTE_X = canvasDOMWidth / 2;
     const DEFAULT_PASTE_Y = canvasDOMHeight / 2;
 
     return (
       <div
-        className="excalidraw"
+        className={clsx("excalidraw", {
+          "excalidraw--view-mode": viewModeEnabled,
+        })}
         ref={this.excalidrawContainerRef}
         style={{
           width: canvasDOMWidth,
@@ -392,9 +452,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           isCollaborating={this.props.isCollaborating || false}
           onExportToBackend={onExportToBackend}
           renderCustomFooter={renderFooter}
+          viewModeEnabled={viewModeEnabled}
         />
         {this.state.showStats && (
           <Stats
+            setAppState={this.setAppState}
             appState={this.state}
             elements={this.scene.getElements()}
             onClose={this.toggleStats}
@@ -406,28 +468,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             clearToast={this.clearToast}
           />
         )}
-        <main>
+        <main>{this.renderCanvas()}</main>
-          <canvas
-            id="canvas"
-            style={{
-              width: canvasDOMWidth,
-              height: canvasDOMHeight,
-            }}
-            width={canvasWidth}
-            height={canvasHeight}
-            ref={this.handleCanvasRef}
-            onContextMenu={this.handleCanvasContextMenu}
-            onPointerDown={this.handleCanvasPointerDown}
-            onDoubleClick={this.handleCanvasDoubleClick}
-            onPointerMove={this.handleCanvasPointerMove}
-            onPointerUp={this.removePointer}
-            onPointerCancel={this.removePointer}
-            onTouchMove={this.handleTouchMove}
-            onDrop={this.handleCanvasOnDrop}
-          >
-            {t("labels.drawingCanvas")}
-          </canvas>
-        </main>
       </div>
     );
   }
@@ -467,6 +508,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         if (actionResult.commitToHistory) {
           history.resumeRecording();
         }
+
+        let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
+
+        if (typeof this.props.viewModeEnabled !== "undefined") {
+          viewModeEnabled = this.props.viewModeEnabled;
+        }
+
         this.setState(
           (state) => ({
             ...actionResult.appState,
@@ -476,6 +524,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             height: state.height,
             offsetTop: state.offsetTop,
             offsetLeft: state.offsetLeft,
+            viewModeEnabled,
           }),
           () => {
             if (actionResult.syncHistory) {
@@ -658,7 +707,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
 
     this.scene.addCallback(this.onSceneUpdated);
-
     this.addEventListeners();
 
     // optim to avoid extra render on init
@@ -725,25 +773,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   private addEventListeners() {
+    this.removeEventListeners();
     document.addEventListener(EVENT.COPY, this.onCopy);
-    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
-    document.addEventListener(EVENT.CUT, this.onCut);
-
     document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
     document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true });
     document.addEventListener(
       EVENT.MOUSE_MOVE,
       this.updateCurrentCursorPosition,
     );
-    window.addEventListener(EVENT.RESIZE, this.onResize, false);
-    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
-    window.addEventListener(EVENT.BLUR, this.onBlur, false);
-    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-    window.addEventListener(EVENT.DROP, this.disableEvent, false);
-
     // rerender text elements on font load to fix #637 && #1553
     document.fonts?.addEventListener?.("loadingdone", this.onFontLoaded);
-
     // Safari-only desktop pinch zoom
     document.addEventListener(
       EVENT.GESTURE_START,
@@ -760,6 +799,18 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.onGestureEnd as any,
       false,
     );
+    if (this.state.viewModeEnabled) {
+      return;
+    }
+
+    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
+    document.addEventListener(EVENT.CUT, this.onCut);
+
+    window.addEventListener(EVENT.RESIZE, this.onResize, false);
+    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
+    window.addEventListener(EVENT.BLUR, this.onBlur, false);
+    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
+    window.addEventListener(EVENT.DROP, this.disableEvent, false);
   }
 
   componentDidUpdate(prevProps: ExcalidrawProps, prevState: AppState) {
@@ -782,6 +833,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
+    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
+      this.setState(
+        { viewModeEnabled: !!this.props.viewModeEnabled },
+        this.addEventListeners,
+      );
+    }
+
+    if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {
+      this.addEventListeners();
+    }
+
     document
       .querySelector(".excalidraw")
       ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
@@ -1026,7 +1088,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const dy = y - elementsCenterY;
     const groupIdMap = new Map();
 
-    const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
+    const [gridX, gridY] = getGridPoint(
+      dx,
+      dy,
+      this.state.showGrid,
+      this.state.gridSize,
+    );
 
     const oldIdToDuplicatedId = new Map();
     const newElements = clipboardElements.map((element) => {
@@ -1232,21 +1299,25 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
-    if (event[KEYS.CTRL_OR_CMD]) {
-      this.setState({ isBindingEnabled: false });
-    }
-
     if (this.actionManager.handleKeyDown(event)) {
       return;
     }
 
+    if (this.state.viewModeEnabled) {
+      return;
+    }
+
+    if (event[KEYS.CTRL_OR_CMD]) {
+      this.setState({ isBindingEnabled: false });
+    }
+
     if (event.code === CODES.NINE) {
       this.setState({ isLibraryOpen: !this.state.isLibraryOpen });
     }
 
     if (isArrowKey(event.key)) {
       const step =
-        (this.state.gridSize &&
+        (this.state.showGrid &&
           (event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize)) ||
         (event.shiftKey
           ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
@@ -1788,6 +1859,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         scenePointerX,
         scenePointerY,
         this.state.editingLinearElement,
+        this.state.showGrid,
         this.state.gridSize,
       );
       if (editingLinearElement !== this.state.editingLinearElement) {
@@ -2046,14 +2118,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     lastPointerUp = onPointerUp;
 
-    window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
+    if (!this.state.viewModeEnabled) {
-    window.addEventListener(EVENT.POINTER_UP, onPointerUp);
+      window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
-    window.addEventListener(EVENT.KEYDOWN, onKeyDown);
+      window.addEventListener(EVENT.POINTER_UP, onPointerUp);
-    window.addEventListener(EVENT.KEYUP, onKeyUp);
+      window.addEventListener(EVENT.KEYDOWN, onKeyDown);
-    pointerDownState.eventListeners.onMove = onPointerMove;
+      window.addEventListener(EVENT.KEYUP, onKeyUp);
-    pointerDownState.eventListeners.onUp = onPointerUp;
+      pointerDownState.eventListeners.onMove = onPointerMove;
-    pointerDownState.eventListeners.onKeyUp = onKeyUp;
+      pointerDownState.eventListeners.onUp = onPointerUp;
-    pointerDownState.eventListeners.onKeyDown = onKeyDown;
+      pointerDownState.eventListeners.onKeyUp = onKeyUp;
+      pointerDownState.eventListeners.onKeyDown = onKeyDown;
+    }
   };
 
   private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
@@ -2103,7 +2177,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       !(
         gesture.pointers.size === 0 &&
         (event.button === POINTER_BUTTON.WHEEL ||
-          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace))
+          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
+          this.state.viewModeEnabled)
       )
     ) {
       return false;
@@ -2214,7 +2289,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     return {
       origin,
       originInGrid: tupleToCoors(
-        getGridPoint(origin.x, origin.y, this.state.gridSize),
+        getGridPoint(
+          origin.x,
+          origin.y,
+          this.state.showGrid,
+          this.state.gridSize,
+        ),
       ),
       scrollbars: isOverScrollBars(
         currentScrollBars,
@@ -2570,7 +2650,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        elementType === "draw" ? null : this.state.gridSize,
+        elementType === "draw" ? false : this.state.showGrid,
+        this.state.gridSize,
       );
 
       /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
@@ -2632,6 +2713,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const [gridX, gridY] = getGridPoint(
       pointerDownState.origin.x,
       pointerDownState.origin.y,
+      this.state.showGrid,
       this.state.gridSize,
     );
     const element = newElement({
@@ -2721,6 +2803,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerCoords.x,
         pointerCoords.y,
+        this.state.showGrid,
         this.state.gridSize,
       );
 
@@ -2793,6 +2876,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           const [dragX, dragY] = getGridPoint(
             pointerCoords.x - pointerDownState.drag.offset.x,
             pointerCoords.y - pointerDownState.drag.offset.y,
+            this.state.showGrid,
             this.state.gridSize,
           );
 
@@ -2845,6 +2929,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
                 const [originDragX, originDragY] = getGridPoint(
                   pointerDownState.origin.x - pointerDownState.drag.offset.x,
                   pointerDownState.origin.y - pointerDownState.drag.offset.y,
+                  this.state.showGrid,
                   this.state.gridSize,
                 );
                 mutateElement(duplicatedElement, {
@@ -3501,6 +3586,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       const [gridX, gridY] = getGridPoint(
         pointerCoords.x,
         pointerCoords.y,
+        this.state.showGrid,
         this.state.gridSize,
       );
       dragNewElement(
@@ -3539,6 +3625,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const [resizeX, resizeY] = getGridPoint(
       pointerCoords.x - pointerDownState.resize.offset.x,
       pointerCoords.y - pointerDownState.resize.offset.y,
+      this.state.showGrid,
       this.state.gridSize,
     );
     if (
@@ -3590,7 +3677,36 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     const elements = this.scene.getElements();
     const element = this.getElementAtPosition(x, y);
+    const options: ContextMenuOption[] = [];
+    if (probablySupportsClipboardBlob && elements.length > 0) {
+      options.push(actionCopyAsPng);
+    }
+
+    if (probablySupportsClipboardWriteText && elements.length > 0) {
+      options.push(actionCopyAsSvg);
+    }
     if (!element) {
+      const viewModeOptions: ContextMenuOption[] = [
+        ...options,
+        actionToggleStats,
+      ];
+
+      if (typeof this.props.viewModeEnabled === "undefined") {
+        viewModeOptions.push(actionToggleViewMode);
+      }
+
+      ContextMenu.push({
+        options: viewModeOptions,
+        top: clientY,
+        left: clientX,
+        actionManager: this.actionManager,
+        appState: this.state,
+      });
+
+      if (this.state.viewModeEnabled) {
+        return;
+      }
+
       ContextMenu.push({
         options: [
           _isMobile &&
@@ -3618,6 +3734,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           separator,
           actionToggleGridMode,
           actionToggleZenMode,
+          typeof this.props.viewModeEnabled === "undefined" &&
+            actionToggleViewMode,
           actionToggleStats,
         ],
         top: clientY,
@@ -3632,6 +3750,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.setState({ selectedElementIds: { [element.id]: true } });
     }
 
+    if (this.state.viewModeEnabled) {
+      ContextMenu.push({
+        options: [navigator.clipboard && actionCopy, ...options],
+        top: clientY,
+        left: clientX,
+        actionManager: this.actionManager,
+        appState: this.state,
+      });
+      return;
+    }
+
     ContextMenu.push({
       options: [
         _isMobile && actionCut,
@@ -3648,8 +3777,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             contextItemLabel: "labels.paste",
           },
         _isMobile && separator,
-        probablySupportsClipboardBlob && actionCopyAsPng,
+        ...options,
-        probablySupportsClipboardWriteText && actionCopyAsSvg,
         separator,
         actionCopyStyles,
         actionPasteStyles,

src/components/ContextMenu.tsx

@@ -13,7 +13,7 @@ import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
 
-type ContextMenuOption = "separator" | Action;
+export type ContextMenuOption = "separator" | Action;
 
 type ContextMenuProps = {
   options: ContextMenuOption[];

src/components/HelpDialog.tsx

@@ -227,6 +227,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   label={t("labels.gridMode")}
                   shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
                 />
+                <Shortcut
+                  label={t("labels.viewMode")}
+                  shortcuts={[getShortcutKey("Alt+R")]}
+                />
               </ShortcutIsland>
             </Column>
             <Column>

src/components/LayerUI.tsx

@@ -61,6 +61,7 @@ interface LayerUIProps {
     canvas: HTMLCanvasElement | null,
   ) => void;
   renderCustomFooter?: (isMobile: boolean) => JSX.Element;
+  viewModeEnabled: boolean;
 }
 
 const useOnClickOutside = (
@@ -299,6 +300,7 @@ const LayerUI = ({
   isCollaborating,
   onExportToBackend,
   renderCustomFooter,
+  viewModeEnabled,
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
@@ -358,6 +360,28 @@ const LayerUI = ({
     );
   };
 
+  const renderViewModeCanvasActions = () => {
+    return (
+      <Section
+        heading="canvasActions"
+        className={clsx("zen-mode-transition", {
+          "transition-left": zenModeEnabled,
+        })}
+      >
+        {/* the zIndex ensures this menu has higher stacking order,
+         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">
+              {actionManager.renderAction("saveScene")}
+              {actionManager.renderAction("saveAsScene")}
+              {renderExportDialog()}
+            </Stack.Row>
+          </Stack.Col>
+        </Island>
+      </Section>
+    );
+  };
   const renderCanvasActions = () => (
     <Section
       heading="canvasActions"
@@ -448,38 +472,42 @@ const LayerUI = ({
             gap={4}
             className={clsx({ "disable-pointerEvents": zenModeEnabled })}
           >
-            {renderCanvasActions()}
+            {viewModeEnabled
+              ? renderViewModeCanvasActions()
+              : renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
-          <Section heading="shapes">
+          {!viewModeEnabled && (
-            {(heading) => (
+            <Section heading="shapes">
-              <Stack.Col gap={4} align="start">
+              {(heading) => (
-                <Stack.Row gap={1}>
+                <Stack.Col gap={4} align="start">
-                  <Island
+                  <Stack.Row gap={1}>
-                    padding={1}
+                    <Island
-                    className={clsx({ "zen-mode": zenModeEnabled })}
+                      padding={1}
-                  >
+                      className={clsx({ "zen-mode": zenModeEnabled })}
-                    <HintViewer appState={appState} elements={elements} />
+                    >
-                    {heading}
+                      <HintViewer appState={appState} elements={elements} />
-                    <Stack.Row gap={1}>
+                      {heading}
-                      <ShapesSwitcher
+                      <Stack.Row gap={1}>
-                        elementType={appState.elementType}
+                        <ShapesSwitcher
-                        setAppState={setAppState}
+                          elementType={appState.elementType}
-                        isLibraryOpen={appState.isLibraryOpen}
+                          setAppState={setAppState}
-                      />
+                          isLibraryOpen={appState.isLibraryOpen}
-                    </Stack.Row>
+                        />
-                  </Island>
+                      </Stack.Row>
-                  <LockIcon
+                    </Island>
-                    zenModeEnabled={zenModeEnabled}
+                    <LockIcon
-                    checked={appState.elementLocked}
+                      zenModeEnabled={zenModeEnabled}
-                    onChange={onLockToggle}
+                      checked={appState.elementLocked}
-                    title={t("toolBar.lock")}
+                      onChange={onLockToggle}
-                  />
+                      title={t("toolBar.lock")}
-                </Stack.Row>
+                    />
-                {libraryMenu}
+                  </Stack.Row>
-              </Stack.Col>
+                  {libraryMenu}
-            )}
+                </Stack.Col>
-          </Section>
+              )}
+            </Section>
+          )}
           <UserList
             className={clsx("zen-mode-transition", {
               "transition-right": zenModeEnabled,
@@ -524,6 +552,20 @@ const LayerUI = ({
     );
   };
 
+  const renderGitHubCorner = () => {
+    return (
+      <aside
+        className={clsx(
+          "layer-ui__wrapper__github-corner zen-mode-transition",
+          {
+            "transition-right": zenModeEnabled,
+          },
+        )}
+      >
+        <GitHubCorner appearance={appState.appearance} />
+      </aside>
+    );
+  };
   const renderFooter = () => (
     <footer role="contentinfo" className="layer-ui__wrapper__footer">
       <div
@@ -599,25 +641,19 @@ const LayerUI = ({
         canvas={canvas}
         isCollaborating={isCollaborating}
         renderCustomFooter={renderCustomFooter}
+        viewModeEnabled={viewModeEnabled}
       />
     </>
   ) : (
-    <div className="layer-ui__wrapper">
+    <div
+      className={clsx("layer-ui__wrapper", {
+        "disable-pointerEvents": appState.cursorButton === "down",
+      })}
+    >
       {dialogs}
       {renderFixedSideContainer()}
       {renderBottomAppMenu()}
-      {
+      {renderGitHubCorner()}
-        <aside
-          className={clsx(
-            "layer-ui__wrapper__github-corner zen-mode-transition",
-            {
-              "transition-right": zenModeEnabled,
-            },
-          )}
-        >
-          <GitHubCorner appearance={appState.appearance} />
-        </aside>
-      }
       {renderFooter()}
     </div>
   );

src/components/MobileMenu.tsx

@@ -29,6 +29,7 @@ type MobileMenuProps = {
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
   renderCustomFooter?: (isMobile: boolean) => JSX.Element;
+  viewModeEnabled: boolean;
 };
 
 export const MobileMenu = ({
@@ -43,121 +44,164 @@ export const MobileMenu = ({
   canvas,
   isCollaborating,
   renderCustomFooter,
-}: MobileMenuProps) => (
+  viewModeEnabled,
-  <>
+}: MobileMenuProps) => {
-    <FixedSideContainer side="top">
+  const renderFixedSideContainer = () => {
-      <Section heading="shapes">
+    return (
-        {(heading) => (
+      <FixedSideContainer side="top">
-          <Stack.Col gap={4} align="center">
+        <Section heading="shapes">
-            <Stack.Row gap={1}>
+          {(heading) => (
-              <Island padding={1}>
+            <Stack.Col gap={4} align="center">
-                {heading}
+              <Stack.Row gap={1}>
-                <Stack.Row gap={1}>
+                <Island padding={1}>
-                  <ShapesSwitcher
+                  {heading}
-                    elementType={appState.elementType}
+                  <Stack.Row gap={1}>
-                    setAppState={setAppState}
+                    <ShapesSwitcher
-                    isLibraryOpen={appState.isLibraryOpen}
+                      elementType={appState.elementType}
-                  />
+                      setAppState={setAppState}
-                </Stack.Row>
+                      isLibraryOpen={appState.isLibraryOpen}
-              </Island>
+                    />
-              <LockIcon
+                  </Stack.Row>
-                checked={appState.elementLocked}
+                </Island>
-                onChange={onLockToggle}
+                <LockIcon
-                title={t("toolBar.lock")}
+                  checked={appState.elementLocked}
-              />
+                  onChange={onLockToggle}
-            </Stack.Row>
+                  title={t("toolBar.lock")}
-            {libraryMenu}
-          </Stack.Col>
-        )}
-      </Section>
-      <HintViewer appState={appState} elements={elements} />
-    </FixedSideContainer>
-    <div
-      className="App-bottom-bar"
-      style={{
-        marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-        marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-        marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-      }}
-    >
-      <Island padding={0}>
-        {appState.openMenu === "canvas" ? (
-          <Section className="App-mobile-menu" heading="canvasActions">
-            <div className="panelColumn">
-              <Stack.Col gap={4}>
-                {actionManager.renderAction("loadScene")}
-                {actionManager.renderAction("saveScene")}
-                {actionManager.renderAction("saveAsScene")}
-                {exportButton}
-                {actionManager.renderAction("clearCanvas")}
-                {onCollabButtonClick && (
-                  <CollabButton
-                    isCollaborating={isCollaborating}
-                    collaboratorCount={appState.collaborators.size}
-                    onClick={onCollabButtonClick}
-                  />
-                )}
-                <BackgroundPickerAndDarkModeToggle
-                  actionManager={actionManager}
-                  appState={appState}
-                  setAppState={setAppState}
                 />
-                {renderCustomFooter?.(true)}
+              </Stack.Row>
-                <fieldset>
+              {libraryMenu}
-                  <legend>{t("labels.collaborators")}</legend>
+            </Stack.Col>
-                  <UserList mobile>
-                    {Array.from(appState.collaborators)
-                      // Collaborator is either not initialized or is actually the current user.
-                      .filter(([_, client]) => Object.keys(client).length !== 0)
-                      .map(([clientId, client]) => (
-                        <React.Fragment key={clientId}>
-                          {actionManager.renderAction(
-                            "goToCollaborator",
-                            clientId,
-                          )}
-                        </React.Fragment>
-                      ))}
-                  </UserList>
-                </fieldset>
-              </Stack.Col>
-            </div>
-          </Section>
-        ) : appState.openMenu === "shape" &&
-          showSelectedShapeActions(appState, elements) ? (
-          <Section className="App-mobile-menu" heading="selectedShapeActions">
-            <SelectedShapeActions
-              appState={appState}
-              elements={elements}
-              renderAction={actionManager.renderAction}
-              elementType={appState.elementType}
-            />
-          </Section>
-        ) : null}
-        <footer className="App-toolbar">
-          <div className="App-toolbar-content">
-            {actionManager.renderAction("toggleCanvasMenu")}
-            {actionManager.renderAction("toggleEditMenu")}
-            {actionManager.renderAction("undo")}
-            {actionManager.renderAction("redo")}
-            {actionManager.renderAction(
-              appState.multiElement ? "finalize" : "duplicateSelection",
-            )}
-            {actionManager.renderAction("deleteSelectedElements")}
-          </div>
-          {appState.scrolledOutside && !appState.openMenu && (
-            <button
-              className="scroll-back-to-content"
-              onClick={() => {
-                setAppState({
-                  ...calculateScrollCenter(elements, appState, canvas),
-                });
-              }}
-            >
-              {t("buttons.scrollBackToContent")}
-            </button>
           )}
-        </footer>
+        </Section>
-      </Island>
+        <HintViewer appState={appState} elements={elements} />
-    </div>
+      </FixedSideContainer>
-  </>
+    );
-);
+  };
+
+  const renderAppToolbar = () => {
+    if (viewModeEnabled) {
+      return (
+        <div className="App-toolbar-content">
+          {actionManager.renderAction("toggleCanvasMenu")}
+        </div>
+      );
+    }
+    return (
+      <div className="App-toolbar-content">
+        {actionManager.renderAction("toggleCanvasMenu")}
+        {actionManager.renderAction("toggleEditMenu")}
+        {actionManager.renderAction("undo")}
+        {actionManager.renderAction("redo")}
+        {actionManager.renderAction(
+          appState.multiElement ? "finalize" : "duplicateSelection",
+        )}
+        {actionManager.renderAction("deleteSelectedElements")}
+      </div>
+    );
+  };
+
+  const renderCanvasActions = () => {
+    if (viewModeEnabled) {
+      return (
+        <>
+          {actionManager.renderAction("saveScene")}
+          {actionManager.renderAction("saveAsScene")}
+          {exportButton}
+        </>
+      );
+    }
+    return (
+      <>
+        {actionManager.renderAction("loadScene")}
+        {actionManager.renderAction("saveScene")}
+        {actionManager.renderAction("saveAsScene")}
+        {exportButton}
+        {actionManager.renderAction("clearCanvas")}
+        {onCollabButtonClick && (
+          <CollabButton
+            isCollaborating={isCollaborating}
+            collaboratorCount={appState.collaborators.size}
+            onClick={onCollabButtonClick}
+          />
+        )}
+        {
+          <BackgroundPickerAndDarkModeToggle
+            actionManager={actionManager}
+            appState={appState}
+            setAppState={setAppState}
+          />
+        }
+      </>
+    );
+  };
+  return (
+    <>
+      {!viewModeEnabled && renderFixedSideContainer()}
+      <div
+        className="App-bottom-bar"
+        style={{
+          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+        }}
+      >
+        <Island padding={0}>
+          {appState.openMenu === "canvas" ? (
+            <Section className="App-mobile-menu" heading="canvasActions">
+              <div className="panelColumn">
+                <Stack.Col gap={4}>
+                  {renderCanvasActions()}
+                  {renderCustomFooter?.(true)}
+                  <fieldset>
+                    <legend>{t("labels.collaborators")}</legend>
+                    <UserList mobile>
+                      {Array.from(appState.collaborators)
+                        // Collaborator is either not initialized or is actually the current user.
+                        .filter(
+                          ([_, client]) => Object.keys(client).length !== 0,
+                        )
+                        .map(([clientId, client]) => (
+                          <React.Fragment key={clientId}>
+                            {actionManager.renderAction(
+                              "goToCollaborator",
+                              clientId,
+                            )}
+                          </React.Fragment>
+                        ))}
+                    </UserList>
+                  </fieldset>
+                </Stack.Col>
+              </div>
+            </Section>
+          ) : appState.openMenu === "shape" &&
+            !viewModeEnabled &&
+            showSelectedShapeActions(appState, elements) ? (
+            <Section className="App-mobile-menu" heading="selectedShapeActions">
+              <SelectedShapeActions
+                appState={appState}
+                elements={elements}
+                renderAction={actionManager.renderAction}
+                elementType={appState.elementType}
+              />
+            </Section>
+          ) : null}
+          <footer className="App-toolbar">
+            {renderAppToolbar()}
+            {appState.scrolledOutside && !appState.openMenu && (
+              <button
+                className="scroll-back-to-content"
+                onClick={() => {
+                  setAppState({
+                    ...calculateScrollCenter(elements, appState, canvas),
+                  });
+                }}
+              >
+                {t("buttons.scrollBackToContent")}
+              </button>
+            )}
+          </footer>
+        </Island>
+      </div>
+    </>
+  );
+};

src/components/Stats.tsx

@@ -24,6 +24,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 }, 500);
 
 export const Stats = (props: {
+  setAppState: React.Component<any, AppState>["setState"];
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
@@ -46,6 +47,12 @@ export const Stats = (props: {
   const selectedElements = getTargetElements(props.elements, props.appState);
   const selectedBoundingBox = getCommonBounds(selectedElements);
 
+  const onGridSizeChange = () => {
+    props.setAppState({
+      gridSize: ((props.appState.gridSize - 5) % 50) + 10,
+    });
+  };
+
   if (isMobile && props.appState.openMenu) {
     return null;
   }
@@ -156,6 +163,17 @@ export const Stats = (props: {
                 </td>
               </tr>
             )}
+            {props.appState.showGrid && (
+              <>
+                <tr>
+                  <th colSpan={2}>{"Misc"}</th>
+                </tr>
+                <tr onClick={onGridSizeChange} style={{ cursor: "pointer" }}>
+                  <td>{"Grid size"}</td>
+                  <td>{props.appState.gridSize}</td>
+                </tr>
+              </>
+            )}
           </tbody>
         </table>
       </Island>

src/components/Tooltip.scss

@@ -48,15 +48,7 @@
     }
   }
 
-  // the following 3 rules ensure that the tooltip doesn't show (nor affect
+  .Tooltip:hover .Tooltip__label {
-  // the cursor) when you drag over when you draw on canvas, but at the same
-  // time it still works when clicking on the link/shield
-
-  body:active & .Tooltip:not(:hover) {
-    pointer-events: none;
-  }
-
-  body:not(:active) & .Tooltip:hover .Tooltip__label {
     visibility: visible;
   }
 

src/css/styles.scss

@@ -282,7 +282,7 @@
     pointer-events: none !important;
   }
 
-  .App-menu_top > * {
+  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_top > * {
     pointer-events: all;
   }
 
@@ -323,7 +323,7 @@
     }
   }
 
-  .App-menu_bottom > * {
+  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_bottom > * {
     pointer-events: all;
   }
 
@@ -492,6 +492,13 @@
     pointer-events: none !important;
   }
 
+  &.excalidraw--view-mode {
+    .App-menu {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
   @media print {
     .App-bottom-bar,
     .FixedSideContainer,

src/element/linearElementEditor.ts

@@ -102,6 +102,7 @@ export class LinearElementEditor {
         element,
         scenePointerX - editingLinearElement.pointerOffset.x,
         scenePointerY - editingLinearElement.pointerOffset.y,
+        appState.showGrid,
         appState.gridSize,
       );
       LinearElementEditor.movePoint(element, activePointIndex, newPoint);
@@ -198,6 +199,7 @@ export class LinearElementEditor {
               element,
               scenePointer.x,
               scenePointer.y,
+              appState.showGrid,
               appState.gridSize,
             ),
           ],
@@ -282,7 +284,8 @@ export class LinearElementEditor {
     scenePointerX: number,
     scenePointerY: number,
     editingLinearElement: LinearElementEditor,
-    gridSize: number | null,
+    isGridOn: boolean,
+    gridSize: number,
   ): LinearElementEditor {
     const { elementId, lastUncommittedPoint } = editingLinearElement;
     const element = LinearElementEditor.getElement(elementId);
@@ -304,6 +307,7 @@ export class LinearElementEditor {
       element,
       scenePointerX - editingLinearElement.pointerOffset.x,
       scenePointerY - editingLinearElement.pointerOffset.y,
+      isGridOn,
       gridSize,
     );
 
@@ -398,9 +402,15 @@ export class LinearElementEditor {
     element: NonDeleted<ExcalidrawLinearElement>,
     scenePointerX: number,
     scenePointerY: number,
-    gridSize: number | null,
+    isGridOn: boolean,
+    gridSize: number,
   ): Point {
-    const pointerOnGrid = getGridPoint(scenePointerX, scenePointerY, gridSize);
+    const pointerOnGrid = getGridPoint(
+      scenePointerX,
+      scenePointerY,
+      isGridOn,
+      gridSize,
+    );
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;

src/element/showSelectedShapeActions.ts

@@ -7,7 +7,8 @@ export const showSelectedShapeActions = (
   elements: readonly NonDeletedExcalidrawElement[],
 ) =>
   Boolean(
-    appState.editingElement ||
+    !appState.viewModeEnabled &&
-      getSelectedElements(elements, appState).length ||
+      (appState.editingElement ||
-      appState.elementType !== "selection",
+        getSelectedElements(elements, appState).length ||
+        appState.elementType !== "selection"),
   );

src/i18n.ts

@@ -27,6 +27,7 @@ const allLanguages: Language[] = [
   { code: "id-ID", label: "Bahasa Indonesia" },
   { code: "it-IT", label: "Italiano" },
   { code: "ja-JP", label: "日本語" },
+  { code: "kab-KAB", label: "Taqbaylit" },
   { code: "ko-KR", label: "한국어" },
   { code: "my-MM", label: "Burmese" },
   { code: "nb-NO", label: "Norsk bokmål" },

src/keys.ts

@@ -21,6 +21,7 @@ export const CODES = {
   V: "KeyV",
   X: "KeyX",
   Z: "KeyZ",
+  R: "KeyR",
 } as const;
 
 export const KEYS = {

src/locales/ar-SA.json

@@ -80,9 +80,9 @@
     "gridMode": "وضع الشبكة",
     "addToLibrary": "أضف إلى المكتبة",
     "removeFromLibrary": "حذف من المكتبة",
-    "libraryLoadingMessage": "جارٍ تحميل المكتبة...",
+    "libraryLoadingMessage": "جارٍ تحميل المكتبة…",
     "libraries": "تصفح المكتبات",
-    "loadingScene": "جاري تحميل المشهد...",
+    "loadingScene": "جاري تحميل المشهد…",
     "align": "محاذاة",
     "alignTop": "محاذاة إلى اﻷعلى",
     "alignBottom": "محاذاة إلى اﻷسفل",
@@ -91,7 +91,8 @@
     "centerVertically": "توسيط عمودي",
     "centerHorizontally": "توسيط أفقي",
     "distributeHorizontally": "التوزيع الأفقي",
-    "distributeVertically": "التوزيع عمودياً"
+    "distributeVertically": "التوزيع عمودياً",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "إعادة تعيين اللوحة",

src/locales/bg-BG.json

@@ -80,9 +80,9 @@
     "gridMode": "Решетъчен режим",
     "addToLibrary": "Добавяне към библиотеката",
     "removeFromLibrary": "Премахване от библиотеката",
-    "libraryLoadingMessage": "Зареждане на библиотеката...",
+    "libraryLoadingMessage": "Зареждане на библиотеката…",
     "libraries": "Разглеждане на библиотеките",
-    "loadingScene": "Зареждане на сцена...",
+    "loadingScene": "Зареждане на сцена…",
     "align": "Подравняване",
     "alignTop": "Подравняване отгоре",
     "alignBottom": "Подравняване отдолу",
@@ -91,7 +91,8 @@
     "centerVertically": "Центрирай вертикално",
     "centerHorizontally": "Центрирай хоризонтално",
     "distributeHorizontally": "Разпредели хоризонтално",
-    "distributeVertically": "Разпредели вертикално"
+    "distributeVertically": "Разпредели вертикално",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Нулиране на платно",

src/locales/ca-ES.json

@@ -82,7 +82,7 @@
     "removeFromLibrary": "Eliminar de la biblioteca",
     "libraryLoadingMessage": "Carregant la biblioteca...",
     "libraries": "Explorar biblioteques",
-    "loadingScene": "Carregant escena...",
+    "loadingScene": "Carregant escena…",
     "align": "Alinear",
     "alignTop": "Alinear a dalt",
     "alignBottom": "Alinear a baix",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrar verticalment",
     "centerHorizontally": "Centrar horitzontalment",
     "distributeHorizontally": "Distribuir horitzontalment",
-    "distributeVertically": "Distribuir verticalment"
+    "distributeVertically": "Distribuir verticalment",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Netejar el llenç",

src/locales/de-DE.json

@@ -80,9 +80,9 @@
     "gridMode": "Rastermodus",
     "addToLibrary": "Zur Bibliothek hinzufügen",
     "removeFromLibrary": "Aus Bibliothek entfernen",
-    "libraryLoadingMessage": "Lade Bibliothek...",
+    "libraryLoadingMessage": "Lade Bibliothek…",
     "libraries": "Bibliotheken durchsuchen",
-    "loadingScene": "Lade Zeichnung...",
+    "loadingScene": "Lade Zeichnung…",
     "align": "Ausrichten",
     "alignTop": "Obere Kanten",
     "alignBottom": "Untere Kanten",
@@ -91,7 +91,8 @@
     "centerVertically": "Vertikal zentrieren",
     "centerHorizontally": "Horizontal zentrieren",
     "distributeHorizontally": "Horizontal verteilen",
-    "distributeVertically": "Vertikal verteilen"
+    "distributeVertically": "Vertikal verteilen",
+    "viewMode": "Ansichtsmodus"
   },
   "buttons": {
     "clearReset": "Zeichenfläche löschen & Hintergrundfarbe zurücksetzen",

src/locales/el-GR.json

@@ -80,9 +80,9 @@
     "gridMode": "Εμφάνιση σε πλέγμα",
     "addToLibrary": "Προσθήκη στη βιβλιοθήκη",
     "removeFromLibrary": "Αφαίρεση από τη βιβλιοθήκη",
-    "libraryLoadingMessage": "Φόρτωση βιβλιοθήκης...",
+    "libraryLoadingMessage": "Φόρτωση βιβλιοθήκης…",
     "libraries": "Άλλες βιβλιοθήκες",
-    "loadingScene": "Φόρτωση σκηνής...",
+    "loadingScene": "Φόρτωση σκηνής…",
     "align": "Στοίχιση",
     "alignTop": "Στοίχιση πάνω",
     "alignBottom": "Στοίχιση κάτω",
@@ -91,7 +91,8 @@
     "centerVertically": "Κέντρο κάθετα",
     "centerHorizontally": "Κέντρο οριζόντια",
     "distributeHorizontally": "Οριζόντια κατανομή",
-    "distributeVertically": "Κατακόρυφη κατανομή"
+    "distributeVertically": "Κατακόρυφη κατανομή",
+    "viewMode": "Λειτουργία προβολής"
   },
   "buttons": {
     "clearReset": "Επαναφορά του καμβά",

src/locales/en.json

@@ -80,9 +80,9 @@
     "gridMode": "Grid mode",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
-    "libraryLoadingMessage": "Loading library...",
+    "libraryLoadingMessage": "Loading library…",
     "libraries": "Browse libraries",
-    "loadingScene": "Loading scene...",
+    "loadingScene": "Loading scene…",
     "align": "Align",
     "alignTop": "Align top",
     "alignBottom": "Align bottom",
@@ -91,7 +91,8 @@
     "centerVertically": "Center vertically",
     "centerHorizontally": "Center horizontally",
     "distributeHorizontally": "Distribute horizontally",
-    "distributeVertically": "Distribute vertically"
+    "distributeVertically": "Distribute vertically",
+    "viewMode": "View mode"
   },
   "buttons": {
     "clearReset": "Reset the canvas",

src/locales/es-ES.json

@@ -91,7 +91,8 @@
     "centerVertically": "Centrar verticalmente",
     "centerHorizontally": "Centrar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": "Modo presentación"
   },
   "buttons": {
     "clearReset": "Limpiar lienzo y reiniciar el color de fondo",

src/locales/fa-IR.json

@@ -80,9 +80,9 @@
     "gridMode": "حالت شبکه ای",
     "addToLibrary": "افزودن به کتابخانه",
     "removeFromLibrary": "حذف از کتابخانه",
-    "libraryLoadingMessage": "بارگذاری کتابخانه...",
+    "libraryLoadingMessage": "بارگذاری کتابخانه…",
     "libraries": "مرور کردن کتابخانه ها",
-    "loadingScene": "باگذاری صحنه...",
+    "loadingScene": "باگذاری صحنه…",
     "align": "تراز",
     "alignTop": "تراز به بالا",
     "alignBottom": "تراز به پایین",
@@ -91,7 +91,8 @@
     "centerVertically": "وسط قرار دادن به صورت عمودی",
     "centerHorizontally": "وسط قرار دادن به صورت افقی",
     "distributeHorizontally": "توزیع کردن به صورت افقی",
-    "distributeVertically": "توزیع کردن به صورت عمودی"
+    "distributeVertically": "توزیع کردن به صورت عمودی",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "پاکسازی بوم نقاشی",

src/locales/fi-FI.json

@@ -80,9 +80,9 @@
     "gridMode": "Ruudukkotila",
     "addToLibrary": "Lisää kirjastoon",
     "removeFromLibrary": "Poista kirjastosta",
-    "libraryLoadingMessage": "Ladataan kirjastoa...",
+    "libraryLoadingMessage": "Ladataan kirjastoa…",
     "libraries": "Selaa kirjastoja",
-    "loadingScene": "Ladataan työtä...",
+    "loadingScene": "Ladataan työtä…",
     "align": "Tasaa",
     "alignTop": "Tasaa ylös",
     "alignBottom": "Tasaa alas",
@@ -91,7 +91,8 @@
     "centerVertically": "Keskitä pystysuunnassa",
     "centerHorizontally": "Keskitä vaakasuunnassa",
     "distributeHorizontally": "Jaa vaakasuunnassa",
-    "distributeVertically": "Jaa pystysuunnassa"
+    "distributeVertically": "Jaa pystysuunnassa",
+    "viewMode": "Katselutila"
   },
   "buttons": {
     "clearReset": "Tyhjennä piirtoalue",

src/locales/fr-FR.json

@@ -91,7 +91,8 @@
     "centerVertically": "Centrer verticalement",
     "centerHorizontally": "Centrer horizontalement",
     "distributeHorizontally": "Distribuer horizontalement",
-    "distributeVertically": "Distribuer verticalement"
+    "distributeVertically": "Distribuer verticalement",
+    "viewMode": "Mode présentation"
   },
   "buttons": {
     "clearReset": "Réinitialiser le canevas",
@@ -229,7 +230,7 @@
     "elements": "Éléments",
     "height": "Hauteur",
     "scene": "Scène",
-    "selected": "Sélectionné",
+    "selected": "Sélection",
     "storage": "Stockage",
     "title": "Stats pour les nerds",
     "total": "Total",

src/locales/he-IL.json

@@ -80,9 +80,9 @@
     "gridMode": "מצב רשת",
     "addToLibrary": "הוסף לספריה",
     "removeFromLibrary": "הסר מספריה",
-    "libraryLoadingMessage": "טוען ספריה...",
+    "libraryLoadingMessage": "טוען ספריה…",
     "libraries": "דפדף בספריות",
-    "loadingScene": "טוען תצוגה...",
+    "loadingScene": "טוען תצוגה…",
     "align": "יישר",
     "alignTop": "יישר למעלה",
     "alignBottom": "יישר למטה",
@@ -91,7 +91,8 @@
     "centerVertically": "מרכז אנכית",
     "centerHorizontally": "מרכז אופקית",
     "distributeHorizontally": "חלוקה אופקית",
-    "distributeVertically": "חלוקה אנכית"
+    "distributeVertically": "חלוקה אנכית",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "אפס את הלוח",

src/locales/hi-IN.json

@@ -91,7 +91,8 @@
     "centerVertically": "लंबवत केन्द्रित",
     "centerHorizontally": "क्षैतिज केन्द्रित",
     "distributeHorizontally": "क्षैतिज रूप से वितरित करें",
-    "distributeVertically": "खड़ी रूप से वितरित करें"
+    "distributeVertically": "खड़ी रूप से वितरित करें",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "कैनवास रीसेट करें",

src/locales/hu-HU.json

@@ -80,9 +80,9 @@
     "gridMode": "Hálómód",
     "addToLibrary": "Hozzáadás a könyvtárhoz",
     "removeFromLibrary": "Eltávólítás a könyvtárból",
-    "libraryLoadingMessage": "Könyvtár betöltése...",
+    "libraryLoadingMessage": "Könyvtár betöltése…",
     "libraries": "Könyvtárak böngészése",
-    "loadingScene": "Jelenet betöltése...",
+    "loadingScene": "Jelenet betöltése…",
     "align": "Igazítás",
     "alignTop": "Felülre igazítás",
     "alignBottom": "Alulra igazítás",
@@ -91,7 +91,8 @@
     "centerVertically": "Függőlegesen középre igazított",
     "centerHorizontally": "Vízszintesen középre igazított",
     "distributeHorizontally": "Vízszintes elosztás",
-    "distributeVertically": "Függőleges elosztás"
+    "distributeVertically": "Függőleges elosztás",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Vászon törlése",

src/locales/id-ID.json

@@ -80,9 +80,9 @@
     "gridMode": "Mode grid",
     "addToLibrary": "Tambahkan ke pustaka",
     "removeFromLibrary": "Hapus dari pustaka",
-    "libraryLoadingMessage": "Memuat pustaka...",
+    "libraryLoadingMessage": "Memuat pustaka…",
     "libraries": "Telusur pustaka",
-    "loadingScene": "Memuat pemandangan...",
+    "loadingScene": "Memuat pemandangan…",
     "align": "Perataan",
     "alignTop": "Rata atas",
     "alignBottom": "Rata bawah",
@@ -91,7 +91,8 @@
     "centerVertically": "Pusatkan secara vertikal",
     "centerHorizontally": "Pusatkan secara horizontal",
     "distributeHorizontally": "Distribusikan horizontal",
-    "distributeVertically": "Distribusikan vertikal"
+    "distributeVertically": "Distribusikan vertikal",
+    "viewMode": "Mode tampilan"
   },
   "buttons": {
     "clearReset": "Setel Ulang Kanvas",

src/locales/it-IT.json

@@ -80,9 +80,9 @@
     "gridMode": "Modalità griglia",
     "addToLibrary": "Aggiungi alla libreria",
     "removeFromLibrary": "Rimuovi dalla libreria",
-    "libraryLoadingMessage": "Caricamento della biblioteca...",
+    "libraryLoadingMessage": "Caricamento della biblioteca…",
     "libraries": "Sfoglia librerie",
-    "loadingScene": "Caricamento della scena...",
+    "loadingScene": "Caricamento della scena…",
     "align": "Allinea",
     "alignTop": "Allinea in alto",
     "alignBottom": "Allinea in basso",
@@ -91,7 +91,8 @@
     "centerVertically": "Centra Verticalmente",
     "centerHorizontally": "Centra orizzontalmente",
     "distributeHorizontally": "Distribuisci orizzontalmente",
-    "distributeVertically": "Distribuisci verticalmente"
+    "distributeVertically": "Distribuisci verticalmente",
+    "viewMode": "Modalità visualizzazione"
   },
   "buttons": {
     "clearReset": "Svuota la tela",

src/locales/ja-JP.json

@@ -80,9 +80,9 @@
     "gridMode": "",
     "addToLibrary": "ライブラリに追加",
     "removeFromLibrary": "ライブラリから削除",
-    "libraryLoadingMessage": "ライブラリを読み込み中...",
+    "libraryLoadingMessage": "ライブラリを読み込み中…",
     "libraries": "",
-    "loadingScene": "シーンを読み込み中...",
+    "loadingScene": "シーンを読み込み中…",
     "align": "整列",
     "alignTop": "上揃え",
     "alignBottom": "下揃え",
@@ -91,7 +91,8 @@
     "centerVertically": "縦方向に中央揃え",
     "centerHorizontally": "横方向に中央揃え",
     "distributeHorizontally": "",
-    "distributeVertically": ""
+    "distributeVertically": "",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "キャンバスのリセット",

src/locales/kab-KAB.json

@@ -0,0 +1,243 @@
+{
+  "labels": {
+    "paste": "Senṭeḍ",
+    "pasteCharts": "Senṭeḍ udlifen",
+    "selectAll": "Fren akk",
+    "multiSelect": "Rnu aferdis ɣer tefrayt",
+    "moveCanvas": "Smutti taɣzut n usuneɣ",
+    "cut": "Gzem",
+    "copy": "Nɣel",
+    "copyAsPng": "Nɣel ɣer tecfawit am PNG",
+    "copyAsSvg": "Nɣel ɣer tecfawit am SVG",
+    "bringForward": "Awi ɣer sdat",
+    "sendToBack": "Awi s agilal",
+    "bringToFront": "Err ɣer deffir",
+    "sendBackward": "Awi ɣer deffir",
+    "delete": "Kkes",
+    "copyStyles": "Nɣel iɣunab",
+    "pasteStyles": "Senṭeḍ iɣunab",
+    "stroke": "Azizdew",
+    "background": "Agilal",
+    "fill": "Taččart",
+    "strokeWidth": "Tehri n yizirig",
+    "strokeStyle": "Aɣanib n tizirig",
+    "strokeStyle_solid": "Aččuran",
+    "strokeStyle_dashed": "S tjerriḍin",
+    "strokeStyle_dotted": "S tenqiḍin",
+    "sloppiness": "",
+    "opacity": "Tiḍullest",
+    "textAlign": "Areyyec n uḍris",
+    "edges": "Leryuf",
+    "sharp": "Yemsed",
+    "round": "Imdewer",
+    "arrowheads": "Ixfawen n tenccabt",
+    "arrowhead_none": "Ulac",
+    "arrowhead_arrow": "Taneccabt",
+    "arrowhead_bar": "Afeggag",
+    "arrowhead_dot": "Tanqiḍt",
+    "fontSize": "Tiddi n tsefsit",
+    "fontFamily": "Tawacult n tsefsiyin",
+    "onlySelected": "Tafrayt kan",
+    "withBackground": "S ugilal",
+    "exportEmbedScene": "Seddu asayes deg ufaylu yettwasifḍen",
+    "exportEmbedScene_details": "Asayes ad yettwasekles deg ufaylu n usifeḍ PNG/SVG akken akken ad yili wamek ara d-yettwarr seg-s usayes. Ayagi ad isimɣur tiddi n ufaylu n usifeḍ.",
+    "addWatermark": "Seddu \"Yettwaxdem s Excalidraw\"",
+    "handDrawn": "Asuneɣ s ufus",
+    "normal": "Amagnu",
+    "code": "Tangalt",
+    "small": "Meẓẓi",
+    "medium": "Alemmas",
+    "large": "Ameqran",
+    "veryLarge": "Meqqer aṭas",
+    "solid": "Aččuran",
+    "hachure": "Azerreg",
+    "crossHatch": "Azerreg anmidag",
+    "thin": "Arqaq",
+    "bold": "Azuran",
+    "left": "Azelmaḍ",
+    "center": "Talemmast",
+    "right": "Ayfus",
+    "extraBold": "Azuran aṭas",
+    "architect": "Amasdag",
+    "artist": "Anaẓur",
+    "cartoonist": "",
+    "fileTitle": "Azwel n ufaylu",
+    "colorPicker": "Amafran n yini",
+    "canvasBackground": "Agilal n teɣzut n usuneɣ",
+    "drawingCanvas": "Taɣzut n usuneɣ",
+    "layers": "Tissiyin",
+    "actions": "Tigawin",
+    "language": "Tutlayt",
+    "createRoom": "Bḍu tiɣimit n umɛawen s srid",
+    "duplicateSelection": "Sisleg",
+    "untitled": "War azwel",
+    "name": "Isem",
+    "yourName": "Isem-ik (im)",
+    "madeWithExcalidraw": "Yettwaxdem s Excalidraw",
+    "group": "Segrew tafrayt",
+    "ungroup": "Kkess asegrew i tefrayt",
+    "collaborators": "Imɛiwnen",
+    "gridMode": "Askar n uferrug",
+    "addToLibrary": "Rnu ɣer temkarḍit",
+    "removeFromLibrary": "Kkes si temkarḍit",
+    "libraryLoadingMessage": "Asali n temkarḍit…",
+    "libraries": "Snirem timkarḍiyin",
+    "loadingScene": "Asali n usayes…",
+    "align": "Reyyec",
+    "alignTop": "Areyyec uksawen",
+    "alignBottom": "Areyyec ukessar",
+    "alignLeft": "Reyyec s azelmaḍ",
+    "alignRight": "Areyyec s ayfus",
+    "centerVertically": "Di tlemmast s ibeddi",
+    "centerHorizontally": "Di tlemmast s uglawi",
+    "distributeHorizontally": "Freq s uglawi",
+    "distributeVertically": "Freq s yibeddi",
+    "viewMode": "Askar n tmuɣli"
+  },
+  "buttons": {
+    "clearReset": "Ales awennez n teɣzut n usuneɣ",
+    "export": "Sifeḍ",
+    "exportToPng": "Sifeḍ ɣer PNG",
+    "exportToSvg": "Sifeḍ ɣer SVG",
+    "copyToClipboard": "Nɣel ɣer tecfawit",
+    "copyPngToClipboard": "Nɣel PNG ɣer tecfawit",
+    "scale": "Taskala",
+    "save": "Sekles",
+    "saveAs": "Sekles am",
+    "load": "Sali-d",
+    "getShareableLink": "Awi-d aseɣwen n beṭṭu",
+    "close": "Mdel",
+    "selectLanguage": "Fren tutlayt",
+    "scrollBackToContent": "Uɣal s agbur",
+    "zoomIn": "Simɣur",
+    "zoomOut": "Simẓi",
+    "resetZoom": "Ales awennez n usemɣer",
+    "menu": "Umuɣ",
+    "done": "Ifukk",
+    "edit": "Ẓreg",
+    "undo": "Sefsex",
+    "redo": "Err-d",
+    "roomDialog": "Bdu amɛawen s srid",
+    "createNewRoom": "Snulfu-d taxxamt tamaynutt",
+    "fullScreen": "Agdil aččuran",
+    "darkMode": "Askar imsulles",
+    "lightMode": "Askar afaw",
+    "zenMode": "Askar Zen",
+    "exitZenMode": "Ffeɣ seg uskar Zen"
+  },
+  "alerts": {
+    "clearReset": "Ayagi ad isfeḍ akk taɣzut n usuneɣ. Tetḥeqqeḍ?",
+    "couldNotCreateShareableLink": "D awezɣi asnulfu n useɣwen n beṭṭu.",
+    "couldNotCreateShareableLinkTooBig": "D awezɣi asnulfu n useɣwen n beṭṭu. Asayes ɣezzif aṭas",
+    "couldNotLoadInvalidFile": "D awezɣi asali n ufaylu armeɣtu",
+    "importBackendFailed": "",
+    "cannotExportEmptyCanvas": "D awezɣi asifeḍ n teɣzut n usuneɣ tilemt.",
+    "couldNotCopyToClipboard": "D awezɣi anɣal ɣer tecfawit. Eɛreḍ ad tesqedceḍ iminig Chrome.",
+    "decryptFailed": "D awezɣi tukksa n uwgelhen i yisefka.",
+    "uploadedSecurly": "Asili yettwasɣelles s uwgelhen ixef s ixef, ayagi yebɣa ad d-yini belli aqeddac n Excalidraw akked medden ur zmiren ara ad ɣren agbur.",
+    "loadSceneOverridePrompt": "Asali n wunuɣ uffiɣ ad isemselsi agbur-inek (m) yellan. Tebɣiḍ ad tkemmeleḍ?",
+    "errorLoadingLibrary": "Teḍra-d tuccḍa deg usali n temkarḍit n wis kraḍ.",
+    "confirmAddLibrary": "Ayagi adirnu talɣa (win) {{numShapes}} ɣer temkarḍit-inek (m). Tetḥeqqeḍ?",
+    "imageDoesNotContainScene": "Taktert n tugniwin ur tettwadhel ara akka tura.\nTebɣiḍ ad tketreḍ asayes? Tugna-agi tettban-d ur tegbir ara isefka n usnas. Tesremdeḍ ayagi deg usifeḍ?",
+    "cannotRestoreFromImage": "Asayes ulamek ara d-yettwarr seg ufaylu-agi n tugna"
+  },
+  "toolBar": {
+    "selection": "Tafrayt",
+    "draw": "Unuɣ ilelli",
+    "rectangle": "Asrem",
+    "diamond": "Ameɣṛun",
+    "ellipse": "Taglayt",
+    "arrow": "Taneccabt",
+    "line": "Izirig",
+    "text": "Aḍris",
+    "library": "Tamkarḍit",
+    "lock": "Eǧǧ afecku n tefrayt yermed mbaɛd asuneɣ"
+  },
+  "headings": {
+    "canvasActions": "Tigawin n teɣzut n usuneɣ",
+    "selectedShapeActions": "Tigawin n talɣa yettwafernen",
+    "shapes": "Talɣiwin"
+  },
+  "hints": {
+    "linearElement": "Ssit akken ad tebduḍ aṭas n tenqiḍin, zuɣer i yiwen n yizirig",
+    "freeDraw": "Ssit yerna zuɣer, serreḥ ticki tfukeḍ",
+    "text": "Tixidest: tzemreḍ daɣen ad ternuḍ aḍris s usiti snat n tikkal anida tebɣiḍ s ufecku n tefrayt",
+    "linearElementMulti": "Ssit ɣef tenqiḍt taneggarut neɣ ssed taqeffalt Escape neɣ taqeffalt Kcem akken ad tfakkeḍ",
+    "lockAngle": "Tzemreḍ ad tḥettmeḍ tiɣmert s tuṭṭfa n tqeffalt SHIFT",
+    "resize": "Tzemreḍ ad tḥettemeḍ assaɣ s tuṭṭfa n tqeffalt SHIFT mi ara tettbeddileḍ tiddi,\nma teṭṭfeḍ ALT abeddel n tiddi ad yili si tlemmast",
+    "rotate": "Tzemreḍ ad tḥettemeḍ tiɣemmar s tuṭṭfa n SHIFT di tuzzya",
+    "lineEditor_info": "Ssit snat n tikkal neɣ ssed taqeffalt Kcem akken ad tẓergeḍ tinqiḍin",
+    "lineEditor_pointSelected": "Ssed taqeffalt kkes akken ad tekkseḍ tanqiḍt, CtrlOrCmd+D akken ad tsiselgeḍ, neɣ zuɣer akken ad tesmuttiḍ",
+    "lineEditor_nothingSelected": "Fren tanqiḍt ara tesmuttiḍ neɣ ara tekkseḍ, neɣ ṭṭef taqeffalt Alt akken ad ternuḍ tinqiḍin timaynutin"
+  },
+  "canvasError": {
+    "cannotShowPreview": "Ulamek abeqqeḍ n teskant",
+    "canvasTooBig": "Taɣzut n usuneɣ tezmer ad tili temeqqer aṭas.",
+    "canvasTooBigTip": "Tixidest: eɛreḍ ad tesqerbeḍ ciṭ iferdisen yembaɛaden."
+  },
+  "errorSplash": {
+    "headingMain_pre": "Teḍra-d tuccḍa. Eɛreḍ ",
+    "headingMain_button": "asali n usebter tikkelt-nniḍen.",
+    "clearCanvasMessage": "Ma yella tulsa n usali ur tefri ara ugur, eɛreḍ ",
+    "clearCanvasMessage_button": "asfaḍ n teɣzut n usuneɣ.",
+    "clearCanvasCaveat": " Ayagi ad d-iglu s usṛuḥu n umahil ",
+    "trackedToSentry_pre": "Tuccḍa akked umesmagi ",
+    "trackedToSentry_post": " tettwasekles deg unagraw-nneɣ.",
+    "openIssueMessage_pre": "",
+    "openIssueMessage_button": "afecku n weḍfar n yibugen.",
+    "openIssueMessage_post": " Ma ulac uɣilif seddu talɣut ukessar-agi s wenɣal akked usenṭeḍ di GitHub issue.",
+    "sceneContent": "Agbur n usayes:"
+  },
+  "roomDialog": {
+    "desc_intro": "Tzemreḍ ad d-teɛerḍeḍ medden ɣer usayes-inek (m) amiran akken ad ttekkin yid-k.",
+    "desc_privacy": "Ur tqelliq ara, tiɣimit tsseqdac awgelhen ixef s ixef, dɣa ayen ara tsunɣeḍ ad iqqim d amaẓlay. Ula d aqeddac-nneɣ ur yezmir ara ad iwali acu txeddemeḍ.",
+    "button_startSession": "Bdu tiɣimit",
+    "button_stopSession": "Ḥbes tiɣimit",
+    "desc_inProgressIntro": "Tiɣimit n umɛawen s srid tetteddu akka tura.",
+    "desc_shareLink": "Bḍu aseɣwen-agi akked medden ukud tebɣiḍ ad temɛawaneḍ:",
+    "desc_exitSession": "Aḥbas n tɣimit ad k (m) yesenser si texxamt, maca ad tizmireḍ ad tkemmeleḍ amahil s usayes, s wudem adigan. Ẓer belli ayagi ur yettḥaz ara imdanen-nniḍen, yerna ad izmiren ad kemmelen ad mɛawanen di tsuffeɣt-nnsen."
+  },
+  "errorDialog": {
+    "title": "Tuccḍa"
+  },
+  "helpDialog": {
+    "blog": "Ɣeṛ ablug-nneɣ",
+    "click": "ssit",
+    "curvedArrow": "Taneccabt izelgen",
+    "curvedLine": "Izirig izelgen",
+    "documentation": "Tasemlit",
+    "drag": "zuɣer",
+    "editor": "Amaẓrag",
+    "github": "Tufiḍ-d ugur? Azen-aɣ-d",
+    "howto": "Ḍfer imniren-nneɣ",
+    "or": "neɣ",
+    "preventBinding": "",
+    "shapes": "Talɣiwin",
+    "shortcuts": "Inegzumen n unasiw",
+    "textFinish": "Fak asiẓreg (aḍris)",
+    "textNewLine": "Rnu ajerriḍ amaynut (aḍris)",
+    "title": "Tallelt",
+    "view": "Tamuɣli",
+    "zoomToFit": "Simɣur akken ad twliḍ akk iferdisen",
+    "zoomToSelection": "Simɣur ɣer tefrayt"
+  },
+  "encrypted": {
+    "tooltip": "Unuɣen-inek (m) ttuwgelhnen seg yixef s ixef dɣa iqeddacen n Excalidraw werǧin ad ten-walin. "
+  },
+  "stats": {
+    "angle": "Tiɣmeṛt",
+    "element": "Aferdis",
+    "elements": "Iferdisen",
+    "height": "Tattayt",
+    "scene": "Asayes",
+    "selected": "Yettwafren",
+    "storage": "Aḥraz",
+    "title": "",
+    "total": "Aɣrud",
+    "width": "Tehri"
+  },
+  "toast": {
+    "copyStyles": "Iɣunab yettwaneɣlen.",
+    "copyToClipboardAsPng": "Yettwanɣel ɣer tecfawit am PNG."
+  }
+}

src/locales/ko-KR.json

@@ -91,7 +91,8 @@
     "centerVertically": "수직으로 중앙 정렬",
     "centerHorizontally": "수평으로 중앙 정렬",
     "distributeHorizontally": "수평으로 분배",
-    "distributeVertically": "수직으로 분배"
+    "distributeVertically": "수직으로 분배",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "캔버스 초기화",

src/locales/my-MM.json

@@ -80,9 +80,9 @@
     "gridMode": "",
     "addToLibrary": "မှတ်တမ်းတင်",
     "removeFromLibrary": "မှတ်တမ်းမှထုတ်",
-    "libraryLoadingMessage": "မှတ်တမ်းအား တင်သွင်းနေသည်...",
+    "libraryLoadingMessage": "မှတ်တမ်းအား တင်သွင်းနေသည်…",
     "libraries": "စာကြည့်တိုက်တွင်ရှာဖွေပါ",
-    "loadingScene": "မြင်ကွင်းဖော်နေသည်...",
+    "loadingScene": "မြင်ကွင်းဖော်နေသည်…",
     "align": "ချိန်ညှိ",
     "alignTop": "ထိပ်ညှိ",
     "alignBottom": "အခြေညှိ",
@@ -91,7 +91,8 @@
     "centerVertically": "ဒေါင်လိုက်အလယ်ညှိ",
     "centerHorizontally": "အလျားလိုက်အလယ်ညှိ",
     "distributeHorizontally": "အလျားလိုက်",
-    "distributeVertically": "ထောင်လိုက်"
+    "distributeVertically": "ထောင်လိုက်",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "ကားချပ်ရှင်းလင်း",

src/locales/nb-NO.json

@@ -80,9 +80,9 @@
     "gridMode": "Rutevisning",
     "addToLibrary": "Legg til i bibliotek",
     "removeFromLibrary": "Fjern fra bibliotek",
-    "libraryLoadingMessage": "Laster bibliotek...",
+    "libraryLoadingMessage": "Laster bibliotek…",
     "libraries": "Bla gjennom biblioteker",
-    "loadingScene": "Laster inn scene...",
+    "loadingScene": "Laster inn scene…",
     "align": "Juster",
     "alignTop": "Juster øverst",
     "alignBottom": "Juster nederst",
@@ -91,7 +91,8 @@
     "centerVertically": "Midtstill vertikalt",
     "centerHorizontally": "Midtstill horisontalt",
     "distributeHorizontally": "Distribuer horisontalt",
-    "distributeVertically": "Distribuer vertikalt"
+    "distributeVertically": "Distribuer vertikalt",
+    "viewMode": "Visningsmodus"
   },
   "buttons": {
     "clearReset": "Tøm lerretet og tilbakestill bakgrunnsfargen",

src/locales/nl-NL.json

@@ -91,7 +91,8 @@
     "centerVertically": "Verticaal Centreren",
     "centerHorizontally": "Horizontaal Centreren",
     "distributeHorizontally": "Horizontaal verspreiden",
-    "distributeVertically": "Verticaal distribueren"
+    "distributeVertically": "Verticaal distribueren",
+    "viewMode": "Weergavemodus"
   },
   "buttons": {
     "clearReset": "Canvas opnieuw instellen",

src/locales/nn-NO.json

@@ -80,9 +80,9 @@
     "gridMode": "Rutevisning",
     "addToLibrary": "Legg til i bibliotek",
     "removeFromLibrary": "Fjern frå bibliotek",
-    "libraryLoadingMessage": "Laster bibliotek...",
+    "libraryLoadingMessage": "Laster bibliotek…",
     "libraries": "Blad gjennom bibliotek",
-    "loadingScene": "Laster scene...",
+    "loadingScene": "Laster scene…",
     "align": "Juster",
     "alignTop": "Juster til topp",
     "alignBottom": "Juster til botn",
@@ -91,7 +91,8 @@
     "centerVertically": "Midtstill vertikalt",
     "centerHorizontally": "Midtstill horisontalt",
     "distributeHorizontally": "Sprei horisontalt",
-    "distributeVertically": "Sprei vertikalt"
+    "distributeVertically": "Sprei vertikalt",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Tilbakestill lerretet",
@@ -201,22 +202,22 @@
   },
   "helpDialog": {
     "blog": "",
-    "click": "",
+    "click": "klikk",
     "curvedArrow": "",
     "curvedLine": "",
     "documentation": "",
     "drag": "",
-    "editor": "",
+    "editor": "Redigering",
     "github": "",
     "howto": "",
-    "or": "",
+    "or": "eller",
     "preventBinding": "",
-    "shapes": "",
+    "shapes": "Formar",
     "shortcuts": "",
     "textFinish": "",
     "textNewLine": "",
-    "title": "",
+    "title": "Hjelp",
-    "view": "",
+    "view": "Vising",
     "zoomToFit": "",
     "zoomToSelection": ""
   },

src/locales/pa-IN.json

@@ -91,7 +91,8 @@
     "centerVertically": "ਲੇਟਵੇਂ ਵਿਚਕਾਰ ਕਰੋ",
     "centerHorizontally": "ਖੜ੍ਹਵੇਂ ਵਿਚਕਾਰ ਕਰੋ",
     "distributeHorizontally": "ਖੜ੍ਹਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
-    "distributeVertically": "ਲੇਟਵੇਂ ਇਕਸਾਰ ਵੰਡੋ"
+    "distributeVertically": "ਲੇਟਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "ਕੈਨਵਸ ਰੀਸੈੱਟ ਕਰੋ",

src/locales/percentages.json

@@ -1,7 +1,7 @@
 {
-  "ar-SA": 90,
+  "ar-SA": 89,
-  "bg-BG": 94,
+  "bg-BG": 93,
-  "ca-ES": 90,
+  "ca-ES": 89,
   "de-DE": 100,
   "el-GR": 100,
   "en": 100,
@@ -9,27 +9,28 @@
   "fa-IR": 98,
   "fi-FI": 100,
   "fr-FR": 100,
-  "he-IL": 90,
+  "he-IL": 89,
-  "hi-IN": 90,
+  "hi-IN": 89,
-  "hu-HU": 90,
+  "hu-HU": 89,
   "id-ID": 100,
   "it-IT": 100,
   "ja-JP": 81,
-  "ko-KR": 90,
+  "kab-KAB": 97,
+  "ko-KR": 89,
   "my-MM": 83,
   "nb-NO": 100,
   "nl-NL": 100,
-  "nn-NO": 90,
+  "nn-NO": 92,
-  "pa-IN": 100,
+  "pa-IN": 99,
   "pl-PL": 90,
   "pt-BR": 100,
-  "pt-PT": 100,
+  "pt-PT": 99,
   "ro-RO": 100,
-  "ru-RU": 100,
+  "ru-RU": 99,
   "sk-SK": 100,
   "sv-SE": 100,
-  "tr-TR": 90,
+  "tr-TR": 89,
-  "uk-UA": 100,
+  "uk-UA": 99,
-  "zh-CN": 100,
+  "zh-CN": 99,
   "zh-TW": 100
 }

src/locales/pl-PL.json

@@ -91,7 +91,8 @@
     "centerVertically": "Wyśrodkuj w pionie",
     "centerHorizontally": "Wyśrodkuj w poziomie",
     "distributeHorizontally": "Rozłóż poziomo",
-    "distributeVertically": "Rozłóż pionowo"
+    "distributeVertically": "Rozłóż pionowo",
+    "viewMode": "Tryb widoku"
   },
   "buttons": {
     "clearReset": "Wyczyść dokument i zresetuj kolor dokumentu",

src/locales/pt-BR.json

@@ -91,7 +91,8 @@
     "centerVertically": "Centralizar verticalmente",
     "centerHorizontally": "Centralizar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": "Modo de visualização"
   },
   "buttons": {
     "clearReset": "Limpar o canvas e redefinir a cor de fundo",

src/locales/pt-PT.json

@@ -80,9 +80,9 @@
     "gridMode": "Modo grade",
     "addToLibrary": "Adicionar à biblioteca",
     "removeFromLibrary": "Remover da biblioteca",
-    "libraryLoadingMessage": "Carregando biblioteca...",
+    "libraryLoadingMessage": "Carregando biblioteca…",
     "libraries": "Procurar bibliotecas",
-    "loadingScene": "Carregando cena...",
+    "loadingScene": "Carregando cena…",
     "align": "Alinhamento",
     "alignTop": "Alinhar ao topo",
     "alignBottom": "Alinhar ao fundo",
@@ -91,7 +91,8 @@
     "centerVertically": "Centralizar verticalmente",
     "centerHorizontally": "Centralizar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Limpar o canvas e redefinir a cor de fundo",

src/locales/ro-RO.json

@@ -80,9 +80,9 @@
     "gridMode": "Mod grilă",
     "addToLibrary": "Adăugare la bibliotecă",
     "removeFromLibrary": "Eliminare din bibliotecă",
-    "libraryLoadingMessage": "Se încarcă biblioteca...",
+    "libraryLoadingMessage": "Se încarcă biblioteca…",
     "libraries": "Răsfoiește bibliotecile",
-    "loadingScene": "Se încarcă scena...",
+    "loadingScene": "Se încarcă scena…",
     "align": "Aliniere",
     "alignTop": "Aliniere sus",
     "alignBottom": "Aliniere jos",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrare verticală",
     "centerHorizontally": "Centrare orizontală",
     "distributeHorizontally": "Distribuie orizontal",
-    "distributeVertically": "Distribuie vertical"
+    "distributeVertically": "Distribuie vertical",
+    "viewMode": "Mod de vizualizare"
   },
   "buttons": {
     "clearReset": "Resetare pânză",

src/locales/ru-RU.json

@@ -80,9 +80,9 @@
     "gridMode": "Сетка",
     "addToLibrary": "Добавить в библиотеку",
     "removeFromLibrary": "Удалить из библиотеки",
-    "libraryLoadingMessage": "Загрузка библиотеки...",
+    "libraryLoadingMessage": "Загрузка библиотеки…",
     "libraries": "Просмотреть библиотеки",
-    "loadingScene": "Загрузка сцены...",
+    "loadingScene": "Загрузка сцены…",
     "align": "Выровнять",
     "alignTop": "Выровнять по верхнему краю",
     "alignBottom": "Выровнять по нижнему краю",
@@ -91,7 +91,8 @@
     "centerVertically": "Центрировать по вертикали",
     "centerHorizontally": "Центрировать по горизонтали",
     "distributeHorizontally": "Распределить по горизонтали",
-    "distributeVertically": "Распределить по вертикали"
+    "distributeVertically": "Распределить по вертикали",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Очистить холст и сбросить цвет фона",

src/locales/sk-SK.json

@@ -80,9 +80,9 @@
     "gridMode": "Režim mriežky",
     "addToLibrary": "Pridať do knižnice",
     "removeFromLibrary": "Odstrániť z knižnice",
-    "libraryLoadingMessage": "Načítavanie knižnice...",
+    "libraryLoadingMessage": "Načítavanie knižnice…",
     "libraries": "Prehliadať knižnice",
-    "loadingScene": "Načítavanie scény...",
+    "loadingScene": "Načítavanie scény…",
     "align": "Zarovnanie",
     "alignTop": "Zarovnať nahor",
     "alignBottom": "Zarovnať nadol",
@@ -91,7 +91,8 @@
     "centerVertically": "Zarovnať zvislo na stred",
     "centerHorizontally": "Zarovnať vodorovne na stred",
     "distributeHorizontally": "Rozmiestniť vodorovne",
-    "distributeVertically": "Rozmiestniť zvisle"
+    "distributeVertically": "Rozmiestniť zvisle",
+    "viewMode": "Režim zobrazenia"
   },
   "buttons": {
     "clearReset": "Obnoviť plátno",

src/locales/sv-SE.json

@@ -80,9 +80,9 @@
     "gridMode": "Rutnätsläge",
     "addToLibrary": "Lägg till i biblioteket",
     "removeFromLibrary": "Ta bort från bibliotek",
-    "libraryLoadingMessage": "Laddar bibliotek...",
+    "libraryLoadingMessage": "Laddar bibliotek…",
     "libraries": "Bläddra i bibliotek",
-    "loadingScene": "Laddar scen...",
+    "loadingScene": "Laddar scen…",
     "align": "Justera",
     "alignTop": "Justera överkant",
     "alignBottom": "Justera underkant",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrera vertikalt",
     "centerHorizontally": "Centrera horisontellt",
     "distributeHorizontally": "Fördela horisontellt",
-    "distributeVertically": "Fördela vertikalt"
+    "distributeVertically": "Fördela vertikalt",
+    "viewMode": "Visningsläge"
   },
   "buttons": {
     "clearReset": "Återställ canvasen",

src/locales/tr-TR.json

@@ -82,7 +82,7 @@
     "removeFromLibrary": "Kütüphaneden kaldır",
     "libraryLoadingMessage": "Kütüphane yükleniyor...",
     "libraries": "Kütüphanelere gözat",
-    "loadingScene": "Çalışma alanı yükleniyor...",
+    "loadingScene": "Çalışma alanı yükleniyor…",
     "align": "Hizala",
     "alignTop": "Yukarı hizala",
     "alignBottom": "Aşağı hizala",
@@ -91,7 +91,8 @@
     "centerVertically": "Dikeyde ortala",
     "centerHorizontally": "Yatayda ortala",
     "distributeHorizontally": "Yatay dağıt",
-    "distributeVertically": "Dikey dağıt"
+    "distributeVertically": "Dikey dağıt",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Tuvali sıfırla",

src/locales/uk-UA.json

@@ -80,9 +80,9 @@
     "gridMode": "Режим сітки",
     "addToLibrary": "Додати до бібліотеки",
     "removeFromLibrary": "Видалити з бібліотеки",
-    "libraryLoadingMessage": "Завантажити бібліотеку...",
+    "libraryLoadingMessage": "Завантажити бібліотеку…",
     "libraries": "Огляд бібліотек",
-    "loadingScene": "Завантаження сцени...",
+    "loadingScene": "Завантаження сцени…",
     "align": "Вирівнювання",
     "alignTop": "Вирівняти по верхньому краю",
     "alignBottom": "Вирівняти по нижньому краю",
@@ -91,7 +91,8 @@
     "centerVertically": "Центрувати по вертикалі",
     "centerHorizontally": "Центрувати по горизонталі",
     "distributeHorizontally": "Розподілити по горизонталі",
-    "distributeVertically": "Розподілити вертикально"
+    "distributeVertically": "Розподілити вертикально",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Очистити полотно",

src/locales/zh-CN.json

@@ -80,9 +80,9 @@
     "gridMode": "网格模式",
     "addToLibrary": "添加到库中",
     "removeFromLibrary": "从库中移除",
-    "libraryLoadingMessage": "正在加载库...",
+    "libraryLoadingMessage": "正在加载库…",
     "libraries": "浏览库",
-    "loadingScene": "正在加载绘图...",
+    "loadingScene": "正在加载绘图…",
     "align": "对齐",
     "alignTop": "顶部对齐",
     "alignBottom": "底端对齐",
@@ -91,7 +91,8 @@
     "centerVertically": "垂直居中",
     "centerHorizontally": "水平居中",
     "distributeHorizontally": "水平等距分布",
-    "distributeVertically": "垂直等距分布"
+    "distributeVertically": "垂直等距分布",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "重置画布",

src/locales/zh-TW.json

@@ -91,7 +91,8 @@
     "centerVertically": "垂直置中",
     "centerHorizontally": "水平置中",
     "distributeHorizontally": "水平分布",
-    "distributeVertically": "垂直分布"
+    "distributeVertically": "垂直分布",
+    "viewMode": "檢視模式"
   },
   "buttons": {
     "clearReset": "重置 canvas",

src/math.ts

@@ -249,9 +249,10 @@ const doSegmentsIntersect = (p1: Point, q1: Point, p2: Point, q2: Point) => {
 export const getGridPoint = (
   x: number,
   y: number,
-  gridSize: number | null,
+  isGridOn: boolean,
+  gridSize: number,
 ): [number, number] => {
-  if (gridSize) {
+  if (isGridOn) {
     return [
       Math.round(x / gridSize) * gridSize,
       Math.round(y / gridSize) * gridSize,

src/packages/excalidraw/CHANGELOG.md

@@ -16,17 +16,22 @@ Please add the latest change on the top under the correct section.
 
 ## Excalidraw API
 
+### Features
+
+- Add `viewModeEnabled` prop which enabled the view mode [#2840](https://github.com/excalidraw/excalidraw/pull/2840). When this prop is used, the view mode will not show up in context menu is so it is fully controlled by host.
 - Expose `getAppState` on `excalidrawRef` [#2834](https://github.com/excalidraw/excalidraw/pull/2834).
 
 ## Excalidraw Library
 
 ### Features
 
+- Add view mode [#2840](https://github.com/excalidraw/excalidraw/pull/2840).
 - Remove `copy`, `cut`, and `paste` actions from contextmenu [#2872](https://github.com/excalidraw/excalidraw/pull/2872)
 - Support `Ctrl-Y` shortcut to redo on Windows [#2831](https://github.com/excalidraw/excalidraw/pull/2831).
 
 ### Fixes
 
+- Fix UI pointer-events not disabled when dragging on canvas [#2856](https://github.com/excalidraw/excalidraw/pull/2856).
 - Fix remote pointers not accounting for offset [#2855](https://github.com/excalidraw/excalidraw/pull/2855).
 
 ## 0.2.1

src/packages/excalidraw/README.md

@@ -138,6 +138,7 @@ export default function App() {
 | [`onExportToBackend`](#onExportToBackend) | Function |  | Callback triggered when link button is clicked on export dialog |
 | [`langCode`](#langCode) | string | `en` | Language code string |
 | [`renderFooter `](#renderFooter) | Function |  | Function that renders custom UI footer |
+| [`viewModeEnabled`](#viewModeEnabled) | boolean | false | This implies if the app is in view mode. |
 
 ### `Extra API's`
 
@@ -330,3 +331,7 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 #### `renderFooter`
 
 A function that renders (returns JSX) custom UI footer. For example, you can use this to render a language picker that was previously being rendered by Excalidraw itself (for now, you'll need to implement your own language picker).
+
+#### `viewModeEnabled`
+
+This prop indicates if the app is in `view mode`. When this prop is used, the `view mode` will not show up in context menu is so it is fully controlled by host. Also the value of this prop if passed will be used over the value of `intialData.appState.viewModeEnabled`

src/packages/excalidraw/index.tsx

@@ -26,6 +26,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
     onExportToBackend,
     renderFooter,
     langCode = defaultLang.code,
+    viewModeEnabled,
   } = props;
 
   useEffect(() => {
@@ -64,6 +65,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
           onExportToBackend={onExportToBackend}
           renderFooter={renderFooter}
           langCode={langCode}
+          viewModeEnabled={viewModeEnabled}
         />
       </IsMobileProvider>
     </InitializeApp>
@@ -81,7 +83,6 @@ const areEqual = (
 
   const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[];
   const nextKeys = Object.keys(nextProps) as (keyof typeof next)[];
-
   return (
     prevUser?.name === nextUser?.name &&
     prevKeys.length === nextKeys.length &&
@@ -89,6 +90,10 @@ const areEqual = (
   );
 };
 
+Excalidraw.defaultProps = {
+  lanCode: defaultLang.code,
+};
+
 const forwardedRefComp = forwardRef<
   ExcalidrawAPIRefValue,
   PublicExcalidrawProps

src/packages/utils/README.md

@@ -74,7 +74,7 @@ const excalidrawDiagram = {
   ],
   appState: {
     viewBackgroundColor: "#ffffff",
-    gridSize: null,
+    gridSize: 20,
   },
 };
 

src/renderer/renderScene.ts

@@ -233,7 +233,7 @@ export const renderScene = (
   context.scale(sceneState.zoom.value, sceneState.zoom.value);
 
   // Grid
-  if (renderGrid && appState.gridSize) {
+  if (renderGrid && appState.showGrid) {
     strokeGrid(
       context,
       appState.gridSize,
@@ -373,12 +373,14 @@ export const renderScene = (
         sceneState.zoom,
         "mouse", // when we render we don't know which pointer type so use mouse
       );
-      renderTransformHandles(
+      if (!appState.viewModeEnabled) {
-        context,
+        renderTransformHandles(
-        sceneState,
+          context,
-        transformHandles,
+          sceneState,
-        locallySelectedElements[0].angle,
+          transformHandles,
-      );
+          locallySelectedElements[0].angle,
+        );
+      }
     } else if (locallySelectedElements.length > 1 && !appState.isRotating) {
       const dashedLinePadding = 4 / sceneState.zoom.value;
       context.fillStyle = oc.white;

src/tests/regressionTests.test.tsx

@@ -623,6 +623,7 @@ describe("regression tests", () => {
       "selectAll",
       "gridMode",
       "zenMode",
+      "viewMode",
       "stats",
     ];
 

src/types.ts

@@ -84,7 +84,9 @@ export type AppState = {
   toastMessage: string | null;
   zenModeEnabled: boolean;
   appearance: "light" | "dark";
-  gridSize: number | null;
+  gridSize: number;
+  showGrid: boolean;
+  viewModeEnabled: boolean;
 
   /** top-most selected groups (i.e. does not include nested groups) */
   selectedGroupIds: { [groupId: string]: boolean };
@@ -181,6 +183,7 @@ export interface ExcalidrawProps {
   ) => void;
   renderFooter?: (isMobile: boolean) => JSX.Element;
   langCode?: Language["code"];
+  viewModeEnabled?: boolean;
 }
 
 export type SceneData = {

vercel.json

@@ -21,12 +21,5 @@
         }
       ]
     }
-  ],
-  "redirects": [
-    {
-      "source": "/([^.]+)",
-      "destination": "/",
-      "statusCode": 301
-    }
   ]
 }