lint

.env.development

@@ -20,10 +20,14 @@ REACT_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 REACT_APP_DEV_DISABLE_LIVE_RELOAD=
-REACT_APP_DISABLE_TRACKING=true
 
 FAST_REFRESH=false
 
+# MATOMO
+REACT_APP_MATOMO_URL=
+REACT_APP_CDN_MATOMO_TRACKER_URL=
+REACT_APP_MATOMO_SITE_ID=
+
 #Debug flags
 
 # To enable bounding box for text containers

.env.production

@@ -11,5 +11,14 @@ REACT_APP_WS_SERVER_URL=
 
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
+# production-only vars
+# GOOGLE ANALYTICS
+REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
+# MATOMO
+REACT_APP_MATOMO_URL=https://excalidraw.matomo.cloud/
+REACT_APP_CDN_MATOMO_TRACKER_URL=//cdn.matomo.cloud/excalidraw.matomo.cloud/matomo.js
+REACT_APP_MATOMO_SITE_ID=1
+
+
+
 REACT_APP_PLUS_APP=https://app.excalidraw.com
-REACT_APP_DISABLE_TRACKING=

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

@@ -306,32 +306,30 @@ This is the history API. history.clear() will clear the history.
 
 ## scrollToContent
 
-```tsx
-(
-  target?: ExcalidrawElement | ExcalidrawElement[],
-  opts?:
-      | {
-          fitToContent?: boolean;
-          animate?: boolean;
-          duration?: number;
-        }
-      | {
-          fitToViewport?: boolean;
-          viewportZoomFactor?: number;
-          animate?: boolean;
-          duration?: number;
-        }
-) => void
-```
+<pre>
+  (<br />
+  {"  "}
+  target?:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
+    ExcalidrawElement
+  </a>{" "}
+  &#124;{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
+    ExcalidrawElement
+  </a>
+  [],
+  <br />
+  {"  "}opts?: &#123; fitToContent?: boolean; animate?: boolean; duration?: number
+  &#125;
+  <br />) => void
+</pre>
 
 Scroll the nearest element out of the elements supplied to the center of the viewport. Defaults to the elements on the scene.
 
 | Attribute | type | default | Description |
 | --- | --- | --- | --- |
-| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) &#124; [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) | All scene elements | The element(s) to scroll to. |
-| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. Note that the zoom range is between 10%-100%. |
-| opts.fitToViewport | boolean | false | Similar to fitToContent but the zoom range is not limited. If elements are smaller than the viewport, zoom will go above 100%. |
-| opts.viewportZoomFactor | number | 0.7 | when fitToViewport=true, how much screen should the content cover, between 0.1 (10%) and 1 (100%) |
+| target | <code>ExcalidrawElement &#124; ExcalidrawElement[]</code> | All scene elements | The element(s) to scroll to. |
+| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. |
 | opts.animate | boolean | false | Whether to animate between starting and ending position. Note that for larger scenes the animation may not be smooth due to performance issues. |
 | opts.duration | number | 500 | Duration of the animation if `opts.animate` is `true`. |
 

dev-docs/docs/introduction/contributing.mdx

@@ -2,11 +2,6 @@
 
 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.
-
-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.
-
 ## Setup
 
 ### Option 1 - Manual

package.json

@@ -19,8 +19,6 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "6.0.2",
-    "@excalidraw/random-username": "1.0.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
     "@sentry/browser": "6.2.5",
@@ -29,7 +27,6 @@
     "@testing-library/react": "12.1.5",
     "@tldraw/vec": "1.7.1",
     "browser-fs-access": "0.29.1",
-    "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
     "fake-indexeddb": "3.1.7",
@@ -54,7 +51,7 @@
     "react-scripts": "5.0.1",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
-    "socket.io-client": "4.6.1",
+    "socket.io-client": "2.3.1",
     "tunnel-rat": "0.1.2",
     "workbox-background-sync": "^6.5.4",
     "workbox-broadcast-update": "^6.5.4",
@@ -109,7 +106,7 @@
       "<rootDir>/src/packages/excalidraw/example"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access|canvas-roundrect-polyfill)/)"
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
     ],
     "resetMocks": false
   },

public/index.html

@@ -148,6 +148,33 @@
       // setting this so that libraries installation reuses this window tab.
       window.name = "_excalidraw";
     </script>
+    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
+
+    <!-- Fathom - privacy-friendly analytics -->
+    <script
+      src="https://cdn.usefathom.com/script.js"
+      data-site="VMSBUEYA"
+      defer
+    ></script>
+    <!-- / Fathom -->
+
+    <!-- LEGACY GOOGLE ANALYTICS -->
+    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_ID%");
+    </script>
+    <% } %>
+    <!-- end LEGACY GOOGLE ANALYTICS -->
+    <% } %>
 
     <!-- FIXME: remove this when we update CRA (fix SW caching) -->
     <style>
@@ -200,39 +227,17 @@
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
     <div id="root"></div>
-    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
     <!-- 100% privacy friendly analytics -->
-    <script>
-      // need to load this script dynamically bcs. of iframe embed tracking
-      var scriptEle = document.createElement("script");
-      scriptEle.setAttribute(
-        "src",
-        "https://scripts.simpleanalyticscdn.com/latest.js",
-      );
-      scriptEle.setAttribute("type", "text/javascript");
-      scriptEle.setAttribute("defer", true);
-      scriptEle.setAttribute("async", true);
-      // if iframe
-      if (window.self !== window.top) {
-        scriptEle.setAttribute("data-auto-collect", true);
-      }
-
-      document.body.appendChild(scriptEle);
-
-      // if iframe
-      if (window.self !== window.top) {
-        scriptEle.addEventListener("load", () => {
-          if (window.sa_pageview) {
-            window.window.sa_event(action, {
-              category: "iframe",
-              label: "embed",
-              value: window.location.pathname,
-            });
-          }
-        });
-      }
-    </script>
-    <!-- end LEGACY GOOGLE ANALYTICS -->
-    <% } %>
+    <script
+      async
+      defer
+      src="https://scripts.simpleanalyticscdn.com/latest.js"
+    ></script>
+    <noscript
+      ><img
+        src="https://queue.simpleanalyticscdn.com/noscript.gif"
+        alt=""
+        referrerpolicy="no-referrer-when-downgrade"
+    /></noscript>
   </body>
 </html>

src/actions/actionAddToLibrary.ts

@@ -12,10 +12,7 @@ export const actionAddToLibrary = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      },
+      true,
     );
     if (selectedElements.some((element) => element.type === "image")) {
       return {

src/actions/actionAlign.tsx

@@ -10,7 +10,6 @@ import {
 import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
@@ -18,20 +17,10 @@ import { AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
-const alignActionsPredicate = (
+const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
-  return (
-    selectedElements.length > 1 &&
-    // TODO enable aligning frames when implemented properly
-    !selectedElements.some((el) => el.type === "frame")
-  );
-};
+) => getSelectedElements(getNonDeletedElements(elements), appState).length > 1;
 
 const alignSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -47,16 +36,14 @@ const alignSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return updateFrameMembershipOfSelectedElements(
-    elements.map((element) => updatedElementsMap.get(element.id) || element),
-    appState,
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
   );
 };
 
 export const actionAlignTop = register({
   name: "alignTop",
   trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -71,7 +58,7 @@ export const actionAlignTop = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!enableActionGroup(elements, appState)}
       type="button"
       icon={AlignTopIcon}
       onClick={() => updateData(null)}
@@ -87,7 +74,6 @@ export const actionAlignTop = register({
 export const actionAlignBottom = register({
   name: "alignBottom",
   trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -102,7 +88,7 @@ export const actionAlignBottom = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!enableActionGroup(elements, appState)}
       type="button"
       icon={AlignBottomIcon}
       onClick={() => updateData(null)}
@@ -118,7 +104,6 @@ export const actionAlignBottom = register({
 export const actionAlignLeft = register({
   name: "alignLeft",
   trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -133,7 +118,7 @@ export const actionAlignLeft = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!enableActionGroup(elements, appState)}
       type="button"
       icon={AlignLeftIcon}
       onClick={() => updateData(null)}
@@ -149,7 +134,7 @@ export const actionAlignLeft = register({
 export const actionAlignRight = register({
   name: "alignRight",
   trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+
   perform: (elements, appState) => {
     return {
       appState,
@@ -164,7 +149,7 @@ export const actionAlignRight = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!enableActionGroup(elements, appState)}
       type="button"
       icon={AlignRightIcon}
       onClick={() => updateData(null)}
@@ -180,7 +165,7 @@ export const actionAlignRight = register({
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
   trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
+
   perform: (elements, appState) => {
     return {
       appState,
@@ -193,7 +178,7 @@ export const actionAlignVerticallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!enableActionGroup(elements, appState)}
       type="button"
       icon={CenterVerticallyIcon}
       onClick={() => updateData(null)}
@@ -207,7 +192,6 @@ export const actionAlignVerticallyCentered = register({
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
   trackEvent: { category: "element" },
-  predicate: alignActionsPredicate,
   perform: (elements, appState) => {
     return {
       appState,
@@ -220,7 +204,7 @@ export const actionAlignHorizontallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(elements, appState)}
+      hidden={!enableActionGroup(elements, appState)}
       type="button"
       icon={CenterHorizontallyIcon}
       onClick={() => updateData(null)}

src/actions/actionBoundText.tsx

@@ -31,7 +31,6 @@ import {
 } from "../element/types";
 import { getSelectedElements } from "../scene";
 import { AppState } from "../types";
-import { Mutable } from "../utility-types";
 import { getFontString } from "../utils";
 import { register } from "./register";
 
@@ -212,7 +211,7 @@ export const actionWrapTextInContainer = register({
       appState,
     );
     let updatedElements: readonly ExcalidrawElement[] = elements.slice();
-    const containerIds: Mutable<AppState["selectedElementIds"]> = {};
+    const containerIds: AppState["selectedElementIds"] = {};
 
     for (const textElement of selectedElements) {
       if (isTextElement(textElement)) {
@@ -250,7 +249,6 @@ export const actionWrapTextInContainer = register({
             "rectangle",
           ),
           groupIds: textElement.groupIds,
-          frameId: textElement.frameId,
         });
 
         // update bindings

src/actions/actionCanvas.tsx

@@ -20,7 +20,6 @@ import {
   isHandToolActive,
 } from "../appState";
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
-import { Bounds } from "../element/bounds";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -207,7 +206,7 @@ export const actionResetZoom = register({
 });
 
 const zoomValueToFitBoundsOnViewport = (
-  bounds: Bounds,
+  bounds: [number, number, number, number],
   viewportDimensions: { width: number; height: number },
 ) => {
   const [x1, y1, x2, y2] = bounds;
@@ -225,96 +224,50 @@ const zoomValueToFitBoundsOnViewport = (
   return clampedZoomValueToFitElements as NormalizedZoomValue;
 };
 
-export const zoomToFit = ({
-  targetElements,
-  appState,
-  fitToViewport = false,
-  viewportZoomFactor = 0.7,
-}: {
-  targetElements: readonly ExcalidrawElement[];
-  appState: Readonly<AppState>;
-  /** whether to fit content to viewport (beyond >100%) */
-  fitToViewport: boolean;
-  /** zoom content to cover X of the viewport, when fitToViewport=true */
-  viewportZoomFactor?: number;
-}) => {
-  const commonBounds = getCommonBounds(getNonDeletedElements(targetElements));
+export const zoomToFitElements = (
+  elements: readonly ExcalidrawElement[],
+  appState: Readonly<AppState>,
+  zoomToSelection: boolean,
+) => {
+  const nonDeletedElements = getNonDeletedElements(elements);
+  const selectedElements = getSelectedElements(nonDeletedElements, appState);
+
+  const commonBounds =
+    zoomToSelection && selectedElements.length > 0
+      ? getCommonBounds(selectedElements)
+      : getCommonBounds(nonDeletedElements);
+
+  const newZoom = {
+    value: zoomValueToFitBoundsOnViewport(commonBounds, {
+      width: appState.width,
+      height: appState.height,
+    }),
+  };
 
   const [x1, y1, x2, y2] = commonBounds;
   const centerX = (x1 + x2) / 2;
   const centerY = (y1 + y2) / 2;
-
-  let newZoomValue;
-  let scrollX;
-  let scrollY;
-
-  if (fitToViewport) {
-    const commonBoundsWidth = x2 - x1;
-    const commonBoundsHeight = y2 - y1;
-
-    newZoomValue =
-      Math.min(
-        appState.width / commonBoundsWidth,
-        appState.height / commonBoundsHeight,
-      ) * Math.min(1, Math.max(viewportZoomFactor, 0.1));
-
-    // Apply clamping to newZoomValue to be between 10% and 3000%
-    newZoomValue = Math.min(
-      Math.max(newZoomValue, 0.1),
-      30.0,
-    ) as NormalizedZoomValue;
-
-    scrollX = (appState.width / 2) * (1 / newZoomValue) - centerX;
-    scrollY = (appState.height / 2) * (1 / newZoomValue) - centerY;
-  } else {
-    newZoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {
-      width: appState.width,
-      height: appState.height,
-    });
-
-    const centerScroll = centerScrollOn({
-      scenePoint: { x: centerX, y: centerY },
-      viewportDimensions: {
-        width: appState.width,
-        height: appState.height,
-      },
-      zoom: { value: newZoomValue },
-    });
-
-    scrollX = centerScroll.scrollX;
-    scrollY = centerScroll.scrollY;
-  }
-
   return {
     appState: {
       ...appState,
-      scrollX,
-      scrollY,
-      zoom: { value: newZoomValue },
+      ...centerScrollOn({
+        scenePoint: { x: centerX, y: centerY },
+        viewportDimensions: {
+          width: appState.width,
+          height: appState.height,
+        },
+        zoom: newZoom,
+      }),
+      zoom: newZoom,
     },
     commitToHistory: false,
   };
 };
 
-// Note, this action differs from actionZoomToFitSelection in that it doesn't
-// zoom beyond 100%. In other words, if the content is smaller than viewport
-// size, it won't be zoomed in.
-export const actionZoomToFitSelectionInViewport = register({
-  name: "zoomToFitSelectionInViewport",
+export const actionZoomToSelected = register({
+  name: "zoomToSelection",
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    return zoomToFit({
-      targetElements: selectedElements.length ? selectedElements : elements,
-      appState,
-      fitToViewport: false,
-    });
-  },
-  // NOTE shift-2 should have been assigned actionZoomToFitSelection.
-  // TBD on how proceed
+  perform: (elements, appState) => zoomToFitElements(elements, appState, true),
   keyTest: (event) =>
     event.code === CODES.TWO &&
     event.shiftKey &&
@@ -322,34 +275,11 @@ export const actionZoomToFitSelectionInViewport = register({
     !event[KEYS.CTRL_OR_CMD],
 });
 
-export const actionZoomToFitSelection = register({
-  name: "zoomToFitSelection",
-  trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    return zoomToFit({
-      targetElements: selectedElements.length ? selectedElements : elements,
-      appState,
-      fitToViewport: true,
-    });
-  },
-  // NOTE this action should use shift-2 per figma, alas
-  keyTest: (event) =>
-    event.code === CODES.THREE &&
-    event.shiftKey &&
-    !event.altKey &&
-    !event[KEYS.CTRL_OR_CMD],
-});
-
 export const actionZoomToFit = register({
   name: "zoomToFit",
   viewMode: true,
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) =>
-    zoomToFit({ targetElements: elements, appState, fitToViewport: false }),
+  perform: (elements, appState) => zoomToFitElements(elements, appState, false),
   keyTest: (event) =>
     event.code === CODES.ONE &&
     event.shiftKey &&

src/actions/actionClipboard.tsx

@@ -16,12 +16,9 @@ export const actionCopy = register({
   name: "copy",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const elementsToCopy = getSelectedElements(elements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    });
+    const selectedElements = getSelectedElements(elements, appState, true);
 
-    copyToClipboard(elementsToCopy, app.files);
+    copyToClipboard(selectedElements, app.files);
 
     return {
       commitToHistory: false,
@@ -78,10 +75,7 @@ export const actionCopyAsSvg = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      },
+      true,
     );
     try {
       await exportCanvas(
@@ -125,10 +119,7 @@ export const actionCopyAsPng = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      },
+      true,
     );
     try {
       await exportCanvas(
@@ -181,9 +172,7 @@ export const copyText = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      {
-        includeBoundTextElement: true,
-      },
+      true,
     );
 
     const text = selectedElements
@@ -202,9 +191,7 @@ export const copyText = register({
   predicate: (elements, appState) => {
     return (
       probablySupportsClipboardWriteText &&
-      getSelectedElements(elements, appState, {
-        includeBoundTextElement: true,
-      }).some(isTextElement)
+      getSelectedElements(elements, appState, true).some(isTextElement)
     );
   },
   contextItemLabel: "labels.copyText",

src/actions/actionDeleteSelected.tsx

@@ -1,4 +1,4 @@
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import { KEYS } from "../keys";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
@@ -18,23 +18,11 @@ const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
 ) => {
-  const framesToBeDeleted = new Set(
-    getSelectedElements(
-      elements.filter((el) => el.type === "frame"),
-      appState,
-    ).map((el) => el.id),
-  );
-
   return {
     elements: elements.map((el) => {
       if (appState.selectedElementIds[el.id]) {
         return newElementWith(el, { isDeleted: true });
       }
-
-      if (el.frameId && framesToBeDeleted.has(el.frameId)) {
-        return newElementWith(el, { isDeleted: true });
-      }
-
       if (
         isBoundToContainer(el) &&
         appState.selectedElementIds[el.containerId]

src/actions/actionDistribute.tsx

@@ -6,7 +6,6 @@ import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
@@ -17,17 +16,7 @@ import { register } from "./register";
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
-  return (
-    selectedElements.length > 1 &&
-    // TODO enable distributing frames when implemented properly
-    !selectedElements.some((el) => el.type === "frame")
-  );
-};
+) => getSelectedElements(getNonDeletedElements(elements), appState).length > 1;
 
 const distributeSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -43,9 +32,8 @@ const distributeSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return updateFrameMembershipOfSelectedElements(
-    elements.map((element) => updatedElementsMap.get(element.id) || element),
-    appState,
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
   );
 };
 

src/actions/actionDuplicateSelection.tsx

@@ -2,7 +2,7 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
-import { isSomeElementSelected } from "../scene";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { arrayToMap, getShortcutKey } from "../utils";
@@ -20,17 +20,9 @@ import {
   bindTextToShapeAfterDuplication,
   getBoundTextElement,
 } from "../element/textElement";
-import { isBoundToContainer, isFrameElement } from "../element/typeChecks";
+import { isBoundToContainer } from "../element/typeChecks";
 import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
-import {
-  bindElementsToFramesAfterDuplication,
-  getFrameElements,
-} from "../frame";
-import {
-  excludeElementsInFramesFromSelection,
-  getSelectedElements,
-} from "../scene/selection";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -102,11 +94,8 @@ const duplicateElements = (
     return newElement;
   };
 
-  const idsOfElementsToDuplicate = arrayToMap(
-    getSelectedElements(sortedElements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    }),
+  const selectedElementIds = arrayToMap(
+    getSelectedElements(sortedElements, appState, true),
   );
 
   // Ids of elements that have already been processed so we don't push them
@@ -140,25 +129,12 @@ const duplicateElements = (
     }
 
     const boundTextElement = getBoundTextElement(element);
-    const isElementAFrame = isFrameElement(element);
-
-    if (idsOfElementsToDuplicate.get(element.id)) {
-      // if a group or a container/bound-text or frame, duplicate atomically
-      if (element.groupIds.length || boundTextElement || isElementAFrame) {
+    if (selectedElementIds.get(element.id)) {
+      // if a group or a container/bound-text, duplicate atomically
+      if (element.groupIds.length || boundTextElement) {
         const groupId = getSelectedGroupForElement(appState, element);
         if (groupId) {
-          // TODO:
-          // remove `.flatMap...`
-          // if the elements in a frame are grouped when the frame is grouped
-          const groupElements = getElementsInGroup(
-            sortedElements,
-            groupId,
-          ).flatMap((element) =>
-            isFrameElement(element)
-              ? [...getFrameElements(elements, element.id), element]
-              : [element],
-          );
-
+          const groupElements = getElementsInGroup(sortedElements, groupId);
           elementsWithClones.push(
             ...markAsProcessed([
               ...groupElements,
@@ -180,34 +156,10 @@ const duplicateElements = (
           );
           continue;
         }
-        if (isElementAFrame) {
-          const elementsInFrame = getFrameElements(sortedElements, element.id);
-
-          elementsWithClones.push(
-            ...markAsProcessed([
-              ...elementsInFrame,
-              element,
-              ...elementsInFrame.map((e) => duplicateAndOffsetElement(e)),
-              duplicateAndOffsetElement(element),
-            ]),
-          );
-
-          continue;
-        }
-      }
-      // since elements in frames have a lower z-index than the frame itself,
-      // they will be looped first and if their frames are selected as well,
-      // they will have been copied along with the frame atomically in the
-      // above branch, so we must skip those elements here
-      //
-      // now, for elements do not belong any frames or elements whose frames
-      // are selected (or elements that are left out from the above
-      // steps for whatever reason) we (should at least) duplicate them here
-      if (!element.frameId || !idsOfElementsToDuplicate.has(element.frameId)) {
-        elementsWithClones.push(
-          ...markAsProcessed([element, duplicateAndOffsetElement(element)]),
-        );
       }
+      elementsWithClones.push(
+        ...markAsProcessed([element, duplicateAndOffsetElement(element)]),
+      );
     } else {
       elementsWithClones.push(...markAsProcessed([element]));
     }
@@ -248,14 +200,6 @@ const duplicateElements = (
     oldElements,
     oldIdToDuplicatedId,
   );
-  bindElementsToFramesAfterDuplication(
-    finalElements,
-    oldElements,
-    oldIdToDuplicatedId,
-  );
-
-  const nextElementsToSelect =
-    excludeElementsInFramesFromSelection(newElements);
 
   return {
     elements: finalElements,
@@ -263,7 +207,7 @@ const duplicateElements = (
       {
         ...appState,
         selectedGroupIds: {},
-        selectedElementIds: nextElementsToSelect.reduce(
+        selectedElementIds: newElements.reduce(
           (acc: Record<ExcalidrawElement["id"], true>, element) => {
             if (!isBoundToContainer(element)) {
               acc[element.id] = true;
@@ -274,7 +218,6 @@ const duplicateElements = (
         ),
       },
       getNonDeletedElements(finalElements),
-      appState,
     ),
   };
 };

src/actions/actionElementLock.ts

@@ -11,17 +11,8 @@ const shouldLock = (elements: readonly ExcalidrawElement[]) =>
 export const actionToggleElementLock = register({
   name: "toggleElementLock",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return !selectedElements.some(
-      (element) => element.locked && element.frameId,
-    );
-  },
   perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    });
+    const selectedElements = getSelectedElements(elements, appState, true);
 
     if (!selectedElements.length) {
       return false;
@@ -47,10 +38,8 @@ export const actionToggleElementLock = register({
     };
   },
   contextItemLabel: (elements, appState) => {
-    const selected = getSelectedElements(elements, appState, {
-      includeBoundTextElement: false,
-    });
-    if (selected.length === 1 && selected[0].type !== "frame") {
+    const selected = getSelectedElements(elements, appState, false);
+    if (selected.length === 1) {
       return selected[0].locked
         ? "labels.elementLock.unlock"
         : "labels.elementLock.lock";
@@ -65,9 +54,7 @@ export const actionToggleElementLock = register({
       event.key.toLocaleLowerCase() === KEYS.L &&
       event[KEYS.CTRL_OR_CMD] &&
       event.shiftKey &&
-      getSelectedElements(elements, appState, {
-        includeBoundTextElement: false,
-      }).length > 0
+      getSelectedElements(elements, appState, false).length > 0
     );
   },
 });

src/actions/actionFinalize.tsx

@@ -125,6 +125,13 @@ export const actionFinalize = register({
           { x, y },
         );
       }
+
+      if (
+        !appState.activeTool.locked &&
+        appState.activeTool.type !== "freedraw"
+      ) {
+        appState.selectedElementIds[multiPointElement.id] = true;
+      }
     }
 
     if (

src/actions/actionFlip.ts

@@ -12,17 +12,13 @@ import {
   isBindingEnabled,
   unbindLinearElements,
 } from "../element/binding";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
-      elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(elements, appState, "horizontal"),
-        appState,
-      ),
+      elements: flipSelectedElements(elements, appState, "horizontal"),
       appState,
       commitToHistory: true,
     };
@@ -36,10 +32,7 @@ export const actionFlipVertical = register({
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
-      elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(elements, appState, "vertical"),
-        appState,
-      ),
+      elements: flipSelectedElements(elements, appState, "vertical"),
       appState,
       commitToHistory: true,
     };
@@ -57,9 +50,6 @@ const flipSelectedElements = (
   const selectedElements = getSelectedElements(
     getNonDeletedElements(elements),
     appState,
-    {
-      includeElementsInFrames: true,
-    },
   );
 
   const updatedElements = flipElements(

src/actions/actionFrame.ts

@@ -1,143 +0,0 @@
-import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
-import { removeAllElementsFromFrame } from "../frame";
-import { getFrameElements } from "../frame";
-import { KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
-import { AppState } from "../types";
-import { setCursorForShape, updateActiveTool } from "../utils";
-import { register } from "./register";
-
-const isSingleFrameSelected = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
-
-  return selectedElements.length === 1 && selectedElements[0].type === "frame";
-};
-
-export const actionSelectAllElementsInFrame = register({
-  name: "selectAllElementsInFrame",
-  trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    const selectedFrame = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    )[0];
-
-    if (selectedFrame && selectedFrame.type === "frame") {
-      const elementsInFrame = getFrameElements(
-        getNonDeletedElements(elements),
-        selectedFrame.id,
-      ).filter((element) => !(element.type === "text" && element.containerId));
-
-      return {
-        elements,
-        appState: {
-          ...appState,
-          selectedElementIds: elementsInFrame.reduce((acc, element) => {
-            acc[element.id] = true;
-            return acc;
-          }, {} as Record<ExcalidrawElement["id"], true>),
-        },
-        commitToHistory: false,
-      };
-    }
-
-    return {
-      elements,
-      appState,
-      commitToHistory: false,
-    };
-  },
-  contextItemLabel: "labels.selectAllElementsInFrame",
-  predicate: (elements, appState) => isSingleFrameSelected(elements, appState),
-});
-
-export const actionRemoveAllElementsFromFrame = register({
-  name: "removeAllElementsFromFrame",
-  trackEvent: { category: "history" },
-  perform: (elements, appState) => {
-    const selectedFrame = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    )[0];
-
-    if (selectedFrame && selectedFrame.type === "frame") {
-      return {
-        elements: removeAllElementsFromFrame(elements, selectedFrame, appState),
-        appState: {
-          ...appState,
-          selectedElementIds: {
-            [selectedFrame.id]: true,
-          },
-        },
-        commitToHistory: true,
-      };
-    }
-
-    return {
-      elements,
-      appState,
-      commitToHistory: false,
-    };
-  },
-  contextItemLabel: "labels.removeAllElementsFromFrame",
-  predicate: (elements, appState) => isSingleFrameSelected(elements, appState),
-});
-
-export const actionupdateFrameRendering = register({
-  name: "updateFrameRendering",
-  viewMode: true,
-  trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    return {
-      elements,
-      appState: {
-        ...appState,
-        frameRendering: {
-          ...appState.frameRendering,
-          enabled: !appState.frameRendering.enabled,
-        },
-      },
-      commitToHistory: false,
-    };
-  },
-  contextItemLabel: "labels.updateFrameRendering",
-  checked: (appState: AppState) => appState.frameRendering.enabled,
-});
-
-export const actionSetFrameAsActiveTool = register({
-  name: "setFrameAsActiveTool",
-  trackEvent: { category: "toolbar" },
-  perform: (elements, appState, _, app) => {
-    const nextActiveTool = updateActiveTool(appState, {
-      type: "frame",
-    });
-
-    setCursorForShape(app.canvas, {
-      ...appState,
-      activeTool: nextActiveTool,
-    });
-
-    return {
-      elements,
-      appState: {
-        ...appState,
-        activeTool: updateActiveTool(appState, {
-          type: "frame",
-        }),
-      },
-      commitToHistory: false,
-    };
-  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] &&
-    !event.shiftKey &&
-    !event.altKey &&
-    event.key.toLocaleLowerCase() === KEYS.F,
-});

src/actions/actionGroup.tsx

@@ -17,19 +17,9 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import {
-  ExcalidrawElement,
-  ExcalidrawFrameElement,
-  ExcalidrawTextElement,
-} from "../element/types";
+import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
 import { AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
-import {
-  getElementsInResizingFrame,
-  groupByFrames,
-  removeElementsFromFrame,
-  replaceAllElementsInFrame,
-} from "../frame";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {
@@ -55,9 +45,7 @@ const enableActionGroup = (
   const selectedElements = getSelectedElements(
     getNonDeletedElements(elements),
     appState,
-    {
-      includeBoundTextElement: true,
-    },
+    true,
   );
   return (
     selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
@@ -67,13 +55,11 @@ const enableActionGroup = (
 export const actionGroup = register({
   name: "group",
   trackEvent: { category: "element" },
-  perform: (elements, appState, _, app) => {
+  perform: (elements, appState) => {
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      {
-        includeBoundTextElement: true,
-      },
+      true,
     );
     if (selectedElements.length < 2) {
       // nothing to group
@@ -100,31 +86,9 @@ export const actionGroup = register({
         return { appState, elements, commitToHistory: false };
       }
     }
-
-    let nextElements = [...elements];
-
-    // this includes the case where we are grouping elements inside a frame
-    // and elements outside that frame
-    const groupingElementsFromDifferentFrames =
-      new Set(selectedElements.map((element) => element.frameId)).size > 1;
-    // when it happens, we want to remove elements that are in the frame
-    // and are going to be grouped from the frame (mouthful, I know)
-    if (groupingElementsFromDifferentFrames) {
-      const frameElementsMap = groupByFrames(selectedElements);
-
-      frameElementsMap.forEach((elementsInFrame, frameId) => {
-        nextElements = removeElementsFromFrame(
-          nextElements,
-          elementsInFrame,
-          appState,
-        );
-      });
-    }
-
     const newGroupId = randomId();
     const selectElementIds = arrayToMap(selectedElements);
-
-    nextElements = nextElements.map((element) => {
+    const updatedElements = elements.map((element) => {
       if (!selectElementIds.get(element.id)) {
         return element;
       }
@@ -138,16 +102,17 @@ export const actionGroup = register({
     });
     // keep the z order within the group the same, but move them
     // to the z order of the highest element in the layer stack
-    const elementsInGroup = getElementsInGroup(nextElements, newGroupId);
+    const elementsInGroup = getElementsInGroup(updatedElements, newGroupId);
     const lastElementInGroup = elementsInGroup[elementsInGroup.length - 1];
-    const lastGroupElementIndex = nextElements.lastIndexOf(lastElementInGroup);
-    const elementsAfterGroup = nextElements.slice(lastGroupElementIndex + 1);
-    const elementsBeforeGroup = nextElements
+    const lastGroupElementIndex =
+      updatedElements.lastIndexOf(lastElementInGroup);
+    const elementsAfterGroup = updatedElements.slice(lastGroupElementIndex + 1);
+    const elementsBeforeGroup = updatedElements
       .slice(0, lastGroupElementIndex)
       .filter(
         (updatedElement) => !isElementInGroup(updatedElement, newGroupId),
       );
-    nextElements = [
+    const updatedElementsInOrder = [
       ...elementsBeforeGroup,
       ...elementsInGroup,
       ...elementsAfterGroup,
@@ -157,9 +122,9 @@ export const actionGroup = register({
       appState: selectGroup(
         newGroupId,
         { ...appState, selectedGroupIds: {} },
-        getNonDeletedElements(nextElements),
+        getNonDeletedElements(updatedElementsInOrder),
       ),
-      elements: nextElements,
+      elements: updatedElementsInOrder,
       commitToHistory: true,
     };
   },
@@ -183,23 +148,14 @@ export const actionGroup = register({
 export const actionUngroup = register({
   name: "ungroup",
   trackEvent: { category: "element" },
-  perform: (elements, appState, _, app) => {
+  perform: (elements, appState) => {
     const groupIds = getSelectedGroupIds(appState);
     if (groupIds.length === 0) {
       return { appState, elements, commitToHistory: false };
     }
 
-    let nextElements = [...elements];
-
-    const selectedElements = getSelectedElements(nextElements, appState);
-    const frames = selectedElements
-      .filter((element) => element.frameId)
-      .map((element) =>
-        app.scene.getElement(element.frameId!),
-      ) as ExcalidrawFrameElement[];
-
     const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
-    nextElements = nextElements.map((element) => {
+    const nextElements = elements.map((element) => {
       if (isBoundToContainer(element)) {
         boundTextElementIds.push(element.id);
       }
@@ -218,35 +174,15 @@ export const actionUngroup = register({
     const updateAppState = selectGroupsForSelectedElements(
       { ...appState, selectedGroupIds: {} },
       getNonDeletedElements(nextElements),
-      appState,
     );
 
-    frames.forEach((frame) => {
-      if (frame) {
-        nextElements = replaceAllElementsInFrame(
-          nextElements,
-          getElementsInResizingFrame(nextElements, frame, appState),
-          frame,
-          appState,
-        );
-      }
-    });
-
     // remove binded text elements from selection
-    updateAppState.selectedElementIds = Object.entries(
-      updateAppState.selectedElementIds,
-    ).reduce(
-      (acc: { [key: ExcalidrawElement["id"]]: true }, [id, selected]) => {
-        if (selected && !boundTextElementIds.includes(id)) {
-          acc[id] = true;
-        }
-        return acc;
-      },
-      {},
+    boundTextElementIds.forEach(
+      (id) => (updateAppState.selectedElementIds[id] = false),
     );
-
     return {
       appState: updateAppState,
+
       elements: nextElements,
       commitToHistory: true,
     };

src/actions/actionLinearEditor.ts

@@ -21,9 +21,7 @@ export const actionToggleLinearEditor = register({
     const selectedElement = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      {
-        includeBoundTextElement: true,
-      },
+      true,
     )[0] as ExcalidrawLinearElement;
 
     const editingLinearElement =
@@ -42,9 +40,7 @@ export const actionToggleLinearEditor = register({
     const selectedElement = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
-      {
-        includeBoundTextElement: true,
-      },
+      true,
     )[0] as ExcalidrawLinearElement;
     return appState.editingLinearElement?.elementId === selectedElement.id
       ? "labels.lineEditor.exit"

src/actions/actionMenu.tsx

@@ -67,6 +67,7 @@ export const actionFullScreen = register({
       commitToHistory: false,
     };
   },
+  keyTest: (event) => event.key === KEYS.F && !event[KEYS.CTRL_OR_CMD],
 });
 
 export const actionShortcuts = register({

src/actions/actionNavigate.tsx

@@ -1,4 +1,4 @@
-import { getClientColor } from "../clients";
+import { getClientColors } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
@@ -31,14 +31,15 @@ export const actionGoToCollaborator = register({
       commitToHistory: false,
     };
   },
-  PanelComponent: ({ updateData, data }) => {
+  PanelComponent: ({ appState, updateData, data }) => {
     const [clientId, collaborator] = data as [string, Collaborator];
 
-    const background = getClientColor(clientId);
+    const { background, stroke } = getClientColors(clientId, appState);
 
     return (
       <Avatar
         color={background}
+        border={stroke}
         onClick={() => updateData(collaborator.pointer)}
         name={collaborator.username || ""}
         src={collaborator.avatarUrl}

src/actions/actionProperties.tsx

@@ -102,11 +102,8 @@ const changeProperty = (
   includeBoundText = false,
 ) => {
   const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, {
-      includeBoundTextElement: includeBoundText,
-    }),
+    getSelectedElements(elements, appState, includeBoundText),
   );
-
   return elements.map((element) => {
     if (
       selectedElementIds.get(element.id) ||

src/actions/actionSelectAll.ts

@@ -5,7 +5,6 @@ import { getNonDeletedElements, isTextElement } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { excludeElementsInFramesFromSelection } from "../scene/selection";
 
 export const actionSelectAll = register({
   name: "selectAll",
@@ -14,18 +13,19 @@ export const actionSelectAll = register({
     if (appState.editingLinearElement) {
       return false;
     }
-
-    const selectedElementIds = excludeElementsInFramesFromSelection(
-      elements.filter(
-        (element) =>
+    const selectedElementIds = elements.reduce(
+      (map: Record<ExcalidrawElement["id"], true>, element) => {
+        if (
           !element.isDeleted &&
           !(isTextElement(element) && element.containerId) &&
-          !element.locked,
-      ),
-    ).reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
-      map[element.id] = true;
-      return map;
-    }, {});
+          !element.locked
+        ) {
+          map[element.id] = true;
+        }
+        return map;
+      },
+      {},
+    );
 
     return {
       appState: selectGroupsForSelectedElements(
@@ -41,7 +41,6 @@ export const actionSelectAll = register({
           selectedElementIds,
         },
         getNonDeletedElements(elements),
-        appState,
       ),
       commitToHistory: true,
     };

src/actions/actionStyles.ts

@@ -20,7 +20,6 @@ import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
   getDefaultRoundnessTypeForElement,
-  isFrameElement,
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 
@@ -65,9 +64,7 @@ export const actionPasteStyles = register({
       return { elements, commitToHistory: false };
     }
 
-    const selectedElements = getSelectedElements(elements, appState, {
-      includeBoundTextElement: true,
-    });
+    const selectedElements = getSelectedElements(elements, appState, true);
     const selectedElementIds = selectedElements.map((element) => element.id);
     return {
       elements: elements.map((element) => {
@@ -130,13 +127,6 @@ export const actionPasteStyles = register({
             });
           }
 
-          if (isFrameElement(element)) {
-            newElement = newElementWith(newElement, {
-              roundness: null,
-              backgroundColor: "transparent",
-            });
-          }
-
           return newElement;
         }
         return element;

src/actions/types.ts

@@ -82,8 +82,7 @@ export type ActionName =
   | "zoomOut"
   | "resetZoom"
   | "zoomToFit"
-  | "zoomToFitSelection"
-  | "zoomToFitSelectionInViewport"
+  | "zoomToSelection"
   | "changeFontFamily"
   | "changeTextAlign"
   | "changeVerticalAlign"
@@ -117,11 +116,6 @@ export type ActionName =
   | "toggleLinearEditor"
   | "toggleEraserTool"
   | "toggleHandTool"
-  | "selectAllElementsInFrame"
-  | "removeAllElementsFromFrame"
-  | "updateFrameRendering"
-  | "setFrameAsActiveTool"
-  | "createContainerFromText"
   | "wrapTextInContainer";
 
 export type PanelComponentProps = {

src/align.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { BoundingBox, getCommonBoundingBox } from "./element/bounds";
+import { Box, getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
 
 export interface Alignment {
@@ -33,7 +33,7 @@ export const alignElements = (
 
 const calculateTranslation = (
   group: ExcalidrawElement[],
-  selectionBoundingBox: BoundingBox,
+  selectionBoundingBox: Box,
   { axis, position }: Alignment,
 ): { x: number; y: number } => {
   const groupBoundingBox = getCommonBoundingBox(group);

src/analytics.ts

@@ -5,9 +5,6 @@ export const trackEvent = (
   value?: number,
 ) => {
   try {
-    // place here categories that you want to track as events
-    // KEEP IN MIND THE PRICING
-    const ALLOWED_CATEGORIES_TO_TRACK = [] as string[];
     // Uncomment the next line to track locally
     // console.log("Track Event", { category, action, label, value });
 
@@ -15,8 +12,12 @@ export const trackEvent = (
       return;
     }
 
-    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {
-      return;
+    if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID && window.gtag) {
+      window.gtag("event", action, {
+        event_category: category,
+        event_label: label,
+        value,
+      });
     }
 
     if (window.sa_event) {
@@ -26,6 +27,14 @@ export const trackEvent = (
         value,
       });
     }
+
+    if (window.fathom) {
+      window.fathom.trackEvent(action, {
+        category,
+        label,
+        value,
+      });
+    }
   } catch (error) {
     console.error("error during analytics", error);
   }

src/appState.ts

@@ -78,16 +78,11 @@ export const getDefaultAppState = (): Omit<
     scrollY: 0,
     selectedElementIds: {},
     selectedGroupIds: {},
-    selectedElementsAreBeingDragged: false,
     selectionElement: null,
     shouldCacheIgnoreZoom: false,
     showStats: false,
     startBoundElement: null,
     suggestedBindings: [],
-    frameRendering: { enabled: true, clip: true, name: true, outline: true },
-    frameToHighlight: null,
-    editingFrame: null,
-    elementsToHighlight: null,
     toast: null,
     viewBackgroundColor: COLOR_PALETTE.white,
     zenModeEnabled: false,
@@ -181,20 +176,11 @@ const APP_STATE_STORAGE_CONF = (<
   scrollY: { browser: true, export: false, server: false },
   selectedElementIds: { browser: true, export: false, server: false },
   selectedGroupIds: { browser: true, export: false, server: false },
-  selectedElementsAreBeingDragged: {
-    browser: false,
-    export: false,
-    server: false,
-  },
   selectionElement: { browser: false, export: false, server: false },
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   showStats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
-  frameRendering: { browser: false, export: false, server: false },
-  frameToHighlight: { browser: false, export: false, server: false },
-  editingFrame: { browser: false, export: false, server: false },
-  elementsToHighlight: { browser: false, export: false, server: false },
   toast: { browser: false, export: false, server: false },
   viewBackgroundColor: { browser: true, export: true, server: true },
   width: { browser: false, export: false, server: false },

src/charts.ts

@@ -180,7 +180,7 @@ const commonProps = {
   locked: false,
 } as const;
 
-const getChartDimensions = (spreadsheet: Spreadsheet) => {
+const getChartDimentions = (spreadsheet: Spreadsheet) => {
   const chartWidth =
     (BAR_WIDTH + BAR_GAP) * spreadsheet.values.length + BAR_GAP;
   const chartHeight = BAR_HEIGHT + BAR_GAP * 2;
@@ -250,7 +250,7 @@ const chartLines = (
   groupId: string,
   backgroundColor: string,
 ): ChartElements => {
-  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
+  const { chartWidth, chartHeight } = getChartDimentions(spreadsheet);
   const xLine = newLinearElement({
     backgroundColor,
     groupIds: [groupId],
@@ -313,7 +313,7 @@ const chartBaseElements = (
   backgroundColor: string,
   debug?: boolean,
 ): ChartElements => {
-  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
+  const { chartWidth, chartHeight } = getChartDimentions(spreadsheet);
 
   const title = spreadsheet.title
     ? newTextElement({

src/clients.ts

@@ -1,31 +1,31 @@
-function hashToInteger(id: string) {
-  let hash = 0;
-  if (id.length === 0) {
-    return hash;
-  }
-  for (let i = 0; i < id.length; i++) {
-    const char = id.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-  }
-  return hash;
-}
+import {
+  DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
+  DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
+  getAllColorsSpecificShade,
+} from "./colors";
+import { AppState } from "./types";
 
-export const getClientColor = (
-  /**
-   * any uniquely identifying key, such as user id or socket id
-   */
-  id: string,
-) => {
-  // to get more even distribution in case `id` is not uniformly distributed to
-  // begin with, we hash it
-  const hash = Math.abs(hashToInteger(id));
-  // we want to get a multiple of 10 number in the range of 0-360 (in other
-  // words a hue value of step size 10). There are 37 such values including 0.
-  const hue = (hash % 37) * 10;
-  const saturation = 100;
-  const lightness = 83;
+const BG_COLORS = getAllColorsSpecificShade(
+  DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
+);
+const STROKE_COLORS = getAllColorsSpecificShade(
+  DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
+);
 
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+export const getClientColors = (clientId: string, appState: AppState) => {
+  if (appState?.collaborators) {
+    const currentUser = appState.collaborators.get(clientId);
+    if (currentUser?.color) {
+      return currentUser.color;
+    }
+  }
+  // Naive way of getting an integer out of the clientId
+  const sum = clientId.split("").reduce((a, str) => a + str.charCodeAt(0), 0);
+
+  return {
+    background: BG_COLORS[sum % BG_COLORS.length],
+    stroke: STROKE_COLORS[sum % STROKE_COLORS.length],
+  };
 };
 
 /**

src/clipboard.ts

@@ -7,9 +7,6 @@ import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
-import { deepCopyElement } from "./element/newElement";
-import { mutateElement } from "./element/mutateElement";
-import { getContainingFrame } from "./frame";
 import { isPromiseLike, isTestEnv } from "./utils";
 
 type ElementsClipboard = {
@@ -60,9 +57,6 @@ export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
   files: BinaryFiles | null,
 ) => {
-  const framesToCopy = new Set(
-    elements.filter((element) => element.type === "frame"),
-  );
   let foundFile = false;
 
   const _files = elements.reduce((acc, element) => {
@@ -84,20 +78,7 @@ export const copyToClipboard = async (
   // select binded text elements when copying
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements: elements.map((element) => {
-      if (
-        getContainingFrame(element) &&
-        !framesToCopy.has(getContainingFrame(element)!)
-      ) {
-        const copiedElement = deepCopyElement(element);
-        mutateElement(copiedElement, {
-          frameId: null,
-        });
-        return copiedElement;
-      }
-
-      return element;
-    }),
+    elements,
     files: files ? _files : undefined,
   };
   const json = JSON.stringify(contents);

src/components/Actions.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
@@ -35,9 +35,6 @@ import {
 } from "../element/textElement";
 
 import "./Actions.scss";
-import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import { extraToolsIcon, frameToolIcon } from "./icons";
-import { KEYS } from "../keys";
 
 export const SelectedShapeActions = ({
   appState,
@@ -92,8 +89,7 @@ export const SelectedShapeActions = ({
       <div>
         {((hasStrokeColor(appState.activeTool.type) &&
           appState.activeTool.type !== "image" &&
-          commonSelectedType !== "image" &&
-          commonSelectedType !== "frame") ||
+          commonSelectedType !== "image") ||
           targetElements.some((element) => hasStrokeColor(element.type))) &&
           renderAction("changeStrokeColor")}
       </div>
@@ -224,78 +220,28 @@ export const ShapesSwitcher = ({
   setAppState: React.Component<any, UIAppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: UIAppState;
-}) => {
-  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
-  const device = useDevice();
-  return (
-    <>
-      {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
-        const label = t(`toolBar.${value}`);
-        const letter =
-          key && capitalizeString(typeof key === "string" ? key : key[0]);
-        const shortcut = letter
-          ? `${letter} ${t("helpDialog.or")} ${numericKey}`
-          : `${numericKey}`;
-        return (
-          <ToolButton
-            className={clsx("Shape", { fillable })}
-            key={value}
-            type="radio"
-            icon={icon}
-            checked={activeTool.type === value}
-            name="editor-current-shape"
-            title={`${capitalizeString(label)} — ${shortcut}`}
-            keyBindingLabel={numericKey || letter}
-            aria-label={capitalizeString(label)}
-            aria-keyshortcuts={shortcut}
-            data-testid={`toolbar-${value}`}
-            onPointerDown={({ pointerType }) => {
-              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
-              }
-            }}
-            onChange={({ pointerType }) => {
-              if (appState.activeTool.type !== value) {
-                trackEvent("toolbar", value, "ui");
-              }
-              const nextActiveTool = updateActiveTool(appState, {
-                type: value,
-              });
-              setAppState({
-                activeTool: nextActiveTool,
-                multiElement: null,
-                selectedElementIds: {},
-              });
-              setCursorForShape(canvas, {
-                ...appState,
-                activeTool: nextActiveTool,
-              });
-              if (value === "image") {
-                onImageAction({ pointerType });
-              }
-            }}
-          />
-        );
-      })}
-      <div className="App-toolbar__divider" />
-      {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
-      {device.isMobile ? (
+}) => (
+  <>
+    {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
+      const label = t(`toolBar.${value}`);
+      const letter =
+        key && capitalizeString(typeof key === "string" ? key : key[0]);
+      const shortcut = letter
+        ? `${letter} ${t("helpDialog.or")} ${numericKey}`
+        : `${numericKey}`;
+      return (
         <ToolButton
-          className={clsx("Shape", { fillable: false })}
+          className={clsx("Shape", { fillable })}
+          key={value}
           type="radio"
-          icon={frameToolIcon}
-          checked={activeTool.type === "frame"}
+          icon={icon}
+          checked={activeTool.type === value}
           name="editor-current-shape"
-          title={`${capitalizeString(
-            t("toolBar.frame"),
-          )} — ${KEYS.F.toLocaleUpperCase()}`}
-          keyBindingLabel={KEYS.F.toLocaleUpperCase()}
-          aria-label={capitalizeString(t("toolBar.frame"))}
-          aria-keyshortcuts={KEYS.F.toLocaleUpperCase()}
-          data-testid={`toolbar-frame`}
+          title={`${capitalizeString(label)} — ${shortcut}`}
+          keyBindingLabel={numericKey || letter}
+          aria-label={capitalizeString(label)}
+          aria-keyshortcuts={shortcut}
+          data-testid={`toolbar-${value}`}
           onPointerDown={({ pointerType }) => {
             if (!appState.penDetected && pointerType === "pen") {
               setAppState({
@@ -305,54 +251,30 @@ export const ShapesSwitcher = ({
             }
           }}
           onChange={({ pointerType }) => {
-            trackEvent("toolbar", "frame", "ui");
+            if (appState.activeTool.type !== value) {
+              trackEvent("toolbar", value, "ui");
+            }
             const nextActiveTool = updateActiveTool(appState, {
-              type: "frame",
+              type: value,
             });
             setAppState({
               activeTool: nextActiveTool,
               multiElement: null,
               selectedElementIds: {},
             });
+            setCursorForShape(canvas, {
+              ...appState,
+              activeTool: nextActiveTool,
+            });
+            if (value === "image") {
+              onImageAction({ pointerType });
+            }
           }}
         />
-      ) : (
-        <DropdownMenu open={isExtraToolsMenuOpen}>
-          <DropdownMenu.Trigger
-            className="App-toolbar__extra-tools-trigger"
-            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
-            title={t("toolBar.extraTools")}
-          >
-            {extraToolsIcon}
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content
-            onClickOutside={() => setIsExtraToolsMenuOpen(false)}
-            onSelect={() => setIsExtraToolsMenuOpen(false)}
-            className="App-toolbar__extra-tools-dropdown"
-          >
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "frame",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={frameToolIcon}
-              shortcut={KEYS.F.toLocaleUpperCase()}
-              data-testid="toolbar-frame"
-            >
-              {t("toolBar.frame")}
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu>
-      )}
-    </>
-  );
-};
+      );
+    })}
+  </>
+);
 
 export const ZoomActions = ({
   renderAction,

src/components/Avatar.scss

@@ -10,9 +10,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    color: $oc-white;
     cursor: pointer;
-    font-size: 0.75rem;
-    font-weight: 800;
+    font-size: 0.625rem;
+    font-weight: 500;
     line-height: 1;
 
     &-img {

src/components/Avatar.tsx

@@ -6,6 +6,7 @@ import { getNameInitial } from "../clients";
 type AvatarProps = {
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   color: string;
+  border: string;
   name: string;
   src?: string;
 };

src/components/ColorPicker/ColorPicker.tsx

@@ -1,4 +1,4 @@
-import { isInteractive, isTransparent, isWritableElement } from "../../utils";
+import { isTransparent, isWritableElement } from "../../utils";
 import { ExcalidrawElement } from "../../element/types";
 import { AppState } from "../../types";
 import { TopPicks } from "./TopPicks";
@@ -121,14 +121,11 @@ const ColorPickerPopupContent = ({
           }
         }}
         onCloseAutoFocus={(e) => {
-          e.stopPropagation();
-          // prevents focusing the trigger
           e.preventDefault();
+          e.stopPropagation();
 
-          // return focus to excalidraw container unless
-          // user focuses an interactive element, such as a button, or
-          // enters the text editor by clicking on canvas with the text tool
-          if (container && !isInteractive(document.activeElement)) {
+          // return focus to excalidraw container
+          if (container) {
             container.focus();
           }
 

src/components/Dialog.tsx

@@ -17,34 +17,16 @@ import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
 import { jotaiScope } from "../jotai";
 
-export type DialogSize = number | "small" | "regular" | "wide" | undefined;
-
 export interface DialogProps {
   children: React.ReactNode;
   className?: string;
-  size?: DialogSize;
+  size?: "small" | "regular" | "wide";
   onCloseRequest(): void;
   title: React.ReactNode | false;
   autofocus?: boolean;
   closeOnClickOutside?: boolean;
 }
 
-function getDialogSize(size: DialogSize): number {
-  if (size && typeof size === "number") {
-    return size;
-  }
-
-  switch (size) {
-    case "small":
-      return 550;
-    case "wide":
-      return 1024;
-    case "regular":
-    default:
-      return 800;
-  }
-}
-
 export const Dialog = (props: DialogProps) => {
   const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
   const [lastActiveElement] = useState(document.activeElement);
@@ -103,7 +85,9 @@ export const Dialog = (props: DialogProps) => {
     <Modal
       className={clsx("Dialog", props.className)}
       labelledBy="dialog-title"
-      maxWidth={getDialogSize(props.size)}
+      maxWidth={
+        props.size === "wide" ? 1024 : props.size === "small" ? 550 : 800
+      }
       onCloseRequest={onClose}
       closeOnClickOutside={props.closeOnClickOutside}
     >

src/components/FilledButton.scss

@@ -2,140 +2,20 @@
 
 .excalidraw {
   .ExcButton {
-    --text-color: transparent;
-    --border-color: transparent;
-    --back-color: transparent;
-
-    color: var(--text-color);
-    background-color: var(--back-color);
-    border-color: var(--border-color);
-
     &--color-primary {
-      &.ExcButton--variant-filled {
-        --text-color: var(--input-bg-color);
-        --back-color: var(--color-primary);
+      color: var(--input-bg-color);
 
-        &:hover {
-          --back-color: var(--color-primary-darker);
-        }
-
-        &:active {
-          --back-color: var(--color-primary-darkest);
-        }
-      }
-
-      &.ExcButton--variant-outlined,
-      &.ExcButton--variant-icon {
-        --text-color: var(--color-primary);
-        --border-color: var(--color-primary);
-        --back-color: var(--input-bg-color);
-
-        &:hover {
-          --text-color: var(--color-primary-darker);
-          --border-color: var(--color-primary-darker);
-        }
-
-        &:active {
-          --text-color: var(--color-primary-darkest);
-          --border-color: var(--color-primary-darkest);
-        }
-      }
+      --accent-color: var(--color-primary);
+      --accent-color-hover: var(--color-primary-darker);
+      --accent-color-active: var(--color-primary-darkest);
     }
 
     &--color-danger {
-      &.ExcButton--variant-filled {
-        --text-color: var(--color-danger-text);
-        --back-color: var(--color-danger-dark);
+      color: var(--input-bg-color);
 
-        &:hover {
-          --back-color: var(--color-danger-darker);
-        }
-
-        &:active {
-          --back-color: var(--color-danger-darkest);
-        }
-      }
-
-      &.ExcButton--variant-outlined,
-      &.ExcButton--variant-icon {
-        --text-color: var(--color-danger);
-        --border-color: var(--color-danger);
-        --back-color: transparent;
-
-        &:hover {
-          --text-color: var(--color-danger-darkest);
-          --border-color: var(--color-danger-darkest);
-        }
-
-        &:active {
-          --text-color: var(--color-danger-darker);
-          --border-color: var(--color-danger-darker);
-        }
-      }
-    }
-
-    &--color-muted {
-      &.ExcButton--variant-filled {
-        --text-color: var(--island-bg-color);
-        --back-color: var(--color-gray-50);
-
-        &:hover {
-          --back-color: var(--color-gray-60);
-        }
-
-        &:active {
-          --back-color: var(--color-gray-80);
-        }
-      }
-
-      &.ExcButton--variant-outlined,
-      &.ExcButton--variant-icon {
-        --text-color: var(--color-muted-background);
-        --border-color: var(--color-muted);
-        --back-color: var(--island-bg-color);
-
-        &:hover {
-          --text-color: var(--color-muted-background-darker);
-          --border-color: var(--color-muted-darker);
-        }
-
-        &:active {
-          --text-color: var(--color-muted-background-darker);
-          --border-color: var(--color-muted-darkest);
-        }
-      }
-    }
-
-    &--color-warning {
-      &.ExcButton--variant-filled {
-        --text-color: black;
-        --back-color: var(--color-warning-dark);
-
-        &:hover {
-          --back-color: var(--color-warning-darker);
-        }
-
-        &:active {
-          --back-color: var(--color-warning-darkest);
-        }
-      }
-
-      &.ExcButton--variant-outlined,
-      &.ExcButton--variant-icon {
-        --text-color: var(--color-warning-dark);
-        --border-color: var(--color-warning-dark);
-        --back-color: var(--input-bg-color);
-
-        &:hover {
-          --text-color: var(--color-warning-darker);
-          --border-color: var(--color-warning-darker);
-        }
-
-        &:active {
-          --text-color: var(--color-warning-darkest);
-          --border-color: var(--color-warning-darkest);
-        }
-      }
+      --accent-color: var(--color-danger);
+      --accent-color-hover: #d65550;
+      --accent-color-active: #d1413c;
     }
 
     display: flex;
@@ -145,8 +25,6 @@
     flex-wrap: nowrap;
 
     border-radius: 0.5rem;
-    border-width: 1px;
-    border-style: solid;
 
     font-family: "Assistant";
 
@@ -155,9 +33,9 @@
     transition: all 150ms ease-out;
 
     &--size-large {
-      font-weight: 600;
+      font-weight: 400;
       font-size: 0.875rem;
-      min-height: 3rem;
+      height: 3rem;
       padding: 0.5rem 1.5rem;
       gap: 0.75rem;
 
@@ -167,22 +45,48 @@
     &--size-medium {
       font-weight: 600;
       font-size: 0.75rem;
-      min-height: 2.5rem;
+      height: 2.5rem;
       padding: 0.5rem 1rem;
       gap: 0.5rem;
 
       letter-spacing: normal;
     }
 
+    &--variant-filled {
+      background: var(--accent-color);
+      border: 1px solid transparent;
+
+      &:hover {
+        background: var(--accent-color-hover);
+      }
+
+      &:active {
+        background: var(--accent-color-active);
+      }
+    }
+
+    &--variant-outlined,
+    &--variant-icon {
+      border: 1px solid var(--accent-color);
+      color: var(--accent-color);
+      background: transparent;
+
+      &:hover {
+        border: 1px solid var(--accent-color-hover);
+        color: var(--accent-color-hover);
+      }
+
+      &:active {
+        border: 1px solid var(--accent-color-active);
+        color: var(--accent-color-active);
+      }
+    }
+
     &--variant-icon {
       padding: 0.5rem 0.75rem;
       width: 3rem;
     }
 
-    &--fullWidth {
-      width: 100%;
-    }
-
     &__icon {
       width: 1.25rem;
       height: 1.25rem;

src/components/FilledButton.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import "./FilledButton.scss";
 
 export type ButtonVariant = "filled" | "outlined" | "icon";
-export type ButtonColor = "primary" | "danger" | "warning" | "muted";
+export type ButtonColor = "primary" | "danger";
 export type ButtonSize = "medium" | "large";
 
 export type FilledButtonProps = {
@@ -17,7 +17,6 @@ export type FilledButtonProps = {
   color?: ButtonColor;
   size?: ButtonSize;
   className?: string;
-  fullWidth?: boolean;
 
   startIcon?: React.ReactNode;
 };
@@ -32,7 +31,6 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
       variant = "filled",
       color = "primary",
       size = "medium",
-      fullWidth,
       className,
     },
     ref,
@@ -44,7 +42,6 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
           `ExcButton--color-${color}`,
           `ExcButton--variant-${variant}`,
           `ExcButton--size-${size}`,
-          { "ExcButton--fullWidth": fullWidth },
           className,
         )}
         onClick={onClick}

src/components/HelpDialog.tsx

@@ -12,7 +12,7 @@ const Header = () => (
   <div className="HelpDialog__header">
     <a
       className="HelpDialog__btn"
-      href="https://docs.excalidraw.com"
+      href="https://github.com/excalidraw/excalidraw#documentation"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -164,7 +164,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("toolBar.eraser")}
               shortcuts={[KEYS.E, KEYS["0"]]}
             />
-            <Shortcut label={t("toolBar.frame")} shortcuts={[KEYS.F]} />
             <Shortcut
               label={t("labels.eyeDropper")}
               shortcuts={[KEYS.I, "Shift+S", "Shift+G"]}

src/components/ImageExportDialog.tsx

@@ -84,10 +84,7 @@ const ImageExportModal = ({
   const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
-    ? getSelectedElements(elements, appState, {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      })
+    ? getSelectedElements(elements, appState, true)
     : elements;
 
   useEffect(() => {

src/components/LayerUI.tsx

@@ -41,7 +41,6 @@ import { jotaiScope } from "../jotai";
 import { Provider, useAtom, useAtomValue } from "jotai";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
-import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
 import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
@@ -100,15 +99,6 @@ const DefaultMainMenu: React.FC<{
   );
 };
 
-const DefaultOverwriteConfirmDialog = () => {
-  return (
-    <OverwriteConfirmDialog __fallback>
-      <OverwriteConfirmDialog.Actions.SaveToDisk />
-      <OverwriteConfirmDialog.Actions.ExportToImage />
-    </OverwriteConfirmDialog>
-  );
-};
-
 const LayerUI = ({
   actionManager,
   appState,
@@ -214,7 +204,12 @@ const LayerUI = ({
     return (
       <FixedSideContainer side="top">
         <div className="App-menu App-menu_top">
-          <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
+          <Stack.Col
+            gap={6}
+            className={clsx("App-menu_top__left", {
+              "disable-pointerEvents": appState.zenModeEnabled,
+            })}
+          >
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
@@ -259,7 +254,7 @@ const LayerUI = ({
                             title={t("toolBar.lock")}
                           />
 
-                          <div className="App-toolbar__divider" />
+                          <div className="App-toolbar__divider"></div>
 
                           <HandButton
                             checked={isHandToolActive(appState)}
@@ -353,7 +348,6 @@ const LayerUI = ({
       >
         {t("toolBar.library")}
       </DefaultSidebar.Trigger>
-      <DefaultOverwriteConfirmDialog />
       {/* ------------------------------------------------------------------ */}
 
       {appState.isLoading && <LoadingMessage delay={250} />}
@@ -385,7 +379,6 @@ const LayerUI = ({
         />
       )}
       <ActiveConfirmDialog />
-      <tunnels.OverwriteConfirmDialogTunnel.Out />
       {renderImageExportDialog()}
       {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
@@ -399,7 +392,7 @@ const LayerUI = ({
           }
         />
       )}
-      {device.isMobile && (
+      {device.isMobile && !eyeDropperState && (
         <MobileMenu
           appState={appState}
           elements={elements}

src/components/LibraryMenu.tsx

@@ -148,11 +148,7 @@ const usePendingElementsMemo = (
   appState: UIAppState,
   elements: readonly NonDeletedExcalidrawElement[],
 ) => {
-  const create = () =>
-    getSelectedElements(elements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    });
+  const create = () => getSelectedElements(elements, appState, true);
   const val = useRef(create());
   const prevAppState = useRef<UIAppState>(appState);
   const prevElements = useRef(elements);

src/components/Modal.scss

@@ -3,7 +3,7 @@
 .excalidraw {
   &.excalidraw-modal-container {
     position: absolute;
-    z-index: var(--zIndex-modal);
+    z-index: 10;
   }
 
   .Modal {

src/components/OverwriteConfirm/OverwriteConfirm.scss

@@ -1,126 +0,0 @@
-@import "../../css/variables.module";
-
-.excalidraw {
-  .OverwriteConfirm {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
-    isolation: isolate;
-
-    h3 {
-      margin: 0;
-
-      font-weight: 700;
-      font-size: 1.3125rem;
-      line-height: 130%;
-      align-self: flex-start;
-
-      color: var(--text-primary-color);
-    }
-
-    &__Description {
-      box-sizing: border-box;
-
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      gap: 1rem;
-
-      @include isMobile {
-        flex-direction: column;
-        text-align: center;
-      }
-
-      padding: 2.5rem;
-
-      background: var(--color-danger-background);
-      border-radius: 0.5rem;
-
-      font-family: "Assistant";
-      font-style: normal;
-      font-weight: 400;
-      font-size: 1rem;
-      line-height: 150%;
-
-      color: var(--color-danger-color);
-
-      &__spacer {
-        flex-grow: 1;
-      }
-
-      &__icon {
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 2.5rem;
-        background: var(--color-danger-icon-background);
-        width: 3.5rem;
-        height: 3.5rem;
-
-        padding: 0.75rem;
-
-        svg {
-          color: var(--color-danger-icon-color);
-          width: 1.5rem;
-          height: 1.5rem;
-        }
-      }
-
-      &.OverwriteConfirm__Description--color-warning {
-        background: var(--color-warning-background);
-        color: var(--color-warning-color);
-
-        .OverwriteConfirm__Description__icon {
-          background: var(--color-warning-icon-background);
-          flex: 0 0 auto;
-
-          svg {
-            color: var(--color-warning-icon-color);
-          }
-        }
-      }
-    }
-
-    &__Actions {
-      display: flex;
-      flex-direction: row;
-      align-items: stretch;
-      justify-items: stretch;
-      justify-content: center;
-      gap: 1.5rem;
-
-      @include isMobile {
-        flex-direction: column;
-      }
-
-      &__Action {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 1.5rem;
-        gap: 0.75rem;
-        flex-basis: 50%;
-        flex-grow: 0;
-
-        &__content {
-          height: 100%;
-          font-size: 0.875rem;
-          text-align: center;
-        }
-
-        h4 {
-          font-weight: 700;
-          font-size: 1.125rem;
-          line-height: 130%;
-
-          margin: 0;
-
-          color: var(--text-primary-color);
-        }
-      }
-    }
-  }
-}

src/components/OverwriteConfirm/OverwriteConfirm.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { useAtom } from "jotai";
-
-import { useTunnels } from "../../context/tunnels";
-import { jotaiScope } from "../../jotai";
-import { Dialog } from "../Dialog";
-import { withInternalFallback } from "../hoc/withInternalFallback";
-import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
-
-import { FilledButton } from "../FilledButton";
-import { alertTriangleIcon } from "../icons";
-import { Actions, Action } from "./OverwriteConfirmActions";
-import "./OverwriteConfirm.scss";
-
-export type OverwriteConfirmDialogProps = {
-  children: React.ReactNode;
-};
-
-const OverwriteConfirmDialog = Object.assign(
-  withInternalFallback(
-    "OverwriteConfirmDialog",
-    ({ children }: OverwriteConfirmDialogProps) => {
-      const { OverwriteConfirmDialogTunnel } = useTunnels();
-      const [overwriteConfirmState, setState] = useAtom(
-        overwriteConfirmStateAtom,
-        jotaiScope,
-      );
-
-      if (!overwriteConfirmState.active) {
-        return null;
-      }
-
-      const handleClose = () => {
-        overwriteConfirmState.onClose();
-        setState((state) => ({ ...state, active: false }));
-      };
-
-      const handleConfirm = () => {
-        overwriteConfirmState.onConfirm();
-        setState((state) => ({ ...state, active: false }));
-      };
-
-      return (
-        <OverwriteConfirmDialogTunnel.In>
-          <Dialog onCloseRequest={handleClose} title={false} size={916}>
-            <div className="OverwriteConfirm">
-              <h3>{overwriteConfirmState.title}</h3>
-              <div
-                className={`OverwriteConfirm__Description OverwriteConfirm__Description--color-${overwriteConfirmState.color}`}
-              >
-                <div className="OverwriteConfirm__Description__icon">
-                  {alertTriangleIcon}
-                </div>
-                <div>{overwriteConfirmState.description}</div>
-                <div className="OverwriteConfirm__Description__spacer"></div>
-                <FilledButton
-                  color={overwriteConfirmState.color}
-                  size="large"
-                  label={overwriteConfirmState.actionLabel}
-                  onClick={handleConfirm}
-                />
-              </div>
-              <Actions>{children}</Actions>
-            </div>
-          </Dialog>
-        </OverwriteConfirmDialogTunnel.In>
-      );
-    },
-  ),
-  {
-    Actions,
-    Action,
-  },
-);
-
-export { OverwriteConfirmDialog };

src/components/OverwriteConfirm/OverwriteConfirmActions.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-import { FilledButton } from "../FilledButton";
-import { useExcalidrawActionManager, useExcalidrawSetAppState } from "../App";
-import { actionSaveFileToDisk } from "../../actions";
-import { useI18n } from "../../i18n";
-import { actionChangeExportEmbedScene } from "../../actions/actionExport";
-
-export type ActionProps = {
-  title: string;
-  children: React.ReactNode;
-  actionLabel: string;
-  onClick: () => void;
-};
-
-export const Action = ({
-  title,
-  children,
-  actionLabel,
-  onClick,
-}: ActionProps) => {
-  return (
-    <div className="OverwriteConfirm__Actions__Action">
-      <h4>{title}</h4>
-      <div className="OverwriteConfirm__Actions__Action__content">
-        {children}
-      </div>
-      <FilledButton
-        variant="outlined"
-        color="muted"
-        label={actionLabel}
-        size="large"
-        fullWidth
-        onClick={onClick}
-      />
-    </div>
-  );
-};
-
-export const ExportToImage = () => {
-  const { t } = useI18n();
-  const actionManager = useExcalidrawActionManager();
-  const setAppState = useExcalidrawSetAppState();
-
-  return (
-    <Action
-      title={t("overwriteConfirm.action.exportToImage.title")}
-      actionLabel={t("overwriteConfirm.action.exportToImage.button")}
-      onClick={() => {
-        actionManager.executeAction(actionChangeExportEmbedScene, "ui", true);
-        setAppState({ openDialog: "imageExport" });
-      }}
-    >
-      {t("overwriteConfirm.action.exportToImage.description")}
-    </Action>
-  );
-};
-
-export const SaveToDisk = () => {
-  const { t } = useI18n();
-  const actionManager = useExcalidrawActionManager();
-
-  return (
-    <Action
-      title={t("overwriteConfirm.action.saveToDisk.title")}
-      actionLabel={t("overwriteConfirm.action.saveToDisk.button")}
-      onClick={() => {
-        actionManager.executeAction(actionSaveFileToDisk, "ui");
-      }}
-    >
-      {t("overwriteConfirm.action.saveToDisk.description")}
-    </Action>
-  );
-};
-
-const Actions = Object.assign(
-  ({ children }: { children: React.ReactNode }) => {
-    return <div className="OverwriteConfirm__Actions">{children}</div>;
-  },
-  {
-    ExportToImage,
-    SaveToDisk,
-  },
-);
-
-export { Actions };

src/components/OverwriteConfirm/OverwriteConfirmState.ts

@@ -1,46 +0,0 @@
-import { atom } from "jotai";
-import { jotaiStore } from "../../jotai";
-import React from "react";
-
-export type OverwriteConfirmState =
-  | {
-      active: true;
-      title: string;
-      description: React.ReactNode;
-      actionLabel: string;
-      color: "danger" | "warning";
-
-      onClose: () => void;
-      onConfirm: () => void;
-      onReject: () => void;
-    }
-  | { active: false };
-
-export const overwriteConfirmStateAtom = atom<OverwriteConfirmState>({
-  active: false,
-});
-
-export async function openConfirmModal({
-  title,
-  description,
-  actionLabel,
-  color,
-}: {
-  title: string;
-  description: React.ReactNode;
-  actionLabel: string;
-  color: "danger" | "warning";
-}) {
-  return new Promise<boolean>((resolve) => {
-    jotaiStore.set(overwriteConfirmStateAtom, {
-      active: true,
-      onConfirm: () => resolve(true),
-      onClose: () => resolve(false),
-      onReject: () => resolve(false),
-      title,
-      description,
-      actionLabel,
-      color,
-    });
-  });
-}

src/components/ShareableLinkDialog.scss

@@ -1,91 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .ShareableLinkDialog {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-
-    color: var(--text-primary-color);
-
-    ::selection {
-      background: var(--color-primary-light-darker);
-    }
-
-    h3 {
-      font-family: "Assistant";
-      font-weight: 700;
-      font-size: 1.313rem;
-      line-height: 130%;
-
-      margin: 0;
-    }
-
-    &__popover {
-      @keyframes RoomDialog__popover__scaleIn {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-
-      box-sizing: border-box;
-      z-index: 100;
-
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: flex-start;
-      padding: 0.125rem 0.5rem;
-      gap: 0.125rem;
-
-      height: 1.125rem;
-
-      border: none;
-      border-radius: 0.6875rem;
-
-      font-family: "Assistant";
-      font-style: normal;
-      font-weight: 600;
-      font-size: 0.75rem;
-      line-height: 110%;
-
-      background: var(--color-success-lighter);
-      color: var(--color-success);
-
-      & > svg {
-        width: 0.875rem;
-        height: 0.875rem;
-      }
-
-      transform-origin: var(--radix-popover-content-transform-origin);
-      animation: RoomDialog__popover__scaleIn 150ms ease-out;
-    }
-
-    &__linkRow {
-      display: flex;
-      flex-direction: row;
-      align-items: flex-end;
-      gap: 0.75rem;
-    }
-
-    &__description {
-      border-top: 1px solid var(--color-gray-20);
-
-      padding: 0.5rem 0.5rem 0;
-      font-weight: 400;
-      font-size: 0.75rem;
-      line-height: 150%;
-
-      & p {
-        margin: 0;
-      }
-
-      & p + p {
-        margin-top: 1em;
-      }
-    }
-  }
-}

src/components/ShareableLinkDialog.tsx

@@ -1,91 +0,0 @@
-import { useRef, useState } from "react";
-import * as Popover from "@radix-ui/react-popover";
-
-import { copyTextToSystemClipboard } from "../clipboard";
-import { useI18n } from "../i18n";
-
-import { Dialog } from "./Dialog";
-import { TextField } from "./TextField";
-import { FilledButton } from "./FilledButton";
-import { copyIcon, tablerCheckIcon } from "./icons";
-
-import "./ShareableLinkDialog.scss";
-
-export type ShareableLinkDialogProps = {
-  link: string;
-
-  onCloseRequest: () => void;
-  setErrorMessage: (error: string) => void;
-};
-
-export const ShareableLinkDialog = ({
-  link,
-  onCloseRequest,
-  setErrorMessage,
-}: ShareableLinkDialogProps) => {
-  const { t } = useI18n();
-  const [justCopied, setJustCopied] = useState(false);
-  const timerRef = useRef<number>(0);
-  const ref = useRef<HTMLInputElement>(null);
-
-  const copyRoomLink = async () => {
-    try {
-      await copyTextToSystemClipboard(link);
-
-      setJustCopied(true);
-
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = window.setTimeout(() => {
-        setJustCopied(false);
-      }, 3000);
-    } catch (error: any) {
-      setErrorMessage(error.message);
-    }
-
-    ref.current?.select();
-  };
-
-  return (
-    <Dialog onCloseRequest={onCloseRequest} title={false} size="small">
-      <div className="ShareableLinkDialog">
-        <h3>Shareable link</h3>
-        <div className="ShareableLinkDialog__linkRow">
-          <TextField
-            ref={ref}
-            label="Link"
-            readonly
-            fullWidth
-            value={link}
-            selectOnRender
-          />
-          <Popover.Root open={justCopied}>
-            <Popover.Trigger asChild>
-              <FilledButton
-                size="large"
-                label="Copy link"
-                startIcon={copyIcon}
-                onClick={copyRoomLink}
-              />
-            </Popover.Trigger>
-            <Popover.Content
-              onOpenAutoFocus={(event) => event.preventDefault()}
-              onCloseAutoFocus={(event) => event.preventDefault()}
-              className="ShareableLinkDialog__popover"
-              side="top"
-              align="end"
-              sideOffset={5.5}
-            >
-              {tablerCheckIcon} copied
-            </Popover.Content>
-          </Popover.Root>
-        </div>
-        <div className="ShareableLinkDialog__description">
-          🔒 {t("alerts.uploadedSecurly")}
-        </div>
-      </div>
-    </Dialog>
-  );
-};

src/components/TextField.tsx

@@ -1,10 +1,4 @@
-import {
-  forwardRef,
-  useRef,
-  useImperativeHandle,
-  KeyboardEvent,
-  useLayoutEffect,
-} from "react";
+import { forwardRef, useRef, useImperativeHandle, KeyboardEvent } from "react";
 import clsx from "clsx";
 
 import "./TextField.scss";
@@ -18,7 +12,6 @@ export type TextFieldProps = {
 
   readonly?: boolean;
   fullWidth?: boolean;
-  selectOnRender?: boolean;
 
   label?: string;
   placeholder?: string;
@@ -26,28 +19,13 @@ export type TextFieldProps = {
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
-    {
-      value,
-      onChange,
-      label,
-      fullWidth,
-      placeholder,
-      readonly,
-      selectOnRender,
-      onKeyDown,
-    },
+    { value, onChange, label, fullWidth, placeholder, readonly, onKeyDown },
     ref,
   ) => {
     const innerRef = useRef<HTMLInputElement | null>(null);
 
     useImperativeHandle(ref, () => innerRef.current!);
 
-    useLayoutEffect(() => {
-      if (selectOnRender) {
-        innerRef.current?.select();
-      }
-    }, [selectOnRender]);
-
     return (
       <div
         className={clsx("ExcTextField", {

src/components/Toast.scss

@@ -25,17 +25,6 @@
       white-space: pre-wrap;
     }
 
-    .Toast__message--spinner {
-      padding: 0 3rem;
-    }
-
-    .Toast__spinner {
-      position: absolute;
-      left: 1.5rem;
-      top: 50%;
-      margin-top: -8px;
-    }
-
     .close {
       position: absolute;
       top: 0;

src/components/Toast.tsx

@@ -1,7 +1,5 @@
-import clsx from "clsx";
 import { useCallback, useEffect, useRef } from "react";
 import { CloseIcon } from "./icons";
-import Spinner from "./Spinner";
 import "./Toast.scss";
 import { ToolButton } from "./ToolButton";
 
@@ -11,14 +9,12 @@ export const Toast = ({
   message,
   onClose,
   closable = false,
-  spinner = true,
   // To prevent autoclose, pass duration as Infinity
   duration = DEFAULT_TOAST_TIMEOUT,
 }: {
   message: string;
   onClose: () => void;
   closable?: boolean;
-  spinner?: boolean;
   duration?: number;
 }) => {
   const timerRef = useRef<number>(0);
@@ -48,18 +44,7 @@ export const Toast = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      {spinner && (
-        <div className="Toast__spinner">
-          <Spinner />
-        </div>
-      )}
-      <p
-        className={clsx("Toast__message", {
-          "Toast__message--spinner": spinner,
-        })}
-      >
-        {message}
-      </p>
+      <p className="Toast__message">{message}</p>
       {closable && (
         <ToolButton
           icon={CloseIcon}

src/components/ToolButton.tsx

@@ -1,6 +1,6 @@
 import "./ToolIcon.scss";
 
-import React, { CSSProperties, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { useExcalidrawContainer } from "./App";
 import { AbortError } from "../errors";
@@ -25,7 +25,6 @@ type ToolButtonBaseProps = {
   visible?: boolean;
   selected?: boolean;
   className?: string;
-  style?: CSSProperties;
   isLoading?: boolean;
 };
 
@@ -115,7 +114,6 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
             "ToolIcon--plain": props.type === "icon",
           },
         )}
-        style={props.style}
         data-testid={props["data-testid"]}
         hidden={props.hidden}
         title={props.title}

src/components/Toolbar.scss

@@ -15,24 +15,7 @@
       height: 1.5rem;
       align-self: center;
       background-color: var(--default-border-color);
-      margin: 0 0.25rem;
+      margin: 0 0.5rem;
     }
   }
-
-  .App-toolbar__extra-tools-trigger {
-    box-shadow: none;
-    border: 0;
-
-    &:active {
-      background-color: var(--button-hover-bg);
-      box-shadow: 0 0 0 1px
-        var(--button-active-border, var(--color-primary-darkest)) inset;
-    }
-  }
-
-  .App-toolbar__extra-tools-dropdown {
-    margin-top: 0.375rem;
-    right: 0;
-    min-width: 11.875rem;
-  }
 }

src/components/Tooltip.scss

@@ -6,7 +6,7 @@
     Roboto, Helvetica, Arial, sans-serif;
   font-family: var(--ui-font);
   position: fixed;
-  z-index: var(--zIndex-popup);
+  z-index: 1000;
 
   padding: 8px;
   border-radius: 6px;

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,23 +1,23 @@
 import clsx from "clsx";
+import { useUIAppState } from "../../context/ui-appState";
 import { useDevice } from "../App";
 
 const MenuTrigger = ({
   className = "",
   children,
   onToggle,
-  title,
-  ...rest
 }: {
   className?: string;
   children: React.ReactNode;
   onToggle: () => void;
-  title?: string;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
+}) => {
+  const appState = useUIAppState();
   const device = useDevice();
   const classNames = clsx(
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
+      "transition-left": appState.zenModeEnabled,
       "dropdown-menu-button--mobile": device.isMobile,
     },
   ).trim();
@@ -28,8 +28,6 @@ const MenuTrigger = ({
       onClick={onToggle}
       type="button"
       data-testid="dropdown-menu-button"
-      title={title}
-      {...rest}
     >
       {children}
     </button>

src/components/hoc/withInternalFallback.test.tsx

@@ -12,17 +12,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
     ).toBe(1);
   });
 
@@ -36,17 +36,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
     ).toBe(1);
   });
 
@@ -62,17 +62,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
     ).toBe(1);
   });
 
@@ -84,17 +84,17 @@ describe("Test internal component fallback rendering", () => {
       </div>,
     );
 
-    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+    expect(queryAllByTestId(container, "dropdown-menu-button")?.length).toBe(2);
 
     const excalContainers = container.querySelectorAll<HTMLDivElement>(
       ".excalidraw-container",
     );
 
     expect(
-      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[0], "dropdown-menu-button")?.length,
     ).toBe(1);
     expect(
-      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+      queryAllByTestId(excalContainers[1], "dropdown-menu-button")?.length,
     ).toBe(1);
   });
 });

src/components/icons.tsx

@@ -1608,16 +1608,6 @@ export const tablerCheckIcon = createIcon(
   tablerIconProps,
 );
 
-export const alertTriangleIcon = createIcon(
-  <>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" />
-    <path d="M12 9v4" />
-    <path d="M12 17h.01" />
-  </>,
-  tablerIconProps,
-);
-
 export const eyeDropperIcon = createIcon(
   <g strokeWidth={1.25}>
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -1626,24 +1616,3 @@ export const eyeDropperIcon = createIcon(
   </g>,
   tablerIconProps,
 );
-
-export const extraToolsIcon = createIcon(
-  <g strokeWidth={1.5}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M12 3l-4 7h8z"></path>
-    <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
-  </g>,
-  tablerIconProps,
-);
-
-export const frameToolIcon = createIcon(
-  <g strokeWidth={1.5}>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path d="M4 7l16 0"></path>
-    <path d="M4 17l16 0"></path>
-    <path d="M7 4l0 16"></path>
-    <path d="M17 4l0 16"></path>
-  </g>,
-  tablerIconProps,
-);

src/components/main-menu/DefaultItems.tsx

@@ -1,10 +1,6 @@
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { useI18n } from "../../i18n";
-import {
-  useExcalidrawSetAppState,
-  useExcalidrawActionManager,
-  useExcalidrawElements,
-} from "../App";
+import { useExcalidrawSetAppState, useExcalidrawActionManager } from "../App";
 import {
   ExportIcon,
   ExportImageIcon,
@@ -33,42 +29,19 @@ import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import { jotaiScope } from "../../jotai";
 import { useUIAppState } from "../../context/ui-appState";
-import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
-import Trans from "../Trans";
 
 export const LoadScene = () => {
   const { t } = useI18n();
   const actionManager = useExcalidrawActionManager();
-  const elements = useExcalidrawElements();
 
   if (!actionManager.isActionEnabled(actionLoadScene)) {
     return null;
   }
 
-  const handleSelect = async () => {
-    if (
-      !elements.length ||
-      (await openConfirmModal({
-        title: t("overwriteConfirm.modal.loadFromFile.title"),
-        actionLabel: t("overwriteConfirm.modal.loadFromFile.button"),
-        color: "warning",
-        description: (
-          <Trans
-            i18nKey="overwriteConfirm.modal.loadFromFile.description"
-            bold={(text) => <strong>{text}</strong>}
-            br={() => <br />}
-          />
-        ),
-      }))
-    ) {
-      actionManager.executeAction(actionLoadScene);
-    }
-  };
-
   return (
     <DropdownMenuItem
       icon={LoadIcon}
-      onSelect={handleSelect}
+      onSelect={() => actionManager.executeAction(actionLoadScene)}
       data-testid="load-button"
       shortcut={getShortcutFromShortcutName("loadScene")}
       aria-label={t("buttons.load")}

src/components/main-menu/MainMenu.tsx

@@ -42,7 +42,6 @@ const MainMenu = Object.assign(
                   openMenu: appState.openMenu === "canvas" ? null : "canvas",
                 });
               }}
-              data-testid="main-menu-trigger"
             >
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>

src/constants.ts

@@ -94,17 +94,6 @@ export const THEME = {
   DARK: "dark",
 };
 
-export const FRAME_STYLE = {
-  strokeColor: "#bbb" as ExcalidrawElement["strokeColor"],
-  strokeWidth: 1 as ExcalidrawElement["strokeWidth"],
-  strokeStyle: "solid" as ExcalidrawElement["strokeStyle"],
-  fillStyle: "solid" as ExcalidrawElement["fillStyle"],
-  roughness: 0 as ExcalidrawElement["roughness"],
-  roundness: null as ExcalidrawElement["roundness"],
-  backgroundColor: "transparent" as ExcalidrawElement["backgroundColor"],
-  radius: 8,
-};
-
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
 export const DEFAULT_FONT_SIZE = 20;

src/context/tunnels.ts

@@ -12,7 +12,6 @@ type TunnelsContextValue = {
   FooterCenterTunnel: Tunnel;
   DefaultSidebarTriggerTunnel: Tunnel;
   DefaultSidebarTabTriggersTunnel: Tunnel;
-  OverwriteConfirmDialogTunnel: Tunnel;
   jotaiScope: symbol;
 };
 
@@ -31,7 +30,6 @@ export const useInitializeTunnels = () => {
       FooterCenterTunnel: tunnel(),
       DefaultSidebarTriggerTunnel: tunnel(),
       DefaultSidebarTabTriggersTunnel: tunnel(),
-      OverwriteConfirmDialogTunnel: tunnel(),
       jotaiScope: Symbol(),
     };
   }, []);

src/css/styles.scss

@@ -5,15 +5,6 @@
   --zIndex-canvas: 1;
   --zIndex-wysiwyg: 2;
   --zIndex-layerUI: 3;
-
-  --zIndex-modal: 1000;
-  --zIndex-popup: 1001;
-  --zIndex-toast: 999999;
-
-  --sab: env(safe-area-inset-bottom);
-  --sal: env(safe-area-inset-left);
-  --sar: env(safe-area-inset-right);
-  --sat: env(safe-area-inset-top);
 }
 
 .excalidraw {

src/css/theme.scss

@@ -27,6 +27,10 @@
   --popup-secondary-bg-color: #{$oc-gray-1};
   --popup-text-color: #{$oc-black};
   --popup-text-inverted-color: #{$oc-white};
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+  --sar: env(safe-area-inset-right);
+  --sat: env(safe-area-inset-top);
   --select-highlight-color: #{$oc-blue-5};
   --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
     0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
@@ -95,33 +99,9 @@
   --color-gray-100: #121212;
 
   --color-warning: #fceeca;
-  --color-warning-dark: #f5c354;
-  --color-warning-darker: #f3ab2c;
-  --color-warning-darkest: #ec8b14;
   --color-text-warning: var(--text-primary-color);
 
   --color-danger: #db6965;
-  --color-danger-dark: #db6965;
-  --color-danger-darker: #d65550;
-  --color-danger-darkest: #d1413c;
-  --color-danger-text: black;
-
-  --color-danger-background: #fff0f0;
-  --color-danger-icon-background: #ffdad6;
-  --color-danger-color: #700000;
-  --color-danger-icon-color: #700000;
-
-  --color-warning-background: var(--color-warning);
-  --color-warning-icon-background: var(--color-warning-dark);
-  --color-warning-color: var(--text-primary-color);
-  --color-warning-icon-color: var(--text-primary-color);
-
-  --color-muted: var(--color-gray-30);
-  --color-muted-darker: var(--color-gray-60);
-  --color-muted-darkest: var(--color-gray-100);
-  --color-muted-background: var(--color-gray-80);
-  --color-muted-background-darker: var(--color-gray-100);
-
   --color-promo: #e70078;
   --color-success: #268029;
   --color-success-lighter: #cafccc;
@@ -197,27 +177,6 @@
     --color-text-warning: var(--color-gray-80);
 
     --color-danger: #ffa8a5;
-    --color-danger-dark: #672120;
-    --color-danger-darker: #8f2625;
-    --color-danger-darkest: #ac2b29;
-    --color-danger-text: #fbcbcc;
-
-    --color-danger-background: #fbcbcc;
-    --color-danger-icon-background: #672120;
-    --color-danger-color: #261919;
-    --color-danger-icon-color: #fbcbcc;
-
-    --color-warning-background: var(--color-warning);
-    --color-warning-icon-background: var(--color-warning-dark);
-    --color-warning-color: var(--color-gray-80);
-    --color-warning-icon-color: var(--color-gray-80);
-
-    --color-muted: var(--color-gray-80);
-    --color-muted-darker: var(--color-gray-60);
-    --color-muted-darkest: var(--color-gray-20);
-    --color-muted-background: var(--color-gray-40);
-    --color-muted-background-darker: var(--color-gray-20);
-
     --color-promo: #d297ff;
   }
 }

src/data/restore.ts

@@ -41,7 +41,6 @@ import {
   measureBaseline,
 } from "../element/textElement";
 import { COLOR_PALETTE } from "../colors";
-import { normalizeLink } from "./url";
 
 type RestoredAppState = Omit<
   AppState,
@@ -63,7 +62,6 @@ export const AllowedExcalidrawActiveTools: Record<
   freedraw: true,
   eraser: false,
   custom: true,
-  frame: true,
   hand: true,
 };
 
@@ -127,7 +125,6 @@ const restoreElementWithProperties = <
     height: element.height || 0,
     seed: element.seed ?? 1,
     groupIds: element.groupIds ?? [],
-    frameId: element.frameId ?? null,
     roundness: element.roundness
       ? element.roundness
       : element.strokeSharpness === "round"
@@ -143,7 +140,7 @@ const restoreElementWithProperties = <
       ? element.boundElementIds.map((id) => ({ type: "arrow", id }))
       : element.boundElements ?? [],
     updated: element.updated ?? getUpdatedTimestamp(),
-    link: element.link ? normalizeLink(element.link) : null,
+    link: element.link ?? null,
     locked: element.locked ?? false,
   };
 
@@ -275,10 +272,6 @@ const restoreElement = (
       return restoreElementWithProperties(element, {});
     case "diamond":
       return restoreElementWithProperties(element, {});
-    case "frame":
-      return restoreElementWithProperties(element, {
-        name: element.name ?? null,
-      });
 
     // Don't use default case so as to catch a missing an element type case.
     // We also don't want to throw, but instead return void so we filter
@@ -371,24 +364,6 @@ const repairBoundElement = (
   }
 };
 
-/**
- * Remove an element's frameId if its containing frame is non-existent
- *
- * NOTE mutates elements.
- */
-const repairFrameMembership = (
-  element: Mutable<ExcalidrawElement>,
-  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
-) => {
-  if (element.frameId) {
-    const containingFrame = elementsMap.get(element.frameId);
-
-    if (!containingFrame) {
-      element.frameId = null;
-    }
-  }
-};
-
 export const restoreElements = (
   elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
@@ -429,10 +404,6 @@ export const restoreElements = (
   // repair binding. Mutates elements.
   const restoredElementsMap = arrayToMap(restoredElements);
   for (const element of restoredElements) {
-    if (element.frameId) {
-      repairFrameMembership(element, restoredElementsMap);
-    }
-
     if (isTextElement(element) && element.containerId) {
       repairBoundElement(element, restoredElementsMap);
     } else if (element.boundElements) {

src/data/url.test.tsx

@@ -1,30 +0,0 @@
-import { normalizeLink } from "./url";
-
-describe("normalizeLink", () => {
-  // NOTE not an extensive XSS test suite, just to check if we're not
-  // regressing in sanitization
-  it("should sanitize links", () => {
-    expect(
-      // eslint-disable-next-line no-script-url
-      normalizeLink(`javascript://%0aalert(document.domain)`).startsWith(
-        // eslint-disable-next-line no-script-url
-        `javascript:`,
-      ),
-    ).toBe(false);
-    expect(normalizeLink("ola")).toBe("ola");
-    expect(normalizeLink(" ola")).toBe("ola");
-
-    expect(normalizeLink("https://www.excalidraw.com")).toBe(
-      "https://www.excalidraw.com",
-    );
-    expect(normalizeLink("www.excalidraw.com")).toBe("www.excalidraw.com");
-    expect(normalizeLink("/ola")).toBe("/ola");
-    expect(normalizeLink("http://test")).toBe("http://test");
-    expect(normalizeLink("ftp://test")).toBe("ftp://test");
-    expect(normalizeLink("file://")).toBe("file://");
-    expect(normalizeLink("file://")).toBe("file://");
-    expect(normalizeLink("[test](https://test)")).toBe("[test](https://test)");
-    expect(normalizeLink("[[test]]")).toBe("[[test]]");
-    expect(normalizeLink("<test>")).toBe("<test>");
-  });
-});

src/data/url.ts

@@ -1,9 +0,0 @@
-import { sanitizeUrl } from "@braintree/sanitize-url";
-
-export const normalizeLink = (link: string) => {
-  return sanitizeUrl(link);
-};
-
-export const isLocalLink = (link: string | null) => {
-  return !!(link?.includes(location.origin) || link?.startsWith("/"));
-};

src/element/Hyperlink.tsx

@@ -29,7 +29,6 @@ import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip";
 import { getSelectedElements } from "../scene";
 import { isPointHittingElementBoundingBox } from "./collision";
 import { getElementAbsoluteCoords } from "./";
-import { isLocalLink, normalizeLink } from "../data/url";
 
 import "./Hyperlink.scss";
 import { trackEvent } from "../analytics";
@@ -167,7 +166,7 @@ export const Hyperlink = ({
         />
       ) : (
         <a
-          href={normalizeLink(element.link || "")}
+          href={element.link || ""}
           className={clsx("excalidraw-hyperlinkContainer-link", {
             "d-none": isEditing,
           })}
@@ -178,13 +177,7 @@ export const Hyperlink = ({
                 EVENT.EXCALIDRAW_LINK,
                 event.nativeEvent,
               );
-              onLinkOpen(
-                {
-                  ...element,
-                  link: normalizeLink(element.link),
-                },
-                customEvent,
-              );
+              onLinkOpen(element, customEvent);
               if (customEvent.defaultPrevented) {
                 event.preventDefault();
               }
@@ -238,6 +231,21 @@ const getCoordsForPopover = (
   return { x, y };
 };
 
+export const normalizeLink = (link: string) => {
+  link = link.trim();
+  if (link) {
+    // prefix with protocol if not fully-qualified
+    if (!link.includes("://") && !/^[[\\/]/.test(link)) {
+      link = `https://${link}`;
+    }
+  }
+  return link;
+};
+
+export const isLocalLink = (link: string | null) => {
+  return !!(link?.includes(location.origin) || link?.startsWith("/"));
+};
+
 export const actionLink = register({
   name: "hyperlink",
   perform: (elements, appState) => {
@@ -336,7 +344,7 @@ export const isPointHittingLinkIcon = (
   if (
     !isMobile &&
     appState.viewModeEnabled &&
-    isPointHittingElementBoundingBox(element, [x, y], threshold, null)
+    isPointHittingElementBoundingBox(element, [x, y], threshold)
   ) {
     return true;
   }
@@ -432,9 +440,7 @@ export const shouldHideLinkPopup = (
 
   const threshold = 15 / appState.zoom.value;
   // hitbox to prevent hiding when hovered in element bounding box
-  if (
-    isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold, null)
-  ) {
+  if (isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold)) {
     return false;
   }
   const [x1, y1, x2] = getElementAbsoluteCoords(element);

src/element/binding.ts

@@ -39,7 +39,7 @@ export type SuggestedPointBinding = [
 ];
 
 export const shouldEnableBindingForPointerEvent = (
-  event: React.PointerEvent<HTMLElement>,
+  event: React.PointerEvent<HTMLCanvasElement>,
 ) => {
   return !event[KEYS.CTRL_OR_CMD];
 };

src/element/bounds.ts

@@ -6,7 +6,7 @@ import {
   NonDeleted,
   ExcalidrawTextElementWithContainer,
 } from "./types";
-import { distance2d, rotate, rotatePoint } from "../math";
+import { distance2d, rotate } from "../math";
 import rough from "roughjs/bin/rough";
 import { Drawable, Op } from "roughjs/bin/core";
 import { Point } from "../types";
@@ -25,101 +25,10 @@ import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { Mutable } from "../utility-types";
 
-export type RectangleBox = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  angle: number;
-};
-
+// x and y position of top left corner, x and y position of bottom right corner
+export type Bounds = readonly [number, number, number, number];
 type MaybeQuadraticSolution = [number | null, number | null] | false;
 
-// x and y position of top left corner, x and y position of bottom right corner
-export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];
-
-export class ElementBounds {
-  private static boundsCache = new WeakMap<
-    ExcalidrawElement,
-    {
-      bounds: Bounds;
-      version: ExcalidrawElement["version"];
-    }
-  >();
-
-  static getBounds(element: ExcalidrawElement) {
-    const cachedBounds = ElementBounds.boundsCache.get(element);
-
-    if (cachedBounds?.version && cachedBounds.version === element.version) {
-      return cachedBounds.bounds;
-    }
-
-    const bounds = ElementBounds.calculateBounds(element);
-
-    ElementBounds.boundsCache.set(element, {
-      version: element.version,
-      bounds,
-    });
-
-    return bounds;
-  }
-
-  private static calculateBounds(element: ExcalidrawElement): Bounds {
-    let bounds: [number, number, number, number];
-
-    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
-
-    if (isFreeDrawElement(element)) {
-      const [minX, minY, maxX, maxY] = getBoundsFromPoints(
-        element.points.map(([x, y]) =>
-          rotate(x, y, cx - element.x, cy - element.y, element.angle),
-        ),
-      );
-
-      return [
-        minX + element.x,
-        minY + element.y,
-        maxX + element.x,
-        maxY + element.y,
-      ];
-    } else if (isLinearElement(element)) {
-      bounds = getLinearElementRotatedBounds(element, cx, cy);
-    } else if (element.type === "diamond") {
-      const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
-      const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
-      const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
-      const [x21, y21] = rotate(x2, cy, cx, cy, element.angle);
-      const minX = Math.min(x11, x12, x22, x21);
-      const minY = Math.min(y11, y12, y22, y21);
-      const maxX = Math.max(x11, x12, x22, x21);
-      const maxY = Math.max(y11, y12, y22, y21);
-      bounds = [minX, minY, maxX, maxY];
-    } else if (element.type === "ellipse") {
-      const w = (x2 - x1) / 2;
-      const h = (y2 - y1) / 2;
-      const cos = Math.cos(element.angle);
-      const sin = Math.sin(element.angle);
-      const ww = Math.hypot(w * cos, h * sin);
-      const hh = Math.hypot(h * cos, w * sin);
-      bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
-    } else {
-      const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
-      const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
-      const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
-      const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
-      const minX = Math.min(x11, x12, x22, x21);
-      const minY = Math.min(y11, y12, y22, y21);
-      const maxX = Math.max(x11, x12, x22, x21);
-      const maxY = Math.max(y11, y12, y22, y21);
-      bounds = [minX, minY, maxX, maxY];
-    }
-
-    return bounds;
-  }
-}
-
-// Scene -> Scene coords, but in x1,x2,y1,y2 format.
-//
 // If the element is created from right to left, the width is going to be negative
 // This set of functions retrieves the absolute position of the 4 points.
 export const getElementAbsoluteCoords = (
@@ -160,111 +69,6 @@ export const getElementAbsoluteCoords = (
   ];
 };
 
-/**
- * for a given element, `getElementLineSegments` returns line segments
- * that can be used for visual collision detection (useful for frames)
- * as opposed to bounding box collision detection
- */
-export const getElementLineSegments = (
-  element: ExcalidrawElement,
-): [Point, Point][] => {
-  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
-
-  const center: Point = [cx, cy];
-
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    const segments: [Point, Point][] = [];
-
-    let i = 0;
-
-    while (i < element.points.length - 1) {
-      segments.push([
-        rotatePoint(
-          [
-            element.points[i][0] + element.x,
-            element.points[i][1] + element.y,
-          ] as Point,
-          center,
-          element.angle,
-        ),
-        rotatePoint(
-          [
-            element.points[i + 1][0] + element.x,
-            element.points[i + 1][1] + element.y,
-          ] as Point,
-          center,
-          element.angle,
-        ),
-      ]);
-      i++;
-    }
-
-    return segments;
-  }
-
-  const [nw, ne, sw, se, n, s, w, e] = (
-    [
-      [x1, y1],
-      [x2, y1],
-      [x1, y2],
-      [x2, y2],
-      [cx, y1],
-      [cx, y2],
-      [x1, cy],
-      [x2, cy],
-    ] as Point[]
-  ).map((point) => rotatePoint(point, center, element.angle));
-
-  if (element.type === "diamond") {
-    return [
-      [n, w],
-      [n, e],
-      [s, w],
-      [s, e],
-    ];
-  }
-
-  if (element.type === "ellipse") {
-    return [
-      [n, w],
-      [n, e],
-      [s, w],
-      [s, e],
-      [n, w],
-      [n, e],
-      [s, w],
-      [s, e],
-    ];
-  }
-
-  return [
-    [nw, ne],
-    [sw, se],
-    [nw, sw],
-    [ne, se],
-    [nw, e],
-    [sw, e],
-    [ne, w],
-    [se, w],
-  ];
-};
-
-/**
- * Scene -> Scene coords, but in x1,x2,y1,y2 format.
- *
- * Rectangle here means any rectangular frame, not an excalidraw element.
- */
-export const getRectangleBoxAbsoluteCoords = (boxSceneCoords: RectangleBox) => {
-  return [
-    boxSceneCoords.x,
-    boxSceneCoords.y,
-    boxSceneCoords.x + boxSceneCoords.width,
-    boxSceneCoords.y + boxSceneCoords.height,
-    boxSceneCoords.x + boxSceneCoords.width / 2,
-    boxSceneCoords.y + boxSceneCoords.height / 2,
-  ];
-};
-
 export const pointRelativeTo = (
   element: ExcalidrawElement,
   absoluteCoords: Point,
@@ -650,12 +454,64 @@ const getLinearElementRotatedBounds = (
   return coords;
 };
 
-export const getElementBounds = (element: ExcalidrawElement): Bounds => {
-  return ElementBounds.getBounds(element);
+// We could cache this stuff
+export const getElementBounds = (
+  element: ExcalidrawElement,
+): [number, number, number, number] => {
+  let bounds: [number, number, number, number];
+
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+  if (isFreeDrawElement(element)) {
+    const [minX, minY, maxX, maxY] = getBoundsFromPoints(
+      element.points.map(([x, y]) =>
+        rotate(x, y, cx - element.x, cy - element.y, element.angle),
+      ),
+    );
+
+    return [
+      minX + element.x,
+      minY + element.y,
+      maxX + element.x,
+      maxY + element.y,
+    ];
+  } else if (isLinearElement(element)) {
+    bounds = getLinearElementRotatedBounds(element, cx, cy);
+  } else if (element.type === "diamond") {
+    const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
+    const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
+    const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
+    const [x21, y21] = rotate(x2, cy, cx, cy, element.angle);
+    const minX = Math.min(x11, x12, x22, x21);
+    const minY = Math.min(y11, y12, y22, y21);
+    const maxX = Math.max(x11, x12, x22, x21);
+    const maxY = Math.max(y11, y12, y22, y21);
+    bounds = [minX, minY, maxX, maxY];
+  } else if (element.type === "ellipse") {
+    const w = (x2 - x1) / 2;
+    const h = (y2 - y1) / 2;
+    const cos = Math.cos(element.angle);
+    const sin = Math.sin(element.angle);
+    const ww = Math.hypot(w * cos, h * sin);
+    const hh = Math.hypot(h * cos, w * sin);
+    bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
+  } else {
+    const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
+    const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
+    const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
+    const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
+    const minX = Math.min(x11, x12, x22, x21);
+    const minY = Math.min(y11, y12, y22, y21);
+    const maxX = Math.max(x11, x12, x22, x21);
+    const maxY = Math.max(y11, y12, y22, y21);
+    bounds = [minX, minY, maxX, maxY];
+  }
+
+  return bounds;
 };
+
 export const getCommonBounds = (
   elements: readonly ExcalidrawElement[],
-): Bounds => {
+): [number, number, number, number] => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }
@@ -752,7 +608,7 @@ export const getElementPointsCoords = (
 export const getClosestElementBounds = (
   elements: readonly ExcalidrawElement[],
   from: { x: number; y: number },
-): Bounds => {
+): [number, number, number, number] => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }
@@ -773,7 +629,7 @@ export const getClosestElementBounds = (
   return getElementBounds(closestElement);
 };
 
-export interface BoundingBox {
+export interface Box {
   minX: number;
   minY: number;
   maxX: number;
@@ -786,7 +642,7 @@ export interface BoundingBox {
 
 export const getCommonBoundingBox = (
   elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[],
-): BoundingBox => {
+): Box => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
   return {
     minX,

src/element/collision.ts

@@ -26,16 +26,10 @@ import {
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
   StrokeRoundness,
-  ExcalidrawFrameElement,
 } from "./types";
 
-import {
-  getElementAbsoluteCoords,
-  getCurvePathOps,
-  getRectangleBoxAbsoluteCoords,
-  RectangleBox,
-} from "./bounds";
-import { FrameNameBoundsCache, Point } from "../types";
+import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
+import { Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
@@ -67,7 +61,6 @@ const isElementDraggableFromInside = (
 export const hitTest = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
-  frameNameBoundsCache: FrameNameBoundsCache,
   x: number,
   y: number,
 ): boolean => {
@@ -79,39 +72,22 @@ export const hitTest = (
     isElementSelected(appState, element) &&
     shouldShowBoundingBox([element], appState)
   ) {
-    return isPointHittingElementBoundingBox(
-      element,
-      point,
-      threshold,
-      frameNameBoundsCache,
-    );
+    return isPointHittingElementBoundingBox(element, point, threshold);
   }
 
   const boundTextElement = getBoundTextElement(element);
   if (boundTextElement) {
-    const isHittingBoundTextElement = hitTest(
-      boundTextElement,
-      appState,
-      frameNameBoundsCache,
-      x,
-      y,
-    );
+    const isHittingBoundTextElement = hitTest(boundTextElement, appState, x, y);
     if (isHittingBoundTextElement) {
       return true;
     }
   }
-  return isHittingElementNotConsideringBoundingBox(
-    element,
-    appState,
-    frameNameBoundsCache,
-    point,
-  );
+  return isHittingElementNotConsideringBoundingBox(element, appState, point);
 };
 
 export const isHittingElementBoundingBoxWithoutHittingElement = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
-  frameNameBoundsCache: FrameNameBoundsCache,
   x: number,
   y: number,
 ): boolean => {
@@ -120,33 +96,19 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
   // So that bound text element hit is considered within bounding box of container even if its outside actual bounding box of element
   // eg for linear elements text can be outside the element bounding box
   const boundTextElement = getBoundTextElement(element);
-  if (
-    boundTextElement &&
-    hitTest(boundTextElement, appState, frameNameBoundsCache, x, y)
-  ) {
+  if (boundTextElement && hitTest(boundTextElement, appState, x, y)) {
     return false;
   }
 
   return (
-    !isHittingElementNotConsideringBoundingBox(
-      element,
-      appState,
-      frameNameBoundsCache,
-      [x, y],
-    ) &&
-    isPointHittingElementBoundingBox(
-      element,
-      [x, y],
-      threshold,
-      frameNameBoundsCache,
-    )
+    !isHittingElementNotConsideringBoundingBox(element, appState, [x, y]) &&
+    isPointHittingElementBoundingBox(element, [x, y], threshold)
   );
 };
 
 export const isHittingElementNotConsideringBoundingBox = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
-  frameNameBoundsCache: FrameNameBoundsCache | null,
   point: Point,
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
@@ -155,13 +117,7 @@ export const isHittingElementNotConsideringBoundingBox = (
     : isElementDraggableFromInside(element)
     ? isInsideCheck
     : isNearCheck;
-  return hitTestPointAgainstElement({
-    element,
-    point,
-    threshold,
-    check,
-    frameNameBoundsCache,
-  });
+  return hitTestPointAgainstElement({ element, point, threshold, check });
 };
 
 const isElementSelected = (
@@ -173,22 +129,7 @@ export const isPointHittingElementBoundingBox = (
   element: NonDeleted<ExcalidrawElement>,
   [x, y]: Point,
   threshold: number,
-  frameNameBoundsCache: FrameNameBoundsCache | null,
 ) => {
-  // frames needs be checked differently so as to be able to drag it
-  // by its frame, whether it has been selected or not
-  // this logic here is not ideal
-  // TODO: refactor it later...
-  if (element.type === "frame") {
-    return hitTestPointAgainstElement({
-      element,
-      point: [x, y],
-      threshold,
-      check: isInsideCheck,
-      frameNameBoundsCache,
-    });
-  }
-
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const elementCenterX = (x1 + x2) / 2;
   const elementCenterY = (y1 + y2) / 2;
@@ -216,13 +157,7 @@ export const bindingBorderTest = (
   const threshold = maxBindingGap(element, element.width, element.height);
   const check = isOutsideCheck;
   const point: Point = [x, y];
-  return hitTestPointAgainstElement({
-    element,
-    point,
-    threshold,
-    check,
-    frameNameBoundsCache: null,
-  });
+  return hitTestPointAgainstElement({ element, point, threshold, check });
 };
 
 export const maxBindingGap = (
@@ -242,7 +177,6 @@ type HitTestArgs = {
   point: Point;
   threshold: number;
   check: (distance: number, threshold: number) => boolean;
-  frameNameBoundsCache: FrameNameBoundsCache | null;
 };
 
 const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
@@ -274,27 +208,6 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
         "This should not happen, we need to investigate why it does.",
       );
       return false;
-    case "frame": {
-      // check distance to frame element first
-      if (
-        args.check(
-          distanceToBindableElement(args.element, args.point),
-          args.threshold,
-        )
-      ) {
-        return true;
-      }
-
-      const frameNameBounds = args.frameNameBoundsCache?.get(args.element);
-
-      if (frameNameBounds) {
-        return args.check(
-          distanceToRectangleBox(frameNameBounds, args.point),
-          args.threshold,
-        );
-      }
-      return false;
-    }
   }
 };
 
@@ -306,7 +219,6 @@ export const distanceToBindableElement = (
     case "rectangle":
     case "image":
     case "text":
-    case "frame":
       return distanceToRectangle(element, point);
     case "diamond":
       return distanceToDiamond(element, point);
@@ -336,8 +248,7 @@ const distanceToRectangle = (
     | ExcalidrawRectangleElement
     | ExcalidrawTextElement
     | ExcalidrawFreeDrawElement
-    | ExcalidrawImageElement
-    | ExcalidrawFrameElement,
+    | ExcalidrawImageElement,
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
@@ -347,14 +258,6 @@ const distanceToRectangle = (
   );
 };
 
-const distanceToRectangleBox = (box: RectangleBox, point: Point): number => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToDivElement(point, box);
-  return Math.max(
-    GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)),
-    GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)),
-  );
-};
-
 const distanceToDiamond = (
   element: ExcalidrawDiamondElement,
   point: Point,
@@ -554,7 +457,8 @@ const pointRelativeToElement = (
 ): [GA.Point, GA.Point, number, number] => {
   const point = GAPoint.from(pointTuple);
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const center = coordsCenter(x1, y1, x2, y2);
+  const elementCoords = getElementAbsoluteCoords(element);
+  const center = coordsCenter([x1, y1, x2, y2]);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const pointRotated = GATransform.apply(rotate, point);
@@ -562,26 +466,9 @@ const pointRelativeToElement = (
   const pointRelToCenterAbs = GAPoint.abs(pointRelToCenter);
   const elementPos = GA.offset(element.x, element.y);
   const pointRelToPos = GA.sub(pointRotated, elementPos);
-  const halfWidth = (x2 - x1) / 2;
-  const halfHeight = (y2 - y1) / 2;
-  return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
-};
-
-const pointRelativeToDivElement = (
-  pointTuple: Point,
-  rectangle: RectangleBox,
-): [GA.Point, GA.Point, number, number] => {
-  const point = GAPoint.from(pointTuple);
-  const [x1, y1, x2, y2] = getRectangleBoxAbsoluteCoords(rectangle);
-  const center = coordsCenter(x1, y1, x2, y2);
-  const rotate = GATransform.rotation(center, rectangle.angle);
-  const pointRotated = GATransform.apply(rotate, point);
-  const pointRelToCenter = GA.sub(pointRotated, GADirection.from(center));
-  const pointRelToCenterAbs = GAPoint.abs(pointRelToCenter);
-  const elementPos = GA.offset(rectangle.x, rectangle.y);
-  const pointRelToPos = GA.sub(pointRotated, elementPos);
-  const halfWidth = (x2 - x1) / 2;
-  const halfHeight = (y2 - y1) / 2;
+  const [ax, ay, bx, by] = elementCoords;
+  const halfWidth = (bx - ax) / 2;
+  const halfHeight = (by - ay) / 2;
   return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
 };
 
@@ -603,7 +490,7 @@ const relativizationToElementCenter = (
   element: ExcalidrawElement,
 ): GA.Transform => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const center = coordsCenter(x1, y1, x2, y2);
+  const center = coordsCenter([x1, y1, x2, y2]);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const translate = GA.reverse(
@@ -612,13 +499,8 @@ const relativizationToElementCenter = (
   return GATransform.compose(rotate, translate);
 };
 
-const coordsCenter = (
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-): GA.Point => {
-  return GA.point((x1 + x2) / 2, (y1 + y2) / 2);
+const coordsCenter = ([ax, ay, bx, by]: Bounds): GA.Point => {
+  return GA.point((ax + bx) / 2, (ay + by) / 2);
 };
 
 // The focus distance is the oriented ratio between the size of
@@ -649,7 +531,6 @@ export const determineFocusDistance = (
     case "rectangle":
     case "image":
     case "text":
-    case "frame":
       return c / (hwidth * (nabs + q * mabs));
     case "diamond":
       return mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
@@ -667,7 +548,7 @@ export const determineFocusPoint = (
 ): Point => {
   if (focus === 0) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const center = coordsCenter(x1, y1, x2, y2);
+    const center = coordsCenter([x1, y1, x2, y2]);
     return GAPoint.toTuple(center);
   }
   const relateToCenter = relativizationToElementCenter(element);
@@ -682,7 +563,6 @@ export const determineFocusPoint = (
     case "image":
     case "text":
     case "diamond":
-    case "frame":
       point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
       break;
     case "ellipse":
@@ -733,7 +613,6 @@ const getSortedElementLineIntersections = (
     case "image":
     case "text":
     case "diamond":
-    case "frame":
       const corners = getCorners(element);
       intersections = corners
         .flatMap((point, i) => {
@@ -767,8 +646,7 @@ const getCorners = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement
-    | ExcalidrawFrameElement,
+    | ExcalidrawTextElement,
   scale: number = 1,
 ): GA.Point[] => {
   const hx = (scale * element.width) / 2;
@@ -777,7 +655,6 @@ const getCorners = (
     case "rectangle":
     case "image":
     case "text":
-    case "frame":
       return [
         GA.point(hx, hy),
         GA.point(hx, -hy),
@@ -925,8 +802,7 @@ export const findFocusPointForRectangulars = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement
-    | ExcalidrawFrameElement,
+    | ExcalidrawTextElement,
   // Between -1 and 1 for how far away should the focus point be relative
   // to the size of the element. Sign determines orientation.
   relativeDistance: number,

src/element/dragElements.ts

@@ -6,8 +6,6 @@ import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
 import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
-import Scene from "../scene/Scene";
-import { isFrameElement } from "./typeChecks";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -18,31 +16,10 @@ export const dragSelectedElements = (
   distanceX: number = 0,
   distanceY: number = 0,
   appState: AppState,
-  scene: Scene,
 ) => {
   const [x1, y1] = getCommonBounds(selectedElements);
   const offset = { x: pointerX - x1, y: pointerY - y1 };
-
-  // we do not want a frame and its elements to be selected at the same time
-  // but when it happens (due to some bug), we want to avoid updating element
-  // in the frame twice, hence the use of set
-  const elementsToUpdate = new Set<NonDeletedExcalidrawElement>(
-    selectedElements,
-  );
-  const frames = selectedElements
-    .filter((e) => isFrameElement(e))
-    .map((f) => f.id);
-
-  if (frames.length > 0) {
-    const elementsInFrames = scene
-      .getNonDeletedElements()
-      .filter((e) => e.frameId !== null)
-      .filter((e) => frames.includes(e.frameId!));
-
-    elementsInFrames.forEach((element) => elementsToUpdate.add(element));
-  }
-
-  elementsToUpdate.forEach((element) => {
+  selectedElements.forEach((element) => {
     updateElementCoords(
       lockDirection,
       distanceX,
@@ -61,13 +38,7 @@ export const dragSelectedElements = (
       (appState.editingGroupId && !isSelectedViaGroup(appState, element))
     ) {
       const textElement = getBoundTextElement(element);
-      if (
-        textElement &&
-        // when container is added to a frame, so will its bound text
-        // so the text is already in `elementsToUpdate` and we should avoid
-        // updating its coords again
-        (!textElement.frameId || !frames.includes(textElement.frameId))
-      ) {
+      if (textElement) {
         updateElementCoords(
           lockDirection,
           distanceX,
@@ -79,7 +50,7 @@ export const dragSelectedElements = (
       }
     }
     updateBoundElements(element, {
-      simultaneouslyUpdated: Array.from(elementsToUpdate),
+      simultaneouslyUpdated: selectedElements,
     });
   });
 };

src/element/index.ts

@@ -2,7 +2,6 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
-  ExcalidrawFrameElement,
 } from "./types";
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
@@ -50,11 +49,7 @@ export {
   getDragOffsetXY,
   dragNewElement,
 } from "./dragElements";
-export {
-  isTextElement,
-  isExcalidrawElement,
-  isFrameElement,
-} from "./typeChecks";
+export { isTextElement, isExcalidrawElement } from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export {
@@ -79,13 +74,6 @@ export const getNonDeletedElements = (elements: readonly ExcalidrawElement[]) =>
     (element) => !element.isDeleted,
   ) as readonly NonDeletedExcalidrawElement[];
 
-export const getNonDeletedFrames = (
-  frames: readonly ExcalidrawFrameElement[],
-) =>
-  frames.filter(
-    (frame) => !frame.isDeleted,
-  ) as readonly NonDeleted<ExcalidrawFrameElement>[];
-
 export const isNonDeletedElement = <T extends ExcalidrawElement>(
   element: T,
 ): element is NonDeleted<T> => !element.isDeleted;

src/element/linearElementEditor.ts

@@ -594,7 +594,7 @@ export class LinearElementEditor {
   }
 
   static handlePointerDown(
-    event: React.PointerEvent<HTMLElement>,
+    event: React.PointerEvent<HTMLCanvasElement>,
     appState: AppState,
     history: History,
     scenePointer: { x: number; y: number },

src/element/newElement.ts

@@ -12,7 +12,6 @@ import {
   ExcalidrawFreeDrawElement,
   FontFamilyValues,
   ExcalidrawTextContainer,
-  ExcalidrawFrameElement,
 } from "../element/types";
 import {
   arrayToMap,
@@ -51,7 +50,6 @@ type ElementConstructorOpts = MarkOptional<
   | "height"
   | "angle"
   | "groupIds"
-  | "frameId"
   | "boundElements"
   | "seed"
   | "version"
@@ -84,7 +82,6 @@ const _newElementBase = <T extends ExcalidrawElement>(
     height = 0,
     angle = 0,
     groupIds = [],
-    frameId = null,
     roundness = null,
     boundElements = null,
     link = null,
@@ -109,7 +106,6 @@ const _newElementBase = <T extends ExcalidrawElement>(
     roughness,
     opacity,
     groupIds,
-    frameId,
     roundness,
     seed: rest.seed ?? randomInteger(),
     version: rest.version || 1,
@@ -130,21 +126,6 @@ export const newElement = (
 ): NonDeleted<ExcalidrawGenericElement> =>
   _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
 
-export const newFrameElement = (
-  opts: ElementConstructorOpts,
-): NonDeleted<ExcalidrawFrameElement> => {
-  const frameElement = newElementWith(
-    {
-      ..._newElementBase<ExcalidrawFrameElement>("frame", opts),
-      type: "frame",
-      name: null,
-    },
-    {},
-  );
-
-  return frameElement;
-};
-
 /** computes element x/y offset based on textAlign/verticalAlign */
 const getTextElementPositionOffsets = (
   opts: {
@@ -177,7 +158,6 @@ export const newTextElement = (
     containerId?: ExcalidrawTextContainer["id"];
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
-    isFrameName?: boolean;
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
   const fontFamily = opts.fontFamily || DEFAULT_FONT_FAMILY;
@@ -212,7 +192,6 @@ export const newTextElement = (
       containerId: opts.containerId || null,
       originalText: text,
       lineHeight,
-      isFrameName: opts.isFrameName || false,
     },
     {},
   );
@@ -633,10 +612,6 @@ export const duplicateElements = (
         : null;
     }
 
-    if (clonedElement.frameId) {
-      clonedElement.frameId = maybeGetNewId(clonedElement.frameId);
-    }
-
     clonedElements.push(clonedElement);
   }
 

src/element/resizeElements.ts

@@ -27,7 +27,6 @@ import {
 import {
   isArrowElement,
   isBoundToContainer,
-  isFrameElement,
   isFreeDrawElement,
   isImageElement,
   isLinearElement,
@@ -161,17 +160,12 @@ const rotateSingleElement = (
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
-  let angle: number;
-  if (isFrameElement(element)) {
-    angle = 0;
-  } else {
-    angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
-    if (shouldRotateWithDiscreteAngle) {
-      angle += SHIFT_LOCKING_ANGLE / 2;
-      angle -= angle % SHIFT_LOCKING_ANGLE;
-    }
-    angle = normalizeAngle(angle);
+  let angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
+  if (shouldRotateWithDiscreteAngle) {
+    angle += SHIFT_LOCKING_ANGLE / 2;
+    angle -= angle % SHIFT_LOCKING_ANGLE;
   }
+  angle = normalizeAngle(angle);
   const boundTextElementId = getBoundTextElementId(element);
 
   mutateElement(element, { angle });
@@ -883,49 +877,39 @@ const rotateMultipleElements = (
     centerAngle += SHIFT_LOCKING_ANGLE / 2;
     centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
   }
-
-  elements
-    .filter((element) => element.type !== "frame")
-    .forEach((element) => {
-      const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-      const cx = (x1 + x2) / 2;
-      const cy = (y1 + y2) / 2;
-      const origAngle =
-        pointerDownState.originalElements.get(element.id)?.angle ??
-        element.angle;
-      const [rotatedCX, rotatedCY] = rotate(
-        cx,
-        cy,
-        centerX,
-        centerY,
-        centerAngle + origAngle - element.angle,
-      );
-      mutateElement(
-        element,
-        {
-          x: element.x + (rotatedCX - cx),
-          y: element.y + (rotatedCY - cy),
-          angle: normalizeAngle(centerAngle + origAngle),
-        },
-        false,
-      );
-      updateBoundElements(element, { simultaneouslyUpdated: elements });
-
-      const boundText = getBoundTextElement(element);
-      if (boundText && !isArrowElement(element)) {
-        mutateElement(
-          boundText,
-          {
-            x: boundText.x + (rotatedCX - cx),
-            y: boundText.y + (rotatedCY - cy),
-            angle: normalizeAngle(centerAngle + origAngle),
-          },
-          false,
-        );
-      }
+  elements.forEach((element) => {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+    const origAngle =
+      pointerDownState.originalElements.get(element.id)?.angle ?? element.angle;
+    const [rotatedCX, rotatedCY] = rotate(
+      cx,
+      cy,
+      centerX,
+      centerY,
+      centerAngle + origAngle - element.angle,
+    );
+    mutateElement(element, {
+      x: element.x + (rotatedCX - cx),
+      y: element.y + (rotatedCY - cy),
+      angle: normalizeAngle(centerAngle + origAngle),
     });
-
-  Scene.getScene(elements[0])?.informMutation();
+    const boundTextElementId = getBoundTextElementId(element);
+    if (boundTextElementId) {
+      const textElement =
+        Scene.getScene(element)?.getElement<ExcalidrawTextElementWithContainer>(
+          boundTextElementId,
+        );
+      if (textElement && !isArrowElement(element)) {
+        mutateElement(textElement, {
+          x: textElement.x + (rotatedCX - cx),
+          y: textElement.y + (rotatedCY - cy),
+          angle: normalizeAngle(centerAngle + origAngle),
+        });
+      }
+    }
+  });
 };
 
 export const getResizeOffsetXY = (

src/element/textElement.test.ts

@@ -49,18 +49,7 @@ describe("Test wrapText", () => {
       {
         desc: "break all characters when width of each character is less than container width",
         width: 25,
-        res: `H
-e
-l
-l
-o
-w
-h
-a
-t
-s
-u
-p`,
+        res: `H\ne\nl\nl\no \nw\nh\na\nt\ns \nu\np`,
       },
       {
         desc: "break words as per the width",
@@ -90,8 +79,7 @@ up`,
   });
 
   describe("When text contain new lines", () => {
-    const text = `Hello
-whats up`;
+    const text = "Hello\nwhats up";
     [
       {
         desc: "break all words when width of each word is less than container width",
@@ -101,18 +89,7 @@ whats up`;
       {
         desc: "break all characters when width of each character is less than container width",
         width: 25,
-        res: `H
-e
-l
-l
-o
-w
-h
-a
-t
-s
-u
-p`,
+        res: `H\ne\nl\nl\no\nw\nh\na\nt\ns \nu\np`,
       },
       {
         desc: "break words as per the width",
@@ -149,13 +126,7 @@ whats up`,
         desc: "fit characters of long string as per container width and break words as per the width",
 
         width: 130,
-        res: `hellolongte
-xtthisiswha
-tsupwithyou
-Iamtypinggg
-ggandtyping
-gg break it
-now`,
+        res: `hellolongte\nxtthisiswha\ntsupwithyou\nIamtypinggg\nggandtyping\ngg break it \nnow`,
       },
       {
         desc: "fit the long text when container width is greater than text length and move the rest to next line",
@@ -190,7 +161,7 @@ now`,
       "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
     const res = wrapText(text, font, 110);
     expect(res).toBe(
-      `Wikipedia \nis hosted \nby \nWikimedia-\nFoundation,\na non-\nprofit \norganizati\non that \nalso hosts\na range-of\nother \nprojects`,
+      `Wikipedia \nis hosted \nby \nWikimedia- \nFoundation,\na non-\nprofit \norganizati\non that \nalso hosts \na range-of \nother \nprojects`,
     );
 
     text = "Hello thereusing-now";

src/element/textElement.ts

@@ -76,6 +76,7 @@ export const redrawTextBoundingBox = (
     boundTextUpdates.text,
     getFontString(textElement),
     textElement.lineHeight,
+    maxWidth,
   );
 
   boundTextUpdates.width = metrics.width;
@@ -195,6 +196,7 @@ export const handleBindTextResize = (
         text,
         getFontString(textElement),
         textElement.lineHeight,
+        maxWidth,
       );
       nextHeight = metrics.height;
       nextWidth = metrics.width;
@@ -283,6 +285,7 @@ export const measureText = (
   text: string,
   font: FontString,
   lineHeight: ExcalidrawTextElement["lineHeight"],
+  maxWidth?: number | null,
 ) => {
   text = text
     .split("\n")
@@ -292,7 +295,14 @@ export const measureText = (
     .join("\n");
   const fontSize = parseFloat(font);
   const height = getTextHeight(text, fontSize, lineHeight);
-  const width = getTextWidth(text, font);
+  let width = getTextWidth(text, font);
+  // Since we now preserve trailing whitespaces so if the text has
+  // trailing whitespaces, it will be considered in the width and thus width
+  // computed might be much higher than the allowed max width
+  // by the container hence making sure the width never goes beyond the max width.
+  if (maxWidth) {
+    width = Math.min(width, maxWidth);
+  }
   const baseline = measureBaseline(text, font, lineHeight);
   return { width, height, baseline };
 };
@@ -380,7 +390,7 @@ export const getApproxMinLineHeight = (
 
 let canvas: HTMLCanvasElement | undefined;
 
-const getLineWidth = (text: string, font: FontString) => {
+export const getLineWidth = (text: string, font: FontString) => {
   if (!canvas) {
     canvas = document.createElement("canvas");
   }
@@ -440,10 +450,8 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
     return text;
   }
-
   const lines: Array<string> = [];
   const originalLines = text.split("\n");
-  const spaceWidth = getLineWidth(" ", font);
 
   let currentLine = "";
   let currentLineWidthTillNow = 0;
@@ -459,7 +467,7 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
     currentLineWidthTillNow = 0;
   };
   originalLines.forEach((originalLine) => {
-    const currentLineWidth = getTextWidth(originalLine, font);
+    const currentLineWidth = getLineWidth(originalLine, font);
 
     // Push the line if its <= maxWidth
     if (currentLineWidth <= maxWidth) {
@@ -507,23 +515,25 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
           }
         }
         // push current line if appending space exceeds max width
-        if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+        if (currentLineWidthTillNow >= maxWidth) {
           push(currentLine);
           resetParams();
           // space needs to be appended before next word
           // as currentLine contains chars which couldn't be appended
           // to previous line unless the line ends with hyphen to sync
           // with css word-wrap
-        } else if (!currentLine.endsWith("-")) {
+        } else if (!currentLine.endsWith("-") && index < words.length) {
           currentLine += " ";
-          currentLineWidthTillNow += spaceWidth;
         }
         index++;
       } else {
         // Start appending words in a line till max width reached
         while (currentLineWidthTillNow < maxWidth && index < words.length) {
           const word = words[index];
-          currentLineWidthTillNow = getLineWidth(currentLine + word, font);
+          currentLineWidthTillNow = getLineWidth(
+            `${currentLine + word}`.trimEnd(),
+            font,
+          );
 
           if (currentLineWidthTillNow > maxWidth) {
             push(currentLine);
@@ -531,24 +541,20 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
 
             break;
           }
-          index++;
 
           // if word ends with "-" then we don't need to add space
           // to sync with css word-wrap
           const shouldAppendSpace = !word.endsWith("-");
           currentLine += word;
 
-          if (shouldAppendSpace) {
+          if (shouldAppendSpace && index < words.length) {
             currentLine += " ";
           }
+          index++;
 
           // Push the word if appending space exceeds max width
-          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-            if (shouldAppendSpace) {
-              lines.push(currentLine.slice(0, -1));
-            } else {
-              lines.push(currentLine);
-            }
+          if (currentLineWidthTillNow >= maxWidth) {
+            lines.push(currentLine);
             resetParams();
             break;
           }
@@ -840,12 +846,10 @@ export const getTextBindableContainerAtPosition = (
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index]);
     if (
       isArrowElement(elements[index]) &&
-      isHittingElementNotConsideringBoundingBox(
-        elements[index],
-        appState,
-        null,
-        [x, y],
-      )
+      isHittingElementNotConsideringBoundingBox(elements[index], appState, [
+        x,
+        y,
+      ])
     ) {
       hitElement = elements[index];
       break;
@@ -862,6 +866,7 @@ const VALID_CONTAINER_TYPES = new Set([
   "rectangle",
   "ellipse",
   "diamond",
+  "image",
   "arrow",
 ]);
 
@@ -972,3 +977,22 @@ export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
   }
   return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
 };
+
+export const getSpacesOffsetForLine = (
+  element: ExcalidrawTextElement,
+  line: string,
+  font: FontString,
+) => {
+  const container = getContainerElement(element);
+  const trailingSpacesWidth =
+    getLineWidth(line, font) - getLineWidth(line.trimEnd(), font);
+  const maxWidth = container ? getBoundTextMaxWidth(container) : element.width;
+  const availableWidth = maxWidth - getLineWidth(line.trimEnd(), font);
+  let spacesOffset = 0;
+  if (element.textAlign === TEXT_ALIGN.CENTER) {
+    spacesOffset = -Math.min(trailingSpacesWidth / 2, availableWidth / 2);
+  } else if (element.textAlign === TEXT_ALIGN.RIGHT) {
+    spacesOffset = -Math.min(availableWidth, trailingSpacesWidth);
+  }
+  return spacesOffset;
+};

src/element/textWysiwyg.test.tsx

@@ -26,17 +26,6 @@ ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 const tab = "    ";
 const mouse = new Pointer("mouse");
 
-const getTextEditor = () => {
-  return document.querySelector(
-    ".excalidraw-textEditorContainer > textarea",
-  ) as HTMLTextAreaElement;
-};
-
-const updateTextEditor = (editor: HTMLTextAreaElement, value: string) => {
-  fireEvent.change(editor, { target: { value } });
-  editor.dispatchEvent(new Event("input"));
-};
-
 describe("textWysiwyg", () => {
   describe("start text editing", () => {
     const { h } = window;
@@ -201,7 +190,9 @@ describe("textWysiwyg", () => {
 
       mouse.clickAt(text.x + 50, text.y + 50);
 
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       expect(editor).not.toBe(null);
       expect(h.state.editingElement?.id).toBe(text.id);
@@ -223,7 +214,9 @@ describe("textWysiwyg", () => {
 
       mouse.doubleClickAt(text.x + 50, text.y + 50);
 
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       expect(editor).not.toBe(null);
       expect(h.state.editingElement?.id).toBe(text.id);
@@ -250,7 +243,9 @@ describe("textWysiwyg", () => {
       textElement = UI.createElement("text");
 
       mouse.clickOn(textElement);
-      textarea = getTextEditor();
+      textarea = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      )!;
     });
 
     afterAll(() => {
@@ -460,11 +455,17 @@ describe("textWysiwyg", () => {
       UI.clickTool("text");
       mouse.clickAt(750, 300);
 
-      textarea = getTextEditor();
-      updateTextEditor(
-        textarea,
-        "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
-      );
+      textarea = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      )!;
+      fireEvent.change(textarea, {
+        target: {
+          value:
+            "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
+        },
+      });
+
+      textarea.dispatchEvent(new Event("input"));
       await new Promise((cb) => setTimeout(cb, 0));
       textarea.blur();
       expect(textarea.style.width).toBe("792px");
@@ -512,9 +513,11 @@ describe("textWysiwyg", () => {
         { id: text.id, type: "text" },
       ]);
       mouse.down();
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -540,9 +543,11 @@ describe("textWysiwyg", () => {
       ]);
       expect(text.angle).toBe(rectangle.angle);
       mouse.down();
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -567,7 +572,9 @@ describe("textWysiwyg", () => {
       API.setSelectedElements([diamond]);
       Keyboard.keyPress(KEYS.ENTER);
 
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       await new Promise((r) => setTimeout(r, 0));
       const value = new Array(1000).fill("1").join("\n");
@@ -580,7 +587,9 @@ describe("textWysiwyg", () => {
       expect(diamond.height).toBe(50020);
 
       // Clearing text to simulate height decrease
-      expect(() => updateTextEditor(editor, "")).not.toThrow();
+      expect(() =>
+        fireEvent.input(editor, { target: { value: "" } }),
+      ).not.toThrow();
 
       expect(diamond.height).toBe(70);
     });
@@ -602,7 +611,9 @@ describe("textWysiwyg", () => {
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(null);
       mouse.down();
-      let editor = getTextEditor();
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
 
@@ -617,9 +628,11 @@ describe("textWysiwyg", () => {
       expect(text.containerId).toBe(rectangle.id);
 
       mouse.down();
-      editor = getTextEditor();
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
 
@@ -639,11 +652,13 @@ describe("textWysiwyg", () => {
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(rectangle.id);
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       await new Promise((r) => setTimeout(r, 0));
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: text.id, type: "text" },
@@ -674,8 +689,11 @@ describe("textWysiwyg", () => {
         { id: text.id, type: "text" },
       ]);
       mouse.down();
-      const editor = getTextEditor();
-      updateTextEditor(editor, "Hello World!");
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -699,9 +717,17 @@ describe("textWysiwyg", () => {
         freedraw.y + freedraw.height / 2,
       );
 
-      const editor = getTextEditor();
-      updateTextEditor(editor, "Hello World!");
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, {
+        target: {
+          value: "Hello World!",
+        },
+      });
       fireEvent.keyDown(editor, { key: KEYS.ESCAPE });
+      editor.dispatchEvent(new Event("input"));
 
       expect(freedraw.boundElements).toBe(null);
       expect(h.elements[1].type).toBe("text");
@@ -733,9 +759,11 @@ describe("textWysiwyg", () => {
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(null);
       mouse.down();
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -748,12 +776,17 @@ describe("textWysiwyg", () => {
 
       UI.clickTool("text");
       mouse.clickAt(20, 30);
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(
-        editor,
-        "Excalidraw is an opensource virtual collaborative whiteboard",
-      );
+      fireEvent.change(editor, {
+        target: {
+          value: "Excalidraw is an opensource virtual collaborative whiteboard",
+        },
+      });
+
+      editor.dispatchEvent(new Event("input"));
       await new Promise((cb) => setTimeout(cb, 0));
       expect(h.elements.length).toBe(2);
       expect(h.elements[1].type).toBe("text");
@@ -793,10 +826,12 @@ describe("textWysiwyg", () => {
       mouse.down();
 
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = getTextEditor();
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
       editor.blur();
       expect(text.fontFamily).toEqual(FONT_FAMILY.Virgil);
       UI.clickTool("text");
@@ -806,7 +841,9 @@ describe("textWysiwyg", () => {
         rectangle.y + rectangle.height / 2,
       );
       mouse.down();
-      editor = getTextEditor();
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       editor.select();
       fireEvent.click(screen.getByTitle(/code/i));
@@ -839,9 +876,17 @@ describe("textWysiwyg", () => {
 
       Keyboard.keyDown(KEYS.ENTER);
       let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = getTextEditor();
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, {
+        target: {
+          value: "Hello World!",
+        },
+      });
+
+      editor.dispatchEvent(new Event("input"));
 
       await new Promise((cb) => setTimeout(cb, 0));
       editor.blur();
@@ -860,8 +905,17 @@ describe("textWysiwyg", () => {
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
 
-      editor = getTextEditor();
-      updateTextEditor(editor, "Hello");
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, {
+        target: {
+          value: "Hello",
+        },
+      });
+
+      editor.dispatchEvent(new Event("input"));
 
       await new Promise((r) => setTimeout(r, 0));
 
@@ -889,11 +943,13 @@ describe("textWysiwyg", () => {
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.containerId).toBe(rectangle.id);
 
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       await new Promise((r) => setTimeout(r, 0));
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: text.id, type: "text" },
@@ -926,9 +982,11 @@ describe("textWysiwyg", () => {
       // Bind first text
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.containerId).toBe(rectangle.id);
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: text.id, type: "text" },
@@ -947,9 +1005,11 @@ describe("textWysiwyg", () => {
     it("should respect text alignment when resizing", async () => {
       Keyboard.keyPress(KEYS.ENTER);
 
-      let editor = getTextEditor();
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello");
+      fireEvent.change(editor, { target: { value: "Hello" } });
       editor.blur();
 
       // should center align horizontally and vertically by default
@@ -964,7 +1024,9 @@ describe("textWysiwyg", () => {
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
 
-      editor = getTextEditor();
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       editor.select();
 
@@ -987,7 +1049,9 @@ describe("textWysiwyg", () => {
 
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
-      editor = getTextEditor();
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       editor.select();
 
@@ -1025,9 +1089,11 @@ describe("textWysiwyg", () => {
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(rectangle.id);
       mouse.down();
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(editor, "Hello World!");
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -1040,9 +1106,11 @@ describe("textWysiwyg", () => {
     it("should scale font size correctly when resizing using shift", async () => {
       Keyboard.keyPress(KEYS.ENTER);
 
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello");
+      fireEvent.change(editor, { target: { value: "Hello" } });
       editor.blur();
       const textElement = h.elements[1] as ExcalidrawTextElement;
       expect(rectangle.width).toBe(90);
@@ -1060,9 +1128,11 @@ describe("textWysiwyg", () => {
     it("should bind text correctly when container duplicated with alt-drag", async () => {
       Keyboard.keyPress(KEYS.ENTER);
 
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello");
+      fireEvent.change(editor, { target: { value: "Hello" } });
       editor.blur();
       expect(h.elements.length).toBe(2);
 
@@ -1092,9 +1162,11 @@ describe("textWysiwyg", () => {
 
     it("undo should work", async () => {
       Keyboard.keyPress(KEYS.ENTER);
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello");
+      fireEvent.change(editor, { target: { value: "Hello" } });
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: h.elements[1].id, type: "text" },
@@ -1129,10 +1201,12 @@ describe("textWysiwyg", () => {
 
     it("should not allow bound text with only whitespaces", async () => {
       Keyboard.keyPress(KEYS.ENTER);
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
 
-      updateTextEditor(editor, "   ");
+      fireEvent.change(editor, { target: { value: "   " } });
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([]);
       expect(h.elements[1].isDeleted).toBe(true);
@@ -1151,9 +1225,9 @@ describe("textWysiwyg", () => {
         type: "text",
         text: "Online whiteboard collaboration made easy",
       });
-
       h.elements = [container, text];
       API.setSelectedElements([container, text]);
+
       fireEvent.contextMenu(GlobalTestState.canvas, {
         button: 2,
         clientX: 20,
@@ -1184,9 +1258,11 @@ describe("textWysiwyg", () => {
     it("should reset the container height cache when resizing", async () => {
       Keyboard.keyPress(KEYS.ENTER);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
-      let editor = getTextEditor();
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello");
+      fireEvent.change(editor, { target: { value: "Hello" } });
       editor.blur();
 
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
@@ -1196,7 +1272,9 @@ describe("textWysiwyg", () => {
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
 
-      editor = getTextEditor();
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -1209,8 +1287,12 @@ describe("textWysiwyg", () => {
       Keyboard.keyPress(KEYS.ENTER);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
 
-      const editor = getTextEditor();
-      updateTextEditor(editor, "Hello World!");
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
       editor.blur();
 
       mouse.select(rectangle);
@@ -1234,8 +1316,12 @@ describe("textWysiwyg", () => {
       Keyboard.keyPress(KEYS.ENTER);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
 
-      const editor = getTextEditor();
-      updateTextEditor(editor, "Hello World!");
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
       editor.blur();
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
@@ -1266,12 +1352,17 @@ describe("textWysiwyg", () => {
 
       beforeEach(async () => {
         Keyboard.keyPress(KEYS.ENTER);
-        editor = getTextEditor();
-        updateTextEditor(editor, "Hello");
+        editor = document.querySelector(
+          ".excalidraw-textEditorContainer > textarea",
+        ) as HTMLTextAreaElement;
+        await new Promise((r) => setTimeout(r, 0));
+        fireEvent.change(editor, { target: { value: "Hello" } });
         editor.blur();
         mouse.select(rectangle);
         Keyboard.keyPress(KEYS.ENTER);
-        editor = getTextEditor();
+        editor = document.querySelector(
+          ".excalidraw-textEditorContainer > textarea",
+        ) as HTMLTextAreaElement;
         editor.select();
       });
 
@@ -1382,12 +1473,17 @@ describe("textWysiwyg", () => {
     it("should wrap text in a container when wrap text in container triggered from context menu", async () => {
       UI.clickTool("text");
       mouse.clickAt(20, 30);
-      const editor = getTextEditor();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
 
-      updateTextEditor(
-        editor,
-        "Excalidraw is an opensource virtual collaborative whiteboard",
-      );
+      fireEvent.change(editor, {
+        target: {
+          value: "Excalidraw is an opensource virtual collaborative whiteboard",
+        },
+      });
+
+      editor.dispatchEvent(new Event("input"));
       await new Promise((cb) => setTimeout(cb, 0));
 
       editor.select();
@@ -1459,54 +1555,5 @@ describe("textWysiwyg", () => {
         }),
       );
     });
-
-    it("shouldn't bind to container if container has bound text not centered and text tool is used", async () => {
-      expect(h.elements.length).toBe(1);
-
-      Keyboard.keyPress(KEYS.ENTER);
-
-      expect(h.elements.length).toBe(2);
-
-      // Bind first text
-      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.containerId).toBe(rectangle.id);
-      let editor = getTextEditor();
-      await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Hello!");
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).verticalAlign,
-      ).toBe(VERTICAL_ALIGN.MIDDLE);
-
-      fireEvent.click(screen.getByTitle("Align bottom"));
-      await new Promise((r) => setTimeout(r, 0));
-
-      editor.blur();
-
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: text.id, type: "text" },
-      ]);
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).verticalAlign,
-      ).toBe(VERTICAL_ALIGN.BOTTOM);
-
-      // Attempt to Bind 2nd text using text tool
-      UI.clickTool("text");
-      mouse.clickAt(
-        rectangle.x + rectangle.width / 2,
-        rectangle.y + rectangle.height / 2,
-      );
-      editor = getTextEditor();
-      await new Promise((r) => setTimeout(r, 0));
-      updateTextEditor(editor, "Excalidraw");
-      editor.blur();
-
-      expect(h.elements.length).toBe(3);
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: h.elements[1].id, type: "text" },
-      ]);
-      text = h.elements[2] as ExcalidrawTextElementWithContainer;
-      expect(text.containerId).toBe(null);
-      expect(text.text).toBe("Excalidraw");
-    });
   });
 });

src/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isSafari } from "../constants";
+import { CLASSES, TEXT_ALIGN, isSafari } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -26,7 +26,7 @@ import {
   getContainerDims,
   getContainerElement,
   getTextElementAngle,
-  getTextWidth,
+  measureText,
   normalizeText,
   redrawTextBoundingBox,
   wrapText,
@@ -196,6 +196,8 @@ export const textWysiwyg = ({
         }
 
         maxWidth = getBoundTextMaxWidth(container);
+        textElementWidth = Math.min(textElementWidth, maxWidth);
+
         maxHeight = getBoundTextMaxHeight(
           container,
           updatedTextElement as ExcalidrawTextElementWithContainer,
@@ -230,7 +232,16 @@ export const textWysiwyg = ({
           coordY = y;
         }
       }
-      const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
+      let spacesOffset = 0;
+      if (updatedTextElement.textAlign === TEXT_ALIGN.CENTER) {
+        spacesOffset = Math.max(0, updatedTextElement.width / 2 - maxWidth / 2);
+      } else if (updatedTextElement.textAlign === TEXT_ALIGN.RIGHT) {
+        spacesOffset = Math.max(0, updatedTextElement.width - maxWidth);
+      }
+      const [viewportX, viewportY] = getViewportCoords(
+        coordX + spacesOffset,
+        coordY,
+      );
       const initialSelectionStart = editable.selectionStart;
       const initialSelectionEnd = editable.selectionEnd;
       const initialLength = editable.value.length;
@@ -362,7 +373,12 @@ export const textWysiwyg = ({
           font,
           getBoundTextMaxWidth(container),
         );
-        const width = getTextWidth(wrappedText, font);
+        const { width } = measureText(
+          wrappedText,
+          font,
+          element.lineHeight,
+          getBoundTextMaxWidth(container),
+        );
         editable.style.width = `${width}px`;
       }
     };

src/element/transformHandles.ts

@@ -8,7 +8,7 @@ import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { AppState, Zoom } from "../types";
 import { isTextElement } from ".";
-import { isFrameElement, isLinearElement } from "./typeChecks";
+import { isLinearElement } from "./typeChecks";
 import { DEFAULT_SPACING } from "../renderer/renderScene";
 
 export type TransformHandleDirection =
@@ -44,14 +44,6 @@ export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
   w: true,
 };
 
-export const OMIT_SIDES_FOR_FRAME = {
-  e: true,
-  s: true,
-  n: true,
-  w: true,
-  rotation: true,
-};
-
 const OMIT_SIDES_FOR_TEXT_ELEMENT = {
   e: true,
   s: true,
@@ -257,10 +249,6 @@ export const getTransformHandles = (
     }
   } else if (isTextElement(element)) {
     omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-  } else if (isFrameElement(element)) {
-    omitSides = {
-      rotation: true,
-    };
   }
   const dashedLineMargin = isLinearElement(element)
     ? DEFAULT_SPACING + 8

src/element/typeChecks.test.ts

@@ -30,6 +30,15 @@ describe("Test TypeChecks", () => {
           }),
         ),
       ).toBeTruthy();
+
+      expect(
+        hasBoundTextElement(
+          API.createElement({
+            type: "image",
+            boundElements: [{ type: "text", id: "text-id" }],
+          }),
+        ),
+      ).toBeTruthy();
     });
 
     it("should return false for text bindable containers without bound text", () => {
@@ -53,14 +62,5 @@ describe("Test TypeChecks", () => {
         ),
       ).toBeFalsy();
     });
-
-    expect(
-      hasBoundTextElement(
-        API.createElement({
-          type: "image",
-          boundElements: [{ type: "text", id: "text-id" }],
-        }),
-      ),
-    ).toBeFalsy();
   });
 });

src/element/typeChecks.ts

@@ -12,7 +12,6 @@ import {
   ExcalidrawImageElement,
   ExcalidrawTextElementWithContainer,
   ExcalidrawTextContainer,
-  ExcalidrawFrameElement,
   RoundnessType,
 } from "./types";
 
@@ -46,12 +45,6 @@ export const isTextElement = (
   return element != null && element.type === "text";
 };
 
-export const isFrameElement = (
-  element: ExcalidrawElement | null,
-): element is ExcalidrawFrameElement => {
-  return element != null && element.type === "frame";
-};
-
 export const isFreeDrawElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawFreeDrawElement => {
@@ -126,6 +119,7 @@ export const isTextBindableContainer = (
     (element.type === "rectangle" ||
       element.type === "diamond" ||
       element.type === "ellipse" ||
+      element.type === "image" ||
       isArrowElement(element))
   );
 };

src/element/types.ts

@@ -53,7 +53,6 @@ type _ExcalidrawElementBase = Readonly<{
   /** List of groups the element belongs to.
       Ordered from deepest to shallowest. */
   groupIds: readonly GroupId[];
-  frameId: string | null;
   /** other elements that are bound to this element */
   boundElements:
     | readonly Readonly<{
@@ -99,11 +98,6 @@ export type InitializedExcalidrawImageElement = MarkNonNullable<
   "fileId"
 >;
 
-export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
-  type: "frame";
-  name: string | null;
-};
-
 /**
  * These are elements that don't have any additional properties.
  */
@@ -123,8 +117,7 @@ export type ExcalidrawElement =
   | ExcalidrawTextElement
   | ExcalidrawLinearElement
   | ExcalidrawFreeDrawElement
-  | ExcalidrawImageElement
-  | ExcalidrawFrameElement;
+  | ExcalidrawImageElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
   isDeleted: boolean;
@@ -155,13 +148,13 @@ export type ExcalidrawBindableElement =
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
   | ExcalidrawTextElement
-  | ExcalidrawImageElement
-  | ExcalidrawFrameElement;
+  | ExcalidrawImageElement;
 
 export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
+  | ExcalidrawImageElement
   | ExcalidrawArrowElement;
 
 export type ExcalidrawTextElementWithContainer = {

src/excalidraw-app/app_constants.ts

@@ -7,8 +7,6 @@ export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
 export const SYNC_BROWSER_TABS_TIMEOUT = 50;
 export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
 export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
-export const PAUSE_COLLABORATION_TIMEOUT = 30000;
-export const RESUME_FALLBACK_TIMEOUT = 5000;
 
 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
 // 1 year (https://stackoverflow.com/a/25201898/927631)

src/excalidraw-app/collab/Collab.tsx

@@ -1,6 +1,6 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-import { ExcalidrawImperativeAPI, PauseCollaborationState } from "../../types";
+import { ExcalidrawImperativeAPI } from "../../types";
 import { ErrorDialog } from "../../components/ErrorDialog";
 import { APP_NAME, ENV, EVENT } from "../../constants";
 import { ImportedDataState } from "../../data/types";
@@ -16,7 +16,6 @@ import { Collaborator, Gesture } from "../../types";
 import {
   preventUnload,
   resolvablePromise,
-  upsertMap,
   withBatchedUpdates,
 } from "../../utils";
 import {
@@ -25,15 +24,12 @@ import {
   FIREBASE_STORAGE_PREFIXES,
   INITIAL_SCENE_UPDATE_TIMEOUT,
   LOAD_IMAGES_TIMEOUT,
-  PAUSE_COLLABORATION_TIMEOUT,
   WS_SCENE_EVENT_TYPES,
   SYNC_FULL_SCENE_INTERVAL_MS,
-  RESUME_FALLBACK_TIMEOUT,
 } from "../app_constants";
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
-  getCollaborationLinkData,
   getCollabServer,
   getSyncableElements,
   SocketUpdateDataSource,
@@ -47,8 +43,8 @@ import {
   saveToFirebase,
 } from "../data/firebase";
 import {
-  importUsernameAndIdFromLocalStorage,
-  saveUsernameAndIdToLocalStorage,
+  importUsernameFromLocalStorage,
+  saveUsernameToLocalStorage,
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
@@ -75,19 +71,16 @@ import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
 import { atom, useAtom } from "jotai";
 import { appJotaiStore } from "../app-jotai";
-import { nanoid } from "nanoid";
 
 export const collabAPIAtom = atom<CollabAPI | null>(null);
 export const collabDialogShownAtom = atom(false);
 export const isCollaboratingAtom = atom(false);
 export const isOfflineAtom = atom(false);
-export const isCollaborationPausedAtom = atom(false);
 
 interface CollabState {
   errorMessage: string;
   username: string;
   activeRoomLink: string;
-  userId: string;
 }
 
 type CollabInstance = InstanceType<typeof Collab>;
@@ -101,7 +94,6 @@ export interface CollabAPI {
   syncElements: CollabInstance["syncElements"];
   fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
   setUsername: (username: string) => void;
-  isPaused: () => boolean;
 }
 
 interface PublicProps {
@@ -116,7 +108,6 @@ class Collab extends PureComponent<Props, CollabState> {
   excalidrawAPI: Props["excalidrawAPI"];
   activeIntervalId: number | null;
   idleTimeoutId: number | null;
-  pauseTimeoutId: number | null;
 
   private socketInitializationTimer?: number;
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
@@ -124,13 +115,9 @@ class Collab extends PureComponent<Props, CollabState> {
 
   constructor(props: Props) {
     super(props);
-
-    const { username, userId } = importUsernameAndIdFromLocalStorage() || {};
-
     this.state = {
       errorMessage: "",
-      username: username || "",
-      userId: userId || "",
+      username: importUsernameFromLocalStorage() || "",
       activeRoomLink: "",
     };
     this.portal = new Portal(this);
@@ -162,7 +149,6 @@ class Collab extends PureComponent<Props, CollabState> {
     this.excalidrawAPI = props.excalidrawAPI;
     this.activeIntervalId = null;
     this.idleTimeoutId = null;
-    this.pauseTimeoutId = null;
   }
 
   componentDidMount() {
@@ -171,8 +157,6 @@ class Collab extends PureComponent<Props, CollabState> {
     window.addEventListener("offline", this.onOfflineStatusToggle);
     window.addEventListener(EVENT.UNLOAD, this.onUnload);
 
-    this.onOfflineStatusToggle();
-
     const collabAPI: CollabAPI = {
       isCollaborating: this.isCollaborating,
       onPointerUpdate: this.onPointerUpdate,
@@ -181,10 +165,10 @@ class Collab extends PureComponent<Props, CollabState> {
       fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase,
       stopCollaboration: this.stopCollaboration,
       setUsername: this.setUsername,
-      isPaused: this.isPaused,
     };
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
+    this.onOfflineStatusToggle();
 
     if (
       process.env.NODE_ENV === ENV.TEST ||
@@ -222,10 +206,6 @@ class Collab extends PureComponent<Props, CollabState> {
       window.clearTimeout(this.idleTimeoutId);
       this.idleTimeoutId = null;
     }
-    if (this.pauseTimeoutId) {
-      window.clearTimeout(this.pauseTimeoutId);
-      this.pauseTimeoutId = null;
-    }
   }
 
   isCollaborating = () => appJotaiStore.get(isCollaboratingAtom)!;
@@ -329,126 +309,6 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
-  fallbackResumeTimeout: null | ReturnType<typeof setTimeout> = null;
-
-  /**
-   * Handles the pause and resume states of a collaboration session.
-   * This function gets triggered when a change in the collaboration pause state is detected.
-   * Based on the state, the function carries out the following actions:
-   * 1. `PAUSED`: Saves the current scene to Firebase, disconnects the socket, and updates the scene to view mode.
-   * 2. `RESUMED`: Connects the socket, shows a toast message, sets a fallback to fetch data from Firebase, and resets the pause timeout if any.
-   * 3. `SYNCED`: Clears the fallback timeout if any, updates the collaboration pause state, and updates the scene to editing mode.
-   *
-   * @param state - The new state of the collaboration session. It is one of the values of `PauseCollaborationState` enum, which includes `PAUSED`, `RESUMED`, and `SYNCED`.
-   */
-  onPauseCollaborationChange = (state: PauseCollaborationState) => {
-    switch (state) {
-      case PauseCollaborationState.PAUSED: {
-        if (this.portal.socket) {
-          // Save current scene to firebase
-          this.saveCollabRoomToFirebase(
-            getSyncableElements(
-              this.excalidrawAPI.getSceneElementsIncludingDeleted(),
-            ),
-          );
-
-          this.portal.socket.disconnect();
-          this.portal.socketInitialized = false;
-          this.setIsCollaborationPaused(true);
-
-          this.excalidrawAPI.updateScene({
-            appState: { viewModeEnabled: true },
-          });
-        }
-        break;
-      }
-      case PauseCollaborationState.RESUMED: {
-        if (this.portal.socket && this.isPaused()) {
-          this.portal.socket.connect();
-          this.portal.socket.emit(WS_SCENE_EVENT_TYPES.INIT);
-
-          this.excalidrawAPI.setToast({
-            message: t("toast.reconnectRoomServer"),
-            duration: Infinity,
-            spinner: true,
-            closable: false,
-          });
-
-          // Fallback to fetch data from firebase when reconnecting to scene without collaborators
-          const fallbackResumeHandler = async () => {
-            const roomLinkData = getCollaborationLinkData(
-              this.state.activeRoomLink,
-            );
-            if (!roomLinkData) {
-              return;
-            }
-            const elements = await loadFromFirebase(
-              roomLinkData.roomId,
-              roomLinkData.roomKey,
-              this.portal.socket,
-            );
-            if (elements) {
-              this.setLastBroadcastedOrReceivedSceneVersion(
-                getSceneVersion(elements),
-              );
-
-              this.excalidrawAPI.updateScene({
-                elements,
-              });
-            }
-            this.onPauseCollaborationChange(PauseCollaborationState.SYNCED);
-          };
-
-          // Set timeout to fallback to fetch data from firebase
-          this.fallbackResumeTimeout = setTimeout(
-            fallbackResumeHandler,
-            RESUME_FALLBACK_TIMEOUT,
-          );
-
-          // When no users are in the room, we fallback to fetch data from firebase immediately and clear fallback timeout
-          this.portal.socket.on("first-in-room", () => {
-            if (this.portal.socket) {
-              this.portal.socket.off("first-in-room");
-              // Recall init event to initialize collab with other users (fixes https://github.com/excalidraw/excalidraw/pull/6638#issuecomment-1600799080)
-              this.portal.socket.emit(WS_SCENE_EVENT_TYPES.INIT);
-            }
-
-            fallbackResumeHandler();
-          });
-        }
-
-        // Clear pause timeout if exists
-        if (this.pauseTimeoutId) {
-          clearTimeout(this.pauseTimeoutId);
-        }
-
-        break;
-      }
-      case PauseCollaborationState.SYNCED: {
-        if (this.fallbackResumeTimeout) {
-          clearTimeout(this.fallbackResumeTimeout);
-          this.fallbackResumeTimeout = null;
-        }
-
-        if (this.isPaused()) {
-          this.setIsCollaborationPaused(false);
-
-          this.excalidrawAPI.updateScene({
-            appState: { viewModeEnabled: false },
-          });
-          this.excalidrawAPI.setToast(null);
-          this.excalidrawAPI.scrollToContent();
-        }
-      }
-    }
-  };
-
-  isPaused = () => appJotaiStore.get(isCollaborationPausedAtom)!;
-
-  setIsCollaborationPaused = (isPaused: boolean) => {
-    appJotaiStore.set(isCollaborationPausedAtom, isPaused);
-  };
-
   private destroySocketClient = (opts?: { isUnload: boolean }) => {
     this.lastBroadcastedOrReceivedSceneVersion = -1;
     this.portal.close();
@@ -520,18 +380,6 @@ class Collab extends PureComponent<Props, CollabState> {
   startCollaboration = async (
     existingRoomLinkData: null | { roomId: string; roomKey: string },
   ): Promise<ImportedDataState | null> => {
-    if (!this.state.username) {
-      import("@excalidraw/random-username").then(({ getRandomUsername }) => {
-        const username = getRandomUsername();
-        this.onUsernameChange(username);
-      });
-    }
-
-    if (!this.state.userId) {
-      const userId = nanoid();
-      this.onUserIdChange(userId);
-    }
-
     if (this.portal.socket) {
       return null;
     }
@@ -646,7 +494,6 @@ class Collab extends PureComponent<Props, CollabState> {
                 elements: reconciledElements,
                 scrollToContent: true,
               });
-              this.onPauseCollaborationChange(PauseCollaborationState.SYNCED);
             }
             break;
           }
@@ -656,63 +503,36 @@ class Collab extends PureComponent<Props, CollabState> {
             );
             break;
           case "MOUSE_LOCATION": {
-            const {
-              pointer,
-              button,
-              username,
-              selectedElementIds,
-              userId,
-              socketId,
-            } = decryptedData.payload;
-            const collaborators = upsertMap(
-              userId,
-              {
-                username,
-                pointer,
-                button,
-                selectedElementIds,
-                socketId,
-              },
-              this.collaborators,
-            );
+            const { pointer, button, username, selectedElementIds } =
+              decryptedData.payload;
+            const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
+              decryptedData.payload.socketId ||
+              // @ts-ignore legacy, see #2094 (#2097)
+              decryptedData.payload.socketID;
+
+            const collaborators = new Map(this.collaborators);
+            const user = collaborators.get(socketId) || {}!;
+            user.pointer = pointer;
+            user.button = button;
+            user.selectedElementIds = selectedElementIds;
+            user.username = username;
+            collaborators.set(socketId, user);
             this.excalidrawAPI.updateScene({
-              collaborators: new Map(collaborators),
+              collaborators,
             });
             break;
           }
           case "IDLE_STATUS": {
-            const { userState, username, userId, socketId } =
-              decryptedData.payload;
-            const collaborators = upsertMap(
-              userId,
-              {
-                username,
-                userState,
-                userId,
-                socketId,
-              },
-              this.collaborators,
-            );
+            const { userState, socketId, username } = decryptedData.payload;
+            const collaborators = new Map(this.collaborators);
+            const user = collaborators.get(socketId) || {}!;
+            user.userState = userState;
+            user.username = username;
             this.excalidrawAPI.updateScene({
-              collaborators: new Map(collaborators),
+              collaborators,
             });
             break;
           }
-          case "USER_JOINED": {
-            const { username, userId, socketId } = decryptedData.payload;
-            const collaborators = upsertMap(
-              userId,
-              {
-                username,
-                userId,
-                socketId,
-              },
-              this.collaborators,
-            );
-            this.excalidrawAPI.updateScene({
-              collaborators: new Map(collaborators),
-            });
-          }
         }
       },
     );
@@ -781,15 +601,6 @@ class Collab extends PureComponent<Props, CollabState> {
     } else {
       this.portal.socketInitialized = true;
     }
-
-    if (this.portal.socket) {
-      this.portal.brodcastUserJoinedRoom({
-        username: this.state.username,
-        userId: this.state.userId,
-        socketId: this.portal.socket.id,
-      });
-    }
-
     return null;
   };
 
@@ -877,10 +688,6 @@ class Collab extends PureComponent<Props, CollabState> {
         window.clearInterval(this.activeIntervalId);
         this.activeIntervalId = null;
       }
-      this.pauseTimeoutId = window.setTimeout(
-        () => this.onPauseCollaborationChange(PauseCollaborationState.PAUSED),
-        PAUSE_COLLABORATION_TIMEOUT,
-      );
       this.onIdleStateChange(UserIdleState.AWAY);
     } else {
       this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
@@ -889,11 +696,6 @@ class Collab extends PureComponent<Props, CollabState> {
         ACTIVE_THRESHOLD,
       );
       this.onIdleStateChange(UserIdleState.ACTIVE);
-      if (this.pauseTimeoutId) {
-        window.clearTimeout(this.pauseTimeoutId);
-        this.onPauseCollaborationChange(PauseCollaborationState.RESUMED);
-        this.pauseTimeoutId = null;
-      }
     }
   };
 
@@ -915,12 +717,17 @@ class Collab extends PureComponent<Props, CollabState> {
   };
 
   setCollaborators(sockets: string[]) {
-    this.collaborators.forEach((value, key) => {
-      if (value.socketId && !sockets.includes(value.socketId)) {
-        this.collaborators.delete(key);
+    const collaborators: InstanceType<typeof Collab>["collaborators"] =
+      new Map();
+    for (const socketId of sockets) {
+      if (this.collaborators.has(socketId)) {
+        collaborators.set(socketId, this.collaborators.get(socketId)!);
+      } else {
+        collaborators.set(socketId, {});
       }
-    });
-    this.excalidrawAPI.updateScene({ collaborators: this.collaborators });
+    }
+    this.collaborators = collaborators;
+    this.excalidrawAPI.updateScene({ collaborators });
   }
 
   public setLastBroadcastedOrReceivedSceneVersion = (version: number) => {
@@ -1006,12 +813,7 @@ class Collab extends PureComponent<Props, CollabState> {
 
   onUsernameChange = (username: string) => {
     this.setUsername(username);
-    saveUsernameAndIdToLocalStorage(username, this.state.userId);
-  };
-
-  onUserIdChange = (userId: string) => {
-    this.setState({ userId });
-    saveUsernameAndIdToLocalStorage(this.state.username, userId);
+    saveUsernameToLocalStorage(username);
   };
 
   render() {

src/excalidraw-app/collab/Portal.tsx

@@ -37,29 +37,6 @@ class Portal {
     this.roomId = id;
     this.roomKey = key;
 
-    this.initializeSocketListeners();
-
-    return socket;
-  }
-
-  close() {
-    if (!this.socket) {
-      return;
-    }
-    this.queueFileUpload.flush();
-    this.socket.close();
-    this.socket = null;
-    this.roomId = null;
-    this.roomKey = null;
-    this.socketInitialized = false;
-    this.broadcastedElementVersions = new Map();
-  }
-
-  initializeSocketListeners() {
-    if (!this.socket) {
-      return;
-    }
-
     // Initialize socket listeners
     this.socket.on("init-room", () => {
       if (this.socket) {
@@ -77,6 +54,21 @@ class Portal {
     this.socket.on("room-user-change", (clients: string[]) => {
       this.collab.setCollaborators(clients);
     });
+
+    return socket;
+  }
+
+  close() {
+    if (!this.socket) {
+      return;
+    }
+    this.queueFileUpload.flush();
+    this.socket.close();
+    this.socket = null;
+    this.roomId = null;
+    this.roomKey = null;
+    this.socketInitialized = false;
+    this.broadcastedElementVersions = new Map();
   }
 
   isOpen() {
@@ -189,14 +181,13 @@ class Portal {
   };
 
   broadcastIdleChange = (userState: UserIdleState) => {
-    if (this.socket) {
+    if (this.socket?.id) {
       const data: SocketUpdateDataSource["IDLE_STATUS"] = {
         type: "IDLE_STATUS",
         payload: {
+          socketId: this.socket.id,
           userState,
           username: this.collab.state.username,
-          userId: this.collab.state.userId,
-          socketId: this.socket.id,
         },
       };
       return this._broadcastSocketData(
@@ -210,17 +201,16 @@ class Portal {
     pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
     button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
   }) => {
-    if (this.socket) {
+    if (this.socket?.id) {
       const data: SocketUpdateDataSource["MOUSE_LOCATION"] = {
         type: "MOUSE_LOCATION",
         payload: {
+          socketId: this.socket.id,
           pointer: payload.pointer,
           button: payload.button || "up",
           selectedElementIds:
             this.collab.excalidrawAPI.getAppState().selectedElementIds,
           username: this.collab.state.username,
-          userId: this.collab.state.userId,
-          socketId: this.socket.id,
         },
       };
       return this._broadcastSocketData(
@@ -229,23 +219,6 @@ class Portal {
       );
     }
   };
-
-  brodcastUserJoinedRoom = (payload: {
-    username: string;
-    userId: string;
-    socketId: string;
-  }) => {
-    if (this.socket) {
-      const data: SocketUpdateDataSource["USER_JOINED"] = {
-        type: "USER_JOINED",
-        payload,
-      };
-      return this._broadcastSocketData(
-        data as SocketUpdateData,
-        false, // volatile
-      );
-    }
-  };
 }
 
 export default Portal;

src/excalidraw-app/components/AppMainMenu.tsx

@@ -6,7 +6,6 @@ import { LanguageList } from "./LanguageList";
 export const AppMainMenu: React.FC<{
   setCollabDialogShown: (toggle: boolean) => any;
   isCollaborating: boolean;
-  isCollabEnabled: boolean;
 }> = React.memo((props) => {
   return (
     <MainMenu>
@@ -14,12 +13,10 @@ export const AppMainMenu: React.FC<{
       <MainMenu.DefaultItems.SaveToActiveFile />
       <MainMenu.DefaultItems.Export />
       <MainMenu.DefaultItems.SaveAsImage />
-      {props.isCollabEnabled && (
-        <MainMenu.DefaultItems.LiveCollaborationTrigger
-          isCollaborating={props.isCollaborating}
-          onSelect={() => props.setCollabDialogShown(true)}
-        />
-      )}
+      <MainMenu.DefaultItems.LiveCollaborationTrigger
+        isCollaborating={props.isCollaborating}
+        onSelect={() => props.setCollabDialogShown(true)}
+      />
 
       <MainMenu.DefaultItems.Help />
       <MainMenu.DefaultItems.ClearCanvas />

src/excalidraw-app/components/AppWelcomeScreen.tsx

@@ -6,7 +6,6 @@ import { isExcalidrawPlusSignedUser } from "../app_constants";
 
 export const AppWelcomeScreen: React.FC<{
   setCollabDialogShown: (toggle: boolean) => any;
-  isCollabEnabled: boolean;
 }> = React.memo((props) => {
   const { t } = useI18n();
   let headingContent;
@@ -47,11 +46,9 @@ export const AppWelcomeScreen: React.FC<{
         <WelcomeScreen.Center.Menu>
           <WelcomeScreen.Center.MenuItemLoadScene />
           <WelcomeScreen.Center.MenuItemHelp />
-          {props.isCollabEnabled && (
-            <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
-              onSelect={() => props.setCollabDialogShown(true)}
-            />
-          )}
+          <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
+            onSelect={() => props.setCollabDialogShown(true)}
+          />
           {!isExcalidrawPlusSignedUser && (
             <WelcomeScreen.Center.MenuItemLink
               href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -16,7 +16,7 @@ import { MIME_TYPES } from "../../constants";
 import { trackEvent } from "../../analytics";
 import { getFrame } from "../../utils";
 
-export const exportToExcalidrawPlus = async (
+const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: Partial<AppState>,
   files: BinaryFiles,

src/excalidraw-app/data/index.ts

@@ -106,29 +106,19 @@ export type SocketUpdateDataSource = {
   MOUSE_LOCATION: {
     type: "MOUSE_LOCATION";
     payload: {
+      socketId: string;
       pointer: { x: number; y: number };
       button: "down" | "up";
       selectedElementIds: AppState["selectedElementIds"];
       username: string;
-      userId: string;
-      socketId: string;
     };
   };
   IDLE_STATUS: {
     type: "IDLE_STATUS";
     payload: {
+      socketId: string;
       userState: UserIdleState;
       username: string;
-      userId: string;
-      socketId: string;
-    };
-  };
-  USER_JOINED: {
-    type: "USER_JOINED";
-    payload: {
-      username: string;
-      userId: string;
-      socketId: string;
     };
   };
 };
@@ -292,15 +282,11 @@ export const loadScene = async (
   };
 };
 
-type ExportToBackendResult =
-  | { url: null; errorMessage: string }
-  | { url: string; errorMessage: null };
-
 export const exportToBackend = async (
   elements: readonly ExcalidrawElement[],
   appState: Partial<AppState>,
   files: BinaryFiles,
-): Promise<ExportToBackendResult> => {
+) => {
   const encryptionKey = await generateEncryptionKey("string");
 
   const payload = await compressData(
@@ -341,18 +327,14 @@ export const exportToBackend = async (
         files: filesToUpload,
       });
 
-      return { url: urlString, errorMessage: null };
+      window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
     } else if (json.error_class === "RequestTooLargeError") {
-      return {
-        url: null,
-        errorMessage: t("alerts.couldNotCreateShareableLinkTooBig"),
-      };
+      window.alert(t("alerts.couldNotCreateShareableLinkTooBig"));
+    } else {
+      window.alert(t("alerts.couldNotCreateShareableLink"));
     }
-
-    return { url: null, errorMessage: t("alerts.couldNotCreateShareableLink") };
   } catch (error: any) {
     console.error(error);
-
-    return { url: null, errorMessage: t("alerts.couldNotCreateShareableLink") };
+    window.alert(t("alerts.couldNotCreateShareableLink"));
   }
 };

src/excalidraw-app/data/localStorage.ts

@@ -8,14 +8,11 @@ import { clearElementsForLocalStorage } from "../../element";
 import { STORAGE_KEYS } from "../app_constants";
 import { ImportedDataState } from "../../data/types";
 
-export const saveUsernameAndIdToLocalStorage = (
-  username: string,
-  userId: string,
-) => {
+export const saveUsernameToLocalStorage = (username: string) => {
   try {
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_COLLAB,
-      JSON.stringify({ username, userId }),
+      JSON.stringify({ username }),
     );
   } catch (error: any) {
     // Unable to access window.localStorage
@@ -23,14 +20,11 @@ export const saveUsernameAndIdToLocalStorage = (
   }
 };
 
-export const importUsernameAndIdFromLocalStorage = (): {
-  username: string;
-  userId: string;
-} | null => {
+export const importUsernameFromLocalStorage = (): string | null => {
   try {
     const data = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
     if (data) {
-      return JSON.parse(data);
+      return JSON.parse(data).username;
     }
   } catch (error: any) {
     // Unable to access localStorage

src/excalidraw-app/debug.ts

@@ -1,135 +0,0 @@
-declare global {
-  interface Window {
-    debug: typeof Debug;
-  }
-}
-
-const lessPrecise = (num: number, precision = 5) =>
-  parseFloat(num.toPrecision(precision));
-
-const getAvgFrameTime = (times: number[]) =>
-  lessPrecise(times.reduce((a, b) => a + b) / times.length);
-
-const getFps = (frametime: number) => lessPrecise(1000 / frametime);
-
-export class Debug {
-  public static DEBUG_LOG_TIMES = true;
-
-  private static TIMES_AGGR: Record<string, { t: number; times: number[] }> =
-    {};
-  private static TIMES_AVG: Record<
-    string,
-    { t: number; times: number[]; avg: number | null }
-  > = {};
-  private static LAST_DEBUG_LOG_CALL = 0;
-  private static DEBUG_LOG_INTERVAL_ID: null | number = null;
-
-  private static setupInterval = () => {
-    if (Debug.DEBUG_LOG_INTERVAL_ID === null) {
-      console.info("%c(starting perf recording)", "color: lime");
-      Debug.DEBUG_LOG_INTERVAL_ID = window.setInterval(Debug.debugLogger, 1000);
-    }
-    Debug.LAST_DEBUG_LOG_CALL = Date.now();
-  };
-
-  private static debugLogger = () => {
-    if (
-      Date.now() - Debug.LAST_DEBUG_LOG_CALL > 600 &&
-      Debug.DEBUG_LOG_INTERVAL_ID !== null
-    ) {
-      window.clearInterval(Debug.DEBUG_LOG_INTERVAL_ID);
-      Debug.DEBUG_LOG_INTERVAL_ID = null;
-      for (const [name, { avg }] of Object.entries(Debug.TIMES_AVG)) {
-        if (avg != null) {
-          console.info(
-            `%c${name} run avg: ${avg}ms (${getFps(avg)} fps)`,
-            "color: blue",
-          );
-        }
-      }
-      console.info("%c(stopping perf recording)", "color: red");
-      Debug.TIMES_AGGR = {};
-      Debug.TIMES_AVG = {};
-      return;
-    }
-    if (Debug.DEBUG_LOG_TIMES) {
-      for (const [name, { t, times }] of Object.entries(Debug.TIMES_AGGR)) {
-        if (times.length) {
-          console.info(
-            name,
-            lessPrecise(times.reduce((a, b) => a + b)),
-            times.sort((a, b) => a - b).map((x) => lessPrecise(x)),
-          );
-          Debug.TIMES_AGGR[name] = { t, times: [] };
-        }
-      }
-      for (const [name, { t, times, avg }] of Object.entries(Debug.TIMES_AVG)) {
-        if (times.length) {
-          const avgFrameTime = getAvgFrameTime(times);
-          console.info(name, `${avgFrameTime}ms (${getFps(avgFrameTime)} fps)`);
-          Debug.TIMES_AVG[name] = {
-            t,
-            times: [],
-            avg:
-              avg != null ? getAvgFrameTime([avg, avgFrameTime]) : avgFrameTime,
-          };
-        }
-      }
-    }
-  };
-
-  public static logTime = (time?: number, name = "default") => {
-    Debug.setupInterval();
-    const now = performance.now();
-    const { t, times } = (Debug.TIMES_AGGR[name] = Debug.TIMES_AGGR[name] || {
-      t: 0,
-      times: [],
-    });
-    if (t) {
-      times.push(time != null ? time : now - t);
-    }
-    Debug.TIMES_AGGR[name].t = now;
-  };
-  public static logTimeAverage = (time?: number, name = "default") => {
-    Debug.setupInterval();
-    const now = performance.now();
-    const { t, times } = (Debug.TIMES_AVG[name] = Debug.TIMES_AVG[name] || {
-      t: 0,
-      times: [],
-    });
-    if (t) {
-      times.push(time != null ? time : now - t);
-    }
-    Debug.TIMES_AVG[name].t = now;
-  };
-
-  private static logWrapper =
-    (type: "logTime" | "logTimeAverage") =>
-    <T extends any[], R>(fn: (...args: T) => R, name = "default") => {
-      return (...args: T) => {
-        const t0 = performance.now();
-        const ret = fn(...args);
-        Debug.logTime(performance.now() - t0, name);
-        return ret;
-      };
-    };
-
-  public static logTimeWrap = Debug.logWrapper("logTime");
-  public static logTimeAverageWrap = Debug.logWrapper("logTimeAverage");
-
-  public static perfWrap = <T extends any[], R>(
-    fn: (...args: T) => R,
-    name = "default",
-  ) => {
-    return (...args: T) => {
-      // eslint-disable-next-line no-console
-      console.time(name);
-      const ret = fn(...args);
-      // eslint-disable-next-line no-console
-      console.timeEnd(name);
-      return ret;
-    };
-  };
-}
-
-window.debug = Debug;

src/excalidraw-app/index.tsx

@@ -42,7 +42,6 @@ import {
   preventUnload,
   ResolvablePromise,
   resolvablePromise,
-  isRunningInIframe,
 } from "../utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
@@ -65,14 +64,11 @@ import {
 import {
   getLibraryItemsFromStorage,
   importFromLocalStorage,
-  importUsernameAndIdFromLocalStorage,
+  importUsernameFromLocalStorage,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restore, restoreAppState, RestoredDataState } from "../data/restore";
-import {
-  ExportToExcalidrawPlus,
-  exportToExcalidrawPlus,
-} from "./components/ExportToExcalidrawPlus";
+import { ExportToExcalidrawPlus } from "./components/ExportToExcalidrawPlus";
 import { updateStaleImageStatuses } from "./data/FileManager";
 import { newElementWith } from "../element/mutateElement";
 import { isInitializedImageElement } from "../element/typeChecks";
@@ -91,10 +87,6 @@ import { appJotaiStore } from "./app-jotai";
 
 import "./index.scss";
 import { ResolutionType } from "../utility-types";
-import { ShareableLinkDialog } from "../components/ShareableLinkDialog";
-import { openConfirmModal } from "../components/OverwriteConfirm/OverwriteConfirmState";
-import { OverwriteConfirmDialog } from "../components/OverwriteConfirm/OverwriteConfirm";
-import Trans from "../components/Trans";
 
 polyfill();
 
@@ -105,21 +97,8 @@ languageDetector.init({
   languageUtils: {},
 });
 
-const shareableLinkConfirmDialog = {
-  title: t("overwriteConfirm.modal.shareableLink.title"),
-  description: (
-    <Trans
-      i18nKey="overwriteConfirm.modal.shareableLink.description"
-      bold={(text) => <strong>{text}</strong>}
-      br={() => <br />}
-    />
-  ),
-  actionLabel: t("overwriteConfirm.modal.shareableLink.button"),
-  color: "danger",
-} as const;
-
 const initializeScene = async (opts: {
-  collabAPI: CollabAPI | null;
+  collabAPI: CollabAPI;
   excalidrawAPI: ExcalidrawImperativeAPI;
 }): Promise<
   { scene: ExcalidrawInitialDataState | null } & (
@@ -149,7 +128,7 @@ const initializeScene = async (opts: {
       // don't prompt for collab scenes because we don't override local storage
       roomLinkData ||
       // otherwise, prompt whether user wants to override current scene
-      (await openConfirmModal(shareableLinkConfirmDialog))
+      window.confirm(t("alerts.loadSceneOverridePrompt"))
     ) {
       if (jsonBackendMatch) {
         scene = await loadScene(
@@ -188,7 +167,7 @@ const initializeScene = async (opts: {
       const data = await loadFromBlob(await request.blob(), null, null);
       if (
         !scene.elements.length ||
-        (await openConfirmModal(shareableLinkConfirmDialog))
+        window.confirm(t("alerts.loadSceneOverridePrompt"))
       ) {
         return { scene: data, isExternalScene };
       }
@@ -204,7 +183,7 @@ const initializeScene = async (opts: {
     }
   }
 
-  if (roomLinkData && opts.collabAPI) {
+  if (roomLinkData) {
     const { excalidrawAPI } = opts;
 
     const scene = await opts.collabAPI.startCollaboration(roomLinkData);
@@ -258,7 +237,6 @@ export const appLangCodeAtom = atom(
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [langCode, setLangCode] = useAtom(appLangCodeAtom);
-  const isCollabDisabled = isRunningInIframe();
 
   // initial state
   // ---------------------------------------------------------------------------
@@ -294,7 +272,7 @@ const ExcalidrawWrapper = () => {
   });
 
   useEffect(() => {
-    if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
+    if (!collabAPI || !excalidrawAPI) {
       return;
     }
 
@@ -305,7 +283,7 @@ const ExcalidrawWrapper = () => {
       if (!data.scene) {
         return;
       }
-      if (collabAPI?.isCollaborating()) {
+      if (collabAPI.isCollaborating()) {
         if (data.scene.elements) {
           collabAPI
             .fetchImageFilesFromFirebase({
@@ -375,7 +353,7 @@ const ExcalidrawWrapper = () => {
       const libraryUrlTokens = parseLibraryTokensFromUrl();
       if (!libraryUrlTokens) {
         if (
-          collabAPI?.isCollaborating() &&
+          collabAPI.isCollaborating() &&
           !isCollaborationLink(window.location.href)
         ) {
           collabAPI.stopCollaboration(false);
@@ -404,15 +382,11 @@ const ExcalidrawWrapper = () => {
       if (isTestEnv()) {
         return;
       }
-      if (
-        !document.hidden &&
-        ((collabAPI && !collabAPI.isCollaborating()) || isCollabDisabled)
-      ) {
+      if (!document.hidden && !collabAPI.isCollaborating()) {
         // don't sync if local state is newer or identical to browser state
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
           const localDataState = importFromLocalStorage();
-          const username =
-            importUsernameAndIdFromLocalStorage()?.username ?? "";
+          const username = importUsernameFromLocalStorage();
           let langCode = languageDetector.detect() || defaultLang.code;
           if (Array.isArray(langCode)) {
             langCode = langCode[0];
@@ -424,7 +398,7 @@ const ExcalidrawWrapper = () => {
           excalidrawAPI.updateLibrary({
             libraryItems: getLibraryItemsFromStorage(),
           });
-          collabAPI?.setUsername(username || "");
+          collabAPI.setUsername(username || "");
         }
 
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_FILES)) {
@@ -492,7 +466,7 @@ const ExcalidrawWrapper = () => {
       );
       clearTimeout(titleTimeout);
     };
-  }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode]);
+  }, [collabAPI, excalidrawAPI, setLangCode]);
 
   useEffect(() => {
     const unloadHandler = (event: BeforeUnloadEvent) => {
@@ -575,10 +549,6 @@ const ExcalidrawWrapper = () => {
     }
   };
 
-  const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
-    null,
-  );
-
   const onExportToBackend = async (
     exportedElements: readonly NonDeletedExcalidrawElement[],
     appState: Partial<AppState>,
@@ -590,7 +560,7 @@ const ExcalidrawWrapper = () => {
     }
     if (canvas) {
       try {
-        const { url, errorMessage } = await exportToBackend(
+        await exportToBackend(
           exportedElements,
           {
             ...appState,
@@ -600,14 +570,6 @@ const ExcalidrawWrapper = () => {
           },
           files,
         );
-
-        if (errorMessage) {
-          setErrorMessage(errorMessage);
-        }
-
-        if (url) {
-          setLatestShareableLink(url);
-        }
       } catch (error: any) {
         if (error.name !== "AbortError") {
           const { width, height } = canvas;
@@ -687,7 +649,7 @@ const ExcalidrawWrapper = () => {
         autoFocus={true}
         theme={theme}
         renderTopRightUI={(isMobile) => {
-          if (isMobile || !collabAPI || isCollabDisabled) {
+          if (isMobile) {
             return null;
           }
           return (
@@ -701,53 +663,21 @@ const ExcalidrawWrapper = () => {
         <AppMainMenu
           setCollabDialogShown={setCollabDialogShown}
           isCollaborating={isCollaborating}
-          isCollabEnabled={!isCollabDisabled}
         />
-        <AppWelcomeScreen
-          setCollabDialogShown={setCollabDialogShown}
-          isCollabEnabled={!isCollabDisabled}
-        />
-        <OverwriteConfirmDialog>
-          <OverwriteConfirmDialog.Actions.ExportToImage />
-          <OverwriteConfirmDialog.Actions.SaveToDisk />
-          {excalidrawAPI && (
-            <OverwriteConfirmDialog.Action
-              title={t("overwriteConfirm.action.excalidrawPlus.title")}
-              actionLabel={t("overwriteConfirm.action.excalidrawPlus.button")}
-              onClick={() => {
-                exportToExcalidrawPlus(
-                  excalidrawAPI.getSceneElements(),
-                  excalidrawAPI.getAppState(),
-                  excalidrawAPI.getFiles(),
-                );
-              }}
-            >
-              {t("overwriteConfirm.action.excalidrawPlus.description")}
-            </OverwriteConfirmDialog.Action>
-          )}
-        </OverwriteConfirmDialog>
+        <AppWelcomeScreen setCollabDialogShown={setCollabDialogShown} />
         <AppFooter />
         {isCollaborating && isOffline && (
           <div className="collab-offline-warning">
             {t("alerts.collabOfflineWarning")}
           </div>
         )}
-        {latestShareableLink && (
-          <ShareableLinkDialog
-            link={latestShareableLink}
-            onCloseRequest={() => setLatestShareableLink(null)}
-            setErrorMessage={setErrorMessage}
-          />
-        )}
-        {excalidrawAPI && !isCollabDisabled && (
-          <Collab excalidrawAPI={excalidrawAPI} />
-        )}
-        {errorMessage && (
-          <ErrorDialog onClose={() => setErrorMessage("")}>
-            {errorMessage}
-          </ErrorDialog>
-        )}
+        {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       </Excalidraw>
+      {errorMessage && (
+        <ErrorDialog onClose={() => setErrorMessage("")}>
+          {errorMessage}
+        </ErrorDialog>
+      )}
     </div>
   );
 };

src/frame.ts

@@ -1,708 +0,0 @@
-import {
-  getCommonBounds,
-  getElementAbsoluteCoords,
-  isTextElement,
-} from "./element";
-import {
-  ExcalidrawElement,
-  ExcalidrawFrameElement,
-  NonDeleted,
-  NonDeletedExcalidrawElement,
-} from "./element/types";
-import { isPointWithinBounds } from "./math";
-import {
-  getBoundTextElement,
-  getContainerElement,
-} from "./element/textElement";
-import { arrayToMap, findIndex } from "./utils";
-import { mutateElement } from "./element/mutateElement";
-import { AppState } from "./types";
-import { getElementsWithinSelection, getSelectedElements } from "./scene";
-import { isFrameElement } from "./element";
-import { moveOneRight } from "./zindex";
-import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
-import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
-import { getElementLineSegments } from "./element/bounds";
-
-// --------------------------- Frame State ------------------------------------
-export const bindElementsToFramesAfterDuplication = (
-  nextElements: ExcalidrawElement[],
-  oldElements: readonly ExcalidrawElement[],
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-) => {
-  const nextElementMap = arrayToMap(nextElements) as Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement
-  >;
-
-  for (const element of oldElements) {
-    if (element.frameId) {
-      // use its frameId to get the new frameId
-      const nextElementId = oldIdToDuplicatedId.get(element.id);
-      const nextFrameId = oldIdToDuplicatedId.get(element.frameId);
-      if (nextElementId) {
-        const nextElement = nextElementMap.get(nextElementId);
-        if (nextElement) {
-          mutateElement(
-            nextElement,
-            {
-              frameId: nextFrameId ?? element.frameId,
-            },
-            false,
-          );
-        }
-      }
-    }
-  }
-};
-
-// --------------------------- Frame Geometry ---------------------------------
-class Point {
-  x: number;
-  y: number;
-
-  constructor(x: number, y: number) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-class LineSegment {
-  first: Point;
-  second: Point;
-
-  constructor(pointA: Point, pointB: Point) {
-    this.first = pointA;
-    this.second = pointB;
-  }
-
-  public getBoundingBox(): [Point, Point] {
-    return [
-      new Point(
-        Math.min(this.first.x, this.second.x),
-        Math.min(this.first.y, this.second.y),
-      ),
-      new Point(
-        Math.max(this.first.x, this.second.x),
-        Math.max(this.first.y, this.second.y),
-      ),
-    ];
-  }
-}
-
-// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
-class FrameGeometry {
-  private static EPSILON = 0.000001;
-
-  private static crossProduct(a: Point, b: Point) {
-    return a.x * b.y - b.x * a.y;
-  }
-
-  private static doBoundingBoxesIntersect(
-    a: [Point, Point],
-    b: [Point, Point],
-  ) {
-    return (
-      a[0].x <= b[1].x &&
-      a[1].x >= b[0].x &&
-      a[0].y <= b[1].y &&
-      a[1].y >= b[0].y
-    );
-  }
-
-  private static isPointOnLine(a: LineSegment, b: Point) {
-    const aTmp = new LineSegment(
-      new Point(0, 0),
-      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
-    );
-    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
-    const r = this.crossProduct(aTmp.second, bTmp);
-    return Math.abs(r) < this.EPSILON;
-  }
-
-  private static isPointRightOfLine(a: LineSegment, b: Point) {
-    const aTmp = new LineSegment(
-      new Point(0, 0),
-      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
-    );
-    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
-    return this.crossProduct(aTmp.second, bTmp) < 0;
-  }
-
-  private static lineSegmentTouchesOrCrossesLine(
-    a: LineSegment,
-    b: LineSegment,
-  ) {
-    return (
-      this.isPointOnLine(a, b.first) ||
-      this.isPointOnLine(a, b.second) ||
-      (this.isPointRightOfLine(a, b.first)
-        ? !this.isPointRightOfLine(a, b.second)
-        : this.isPointRightOfLine(a, b.second))
-    );
-  }
-
-  private static doLineSegmentsIntersect(
-    a: [readonly [number, number], readonly [number, number]],
-    b: [readonly [number, number], readonly [number, number]],
-  ) {
-    const aSegment = new LineSegment(
-      new Point(a[0][0], a[0][1]),
-      new Point(a[1][0], a[1][1]),
-    );
-    const bSegment = new LineSegment(
-      new Point(b[0][0], b[0][1]),
-      new Point(b[1][0], b[1][1]),
-    );
-
-    const box1 = aSegment.getBoundingBox();
-    const box2 = bSegment.getBoundingBox();
-    return (
-      this.doBoundingBoxesIntersect(box1, box2) &&
-      this.lineSegmentTouchesOrCrossesLine(aSegment, bSegment) &&
-      this.lineSegmentTouchesOrCrossesLine(bSegment, aSegment)
-    );
-  }
-
-  public static isElementIntersectingFrame(
-    element: ExcalidrawElement,
-    frame: ExcalidrawFrameElement,
-  ) {
-    const frameLineSegments = getElementLineSegments(frame);
-
-    const elementLineSegments = getElementLineSegments(element);
-
-    const intersecting = frameLineSegments.some((frameLineSegment) =>
-      elementLineSegments.some((elementLineSegment) =>
-        this.doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
-      ),
-    );
-
-    return intersecting;
-  }
-}
-
-export const getElementsCompletelyInFrame = (
-  elements: readonly ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
-) =>
-  omitGroupsContainingFrames(
-    getElementsWithinSelection(elements, frame, false),
-  ).filter(
-    (element) =>
-      (element.type !== "frame" && !element.frameId) ||
-      element.frameId === frame.id,
-  );
-
-export const isElementContainingFrame = (
-  elements: readonly ExcalidrawElement[],
-  element: ExcalidrawElement,
-  frame: ExcalidrawFrameElement,
-) => {
-  return getElementsWithinSelection(elements, element).some(
-    (e) => e.id === frame.id,
-  );
-};
-
-export const getElementsIntersectingFrame = (
-  elements: readonly ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
-) =>
-  elements.filter((element) =>
-    FrameGeometry.isElementIntersectingFrame(element, frame),
-  );
-
-export const elementsAreInFrameBounds = (
-  elements: readonly ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
-) => {
-  const [selectionX1, selectionY1, selectionX2, selectionY2] =
-    getElementAbsoluteCoords(frame);
-
-  const [elementX1, elementY1, elementX2, elementY2] =
-    getCommonBounds(elements);
-
-  return (
-    selectionX1 <= elementX1 &&
-    selectionY1 <= elementY1 &&
-    selectionX2 >= elementX2 &&
-    selectionY2 >= elementY2
-  );
-};
-
-export const elementOverlapsWithFrame = (
-  element: ExcalidrawElement,
-  frame: ExcalidrawFrameElement,
-) => {
-  return (
-    elementsAreInFrameBounds([element], frame) ||
-    FrameGeometry.isElementIntersectingFrame(element, frame) ||
-    isElementContainingFrame([frame], element, frame)
-  );
-};
-
-export const isCursorInFrame = (
-  cursorCoords: {
-    x: number;
-    y: number;
-  },
-  frame: NonDeleted<ExcalidrawFrameElement>,
-) => {
-  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
-
-  return isPointWithinBounds(
-    [fx1, fy1],
-    [cursorCoords.x, cursorCoords.y],
-    [fx2, fy2],
-  );
-};
-
-export const groupsAreAtLeastIntersectingTheFrame = (
-  elements: readonly NonDeletedExcalidrawElement[],
-  groupIds: readonly string[],
-  frame: ExcalidrawFrameElement,
-) => {
-  const elementsInGroup = groupIds.flatMap((groupId) =>
-    getElementsInGroup(elements, groupId),
-  );
-
-  if (elementsInGroup.length === 0) {
-    return true;
-  }
-
-  return !!elementsInGroup.find(
-    (element) =>
-      elementsAreInFrameBounds([element], frame) ||
-      FrameGeometry.isElementIntersectingFrame(element, frame),
-  );
-};
-
-export const groupsAreCompletelyOutOfFrame = (
-  elements: readonly NonDeletedExcalidrawElement[],
-  groupIds: readonly string[],
-  frame: ExcalidrawFrameElement,
-) => {
-  const elementsInGroup = groupIds.flatMap((groupId) =>
-    getElementsInGroup(elements, groupId),
-  );
-
-  if (elementsInGroup.length === 0) {
-    return true;
-  }
-
-  return (
-    elementsInGroup.find(
-      (element) =>
-        elementsAreInFrameBounds([element], frame) ||
-        FrameGeometry.isElementIntersectingFrame(element, frame),
-    ) === undefined
-  );
-};
-
-// --------------------------- Frame Utils ------------------------------------
-
-/**
- * Returns a map of frameId to frame elements. Includes empty frames.
- */
-export const groupByFrames = (elements: readonly ExcalidrawElement[]) => {
-  const frameElementsMap = new Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement[]
-  >();
-
-  for (const element of elements) {
-    const frameId = isFrameElement(element) ? element.id : element.frameId;
-    if (frameId && !frameElementsMap.has(frameId)) {
-      frameElementsMap.set(frameId, getFrameElements(elements, frameId));
-    }
-  }
-
-  return frameElementsMap;
-};
-
-export const getFrameElements = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  frameId: string,
-) => allElements.filter((element) => element.frameId === frameId);
-
-export const getElementsInResizingFrame = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  frame: ExcalidrawFrameElement,
-  appState: AppState,
-): ExcalidrawElement[] => {
-  const prevElementsInFrame = getFrameElements(allElements, frame.id);
-  const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);
-
-  const elementsCompletelyInFrame = new Set([
-    ...getElementsCompletelyInFrame(allElements, frame),
-    ...prevElementsInFrame.filter((element) =>
-      isElementContainingFrame(allElements, element, frame),
-    ),
-  ]);
-
-  const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
-    (element) => !elementsCompletelyInFrame.has(element),
-  );
-
-  // for elements that are completely in the frame
-  // if they are part of some groups, then those groups are still
-  // considered to belong to the frame
-  const groupsToKeep = new Set<string>(
-    Array.from(elementsCompletelyInFrame).flatMap(
-      (element) => element.groupIds,
-    ),
-  );
-
-  for (const element of elementsNotCompletelyInFrame) {
-    if (!FrameGeometry.isElementIntersectingFrame(element, frame)) {
-      if (element.groupIds.length === 0) {
-        nextElementsInFrame.delete(element);
-      }
-    } else if (element.groupIds.length > 0) {
-      // group element intersects with the frame, we should keep the groups
-      // that this element is part of
-      for (const id of element.groupIds) {
-        groupsToKeep.add(id);
-      }
-    }
-  }
-
-  for (const element of elementsNotCompletelyInFrame) {
-    if (element.groupIds.length > 0) {
-      let shouldRemoveElement = true;
-
-      for (const id of element.groupIds) {
-        if (groupsToKeep.has(id)) {
-          shouldRemoveElement = false;
-        }
-      }
-
-      if (shouldRemoveElement) {
-        nextElementsInFrame.delete(element);
-      }
-    }
-  }
-
-  const individualElementsCompletelyInFrame = Array.from(
-    elementsCompletelyInFrame,
-  ).filter((element) => element.groupIds.length === 0);
-
-  for (const element of individualElementsCompletelyInFrame) {
-    nextElementsInFrame.add(element);
-  }
-
-  const newGroupElementsCompletelyInFrame = Array.from(
-    elementsCompletelyInFrame,
-  ).filter((element) => element.groupIds.length > 0);
-
-  const groupIds = selectGroupsFromGivenElements(
-    newGroupElementsCompletelyInFrame,
-    appState,
-  );
-
-  // new group elements
-  for (const [id, isSelected] of Object.entries(groupIds)) {
-    if (isSelected) {
-      const elementsInGroup = getElementsInGroup(allElements, id);
-
-      if (elementsAreInFrameBounds(elementsInGroup, frame)) {
-        for (const element of elementsInGroup) {
-          nextElementsInFrame.add(element);
-        }
-      }
-    }
-  }
-
-  return [...nextElementsInFrame].filter((element) => {
-    return !(isTextElement(element) && element.containerId);
-  });
-};
-
-export const getElementsInNewFrame = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  frame: ExcalidrawFrameElement,
-) => {
-  return omitGroupsContainingFrames(
-    allElements,
-    getElementsCompletelyInFrame(allElements, frame),
-  );
-};
-
-export const getContainingFrame = (
-  element: ExcalidrawElement,
-  /**
-   * Optionally an elements map, in case the elements aren't in the Scene yet.
-   * Takes precedence over Scene elements, even if the element exists
-   * in Scene elements and not the supplied elements map.
-   */
-  elementsMap?: Map<string, ExcalidrawElement>,
-) => {
-  if (element.frameId) {
-    if (elementsMap) {
-      return (elementsMap.get(element.frameId) ||
-        null) as null | ExcalidrawFrameElement;
-    }
-    return (
-      (Scene.getScene(element)?.getElement(
-        element.frameId,
-      ) as ExcalidrawFrameElement) || null
-    );
-  }
-  return null;
-};
-
-// --------------------------- Frame Operations -------------------------------
-export const addElementsToFrame = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  elementsToAdd: NonDeletedExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
-) => {
-  const _elementsToAdd: ExcalidrawElement[] = [];
-
-  for (const element of elementsToAdd) {
-    _elementsToAdd.push(element);
-
-    const boundTextElement = getBoundTextElement(element);
-    if (boundTextElement) {
-      _elementsToAdd.push(boundTextElement);
-    }
-  }
-
-  let nextElements = allElements.slice();
-
-  const frameBoundary = findIndex(nextElements, (e) => e.frameId === frame.id);
-
-  for (const element of omitGroupsContainingFrames(
-    allElements,
-    _elementsToAdd,
-  )) {
-    if (element.frameId !== frame.id && !isFrameElement(element)) {
-      mutateElement(
-        element,
-        {
-          frameId: frame.id,
-        },
-        false,
-      );
-
-      const frameIndex = findIndex(nextElements, (e) => e.id === frame.id);
-      const elementIndex = findIndex(nextElements, (e) => e.id === element.id);
-
-      if (elementIndex < frameBoundary) {
-        nextElements = [
-          ...nextElements.slice(0, elementIndex),
-          ...nextElements.slice(elementIndex + 1, frameBoundary),
-          element,
-          ...nextElements.slice(frameBoundary),
-        ];
-      } else if (elementIndex > frameIndex) {
-        nextElements = [
-          ...nextElements.slice(0, frameIndex),
-          element,
-          ...nextElements.slice(frameIndex, elementIndex),
-          ...nextElements.slice(elementIndex + 1),
-        ];
-      }
-    }
-  }
-
-  return nextElements;
-};
-
-export const removeElementsFromFrame = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  elementsToRemove: NonDeletedExcalidrawElement[],
-  appState: AppState,
-) => {
-  const _elementsToRemove: ExcalidrawElement[] = [];
-
-  for (const element of elementsToRemove) {
-    if (element.frameId) {
-      _elementsToRemove.push(element);
-      const boundTextElement = getBoundTextElement(element);
-      if (boundTextElement) {
-        _elementsToRemove.push(boundTextElement);
-      }
-    }
-  }
-
-  for (const element of _elementsToRemove) {
-    mutateElement(
-      element,
-      {
-        frameId: null,
-      },
-      false,
-    );
-  }
-
-  const nextElements = moveOneRight(
-    allElements,
-    appState,
-    Array.from(_elementsToRemove),
-  );
-
-  return nextElements;
-};
-
-export const removeAllElementsFromFrame = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  frame: ExcalidrawFrameElement,
-  appState: AppState,
-) => {
-  const elementsInFrame = getFrameElements(allElements, frame.id);
-  return removeElementsFromFrame(allElements, elementsInFrame, appState);
-};
-
-export const replaceAllElementsInFrame = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  nextElementsInFrame: ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
-  appState: AppState,
-) => {
-  return addElementsToFrame(
-    removeAllElementsFromFrame(allElements, frame, appState),
-    nextElementsInFrame,
-    frame,
-  );
-};
-
-/** does not mutate elements, but return new ones */
-export const updateFrameMembershipOfSelectedElements = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  appState: AppState,
-) => {
-  const selectedElements = getSelectedElements(allElements, appState);
-  const elementsToFilter = new Set<ExcalidrawElement>(selectedElements);
-
-  if (appState.editingGroupId) {
-    for (const element of selectedElements) {
-      if (element.groupIds.length === 0) {
-        elementsToFilter.add(element);
-      } else {
-        element.groupIds
-          .flatMap((gid) => getElementsInGroup(allElements, gid))
-          .forEach((element) => elementsToFilter.add(element));
-      }
-    }
-  }
-
-  const elementsToRemove = new Set<ExcalidrawElement>();
-
-  elementsToFilter.forEach((element) => {
-    if (
-      element.frameId &&
-      !isFrameElement(element) &&
-      !isElementInFrame(element, allElements, appState)
-    ) {
-      elementsToRemove.add(element);
-    }
-  });
-
-  return elementsToRemove.size > 0
-    ? removeElementsFromFrame(allElements, [...elementsToRemove], appState)
-    : allElements;
-};
-
-/**
- * filters out elements that are inside groups that contain a frame element
- * anywhere in the group tree
- */
-export const omitGroupsContainingFrames = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  /** subset of elements you want to filter. Optional perf optimization so we
-   * don't have to filter all elements unnecessarily
-   */
-  selectedElements?: readonly ExcalidrawElement[],
-) => {
-  const uniqueGroupIds = new Set<string>();
-  for (const el of selectedElements || allElements) {
-    const topMostGroupId = el.groupIds[el.groupIds.length - 1];
-    if (topMostGroupId) {
-      uniqueGroupIds.add(topMostGroupId);
-    }
-  }
-
-  const rejectedGroupIds = new Set<string>();
-  for (const groupId of uniqueGroupIds) {
-    if (
-      getElementsInGroup(allElements, groupId).some((el) => isFrameElement(el))
-    ) {
-      rejectedGroupIds.add(groupId);
-    }
-  }
-
-  return (selectedElements || allElements).filter(
-    (el) => !rejectedGroupIds.has(el.groupIds[el.groupIds.length - 1]),
-  );
-};
-
-/**
- * depending on the appState, return target frame, which is the frame the given element
- * is going to be added to or remove from
- */
-export const getTargetFrame = (
-  element: ExcalidrawElement,
-  appState: AppState,
-) => {
-  const _element = isTextElement(element)
-    ? getContainerElement(element) || element
-    : element;
-
-  return appState.selectedElementIds[_element.id] &&
-    appState.selectedElementsAreBeingDragged
-    ? appState.frameToHighlight
-    : getContainingFrame(_element);
-};
-
-// given an element, return if the element is in some frame
-export const isElementInFrame = (
-  element: ExcalidrawElement,
-  allElements: ExcalidrawElementsIncludingDeleted,
-  appState: AppState,
-) => {
-  const frame = getTargetFrame(element, appState);
-  const _element = isTextElement(element)
-    ? getContainerElement(element) || element
-    : element;
-
-  if (frame) {
-    if (_element.groupIds.length === 0) {
-      return elementOverlapsWithFrame(_element, frame);
-    }
-
-    const allElementsInGroup = new Set(
-      _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
-    );
-
-    if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
-      const selectedElements = new Set(
-        getSelectedElements(allElements, appState),
-      );
-
-      const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
-
-      if (editingGroupOverlapsFrame) {
-        return true;
-      }
-
-      selectedElements.forEach((selectedElement) => {
-        allElementsInGroup.delete(selectedElement);
-      });
-    }
-
-    for (const elementInGroup of allElementsInGroup) {
-      if (isFrameElement(elementInGroup)) {
-        return false;
-      }
-    }
-
-    for (const elementInGroup of allElementsInGroup) {
-      if (elementOverlapsWithFrame(elementInGroup, frame)) {
-        return true;
-      }
-    }
-  }
-
-  return false;
-};

src/groups.ts

@@ -2,7 +2,6 @@ import { GroupId, ExcalidrawElement, NonDeleted } from "./element/types";
 import { AppState } from "./types";
 import { getSelectedElements } from "./scene";
 import { getBoundTextElement } from "./element/textElement";
-import { makeNextSelectedElementIds } from "./scene/selection";
 
 export const selectGroup = (
   groupId: GroupId,
@@ -68,21 +67,13 @@ export const getSelectedGroupIds = (appState: AppState): GroupId[] =>
 export const selectGroupsForSelectedElements = (
   appState: AppState,
   elements: readonly NonDeleted<ExcalidrawElement>[],
-  prevAppState: AppState,
 ): AppState => {
   let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
 
   const selectedElements = getSelectedElements(elements, appState);
 
   if (!selectedElements.length) {
-    return {
-      ...nextAppState,
-      editingGroupId: null,
-      selectedElementIds: makeNextSelectedElementIds(
-        nextAppState.selectedElementIds,
-        prevAppState,
-      ),
-    };
+    return { ...nextAppState, editingGroupId: null };
   }
 
   for (const selectedElement of selectedElements) {
@@ -100,39 +91,9 @@ export const selectGroupsForSelectedElements = (
     }
   }
 
-  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,
-) => {
-  let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
-
-  for (const element of elements) {
-    let groupIds = element.groupIds;
-    if (appState.editingGroupId) {
-      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);
-    }
-  }
-
-  return nextAppState.selectedGroupIds;
-};
-
 export const editGroupForSelectedElement = (
   appState: AppState,
   element: NonDeleted<ExcalidrawElement>,
@@ -225,18 +186,3 @@ export const getMaximumGroups = (
 
   return Array.from(groups.values());
 };
-
-export const elementsAreInSameGroup = (elements: ExcalidrawElement[]) => {
-  const allGroups = elements.flatMap((element) => element.groupIds);
-  const groupCount = new Map<string, number>();
-  let maxGroup = 0;
-
-  for (const group of allGroups) {
-    groupCount.set(group, (groupCount.get(group) ?? 0) + 1);
-    if (groupCount.get(group)! > maxGroup) {
-      maxGroup = groupCount.get(group)!;
-    }
-  }
-
-  return maxGroup === elements.length;
-};

src/keys.ts

@@ -10,7 +10,6 @@ export const CODES = {
   BRACKET_LEFT: "BracketLeft",
   ONE: "Digit1",
   TWO: "Digit2",
-  THREE: "Digit3",
   NINE: "Digit9",
   QUOTE: "Quote",
   ZERO: "Digit0",
@@ -43,7 +42,6 @@ export const KEYS = {
   CHEVRON_RIGHT: ">",
   PERIOD: ".",
   COMMA: ",",
-  SUBTRACT: "-",
 
   A: "a",
   C: "c",

src/locales/ar-SA.json

@@ -124,8 +124,6 @@
     },
     "statusPublished": "نُشر",
     "sidebarLock": "إبقاء الشريط الجانبي مفتوح",
-    "selectAllElementsInFrame": "",
-    "removeAllElementsFromFrame": "",
     "eyeDropper": ""
   },
   "library": {
@@ -223,9 +221,7 @@
     "penMode": "وضع القلم - امنع اللمس",
     "link": "إضافة/تحديث الرابط للشكل المحدد",
     "eraser": "ممحاة",
-    "frame": "",
-    "hand": "",
-    "extraTools": ""
+    "hand": ""
   },
   "headings": {
     "canvasActions": "إجراءات اللوحة",