port custom eslint rules

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.eslintrc.json

@@ -1,7 +1,43 @@
 {
-  "extends": ["@excalidraw/eslint-config", "react-app"],
+  "extends": ["plugin:react-hooks/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react", "@typescript-eslint"],
+  "root": true,
   "rules": {
     "import/no-anonymous-default-export": "off",
-    "no-restricted-globals": "off"
+    "no-restricted-globals": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "curly": "warn",
+    "dot-notation": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": ["warn", "error", "info"]
+      }
+    ],
+    "no-else-return": "warn",
+    "no-lonely-if": "warn",
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "message": "Use 't(...)' instead of literal text in JSX",
+        "selector": "JSXText[value=/\\w/]"
+      }
+    ],
+    "no-unneeded-ternary": "warn",
+    "no-unused-expressions": "warn",
+    "no-unused-vars": "off",
+    "no-useless-return": "warn",
+    "no-var": "warn",
+    "object-shorthand": "warn",
+    "one-var": ["warn", "never"],
+    "prefer-arrow-callback": "warn",
+    "prefer-const": [
+      "warn",
+      {
+        "destructuring": "all"
+      }
+    ],
+    "prefer-template": "warn"
   }
 }

.lintstagedrc.js

@@ -5,9 +5,10 @@ const { CLIEngine } = require("eslint");
 const cli = new CLIEngine({});
 
 module.exports = {
-  "*.{js,ts,tsx}": files => {
+  "*.{js,ts,tsx}": (files) => {
     return (
-      "eslint --max-warnings=0 --fix " + files.filter(file => !cli.isPathIgnored(file)).join(" ")
+      "eslint --max-warnings=0 --fix " +
+      files.filter((file) => !cli.isPathIgnored(file)).join(" ")
     );
   },
   "*.{css,scss,json,md,html,yml}": ["prettier --write"],

dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx

@@ -9,7 +9,7 @@ You will need to import the `Footer` component from the package and wrap your co
 ```jsx live
 function App() {
   return (
-    <div style={{ height: "500px"}}>
+    <div style={{ height: "500px" }}>
       <Excalidraw>
         <Footer>
           <button
@@ -39,7 +39,7 @@ const MobileFooter = ({}) => {
       <Footer>
         <button
           className="custom-footer"
-          style= {{ marginLeft: '20px', height: '2rem'}}
+          style={{ marginLeft: "20px", height: "2rem" }}
           onClick={() => alert("This is custom footer in mobile menu")}
         >
           custom footer
@@ -65,4 +65,4 @@ const App = () => (
 // Need to render when code is span across multiple components
 // in Live Code blocks editor
 render(<App />);
-```
+```

dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx

@@ -1,7 +1,13 @@
 # initialData
 
 <pre>
-&#123; elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a> &#125;
+  &#123; elements?:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement[]
+  </a>
+  , appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
+    AppState
+  </a> &#125;
 </pre>
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
@@ -46,7 +52,7 @@ function App() {
             },
           ],
           appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },
-          scrollToContent: true
+          scrollToContent: true,
         }}
       />
     </div>

dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx

@@ -1,34 +1,34 @@
 # Props
 
-All `props` are *optional*.
+All `props` are _optional_.
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) |  `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
-| [`ref`](/docs/@excalidraw/excalidraw/api/props/ref) | `object` | _ | `Ref` to be passed to Excalidraw |
-| [`isCollaborating`](#iscollaborating) | `boolean` | _ | This indicates if the app is in `collaboration` mode |
-| [`onChange`](#onchange) | `function` | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
-| [`onPointerUpdate`](#onpointerupdate) | `function` | _ | Callback triggered when mouse pointer is updated. |
-| [`onPointerDown`](#onpointerdown) | `function` | _ | This prop if passed gets triggered on pointer down evenets |
-| [`onScrollChange`](#onscrollchange) | `function` | _ | This prop if passed gets triggered when scrolling the canvas. |
-| [`onPaste`](#onpaste) | `function` | _ | Callback to be triggered if passed when the something is pasted in to the scene |
-| [`onLibraryChange`](#onlibrarychange) | `function` | _ | The callback if supplied is triggered when the library is updated and receives the library items. |
-| [`onLinkOpen`](#onlinkopen) | `function` | _ | The callback if supplied is triggered when any link is opened. |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
+| [`ref`](/docs/@excalidraw/excalidraw/api/props/ref) | `object` | \_ | `Ref` to be passed to Excalidraw |
+| [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
+| [`onChange`](#onchange) | `function` | \_ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
+| [`onPointerUpdate`](#onpointerupdate) | `function` | \_ | Callback triggered when mouse pointer is updated. |
+| [`onPointerDown`](#onpointerdown) | `function` | \_ | This prop if passed gets triggered on pointer down evenets |
+| [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
+| [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when the something is pasted in to the scene |
+| [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
+| [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
-| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | _ | Render function that renders custom UI in top right corner |
-| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | _ | Render function that can be used to render custom stats on the stats dialog. |
-| [`renderSidebar`](/docs/@excalidraw/excalidraw/api/props/render-props#rendersidebar) | `function` | _ | Render function that renders custom sidebar. |
-| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | _ | This indicates if the app is in `view` mode. |
-| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | _ | This indicates if the `zen` mode is enabled |
-| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | _ | This indicates if the `grid` mode is enabled |
-| [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
+| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
+| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | \_ | Render function that can be used to render custom stats on the stats dialog. |
+| [`renderSidebar`](/docs/@excalidraw/excalidraw/api/props/render-props#rendersidebar) | `function` | \_ | Render function that renders custom sidebar. |
+| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | \_ | This indicates if the app is in `view` mode. |
+| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | \_ | This indicates if the `zen` mode is enabled |
+| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | \_ | This indicates if the `grid` mode is enabled |
+| [`libraryReturnUrl`](#libraryreturnurl) | `string` | \_ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `"light"` &#124; `"dark"` | `"light"` | The theme of the Excalidraw component |
 | [`name`](#name) | `string` |  | Name of the drawing |
 | [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
 | [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |
-| [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
+| [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
 | [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
 
@@ -95,7 +95,14 @@ This callback is triggered when mouse pointer is updated.
 This prop if passed will be triggered on pointer down events and has the below signature.
 
 <pre>
-(activeTool: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L115"> AppState["activeTool"]</a>, pointerDownState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L424">PointerDownState</a>) => void
+  (activeTool:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L115">
+    {" "}
+    AppState["activeTool"]
+  </a>
+  , pointerDownState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L424">
+    PointerDownState
+  </a>) => void
 </pre>
 
 ### onScrollChange
@@ -111,7 +118,11 @@ This prop if passed will be triggered when canvas is scrolled and has the below
 This callback is triggered if passed when something is pasted into the scene. You can use this callback in case you want to do something additional when the paste event occurs.
 
 <pre>
-(data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/clipboard.ts#L18">ClipboardData</a>, event: ClipboardEvent &#124; null) => boolean
+  (data:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/clipboard.ts#L18">
+    ClipboardData
+  </a>
+  , event: ClipboardEvent &#124; null) => boolean
 </pre>
 
 This callback must return a `boolean` value or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to a boolean value.
@@ -137,8 +148,11 @@ It is invoked with empty items when user clears the library. You can use this ca
 This prop if passed will be triggered when clicked on `link`. To handle the redirect yourself (such as when using your own router for internal links), you must call `event.preventDefault()`.
 
 <pre>
-(element: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement</a>, 
- event: CustomEvent&lt;&#123; nativeEvent: MouseEvent }&gt;) => void
+  (element:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement
+  </a>
+  , event: CustomEvent&lt;&#123; nativeEvent: MouseEvent }&gt;) => void
 </pre>
 
 Example:
@@ -181,31 +195,30 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 
 ### viewModeEnabled
 
-This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over *intialData.appState.viewModeEnabled*, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over _intialData.appState.viewModeEnabled_, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
 ### zenModeEnabled
 
-This prop indicates whether the app is in `zen mode`. When supplied, the value takes precedence over *intialData.appState.zenModeEnabled*, the `zen mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+This prop indicates whether the app is in `zen mode`. When supplied, the value takes precedence over _intialData.appState.zenModeEnabled_, the `zen mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
 ### gridModeEnabled
 
-This prop indicates whether the shows the grid. When supplied, the value takes precedence over *intialData.appState.gridModeEnabled*, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+This prop indicates whether the shows the grid. When supplied, the value takes precedence over _intialData.appState.gridModeEnabled_, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
 ### libraryReturnUrl
 
 If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com).  
-Defaults to *window.location.origin + window.location.pathname*. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
+Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
 
 ### theme
 
-This prop controls Excalidraw's theme. When supplied, the value takes precedence over *intialData.appState.theme*, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app unless *UIOptions.canvasActions.toggleTheme* is set to `true`, in which case the `theme` prop will control Excalidraw's default theme with ability to allow theme switching (you must take care of updating the `theme` prop when you detect a change to `appState.theme` from the [onChange](#onchange) callback).
+This prop controls Excalidraw's theme. When supplied, the value takes precedence over _intialData.appState.theme_, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app unless _UIOptions.canvasActions.toggleTheme_ is set to `true`, in which case the `theme` prop will control Excalidraw's default theme with ability to allow theme switching (you must take care of updating the `theme` prop when you detect a change to `appState.theme` from the [onChange](#onchange) callback).
 
 You can use [`THEME`](/docs/@excalidraw/excalidraw/api/utils#theme) to specify the theme.
 
 ### name
 
-This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over *intialData.appState.name*, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
-
+This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over _intialData.appState.name_, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
 
 ### detectScroll
 
@@ -226,7 +239,7 @@ This prop indicates whether to `focus` the Excalidraw component on page load. De
 Allows you to override `id` generation for files added on canvas (images). By default, an SHA-1 digest of the file is used.
 
 ```tsx
-(file: File) => string | Promise<string>
+(file: File) => string | Promise<string>;
 ```
 
 ### validateEmbeddable
@@ -237,4 +250,4 @@ validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) =>
 
 This is an optional property. By default we support a handful of well-known sites. You may allow additional sites or disallow the default ones by supplying a custom validator. If you pass `true`, all URLs will be allowed. You can also supply a list of hostnames, RegExp (or list of RegExp objects), or a function. If the function returns `undefined`, the built-in validator will be used.
 
-Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.
+Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.

dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx

@@ -6,8 +6,7 @@
   (isMobile: boolean, appState:
   <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
     AppState
-  </a>
-  ) => JSX | null
+  </a>) => JSX | null
 </pre>
 
 A function returning `JSX` to render `custom` UI in the top right corner of the app.
@@ -74,6 +73,7 @@ You can render `custom sidebar` using this prop. This sidebar is the same that t
 You need to import the `Sidebar` component from `excalidraw` package and pass your content as its `children`. The function `renderSidebar` should return the `Sidebar` instance.
 
 ### Sidebar
+
 The `<Sidebar>` component takes these props (all are optional except `children`):
 
 | Prop | Type | Description |
@@ -84,9 +84,7 @@ The `<Sidebar>` component takes these props (all are optional except `children`)
 | `docked` | `boolean` | Indicates whether the sidebar is`docked`. By default, the sidebar is `undocked`. If passed, the docking becomes controlled, and you are responsible for updating the `docked` state by listening on `onDock` callback. To decide the breakpoint for docking you can use [UIOptions.dockedSidebarBreakpoint](/docs/@excalidraw/excalidraw/api/props/ui-options#dockedsidebarbreakpoint) for more info on docking. |
 | `dockable` | `boolean` | Indicates whether to show the `dock` button so that user can `dock` the sidebar. If `false`, you can still dock programmatically by passing `docked` as `true`. |
 
-The sidebar will always include a header with `close / dock` buttons (when applicable).
-You can also add custom content to the header, by rendering `<Sidebar.Header>` as a child of the `<Sidebar>` component. Note that the custom header will still include the default buttons.
-
+The sidebar will always include a header with `close / dock` buttons (when applicable). You can also add custom content to the header, by rendering `<Sidebar.Header>` as a child of the `<Sidebar>` component. Note that the custom header will still include the default buttons.
 
 ### Sidebar.Header
 
@@ -102,7 +100,10 @@ function App() {
 
   return (
     <div style={{ height: "500px" }}>
-      <button className="custom-button" onClick={() => excalidrawAPI.toggleMenu("customSidebar")}>
+      <button
+        className="custom-button"
+        onClick={() => excalidrawAPI.toggleMenu("customSidebar")}
+      >
         Toggle Custom Sidebar
       </button>
       <Excalidraw
@@ -125,7 +126,11 @@ function App() {
 ## renderEmbeddable
 
 <pre>
-  (element: NonDeleted&lt;ExcalidrawEmbeddableElement&gt;, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>) => JSX.Element | null
+  (element: NonDeleted&lt;ExcalidrawEmbeddableElement&gt;, appState:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
+    AppState
+  </a>
+  ) => JSX.Element | null
 </pre>
 
 Allows you to replace the renderer for embeddable elements (which renders `<iframe>` elements).

dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx

@@ -65,7 +65,7 @@ If user choses to `dock` the sidebar, it will push the right part of the UI towa
 function App() {
   return (
     <div style={{ height: "500px" }}>
-      <Excalidraw UIOptions={{dockedSidebarBreakpoint: 200}}/>
+      <Excalidraw UIOptions={{ dockedSidebarBreakpoint: 200 }} />
     </div>
   );
 }

dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx

@@ -14,35 +14,44 @@ We're working on much improved export utilities. Stay tuned!
 **_Signature_**
 
 <pre>
-exportToCanvas(&#123;<br/>&nbsp;
-  elements,<br/>&nbsp;
-  appState<br/>&nbsp;
-  getDimensions,<br/>&nbsp;
-  files,<br/>&nbsp;
-  exportPadding?: number;<br/>
-&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L21">ExportOpts</a>
+  exportToCanvas(&#123;
+  <br />
+  &nbsp; elements,
+  <br />
+  &nbsp; appState
+  <br />
+  &nbsp; getDimensions,
+  <br />
+  &nbsp; files,
+  <br />
+  &nbsp; exportPadding?: number;
+  <br />
+  &#125;:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L21">
+    ExportOpts
+  </a>
 </pre>
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) |  | The elements to be exported to canvas. |
 | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L17) | The app state of the scene. |
-| [`getDimensions`](#getdimensions) | `function` | _ | A function which returns the `width`, `height`, and optionally `scale` (defaults to  `1`), with which canvas is to be exported. |
-| `maxWidthOrHeight` | `number` | _ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
-| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59) | _ | The files added to the scene. |
+| [`getDimensions`](#getdimensions) | `function` | \_ | A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported. |
+| `maxWidthOrHeight` | `number` | \_ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
+| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59) | \_ | The files added to the scene. |
 | `exportPadding` | `number` | `10` | The `padding` to be added on canvas. |
 
-
 #### getDimensions
 
 ```tsx
-(width: number, height: number) => { 
+(width: number, height: number) => {
   width: number,
-  height: number, 
-  scale?: number 
+  height: number,
+  scale?: number
 }
 ```
-A function which returns the `width`, `height`, and optionally `scale` (defaults to  `1`), with which canvas is to be exported.
+
+A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported.
 
 **How to use**
 
@@ -57,17 +66,17 @@ function App() {
   const [canvasUrl, setCanvasUrl] = useState("");
   const [excalidrawAPI, setExcalidrawAPI] = useState(null);
 
-  return  (
+  return (
     <>
       <button
         className="custom-button"
         onClick={async () => {
           if (!excalidrawAPI) {
-            return
+            return;
           }
           const elements = excalidrawAPI.getSceneElements();
           if (!elements || !elements.length) {
-            return
+            return;
           }
           const canvas = await exportToCanvas({
             elements,
@@ -76,7 +85,9 @@ function App() {
               exportWithDarkMode: false,
             },
             files: excalidrawAPI.getFiles(),
-            getDimensions: () => { return {width: 350, height: 350}}
+            getDimensions: () => {
+              return { width: 350, height: 350 };
+            },
           });
           const ctx = canvas.getContext("2d");
           ctx.font = "30px Virgil";
@@ -90,31 +101,38 @@ function App() {
         <img src={canvasUrl} alt="" />
       </div>
       <div style={{ height: "400px" }}>
-        <Excalidraw ref={(api) => setExcalidrawAPI(api)}
-/>
+        <Excalidraw ref={(api) => setExcalidrawAPI(api)} />
       </div>
     </>
-  )
+  );
 }
 ```
 
-
 ### exportToBlob
 
 **_Signature_**
 
 <pre>
-exportToBlob(<br/>&nbsp;
-  opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L14">ExportOpts</a> & &#123;<br/>&nbsp;
-  mimeType?: string,<br/>&nbsp;
-  quality?: number,<br/>&nbsp;
-  exportPadding?: number;<br/>
-})
+  exportToBlob(
+  <br />
+  &nbsp; opts:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L14">
+    ExportOpts
+  </a>{" "}
+  & &#123;
+  <br />
+  &nbsp; mimeType?: string,
+  <br />
+  &nbsp; quality?: number,
+  <br />
+  &nbsp; exportPadding?: number;
+  <br />
+  })
 </pre>
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `opts` | `object` | _ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
+| `opts` | `object` | \_ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
 | `mimeType` | `string` | `image/png` | Indicates the image format. |
 | `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg`/`image/webp` MIME types. |
 | `exportPadding` | `number` | `10` | The padding to be added on canvas. |
@@ -132,26 +150,31 @@ Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-
 **_Signature_**
 
 <pre>
-exportToSvg(&#123;<br/>&nbsp;
-  elements:&nbsp; 
-    <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
-      ExcalidrawElement[]
-    </a>,<br/>&nbsp;
-  appState:
-    <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95"> AppState
-    </a>,<br/>&nbsp;
-  exportPadding: number,<br/>&nbsp;
-  metadata: string,<br/>&nbsp;
-  files:&nbsp;
+  exportToSvg(&#123;
+  <br />
+  &nbsp; elements:&nbsp;
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement[]
+  </a>,<br />
+  &nbsp; appState:
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
+    {" "}
+    AppState
+  </a>,<br />
+  &nbsp; exportPadding: number,
+  <br />
+  &nbsp; metadata: string,
+  <br />
+  &nbsp; files:&nbsp;
   <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59">
-      BinaryFiles
-    </a>,<br/>
-&#125;);
+    BinaryFiles
+  </a>,<br />
+  &#125;);
 </pre>
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) |  | The elements to exported as `svg `|
+| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) |  | The elements to exported as `svg ` |
 | appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The `appState` of the scene |
 | exportPadding | number | 10 | The `padding` to be added on canvas |
 | files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) | undefined | The `files` added to the scene. |
@@ -163,12 +186,21 @@ This function returns a promise which resolves to `svg` of the exported drawing.
 **_Signature_**
 
 <pre>
-exportToClipboard(<br/>&nbsp;
-  opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L21">ExportOpts</a> & &#123;<br/>&nbsp;
-  mimeType?: string,<br/>&nbsp;
-  quality?: number;<br/>&nbsp;
-  type: 'png' | 'svg' |'json'<br/>
-})
+  exportToClipboard(
+  <br />
+  &nbsp; opts:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L21">
+    ExportOpts
+  </a>{" "}
+  & &#123;
+  <br />
+  &nbsp; mimeType?: string,
+  <br />
+  &nbsp; quality?: number;
+  <br />
+  &nbsp; type: 'png' | 'svg' |'json'
+  <br />
+  })
 </pre>
 
 | Name | Type | Default | Description |
@@ -176,7 +208,7 @@ exportToClipboard(<br/>&nbsp;
 | `opts` |  |  | This param is same as the params passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas). |
 | `mimeType` | `string` | `image/png` | Indicates the image format, this will be used when exporting as `png`. |
 | `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg` / `image/webp` MIME types. This will be used when exporting as `png`. |
-| `type` | 'png' &#124; 'svg' &#124; 'json' | _ | This determines the format to which the scene data should be `exported`. |
+| `type` | 'png' &#124; 'svg' &#124; 'json' | \_ | This determines the format to which the scene data should be `exported`. |
 
 **How to use**
 

dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx

@@ -8,7 +8,15 @@ id: "restore"
 **_Signature_**
 
 <pre>
-restoreAppState(appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState["appState"]</a>,<br/>&nbsp; localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>> | null): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>
+  restoreAppState(appState:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">
+    ImportedDataState["appState"]
+  </a>
+  ,<br />
+  &nbsp; localAppState: Partial&lt;
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
+    AppState
+  </a>> | null): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>
 </pre>
 
 **_How to use_**
@@ -20,26 +28,36 @@ import { restoreAppState } from "@excalidraw/excalidraw";
 This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) and if any key is missing, it will be set to its `default` value.
 
 When `localAppState` is supplied, it's used in place of values that are missing (`undefined`) in `appState` instead of the defaults.  
-Use this as a way to not override user's defaults if you persist them.
-You can pass `null` / `undefined` if not applicable.
+Use this as a way to not override user's defaults if you persist them. You can pass `null` / `undefined` if not applicable.
 
 ### restoreElements
 
 **_Signature_**
 
 <pre>
-restoreElements(
-  elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a>,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
-)
+  restoreElements( elements:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ImportedDataState["elements"]
+  </a>
+  ,<br />
+  &nbsp; localElements:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement[]
+  </a>{" "}
+  | null | undefined):{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement[]
+  </a>
+  ,<br />
+  &nbsp; opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }
+  <br />)
 </pre>
 
 | Prop | Type | Description |
-| ---- | ---- | ---- |
+| --- | --- | --- |
 | `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
-| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined |  When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
-| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements
+| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
+| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements |
 
 #### localElements
 
@@ -47,12 +65,13 @@ When `localElements` are supplied, they are used to ensure that existing restore
 Use this when you `import` elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the update
 
 #### opts
+
 The extra optional parameter to configure restored elements. It has the following attributes
 
-| Prop | Type | Description|
-| --- | --- | ------|
+| Prop | Type | Description |
+| --- | --- | --- |
 | `refreshDimensions` | `boolean` | Indicates whether we should also `recalculate` text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
-| `repairBindings` |`boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
+| `repairBindings` | `boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
 
 **_How to use_**
 
@@ -69,13 +88,29 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
 **_Signature_**
 
 <pre>
-restore(
-  data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState</a>,<br/>&nbsp;
-  localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>> | null | undefined,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a><br/>
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
-
-)
+  restore( data:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">
+    ImportedDataState
+  </a>
+  ,<br />
+  &nbsp; localAppState: Partial&lt;
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
+    AppState
+  </a>
+  > | null | undefined,
+  <br />
+  &nbsp; localElements:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement[]
+  </a>{" "}
+  | null | undefined
+  <br />
+  ):{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">
+    DataState
+  </a>
+  <br />
+  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br />)
 </pre>
 
 See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreElements) about `localElements`.
@@ -93,8 +128,12 @@ This function makes sure elements and state is set to appropriate values and set
 **_Signature_**
 
 <pre>
-restoreLibraryItems(libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState["libraryItems"]</a>,<br/>&nbsp;
-defaultStatus: "published" | "unpublished")
+  restoreLibraryItems(libraryItems:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">
+    ImportedDataState["libraryItems"]
+  </a>
+  ,<br />
+  &nbsp; defaultStatus: "published" | "unpublished")
 </pre>
 
 **_How to use_**

dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx

@@ -38,6 +38,7 @@ For a complete list of variables, check [theme.scss](https://github.com/excalidr
   --color-primary-light: #dcbec9;
 }
 ```
+
 ```tsx live
 function App() {
   return (

dev-docs/docs/@excalidraw/excalidraw/faq.mdx

@@ -6,13 +6,11 @@ No, Excalidraw package doesn't come with collaboration built in, since the imple
 
 ### Turning off Aggressive Anti-Fingerprinting in Brave browser
 
-When *Aggressive Anti-Fingerprinting* is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
+When _Aggressive Anti-Fingerprinting_ is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
 
 We strongly recommend turning it off. You can follow the steps below on how to do so.
 
-
-1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button
-![Shield button](../../assets/brave-shield.png)
+1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button ![Shield button](../../assets/brave-shield.png)
 
 <div style={{width:'30rem'}}>
 
@@ -30,8 +28,6 @@ We strongly recommend turning it off. You can follow the steps below on how to d
 
 If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).
 
-
-
 ## Need help?
 
 Check out the existing [Q&A](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw). If you have any queries or need help, ask us [here](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw).

dev-docs/docs/@excalidraw/excalidraw/integration.mdx

@@ -41,7 +41,9 @@ import { useState, useEffect } from "react";
 export default function App() {
   const [Excalidraw, setExcalidraw] = useState(null);
   useEffect(() => {
-    import("@excalidraw/excalidraw").then((comp) => setExcalidraw(comp.Excalidraw));
+    import("@excalidraw/excalidraw").then((comp) =>
+      setExcalidraw(comp.Excalidraw),
+    );
   }, []);
   return <>{Excalidraw && <Excalidraw />}</>;
 }
@@ -80,7 +82,7 @@ import TabItem from "@theme/TabItem";
   <TabItem value="html" label="html">
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Excalidraw in browser</title>

dev-docs/docs/introduction/contributing.mdx

@@ -2,8 +2,7 @@
 
 Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.
 
-We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you.
-For new contributors we would recommend to start with *Easy* tasks.
+We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you. For new contributors we would recommend to start with _Easy_ tasks.
 
 In case you want to pick up something from the roadmap, comment on that issue and one of the project maintainers will assign it to you, post which you can discuss in the issue and start working on it.
 
@@ -69,6 +68,7 @@ It's also a good idea to consider if your change should include additional tests
 
 Finally - always manually test your changes using the convenient staging environment deployed for each pull request. As much as local development attempts to replicate production, there can still be subtle differences in behavior. For larger features consider testing your change in multiple browsers as well.
 
+:::note Some checks, such as the `lint` and `test`, require approval from the maintainers to run. They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval. :::
 
 ## Translating
 

dev-docs/package.json

@@ -18,7 +18,7 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@docusaurus/theme-live-codeblock": "2.2.0",
-    "@excalidraw/excalidraw": "0.15.2",
+    "@excalidraw/excalidraw": "0.15.3",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",

dev-docs/yarn.lock

@@ -1631,10 +1631,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/excalidraw@0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.2.tgz#7dba4f6e10c52015a007efb75a9fc1afe598574c"
-  integrity sha512-rTI02kgWSTXiUdIkBxt9u/581F3eXcqQgJdIxmz54TFtG3ughoxO5fr4t7Fr2LZIturBPqfocQHGKZ0t2KLKgw==
+"@excalidraw/excalidraw@0.15.3":
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.3.tgz#5dea570f76451adf68bc24d4bfdd67a375cfeab1"
+  integrity sha512-/gpY7fgMO/AEaFLWnPqzbY8H7ly+/zocFf7D0Is5sWNMD2mhult5tana12lXKLSJ6EAz7ubo1A7LajXzvJXJDA==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

package.json

@@ -32,7 +32,6 @@
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
-    "eslint-plugin-react": "7.32.2",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
@@ -58,7 +57,6 @@
     "tunnel-rat": "0.1.2"
   },
   "devDependencies": {
-    "@excalidraw/eslint-config": "1.0.3",
     "@excalidraw/prettier-config": "1.0.2",
     "@types/chai": "4.3.0",
     "@types/jest": "27.4.0",
@@ -69,20 +67,23 @@
     "@types/react-dom": "18.0.6",
     "@types/resize-observer-browser": "0.1.7",
     "@types/socket.io-client": "1.4.36",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
     "@vitejs/plugin-react": "3.1.0",
     "@vitest/coverage-v8": "0.33.0",
     "@vitest/ui": "0.32.2",
     "chai": "4.3.6",
     "dotenv": "16.0.1",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-prettier": "3.3.1",
+    "eslint": "8.48.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "http-server": "14.1.1",
     "husky": "7.0.4",
     "jsdom": "22.1.0",
     "lint-staged": "12.3.7",
     "pepjs": "0.5.3",
-    "prettier": "2.6.2",
+    "prettier": "3.0.3",
     "rewire": "6.0.0",
     "typescript": "4.9.4",
     "vite": "4.4.2",
@@ -90,7 +91,7 @@
     "vite-plugin-ejs": "1.6.4",
     "vite-plugin-pwa": "0.16.4",
     "vite-plugin-svgr": "2.4.0",
-    "vitest": "0.32.2",
+    "vitest": "0.34.1",
     "vitest-canvas-mock": "0.3.2"
   },
   "engines": {
@@ -112,7 +113,7 @@
     "locales-coverage": "node scripts/build-locales-coverage.js",
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
     "prepare": "husky install",
-    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
+    "prettier": "prettier . --ignore-path=.eslintignore",
     "start": "vite",
     "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",

src/actions/actionCanvas.tsx

@@ -423,7 +423,7 @@ export const actionToggleHandTool = register({
         type: "hand",
         lastActiveToolBeforeEraser: appState.activeTool,
       });
-      setCursor(app.canvas, CURSOR_TYPE.GRAB);
+      setCursor(app.interactiveCanvas, CURSOR_TYPE.GRAB);
     }
 
     return {

src/actions/actionDuplicateSelection.tsx

@@ -259,23 +259,25 @@ const duplicateElements = (
 
   return {
     elements: finalElements,
-    appState: selectGroupsForSelectedElements(
-      {
-        ...appState,
-        selectedGroupIds: {},
-        selectedElementIds: nextElementsToSelect.reduce(
-          (acc: Record<ExcalidrawElement["id"], true>, element) => {
-            if (!isBoundToContainer(element)) {
-              acc[element.id] = true;
-            }
-            return acc;
-          },
-          {},
-        ),
-      },
-      getNonDeletedElements(finalElements),
-      appState,
-      null,
-    ),
+    appState: {
+      ...appState,
+      ...selectGroupsForSelectedElements(
+        {
+          editingGroupId: appState.editingGroupId,
+          selectedElementIds: nextElementsToSelect.reduce(
+            (acc: Record<ExcalidrawElement["id"], true>, element) => {
+              if (!isBoundToContainer(element)) {
+                acc[element.id] = true;
+              }
+              return acc;
+            },
+            {},
+          ),
+        },
+        getNonDeletedElements(finalElements),
+        appState,
+        null,
+      ),
+    },
   };
 };

src/actions/actionFinalize.tsx

@@ -19,7 +19,12 @@ import { AppState } from "../types";
 export const actionFinalize = register({
   name: "finalize",
   trackEvent: false,
-  perform: (elements, appState, _, { canvas, focusContainer, scene }) => {
+  perform: (
+    elements,
+    appState,
+    _,
+    { interactiveCanvas, focusContainer, scene },
+  ) => {
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
         appState.editingLinearElement;
@@ -132,7 +137,7 @@ export const actionFinalize = register({
         appState.activeTool.type !== "freedraw") ||
       !multiPointElement
     ) {
-      resetCursor(canvas);
+      resetCursor(interactiveCanvas);
     }
 
     let activeTool: AppState["activeTool"];

src/actions/actionFrame.ts

@@ -29,10 +29,13 @@ export const actionSelectAllElementsInFrame = register({
         elements,
         appState: {
           ...appState,
-          selectedElementIds: elementsInFrame.reduce((acc, element) => {
-            acc[element.id] = true;
-            return acc;
-          }, {} as Record<ExcalidrawElement["id"], true>),
+          selectedElementIds: elementsInFrame.reduce(
+            (acc, element) => {
+              acc[element.id] = true;
+              return acc;
+            },
+            {} as Record<ExcalidrawElement["id"], true>,
+          ),
         },
         commitToHistory: false,
       };
@@ -108,7 +111,7 @@ export const actionSetFrameAsActiveTool = register({
       type: "frame",
     });
 
-    setCursorForShape(app.canvas, {
+    setCursorForShape(app.interactiveCanvas, {
       ...appState,
       activeTool: nextActiveTool,
     });

src/actions/actionGroup.tsx

@@ -149,11 +149,14 @@ export const actionGroup = register({
     ];
 
     return {
-      appState: selectGroup(
-        newGroupId,
-        { ...appState, selectedGroupIds: {} },
-        getNonDeletedElements(nextElements),
-      ),
+      appState: {
+        ...appState,
+        ...selectGroup(
+          newGroupId,
+          { ...appState, selectedGroupIds: {} },
+          getNonDeletedElements(nextElements),
+        ),
+      },
       elements: nextElements,
       commitToHistory: true,
     };
@@ -212,7 +215,7 @@ export const actionUngroup = register({
     });
 
     const updateAppState = selectGroupsForSelectedElements(
-      { ...appState, selectedGroupIds: {} },
+      appState,
       getNonDeletedElements(nextElements),
       appState,
       null,
@@ -243,7 +246,7 @@ export const actionUngroup = register({
     );
 
     return {
-      appState: updateAppState,
+      appState: { ...appState, ...updateAppState },
       elements: nextElements,
       commitToHistory: true,
     };

src/actions/actionSelectAll.ts

@@ -28,22 +28,24 @@ export const actionSelectAll = register({
     }, {});
 
     return {
-      appState: selectGroupsForSelectedElements(
-        {
-          ...appState,
-          selectedLinearElement:
-            // single linear element selected
-            Object.keys(selectedElementIds).length === 1 &&
-            isLinearElement(elements[0])
-              ? new LinearElementEditor(elements[0], app.scene)
-              : null,
-          editingGroupId: null,
-          selectedElementIds,
-        },
-        getNonDeletedElements(elements),
-        appState,
-        app,
-      ),
+      appState: {
+        ...appState,
+        ...selectGroupsForSelectedElements(
+          {
+            editingGroupId: null,
+            selectedElementIds,
+          },
+          getNonDeletedElements(elements),
+          appState,
+          app,
+        ),
+        selectedLinearElement:
+          // single linear element selected
+          Object.keys(selectedElementIds).length === 1 &&
+          isLinearElement(elements[0])
+            ? new LinearElementEditor(elements[0], app.scene)
+            : null,
+      },
       commitToHistory: true,
     };
   },

src/appState.ts

@@ -215,11 +215,11 @@ const _clearAppStateForStorage = <
   exportType: ExportType,
 ) => {
   type ExportableKeys = {
-    [K in keyof typeof APP_STATE_STORAGE_CONF]: typeof APP_STATE_STORAGE_CONF[K][ExportType] extends true
+    [K in keyof typeof APP_STATE_STORAGE_CONF]: (typeof APP_STATE_STORAGE_CONF)[K][ExportType] extends true
       ? K
       : never;
   }[keyof typeof APP_STATE_STORAGE_CONF];
-  const stateForExport = {} as { [K in ExportableKeys]?: typeof appState[K] };
+  const stateForExport = {} as { [K in ExportableKeys]?: (typeof appState)[K] };
   for (const key of Object.keys(appState) as (keyof typeof appState)[]) {
     const propConfig = APP_STATE_STORAGE_CONF[key];
     if (propConfig?.[exportType]) {

src/clipboard.ts

@@ -24,6 +24,7 @@ export interface ClipboardData {
   files?: BinaryFiles;
   text?: string;
   errorMessage?: string;
+  programmaticAPI?: boolean;
 }
 
 let CLIPBOARD = "";
@@ -48,6 +49,7 @@ const clipboardContainsElements = (
     [
       EXPORT_DATA_TYPES.excalidraw,
       EXPORT_DATA_TYPES.excalidrawClipboard,
+      EXPORT_DATA_TYPES.excalidrawClipboardWithAPI,
     ].includes(contents?.type) &&
     Array.isArray(contents.elements)
   ) {
@@ -191,6 +193,8 @@ export const parseClipboard = async (
 
   try {
     const systemClipboardData = JSON.parse(systemClipboard);
+    const programmaticAPI =
+      systemClipboardData.type === EXPORT_DATA_TYPES.excalidrawClipboardWithAPI;
     if (clipboardContainsElements(systemClipboardData)) {
       return {
         elements: systemClipboardData.elements,
@@ -198,6 +202,7 @@ export const parseClipboard = async (
         text: isPlainPaste
           ? JSON.stringify(systemClipboardData.elements, null, 2)
           : undefined,
+        programmaticAPI,
       };
     }
   } catch (e) {}

src/colors.ts

@@ -6,12 +6,15 @@ const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
   source: R,
   keys: K,
 ) => {
-  return keys.reduce((acc, key: K[number]) => {
-    if (key in source) {
-      acc[key] = source[key];
-    }
-    return acc;
-  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
+  return keys.reduce(
+    (acc, key: K[number]) => {
+      if (key in source) {
+        acc[key] = source[key];
+      }
+      return acc;
+    },
+    {} as Pick<R, K[number]>,
+  ) as Pick<R, K[number]>;
 };
 
 export type ColorPickerColor =

src/components/Actions.tsx

@@ -213,13 +213,13 @@ export const SelectedShapeActions = ({
 };
 
 export const ShapesSwitcher = ({
-  canvas,
+  interactiveCanvas,
   activeTool,
   setAppState,
   onImageAction,
   appState,
 }: {
-  canvas: HTMLCanvasElement | null;
+  interactiveCanvas: HTMLCanvasElement | null;
   activeTool: UIAppState["activeTool"];
   setAppState: React.Component<any, UIAppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
@@ -270,7 +270,7 @@ export const ShapesSwitcher = ({
                 multiElement: null,
                 selectedElementIds: {},
               });
-              setCursorForShape(canvas, {
+              setCursorForShape(interactiveCanvas, {
                 ...appState,
                 activeTool: nextActiveTool,
               });

src/components/App.test.tsx

@@ -6,14 +6,14 @@ import { render, queryByTestId } from "../tests/test-utils";
 import ExcalidrawApp from "../excalidraw-app";
 import { vi } from "vitest";
 
-const renderScene = vi.spyOn(Renderer, "renderScene");
+const renderStaticScene = vi.spyOn(Renderer, "renderStaticScene");
 
 describe("Test <App/>", () => {
   beforeEach(async () => {
     // Unmount ReactDOM from root
     ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
     localStorage.clear();
-    renderScene.mockClear();
+    renderStaticScene.mockClear();
     reseed(7);
   });
 

src/components/ExportDialog.scss

@@ -107,7 +107,8 @@
 
     border-radius: 1rem;
     background-color: var(--button-color);
-    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.28),
+    box-shadow:
+      0 3px 5px -1px rgba(0, 0, 0, 0.28),
       0 6px 10px 0 rgba(0, 0, 0, 0.14);
 
     font-family: Cascadia;

src/components/EyeDropper.tsx

@@ -8,9 +8,9 @@ import { mutateElement } from "../element/mutateElement";
 import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
 import { useOutsideClick } from "../hooks/useOutsideClick";
 import { KEYS } from "../keys";
-import { invalidateShapeForElement } from "../renderer/renderElement";
 import { getSelectedElements } from "../scene";
 import Scene from "../scene/Scene";
+import { ShapeCache } from "../scene/ShapeCache";
 import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
 
 import "./EyeDropper.scss";
@@ -98,7 +98,7 @@ export const EyeDropper: React.FC<{
             },
             false,
           );
-          invalidateShapeForElement(element);
+          ShapeCache.delete(element);
         }
         Scene.getScene(
           metaStuffRef.current.selectedElements[0],

src/components/JSONExportDialog.tsx

@@ -34,7 +34,7 @@ const JSONExportModal = ({
   actionManager: ActionManager;
   onCloseRequest: () => void;
   exportOpts: ExportOpts;
-  canvas: HTMLCanvasElement | null;
+  canvas: HTMLCanvasElement;
 }) => {
   const { onExportToBackend } = exportOpts;
   return (
@@ -100,7 +100,7 @@ export const JSONExportDialog = ({
   files: BinaryFiles;
   actionManager: ActionManager;
   exportOpts: ExportOpts;
-  canvas: HTMLCanvasElement | null;
+  canvas: HTMLCanvasElement;
   setAppState: React.Component<any, UIAppState>["setState"];
 }) => {
   const handleClose = React.useCallback(() => {

src/components/LayerUI.scss

@@ -70,12 +70,16 @@
       font-weight: 500;
       opacity: 0;
       visibility: hidden;
-      transition: visibility 0s linear 0s, opacity 0.5s;
+      transition:
+        visibility 0s linear 0s,
+        opacity 0.5s;
 
       &--visible {
         opacity: 1;
         visibility: visible;
-        transition: visibility 0s linear 300ms, opacity 0.5s;
+        transition:
+          visibility 0s linear 300ms,
+          opacity 0.5s;
         transition-delay: 0.8s;
       }
     }

src/components/LayerUI.tsx

@@ -57,7 +57,8 @@ interface LayerUIProps {
   actionManager: ActionManager;
   appState: UIAppState;
   files: BinaryFiles;
-  canvas: HTMLCanvasElement | null;
+  canvas: HTMLCanvasElement;
+  interactiveCanvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   onLockToggle: () => void;
@@ -117,6 +118,7 @@ const LayerUI = ({
   setAppState,
   elements,
   canvas,
+  interactiveCanvas,
   onLockToggle,
   onHandToolToggle,
   onPenModeToggle,
@@ -272,7 +274,7 @@ const LayerUI = ({
 
                           <ShapesSwitcher
                             appState={appState}
-                            canvas={canvas}
+                            interactiveCanvas={interactiveCanvas}
                             activeTool={appState.activeTool}
                             setAppState={setAppState}
                             onImageAction={({ pointerType }) => {
@@ -413,7 +415,7 @@ const LayerUI = ({
           onLockToggle={onLockToggle}
           onHandToolToggle={onHandToolToggle}
           onPenModeToggle={onPenModeToggle}
-          canvas={canvas}
+          interactiveCanvas={interactiveCanvas}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
@@ -464,7 +466,7 @@ const LayerUI = ({
                 className="scroll-back-to-content"
                 onClick={() => {
                   setAppState((appState) => ({
-                    ...calculateScrollCenter(elements, appState, canvas),
+                    ...calculateScrollCenter(elements, appState),
                   }));
                 }}
               >
@@ -507,8 +509,18 @@ const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
     return false;
   }
 
-  const { canvas: _prevCanvas, appState: prevAppState, ...prev } = prevProps;
-  const { canvas: _nextCanvas, appState: nextAppState, ...next } = nextProps;
+  const {
+    canvas: _pC,
+    interactiveCanvas: _pIC,
+    appState: prevAppState,
+    ...prev
+  } = prevProps;
+  const {
+    canvas: _nC,
+    interactiveCanvas: _nIC,
+    appState: nextAppState,
+    ...next
+  } = nextProps;
 
   return (
     isShallowEqual(

src/components/MobileMenu.tsx

@@ -36,7 +36,7 @@ type MobileMenuProps = {
   onLockToggle: () => void;
   onHandToolToggle: () => void;
   onPenModeToggle: () => void;
-  canvas: HTMLCanvasElement | null;
+  interactiveCanvas: HTMLCanvasElement | null;
 
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
@@ -58,7 +58,7 @@ export const MobileMenu = ({
   onLockToggle,
   onHandToolToggle,
   onPenModeToggle,
-  canvas,
+  interactiveCanvas,
   onImageAction,
   renderTopRightUI,
   renderCustomStats,
@@ -85,7 +85,7 @@ export const MobileMenu = ({
                   <Stack.Row gap={1}>
                     <ShapesSwitcher
                       appState={appState}
-                      canvas={canvas}
+                      interactiveCanvas={interactiveCanvas}
                       activeTool={appState.activeTool}
                       setAppState={setAppState}
                       onImageAction={({ pointerType }) => {
@@ -202,7 +202,7 @@ export const MobileMenu = ({
                   className="scroll-back-to-content"
                   onClick={() => {
                     setAppState((appState) => ({
-                      ...calculateScrollCenter(elements, appState, canvas),
+                      ...calculateScrollCenter(elements, appState),
                     }));
                   }}
                 >

src/components/canvases/InteractiveCanvas.tsx

@@ -0,0 +1,226 @@
+import React, { useEffect, useRef } from "react";
+import { renderInteractiveScene } from "../../renderer/renderScene";
+import {
+  isRenderThrottlingEnabled,
+  isShallowEqual,
+  sceneCoordsToViewportCoords,
+} from "../../utils";
+import { CURSOR_TYPE } from "../../constants";
+import { t } from "../../i18n";
+import type { DOMAttributes } from "react";
+import type { AppState, InteractiveCanvasAppState } from "../../types";
+import type {
+  InteractiveCanvasRenderConfig,
+  RenderInteractiveSceneCallback,
+} from "../../scene/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+
+type InteractiveCanvasProps = {
+  containerRef: React.RefObject<HTMLDivElement>;
+  canvas: HTMLCanvasElement | null;
+  elements: readonly NonDeletedExcalidrawElement[];
+  visibleElements: readonly NonDeletedExcalidrawElement[];
+  selectedElements: readonly NonDeletedExcalidrawElement[];
+  versionNonce: number | undefined;
+  selectionNonce: number | undefined;
+  scale: number;
+  appState: InteractiveCanvasAppState;
+  renderInteractiveSceneCallback: (
+    data: RenderInteractiveSceneCallback,
+  ) => void;
+  handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
+  onContextMenu: Exclude<
+    DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"],
+    undefined
+  >;
+  onPointerMove: Exclude<
+    DOMAttributes<HTMLCanvasElement>["onPointerMove"],
+    undefined
+  >;
+  onPointerUp: Exclude<
+    DOMAttributes<HTMLCanvasElement>["onPointerUp"],
+    undefined
+  >;
+  onPointerCancel: Exclude<
+    DOMAttributes<HTMLCanvasElement>["onPointerCancel"],
+    undefined
+  >;
+  onTouchMove: Exclude<
+    DOMAttributes<HTMLCanvasElement>["onTouchMove"],
+    undefined
+  >;
+  onPointerDown: Exclude<
+    DOMAttributes<HTMLCanvasElement>["onPointerDown"],
+    undefined
+  >;
+  onDoubleClick: Exclude<
+    DOMAttributes<HTMLCanvasElement>["onDoubleClick"],
+    undefined
+  >;
+};
+
+const InteractiveCanvas = (props: InteractiveCanvasProps) => {
+  const isComponentMounted = useRef(false);
+
+  useEffect(() => {
+    if (!isComponentMounted.current) {
+      isComponentMounted.current = true;
+      return;
+    }
+
+    const cursorButton: {
+      [id: string]: string | undefined;
+    } = {};
+    const pointerViewportCoords: InteractiveCanvasRenderConfig["remotePointerViewportCoords"] =
+      {};
+    const remoteSelectedElementIds: InteractiveCanvasRenderConfig["remoteSelectedElementIds"] =
+      {};
+    const pointerUsernames: { [id: string]: string } = {};
+    const pointerUserStates: { [id: string]: string } = {};
+
+    props.appState.collaborators.forEach((user, socketId) => {
+      if (user.selectedElementIds) {
+        for (const id of Object.keys(user.selectedElementIds)) {
+          if (!(id in remoteSelectedElementIds)) {
+            remoteSelectedElementIds[id] = [];
+          }
+          remoteSelectedElementIds[id].push(socketId);
+        }
+      }
+      if (!user.pointer) {
+        return;
+      }
+      if (user.username) {
+        pointerUsernames[socketId] = user.username;
+      }
+      if (user.userState) {
+        pointerUserStates[socketId] = user.userState;
+      }
+      pointerViewportCoords[socketId] = sceneCoordsToViewportCoords(
+        {
+          sceneX: user.pointer.x,
+          sceneY: user.pointer.y,
+        },
+        props.appState,
+      );
+      cursorButton[socketId] = user.button;
+    });
+
+    const selectionColor =
+      (props.containerRef?.current &&
+        getComputedStyle(props.containerRef.current).getPropertyValue(
+          "--color-selection",
+        )) ||
+      "#6965db";
+
+    renderInteractiveScene(
+      {
+        canvas: props.canvas,
+        elements: props.elements,
+        visibleElements: props.visibleElements,
+        selectedElements: props.selectedElements,
+        scale: window.devicePixelRatio,
+        appState: props.appState,
+        renderConfig: {
+          remotePointerViewportCoords: pointerViewportCoords,
+          remotePointerButton: cursorButton,
+          remoteSelectedElementIds,
+          remotePointerUsernames: pointerUsernames,
+          remotePointerUserStates: pointerUserStates,
+          selectionColor,
+          renderScrollbars: false,
+        },
+        callback: props.renderInteractiveSceneCallback,
+      },
+      isRenderThrottlingEnabled(),
+    );
+  });
+
+  return (
+    <canvas
+      className="excalidraw__canvas interactive"
+      style={{
+        width: props.appState.width,
+        height: props.appState.height,
+        cursor: props.appState.viewModeEnabled
+          ? CURSOR_TYPE.GRAB
+          : CURSOR_TYPE.AUTO,
+      }}
+      width={props.appState.width * props.scale}
+      height={props.appState.height * props.scale}
+      ref={props.handleCanvasRef}
+      onContextMenu={props.onContextMenu}
+      onPointerMove={props.onPointerMove}
+      onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
+      onTouchMove={props.onTouchMove}
+      onPointerDown={props.onPointerDown}
+      onDoubleClick={
+        props.appState.viewModeEnabled ? undefined : props.onDoubleClick
+      }
+    >
+      {t("labels.drawingCanvas")}
+    </canvas>
+  );
+};
+
+const getRelevantAppStateProps = (
+  appState: AppState,
+): InteractiveCanvasAppState => ({
+  zoom: appState.zoom,
+  scrollX: appState.scrollX,
+  scrollY: appState.scrollY,
+  width: appState.width,
+  height: appState.height,
+  viewModeEnabled: appState.viewModeEnabled,
+  editingGroupId: appState.editingGroupId,
+  editingLinearElement: appState.editingLinearElement,
+  selectedElementIds: appState.selectedElementIds,
+  frameToHighlight: appState.frameToHighlight,
+  offsetLeft: appState.offsetLeft,
+  offsetTop: appState.offsetTop,
+  theme: appState.theme,
+  pendingImageElementId: appState.pendingImageElementId,
+  selectionElement: appState.selectionElement,
+  selectedGroupIds: appState.selectedGroupIds,
+  selectedLinearElement: appState.selectedLinearElement,
+  multiElement: appState.multiElement,
+  isBindingEnabled: appState.isBindingEnabled,
+  suggestedBindings: appState.suggestedBindings,
+  isRotating: appState.isRotating,
+  elementsToHighlight: appState.elementsToHighlight,
+  openSidebar: appState.openSidebar,
+  showHyperlinkPopup: appState.showHyperlinkPopup,
+  collaborators: appState.collaborators, // Necessary for collab. sessions
+  activeEmbeddable: appState.activeEmbeddable,
+});
+
+const areEqual = (
+  prevProps: InteractiveCanvasProps,
+  nextProps: InteractiveCanvasProps,
+) => {
+  // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
+  if (
+    prevProps.selectionNonce !== nextProps.selectionNonce ||
+    prevProps.versionNonce !== nextProps.versionNonce ||
+    prevProps.scale !== nextProps.scale ||
+    // we need to memoize on element arrays because they may have renewed
+    // even if versionNonce didn't change (e.g. we filter elements out based
+    // on appState)
+    prevProps.elements !== nextProps.elements ||
+    prevProps.visibleElements !== nextProps.visibleElements ||
+    prevProps.selectedElements !== nextProps.selectedElements
+  ) {
+    return false;
+  }
+
+  // Comparing the interactive appState for changes in case of some edge cases
+  return isShallowEqual(
+    // asserting AppState because we're being passed the whole AppState
+    // but resolve to only the InteractiveCanvas-relevant props
+    getRelevantAppStateProps(prevProps.appState as AppState),
+    getRelevantAppStateProps(nextProps.appState as AppState),
+  );
+};
+
+export default React.memo(InteractiveCanvas, areEqual);

src/components/canvases/StaticCanvas.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useRef } from "react";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import { renderStaticScene } from "../../renderer/renderScene";
+import { isRenderThrottlingEnabled, isShallowEqual } from "../../utils";
+import type { AppState, StaticCanvasAppState } from "../../types";
+import type { StaticCanvasRenderConfig } from "../../scene/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+
+type StaticCanvasProps = {
+  canvas: HTMLCanvasElement;
+  rc: RoughCanvas;
+  elements: readonly NonDeletedExcalidrawElement[];
+  visibleElements: readonly NonDeletedExcalidrawElement[];
+  versionNonce: number | undefined;
+  selectionNonce: number | undefined;
+  scale: number;
+  appState: StaticCanvasAppState;
+  renderConfig: StaticCanvasRenderConfig;
+};
+
+const StaticCanvas = (props: StaticCanvasProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const isComponentMounted = useRef(false);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) {
+      return;
+    }
+
+    const canvas = props.canvas;
+
+    if (!isComponentMounted.current) {
+      isComponentMounted.current = true;
+
+      wrapper.replaceChildren(canvas);
+      canvas.classList.add("excalidraw__canvas", "static");
+    }
+
+    canvas.style.width = `${props.appState.width}px`;
+    canvas.style.height = `${props.appState.height}px`;
+    canvas.width = props.appState.width * props.scale;
+    canvas.height = props.appState.height * props.scale;
+
+    renderStaticScene(
+      {
+        canvas,
+        rc: props.rc,
+        scale: props.scale,
+        elements: props.elements,
+        visibleElements: props.visibleElements,
+        appState: props.appState,
+        renderConfig: props.renderConfig,
+      },
+      isRenderThrottlingEnabled(),
+    );
+  });
+
+  return <div className="excalidraw__canvas-wrapper" ref={wrapperRef} />;
+};
+
+const getRelevantAppStateProps = (
+  appState: AppState,
+): StaticCanvasAppState => ({
+  zoom: appState.zoom,
+  scrollX: appState.scrollX,
+  scrollY: appState.scrollY,
+  width: appState.width,
+  height: appState.height,
+  viewModeEnabled: appState.viewModeEnabled,
+  offsetLeft: appState.offsetLeft,
+  offsetTop: appState.offsetTop,
+  theme: appState.theme,
+  pendingImageElementId: appState.pendingImageElementId,
+  shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+  viewBackgroundColor: appState.viewBackgroundColor,
+  exportScale: appState.exportScale,
+  selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
+  gridSize: appState.gridSize,
+  frameRendering: appState.frameRendering,
+  selectedElementIds: appState.selectedElementIds,
+  frameToHighlight: appState.frameToHighlight,
+  editingGroupId: appState.editingGroupId,
+});
+
+const areEqual = (
+  prevProps: StaticCanvasProps,
+  nextProps: StaticCanvasProps,
+) => {
+  if (
+    prevProps.versionNonce !== nextProps.versionNonce ||
+    prevProps.scale !== nextProps.scale ||
+    // we need to memoize on element arrays because they may have renewed
+    // even if versionNonce didn't change (e.g. we filter elements out based
+    // on appState)
+    prevProps.elements !== nextProps.elements ||
+    prevProps.visibleElements !== nextProps.visibleElements
+  ) {
+    return false;
+  }
+
+  return isShallowEqual(
+    // asserting AppState because we're being passed the whole AppState
+    // but resolve to only the StaticCanvas-relevant props
+    getRelevantAppStateProps(prevProps.appState as AppState),
+    getRelevantAppStateProps(nextProps.appState as AppState),
+  );
+};
+
+export default React.memo(StaticCanvas, areEqual);

src/components/canvases/index.tsx

@@ -0,0 +1,4 @@
+import InteractiveCanvas from "./InteractiveCanvas";
+import StaticCanvas from "./StaticCanvas";
+
+export { InteractiveCanvas, StaticCanvas };

src/constants.ts

@@ -164,6 +164,7 @@ export const EXPORT_DATA_TYPES = {
   excalidraw: "excalidraw",
   excalidrawClipboard: "excalidraw/clipboard",
   excalidrawLibrary: "excalidrawlib",
+  excalidrawClipboardWithAPI: "excalidraw-api/clipboard",
 } as const;
 
 export const EXPORT_SOURCE =

src/css/styles.scss

@@ -3,8 +3,9 @@
 
 :root {
   --zIndex-canvas: 1;
-  --zIndex-wysiwyg: 2;
-  --zIndex-layerUI: 3;
+  --zIndex-interactiveCanvas: 2;
+  --zIndex-wysiwyg: 3;
+  --zIndex-layerUI: 4;
 
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;
@@ -69,10 +70,19 @@
 
     z-index: var(--zIndex-canvas);
 
+    &.interactive {
+      z-index: var(--zIndex-interactiveCanvas);
+    }
+
     // Remove the main canvas from document flow to avoid resizeObserver
     // feedback loop (see https://github.com/excalidraw/excalidraw/pull/3379)
   }
 
+  &__canvas-wrapper,
+  &__canvas.static {
+    pointer-events: none;
+  }
+
   &__canvas {
     position: absolute;
   }
@@ -381,13 +391,19 @@
     appearance: none;
     background-image: var(--dropdown-icon);
     background-repeat: no-repeat;
-    background-position: right 0.7rem top 50%, 0 0;
+    background-position:
+      right 0.7rem top 50%,
+      0 0;
 
     :root[dir="rtl"] & {
-      background-position: left 0.7rem top 50%, 0 0;
+      background-position:
+        left 0.7rem top 50%,
+        0 0;
     }
 
-    background-size: 0.65em auto, 100%;
+    background-size:
+      0.65em auto,
+      100%;
 
     &:focus {
       box-shadow: 0 0 0 2px var(--focus-highlight-color);

src/data/blob.ts

@@ -144,11 +144,7 @@ export const loadSceneOrLibraryFromBlob = async (
               fileHandle: fileHandle || blob.handle || null,
               ...cleanAppStateForExport(data.appState || {}),
               ...(localAppState
-                ? calculateScrollCenter(
-                    data.elements || [],
-                    localAppState,
-                    null,
-                  )
+                ? calculateScrollCenter(data.elements || [], localAppState)
                 : {}),
             },
             files: data.files,
@@ -277,7 +273,7 @@ export const resizeImageFile = async (
   file: File,
   opts: {
     /** undefined indicates auto */
-    outputType?: typeof MIME_TYPES["jpg"];
+    outputType?: (typeof MIME_TYPES)["jpg"];
     maxWidthOrHeight: number;
   },
 ): Promise<File> => {

src/data/restore.ts

@@ -29,6 +29,7 @@ import {
   FONT_FAMILY,
   ROUNDNESS,
   DEFAULT_SIDEBAR,
+  DEFAULT_ELEMENT_PROPS,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
@@ -41,7 +42,6 @@ import {
   getDefaultLineHeight,
   measureBaseline,
 } from "../element/textElement";
-import { COLOR_PALETTE } from "../colors";
 import { normalizeLink } from "./url";
 
 type RestoredAppState = Omit<
@@ -122,16 +122,18 @@ const restoreElementWithProperties = <
     versionNonce: element.versionNonce ?? 0,
     isDeleted: element.isDeleted ?? false,
     id: element.id || randomId(),
-    fillStyle: element.fillStyle || "hachure",
-    strokeWidth: element.strokeWidth || 1,
-    strokeStyle: element.strokeStyle ?? "solid",
-    roughness: element.roughness ?? 1,
-    opacity: element.opacity == null ? 100 : element.opacity,
+    fillStyle: element.fillStyle || DEFAULT_ELEMENT_PROPS.fillStyle,
+    strokeWidth: element.strokeWidth || DEFAULT_ELEMENT_PROPS.strokeWidth,
+    strokeStyle: element.strokeStyle ?? DEFAULT_ELEMENT_PROPS.strokeStyle,
+    roughness: element.roughness ?? DEFAULT_ELEMENT_PROPS.roughness,
+    opacity:
+      element.opacity == null ? DEFAULT_ELEMENT_PROPS.opacity : element.opacity,
     angle: element.angle || 0,
     x: extra.x ?? element.x ?? 0,
     y: extra.y ?? element.y ?? 0,
-    strokeColor: element.strokeColor || COLOR_PALETTE.black,
-    backgroundColor: element.backgroundColor || COLOR_PALETTE.transparent,
+    strokeColor: element.strokeColor || DEFAULT_ELEMENT_PROPS.strokeColor,
+    backgroundColor:
+      element.backgroundColor || DEFAULT_ELEMENT_PROPS.backgroundColor,
     width: element.width || 0,
     height: element.height || 0,
     seed: element.seed ?? 1,
@@ -246,7 +248,6 @@ const restoreElement = (
         startArrowhead = null,
         endArrowhead = element.type === "arrow" ? "arrow" : null,
       } = element;
-
       let x = element.x;
       let y = element.y;
       let points = // migrate old arrow model to new one
@@ -286,7 +287,7 @@ const restoreElement = (
       return restoreElementWithProperties(element, {});
     case "embeddable":
       return restoreElementWithProperties(element, {
-        validated: undefined,
+        validated: null,
       });
     case "frame":
       return restoreElementWithProperties(element, {
@@ -410,7 +411,6 @@ export const restoreElements = (
 ): ExcalidrawElement[] => {
   // used to detect duplicate top-level element ids
   const existingIds = new Set<string>();
-
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
   const restoredElements = (elements || []).reduce((elements, element) => {
     // filtering out selection, which is legacy, no longer kept in elements,
@@ -429,6 +429,7 @@ export const restoreElements = (
           migratedElement = { ...migratedElement, id: randomId() };
         }
         existingIds.add(migratedElement.id);
+
         elements.push(migratedElement);
       }
     }

src/data/transform.test.ts

@@ -0,0 +1,706 @@
+import { vi } from "vitest";
+import {
+  ExcalidrawElementSkeleton,
+  convertToExcalidrawElements,
+} from "./transform";
+import { ExcalidrawArrowElement } from "../element/types";
+
+describe("Test Transform", () => {
+  it("should transform regular shapes", () => {
+    const elements = [
+      {
+        type: "rectangle",
+        x: 100,
+        y: 100,
+      },
+      {
+        type: "ellipse",
+        x: 100,
+        y: 250,
+      },
+      {
+        type: "diamond",
+        x: 100,
+        y: 400,
+      },
+      {
+        type: "rectangle",
+        x: 300,
+        y: 100,
+        width: 200,
+        height: 100,
+        backgroundColor: "#c0eb75",
+        strokeWidth: 2,
+      },
+      {
+        type: "ellipse",
+        x: 300,
+        y: 250,
+        width: 200,
+        height: 100,
+        backgroundColor: "#ffc9c9",
+        strokeStyle: "dotted",
+        fillStyle: "solid",
+        strokeWidth: 2,
+      },
+      {
+        type: "diamond",
+        x: 300,
+        y: 400,
+        width: 200,
+        height: 100,
+        backgroundColor: "#a5d8ff",
+        strokeColor: "#1971c2",
+        strokeStyle: "dashed",
+        fillStyle: "cross-hatch",
+        strokeWidth: 2,
+      },
+    ];
+
+    convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    ).forEach((ele) => {
+      expect(ele).toMatchSnapshot({
+        seed: expect.any(Number),
+        versionNonce: expect.any(Number),
+        id: expect.any(String),
+      });
+    });
+  });
+
+  it("should transform text element", () => {
+    const elements = [
+      {
+        type: "text",
+        x: 100,
+        y: 100,
+        text: "HELLO WORLD!",
+      },
+      {
+        type: "text",
+        x: 100,
+        y: 150,
+        text: "STYLED HELLO WORLD!",
+        fontSize: 20,
+        strokeColor: "#5f3dc4",
+      },
+    ];
+    convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    ).forEach((ele) => {
+      expect(ele).toMatchSnapshot({
+        seed: expect.any(Number),
+        versionNonce: expect.any(Number),
+        id: expect.any(String),
+      });
+    });
+  });
+
+  it("should transform linear elements", () => {
+    const elements = [
+      {
+        type: "arrow",
+        x: 100,
+        y: 20,
+      },
+      {
+        type: "arrow",
+        x: 450,
+        y: 20,
+        startArrowhead: "dot",
+        endArrowhead: "triangle",
+        strokeColor: "#1971c2",
+        strokeWidth: 2,
+      },
+      {
+        type: "line",
+        x: 100,
+        y: 60,
+      },
+      {
+        type: "line",
+        x: 450,
+        y: 60,
+        strokeColor: "#2f9e44",
+        strokeWidth: 2,
+        strokeStyle: "dotted",
+      },
+    ];
+    const excaldrawElements = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    );
+
+    expect(excaldrawElements.length).toBe(4);
+
+    excaldrawElements.forEach((ele) => {
+      expect(ele).toMatchSnapshot({
+        seed: expect.any(Number),
+        versionNonce: expect.any(Number),
+        id: expect.any(String),
+      });
+    });
+  });
+
+  it("should transform to text containers when label provided", () => {
+    const elements = [
+      {
+        type: "rectangle",
+        x: 100,
+        y: 100,
+        label: {
+          text: "RECTANGLE TEXT CONTAINER",
+        },
+      },
+      {
+        type: "ellipse",
+        x: 500,
+        y: 100,
+        width: 200,
+        label: {
+          text: "ELLIPSE TEXT CONTAINER",
+        },
+      },
+      {
+        type: "diamond",
+        x: 100,
+        y: 150,
+        width: 280,
+        label: {
+          text: "DIAMOND\nTEXT CONTAINER",
+        },
+      },
+      {
+        type: "diamond",
+        x: 100,
+        y: 400,
+        width: 300,
+        backgroundColor: "#fff3bf",
+        strokeWidth: 2,
+        label: {
+          text: "STYLED DIAMOND TEXT CONTAINER",
+          strokeColor: "#099268",
+          fontSize: 20,
+        },
+      },
+      {
+        type: "rectangle",
+        x: 500,
+        y: 300,
+        width: 200,
+        strokeColor: "#c2255c",
+        label: {
+          text: "TOP LEFT ALIGNED RECTANGLE TEXT CONTAINER",
+          textAlign: "left",
+          verticalAlign: "top",
+          fontSize: 20,
+        },
+      },
+      {
+        type: "ellipse",
+        x: 500,
+        y: 500,
+        strokeColor: "#f08c00",
+        backgroundColor: "#ffec99",
+        width: 200,
+        label: {
+          text: "STYLED ELLIPSE TEXT CONTAINER",
+          strokeColor: "#c2255c",
+        },
+      },
+    ];
+    const excaldrawElements = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    );
+
+    expect(excaldrawElements.length).toBe(12);
+
+    excaldrawElements.forEach((ele) => {
+      expect(ele).toMatchSnapshot({
+        seed: expect.any(Number),
+        versionNonce: expect.any(Number),
+        id: expect.any(String),
+      });
+    });
+  });
+
+  it("should transform to labelled arrows when label provided for arrows", () => {
+    const elements = [
+      {
+        type: "arrow",
+        x: 100,
+        y: 100,
+        label: {
+          text: "LABELED ARROW",
+        },
+      },
+      {
+        type: "arrow",
+        x: 100,
+        y: 200,
+        label: {
+          text: "STYLED LABELED ARROW",
+          strokeColor: "#099268",
+          fontSize: 20,
+        },
+      },
+      {
+        type: "arrow",
+        x: 100,
+        y: 300,
+        strokeColor: "#1098ad",
+        strokeWidth: 2,
+        label: {
+          text: "ANOTHER STYLED LABELLED ARROW",
+        },
+      },
+      {
+        type: "arrow",
+        x: 100,
+        y: 400,
+        strokeColor: "#1098ad",
+        strokeWidth: 2,
+        label: {
+          text: "ANOTHER STYLED LABELLED ARROW",
+          strokeColor: "#099268",
+        },
+      },
+    ];
+    const excaldrawElements = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    );
+
+    expect(excaldrawElements.length).toBe(8);
+
+    excaldrawElements.forEach((ele) => {
+      expect(ele).toMatchSnapshot({
+        seed: expect.any(Number),
+        versionNonce: expect.any(Number),
+        id: expect.any(String),
+      });
+    });
+  });
+
+  describe("Test arrow bindings", () => {
+    it("should bind arrows to shapes when start / end provided without ids", () => {
+      const elements = [
+        {
+          type: "arrow",
+          x: 255,
+          y: 239,
+          label: {
+            text: "HELLO WORLD!!",
+          },
+          start: {
+            type: "rectangle",
+          },
+          end: {
+            type: "ellipse",
+          },
+        },
+      ];
+      const excaldrawElements = convertToExcalidrawElements(
+        elements as ExcalidrawElementSkeleton[],
+      );
+
+      expect(excaldrawElements.length).toBe(4);
+      const [arrow, text, rectangle, ellipse] = excaldrawElements;
+      expect(arrow).toMatchObject({
+        type: "arrow",
+        x: 255,
+        y: 239,
+        boundElements: [{ id: text.id, type: "text" }],
+        startBinding: {
+          elementId: rectangle.id,
+          focus: 0,
+          gap: 1,
+        },
+        endBinding: {
+          elementId: ellipse.id,
+          focus: 0,
+        },
+      });
+
+      expect(text).toMatchObject({
+        x: 340,
+        y: 226.5,
+        type: "text",
+        text: "HELLO WORLD!!",
+        containerId: arrow.id,
+      });
+
+      expect(rectangle).toMatchObject({
+        x: 155,
+        y: 189,
+        type: "rectangle",
+        boundElements: [
+          {
+            id: arrow.id,
+            type: "arrow",
+          },
+        ],
+      });
+
+      expect(ellipse).toMatchObject({
+        x: 555,
+        y: 189,
+        type: "ellipse",
+        boundElements: [
+          {
+            id: arrow.id,
+            type: "arrow",
+          },
+        ],
+      });
+
+      excaldrawElements.forEach((ele) => {
+        expect(ele).toMatchSnapshot({
+          seed: expect.any(Number),
+          versionNonce: expect.any(Number),
+          id: expect.any(String),
+        });
+      });
+    });
+
+    it("should bind arrows to text when start / end provided without ids", () => {
+      const elements = [
+        {
+          type: "arrow",
+          x: 255,
+          y: 239,
+          label: {
+            text: "HELLO WORLD!!",
+          },
+          start: {
+            type: "text",
+            text: "HEYYYYY",
+          },
+          end: {
+            type: "text",
+            text: "WHATS UP ?",
+          },
+        },
+      ];
+
+      const excaldrawElements = convertToExcalidrawElements(
+        elements as ExcalidrawElementSkeleton[],
+      );
+
+      expect(excaldrawElements.length).toBe(4);
+
+      const [arrow, text1, text2, text3] = excaldrawElements;
+
+      expect(arrow).toMatchObject({
+        type: "arrow",
+        x: 255,
+        y: 239,
+        boundElements: [{ id: text1.id, type: "text" }],
+        startBinding: {
+          elementId: text2.id,
+          focus: 0,
+          gap: 1,
+        },
+        endBinding: {
+          elementId: text3.id,
+          focus: 0,
+        },
+      });
+
+      expect(text1).toMatchObject({
+        x: 340,
+        y: 226.5,
+        type: "text",
+        text: "HELLO WORLD!!",
+        containerId: arrow.id,
+      });
+
+      expect(text2).toMatchObject({
+        x: 185,
+        y: 226.5,
+        type: "text",
+        boundElements: [
+          {
+            id: arrow.id,
+            type: "arrow",
+          },
+        ],
+      });
+
+      expect(text3).toMatchObject({
+        x: 555,
+        y: 226.5,
+        type: "text",
+        boundElements: [
+          {
+            id: arrow.id,
+            type: "arrow",
+          },
+        ],
+      });
+
+      excaldrawElements.forEach((ele) => {
+        expect(ele).toMatchSnapshot({
+          seed: expect.any(Number),
+          versionNonce: expect.any(Number),
+          id: expect.any(String),
+        });
+      });
+    });
+
+    it("should bind arrows to existing shapes when start / end provided with ids", () => {
+      const elements = [
+        {
+          type: "ellipse",
+          id: "ellipse-1",
+          strokeColor: "#66a80f",
+          x: 630,
+          y: 316,
+          width: 300,
+          height: 300,
+          backgroundColor: "#d8f5a2",
+        },
+        {
+          type: "diamond",
+          id: "diamond-1",
+          strokeColor: "#9c36b5",
+          width: 140,
+          x: 96,
+          y: 400,
+        },
+        {
+          type: "arrow",
+          x: 247,
+          y: 420,
+          width: 395,
+          height: 35,
+          strokeColor: "#1864ab",
+          start: {
+            type: "rectangle",
+            width: 300,
+            height: 300,
+          },
+          end: {
+            id: "ellipse-1",
+          },
+        },
+        {
+          type: "arrow",
+          x: 227,
+          y: 450,
+          width: 400,
+          strokeColor: "#e67700",
+          start: {
+            id: "diamond-1",
+          },
+          end: {
+            id: "ellipse-1",
+          },
+        },
+      ];
+
+      const excaldrawElements = convertToExcalidrawElements(
+        elements as ExcalidrawElementSkeleton[],
+      );
+
+      expect(excaldrawElements.length).toBe(5);
+
+      excaldrawElements.forEach((ele) => {
+        expect(ele).toMatchSnapshot({
+          seed: expect.any(Number),
+          versionNonce: expect.any(Number),
+          id: expect.any(String),
+        });
+      });
+    });
+
+    it("should bind arrows to existing text elements when start / end provided with ids", () => {
+      const elements = [
+        {
+          x: 100,
+          y: 239,
+          type: "text",
+          text: "HEYYYYY",
+          id: "text-1",
+          strokeColor: "#c2255c",
+        },
+        {
+          type: "text",
+          id: "text-2",
+          x: 560,
+          y: 239,
+          text: "Whats up ?",
+        },
+        {
+          type: "arrow",
+          x: 255,
+          y: 239,
+          label: {
+            text: "HELLO WORLD!!",
+          },
+          start: {
+            id: "text-1",
+          },
+          end: {
+            id: "text-2",
+          },
+        },
+      ];
+
+      const excaldrawElements = convertToExcalidrawElements(
+        elements as ExcalidrawElementSkeleton[],
+      );
+
+      expect(excaldrawElements.length).toBe(4);
+
+      excaldrawElements.forEach((ele) => {
+        expect(ele).toMatchSnapshot({
+          seed: expect.any(Number),
+          versionNonce: expect.any(Number),
+          id: expect.any(String),
+        });
+      });
+    });
+
+    it("should bind arrows to existing elements if ids are correct", () => {
+      const consoleErrorSpy = vi
+        .spyOn(console, "error")
+        .mockImplementationOnce(() => void 0);
+      const elements = [
+        {
+          x: 100,
+          y: 239,
+          type: "text",
+          text: "HEYYYYY",
+          id: "text-1",
+          strokeColor: "#c2255c",
+        },
+        {
+          type: "rectangle",
+          x: 560,
+          y: 139,
+          id: "rect-1",
+          width: 100,
+          height: 200,
+          backgroundColor: "#bac8ff",
+        },
+        {
+          type: "arrow",
+          x: 255,
+          y: 239,
+          label: {
+            text: "HELLO WORLD!!",
+          },
+          start: {
+            id: "text-13",
+          },
+          end: {
+            id: "rect-11",
+          },
+        },
+      ];
+
+      const excaldrawElements = convertToExcalidrawElements(
+        elements as ExcalidrawElementSkeleton[],
+      );
+
+      expect(excaldrawElements.length).toBe(4);
+      const [, , arrow] = excaldrawElements;
+      expect(arrow).toMatchObject({
+        type: "arrow",
+        x: 255,
+        y: 239,
+        boundElements: [
+          {
+            id: "id46",
+            type: "text",
+          },
+        ],
+        startBinding: null,
+        endBinding: null,
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledTimes(2);
+      expect(consoleErrorSpy).toHaveBeenNthCalledWith(
+        1,
+        "No element for start binding with id text-13 found",
+      );
+      expect(consoleErrorSpy).toHaveBeenNthCalledWith(
+        2,
+        "No element for end binding with id rect-11 found",
+      );
+    });
+
+    it("should bind when ids referenced before the element data", () => {
+      const elements = [
+        {
+          type: "arrow",
+          x: 255,
+          y: 239,
+          end: {
+            id: "rect-1",
+          },
+        },
+        {
+          type: "rectangle",
+          x: 560,
+          y: 139,
+          id: "rect-1",
+          width: 100,
+          height: 200,
+          backgroundColor: "#bac8ff",
+        },
+      ];
+      const excaldrawElements = convertToExcalidrawElements(
+        elements as ExcalidrawElementSkeleton[],
+      );
+      expect(excaldrawElements.length).toBe(2);
+      const [arrow, rect] = excaldrawElements;
+      expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
+        elementId: "rect-1",
+        focus: 0,
+        gap: 5,
+      });
+      expect(rect.boundElements).toStrictEqual([
+        {
+          id: "id47",
+          type: "arrow",
+        },
+      ]);
+    });
+  });
+
+  it("should not allow duplicate ids", () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementationOnce(() => void 0);
+    const elements = [
+      {
+        type: "rectangle",
+        x: 300,
+        y: 100,
+        id: "rect-1",
+        width: 100,
+        height: 200,
+      },
+
+      {
+        type: "rectangle",
+        x: 100,
+        y: 200,
+        id: "rect-1",
+        width: 100,
+        height: 200,
+      },
+    ];
+    const excaldrawElements = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    );
+
+    expect(excaldrawElements.length).toBe(1);
+    expect(excaldrawElements[0]).toMatchSnapshot({
+      seed: expect.any(Number),
+      versionNonce: expect.any(Number),
+    });
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Duplicate id found for rect-1",
+    );
+  });
+});

src/data/transform.ts

@@ -0,0 +1,558 @@
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  TEXT_ALIGN,
+  VERTICAL_ALIGN,
+} from "../constants";
+import {
+  newElement,
+  newLinearElement,
+  redrawTextBoundingBox,
+} from "../element";
+import { bindLinearElement } from "../element/binding";
+import {
+  ElementConstructorOpts,
+  newImageElement,
+  newTextElement,
+} from "../element/newElement";
+import {
+  getDefaultLineHeight,
+  measureText,
+  normalizeText,
+} from "../element/textElement";
+import {
+  ExcalidrawArrowElement,
+  ExcalidrawBindableElement,
+  ExcalidrawElement,
+  ExcalidrawEmbeddableElement,
+  ExcalidrawFrameElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawGenericElement,
+  ExcalidrawImageElement,
+  ExcalidrawLinearElement,
+  ExcalidrawSelectionElement,
+  ExcalidrawTextElement,
+  FileId,
+  FontFamilyValues,
+  TextAlign,
+  VerticalAlign,
+} from "../element/types";
+import { MarkOptional } from "../utility-types";
+import { assertNever, getFontString } from "../utils";
+
+export type ValidLinearElement = {
+  type: "arrow" | "line";
+  x: number;
+  y: number;
+  label?: {
+    text: string;
+    fontSize?: number;
+    fontFamily?: FontFamilyValues;
+    textAlign?: TextAlign;
+    verticalAlign?: VerticalAlign;
+  } & MarkOptional<ElementConstructorOpts, "x" | "y">;
+  end?: (
+    | (
+        | {
+            type: Exclude<
+              ExcalidrawBindableElement["type"],
+              "image" | "text" | "frame" | "embeddable"
+            >;
+            id?: ExcalidrawGenericElement["id"];
+          }
+        | {
+            id: ExcalidrawGenericElement["id"];
+            type?: Exclude<
+              ExcalidrawBindableElement["type"],
+              "image" | "text" | "frame" | "embeddable"
+            >;
+          }
+      )
+    | ((
+        | {
+            type: "text";
+            text: string;
+          }
+        | {
+            type?: "text";
+            id: ExcalidrawTextElement["id"];
+            text: string;
+          }
+      ) &
+        Partial<ExcalidrawTextElement>)
+  ) &
+    MarkOptional<ElementConstructorOpts, "x" | "y">;
+  start?: (
+    | (
+        | {
+            type: Exclude<
+              ExcalidrawBindableElement["type"],
+              "image" | "text" | "frame" | "embeddable"
+            >;
+            id?: ExcalidrawGenericElement["id"];
+          }
+        | {
+            id: ExcalidrawGenericElement["id"];
+            type?: Exclude<
+              ExcalidrawBindableElement["type"],
+              "image" | "text" | "frame" | "embeddable"
+            >;
+          }
+      )
+    | ((
+        | {
+            type: "text";
+            text: string;
+          }
+        | {
+            type?: "text";
+            id: ExcalidrawTextElement["id"];
+            text: string;
+          }
+      ) &
+        Partial<ExcalidrawTextElement>)
+  ) &
+    MarkOptional<ElementConstructorOpts, "x" | "y">;
+} & Partial<ExcalidrawLinearElement>;
+
+export type ValidContainer = {
+  type: Exclude<ExcalidrawGenericElement["type"], "selection">;
+  id?: ExcalidrawGenericElement["id"];
+  label?: {
+    text: string;
+    fontSize?: number;
+    fontFamily?: FontFamilyValues;
+    textAlign?: TextAlign;
+    verticalAlign?: VerticalAlign;
+  } & MarkOptional<ElementConstructorOpts, "x" | "y">;
+} & ElementConstructorOpts;
+
+export type ExcalidrawElementSkeleton =
+  | Extract<
+      Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
+      | ExcalidrawEmbeddableElement
+      | ExcalidrawFreeDrawElement
+      | ExcalidrawFrameElement
+    >
+  | ({
+      type: Extract<ExcalidrawLinearElement["type"], "line">;
+      x: number;
+      y: number;
+    } & Partial<ExcalidrawLinearElement>)
+  | ValidContainer
+  | ValidLinearElement
+  | ({
+      type: "text";
+      text: string;
+      x: number;
+      y: number;
+      id?: ExcalidrawTextElement["id"];
+    } & Partial<ExcalidrawTextElement>)
+  | ({
+      type: Extract<ExcalidrawImageElement["type"], "image">;
+      x: number;
+      y: number;
+      fileId: FileId;
+    } & Partial<ExcalidrawImageElement>);
+
+const DEFAULT_LINEAR_ELEMENT_PROPS = {
+  width: 300,
+  height: 0,
+};
+
+const DEFAULT_DIMENSION = 100;
+
+const bindTextToContainer = (
+  container: ExcalidrawElement,
+  textProps: { text: string } & MarkOptional<ElementConstructorOpts, "x" | "y">,
+) => {
+  const textElement: ExcalidrawTextElement = newTextElement({
+    x: 0,
+    y: 0,
+    textAlign: TEXT_ALIGN.CENTER,
+    verticalAlign: VERTICAL_ALIGN.MIDDLE,
+    ...textProps,
+    containerId: container.id,
+    strokeColor: textProps.strokeColor || container.strokeColor,
+  });
+
+  Object.assign(container, {
+    boundElements: (container.boundElements || []).concat({
+      type: "text",
+      id: textElement.id,
+    }),
+  });
+
+  redrawTextBoundingBox(textElement, container);
+  return [container, textElement] as const;
+};
+
+const bindLinearElementToElement = (
+  linearElement: ExcalidrawArrowElement,
+  start: ValidLinearElement["start"],
+  end: ValidLinearElement["end"],
+  elementStore: ElementStore,
+): {
+  linearElement: ExcalidrawLinearElement;
+  startBoundElement?: ExcalidrawElement;
+  endBoundElement?: ExcalidrawElement;
+} => {
+  let startBoundElement;
+  let endBoundElement;
+
+  Object.assign(linearElement, {
+    startBinding: linearElement?.startBinding || null,
+    endBinding: linearElement.endBinding || null,
+  });
+
+  if (start) {
+    const width = start?.width ?? DEFAULT_DIMENSION;
+    const height = start?.height ?? DEFAULT_DIMENSION;
+
+    let existingElement;
+    if (start.id) {
+      existingElement = elementStore.getElement(start.id);
+      if (!existingElement) {
+        console.error(`No element for start binding with id ${start.id} found`);
+      }
+    }
+
+    const startX = start.x || linearElement.x - width;
+    const startY = start.y || linearElement.y - height / 2;
+    const startType = existingElement ? existingElement.type : start.type;
+
+    if (startType) {
+      if (startType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (start.type === "text") {
+          text = start.text;
+        }
+        if (!text) {
+          console.error(
+            `No text found for start binding text element for ${linearElement.id}`,
+          );
+        }
+        startBoundElement = newTextElement({
+          x: startX,
+          y: startY,
+          type: "text",
+          ...existingElement,
+          ...start,
+          text,
+        });
+        // to position the text correctly when coordinates not provided
+        Object.assign(startBoundElement, {
+          x: start.x || linearElement.x - startBoundElement.width,
+          y: start.y || linearElement.y - startBoundElement.height / 2,
+        });
+      } else {
+        switch (startType) {
+          case "rectangle":
+          case "ellipse":
+          case "diamond": {
+            startBoundElement = newElement({
+              x: startX,
+              y: startY,
+              width,
+              height,
+              ...existingElement,
+              ...start,
+              type: startType,
+            });
+            break;
+          }
+          default: {
+            assertNever(
+              linearElement as never,
+              `Unhandled element start type "${start.type}"`,
+              true,
+            );
+          }
+        }
+      }
+
+      bindLinearElement(
+        linearElement,
+        startBoundElement as ExcalidrawBindableElement,
+        "start",
+      );
+    }
+  }
+  if (end) {
+    const height = end?.height ?? DEFAULT_DIMENSION;
+    const width = end?.width ?? DEFAULT_DIMENSION;
+
+    let existingElement;
+    if (end.id) {
+      existingElement = elementStore.getElement(end.id);
+      if (!existingElement) {
+        console.error(`No element for end binding with id ${end.id} found`);
+      }
+    }
+    const endX = end.x || linearElement.x + linearElement.width;
+    const endY = end.y || linearElement.y - height / 2;
+    const endType = existingElement ? existingElement.type : end.type;
+
+    if (endType) {
+      if (endType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (end.type === "text") {
+          text = end.text;
+        }
+
+        if (!text) {
+          console.error(
+            `No text found for end binding text element for ${linearElement.id}`,
+          );
+        }
+        endBoundElement = newTextElement({
+          x: endX,
+          y: endY,
+          type: "text",
+          ...existingElement,
+          ...end,
+          text,
+        });
+        // to position the text correctly when coordinates not provided
+        Object.assign(endBoundElement, {
+          y: end.y || linearElement.y - endBoundElement.height / 2,
+        });
+      } else {
+        switch (endType) {
+          case "rectangle":
+          case "ellipse":
+          case "diamond": {
+            endBoundElement = newElement({
+              x: endX,
+              y: endY,
+              width,
+              height,
+              ...existingElement,
+              ...end,
+              type: endType,
+            });
+            break;
+          }
+          default: {
+            assertNever(
+              linearElement as never,
+              `Unhandled element end type "${endType}"`,
+              true,
+            );
+          }
+        }
+      }
+
+      bindLinearElement(
+        linearElement,
+        endBoundElement as ExcalidrawBindableElement,
+        "end",
+      );
+    }
+  }
+  return {
+    linearElement,
+    startBoundElement,
+    endBoundElement,
+  };
+};
+
+class ElementStore {
+  excalidrawElements = new Map<string, ExcalidrawElement>();
+
+  add = (ele?: ExcalidrawElement) => {
+    if (!ele) {
+      return;
+    }
+
+    this.excalidrawElements.set(ele.id, ele);
+  };
+  getElements = () => {
+    return Array.from(this.excalidrawElements.values());
+  };
+
+  getElement = (id: string) => {
+    return this.excalidrawElements.get(id);
+  };
+}
+
+export const convertToExcalidrawElements = (
+  elements: ExcalidrawElementSkeleton[] | null,
+) => {
+  if (!elements) {
+    return [];
+  }
+
+  const elementStore = new ElementStore();
+  const elementsWithIds = new Map<string, ExcalidrawElementSkeleton>();
+
+  // Create individual elements
+  for (const element of elements) {
+    let excalidrawElement: ExcalidrawElement;
+    switch (element.type) {
+      case "rectangle":
+      case "ellipse":
+      case "diamond": {
+        const width =
+          element?.label?.text && element.width === undefined
+            ? 0
+            : element?.width || DEFAULT_DIMENSION;
+        const height =
+          element?.label?.text && element.height === undefined
+            ? 0
+            : element?.height || DEFAULT_DIMENSION;
+        excalidrawElement = newElement({
+          ...element,
+          width,
+          height,
+        });
+
+        break;
+      }
+      case "line": {
+        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
+        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
+        excalidrawElement = newLinearElement({
+          width,
+          height,
+          points: [
+            [0, 0],
+            [width, height],
+          ],
+          ...element,
+        });
+
+        break;
+      }
+      case "arrow": {
+        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
+        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
+        excalidrawElement = newLinearElement({
+          width,
+          height,
+          endArrowhead: "arrow",
+          points: [
+            [0, 0],
+            [width, height],
+          ],
+          ...element,
+        });
+        break;
+      }
+      case "text": {
+        const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY;
+        const fontSize = element?.fontSize || DEFAULT_FONT_SIZE;
+        const lineHeight =
+          element?.lineHeight || getDefaultLineHeight(fontFamily);
+        const text = element.text ?? "";
+        const normalizedText = normalizeText(text);
+        const metrics = measureText(
+          normalizedText,
+          getFontString({ fontFamily, fontSize }),
+          lineHeight,
+        );
+
+        excalidrawElement = newTextElement({
+          width: metrics.width,
+          height: metrics.height,
+          fontFamily,
+          fontSize,
+          ...element,
+        });
+        break;
+      }
+      case "image": {
+        excalidrawElement = newImageElement({
+          width: element?.width || DEFAULT_DIMENSION,
+          height: element?.height || DEFAULT_DIMENSION,
+          ...element,
+        });
+
+        break;
+      }
+      case "freedraw":
+      case "frame":
+      case "embeddable": {
+        excalidrawElement = element;
+        break;
+      }
+
+      default: {
+        excalidrawElement = element;
+        assertNever(
+          element,
+          `Unhandled element type "${(element as any).type}"`,
+          true,
+        );
+      }
+    }
+    const existingElement = elementStore.getElement(excalidrawElement.id);
+    if (existingElement) {
+      console.error(`Duplicate id found for ${excalidrawElement.id}`);
+    } else {
+      elementStore.add(excalidrawElement);
+      elementsWithIds.set(excalidrawElement.id, element);
+    }
+  }
+
+  // Add labels and arrow bindings
+  for (const [id, element] of elementsWithIds) {
+    const excalidrawElement = elementStore.getElement(id)!;
+
+    switch (element.type) {
+      case "rectangle":
+      case "ellipse":
+      case "diamond":
+      case "arrow": {
+        if (element.label?.text) {
+          let [container, text] = bindTextToContainer(
+            excalidrawElement,
+            element?.label,
+          );
+          elementStore.add(container);
+          elementStore.add(text);
+
+          if (container.type === "arrow") {
+            const originalStart =
+              element.type === "arrow" ? element?.start : undefined;
+            const originalEnd =
+              element.type === "arrow" ? element?.end : undefined;
+            const { linearElement, startBoundElement, endBoundElement } =
+              bindLinearElementToElement(
+                container as ExcalidrawArrowElement,
+                originalStart,
+                originalEnd,
+                elementStore,
+              );
+            container = linearElement;
+            elementStore.add(linearElement);
+            elementStore.add(startBoundElement);
+            elementStore.add(endBoundElement);
+          }
+        } else {
+          switch (element.type) {
+            case "arrow": {
+              const { linearElement, startBoundElement, endBoundElement } =
+                bindLinearElementToElement(
+                  excalidrawElement as ExcalidrawArrowElement,
+                  element.start,
+                  element.end,
+                  elementStore,
+                );
+              elementStore.add(linearElement);
+              elementStore.add(startBoundElement);
+              elementStore.add(endBoundElement);
+              break;
+            }
+          }
+        }
+        break;
+      }
+    }
+  }
+  return elementStore.getElements();
+};

src/element/Hyperlink.tsx

@@ -25,10 +25,7 @@ import {
 } from "react";
 import clsx from "clsx";
 import { KEYS } from "../keys";
-import {
-  DEFAULT_LINK_SIZE,
-  invalidateShapeForElement,
-} from "../renderer/renderElement";
+import { DEFAULT_LINK_SIZE } from "../renderer/renderElement";
 import { rotate } from "../math";
 import { EVENT, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants";
 import { Bounds } from "./bounds";
@@ -42,6 +39,7 @@ import "./Hyperlink.scss";
 import { trackEvent } from "../analytics";
 import { useAppProps, useExcalidrawAppState } from "../components/App";
 import { isEmbeddableElement } from "./typeChecks";
+import { ShapeCache } from "../scene/ShapeCache";
 
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -115,7 +113,7 @@ export const Hyperlink = ({
           validated: false,
           link,
         });
-        invalidateShapeForElement(element);
+        ShapeCache.delete(element);
       } else {
         const { width, height } = element;
         const embedLink = getEmbedLink(link);
@@ -147,7 +145,7 @@ export const Hyperlink = ({
           validated: true,
           link,
         });
-        invalidateShapeForElement(element);
+        ShapeCache.delete(element);
         if (embeddableLinkCache.has(element.id)) {
           embeddableLinkCache.delete(element.id);
         }
@@ -393,7 +391,7 @@ export const getContextMenuLabel = (
 export const getLinkHandleFromCoords = (
   [x1, y1, x2, y2]: Bounds,
   angle: number,
-  appState: UIAppState,
+  appState: Pick<UIAppState, "zoom">,
 ): [x: number, y: number, width: number, height: number] => {
   const size = DEFAULT_LINK_SIZE;
   const linkWidth = size / appState.zoom.value;

src/element/binding.ts

@@ -190,7 +190,7 @@ export const maybeBindLinearElement = (
   }
 };
 
-const bindLinearElement = (
+export const bindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   hoveredElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
@@ -474,6 +474,7 @@ const maybeCalculateNewGapWhenScaling = (
   return { elementId, gap: newGap, focus };
 };
 
+// TODO: this is a bottleneck, optimise
 export const getEligibleElementsForBinding = (
   elements: NonDeleted<ExcalidrawElement>[],
 ): SuggestedBinding[] => {

src/element/bounds.test.ts

@@ -31,7 +31,7 @@ const _ce = ({
     width: w,
     height: h,
     angle: a,
-  } as ExcalidrawElement);
+  }) as ExcalidrawElement;
 
 describe("getElementAbsoluteCoords", () => {
   it("test x1 coordinate", () => {

src/element/bounds.ts

@@ -10,10 +10,7 @@ import { distance2d, rotate, rotatePoint } from "../math";
 import rough from "roughjs/bin/rough";
 import { Drawable, Op } from "roughjs/bin/core";
 import { Point } from "../types";
-import {
-  getShapeForElement,
-  generateRoughOptions,
-} from "../renderer/renderElement";
+import { generateRoughOptions } from "../scene/Shape";
 import {
   isArrowElement,
   isFreeDrawElement,
@@ -24,6 +21,7 @@ import { rescalePoints } from "../points";
 import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { Mutable } from "../utility-types";
+import { ShapeCache } from "../scene/ShapeCache";
 
 export type RectangleBox = {
   x: number;
@@ -621,7 +619,7 @@ const getLinearElementRotatedBounds = (
   }
 
   // first element is always the curve
-  const cachedShape = getShapeForElement(element)?.[0];
+  const cachedShape = ShapeCache.get(element)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
   const transformXY = (x: number, y: number) =>

src/element/collision.ts

@@ -39,7 +39,6 @@ import {
 import { FrameNameBoundsCache, Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
-import { getShapeForElement } from "../renderer/renderElement";
 import {
   hasBoundTextElement,
   isEmbeddableElement,
@@ -50,6 +49,7 @@ import { isTransparent } from "../utils";
 import { shouldShowBoundingBox } from "./transformHandles";
 import { getBoundTextElement } from "./textElement";
 import { Mutable } from "../utility-types";
+import { ShapeCache } from "../scene/ShapeCache";
 
 const isElementDraggableFromInside = (
   element: NonDeletedExcalidrawElement,
@@ -489,7 +489,7 @@ const hitTestFreeDrawElement = (
     B = element.points[i + 1];
   }
 
-  const shape = getShapeForElement(element);
+  const shape = ShapeCache.get(element);
 
   // for filled freedraw shapes, support
   // selecting from inside
@@ -502,7 +502,7 @@ const hitTestFreeDrawElement = (
 
 const hitTestLinear = (args: HitTestArgs): boolean => {
   const { element, threshold } = args;
-  if (!getShapeForElement(element)) {
+  if (!ShapeCache.get(element)) {
     return false;
   }
 
@@ -520,7 +520,7 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
   }
   const [relX, relY] = GAPoint.toTuple(point);
 
-  const shape = getShapeForElement(element as ExcalidrawLinearElement);
+  const shape = ShapeCache.get(element as ExcalidrawLinearElement);
 
   if (!shape) {
     return false;

src/element/linearElementEditor.ts

@@ -25,7 +25,12 @@ import {
   getElementPointsCoords,
   getMinMaxXYFromCurvePathOps,
 } from "./bounds";
-import { Point, AppState, PointerCoords } from "../types";
+import {
+  Point,
+  AppState,
+  PointerCoords,
+  InteractiveCanvasAppState,
+} from "../types";
 import { mutateElement } from "./mutateElement";
 import History from "../history";
 
@@ -39,9 +44,9 @@ import { tupleToCoors } from "../utils";
 import { isBindingElement } from "./typeChecks";
 import { shouldRotateWithDiscreteAngle } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
-import { getShapeForElement } from "../renderer/renderElement";
 import { DRAGGING_THRESHOLD } from "../constants";
 import { Mutable } from "../utility-types";
+import { ShapeCache } from "../scene/ShapeCache";
 
 const editorMidPointsCache: {
   version: number | null;
@@ -398,8 +403,8 @@ export class LinearElementEditor {
 
   static getEditorMidPoints = (
     element: NonDeleted<ExcalidrawLinearElement>,
-    appState: AppState,
-  ): typeof editorMidPointsCache["points"] => {
+    appState: InteractiveCanvasAppState,
+  ): (typeof editorMidPointsCache)["points"] => {
     const boundText = getBoundTextElement(element);
 
     // Since its not needed outside editor unless 2 pointer lines or bound text
@@ -422,7 +427,7 @@ export class LinearElementEditor {
 
   static updateEditorMidPointsCache = (
     element: NonDeleted<ExcalidrawLinearElement>,
-    appState: AppState,
+    appState: InteractiveCanvasAppState,
   ) => {
     const points = LinearElementEditor.getPointsGlobalCoordinates(element);
 
@@ -496,7 +501,7 @@ export class LinearElementEditor {
       }
     }
     let index = 0;
-    const midPoints: typeof editorMidPointsCache["points"] =
+    const midPoints: (typeof editorMidPointsCache)["points"] =
       LinearElementEditor.getEditorMidPoints(element, appState);
     while (index < midPoints.length) {
       if (midPoints[index] !== null) {
@@ -604,7 +609,7 @@ export class LinearElementEditor {
     hitElement: NonDeleted<ExcalidrawElement> | null;
     linearElementEditor: LinearElementEditor | null;
   } {
-    const ret: ReturnType<typeof LinearElementEditor["handlePointerDown"]> = {
+    const ret: ReturnType<(typeof LinearElementEditor)["handlePointerDown"]> = {
       didAddPoint: false,
       hitElement: null,
       linearElementEditor: null,
@@ -1418,7 +1423,7 @@ export class LinearElementEditor {
     let y1;
     let x2;
     let y2;
-    if (element.points.length < 2 || !getShapeForElement(element)) {
+    if (element.points.length < 2 || !ShapeCache.get(element)) {
       // XXX this is just a poor estimate and not very useful
       const { minX, minY, maxX, maxY } = element.points.reduce(
         (limits, [x, y]) => {
@@ -1437,7 +1442,7 @@ export class LinearElementEditor {
       x2 = maxX + element.x;
       y2 = maxY + element.y;
     } else {
-      const shape = getShapeForElement(element)!;
+      const shape = ShapeCache.generateElementShape(element);
 
       // first element is always the curve
       const ops = getCurvePathOps(shape[0]);

src/element/mutateElement.ts

@@ -1,11 +1,11 @@
 import { ExcalidrawElement } from "./types";
-import { invalidateShapeForElement } from "../renderer/renderElement";
 import Scene from "../scene/Scene";
 import { getSizeFromPoints } from "../points";
 import { randomInteger } from "../random";
 import { Point } from "../types";
 import { getUpdatedTimestamp } from "../utils";
 import { Mutable } from "../utility-types";
+import { ShapeCache } from "../scene/ShapeCache";
 
 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
@@ -89,7 +89,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
     typeof fileId != "undefined" ||
     typeof points !== "undefined"
   ) {
-    invalidateShapeForElement(element);
+    ShapeCache.delete(element);
   }
 
   element.version++;

src/element/newElement.ts

@@ -46,7 +46,7 @@ import {
 } from "../constants";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
 
-type ElementConstructorOpts = MarkOptional<
+export type ElementConstructorOpts = MarkOptional<
   Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
   | "width"
   | "height"
@@ -134,7 +134,7 @@ export const newElement = (
 export const newEmbeddableElement = (
   opts: {
     type: "embeddable";
-    validated: boolean | undefined;
+    validated: ExcalidrawEmbeddableElement["validated"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawEmbeddableElement> => {
   return {
@@ -187,7 +187,7 @@ export const newTextElement = (
     fontFamily?: FontFamilyValues;
     textAlign?: TextAlign;
     verticalAlign?: VerticalAlign;
-    containerId?: ExcalidrawTextContainer["id"];
+    containerId?: ExcalidrawTextContainer["id"] | null;
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
   } & ElementConstructorOpts,
@@ -361,8 +361,8 @@ export const newFreeDrawElement = (
 export const newLinearElement = (
   opts: {
     type: ExcalidrawLinearElement["type"];
-    startArrowhead: Arrowhead | null;
-    endArrowhead: Arrowhead | null;
+    startArrowhead?: Arrowhead | null;
+    endArrowhead?: Arrowhead | null;
     points?: ExcalidrawLinearElement["points"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawLinearElement> => {
@@ -372,8 +372,8 @@ export const newLinearElement = (
     lastCommittedPoint: null,
     startBinding: null,
     endBinding: null,
-    startArrowhead: opts.startArrowhead,
-    endArrowhead: opts.endArrowhead,
+    startArrowhead: opts.startArrowhead || null,
+    endArrowhead: opts.endArrowhead || null,
   };
 };
 
@@ -477,7 +477,7 @@ export const deepCopyElement = <T extends ExcalidrawElement>(
  * utility wrapper to generate new id. In test env it reuses the old + postfix
  * for test assertions.
  */
-const regenerateId = (
+export const regenerateId = (
   /** supply null if no previous id exists */
   previousId: string | null,
 ) => {

src/element/resizeElements.ts

@@ -767,7 +767,7 @@ export const resizeMultipleElements = (
       false,
     );
 
-    const update: typeof elementsAndUpdates[0]["update"] = {
+    const update: (typeof elementsAndUpdates)[0]["update"] = {
       x,
       y,
       width,

src/element/resizeTest.ts

@@ -70,20 +70,26 @@ export const getElementWithTransformHandleType = (
   zoom: Zoom,
   pointerType: PointerType,
 ) => {
-  return elements.reduce((result, element) => {
-    if (result) {
-      return result;
-    }
-    const transformHandleType = resizeTest(
-      element,
-      appState,
-      scenePointerX,
-      scenePointerY,
-      zoom,
-      pointerType,
-    );
-    return transformHandleType ? { element, transformHandleType } : null;
-  }, null as { element: NonDeletedExcalidrawElement; transformHandleType: MaybeTransformHandleType } | null);
+  return elements.reduce(
+    (result, element) => {
+      if (result) {
+        return result;
+      }
+      const transformHandleType = resizeTest(
+        element,
+        appState,
+        scenePointerX,
+        scenePointerY,
+        zoom,
+        pointerType,
+      );
+      return transformHandleType ? { element, transformHandleType } : null;
+    },
+    null as {
+      element: NonDeletedExcalidrawElement;
+      transformHandleType: MaybeTransformHandleType;
+    } | null,
+  );
 };
 
 export const getTransformHandleTypeFromCoords = (

src/element/sizeHelpers.ts

@@ -2,7 +2,9 @@ import { ExcalidrawElement } from "./types";
 import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
-import { AppState } from "../types";
+import { AppState, Zoom } from "../types";
+import { getElementBounds } from "./bounds";
+import { viewportCoordsToSceneCoords } from "../utils";
 
 export const isInvisiblySmallElement = (
   element: ExcalidrawElement,
@@ -13,6 +15,42 @@ export const isInvisiblySmallElement = (
   return element.width === 0 && element.height === 0;
 };
 
+export const isElementInViewport = (
+  element: ExcalidrawElement,
+  width: number,
+  height: number,
+  viewTransformations: {
+    zoom: Zoom;
+    offsetLeft: number;
+    offsetTop: number;
+    scrollX: number;
+    scrollY: number;
+  },
+) => {
+  const [x1, y1, x2, y2] = getElementBounds(element); // scene coordinates
+  const topLeftSceneCoords = viewportCoordsToSceneCoords(
+    {
+      clientX: viewTransformations.offsetLeft,
+      clientY: viewTransformations.offsetTop,
+    },
+    viewTransformations,
+  );
+  const bottomRightSceneCoords = viewportCoordsToSceneCoords(
+    {
+      clientX: viewTransformations.offsetLeft + width,
+      clientY: viewTransformations.offsetTop + height,
+    },
+    viewTransformations,
+  );
+
+  return (
+    topLeftSceneCoords.x <= x2 &&
+    topLeftSceneCoords.y <= y2 &&
+    bottomRightSceneCoords.x >= x1 &&
+    bottomRightSceneCoords.y >= y1
+  );
+};
+
 /**
  * Makes a perfect shape or diagonal/horizontal/vertical line
  */

src/element/textElement.ts

@@ -89,16 +89,23 @@ export const redrawTextBoundingBox = (
       container,
       textElement as ExcalidrawTextElementWithContainer,
     );
+    const maxContainerWidth = getBoundTextMaxWidth(container);
 
-    let nextHeight = container.height;
     if (metrics.height > maxContainerHeight) {
-      nextHeight = computeContainerDimensionForBoundText(
+      const nextHeight = computeContainerDimensionForBoundText(
         metrics.height,
         container.type,
       );
       mutateElement(container, { height: nextHeight });
       updateOriginalContainerCache(container.id, nextHeight);
     }
+    if (metrics.width > maxContainerWidth) {
+      const nextWidth = computeContainerDimensionForBoundText(
+        metrics.width,
+        container.type,
+      );
+      mutateElement(container, { width: nextWidth });
+    }
     const updatedTextElement = {
       ...textElement,
       ...boundTextUpdates,
@@ -859,8 +866,9 @@ const VALID_CONTAINER_TYPES = new Set([
   "arrow",
 ]);
 
-export const isValidTextContainer = (element: ExcalidrawElement) =>
-  VALID_CONTAINER_TYPES.has(element.type);
+export const isValidTextContainer = (element: {
+  type: ExcalidrawElement["type"];
+}) => VALID_CONTAINER_TYPES.has(element.type);
 
 export const computeContainerDimensionForBoundText = (
   dimension: number,

src/element/textWysiwyg.test.tsx

@@ -759,7 +759,7 @@ describe("textWysiwyg", () => {
       expect(h.elements[1].type).toBe("text");
 
       API.setSelectedElements([h.elements[0], h.elements[1]]);
-      fireEvent.contextMenu(GlobalTestState.canvas, {
+      fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
         button: 2,
         clientX: 20,
         clientY: 30,
@@ -903,7 +903,7 @@ describe("textWysiwyg", () => {
       mouse.clickAt(10, 20);
       mouse.down();
       mouse.up();
-      fireEvent.contextMenu(GlobalTestState.canvas, {
+      fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
         button: 2,
         clientX: 20,
         clientY: 30,
@@ -1154,7 +1154,7 @@ describe("textWysiwyg", () => {
 
       h.elements = [container, text];
       API.setSelectedElements([container, text]);
-      fireEvent.contextMenu(GlobalTestState.canvas, {
+      fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
         button: 2,
         clientX: 20,
         clientY: 30,
@@ -1168,7 +1168,7 @@ describe("textWysiwyg", () => {
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text).toBe(
         "Online \nwhitebo\nard \ncollabo\nration \nmade \neasy",
       );
-      fireEvent.contextMenu(GlobalTestState.canvas, {
+      fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
         button: 2,
         clientX: 20,
         clientY: 30,
@@ -1406,7 +1406,7 @@ describe("textWysiwyg", () => {
 
       API.setSelectedElements([textElement]);
 
-      fireEvent.contextMenu(GlobalTestState.canvas, {
+      fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
         button: 2,
         clientX: 20,
         clientY: 30,

src/element/textWysiwyg.tsx

@@ -116,7 +116,7 @@ export const textWysiwyg = ({
   }) => void;
   getViewportCoords: (x: number, y: number) => [number, number];
   element: ExcalidrawTextElement;
-  canvas: HTMLCanvasElement | null;
+  canvas: HTMLCanvasElement;
   excalidrawContainer: HTMLDivElement | null;
   app: App;
 }) => {

src/element/transformHandles.ts

@@ -6,7 +6,7 @@ import {
 
 import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
-import { AppState, Zoom } from "../types";
+import { InteractiveCanvasAppState, Zoom } from "../types";
 import { isTextElement } from ".";
 import { isFrameElement, isLinearElement } from "./typeChecks";
 import { DEFAULT_SPACING } from "../renderer/renderScene";
@@ -276,8 +276,8 @@ export const getTransformHandles = (
 };
 
 export const shouldShowBoundingBox = (
-  elements: NonDeletedExcalidrawElement[],
-  appState: AppState,
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: InteractiveCanvasAppState,
 ) => {
   if (appState.editingLinearElement) {
     return false;

src/element/types.ts

@@ -11,18 +11,18 @@ import { MarkNonNullable, ValueOf } from "../utility-types";
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
 export type FontFamilyKeys = keyof typeof FONT_FAMILY;
-export type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
-export type Theme = typeof THEME[keyof typeof THEME];
+export type FontFamilyValues = (typeof FONT_FAMILY)[FontFamilyKeys];
+export type Theme = (typeof THEME)[keyof typeof THEME];
 export type FontString = string & { _brand: "fontString" };
 export type GroupId = string;
 export type PointerType = "mouse" | "pen" | "touch";
 export type StrokeRoundness = "round" | "sharp";
 export type RoundnessType = ValueOf<typeof ROUNDNESS>;
 export type StrokeStyle = "solid" | "dashed" | "dotted";
-export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
+export type TextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN];
 
 type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
-export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
+export type VerticalAlign = (typeof VERTICAL_ALIGN)[VerticalAlignKeys];
 
 type _ExcalidrawElementBase = Readonly<{
   id: string;
@@ -86,15 +86,15 @@ export type ExcalidrawEllipseElement = _ExcalidrawElementBase & {
 
 export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase &
   Readonly<{
+    type: "embeddable";
     /**
      * indicates whether the embeddable src (url) has been validated for rendering.
-     * nullish value indicates that the validation is pending. We reset the
+     * null value indicates that the validation is pending. We reset the
      * value on each restore (or url change) so that we can guarantee
      * the validation came from a trusted source (the editor). Also because we
      * may not have access to host-app supplied url validator during restore.
      */
-    validated?: boolean;
-    type: "embeddable";
+    validated: boolean | null;
   }>;
 
 export type ExcalidrawImageElement = _ExcalidrawElementBase &
@@ -123,7 +123,6 @@ export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
 export type ExcalidrawGenericElement =
   | ExcalidrawSelectionElement
   | ExcalidrawRectangleElement
-  | ExcalidrawEmbeddableElement
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement;
 
@@ -138,7 +137,8 @@ export type ExcalidrawElement =
   | ExcalidrawLinearElement
   | ExcalidrawFreeDrawElement
   | ExcalidrawImageElement
-  | ExcalidrawFrameElement;
+  | ExcalidrawFrameElement
+  | ExcalidrawEmbeddableElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
   isDeleted: boolean;

src/excalidraw-app/data/tabSync.ts

@@ -16,14 +16,24 @@ export const isBrowserStorageStateNewer = (type: BrowserStateTypes) => {
 
 export const updateBrowserStateVersion = (type: BrowserStateTypes) => {
   const timestamp = Date.now();
-  localStorage.setItem(type, JSON.stringify(timestamp));
-  LOCAL_STATE_VERSIONS[type] = timestamp;
+  try {
+    localStorage.setItem(type, JSON.stringify(timestamp));
+    LOCAL_STATE_VERSIONS[type] = timestamp;
+  } catch (error) {
+    console.error("error while updating browser state verison", error);
+  }
 };
 
 export const resetBrowserStateVersions = () => {
-  for (const key of Object.keys(LOCAL_STATE_VERSIONS) as BrowserStateTypes[]) {
-    const timestamp = -1;
-    localStorage.setItem(key, JSON.stringify(timestamp));
-    LOCAL_STATE_VERSIONS[key] = timestamp;
+  try {
+    for (const key of Object.keys(
+      LOCAL_STATE_VERSIONS,
+    ) as BrowserStateTypes[]) {
+      const timestamp = -1;
+      localStorage.setItem(key, JSON.stringify(timestamp));
+      LOCAL_STATE_VERSIONS[key] = timestamp;
+    }
+  } catch (error) {
+    console.error("error while resetting browser state verison", error);
   }
 };

src/excalidraw-app/index.tsx

@@ -598,7 +598,7 @@ const ExcalidrawWrapper = () => {
     exportedElements: readonly NonDeletedExcalidrawElement[],
     appState: Partial<AppState>,
     files: BinaryFiles,
-    canvas: HTMLCanvasElement | null,
+    canvas: HTMLCanvasElement,
   ) => {
     if (exportedElements.length === 0) {
       return window.alert(t("alerts.cannotExportEmptyCanvas"));

src/frame.test.tsx

@@ -0,0 +1,128 @@
+import {
+  convertToExcalidrawElements,
+  Excalidraw,
+} from "./packages/excalidraw/index";
+import { API } from "./tests/helpers/api";
+import { Pointer } from "./tests/helpers/ui";
+import { render } from "./tests/test-utils";
+
+const { h } = window;
+const mouse = new Pointer("mouse");
+
+describe("adding elements to frames", () => {
+  type ElementType = string;
+  const assertOrder = (
+    els: readonly { type: ElementType }[],
+    order: ElementType[],
+  ) => {
+    expect(els.map((el) => el.type)).toEqual(order);
+  };
+
+  const reorderElements = <T extends { type: ElementType }>(
+    els: readonly T[],
+    order: ElementType[],
+  ) => {
+    return order.reduce((acc: T[], el) => {
+      acc.push(els.find((e) => e.type === el)!);
+      return acc;
+    }, []);
+  };
+
+  describe("resizing frame over elements", () => {
+    const testElements = async (
+      containerType: "arrow" | "rectangle",
+      initialOrder: ElementType[],
+      expectedOrder: ElementType[],
+    ) => {
+      await render(<Excalidraw />);
+
+      const frame = API.createElement({ type: "frame", x: 0, y: 0 });
+
+      h.elements = reorderElements(
+        [
+          frame,
+          ...convertToExcalidrawElements([
+            {
+              type: containerType,
+              x: 100,
+              y: 100,
+              height: 10,
+              label: { text: "xx" },
+            },
+          ]),
+        ],
+        initialOrder,
+      );
+
+      assertOrder(h.elements, initialOrder);
+
+      expect(h.elements[1].frameId).toBe(null);
+      expect(h.elements[2].frameId).toBe(null);
+
+      const container = h.elements[1];
+
+      mouse.clickAt(0, 0);
+      mouse.downAt(frame.x + frame.width, frame.y + frame.height);
+      mouse.moveTo(
+        container.x + container.width + 100,
+        container.y + container.height + 100,
+      );
+      mouse.up();
+      assertOrder(h.elements, expectedOrder);
+
+      expect(h.elements[0].frameId).toBe(frame.id);
+      expect(h.elements[1].frameId).toBe(frame.id);
+    };
+
+    it("resizing over text containers / labelled arrows", async () => {
+      await testElements(
+        "rectangle",
+        ["frame", "rectangle", "text"],
+        ["rectangle", "text", "frame"],
+      );
+      await testElements(
+        "rectangle",
+        ["frame", "text", "rectangle"],
+        ["rectangle", "text", "frame"],
+      );
+      await testElements(
+        "rectangle",
+        ["rectangle", "text", "frame"],
+        ["rectangle", "text", "frame"],
+      );
+      await testElements(
+        "rectangle",
+        ["text", "rectangle", "frame"],
+        ["text", "rectangle", "frame"],
+      );
+
+      await testElements(
+        "arrow",
+        ["frame", "arrow", "text"],
+        ["arrow", "text", "frame"],
+      );
+      await testElements(
+        "arrow",
+        ["text", "arrow", "frame"],
+        ["text", "arrow", "frame"],
+      );
+
+      // FIXME failing in tests (it fails to add elements to frame for some
+      // reason) but works in browser. (╯°□°)╯︵ ┻━┻
+      //
+      // Looks like the `getElementsCompletelyInFrame()` doesn't work
+      // in these cases.
+      //
+      // await testElements(
+      //   "arrow",
+      //   ["arrow", "text", "frame"],
+      //   ["arrow", "text", "frame"],
+      // );
+      // await testElements(
+      //   "arrow",
+      //   ["frame", "text", "arrow"],
+      //   ["text", "arrow", "frame"],
+      // );
+    });
+  });
+});

src/frame.ts

@@ -16,7 +16,7 @@ import {
 } from "./element/textElement";
 import { arrayToMap, findIndex } from "./utils";
 import { mutateElement } from "./element/mutateElement";
-import { AppClassProperties, AppState } from "./types";
+import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { isFrameElement } from "./element";
 import { moveOneRight } from "./zindex";
@@ -471,7 +471,6 @@ export const addElementsToFrame = (
   let nextElements = allElements.slice();
 
   const frameBoundary = findIndex(nextElements, (e) => e.frameId === frame.id);
-
   for (const element of omitGroupsContainingFrames(
     allElements,
     _elementsToAdd,
@@ -648,7 +647,7 @@ export const omitGroupsContainingFrames = (
  */
 export const getTargetFrame = (
   element: ExcalidrawElement,
-  appState: AppState,
+  appState: StaticCanvasAppState,
 ) => {
   const _element = isTextElement(element)
     ? getContainerElement(element) || element
@@ -660,11 +659,12 @@ export const getTargetFrame = (
     : getContainingFrame(_element);
 };
 
+// TODO: this a huge bottleneck for large scenes, optimise
 // given an element, return if the element is in some frame
 export const isElementInFrame = (
   element: ExcalidrawElement,
   allElements: ExcalidrawElementsIncludingDeleted,
-  appState: AppState,
+  appState: StaticCanvasAppState,
 ) => {
   const frame = getTargetFrame(element, appState);
   const _element = isTextElement(element)

src/groups.ts

@@ -4,27 +4,41 @@ import {
   NonDeleted,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import { AppClassProperties, AppState } from "./types";
+import {
+  AppClassProperties,
+  AppState,
+  InteractiveCanvasAppState,
+} from "./types";
 import { getSelectedElements } from "./scene";
 import { getBoundTextElement } from "./element/textElement";
 import { makeNextSelectedElementIds } from "./scene/selection";
+import { Mutable } from "./utility-types";
 
 export const selectGroup = (
   groupId: GroupId,
-  appState: AppState,
+  appState: InteractiveCanvasAppState,
   elements: readonly NonDeleted<ExcalidrawElement>[],
-): AppState => {
-  const elementsInGroup = elements.filter((element) =>
-    element.groupIds.includes(groupId),
+): Pick<
+  InteractiveCanvasAppState,
+  "selectedGroupIds" | "selectedElementIds" | "editingGroupId"
+> => {
+  const elementsInGroup = elements.reduce(
+    (acc: Record<string, true>, element) => {
+      if (element.groupIds.includes(groupId)) {
+        acc[element.id] = true;
+      }
+      return acc;
+    },
+    {},
   );
 
-  if (elementsInGroup.length < 2) {
+  if (Object.keys(elementsInGroup).length < 2) {
     if (
       appState.selectedGroupIds[groupId] ||
       appState.editingGroupId === groupId
     ) {
       return {
-        ...appState,
+        selectedElementIds: appState.selectedElementIds,
         selectedGroupIds: { ...appState.selectedGroupIds, [groupId]: false },
         editingGroupId: null,
       };
@@ -33,104 +47,190 @@ export const selectGroup = (
   }
 
   return {
-    ...appState,
+    editingGroupId: appState.editingGroupId,
     selectedGroupIds: { ...appState.selectedGroupIds, [groupId]: true },
     selectedElementIds: {
       ...appState.selectedElementIds,
-      ...Object.fromEntries(
-        elementsInGroup.map((element) => [element.id, true]),
-      ),
+      ...elementsInGroup,
     },
   };
 };
 
+export const selectGroupsForSelectedElements = (function () {
+  type SelectGroupsReturnType = Pick<
+    InteractiveCanvasAppState,
+    "selectedGroupIds" | "editingGroupId" | "selectedElementIds"
+  >;
+
+  let lastSelectedElements: readonly NonDeleted<ExcalidrawElement>[] | null =
+    null;
+  let lastElements: readonly NonDeleted<ExcalidrawElement>[] | null = null;
+  let lastReturnValue: SelectGroupsReturnType | null = null;
+
+  const _selectGroups = (
+    selectedElements: readonly NonDeleted<ExcalidrawElement>[],
+    elements: readonly NonDeleted<ExcalidrawElement>[],
+    appState: Pick<AppState, "selectedElementIds" | "editingGroupId">,
+    prevAppState: InteractiveCanvasAppState,
+  ): SelectGroupsReturnType => {
+    if (
+      lastReturnValue !== undefined &&
+      elements === lastElements &&
+      selectedElements === lastSelectedElements &&
+      appState.editingGroupId === lastReturnValue?.editingGroupId
+    ) {
+      return lastReturnValue;
+    }
+
+    const selectedGroupIds: Record<GroupId, boolean> = {};
+    // Gather all the groups withing selected elements
+    for (const selectedElement of selectedElements) {
+      let groupIds = selectedElement.groupIds;
+      if (appState.editingGroupId) {
+        // handle the case where a group is nested within a group
+        const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
+        if (indexOfEditingGroup > -1) {
+          groupIds = groupIds.slice(0, indexOfEditingGroup);
+        }
+      }
+      if (groupIds.length > 0) {
+        const lastSelectedGroup = groupIds[groupIds.length - 1];
+        selectedGroupIds[lastSelectedGroup] = true;
+      }
+    }
+
+    // Gather all the elements within selected groups
+    const groupElementsIndex: Record<GroupId, string[]> = {};
+    const selectedElementIdsInGroups = elements.reduce(
+      (acc: Record<string, true>, element) => {
+        const groupId = element.groupIds.find((id) => selectedGroupIds[id]);
+
+        if (groupId) {
+          acc[element.id] = true;
+
+          // Populate the index
+          if (!Array.isArray(groupElementsIndex[groupId])) {
+            groupElementsIndex[groupId] = [element.id];
+          } else {
+            groupElementsIndex[groupId].push(element.id);
+          }
+        }
+        return acc;
+      },
+      {},
+    );
+
+    for (const groupId of Object.keys(groupElementsIndex)) {
+      // If there is one element in the group, and the group is selected or it's being edited, it's not a group
+      if (groupElementsIndex[groupId].length < 2) {
+        if (selectedGroupIds[groupId]) {
+          selectedGroupIds[groupId] = false;
+        }
+      }
+    }
+
+    lastElements = elements;
+    lastSelectedElements = selectedElements;
+
+    lastReturnValue = {
+      editingGroupId: appState.editingGroupId,
+      selectedGroupIds,
+      selectedElementIds: makeNextSelectedElementIds(
+        {
+          ...appState.selectedElementIds,
+          ...selectedElementIdsInGroups,
+        },
+        prevAppState,
+      ),
+    };
+
+    return lastReturnValue;
+  };
+
+  /**
+   * When you select an element, you often want to actually select the whole group it's in, unless
+   * you're currently editing that group.
+   */
+  const selectGroupsForSelectedElements = (
+    appState: Pick<AppState, "selectedElementIds" | "editingGroupId">,
+    elements: readonly NonDeletedExcalidrawElement[],
+    prevAppState: InteractiveCanvasAppState,
+    /**
+     * supply null in cases where you don't have access to App instance and
+     * you don't care about optimizing selectElements retrieval
+     */
+    app: AppClassProperties | null,
+  ): Mutable<
+    Pick<
+      InteractiveCanvasAppState,
+      "selectedGroupIds" | "editingGroupId" | "selectedElementIds"
+    >
+  > => {
+    const selectedElements = app
+      ? app.scene.getSelectedElements({
+          selectedElementIds: appState.selectedElementIds,
+          // supplying elements explicitly in case we're passed non-state elements
+          elements,
+        })
+      : getSelectedElements(elements, appState);
+
+    if (!selectedElements.length) {
+      return {
+        selectedGroupIds: {},
+        editingGroupId: null,
+        selectedElementIds: makeNextSelectedElementIds(
+          appState.selectedElementIds,
+          prevAppState,
+        ),
+      };
+    }
+
+    return _selectGroups(selectedElements, elements, appState, prevAppState);
+  };
+
+  selectGroupsForSelectedElements.clearCache = () => {
+    lastElements = null;
+    lastSelectedElements = null;
+    lastReturnValue = null;
+  };
+
+  return selectGroupsForSelectedElements;
+})();
+
 /**
  * If the element's group is selected, don't render an individual
  * selection border around it.
  */
 export const isSelectedViaGroup = (
-  appState: AppState,
+  appState: InteractiveCanvasAppState,
   element: ExcalidrawElement,
 ) => getSelectedGroupForElement(appState, element) != null;
 
 export const getSelectedGroupForElement = (
-  appState: AppState,
+  appState: InteractiveCanvasAppState,
   element: ExcalidrawElement,
 ) =>
   element.groupIds
     .filter((groupId) => groupId !== appState.editingGroupId)
     .find((groupId) => appState.selectedGroupIds[groupId]);
 
-export const getSelectedGroupIds = (appState: AppState): GroupId[] =>
+export const getSelectedGroupIds = (
+  appState: InteractiveCanvasAppState,
+): GroupId[] =>
   Object.entries(appState.selectedGroupIds)
     .filter(([groupId, isSelected]) => isSelected)
     .map(([groupId, isSelected]) => groupId);
 
-/**
- * When you select an element, you often want to actually select the whole group it's in, unless
- * you're currently editing that group.
- */
-export const selectGroupsForSelectedElements = (
-  appState: AppState,
-  elements: readonly NonDeletedExcalidrawElement[],
-  prevAppState: AppState,
-  /**
-   * supply null in cases where you don't have access to App instance and
-   * you don't care about optimizing selectElements retrieval
-   */
-  app: AppClassProperties | null,
-): AppState => {
-  let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
-
-  const selectedElements = app
-    ? app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        // supplying elements explicitly in case we're passed non-state elements
-        elements,
-      })
-    : getSelectedElements(elements, appState);
-
-  if (!selectedElements.length) {
-    return {
-      ...nextAppState,
-      editingGroupId: null,
-      selectedElementIds: makeNextSelectedElementIds(
-        nextAppState.selectedElementIds,
-        prevAppState,
-      ),
-    };
-  }
-
-  for (const selectedElement of selectedElements) {
-    let groupIds = selectedElement.groupIds;
-    if (appState.editingGroupId) {
-      // handle the case where a group is nested within a group
-      const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
-      if (indexOfEditingGroup > -1) {
-        groupIds = groupIds.slice(0, indexOfEditingGroup);
-      }
-    }
-    if (groupIds.length > 0) {
-      const groupId = groupIds[groupIds.length - 1];
-      nextAppState = selectGroup(groupId, nextAppState, elements);
-    }
-  }
-
-  nextAppState.selectedElementIds = makeNextSelectedElementIds(
-    nextAppState.selectedElementIds,
-    prevAppState,
-  );
-
-  return nextAppState;
-};
-
 // given a list of elements, return the the actual group ids that should be selected
 // or used to update the elements
 export const selectGroupsFromGivenElements = (
   elements: readonly NonDeleted<ExcalidrawElement>[],
-  appState: AppState,
+  appState: InteractiveCanvasAppState,
 ) => {
-  let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
+  let nextAppState: InteractiveCanvasAppState = {
+    ...appState,
+    selectedGroupIds: {},
+  };
 
   for (const element of elements) {
     let groupIds = element.groupIds;
@@ -142,7 +242,10 @@ export const selectGroupsFromGivenElements = (
     }
     if (groupIds.length > 0) {
       const groupId = groupIds[groupIds.length - 1];
-      nextAppState = selectGroup(groupId, nextAppState, elements);
+      nextAppState = {
+        ...nextAppState,
+        ...selectGroup(groupId, nextAppState, elements),
+      };
     }
   }
 

src/history.ts

@@ -104,35 +104,38 @@ class History {
   ): DehydratedHistoryEntry =>
     this.dehydrateHistoryEntry({
       appState: clearAppStatePropertiesForHistory(appState),
-      elements: elements.reduce((elements, element) => {
-        if (
-          isLinearElement(element) &&
-          appState.multiElement &&
-          appState.multiElement.id === element.id
-        ) {
-          // don't store multi-point arrow if still has only one point
+      elements: elements.reduce(
+        (elements, element) => {
           if (
+            isLinearElement(element) &&
             appState.multiElement &&
-            appState.multiElement.id === element.id &&
-            element.points.length < 2
+            appState.multiElement.id === element.id
           ) {
-            return elements;
-          }
+            // don't store multi-point arrow if still has only one point
+            if (
+              appState.multiElement &&
+              appState.multiElement.id === element.id &&
+              element.points.length < 2
+            ) {
+              return elements;
+            }
 
-          elements.push({
-            ...element,
-            // don't store last point if not committed
-            points:
-              element.lastCommittedPoint !==
-              element.points[element.points.length - 1]
-                ? element.points.slice(0, -1)
-                : element.points,
-          });
-        } else {
-          elements.push(element);
-        }
-        return elements;
-      }, [] as Mutable<typeof elements>),
+            elements.push({
+              ...element,
+              // don't store last point if not committed
+              points:
+                element.lastCommittedPoint !==
+                element.points[element.points.length - 1]
+                  ? element.points.slice(0, -1)
+                  : element.points,
+            });
+          } else {
+            elements.push(element);
+          }
+          return elements;
+        },
+        [] as Mutable<typeof elements>,
+      ),
     });
 
   shouldCreateEntry(nextEntry: HistoryEntry): boolean {

src/math.ts

@@ -10,9 +10,9 @@ import {
   ExcalidrawLinearElement,
   NonDeleted,
 } from "./element/types";
-import { getShapeForElement } from "./renderer/renderElement";
 import { getCurvePathOps } from "./element/bounds";
 import { Mutable } from "./utility-types";
+import { ShapeCache } from "./scene/ShapeCache";
 
 export const rotate = (
   x1: number,
@@ -303,7 +303,7 @@ export const getControlPointsForBezierCurve = (
   element: NonDeleted<ExcalidrawLinearElement>,
   endPoint: Point,
 ) => {
-  const shape = getShapeForElement(element as ExcalidrawLinearElement);
+  const shape = ShapeCache.generateElementShape(element);
   if (!shape) {
     return null;
   }

src/packages/excalidraw/.size-limit.json

@@ -1,7 +1,7 @@
 [
   {
     "path": "dist/excalidraw.production.min.js",
-    "limit": "290 kB"
+    "limit": "291 kB"
   },
   {
     "path": "dist/excalidraw-assets/locales",

src/packages/excalidraw/example/App.tsx

@@ -75,6 +75,7 @@ const {
   WelcomeScreen,
   MainMenu,
   LiveCollaborationTrigger,
+  convertToExcalidrawElements,
 } = window.ExcalidrawLib;
 
 const COMMENT_ICON_DIMENSION = 32;
@@ -140,7 +141,10 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
         ];
 
         //@ts-ignore
-        initialStatePromiseRef.current.promise.resolve(initialData);
+        initialStatePromiseRef.current.promise.resolve({
+          ...initialData,
+          elements: convertToExcalidrawElements(initialData.elements),
+        });
         excalidrawAPI.addFiles(imagesArray);
       };
     };
@@ -184,38 +188,40 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
   const updateScene = () => {
     const sceneData = {
       elements: restoreElements(
-        [
+        convertToExcalidrawElements([
           {
             type: "rectangle",
-            version: 141,
-            versionNonce: 361174001,
-            isDeleted: false,
-            id: "oDVXy8D6rom3H1-LLH2-f",
+            id: "rect-1",
             fillStyle: "hachure",
             strokeWidth: 1,
             strokeStyle: "solid",
             roughness: 1,
-            opacity: 100,
             angle: 0,
             x: 100.50390625,
             y: 93.67578125,
             strokeColor: "#c92a2a",
-            backgroundColor: "transparent",
             width: 186.47265625,
             height: 141.9765625,
             seed: 1968410350,
-            groupIds: [],
-            frameId: null,
-            boundElements: null,
-            locked: false,
-            link: null,
-            updated: 1,
             roundness: {
               type: ROUNDNESS.ADAPTIVE_RADIUS,
               value: 32,
             },
           },
-        ],
+          {
+            type: "arrow",
+            x: 300,
+            y: 150,
+            start: { id: "rect-1" },
+            end: { type: "ellipse" },
+          },
+          {
+            type: "text",
+            x: 300,
+            y: 100,
+            text: "HELLO WORLD!",
+          },
+        ]),
         null,
       ),
       appState: {

src/packages/excalidraw/example/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

src/packages/excalidraw/index.tsx

@@ -253,3 +253,4 @@ export { LiveCollaborationTrigger };
 export { DefaultSidebar } from "../../components/DefaultSidebar";
 
 export { normalizeLink } from "../../data/url";
+export { convertToExcalidrawElements } from "../../data/transform";

src/packages/excalidraw/webpack.dev.config.js

@@ -2,8 +2,8 @@ const path = require("path");
 const webpack = require("webpack");
 const autoprefixer = require("autoprefixer");
 const { parseEnvVariables } = require("./env");
-
 const outputDir = process.env.EXAMPLE === "true" ? "example/public" : "dist";
+
 module.exports = {
   mode: "development",
   devtool: false,
@@ -17,7 +17,6 @@ module.exports = {
     filename: "[name].js",
     chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js",
     assetModuleFilename: "excalidraw-assets-dev/[name][ext]",
-
     publicPath: "",
   },
   resolve: {
@@ -45,7 +44,7 @@ module.exports = {
       {
         test: /\.(ts|tsx|js|jsx|mjs)$/,
         exclude:
-          /node_modules\/(?!(browser-fs-access|canvas-roundrect-polyfill))/,
+          /node_modules[\\/](?!(browser-fs-access|canvas-roundrect-polyfill))/,
         use: [
           {
             loader: "import-meta-loader",

src/packages/excalidraw/webpack.prod.config.js

@@ -1,10 +1,10 @@
 const path = require("path");
+const webpack = require("webpack");
+const autoprefixer = require("autoprefixer");
+const { parseEnvVariables } = require("./env");
 const TerserPlugin = require("terser-webpack-plugin");
 const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-const autoprefixer = require("autoprefixer");
-const webpack = require("webpack");
-const { parseEnvVariables } = require("./env");
 
 module.exports = {
   mode: "production",
@@ -47,8 +47,7 @@ module.exports = {
       {
         test: /\.(ts|tsx|js|jsx|mjs)$/,
         exclude:
-          /node_modules\/(?!(browser-fs-access|canvas-roundrect-polyfill))/,
-
+          /node_modules[\\/](?!(browser-fs-access|canvas-roundrect-polyfill))/,
         use: [
           {
             loader: "import-meta-loader",

src/packages/excalidraw/yarn.lock

@@ -3935,14 +3935,14 @@ semver@7.5.3:
     lru-cache "^6.0.0"
 
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 

src/packages/utils/yarn.lock

@@ -2259,14 +2259,14 @@ semver@7.0.0:
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.3.4, semver@^7.3.5:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 

src/renderer/renderElement.ts

@@ -1,8 +1,6 @@
 import {
   ExcalidrawElement,
-  ExcalidrawLinearElement,
   ExcalidrawTextElement,
-  Arrowhead,
   NonDeletedExcalidrawElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawImageElement,
@@ -16,27 +14,22 @@ import {
   isArrowElement,
   hasBoundTextElement,
 } from "../element/typeChecks";
-import {
-  getDiamondPoints,
-  getElementAbsoluteCoords,
-  getArrowheadPoints,
-} from "../element/bounds";
-import { RoughCanvas } from "roughjs/bin/canvas";
-import { Drawable, Options } from "roughjs/bin/core";
-import { RoughSVG } from "roughjs/bin/svg";
-import { RoughGenerator } from "roughjs/bin/generator";
+import { getElementAbsoluteCoords } from "../element/bounds";
+import type { RoughCanvas } from "roughjs/bin/canvas";
+import type { Drawable } from "roughjs/bin/core";
+import type { RoughSVG } from "roughjs/bin/svg";
 
-import { RenderConfig } from "../scene/types";
-import {
-  distance,
-  getFontString,
-  getFontFamilyString,
-  isRTL,
-  isTransparent,
-} from "../utils";
+import { StaticCanvasRenderConfig } from "../scene/types";
+import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
 import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
 import rough from "roughjs/bin/rough";
-import { AppState, BinaryFiles, Zoom } from "../types";
+import {
+  AppState,
+  StaticCanvasAppState,
+  BinaryFiles,
+  Zoom,
+  InteractiveCanvasAppState,
+} from "../types";
 import { getDefaultAppState } from "../appState";
 import {
   BOUND_TEXT_PADDING,
@@ -61,6 +54,7 @@ import {
 } from "../element/embeddable";
 import { getContainingFrame } from "../frame";
 import { normalizeLink, toValidURL } from "../data/url";
+import { ShapeCache } from "../scene/ShapeCache";
 
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
@@ -72,36 +66,33 @@ const defaultAppState = getDefaultAppState();
 
 const isPendingImageElement = (
   element: ExcalidrawElement,
-  renderConfig: RenderConfig,
+  renderConfig: StaticCanvasRenderConfig,
 ) =>
   isInitializedImageElement(element) &&
   !renderConfig.imageCache.has(element.fileId);
 
 const shouldResetImageFilter = (
   element: ExcalidrawElement,
-  renderConfig: RenderConfig,
+  renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState,
 ) => {
   return (
-    renderConfig.theme === "dark" &&
+    appState.theme === "dark" &&
     isInitializedImageElement(element) &&
     !isPendingImageElement(element, renderConfig) &&
     renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg
   );
 };
 
-const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
-
-const getDashArrayDotted = (strokeWidth: number) => [1.5, 6 + strokeWidth];
-
 const getCanvasPadding = (element: ExcalidrawElement) =>
   element.type === "freedraw" ? element.strokeWidth * 12 : 20;
 
 export interface ExcalidrawElementWithCanvas {
   element: ExcalidrawElement | ExcalidrawTextElement;
   canvas: HTMLCanvasElement;
-  theme: RenderConfig["theme"];
+  theme: AppState["theme"];
   scale: number;
-  zoomValue: RenderConfig["zoom"]["value"];
+  zoomValue: AppState["zoom"]["value"];
   canvasOffsetX: number;
   canvasOffsetY: number;
   boundTextElementVersion: number | null;
@@ -165,7 +156,8 @@ const cappedElementCanvasSize = (
 const generateElementCanvas = (
   element: NonDeletedExcalidrawElement,
   zoom: Zoom,
-  renderConfig: RenderConfig,
+  renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState,
 ): ExcalidrawElementWithCanvas => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d")!;
@@ -205,17 +197,17 @@ const generateElementCanvas = (
   const rc = rough.canvas(canvas);
 
   // in dark theme, revert the image color filter
-  if (shouldResetImageFilter(element, renderConfig)) {
+  if (shouldResetImageFilter(element, renderConfig, appState)) {
     context.filter = IMAGE_INVERT_FILTER;
   }
 
-  drawElementOnCanvas(element, rc, context, renderConfig);
+  drawElementOnCanvas(element, rc, context, renderConfig, appState);
   context.restore();
 
   return {
     element,
     canvas,
-    theme: renderConfig.theme,
+    theme: appState.theme,
     scale,
     zoomValue: zoom.value,
     canvasOffsetX,
@@ -262,11 +254,13 @@ const drawImagePlaceholder = (
     size,
   );
 };
+
 const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
-  renderConfig: RenderConfig,
+  renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState,
 ) => {
   context.globalAlpha =
     ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
@@ -277,7 +271,7 @@ const drawElementOnCanvas = (
     case "ellipse": {
       context.lineJoin = "round";
       context.lineCap = "round";
-      rc.draw(getShapeForElement(element)!);
+      rc.draw(ShapeCache.get(element)!);
       break;
     }
     case "arrow":
@@ -285,7 +279,7 @@ const drawElementOnCanvas = (
       context.lineJoin = "round";
       context.lineCap = "round";
 
-      getShapeForElement(element)!.forEach((shape) => {
+      ShapeCache.get(element)!.forEach((shape) => {
         rc.draw(shape);
       });
       break;
@@ -296,7 +290,7 @@ const drawElementOnCanvas = (
       context.fillStyle = element.strokeColor;
 
       const path = getFreeDrawPath2D(element) as Path2D;
-      const fillShape = getShapeForElement(element);
+      const fillShape = ShapeCache.get(element);
 
       if (fillShape) {
         rc.draw(fillShape);
@@ -321,7 +315,7 @@ const drawElementOnCanvas = (
           element.height,
         );
       } else {
-        drawImagePlaceholder(element, context, renderConfig.zoom.value);
+        drawImagePlaceholder(element, context, appState.zoom.value);
       }
       break;
     }
@@ -373,405 +367,29 @@ const drawElementOnCanvas = (
   context.globalAlpha = 1;
 };
 
-const elementWithCanvasCache = new WeakMap<
+export const elementWithCanvasCache = new WeakMap<
   ExcalidrawElement,
   ExcalidrawElementWithCanvas
 >();
 
-const shapeCache = new WeakMap<ExcalidrawElement, ElementShape>();
-
-type ElementShape = Drawable | Drawable[] | null;
-
-type ElementShapes = {
-  freedraw: Drawable | null;
-  arrow: Drawable[];
-  line: Drawable[];
-  text: null;
-  image: null;
-};
-
-export const getShapeForElement = <T extends ExcalidrawElement>(element: T) =>
-  shapeCache.get(element) as T["type"] extends keyof ElementShapes
-    ? ElementShapes[T["type"]] | undefined
-    : Drawable | null | undefined;
-
-export const setShapeForElement = <T extends ExcalidrawElement>(
-  element: T,
-  shape: T["type"] extends keyof ElementShapes
-    ? ElementShapes[T["type"]]
-    : Drawable,
-) => shapeCache.set(element, shape);
-
-export const invalidateShapeForElement = (element: ExcalidrawElement) =>
-  shapeCache.delete(element);
-
-export const generateRoughOptions = (
-  element: ExcalidrawElement,
-  continuousPath = false,
-): Options => {
-  const options: Options = {
-    seed: element.seed,
-    strokeLineDash:
-      element.strokeStyle === "dashed"
-        ? getDashArrayDashed(element.strokeWidth)
-        : element.strokeStyle === "dotted"
-        ? getDashArrayDotted(element.strokeWidth)
-        : undefined,
-    // for non-solid strokes, disable multiStroke because it tends to make
-    // dashes/dots overlay each other
-    disableMultiStroke: element.strokeStyle !== "solid",
-    // for non-solid strokes, increase the width a bit to make it visually
-    // similar to solid strokes, because we're also disabling multiStroke
-    strokeWidth:
-      element.strokeStyle !== "solid"
-        ? element.strokeWidth + 0.5
-        : element.strokeWidth,
-    // when increasing strokeWidth, we must explicitly set fillWeight and
-    // hachureGap because if not specified, roughjs uses strokeWidth to
-    // calculate them (and we don't want the fills to be modified)
-    fillWeight: element.strokeWidth / 2,
-    hachureGap: element.strokeWidth * 4,
-    roughness: element.roughness,
-    stroke: element.strokeColor,
-    preserveVertices: continuousPath,
-  };
-
-  switch (element.type) {
-    case "rectangle":
-    case "embeddable":
-    case "diamond":
-    case "ellipse": {
-      options.fillStyle = element.fillStyle;
-      options.fill = isTransparent(element.backgroundColor)
-        ? undefined
-        : element.backgroundColor;
-      if (element.type === "ellipse") {
-        options.curveFitting = 1;
-      }
-      return options;
-    }
-    case "line":
-    case "freedraw": {
-      if (isPathALoop(element.points)) {
-        options.fillStyle = element.fillStyle;
-        options.fill =
-          element.backgroundColor === "transparent"
-            ? undefined
-            : element.backgroundColor;
-      }
-      return options;
-    }
-    case "arrow":
-      return options;
-    default: {
-      throw new Error(`Unimplemented type ${element.type}`);
-    }
-  }
-};
-
-const modifyEmbeddableForRoughOptions = (
-  element: NonDeletedExcalidrawElement,
-  isExporting: boolean,
-) => {
-  if (
-    element.type === "embeddable" &&
-    (isExporting || !element.validated) &&
-    isTransparent(element.backgroundColor) &&
-    isTransparent(element.strokeColor)
-  ) {
-    return {
-      ...element,
-      roughness: 0,
-      backgroundColor: "#d3d3d3",
-      fillStyle: "solid",
-    } as const;
-  }
-  return element;
-};
-
-/**
- * Generates the element's shape and puts it into the cache.
- * @param element
- * @param generator
- */
-const generateElementShape = (
-  element: NonDeletedExcalidrawElement,
-  generator: RoughGenerator,
-  isExporting: boolean = false,
-) => {
-  let shape = isExporting ? undefined : shapeCache.get(element);
-
-  // `null` indicates no rc shape applicable for this element type
-  // (= do not generate anything)
-  if (shape === undefined) {
-    elementWithCanvasCache.delete(element);
-
-    switch (element.type) {
-      case "rectangle":
-      case "embeddable": {
-        // this is for rendering the stroke/bg of the embeddable, especially
-        // when the src url is not set
-
-        if (element.roundness) {
-          const w = element.width;
-          const h = element.height;
-          const r = getCornerRadius(Math.min(w, h), element);
-          shape = generator.path(
-            `M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${
-              h - r
-            } Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${
-              h - r
-            } L 0 ${r} Q 0 0, ${r} 0`,
-            generateRoughOptions(
-              modifyEmbeddableForRoughOptions(element, isExporting),
-              true,
-            ),
-          );
-        } else {
-          shape = generator.rectangle(
-            0,
-            0,
-            element.width,
-            element.height,
-            generateRoughOptions(
-              modifyEmbeddableForRoughOptions(element, isExporting),
-              false,
-            ),
-          );
-        }
-        setShapeForElement(element, shape);
-
-        break;
-      }
-      case "diamond": {
-        const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
-          getDiamondPoints(element);
-        if (element.roundness) {
-          const verticalRadius = getCornerRadius(
-            Math.abs(topX - leftX),
-            element,
-          );
-
-          const horizontalRadius = getCornerRadius(
-            Math.abs(rightY - topY),
-            element,
-          );
-
-          shape = generator.path(
-            `M ${topX + verticalRadius} ${topY + horizontalRadius} L ${
-              rightX - verticalRadius
-            } ${rightY - horizontalRadius}
-            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${
-              rightX - verticalRadius
-            } ${rightY + horizontalRadius}
-            L ${bottomX + verticalRadius} ${bottomY - horizontalRadius}
-            C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${
-              bottomX - verticalRadius
-            } ${bottomY - horizontalRadius}
-            L ${leftX + verticalRadius} ${leftY + horizontalRadius}
-            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${
-              leftY - horizontalRadius
-            }
-            L ${topX - verticalRadius} ${topY + horizontalRadius}
-            C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${
-              topY + horizontalRadius
-            }`,
-            generateRoughOptions(element, true),
-          );
-        } else {
-          shape = generator.polygon(
-            [
-              [topX, topY],
-              [rightX, rightY],
-              [bottomX, bottomY],
-              [leftX, leftY],
-            ],
-            generateRoughOptions(element),
-          );
-        }
-        setShapeForElement(element, shape);
-
-        break;
-      }
-      case "ellipse":
-        shape = generator.ellipse(
-          element.width / 2,
-          element.height / 2,
-          element.width,
-          element.height,
-          generateRoughOptions(element),
-        );
-        setShapeForElement(element, shape);
-
-        break;
-      case "line":
-      case "arrow": {
-        const options = generateRoughOptions(element);
-
-        // points array can be empty in the beginning, so it is important to add
-        // initial position to it
-        const points = element.points.length ? element.points : [[0, 0]];
-
-        // curve is always the first element
-        // this simplifies finding the curve for an element
-        if (!element.roundness) {
-          if (options.fill) {
-            shape = [generator.polygon(points as [number, number][], options)];
-          } else {
-            shape = [
-              generator.linearPath(points as [number, number][], options),
-            ];
-          }
-        } else {
-          shape = [generator.curve(points as [number, number][], options)];
-        }
-
-        // add lines only in arrow
-        if (element.type === "arrow") {
-          const { startArrowhead = null, endArrowhead = "arrow" } = element;
-
-          const getArrowheadShapes = (
-            element: ExcalidrawLinearElement,
-            shape: Drawable[],
-            position: "start" | "end",
-            arrowhead: Arrowhead,
-          ) => {
-            const arrowheadPoints = getArrowheadPoints(
-              element,
-              shape,
-              position,
-              arrowhead,
-            );
-
-            if (arrowheadPoints === null) {
-              return [];
-            }
-
-            // Other arrowheads here...
-            if (arrowhead === "dot") {
-              const [x, y, r] = arrowheadPoints;
-
-              return [
-                generator.circle(x, y, r, {
-                  ...options,
-                  fill: element.strokeColor,
-                  fillStyle: "solid",
-                  stroke: "none",
-                }),
-              ];
-            }
-
-            if (arrowhead === "triangle") {
-              const [x, y, x2, y2, x3, y3] = arrowheadPoints;
-
-              // always use solid stroke for triangle arrowhead
-              delete options.strokeLineDash;
-
-              return [
-                generator.polygon(
-                  [
-                    [x, y],
-                    [x2, y2],
-                    [x3, y3],
-                    [x, y],
-                  ],
-                  {
-                    ...options,
-                    fill: element.strokeColor,
-                    fillStyle: "solid",
-                  },
-                ),
-              ];
-            }
-
-            // Arrow arrowheads
-            const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-
-            if (element.strokeStyle === "dotted") {
-              // for dotted arrows caps, reduce gap to make it more legible
-              const dash = getDashArrayDotted(element.strokeWidth - 1);
-              options.strokeLineDash = [dash[0], dash[1] - 1];
-            } else {
-              // for solid/dashed, keep solid arrow cap
-              delete options.strokeLineDash;
-            }
-            return [
-              generator.line(x3, y3, x2, y2, options),
-              generator.line(x4, y4, x2, y2, options),
-            ];
-          };
-
-          if (startArrowhead !== null) {
-            const shapes = getArrowheadShapes(
-              element,
-              shape,
-              "start",
-              startArrowhead,
-            );
-            shape.push(...shapes);
-          }
-
-          if (endArrowhead !== null) {
-            if (endArrowhead === undefined) {
-              // Hey, we have an old arrow here!
-            }
-
-            const shapes = getArrowheadShapes(
-              element,
-              shape,
-              "end",
-              endArrowhead,
-            );
-            shape.push(...shapes);
-          }
-        }
-
-        setShapeForElement(element, shape);
-
-        break;
-      }
-      case "freedraw": {
-        generateFreeDrawShape(element);
-
-        if (isPathALoop(element.points)) {
-          // generate rough polygon to fill freedraw shape
-          shape = generator.polygon(element.points as [number, number][], {
-            ...generateRoughOptions(element),
-            stroke: "none",
-          });
-        } else {
-          shape = null;
-        }
-        setShapeForElement(element, shape);
-        break;
-      }
-      case "text":
-      case "image": {
-        // just to ensure we don't regenerate element.canvas on rerenders
-        setShapeForElement(element, null);
-        break;
-      }
-    }
-  }
-};
-
 const generateElementWithCanvas = (
   element: NonDeletedExcalidrawElement,
-  renderConfig: RenderConfig,
+  renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState,
 ) => {
-  const zoom: Zoom = renderConfig ? renderConfig.zoom : defaultAppState.zoom;
+  const zoom: Zoom = renderConfig ? appState.zoom : defaultAppState.zoom;
   const prevElementWithCanvas = elementWithCanvasCache.get(element);
   const shouldRegenerateBecauseZoom =
     prevElementWithCanvas &&
     prevElementWithCanvas.zoomValue !== zoom.value &&
-    !renderConfig?.shouldCacheIgnoreZoom;
+    !appState?.shouldCacheIgnoreZoom;
   const boundTextElementVersion = getBoundTextElement(element)?.version || null;
   const containingFrameOpacity = getContainingFrame(element)?.opacity || 100;
 
   if (
     !prevElementWithCanvas ||
     shouldRegenerateBecauseZoom ||
-    prevElementWithCanvas.theme !== renderConfig.theme ||
+    prevElementWithCanvas.theme !== appState.theme ||
     prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
     prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity
   ) {
@@ -779,6 +397,7 @@ const generateElementWithCanvas = (
       element,
       zoom,
       renderConfig,
+      appState,
     );
 
     elementWithCanvasCache.set(element, elementWithCanvas);
@@ -790,9 +409,9 @@ const generateElementWithCanvas = (
 
 const drawElementFromCanvas = (
   elementWithCanvas: ExcalidrawElementWithCanvas,
-  rc: RoughCanvas,
   context: CanvasRenderingContext2D,
-  renderConfig: RenderConfig,
+  renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState,
 ) => {
   const element = elementWithCanvas.element;
   const padding = getCanvasPadding(element);
@@ -807,8 +426,8 @@ const drawElementFromCanvas = (
     y2 = Math.ceil(y2);
   }
 
-  const cx = ((x1 + x2) / 2 + renderConfig.scrollX) * window.devicePixelRatio;
-  const cy = ((y1 + y2) / 2 + renderConfig.scrollY) * window.devicePixelRatio;
+  const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
+  const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
 
   context.save();
   context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
@@ -906,9 +525,9 @@ const drawElementFromCanvas = (
 
     context.drawImage(
       elementWithCanvas.canvas!,
-      (x1 + renderConfig.scrollX) * window.devicePixelRatio -
+      (x1 + appState.scrollX) * window.devicePixelRatio -
         (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
-      (y1 + renderConfig.scrollY) * window.devicePixelRatio -
+      (y1 + appState.scrollY) * window.devicePixelRatio -
         (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
       elementWithCanvas.canvas!.width / elementWithCanvas.scale,
       elementWithCanvas.canvas!.height / elementWithCanvas.scale,
@@ -926,8 +545,8 @@ const drawElementFromCanvas = (
       context.strokeStyle = "#c92a2a";
       context.lineWidth = 3;
       context.strokeRect(
-        (coords.x + renderConfig.scrollX) * window.devicePixelRatio,
-        (coords.y + renderConfig.scrollY) * window.devicePixelRatio,
+        (coords.x + appState.scrollX) * window.devicePixelRatio,
+        (coords.y + appState.scrollY) * window.devicePixelRatio,
         getBoundTextMaxWidth(element) * window.devicePixelRatio,
         getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio,
       );
@@ -938,40 +557,37 @@ const drawElementFromCanvas = (
   // Clear the nested element we appended to the DOM
 };
 
+export const renderSelectionElement = (
+  element: NonDeletedExcalidrawElement,
+  context: CanvasRenderingContext2D,
+  appState: InteractiveCanvasAppState,
+) => {
+  context.save();
+  context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
+  context.fillStyle = "rgba(0, 0, 200, 0.04)";
+
+  // render from 0.5px offset  to get 1px wide line
+  // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
+  // TODO can be be improved by offseting to the negative when user selects
+  // from right to left
+  const offset = 0.5 / appState.zoom.value;
+
+  context.fillRect(offset, offset, element.width, element.height);
+  context.lineWidth = 1 / appState.zoom.value;
+  context.strokeStyle = " rgb(105, 101, 219)";
+  context.strokeRect(offset, offset, element.width, element.height);
+
+  context.restore();
+};
+
 export const renderElement = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
   context: CanvasRenderingContext2D,
-  renderConfig: RenderConfig,
-  appState: AppState,
+  renderConfig: StaticCanvasRenderConfig,
+  appState: StaticCanvasAppState,
 ) => {
-  const generator = rc.generator;
   switch (element.type) {
-    case "selection": {
-      // do not render selection when exporting
-      if (!renderConfig.isExporting) {
-        context.save();
-        context.translate(
-          element.x + renderConfig.scrollX,
-          element.y + renderConfig.scrollY,
-        );
-        context.fillStyle = "rgba(0, 0, 200, 0.04)";
-
-        // render from 0.5px offset  to get 1px wide line
-        // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
-        // TODO can be be improved by offseting to the negative when user selects
-        // from right to left
-        const offset = 0.5 / renderConfig.zoom.value;
-
-        context.fillRect(offset, offset, element.width, element.height);
-        context.lineWidth = 1 / renderConfig.zoom.value;
-        context.strokeStyle = " rgb(105, 101, 219)";
-        context.strokeRect(offset, offset, element.width, element.height);
-
-        context.restore();
-      }
-      break;
-    }
     case "frame": {
       if (
         !renderConfig.isExporting &&
@@ -980,12 +596,12 @@ export const renderElement = (
       ) {
         context.save();
         context.translate(
-          element.x + renderConfig.scrollX,
-          element.y + renderConfig.scrollY,
+          element.x + appState.scrollX,
+          element.y + appState.scrollY,
         );
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
-        context.lineWidth = 2 / renderConfig.zoom.value;
+        context.lineWidth = 2 / appState.zoom.value;
         context.strokeStyle = FRAME_STYLE.strokeColor;
 
         if (FRAME_STYLE.radius && context.roundRect) {
@@ -995,7 +611,7 @@ export const renderElement = (
             0,
             element.width,
             element.height,
-            FRAME_STYLE.radius / renderConfig.zoom.value,
+            FRAME_STYLE.radius / appState.zoom.value,
           );
           context.stroke();
           context.closePath();
@@ -1008,26 +624,35 @@ export const renderElement = (
       break;
     }
     case "freedraw": {
-      generateElementShape(element, generator);
+      // TODO investigate if we can do this in situ. Right now we need to call
+      // beforehand because math helpers (such as getElementAbsoluteCoords)
+      // rely on existing shapes
+      ShapeCache.generateElementShape(element);
 
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-        const cx = (x1 + x2) / 2 + renderConfig.scrollX;
-        const cy = (y1 + y2) / 2 + renderConfig.scrollY;
+        const cx = (x1 + x2) / 2 + appState.scrollX;
+        const cy = (y1 + y2) / 2 + appState.scrollY;
         const shiftX = (x2 - x1) / 2 - (element.x - x1);
         const shiftY = (y2 - y1) / 2 - (element.y - y1);
         context.save();
         context.translate(cx, cy);
         context.rotate(element.angle);
         context.translate(-shiftX, -shiftY);
-        drawElementOnCanvas(element, rc, context, renderConfig);
+        drawElementOnCanvas(element, rc, context, renderConfig, appState);
         context.restore();
       } else {
         const elementWithCanvas = generateElementWithCanvas(
           element,
           renderConfig,
+          appState,
+        );
+        drawElementFromCanvas(
+          elementWithCanvas,
+          context,
+          renderConfig,
+          appState,
         );
-        drawElementFromCanvas(elementWithCanvas, rc, context, renderConfig);
       }
 
       break;
@@ -1040,11 +665,14 @@ export const renderElement = (
     case "image":
     case "text":
     case "embeddable": {
-      generateElementShape(element, generator, renderConfig.isExporting);
+      // TODO investigate if we can do this in situ. Right now we need to call
+      // beforehand because math helpers (such as getElementAbsoluteCoords)
+      // rely on existing shapes
+      ShapeCache.generateElementShape(element, renderConfig.isExporting);
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-        const cx = (x1 + x2) / 2 + renderConfig.scrollX;
-        const cy = (y1 + y2) / 2 + renderConfig.scrollY;
+        const cx = (x1 + x2) / 2 + appState.scrollX;
+        const cy = (y1 + y2) / 2 + appState.scrollY;
         let shiftX = (x2 - x1) / 2 - (element.x - x1);
         let shiftY = (y2 - y1) / 2 - (element.y - y1);
         if (isTextElement(element)) {
@@ -1062,7 +690,7 @@ export const renderElement = (
         context.save();
         context.translate(cx, cy);
 
-        if (shouldResetImageFilter(element, renderConfig)) {
+        if (shouldResetImageFilter(element, renderConfig, appState)) {
           context.filter = "none";
         }
         const boundTextElement = getBoundTextElement(element);
@@ -1096,7 +724,13 @@ export const renderElement = (
 
           tempCanvasContext.translate(-shiftX, -shiftY);
 
-          drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
+          drawElementOnCanvas(
+            element,
+            tempRc,
+            tempCanvasContext,
+            renderConfig,
+            appState,
+          );
 
           tempCanvasContext.translate(shiftX, shiftY);
 
@@ -1133,7 +767,7 @@ export const renderElement = (
           }
 
           context.translate(-shiftX, -shiftY);
-          drawElementOnCanvas(element, rc, context, renderConfig);
+          drawElementOnCanvas(element, rc, context, renderConfig, appState);
         }
 
         context.restore();
@@ -1143,6 +777,7 @@ export const renderElement = (
         const elementWithCanvas = generateElementWithCanvas(
           element,
           renderConfig,
+          appState,
         );
 
         const currentImageSmoothingStatus = context.imageSmoothingEnabled;
@@ -1150,7 +785,7 @@ export const renderElement = (
         if (
           // do not disable smoothing during zoom as blurry shapes look better
           // on low resolution (while still zooming in) than sharp ones
-          !renderConfig?.shouldCacheIgnoreZoom &&
+          !appState?.shouldCacheIgnoreZoom &&
           // angle is 0 -> always disable smoothing
           (!element.angle ||
             // or check if angle is a right angle in which case we can still
@@ -1167,7 +802,12 @@ export const renderElement = (
           context.imageSmoothingEnabled = false;
         }
 
-        drawElementFromCanvas(elementWithCanvas, rc, context, renderConfig);
+        drawElementFromCanvas(
+          elementWithCanvas,
+          context,
+          renderConfig,
+          appState,
+        );
 
         // reset
         context.imageSmoothingEnabled = currentImageSmoothingStatus;
@@ -1245,7 +885,6 @@ export const renderElementToSvg = (
     }
   }
   const degree = (180 * element.angle) / Math.PI;
-  const generator = rsvg.generator;
 
   // element to append node to, most of the time svgRoot
   let root = svgRoot;
@@ -1270,10 +909,10 @@ export const renderElementToSvg = (
     case "rectangle":
     case "diamond":
     case "ellipse": {
-      generateElementShape(element, generator);
+      const shape = ShapeCache.generateElementShape(element);
       const node = roughSVGDrawWithPrecision(
         rsvg,
-        getShapeForElement(element)!,
+        shape,
         MAX_DECIMALS_FOR_SVG_EXPORT,
       );
       if (opacity !== 1) {
@@ -1300,10 +939,10 @@ export const renderElementToSvg = (
     }
     case "embeddable": {
       // render placeholder rectangle
-      generateElementShape(element, generator, true);
+      const shape = ShapeCache.generateElementShape(element, true);
       const node = roughSVGDrawWithPrecision(
         rsvg,
-        getShapeForElement(element)!,
+        shape,
         MAX_DECIMALS_FOR_SVG_EXPORT,
       );
       const opacity = element.opacity / 100;
@@ -1337,7 +976,7 @@ export const renderElementToSvg = (
       // render embeddable element + iframe
       const embeddableNode = roughSVGDrawWithPrecision(
         rsvg,
-        getShapeForElement(element)!,
+        shape,
         MAX_DECIMALS_FOR_SVG_EXPORT,
       );
       embeddableNode.setAttribute("stroke-linecap", "round");
@@ -1443,14 +1082,14 @@ export const renderElementToSvg = (
         maskRectInvisible.setAttribute("opacity", "1");
         maskPath.appendChild(maskRectInvisible);
       }
-      generateElementShape(element, generator);
       const group = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
       if (boundText) {
         group.setAttribute("mask", `url(#mask-${element.id})`);
       }
       group.setAttribute("stroke-linecap", "round");
 
-      getShapeForElement(element)!.forEach((shape) => {
+      const shapes = ShapeCache.generateElementShape(element);
+      shapes.forEach((shape) => {
         const node = roughSVGDrawWithPrecision(
           rsvg,
           shape,
@@ -1491,11 +1130,13 @@ export const renderElementToSvg = (
       break;
     }
     case "freedraw": {
-      generateElementShape(element, generator);
-      generateFreeDrawShape(element);
-      const shape = getShapeForElement(element);
-      const node = shape
-        ? roughSVGDrawWithPrecision(rsvg, shape, MAX_DECIMALS_FOR_SVG_EXPORT)
+      const backgroundFillShape = ShapeCache.generateElementShape(element);
+      const node = backgroundFillShape
+        ? roughSVGDrawWithPrecision(
+            rsvg,
+            backgroundFillShape,
+            MAX_DECIMALS_FOR_SVG_EXPORT,
+          )
         : svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
       if (opacity !== 1) {
         node.setAttribute("stroke-opacity", `${opacity}`);

src/scene/Fonts.ts

@@ -2,9 +2,9 @@ import { isTextElement, refreshTextDimensions } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { isBoundToContainer } from "../element/typeChecks";
 import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
-import { invalidateShapeForElement } from "../renderer/renderElement";
 import { getFontString } from "../utils";
 import type Scene from "./Scene";
+import { ShapeCache } from "./ShapeCache";
 
 export class Fonts {
   private scene: Scene;
@@ -54,7 +54,7 @@ export class Fonts {
 
     this.scene.mapElements((element) => {
       if (isTextElement(element) && !isBoundToContainer(element)) {
-        invalidateShapeForElement(element);
+        ShapeCache.delete(element);
         didUpdate = true;
         return newElementWith(element, {
           ...refreshTextDimensions(element),

src/scene/Renderer.ts

@@ -0,0 +1,131 @@
+import { isElementInViewport } from "../element/sizeHelpers";
+import { isImageElement } from "../element/typeChecks";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { cancelRender } from "../renderer/renderScene";
+import { AppState } from "../types";
+import { memoize } from "../utils";
+import Scene from "./Scene";
+
+export class Renderer {
+  private scene: Scene;
+
+  constructor(scene: Scene) {
+    this.scene = scene;
+  }
+
+  public getRenderableElements = (() => {
+    const getVisibleCanvasElements = ({
+      elements,
+      zoom,
+      offsetLeft,
+      offsetTop,
+      scrollX,
+      scrollY,
+      height,
+      width,
+    }: {
+      elements: readonly NonDeletedExcalidrawElement[];
+      zoom: AppState["zoom"];
+      offsetLeft: AppState["offsetLeft"];
+      offsetTop: AppState["offsetTop"];
+      scrollX: AppState["scrollX"];
+      scrollY: AppState["scrollY"];
+      height: AppState["height"];
+      width: AppState["width"];
+    }): readonly NonDeletedExcalidrawElement[] => {
+      return elements.filter((element) =>
+        isElementInViewport(element, width, height, {
+          zoom,
+          offsetLeft,
+          offsetTop,
+          scrollX,
+          scrollY,
+        }),
+      );
+    };
+
+    const getCanvasElements = ({
+      editingElement,
+      elements,
+      pendingImageElementId,
+    }: {
+      elements: readonly NonDeletedExcalidrawElement[];
+      editingElement: AppState["editingElement"];
+      pendingImageElementId: AppState["pendingImageElementId"];
+    }) => {
+      return elements.filter((element) => {
+        if (isImageElement(element)) {
+          if (
+            // => not placed on canvas yet (but in elements array)
+            pendingImageElementId === element.id
+          ) {
+            return false;
+          }
+        }
+        // we don't want to render text element that's being currently edited
+        // (it's rendered on remote only)
+        return (
+          !editingElement ||
+          editingElement.type !== "text" ||
+          element.id !== editingElement.id
+        );
+      });
+    };
+
+    return memoize(
+      ({
+        zoom,
+        offsetLeft,
+        offsetTop,
+        scrollX,
+        scrollY,
+        height,
+        width,
+        editingElement,
+        pendingImageElementId,
+        // unused but serves we cache on it to invalidate elements if they
+        // get mutated
+        versionNonce: _versionNonce,
+      }: {
+        zoom: AppState["zoom"];
+        offsetLeft: AppState["offsetLeft"];
+        offsetTop: AppState["offsetTop"];
+        scrollX: AppState["scrollX"];
+        scrollY: AppState["scrollY"];
+        height: AppState["height"];
+        width: AppState["width"];
+        editingElement: AppState["editingElement"];
+        pendingImageElementId: AppState["pendingImageElementId"];
+        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
+      }) => {
+        const elements = this.scene.getNonDeletedElements();
+
+        const canvasElements = getCanvasElements({
+          elements,
+          editingElement,
+          pendingImageElementId,
+        });
+
+        const visibleElements = getVisibleCanvasElements({
+          elements: canvasElements,
+          zoom,
+          offsetLeft,
+          offsetTop,
+          scrollX,
+          scrollY,
+          height,
+          width,
+        });
+
+        return { canvasElements, visibleElements };
+      },
+    );
+  })();
+
+  // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
+  // safe to break TS contract here (for upstream cases)
+  public destroy() {
+    cancelRender();
+    this.getRenderableElements.clear();
+  }
+}

src/scene/Scene.ts

@@ -14,6 +14,7 @@ import { isFrameElement } from "../element/typeChecks";
 import { getSelectedElements } from "./selection";
 import { AppState } from "../types";
 import { Assert, SameType } from "../utility-types";
+import { randomInteger } from "../random";
 
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
@@ -35,7 +36,7 @@ const hashSelectionOpts = (
   type _ = Assert<
     SameType<
       Required<HashableKeys>,
-      Pick<Required<HashableKeys>, typeof keys[number]>
+      Pick<Required<HashableKeys>, (typeof keys)[number]>
     >
   >;
 
@@ -105,6 +106,7 @@ class Scene {
     elements: null,
     cache: new Map(),
   };
+  private versionNonce: number | undefined;
 
   getElementsIncludingDeleted() {
     return this.elements;
@@ -172,6 +174,10 @@ class Scene {
     return (this.elementsMap.get(id) as T | undefined) || null;
   }
 
+  getVersionNonce() {
+    return this.versionNonce;
+  }
+
   getNonDeletedElement(
     id: ExcalidrawElement["id"],
   ): NonDeleted<ExcalidrawElement> | null {
@@ -230,6 +236,8 @@ class Scene {
   }
 
   informMutation() {
+    this.versionNonce = randomInteger();
+
     for (const callback of Array.from(this.callbacks)) {
       callback();
     }

src/scene/Shape.ts

@@ -0,0 +1,362 @@
+import type { Drawable, Options } from "roughjs/bin/core";
+import type { RoughGenerator } from "roughjs/bin/generator";
+import { getDiamondPoints, getArrowheadPoints } from "../element";
+import type { ElementShapes } from "./types";
+import type {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  ExcalidrawSelectionElement,
+  ExcalidrawLinearElement,
+  Arrowhead,
+} from "../element/types";
+import { isPathALoop, getCornerRadius } from "../math";
+import { generateFreeDrawShape } from "../renderer/renderElement";
+import { isTransparent, assertNever } from "../utils";
+
+const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
+
+const getDashArrayDotted = (strokeWidth: number) => [1.5, 6 + strokeWidth];
+
+export const generateRoughOptions = (
+  element: ExcalidrawElement,
+  continuousPath = false,
+): Options => {
+  const options: Options = {
+    seed: element.seed,
+    strokeLineDash:
+      element.strokeStyle === "dashed"
+        ? getDashArrayDashed(element.strokeWidth)
+        : element.strokeStyle === "dotted"
+        ? getDashArrayDotted(element.strokeWidth)
+        : undefined,
+    // for non-solid strokes, disable multiStroke because it tends to make
+    // dashes/dots overlay each other
+    disableMultiStroke: element.strokeStyle !== "solid",
+    // for non-solid strokes, increase the width a bit to make it visually
+    // similar to solid strokes, because we're also disabling multiStroke
+    strokeWidth:
+      element.strokeStyle !== "solid"
+        ? element.strokeWidth + 0.5
+        : element.strokeWidth,
+    // when increasing strokeWidth, we must explicitly set fillWeight and
+    // hachureGap because if not specified, roughjs uses strokeWidth to
+    // calculate them (and we don't want the fills to be modified)
+    fillWeight: element.strokeWidth / 2,
+    hachureGap: element.strokeWidth * 4,
+    roughness: element.roughness,
+    stroke: element.strokeColor,
+    preserveVertices: continuousPath,
+  };
+
+  switch (element.type) {
+    case "rectangle":
+    case "embeddable":
+    case "diamond":
+    case "ellipse": {
+      options.fillStyle = element.fillStyle;
+      options.fill = isTransparent(element.backgroundColor)
+        ? undefined
+        : element.backgroundColor;
+      if (element.type === "ellipse") {
+        options.curveFitting = 1;
+      }
+      return options;
+    }
+    case "line":
+    case "freedraw": {
+      if (isPathALoop(element.points)) {
+        options.fillStyle = element.fillStyle;
+        options.fill =
+          element.backgroundColor === "transparent"
+            ? undefined
+            : element.backgroundColor;
+      }
+      return options;
+    }
+    case "arrow":
+      return options;
+    default: {
+      throw new Error(`Unimplemented type ${element.type}`);
+    }
+  }
+};
+
+const modifyEmbeddableForRoughOptions = (
+  element: NonDeletedExcalidrawElement,
+  isExporting: boolean,
+) => {
+  if (
+    element.type === "embeddable" &&
+    (isExporting || !element.validated) &&
+    isTransparent(element.backgroundColor) &&
+    isTransparent(element.strokeColor)
+  ) {
+    return {
+      ...element,
+      roughness: 0,
+      backgroundColor: "#d3d3d3",
+      fillStyle: "solid",
+    } as const;
+  }
+  return element;
+};
+
+/**
+ * Generates the roughjs shape for given element.
+ *
+ * Low-level. Use `ShapeCache.generateElementShape` instead.
+ *
+ * @private
+ */
+export const _generateElementShape = (
+  element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>,
+  generator: RoughGenerator,
+  isExporting: boolean = false,
+): Drawable | Drawable[] | null => {
+  switch (element.type) {
+    case "rectangle":
+    case "embeddable": {
+      let shape: ElementShapes[typeof element.type];
+      // this is for rendering the stroke/bg of the embeddable, especially
+      // when the src url is not set
+
+      if (element.roundness) {
+        const w = element.width;
+        const h = element.height;
+        const r = getCornerRadius(Math.min(w, h), element);
+        shape = generator.path(
+          `M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${
+            h - r
+          } Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${
+            h - r
+          } L 0 ${r} Q 0 0, ${r} 0`,
+          generateRoughOptions(
+            modifyEmbeddableForRoughOptions(element, isExporting),
+            true,
+          ),
+        );
+      } else {
+        shape = generator.rectangle(
+          0,
+          0,
+          element.width,
+          element.height,
+          generateRoughOptions(
+            modifyEmbeddableForRoughOptions(element, isExporting),
+            false,
+          ),
+        );
+      }
+      return shape;
+    }
+    case "diamond": {
+      let shape: ElementShapes[typeof element.type];
+
+      const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
+        getDiamondPoints(element);
+      if (element.roundness) {
+        const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
+
+        const horizontalRadius = getCornerRadius(
+          Math.abs(rightY - topY),
+          element,
+        );
+
+        shape = generator.path(
+          `M ${topX + verticalRadius} ${topY + horizontalRadius} L ${
+            rightX - verticalRadius
+          } ${rightY - horizontalRadius}
+            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${
+              rightX - verticalRadius
+            } ${rightY + horizontalRadius}
+            L ${bottomX + verticalRadius} ${bottomY - horizontalRadius}
+            C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${
+              bottomX - verticalRadius
+            } ${bottomY - horizontalRadius}
+            L ${leftX + verticalRadius} ${leftY + horizontalRadius}
+            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${
+              leftY - horizontalRadius
+            }
+            L ${topX - verticalRadius} ${topY + horizontalRadius}
+            C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${
+              topY + horizontalRadius
+            }`,
+          generateRoughOptions(element, true),
+        );
+      } else {
+        shape = generator.polygon(
+          [
+            [topX, topY],
+            [rightX, rightY],
+            [bottomX, bottomY],
+            [leftX, leftY],
+          ],
+          generateRoughOptions(element),
+        );
+      }
+      return shape;
+    }
+    case "ellipse": {
+      const shape: ElementShapes[typeof element.type] = generator.ellipse(
+        element.width / 2,
+        element.height / 2,
+        element.width,
+        element.height,
+        generateRoughOptions(element),
+      );
+      return shape;
+    }
+    case "line":
+    case "arrow": {
+      let shape: ElementShapes[typeof element.type];
+      const options = generateRoughOptions(element);
+
+      // points array can be empty in the beginning, so it is important to add
+      // initial position to it
+      const points = element.points.length ? element.points : [[0, 0]];
+
+      // curve is always the first element
+      // this simplifies finding the curve for an element
+      if (!element.roundness) {
+        if (options.fill) {
+          shape = [generator.polygon(points as [number, number][], options)];
+        } else {
+          shape = [generator.linearPath(points as [number, number][], options)];
+        }
+      } else {
+        shape = [generator.curve(points as [number, number][], options)];
+      }
+
+      // add lines only in arrow
+      if (element.type === "arrow") {
+        const { startArrowhead = null, endArrowhead = "arrow" } = element;
+
+        const getArrowheadShapes = (
+          element: ExcalidrawLinearElement,
+          shape: Drawable[],
+          position: "start" | "end",
+          arrowhead: Arrowhead,
+        ) => {
+          const arrowheadPoints = getArrowheadPoints(
+            element,
+            shape,
+            position,
+            arrowhead,
+          );
+
+          if (arrowheadPoints === null) {
+            return [];
+          }
+
+          // Other arrowheads here...
+          if (arrowhead === "dot") {
+            const [x, y, r] = arrowheadPoints;
+
+            return [
+              generator.circle(x, y, r, {
+                ...options,
+                fill: element.strokeColor,
+                fillStyle: "solid",
+                stroke: "none",
+              }),
+            ];
+          }
+
+          if (arrowhead === "triangle") {
+            const [x, y, x2, y2, x3, y3] = arrowheadPoints;
+
+            // always use solid stroke for triangle arrowhead
+            delete options.strokeLineDash;
+
+            return [
+              generator.polygon(
+                [
+                  [x, y],
+                  [x2, y2],
+                  [x3, y3],
+                  [x, y],
+                ],
+                {
+                  ...options,
+                  fill: element.strokeColor,
+                  fillStyle: "solid",
+                },
+              ),
+            ];
+          }
+
+          // Arrow arrowheads
+          const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+
+          if (element.strokeStyle === "dotted") {
+            // for dotted arrows caps, reduce gap to make it more legible
+            const dash = getDashArrayDotted(element.strokeWidth - 1);
+            options.strokeLineDash = [dash[0], dash[1] - 1];
+          } else {
+            // for solid/dashed, keep solid arrow cap
+            delete options.strokeLineDash;
+          }
+          return [
+            generator.line(x3, y3, x2, y2, options),
+            generator.line(x4, y4, x2, y2, options),
+          ];
+        };
+
+        if (startArrowhead !== null) {
+          const shapes = getArrowheadShapes(
+            element,
+            shape,
+            "start",
+            startArrowhead,
+          );
+          shape.push(...shapes);
+        }
+
+        if (endArrowhead !== null) {
+          if (endArrowhead === undefined) {
+            // Hey, we have an old arrow here!
+          }
+
+          const shapes = getArrowheadShapes(
+            element,
+            shape,
+            "end",
+            endArrowhead,
+          );
+          shape.push(...shapes);
+        }
+      }
+      return shape;
+    }
+    case "freedraw": {
+      let shape: ElementShapes[typeof element.type];
+      generateFreeDrawShape(element);
+
+      if (isPathALoop(element.points)) {
+        // generate rough polygon to fill freedraw shape
+        shape = generator.polygon(element.points as [number, number][], {
+          ...generateRoughOptions(element),
+          stroke: "none",
+        });
+      } else {
+        shape = null;
+      }
+      return shape;
+    }
+    case "frame":
+    case "text":
+    case "image": {
+      const shape: ElementShapes[typeof element.type] = null;
+      // we return (and cache) `null` to make sure we don't regenerate
+      // `element.canvas` on rerenders
+      return shape;
+    }
+    default: {
+      assertNever(
+        element,
+        `generateElementShape(): Unimplemented type ${(element as any)?.type}`,
+      );
+      return null;
+    }
+  }
+};

src/scene/ShapeCache.ts

@@ -0,0 +1,74 @@
+import { Drawable } from "roughjs/bin/core";
+import { RoughGenerator } from "roughjs/bin/generator";
+import {
+  ExcalidrawElement,
+  ExcalidrawSelectionElement,
+} from "../element/types";
+import { elementWithCanvasCache } from "../renderer/renderElement";
+import { _generateElementShape } from "./Shape";
+import { ElementShape, ElementShapes } from "./types";
+
+export class ShapeCache {
+  private static rg = new RoughGenerator();
+  private static cache = new WeakMap<ExcalidrawElement, ElementShape>();
+
+  /**
+   * Retrieves shape from cache if available. Use this only if shape
+   * is optional and you have a fallback in case it's not cached.
+   */
+  public static get = <T extends ExcalidrawElement>(element: T) => {
+    return ShapeCache.cache.get(
+      element,
+    ) as T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]] | undefined
+      : ElementShape | undefined;
+  };
+
+  public static set = <T extends ExcalidrawElement>(
+    element: T,
+    shape: T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]]
+      : Drawable,
+  ) => ShapeCache.cache.set(element, shape);
+
+  public static delete = (element: ExcalidrawElement) =>
+    ShapeCache.cache.delete(element);
+
+  public static destroy = () => {
+    ShapeCache.cache = new WeakMap();
+  };
+
+  /**
+   * Generates & caches shape for element if not already cached, otherwise
+   * returns cached shape.
+   */
+  public static generateElementShape = <
+    T extends Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
+  >(
+    element: T,
+    isExporting = false,
+  ) => {
+    // when exporting, always regenerated to guarantee the latest shape
+    const cachedShape = isExporting ? undefined : ShapeCache.get(element);
+
+    // `null` indicates no rc shape applicable for this element type,
+    // but it's considered a valid cache value (= do not regenerate)
+    if (cachedShape !== undefined) {
+      return cachedShape;
+    }
+
+    elementWithCanvasCache.delete(element);
+
+    const shape = _generateElementShape(
+      element,
+      ShapeCache.rg,
+      isExporting,
+    ) as T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]]
+      : Drawable | null;
+
+    ShapeCache.cache.set(element, shape);
+
+    return shape;
+  };
+}

src/scene/export.ts

@@ -1,7 +1,7 @@
 import rough from "roughjs/bin/rough";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
-import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
+import { renderSceneToSvg, renderStaticScene } from "../renderer/renderScene";
 import { distance, isOnlyExportingSingleFrame } from "../utils";
 import { AppState, BinaryFiles } from "../types";
 import { DEFAULT_EXPORT_PADDING, SVG_NS, THEME_FILTER } from "../constants";
@@ -54,26 +54,23 @@ export const exportToCanvas = async (
 
   const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
 
-  renderScene({
-    elements,
-    appState,
-    scale,
-    rc: rough.canvas(canvas),
+  renderStaticScene({
     canvas,
-    renderConfig: {
+    rc: rough.canvas(canvas),
+    elements,
+    visibleElements: elements,
+    scale,
+    appState: {
+      ...appState,
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
       scrollX: -minX + (onlyExportingSingleFrame ? 0 : exportPadding),
       scrollY: -minY + (onlyExportingSingleFrame ? 0 : exportPadding),
       zoom: defaultAppState.zoom,
-      remotePointerViewportCoords: {},
-      remoteSelectedElementIds: {},
       shouldCacheIgnoreZoom: false,
-      remotePointerUsernames: {},
-      remotePointerUserStates: {},
       theme: appState.exportWithDarkMode ? "dark" : "light",
+    },
+    renderConfig: {
       imageCache,
-      renderScrollbars: false,
-      renderSelection: false,
       renderGrid: false,
       isExporting: true,
     },
@@ -170,8 +167,8 @@ export const exportToSvg = async (
 
     exportingFrameClipPath = `<clipPath id=${exportingFrame.id}>
             <rect transform="translate(${exportingFrame.x + offsetX} ${
-      exportingFrame.y + offsetY
-    }) rotate(${exportingFrame.angle} ${cx} ${cy})"
+              exportingFrame.y + offsetY
+            }) rotate(${exportingFrame.angle} ${cx} ${cy})"
           width="${exportingFrame.width}"
           height="${exportingFrame.height}"
           >
@@ -238,10 +235,13 @@ const getCanvasSize = (
   if (!isExportingWholeCanvas || onlyExportingSingleFrame) {
     const frames = elements.filter((element) => element.type === "frame");
 
-    const exportedFrameIds = frames.reduce((acc, frame) => {
-      acc[frame.id] = true;
-      return acc;
-    }, {} as Record<string, true>);
+    const exportedFrameIds = frames.reduce(
+      (acc, frame) => {
+        acc[frame.id] = true;
+        return acc;
+      },
+      {} as Record<string, true>,
+    );
 
     // elements in a frame do not affect the canvas size if we're not exporting
     // the whole canvas

src/scene/scroll.ts

@@ -11,11 +11,7 @@ import {
   viewportCoordsToSceneCoords,
 } from "../utils";
 
-const isOutsideViewPort = (
-  appState: AppState,
-  canvas: HTMLCanvasElement | null,
-  cords: Array<number>,
-) => {
+const isOutsideViewPort = (appState: AppState, cords: Array<number>) => {
   const [x1, y1, x2, y2] = cords;
   const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
     { sceneX: x1, sceneY: y1 },
@@ -49,7 +45,6 @@ export const centerScrollOn = ({
 export const calculateScrollCenter = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-  canvas: HTMLCanvasElement | null,
 ): { scrollX: number; scrollY: number } => {
   elements = getVisibleElements(elements);
 
@@ -61,7 +56,7 @@ export const calculateScrollCenter = (
   }
   let [x1, y1, x2, y2] = getCommonBounds(elements);
 
-  if (isOutsideViewPort(appState, canvas, [x1, y1, x2, y2])) {
+  if (isOutsideViewPort(appState, [x1, y1, x2, y2])) {
     [x1, y1, x2, y2] = getClosestElementBounds(
       elements,
       viewportCoordsToSceneCoords(

src/scene/scrollbars.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element";
-import { Zoom } from "../types";
+import { InteractiveCanvasAppState } from "../types";
 import { ScrollBars } from "./types";
 import { getGlobalCSSVariable } from "../utils";
 import { getLanguage } from "../i18n";
@@ -13,15 +13,7 @@ export const getScrollBars = (
   elements: readonly ExcalidrawElement[],
   viewportWidth: number,
   viewportHeight: number,
-  {
-    scrollX,
-    scrollY,
-    zoom,
-  }: {
-    scrollX: number;
-    scrollY: number;
-    zoom: Zoom;
-  },
+  appState: InteractiveCanvasAppState,
 ): ScrollBars => {
   if (elements.length === 0) {
     return {
@@ -34,8 +26,8 @@ export const getScrollBars = (
     getCommonBounds(elements);
 
   // Apply zoom
-  const viewportWidthWithZoom = viewportWidth / zoom.value;
-  const viewportHeightWithZoom = viewportHeight / zoom.value;
+  const viewportWidthWithZoom = viewportWidth / appState.zoom.value;
+  const viewportHeightWithZoom = viewportHeight / appState.zoom.value;
 
   const viewportWidthDiff = viewportWidth - viewportWidthWithZoom;
   const viewportHeightDiff = viewportHeight - viewportHeightWithZoom;
@@ -50,8 +42,10 @@ export const getScrollBars = (
   const isRTL = getLanguage().rtl;
 
   // The viewport is the rectangle currently visible for the user
-  const viewportMinX = -scrollX + viewportWidthDiff / 2 + safeArea.left;
-  const viewportMinY = -scrollY + viewportHeightDiff / 2 + safeArea.top;
+  const viewportMinX =
+    -appState.scrollX + viewportWidthDiff / 2 + safeArea.left;
+  const viewportMinY =
+    -appState.scrollY + viewportHeightDiff / 2 + safeArea.top;
   const viewportMaxX = viewportMinX + viewportWidthWithZoom - safeArea.right;
   const viewportMaxY = viewportMinY + viewportHeightWithZoom - safeArea.bottom;
 

src/scene/selection.ts

@@ -3,7 +3,7 @@ import {
   NonDeletedExcalidrawElement,
 } from "../element/types";
 import { getElementAbsoluteCoords, getElementBounds } from "../element";
-import { AppState } from "../types";
+import { AppState, InteractiveCanvasAppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
   elementOverlapsWithFrame,
@@ -146,7 +146,7 @@ export const getCommonAttributeOfSelectedElements = <T>(
 
 export const getSelectedElements = (
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: Pick<AppState, "selectedElementIds">,
+  appState: Pick<InteractiveCanvasAppState, "selectedElementIds">,
   opts?: {
     includeBoundTextElement?: boolean;
     includeElementsInFrames?: boolean;

src/scene/types.ts

@@ -1,33 +1,64 @@
-import { ExcalidrawTextElement } from "../element/types";
-import { AppClassProperties, AppState } from "../types";
+import type { RoughCanvas } from "roughjs/bin/canvas";
+import { Drawable } from "roughjs/bin/core";
+import {
+  ExcalidrawTextElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
+import {
+  AppClassProperties,
+  InteractiveCanvasAppState,
+  StaticCanvasAppState,
+} from "../types";
 
-export type RenderConfig = {
-  // AppState values
-  // ---------------------------------------------------------------------------
-  scrollX: AppState["scrollX"];
-  scrollY: AppState["scrollY"];
-  /** null indicates transparent bg */
-  viewBackgroundColor: AppState["viewBackgroundColor"] | null;
-  zoom: AppState["zoom"];
-  shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
-  theme: AppState["theme"];
-  // collab-related state
-  // ---------------------------------------------------------------------------
-  remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
-  remotePointerButton?: { [id: string]: string | undefined };
-  remoteSelectedElementIds: { [elementId: string]: string[] };
-  remotePointerUsernames: { [id: string]: string };
-  remotePointerUserStates: { [id: string]: string };
+export type StaticCanvasRenderConfig = {
   // extra options passed to the renderer
   // ---------------------------------------------------------------------------
   imageCache: AppClassProperties["imageCache"];
-  renderScrollbars?: boolean;
-  renderSelection?: boolean;
-  renderGrid?: boolean;
+  renderGrid: boolean;
   /** when exporting the behavior is slightly different (e.g. we can't use
-    CSS filters), and we disable render optimizations for best output */
+   CSS filters), and we disable render optimizations for best output */
   isExporting: boolean;
+};
+
+export type InteractiveCanvasRenderConfig = {
+  // collab-related state
+  // ---------------------------------------------------------------------------
+  remoteSelectedElementIds: { [elementId: string]: string[] };
+  remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
+  remotePointerUserStates: { [id: string]: string };
+  remotePointerUsernames: { [id: string]: string };
+  remotePointerButton?: { [id: string]: string | undefined };
   selectionColor?: string;
+  // extra options passed to the renderer
+  // ---------------------------------------------------------------------------
+  renderScrollbars?: boolean;
+};
+
+export type RenderInteractiveSceneCallback = {
+  atLeastOneVisibleElement: boolean;
+  elements: readonly NonDeletedExcalidrawElement[];
+  scrollBars?: ScrollBars;
+};
+
+export type StaticSceneRenderConfig = {
+  canvas: HTMLCanvasElement;
+  rc: RoughCanvas;
+  elements: readonly NonDeletedExcalidrawElement[];
+  visibleElements: readonly NonDeletedExcalidrawElement[];
+  scale: number;
+  appState: StaticCanvasAppState;
+  renderConfig: StaticCanvasRenderConfig;
+};
+
+export type InteractiveSceneRenderConfig = {
+  canvas: HTMLCanvasElement | null;
+  elements: readonly NonDeletedExcalidrawElement[];
+  visibleElements: readonly NonDeletedExcalidrawElement[];
+  selectedElements: readonly NonDeletedExcalidrawElement[];
+  scale: number;
+  appState: InteractiveCanvasAppState;
+  renderConfig: InteractiveCanvasRenderConfig;
+  callback: (data: RenderInteractiveSceneCallback) => void;
 };
 
 export type SceneScroll = {
@@ -60,3 +91,18 @@ export type ScrollBars = {
     height: number;
   } | null;
 };
+
+export type ElementShape = Drawable | Drawable[] | null;
+
+export type ElementShapes = {
+  rectangle: Drawable;
+  ellipse: Drawable;
+  diamond: Drawable;
+  embeddable: Drawable;
+  freedraw: Drawable | null;
+  arrow: Drawable[];
+  line: Drawable[];
+  text: null;
+  image: null;
+  frame: null;
+};

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

@@ -33,7 +33,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "startArrowhead": null,
   "startBinding": null,
   "strokeColor": "#1e1e1e",
@@ -42,7 +42,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "type": "arrow",
   "updated": 1,
   "version": 3,
-  "versionNonce": 449462985,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -69,14 +69,14 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "diamond",
   "updated": 1,
   "version": 2,
-  "versionNonce": 1278240551,
+  "versionNonce": 453191,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -103,14 +103,14 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "ellipse",
   "updated": 1,
   "version": 2,
-  "versionNonce": 1278240551,
+  "versionNonce": 453191,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -148,7 +148,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "startArrowhead": null,
   "startBinding": null,
   "strokeColor": "#1e1e1e",
@@ -157,7 +157,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "type": "line",
   "updated": 1,
   "version": 3,
-  "versionNonce": 449462985,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -184,14 +184,14 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "roundness": {
     "type": 3,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 2,
-  "versionNonce": 1278240551,
+  "versionNonce": 453191,
   "width": 30,
   "x": 30,
   "y": 20,

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

@@ -5,7 +5,7 @@ exports[`Test Linear Elements > Test bound text element > should match styles fo
   class="excalidraw-wysiwyg"
   data-type="wysiwyg"
   dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: -7.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Virgil, Segoe UI Emoji;"
+  style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Virgil, Segoe UI Emoji;"
   tabindex="0"
   wrap="off"
 />

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

@@ -18,14 +18,14 @@ exports[`duplicate element on move when ALT is clicked > rectangle 1`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 401146281,
+  "seed": 1014066025,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
-  "versionNonce": 2019559783,
+  "versionNonce": 238820263,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -50,14 +50,14 @@ exports[`duplicate element on move when ALT is clicked > rectangle 2`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
-  "versionNonce": 1150084233,
+  "versionNonce": 1604849351,
   "width": 30,
   "x": -10,
   "y": 60,
@@ -82,14 +82,14 @@ exports[`move element > rectangle 1`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
-  "versionNonce": 453191,
+  "versionNonce": 1150084233,
   "width": 30,
   "x": 0,
   "y": 40,
@@ -119,14 +119,14 @@ exports[`move element > rectangles with binding arrow 1`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
-  "versionNonce": 1014066025,
+  "versionNonce": 81784553,
   "width": 100,
   "x": 0,
   "y": 0,
@@ -156,14 +156,14 @@ exports[`move element > rectangles with binding arrow 2`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 449462985,
+  "seed": 2019559783,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 6,
-  "versionNonce": 1723083209,
+  "versionNonce": 927333447,
   "width": 300,
   "x": 201,
   "y": 2,
@@ -205,7 +205,7 @@ exports[`move element > rectangles with binding arrow 3`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 401146281,
+  "seed": 238820263,
   "startArrowhead": null,
   "startBinding": {
     "elementId": "id0",
@@ -218,7 +218,7 @@ exports[`move element > rectangles with binding arrow 3`] = `
   "type": "line",
   "updated": 1,
   "version": 11,
-  "versionNonce": 1006504105,
+  "versionNonce": 1051383431,
   "width": 81,
   "x": 110,
   "y": 49.981789081137734,

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

@@ -38,7 +38,7 @@ exports[`multi point mode in linear elements > arrow 1`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "startArrowhead": null,
   "startBinding": null,
   "strokeColor": "#1e1e1e",
@@ -47,7 +47,7 @@ exports[`multi point mode in linear elements > arrow 1`] = `
   "type": "arrow",
   "updated": 1,
   "version": 7,
-  "versionNonce": 1150084233,
+  "versionNonce": 1505387817,
   "width": 70,
   "x": 30,
   "y": 30,
@@ -92,7 +92,7 @@ exports[`multi point mode in linear elements > line 1`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "startArrowhead": null,
   "startBinding": null,
   "strokeColor": "#1e1e1e",
@@ -101,7 +101,7 @@ exports[`multi point mode in linear elements > line 1`] = `
   "type": "line",
   "updated": 1,
   "version": 7,
-  "versionNonce": 1150084233,
+  "versionNonce": 1505387817,
   "width": 70,
   "x": 30,
   "y": 30,

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

@@ -31,7 +31,7 @@ exports[`select single element on the scene > arrow 1`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "startArrowhead": null,
   "startBinding": null,
   "strokeColor": "#1e1e1e",
@@ -40,7 +40,7 @@ exports[`select single element on the scene > arrow 1`] = `
   "type": "arrow",
   "updated": 1,
   "version": 3,
-  "versionNonce": 449462985,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -78,7 +78,7 @@ exports[`select single element on the scene > arrow escape 1`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "startArrowhead": null,
   "startBinding": null,
   "strokeColor": "#1e1e1e",
@@ -87,7 +87,7 @@ exports[`select single element on the scene > arrow escape 1`] = `
   "type": "line",
   "updated": 1,
   "version": 3,
-  "versionNonce": 449462985,
+  "versionNonce": 401146281,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -112,14 +112,14 @@ exports[`select single element on the scene > diamond 1`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "diamond",
   "updated": 1,
   "version": 2,
-  "versionNonce": 1278240551,
+  "versionNonce": 453191,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -144,14 +144,14 @@ exports[`select single element on the scene > ellipse 1`] = `
   "roundness": {
     "type": 2,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "ellipse",
   "updated": 1,
   "version": 2,
-  "versionNonce": 1278240551,
+  "versionNonce": 453191,
   "width": 30,
   "x": 10,
   "y": 10,
@@ -176,14 +176,14 @@ exports[`select single element on the scene > rectangle 1`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 337897,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 2,
-  "versionNonce": 1278240551,
+  "versionNonce": 453191,
   "width": 30,
   "x": 10,
   "y": 10,

src/tests/contextmenu.test.tsx

@@ -24,7 +24,7 @@ import { LibraryItem } from "../types";
 import { vi } from "vitest";
 
 const checkpoint = (name: string) => {
-  expect(renderScene.mock.calls.length).toMatchSnapshot(
+  expect(renderStaticScene.mock.calls.length).toMatchSnapshot(
     `[${name}] number of renders`,
   );
   expect(h.state).toMatchSnapshot(`[${name}] appState`);
@@ -40,10 +40,10 @@ const mouse = new Pointer("mouse");
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
-const renderScene = vi.spyOn(Renderer, "renderScene");
+const renderStaticScene = vi.spyOn(Renderer, "renderStaticScene");
 beforeEach(() => {
   localStorage.clear();
-  renderScene.mockClear();
+  renderStaticScene.mockClear();
   reseed(7);
 });
 
@@ -52,7 +52,7 @@ const { h } = window;
 describe("contextMenu element", () => {
   beforeEach(async () => {
     localStorage.clear();
-    renderScene.mockClear();
+    renderStaticScene.mockClear();
     reseed(7);
     setDateTimeForTests("201933152653");
 
@@ -75,7 +75,7 @@ describe("contextMenu element", () => {
   });
 
   it("shows context menu for canvas", () => {
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -105,7 +105,7 @@ describe("contextMenu element", () => {
     mouse.down(10, 10);
     mouse.up(20, 20);
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -159,7 +159,7 @@ describe("contextMenu element", () => {
     API.setSelectedElements([rect1]);
 
     // lower z-index
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 100,
       clientY: 100,
@@ -169,7 +169,7 @@ describe("contextMenu element", () => {
 
     // higher z-index
     API.setSelectedElements([rect2]);
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 100,
       clientY: 100,
@@ -193,7 +193,7 @@ describe("contextMenu element", () => {
       mouse.click(20, 0);
     });
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -246,7 +246,7 @@ describe("contextMenu element", () => {
       Keyboard.keyPress(KEYS.G);
     });
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -285,7 +285,7 @@ describe("contextMenu element", () => {
     mouse.down(10, 10);
     mouse.up(20, 20);
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -333,7 +333,7 @@ describe("contextMenu element", () => {
     mouse.reset();
 
     // Copy styles of second rectangle
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 40,
       clientY: 40,
@@ -346,7 +346,7 @@ describe("contextMenu element", () => {
 
     mouse.reset();
     // Paste styles to first rectangle
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 10,
       clientY: 10,
@@ -370,7 +370,7 @@ describe("contextMenu element", () => {
     mouse.down(10, 10);
     mouse.up(20, 20);
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -386,7 +386,7 @@ describe("contextMenu element", () => {
     mouse.down(10, 10);
     mouse.up(20, 20);
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -407,7 +407,7 @@ describe("contextMenu element", () => {
     mouse.down(10, 10);
     mouse.up(20, 20);
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -430,7 +430,7 @@ describe("contextMenu element", () => {
     mouse.up(20, 20);
 
     mouse.reset();
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 40,
       clientY: 40,
@@ -452,7 +452,7 @@ describe("contextMenu element", () => {
     mouse.up(20, 20);
 
     mouse.reset();
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 10,
       clientY: 10,
@@ -474,7 +474,7 @@ describe("contextMenu element", () => {
     mouse.up(20, 20);
 
     mouse.reset();
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 40,
       clientY: 40,
@@ -495,7 +495,7 @@ describe("contextMenu element", () => {
     mouse.up(20, 20);
 
     mouse.reset();
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 10,
       clientY: 10,
@@ -520,7 +520,7 @@ describe("contextMenu element", () => {
       mouse.click(10, 10);
     });
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,
@@ -550,7 +550,7 @@ describe("contextMenu element", () => {
       Keyboard.keyPress(KEYS.G);
     });
 
-    fireEvent.contextMenu(GlobalTestState.canvas, {
+    fireEvent.contextMenu(GlobalTestState.interactiveCanvas, {
       button: 2,
       clientX: 1,
       clientY: 1,

src/tests/data/restore.test.ts

@@ -140,9 +140,8 @@ describe("restoreElements", () => {
     expect(restoredArrow).toMatchSnapshot({ seed: expect.any(Number) });
   });
 
-  it("when arrow element has defined endArrowHead", () => {
+  it('should set arrow element endArrowHead as "arrow" when arrow element endArrowHead is null', () => {
     const arrowElement = API.createElement({ type: "arrow" });
-
     const restoredElements = restore.restoreElements([arrowElement], null);
 
     const restoredArrow = restoredElements[0] as ExcalidrawLinearElement;
@@ -150,7 +149,7 @@ describe("restoreElements", () => {
     expect(arrowElement.endArrowhead).toBe(restoredArrow.endArrowhead);
   });
 
-  it("when arrow element has undefined endArrowHead", () => {
+  it('should set arrow element endArrowHead as "arrow" when arrow element endArrowHead is undefined', () => {
     const arrowElement = API.createElement({ type: "arrow" });
     Object.defineProperty(arrowElement, "endArrowhead", {
       get: vi.fn(() => undefined),

src/tests/dragCreate.test.tsx

@@ -15,10 +15,13 @@ import { vi } from "vitest";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
-const renderScene = vi.spyOn(Renderer, "renderScene");
+const renderInteractiveScene = vi.spyOn(Renderer, "renderInteractiveScene");
+const renderStaticScene = vi.spyOn(Renderer, "renderStaticScene");
+
 beforeEach(() => {
   localStorage.clear();
-  renderScene.mockClear();
+  renderInteractiveScene.mockClear();
+  renderStaticScene.mockClear();
   reseed(7);
 });
 
@@ -32,7 +35,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("rectangle");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -43,7 +46,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(9);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -63,7 +67,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("ellipse");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -74,7 +78,9 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(9);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
+
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -94,7 +100,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("diamond");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -105,7 +111,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(9);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -125,7 +132,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("arrow");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -136,7 +143,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(9);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -160,7 +168,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("line");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -171,7 +179,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(9);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
       expect(h.state.selectionElement).toBeNull();
 
       expect(h.elements.length).toEqual(1);
@@ -203,7 +212,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("rectangle");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -211,7 +220,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(7);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -222,7 +232,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("ellipse");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -230,7 +240,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(7);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -241,7 +252,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("diamond");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -249,7 +260,8 @@ describe("Test dragCreate", () => {
       // finish (position does not matter)
       fireEvent.pointerUp(canvas);
 
-      expect(renderScene).toHaveBeenCalledTimes(7);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(5);
+      expect(renderStaticScene).toHaveBeenCalledTimes(6);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -260,7 +272,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("arrow");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -273,7 +285,8 @@ describe("Test dragCreate", () => {
         key: KEYS.ENTER,
       });
 
-      expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -284,7 +297,7 @@ describe("Test dragCreate", () => {
       const tool = getByToolName("line");
       fireEvent.click(tool);
 
-      const canvas = container.querySelector("canvas")!;
+      const canvas = container.querySelector("canvas.interactive")!;
 
       // start from (30, 20)
       fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
@@ -297,7 +310,8 @@ describe("Test dragCreate", () => {
         key: KEYS.ENTER,
       });
 
-      expect(renderScene).toHaveBeenCalledTimes(8);
+      expect(renderInteractiveScene).toHaveBeenCalledTimes(6);
+      expect(renderStaticScene).toHaveBeenCalledTimes(7);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });

src/tests/fixtures/elementFixture.ts

@@ -34,6 +34,7 @@ export const rectangleFixture: ExcalidrawElement = {
 export const embeddableFixture: ExcalidrawElement = {
   ...elementBase,
   type: "embeddable",
+  validated: null,
 };
 export const ellipseFixture: ExcalidrawElement = {
   ...elementBase,