fix

package.json

@@ -60,8 +60,7 @@
     "lint-staged": "10.5.4",
     "pepjs": "0.5.3",
     "prettier": "2.2.1",
-    "rewire": "5.0.0",
+    "rewire": "5.0.0"
-    "worker-loader": "3.0.8"
   },
   "engines": {
     "node": ">=12.0.0"
@@ -76,9 +75,6 @@
     "transformIgnorePatterns": [
       "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
     ],
-    "moduleNameMapper": {
-      "^worker-loader!.+": "<rootDir>/src/__mocks__/worker-mock.js"
-    },
     "resetMocks": false
   },
   "name": "excalidraw",

src/__mocks__/worker-mock.js

@@ -1,4 +0,0 @@
-module.exports = class {
-  postMessage() {}
-  terminate() {}
-};

src/actions/actionMenu.tsx

@@ -7,7 +7,6 @@ import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { CODES, KEYS } from "../keys";
 import { HelpIcon } from "../components/HelpIcon";
-import { MiniMap } from "../components/MiniMap";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -85,21 +84,3 @@ export const actionShortcuts = register({
   ),
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });
-
-export const actionMinimap = register({
-  name: "toggleMinimap",
-  perform: (_elements, appState) => {
-    return {
-      appState: {
-        ...appState,
-        isMinimapEnabled: !appState.isMinimapEnabled,
-      },
-      commitToHistory: false,
-    };
-  },
-  PanelComponent: ({ appState, elements }) =>
-    appState.isMinimapEnabled ? (
-      <MiniMap appState={appState} elements={elements} />
-    ) : null,
-  keyTest: (event) => event.key === KEYS.M,
-});

src/actions/index.ts

@@ -44,7 +44,6 @@ export {
   actionToggleEditMenu,
   actionFullScreen,
   actionShortcuts,
-  actionMinimap,
 } from "./actionMenu";
 
 export { actionGroup, actionUngroup } from "./actionGroup";

src/actions/types.ts

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

src/appState.ts

@@ -42,7 +42,7 @@ export const getDefaultAppState = (): Omit<
     exportEmbedScene: false,
     fileHandle: null,
     gridSize: null,
-    height: globalThis.innerHeight,
+    height: window.innerHeight,
     isBindingEnabled: true,
     isLibraryOpen: false,
     isLoading: false,
@@ -69,11 +69,10 @@ export const getDefaultAppState = (): Omit<
     suggestedBindings: [],
     toastMessage: null,
     viewBackgroundColor: oc.white,
-    width: globalThis.innerWidth,
+    width: window.innerWidth,
     zenModeEnabled: false,
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
     viewModeEnabled: false,
-    isMinimapEnabled: false,
   };
 };
 
@@ -154,7 +153,6 @@ const APP_STATE_STORAGE_CONF = (<
   zenModeEnabled: { browser: true, export: false },
   zoom: { browser: true, export: false },
   viewModeEnabled: { browser: false, export: false },
-  isMinimapEnabled: { browser: true, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/components/ExportDialog.scss

@@ -66,4 +66,10 @@
       overflow-y: auto;
     }
   }
+
+  .shareable-link--viewonly {
+    svg {
+      width: 1.5em;
+    }
+  }
 }

src/components/ExportDialog.tsx

@@ -12,7 +12,7 @@ import { exportToCanvas, getExportSize } from "../scene/export";
 import { AppState } from "../types";
 import { Dialog } from "./Dialog";
 import "./ExportDialog.scss";
-import { clipboard, exportFile, link } from "./icons";
+import { clipboard, exportFile, eyeIcon, link } from "./icons";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 
@@ -66,7 +66,10 @@ const ExportModal = ({
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
-  onExportToBackend?: ExportCB;
+  onExportToBackend?: (
+    elements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
+  ) => void;
   onCloseRequest: () => void;
 }) => {
   const someElementIsSelected = isSomeElementSelected(elements, appState);
@@ -101,10 +104,6 @@ const ExportModal = ({
         shouldAddWatermark,
       });
 
-      if (canvas instanceof OffscreenCanvas) {
-        return;
-      }
-
       // if converting to blob fails, there's some problem that will
       // likely prevent preview and export (e.g. canvas too big)
       canvasToBlob(canvas)
@@ -159,13 +158,23 @@ const ExportModal = ({
               />
             )}
             {onExportToBackend && (
-              <ToolButton
+              <>
-                type="button"
+                <ToolButton
-                icon={link}
+                  type="button"
-                title={t("buttons.getShareableLink")}
+                  icon={link}
-                aria-label={t("buttons.getShareableLink")}
+                  title={t("buttons.getShareableLink")}
-                onClick={() => onExportToBackend(exportedElements)}
+                  aria-label={t("buttons.getShareableLink")}
-              />
+                  onClick={() => onExportToBackend(exportedElements, false)}
+                />
+                <ToolButton
+                  type="button"
+                  icon={eyeIcon}
+                  className="shareable-link--viewonly"
+                  title={t("buttons.getViewonlyShareableLink")}
+                  aria-label={t("buttons.getShareableLink")}
+                  onClick={() => onExportToBackend(exportedElements, true)}
+                />
+              </>
             )}
           </Stack.Row>
           <div className="ExportDialog__name">
@@ -240,7 +249,10 @@ export const ExportDialog = ({
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
-  onExportToBackend?: ExportCB;
+  onExportToBackend?: (
+    elements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
+  ) => void;
 }) => {
   const [modalIsShown, setModalIsShown] = useState(false);
   const triggerButton = useRef<HTMLButtonElement>(null);

src/components/LayerUI.tsx

@@ -58,6 +58,7 @@ interface LayerUIProps {
   isCollaborating: boolean;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;
@@ -368,9 +369,9 @@ const LayerUI = ({
         onExportToClipboard={createExporter("clipboard")}
         onExportToBackend={
           onExportToBackend
-            ? (elements) => {
+            ? (elements, viewonly) => {
                 onExportToBackend &&
-                  onExportToBackend(elements, appState, canvas);
+                  onExportToBackend(elements, viewonly, appState, canvas);
               }
             : undefined
         }
@@ -602,7 +603,6 @@ const LayerUI = ({
       >
         {renderCustomFooter?.(false)}
         {actionManager.renderAction("toggleShortcuts")}
-        {actionManager.renderAction("toggleMinimap")}
       </div>
       <button
         className={clsx("disable-zen-mode", {

src/components/MiniMap.scss

@@ -1,5 +0,0 @@
-.Island.MiniMap {
-  position: absolute;
-  bottom: 50px;
-  right: calc(var(--space-factor) * 4);
-}

src/components/MiniMap.tsx

@@ -1,151 +0,0 @@
-import "./MiniMap.scss";
-
-import React, { useEffect, useRef, useMemo, useState } from "react";
-import { getCommonBounds, getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-import { distance, viewportCoordsToSceneCoords } from "../utils";
-import { Island } from "./Island";
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import MinimapWorker from "worker-loader!../renderer/minimapWorker";
-
-const RATIO = 1.2;
-const MINIMAP_HEIGHT = 150;
-const MINIMAP_WIDTH = MINIMAP_HEIGHT * RATIO;
-
-const MinimapViewport = ({
-  elements,
-  appState,
-}: {
-  elements: readonly ExcalidrawElement[];
-  appState: AppState;
-}) => {
-  const [minX, minY, maxX, maxY] = useMemo(
-    () => getCommonBounds(getNonDeletedElements(elements)),
-    [elements],
-  );
-
-  const minimapScale = Math.min(
-    MINIMAP_WIDTH / distance(minX, maxX),
-    MINIMAP_HEIGHT / distance(minY, maxY),
-  );
-
-  const leftTop = viewportCoordsToSceneCoords(
-    { clientX: 0, clientY: 0 },
-    appState,
-  );
-  const rightBot = viewportCoordsToSceneCoords(
-    { clientX: appState.width, clientY: appState.height },
-    appState,
-  );
-
-  const top = (leftTop.y - minY) * minimapScale;
-  const left = (leftTop.x - minX) * minimapScale;
-  const width = (rightBot.x - leftTop.x) * minimapScale;
-  const height = (rightBot.y - leftTop.y) * minimapScale;
-
-  // Set viewport boundaries
-  const viewportTop = Math.min(Math.max(0, top), MINIMAP_HEIGHT);
-  const viewportLeft = Math.min(Math.max(0, left), MINIMAP_WIDTH);
-  const viewportWidth = Math.min(
-    MINIMAP_WIDTH - viewportLeft,
-    width,
-    width + left,
-  );
-  const viewportHeight = Math.min(
-    MINIMAP_HEIGHT - viewportTop,
-    height,
-    height + top,
-  );
-
-  if (
-    Number.isNaN(viewportTop) ||
-    Number.isNaN(viewportLeft) ||
-    Number.isNaN(viewportWidth) ||
-    Number.isNaN(viewportHeight)
-  ) {
-    return null;
-  }
-
-  return (
-    <div
-      style={{
-        border: "2px solid orange",
-        boxSizing: "border-box",
-        position: "absolute",
-        pointerEvents: "none",
-        top: viewportTop,
-        left: viewportLeft,
-        width: viewportWidth,
-        height: viewportHeight,
-      }}
-    />
-  );
-};
-
-export function MiniMap({
-  appState,
-  elements,
-}: {
-  appState: AppState;
-  elements: readonly ExcalidrawElement[];
-}) {
-  const [minimapWorker] = useState(() => new MinimapWorker());
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const elementsRef = useRef(elements);
-  elementsRef.current = elements;
-  const appStateRef = useRef(appState);
-  appStateRef.current = appState;
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) {
-      return;
-    }
-
-    const offscreenCanvas = canvas.transferControlToOffscreen();
-
-    minimapWorker.postMessage({ type: "INIT", canvas: offscreenCanvas }, [
-      offscreenCanvas,
-    ]);
-
-    minimapWorker.postMessage({
-      type: "DRAW",
-      elements: elementsRef.current,
-      appState: appStateRef.current,
-      width: MINIMAP_WIDTH,
-      height: MINIMAP_HEIGHT,
-    });
-
-    setInterval(() => {
-      minimapWorker.postMessage({
-        type: "DRAW",
-        elements: elementsRef.current,
-        appState: appStateRef.current,
-        width: MINIMAP_WIDTH,
-        height: MINIMAP_HEIGHT,
-      });
-    }, 1000);
-
-    return () => {
-      minimapWorker.terminate();
-    };
-  }, [minimapWorker]);
-
-  return (
-    <Island padding={1} className="MiniMap">
-      <div
-        style={{
-          width: MINIMAP_WIDTH,
-          height: MINIMAP_HEIGHT,
-          position: "relative",
-          overflow: "hidden",
-          backgroundColor: appState.viewBackgroundColor,
-        }}
-      >
-        <canvas ref={canvasRef} />
-        <MinimapViewport elements={elements} appState={appState} />
-      </div>
-    </Island>
-  );
-}

src/components/icons.tsx

@@ -113,6 +113,10 @@ export const questionCircle = createIcon(
   { mirror: true },
 );
 
+export const eyeIcon = createIcon(
+  "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z",
+);
+
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(

src/data/index.ts

@@ -73,11 +73,6 @@ export const exportCanvas = async (
     scale,
     shouldAddWatermark,
   });
-
-  if (tempCanvas instanceof OffscreenCanvas) {
-    return;
-  }
-
   tempCanvas.style.display = "none";
   document.body.appendChild(tempCanvas);
 

src/excalidraw-app/data/index.ts

@@ -251,6 +251,7 @@ export const loadScene = async (
 export const exportToBackend = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  viewonly: boolean,
 ) => {
   const json = serializeAsJSON(elements, appState);
   const encoded = new TextEncoder().encode(json);
@@ -288,9 +289,13 @@ export const exportToBackend = async (
     const json = await response.json();
     if (json.id) {
       const url = new URL(window.location.href);
+      url.hash = "#";
+      if (viewonly) {
+        url.hash = `${url.hash}viewonly=true&`;
+      }
       // We need to store the key (and less importantly the id) as hash instead
       // of queryParam in order to never send it to the server
-      url.hash = `json=${json.id},${exportedKey.k!}`;
+      url.hash = `${url.hash}json=${json.id},${exportedKey.k!}`;
       const urlString = url.toString();
       window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
     } else if (json.error_class === "RequestTooLargeError") {

src/excalidraw-app/index.tsx

@@ -70,9 +70,8 @@ const initializeScene = async (opts: {
   const searchParams = new URLSearchParams(window.location.search);
   const id = searchParams.get("id");
   const jsonMatch = window.location.hash.match(
-    /^#json=([0-9]+),([a-zA-Z0-9_-]+)$/,
+    /json=([0-9]+),([a-zA-Z0-9_-]+)/,
   );
-
   const initialData = importFromLocalStorage();
 
   let scene = await loadScene(null, null, initialData);
@@ -94,6 +93,10 @@ const initializeScene = async (opts: {
       } else if (jsonMatch) {
         scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
       }
+      const isViewModeEnabled = !!window.location.hash.match(/#viewonly=true/);
+      if (isViewModeEnabled) {
+        scene.appState.viewModeEnabled = true;
+      }
       if (!roomLinkData) {
         window.history.replaceState({}, APP_NAME, window.location.origin);
       }
@@ -134,6 +137,7 @@ function ExcalidrawWrapper() {
   const [errorMessage, setErrorMessage] = useState("");
   const currentLangCode = languageDetector.detect() || defaultLang.code;
   const [langCode, setLangCode] = useState(currentLangCode);
+  const [viewModeEnabled, setViewModeEnabled] = useState(false);
 
   useLayoutEffect(() => {
     const onResize = () => {
@@ -157,7 +161,6 @@ function ExcalidrawWrapper() {
   if (!initialStatePromiseRef.current.promise) {
     initialStatePromiseRef.current.promise = resolvablePromise<ImportedDataState | null>();
   }
-
   useEffect(() => {
     // Delayed so that the app has a time to load the latest SW
     setTimeout(() => {
@@ -178,12 +181,18 @@ function ExcalidrawWrapper() {
     }
 
     initializeScene({ collabAPI }).then((scene) => {
+      if (scene?.appState?.viewModeEnabled) {
+        setViewModeEnabled(true);
+      }
       initialStatePromiseRef.current.promise.resolve(scene);
     });
 
     const onHashChange = (_: HashChangeEvent) => {
       initializeScene({ collabAPI }).then((scene) => {
         if (scene) {
+          if (scene?.appState?.viewModeEnabled) {
+            setViewModeEnabled(true);
+          }
           excalidrawAPI.updateScene(scene);
         }
       });
@@ -224,6 +233,7 @@ function ExcalidrawWrapper() {
 
   const onExportToBackend = async (
     exportedElements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => {
@@ -232,12 +242,16 @@ function ExcalidrawWrapper() {
     }
     if (canvas) {
       try {
-        await exportToBackend(exportedElements, {
+        await exportToBackend(
-          ...appState,
+          exportedElements,
-          viewBackgroundColor: appState.exportBackground
+          {
-            ? appState.viewBackgroundColor
+            ...appState,
-            : getDefaultAppState().viewBackgroundColor,
+            viewBackgroundColor: appState.exportBackground
-        });
+              ? appState.viewBackgroundColor
+              : getDefaultAppState().viewBackgroundColor,
+          },
+          viewonly,
+        );
       } catch (error) {
         if (error.name !== "AbortError") {
           const { width, height } = canvas;
@@ -272,7 +286,6 @@ function ExcalidrawWrapper() {
     },
     [langCode],
   );
-
   return (
     <>
       <Excalidraw
@@ -287,6 +300,7 @@ function ExcalidrawWrapper() {
         onExportToBackend={onExportToBackend}
         renderFooter={renderFooter}
         langCode={langCode}
+        viewModeEnabled={viewModeEnabled ? viewModeEnabled : undefined}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/global.d.ts

@@ -88,14 +88,3 @@ interface Blob {
   handle?: import("browser-fs-acces").FileSystemHandle;
   name?: string;
 }
-
-declare module "worker-loader!*" {
-  // You need to change `Worker`, if you specified a different value for the `workerType` option
-  class WebpackWorker extends Worker {
-    constructor();
-  }
-
-  // Uncomment this if you set the `esModule` option to `false`
-  // export = WebpackWorker;
-  export default WebpackWorker;
-}

src/keys.ts

@@ -1,7 +1,5 @@
-export const isDarwin = /Mac|iPod|iPhone|iPad/.test(
+export const isDarwin = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-  globalThis.navigator.platform,
+export const isWindows = /^Win/.test(window.navigator.platform);
-);
-export const isWindows = /^Win/.test(globalThis.navigator.platform);
 
 export const CODES = {
   EQUAL: "Equal",
@@ -45,7 +43,6 @@ export const KEYS = {
   D: "d",
   E: "e",
   L: "l",
-  M: "m",
   O: "o",
   P: "p",
   Q: "q",

src/locales/en.json

@@ -106,6 +106,7 @@
     "saveAs": "Save as",
     "load": "Load",
     "getShareableLink": "Get shareable link",
+    "getViewonlyShareableLink": "Get View only shareable link",
     "close": "Close",
     "selectLanguage": "Select language",
     "scrollBackToContent": "Scroll back to content",

src/packages/utils.ts

@@ -48,9 +48,6 @@ export const exportToBlob = (
   },
 ): Promise<Blob | null> => {
   const canvas = exportToCanvas(opts);
-  if (canvas instanceof OffscreenCanvas) {
-    return Promise.resolve(null);
-  }
 
   let { mimeType = "image/png", quality } = opts;
 

src/renderer/minimapWorker.ts

@@ -1,48 +0,0 @@
-/* eslint-disable no-restricted-globals */
-
-import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
-import { exportToCanvas } from "../scene/export";
-import { AppState } from "../types";
-
-const ctx: Worker = self as any;
-let canvas: OffscreenCanvas;
-
-ctx.addEventListener("message", (ev) => {
-  if (ev.data.type === "INIT") {
-    canvas = ev.data.canvas;
-  }
-
-  if (ev.data.type === "DRAW") {
-    const { elements, appState, width, height } = ev.data;
-    drawScene(canvas, elements, appState, width, height);
-  }
-});
-
-function drawScene(
-  canvas: OffscreenCanvas,
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  minimapWidth: number,
-  minimapHeight: number,
-) {
-  exportToCanvas(
-    getNonDeletedElements(elements),
-    appState,
-    {
-      exportBackground: true,
-      viewBackgroundColor: appState.viewBackgroundColor,
-      shouldAddWatermark: false,
-    },
-    (width, height) => {
-      const scale = Math.min(minimapWidth / width, minimapHeight / height);
-      canvas.width = width * scale;
-      canvas.height = height * scale;
-
-      return {
-        canvas,
-        scale,
-      };
-    },
-  );
-}

src/renderer/renderElement.ts

@@ -115,7 +115,7 @@ const generateElementCanvas = (
 const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
 ) => {
   context.globalAlpha = element.opacity / 100;
   switch (element.type) {
@@ -136,16 +136,13 @@ const drawElementOnCanvas = (
     default: {
       if (isTextElement(element)) {
         const rtl = isRTL(element.text);
-        let shouldTemporarilyAttach = false;
+        const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;
-        if (!(context instanceof OffscreenCanvasRenderingContext2D)) {
+        if (shouldTemporarilyAttach) {
-          shouldTemporarilyAttach = rtl && !context.canvas.isConnected;
+          // to correctly render RTL text mixed with LTR, we have to append it
-          if (shouldTemporarilyAttach) {
+          // to the DOM
-            // to correctly render RTL text mixed with LTR, we have to append it
+          document.body.appendChild(context.canvas);
-            // to the DOM
-            document.body.appendChild(context.canvas);
-          }
-          context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         }
+        context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         const font = context.font;
         context.font = getFontString(element);
         const fillStyle = context.fillStyle;
@@ -173,10 +170,7 @@ const drawElementOnCanvas = (
         context.fillStyle = fillStyle;
         context.font = font;
         context.textAlign = textAlign;
-        if (
+        if (shouldTemporarilyAttach) {
-          shouldTemporarilyAttach &&
-          !(context instanceof OffscreenCanvasRenderingContext2D)
-        ) {
           context.canvas.remove();
         }
       } else {
@@ -457,7 +451,7 @@ const generateElementWithCanvas = (
 const drawElementFromCanvas = (
   elementWithCanvas: ExcalidrawElementWithCanvas,
   rc: RoughCanvas,
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   sceneState: SceneState,
 ) => {
   const element = elementWithCanvas.element;
@@ -488,7 +482,7 @@ const drawElementFromCanvas = (
 export const renderElement = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   renderOptimizations: boolean,
   sceneState: SceneState,
 ) => {

src/renderer/renderScene.ts

@@ -53,7 +53,7 @@ import { UserIdleState } from "../excalidraw-app/collab/types";
 const hasEmojiSupport = supportsEmoji();
 
 const strokeRectWithRotation = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   x: number,
   y: number,
   width: number,
@@ -74,7 +74,7 @@ const strokeRectWithRotation = (
 };
 
 const strokeDiamondWithRotation = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   width: number,
   height: number,
   cx: number,
@@ -95,7 +95,7 @@ const strokeDiamondWithRotation = (
 };
 
 const strokeEllipseWithRotation = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   width: number,
   height: number,
   cx: number,
@@ -108,7 +108,7 @@ const strokeEllipseWithRotation = (
 };
 
 const fillCircle = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   cx: number,
   cy: number,
   radius: number,
@@ -120,7 +120,7 @@ const fillCircle = (
 };
 
 const strokeGrid = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   gridSize: number,
   offsetX: number,
   offsetY: number,
@@ -143,7 +143,7 @@ const strokeGrid = (
 };
 
 const renderLinearPointHandles = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   appState: AppState,
   sceneState: SceneState,
   element: NonDeleted<ExcalidrawLinearElement>,
@@ -182,7 +182,7 @@ export const renderScene = (
   selectionElement: NonDeletedExcalidrawElement | null,
   scale: number,
   rc: RoughCanvas,
-  canvas: HTMLCanvasElement | OffscreenCanvas,
+  canvas: HTMLCanvasElement,
   sceneState: SceneState,
   // extra options, currently passed by export helper
   {
@@ -573,7 +573,7 @@ export const renderScene = (
 };
 
 const renderTransformHandles = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   sceneState: SceneState,
   transformHandles: TransformHandles,
   angle: number,
@@ -609,7 +609,7 @@ const renderTransformHandles = (
 };
 
 const renderSelectionBorder = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   sceneState: SceneState,
   elementProperties: {
     angle: number;
@@ -671,7 +671,7 @@ const renderSelectionBorder = (
 };
 
 const renderBindingHighlight = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   sceneState: SceneState,
   suggestedBinding: SuggestedBinding,
 ) => {
@@ -693,7 +693,7 @@ const renderBindingHighlight = (
 };
 
 const renderBindingHighlightForBindableElement = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   element: ExcalidrawBindableElement,
 ) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
@@ -748,7 +748,7 @@ const renderBindingHighlightForBindableElement = (
 };
 
 const renderBindingHighlightForSuggestedPointBinding = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   suggestedBinding: SuggestedPointBinding,
 ) => {
   const [element, startOrEnd, bindableElement] = suggestedBinding;

src/renderer/roundRect.ts

@@ -9,7 +9,7 @@
  * @param {Number} radius The corner radius
  */
 export const roundRect = (
-  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  context: CanvasRenderingContext2D,
   x: number,
   y: number,
   width: number,

src/scene/export.ts

@@ -32,10 +32,7 @@ export const exportToCanvas = (
   createCanvas: (
     width: number,
     height: number,
-  ) => { canvas: HTMLCanvasElement | OffscreenCanvas; scale: number } = (
+  ) => { canvas: HTMLCanvasElement; scale: number } = (width, height) => {
-    width,
-    height,
-  ) => {
     const tempCanvas = document.createElement("canvas");
     tempCanvas.width = width * scale;
     tempCanvas.height = height * scale;
@@ -60,7 +57,7 @@ export const exportToCanvas = (
     appState,
     null,
     newScale,
-    rough.canvas((tempCanvas as unknown) as HTMLCanvasElement),
+    rough.canvas(tempCanvas),
     tempCanvas,
     {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -35,7 +35,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -496,7 +495,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -963,7 +961,6 @@ Object {
   "isBindingEnabled": false,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -1739,7 +1736,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -1943,7 +1939,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -2401,7 +2396,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -2654,7 +2648,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -2818,7 +2811,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -3295,7 +3287,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -3603,7 +3594,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -3807,7 +3797,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -4051,7 +4040,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -4303,7 +4291,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -4686,7 +4673,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -4981,7 +4967,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -5288,7 +5273,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -5496,7 +5480,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -5660,7 +5643,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -6113,7 +6095,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -6431,7 +6412,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -8465,7 +8445,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -8827,7 +8806,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -9082,7 +9060,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -9335,7 +9312,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -9650,7 +9626,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -9814,7 +9789,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -9978,7 +9952,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -10142,7 +10115,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -10336,7 +10308,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -10530,7 +10501,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -10724,7 +10694,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -10918,7 +10887,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -11082,7 +11050,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -11246,7 +11213,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -11440,7 +11406,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -11604,7 +11569,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -11798,7 +11762,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -12514,7 +12477,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -12767,7 +12729,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "touch",
@@ -12869,7 +12830,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -12969,7 +12929,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -13133,7 +13092,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -13441,7 +13399,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -13749,7 +13706,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -13913,7 +13869,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -14109,7 +14064,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -14358,7 +14312,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -14682,7 +14635,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -15521,7 +15473,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -15829,7 +15780,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -16137,7 +16087,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -16516,7 +16465,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -16683,7 +16631,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -17004,7 +16951,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -17243,7 +17189,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -17498,7 +17443,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -17825,7 +17769,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -17925,7 +17868,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -18089,7 +18031,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -18910,7 +18851,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -19010,7 +18950,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -19764,7 +19703,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -20169,7 +20107,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -20442,7 +20379,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "touch",
@@ -20544,7 +20480,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -21042,7 +20977,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",
@@ -21142,7 +21076,6 @@ Object {
   "isBindingEnabled": true,
   "isLibraryOpen": false,
   "isLoading": false,
-  "isMinimapEnabled": false,
   "isResizing": false,
   "isRotating": false,
   "lastPointerDownWith": "mouse",

src/types.ts

@@ -117,7 +117,6 @@ export type AppState = {
         shown: true;
         data: Spreadsheet;
       };
-  isMinimapEnabled: boolean;
 };
 
 export type NormalizedZoomValue = number & { _brand: "normalizedZoom" };
@@ -181,6 +180,7 @@ export interface ExcalidrawProps {
   }) => void;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;

src/utils.ts

@@ -372,9 +372,6 @@ export const getVersion = () => {
 
 // Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js
 export const supportsEmoji = () => {
-  if (typeof document === "undefined") {
-    return;
-  }
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) {