debug

.env.development

@@ -25,7 +25,7 @@ VITE_APP_ENABLE_TRACKING=true
 FAST_REFRESH=false
 
 # The port the run the dev server
-VITE_APP_PORT=3000
+VITE_APP_PORT=3001
 
 #Debug flags
 

.eslintrc.json

@@ -3,20 +3,6 @@
   "rules": {
     "import/no-anonymous-default-export": "off",
     "no-restricted-globals": "off",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        "prefer": "type-imports",
-        "disallowTypeAnnotations": false,
-        "fixStyle": "separate-type-imports"
-      }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "name": "jotai",
-        "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
-      }
-    ]
+    "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "type-imports", "disallowTypeAnnotations": false, "fixStyle": "separate-type-imports" }]
   }
 }

excalidraw-app/App.tsx

@@ -90,13 +90,9 @@ import {
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
-import {
-  Provider,
-  useAtom,
-  useAtomValue,
-  useAtomWithInitialValue,
-  appJotaiStore,
-} from "./app-jotai";
+import { Provider, useAtom, useAtomValue } from "jotai";
+import { useAtomWithInitialValue } from "../packages/excalidraw/jotai";
+import { appJotaiStore } from "./app-jotai";
 
 import "./index.scss";
 import type { ResolutionType } from "../packages/excalidraw/utility-types";
@@ -121,7 +117,7 @@ import {
   share,
   youtubeIcon,
 } from "../packages/excalidraw/components/icons";
-import { useHandleAppTheme } from "./useHandleAppTheme";
+import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
 import DebugCanvas, {
@@ -332,7 +328,8 @@ const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const isCollabDisabled = isRunningInIframe();
 
-  const { editorTheme, appTheme, setAppTheme } = useHandleAppTheme();
+  const [appTheme, setAppTheme] = useAtom(appThemeAtom);
+  const { editorTheme } = useHandleAppTheme();
 
   const [langCode, setLangCode] = useAppLangCode();
 
@@ -1144,7 +1141,7 @@ const ExcalidrawApp = () => {
 
   return (
     <TopErrorBoundary>
-      <Provider store={appJotaiStore}>
+      <Provider unstable_createStore={() => appJotaiStore}>
         <ExcalidrawWrapper />
       </Provider>
     </TopErrorBoundary>

excalidraw-app/app-jotai.ts

@@ -1,37 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import {
-  atom,
-  Provider,
-  useAtom,
-  useAtomValue,
-  useSetAtom,
-  createStore,
-  type PrimitiveAtom,
-} from "jotai";
-import { useLayoutEffect } from "react";
+import { unstable_createStore } from "jotai";
 
-export const appJotaiStore = createStore();
-
-export { atom, Provider, useAtom, useAtomValue, useSetAtom };
-
-export const useAtomWithInitialValue = <
-  T extends unknown,
-  A extends PrimitiveAtom<T>,
->(
-  atom: A,
-  initialValue: T | (() => T),
-) => {
-  const [value, setValue] = useAtom(atom);
-
-  useLayoutEffect(() => {
-    if (typeof initialValue === "function") {
-      // @ts-ignore
-      setValue(initialValue());
-    } else {
-      setValue(initialValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [value, setValue] as const;
-};
+export const appJotaiStore = unstable_createStore();

excalidraw-app/app-language/LanguageList.tsx

@@ -1,6 +1,6 @@
+import { useSetAtom } from "jotai";
 import React from "react";
 import { useI18n, languages } from "../../packages/excalidraw/i18n";
-import { useSetAtom } from "../app-jotai";
 import { appLangCodeAtom } from "./language-state";
 
 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {

excalidraw-app/app-language/language-state.ts

@@ -1,5 +1,5 @@
+import { atom, useAtom } from "jotai";
 import { useEffect } from "react";
-import { atom, useAtom } from "../app-jotai";
 import { getPreferredLanguage, languageDetector } from "./language-detector";
 
 export const appLangCodeAtom = atom(getPreferredLanguage());

excalidraw-app/collab/Collab.tsx

@@ -79,7 +79,8 @@ import { newElementWith } from "../../packages/excalidraw/element/mutateElement"
 import { decryptData } from "../../packages/excalidraw/data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
-import { appJotaiStore, atom } from "../app-jotai";
+import { atom } from "jotai";
+import { appJotaiStore } from "../app-jotai";
 import type { Mutable, ValueOf } from "../../packages/excalidraw/utility-types";
 import { getVisibleSceneBounds } from "../../packages/excalidraw/element/bounds";
 import { withBatchedUpdates } from "../../packages/excalidraw/reactUtils";

excalidraw-app/collab/CollabError.tsx

@@ -2,9 +2,9 @@ import { Tooltip } from "../../packages/excalidraw/components/Tooltip";
 import { warning } from "../../packages/excalidraw/components/icons";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
-import { atom } from "../app-jotai";
 
 import "./CollabError.scss";
+import { atom } from "jotai";
 
 type ErrorIndicator = {
   message: string | null;

excalidraw-app/package.json

@@ -32,7 +32,7 @@
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
-    "jotai": "2.11.0",
+    "jotai": "1.13.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "socket.io-client": "4.7.2",

excalidraw-app/share/ShareDialog.tsx

@@ -18,11 +18,11 @@ import { TextField } from "../../packages/excalidraw/components/TextField";
 import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
 import type { CollabAPI } from "../collab/Collab";
 import { activeRoomLinkAtom } from "../collab/Collab";
-import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
-import { useCopyStatus } from "../../packages/excalidraw/hooks/useCopiedIndicator";
-import { atom, useAtom, useAtomValue } from "../app-jotai";
+import { atom, useAtom, useAtomValue } from "jotai";
 
 import "./ShareDialog.scss";
+import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
+import { useCopyStatus } from "../../packages/excalidraw/hooks/useCopiedIndicator";
 
 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";

excalidraw-app/useHandleAppTheme.ts

@@ -1,3 +1,4 @@
+import { atom, useAtom } from "jotai";
 import { useEffect, useLayoutEffect, useState } from "react";
 import { THEME } from "../packages/excalidraw";
 import { EVENT } from "../packages/excalidraw/constants";
@@ -5,18 +6,18 @@ import type { Theme } from "../packages/excalidraw/element/types";
 import { CODES, KEYS } from "../packages/excalidraw/keys";
 import { STORAGE_KEYS } from "./app_constants";
 
+export const appThemeAtom = atom<Theme | "system">(
+  (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
+    | Theme
+    | "system"
+    | null) || THEME.LIGHT,
+);
+
 const getDarkThemeMediaQuery = (): MediaQueryList | undefined =>
   window.matchMedia?.("(prefers-color-scheme: dark)");
 
 export const useHandleAppTheme = () => {
-  const [appTheme, setAppTheme] = useState<Theme | "system">(() => {
-    return (
-      (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
-        | Theme
-        | "system"
-        | null) || THEME.LIGHT
-    );
-  });
+  const [appTheme, setAppTheme] = useAtom(appThemeAtom);
   const [editorTheme, setEditorTheme] = useState<Theme>(THEME.LIGHT);
 
   useEffect(() => {
@@ -65,5 +66,5 @@ export const useHandleAppTheme = () => {
     }
   }, [appTheme]);
 
-  return { editorTheme, appTheme, setAppTheme };
+  return { editorTheme };
 };

excalidraw-app/vite.config.mts

@@ -169,7 +169,7 @@ export default defineConfig(({ mode }) => {
             },
           ],
           start_url: "/",
-          id:"excalidraw",
+          id: "excalidraw",
           display: "standalone",
           theme_color: "#121212",
           background_color: "#ffffff",

packages/excalidraw/actions/actionAlign.tsx

@@ -21,8 +21,10 @@ import type { AppClassProperties, AppState, UIAppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
-export const alignActionsPredicate = (
+const alignActionsPredicate = (
+  elements: readonly ExcalidrawElement[],
   appState: UIAppState,
+  _: unknown,
   app: AppClassProperties,
 ) => {
   const selectedElements = app.scene.getSelectedElements(appState);
@@ -46,7 +48,6 @@ const alignSelectedElements = (
     selectedElements,
     elementsMap,
     alignment,
-    app.scene,
   );
 
   const updatedElementsMap = arrayToMap(updatedElements);
@@ -63,8 +64,7 @@ export const actionAlignTop = register({
   label: "labels.alignTop",
   icon: AlignTopIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -79,7 +79,7 @@ export const actionAlignTop = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignTopIcon}
       onClick={() => updateData(null)}
@@ -97,8 +97,7 @@ export const actionAlignBottom = register({
   label: "labels.alignBottom",
   icon: AlignBottomIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -113,7 +112,7 @@ export const actionAlignBottom = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignBottomIcon}
       onClick={() => updateData(null)}
@@ -131,8 +130,7 @@ export const actionAlignLeft = register({
   label: "labels.alignLeft",
   icon: AlignLeftIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -147,7 +145,7 @@ export const actionAlignLeft = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignLeftIcon}
       onClick={() => updateData(null)}
@@ -165,8 +163,7 @@ export const actionAlignRight = register({
   label: "labels.alignRight",
   icon: AlignRightIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -181,7 +178,7 @@ export const actionAlignRight = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignRightIcon}
       onClick={() => updateData(null)}
@@ -199,8 +196,7 @@ export const actionAlignVerticallyCentered = register({
   label: "labels.centerVertically",
   icon: CenterVerticallyIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -213,7 +209,7 @@ export const actionAlignVerticallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterVerticallyIcon}
       onClick={() => updateData(null)}
@@ -229,8 +225,7 @@ export const actionAlignHorizontallyCentered = register({
   label: "labels.centerHorizontally",
   icon: CenterHorizontallyIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -243,7 +238,7 @@ export const actionAlignHorizontallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterHorizontallyIcon}
       onClick={() => updateData(null)}

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -7,7 +7,7 @@ import { getNonDeletedElements } from "../element";
 import type { ExcalidrawElement } from "../element/types";
 import type { AppClassProperties, AppState } from "../types";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
+import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
 import {
@@ -18,12 +18,14 @@ import {
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
 import { StoreAction } from "../store";
+import { mutateElbowArrow } from "../element/routing";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   app: AppClassProperties,
 ) => {
+  const elementsMap = app.scene.getNonDeletedElementsMap();
   const framesToBeDeleted = new Set(
     getSelectedElements(
       elements.filter((el) => isFrameLikeElement(el)),
@@ -31,99 +33,48 @@ const deleteSelectedElements = (
     ).map((el) => el.id),
   );
 
-  const selectedElementIds: Record<ExcalidrawElement["id"], true> = {};
-
-  let shouldSelectEditingGroup = true;
-
-  const nextElements = elements.map((el) => {
-    if (appState.selectedElementIds[el.id]) {
-      if (el.boundElements) {
-        el.boundElements.forEach((candidate) => {
-          const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
-          if (bound && isElbowArrow(bound)) {
-            mutateElement(bound, {
-              startBinding:
-                el.id === bound.startBinding?.elementId
-                  ? null
-                  : bound.startBinding,
-              endBinding:
-                el.id === bound.endBinding?.elementId ? null : bound.endBinding,
-            });
-            mutateElement(bound, { points: bound.points });
-          }
-        });
-      }
-      return newElementWith(el, { isDeleted: true });
-    }
-
-    // if deleting a frame, remove the children from it and select them
-    if (el.frameId && framesToBeDeleted.has(el.frameId)) {
-      shouldSelectEditingGroup = false;
-      selectedElementIds[el.id] = true;
-      return newElementWith(el, { frameId: null });
-    }
-
-    if (isBoundToContainer(el) && appState.selectedElementIds[el.containerId]) {
-      return newElementWith(el, { isDeleted: true });
-    }
-    return el;
-  });
-
-  let nextEditingGroupId = appState.editingGroupId;
-
-  // select next eligible element in currently editing group or supergroup
-  if (shouldSelectEditingGroup && appState.editingGroupId) {
-    const elems = getElementsInGroup(
-      nextElements,
-      appState.editingGroupId,
-    ).filter((el) => !el.isDeleted);
-    if (elems.length > 1) {
-      if (elems[0]) {
-        selectedElementIds[elems[0].id] = true;
-      }
-    } else {
-      nextEditingGroupId = null;
-      if (elems[0]) {
-        selectedElementIds[elems[0].id] = true;
-      }
-
-      const lastElementInGroup = elems[0];
-      if (lastElementInGroup) {
-        const editingGroupIdx = lastElementInGroup.groupIds.findIndex(
-          (groupId) => {
-            return groupId === appState.editingGroupId;
-          },
-        );
-        const superGroupId = lastElementInGroup.groupIds[editingGroupIdx + 1];
-        if (superGroupId) {
-          const elems = getElementsInGroup(nextElements, superGroupId).filter(
-            (el) => !el.isDeleted,
-          );
-          if (elems.length > 1) {
-            nextEditingGroupId = superGroupId;
-
-            elems.forEach((el) => {
-              selectedElementIds[el.id] = true;
-            });
-          }
-        }
-      }
-    }
-  }
-
   return {
-    elements: nextElements,
+    elements: elements.map((el) => {
+      if (appState.selectedElementIds[el.id]) {
+        if (el.boundElements) {
+          el.boundElements.forEach((candidate) => {
+            const bound = app.scene
+              .getNonDeletedElementsMap()
+              .get(candidate.id);
+            if (bound && isElbowArrow(bound)) {
+              mutateElement(bound, {
+                startBinding:
+                  el.id === bound.startBinding?.elementId
+                    ? null
+                    : bound.startBinding,
+                endBinding:
+                  el.id === bound.endBinding?.elementId
+                    ? null
+                    : bound.endBinding,
+              });
+              mutateElbowArrow(bound, elementsMap, bound.points);
+            }
+          });
+        }
+        return newElementWith(el, { isDeleted: true });
+      }
+
+      if (el.frameId && framesToBeDeleted.has(el.frameId)) {
+        return newElementWith(el, { isDeleted: true });
+      }
+
+      if (
+        isBoundToContainer(el) &&
+        appState.selectedElementIds[el.containerId]
+      ) {
+        return newElementWith(el, { isDeleted: true });
+      }
+      return el;
+    }),
     appState: {
       ...appState,
-      ...selectGroupsForSelectedElements(
-        {
-          selectedElementIds,
-          editingGroupId: nextEditingGroupId,
-        },
-        nextElements,
-        appState,
-        null,
-      ),
+      selectedElementIds: {},
+      selectedGroupIds: {},
     },
   };
 };
@@ -206,7 +157,12 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(element, selectedPointsIndices);
+      LinearElementEditor.deletePoints(
+        element,
+        selectedPointsIndices,
+        elementsMap,
+        appState.zoom,
+      );
 
       return {
         elements,

packages/excalidraw/actions/actionFlip.test.tsx

@@ -49,13 +49,12 @@ describe("flipping re-centers selection", () => {
         },
         startArrowhead: null,
         endArrowhead: "arrow",
-        fixedSegments: null,
         points: [
           pointFrom(0, 0),
           pointFrom(0, -35),
-          pointFrom(-90, -35),
-          pointFrom(-90, 204),
-          pointFrom(66, 204),
+          pointFrom(-90.9, -35),
+          pointFrom(-90.9, 204.9),
+          pointFrom(65.1, 204.9),
         ],
         elbowed: true,
       }),
@@ -71,13 +70,13 @@ describe("flipping re-centers selection", () => {
     API.executeAction(actionFlipHorizontal);
     API.executeAction(actionFlipHorizontal);
 
-    const rec1 = h.elements.find((el) => el.id === "rec1")!;
-    expect(rec1.x).toBeCloseTo(100, 0);
-    expect(rec1.y).toBeCloseTo(100, 0);
+    const rec1 = h.elements.find((el) => el.id === "rec1");
+    expect(rec1?.x).toBeCloseTo(100);
+    expect(rec1?.y).toBeCloseTo(100);
 
-    const rec2 = h.elements.find((el) => el.id === "rec2")!;
-    expect(rec2.x).toBeCloseTo(220, 0);
-    expect(rec2.y).toBeCloseTo(250, 0);
+    const rec2 = h.elements.find((el) => el.id === "rec2");
+    expect(rec2?.x).toBeCloseTo(220);
+    expect(rec2?.y).toBeCloseTo(250);
   });
 });
 

packages/excalidraw/actions/actionFlip.ts

@@ -24,8 +24,8 @@ import {
   isElbowArrow,
   isLinearElement,
 } from "../element/typeChecks";
+import { mutateElbowArrow } from "../element/routing";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { deepCopyElement } from "../element/newElement";
 import { getCommonBoundingBox } from "../element/bounds";
 
 export const actionFlipHorizontal = register({
@@ -134,24 +134,12 @@ const flipElements = (
 
   const { midX, midY } = getCommonBoundingBox(selectedElements);
 
-  resizeMultipleElements(
-    selectedElements,
-    elementsMap,
-    "nw",
-    app.scene,
-    new Map(
-      Array.from(elementsMap.values()).map((element) => [
-        element.id,
-        deepCopyElement(element),
-      ]),
-    ),
-    {
-      flipByX: flipDirection === "horizontal",
-      flipByY: flipDirection === "vertical",
-      shouldResizeFromCenter: true,
-      shouldMaintainAspectRatio: true,
-    },
-  );
+  resizeMultipleElements(selectedElements, elementsMap, "nw", app.scene, {
+    flipByX: flipDirection === "horizontal",
+    flipByY: flipDirection === "vertical",
+    shouldResizeFromCenter: true,
+    shouldMaintainAspectRatio: true,
+  });
 
   bindOrUnbindLinearElements(
     selectedElements.filter(isLinearElement),
@@ -193,10 +181,16 @@ const flipElements = (
     }),
   );
   elbowArrows.forEach((element) =>
-    mutateElement(element, {
-      x: element.x + diffX,
-      y: element.y + diffY,
-    }),
+    mutateElbowArrow(
+      element,
+      elementsMap,
+      element.points,
+      undefined,
+      undefined,
+      {
+        informMutation: false,
+      },
+    ),
   );
   // ---------------------------------------------------------------------------
 

packages/excalidraw/actions/actionFrame.ts

@@ -1,6 +1,6 @@
-import { getCommonBounds, getNonDeletedElements } from "../element";
+import { getNonDeletedElements } from "../element";
 import type { ExcalidrawElement } from "../element/types";
-import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
+import { removeAllElementsFromFrame } from "../frame";
 import { getFrameChildren } from "../frame";
 import { KEYS } from "../keys";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
@@ -10,10 +10,6 @@ import { register } from "./register";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { frameToolIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { getSelectedElements } from "../scene";
-import { newFrameElement } from "../element/newElement";
-import { getElementsInGroup } from "../groups";
-import { mutateElement } from "../element/mutateElement";
 
 const isSingleFrameSelected = (
   appState: UIAppState,
@@ -148,67 +144,3 @@ export const actionSetFrameAsActiveTool = register({
     !event.altKey &&
     event.key.toLocaleLowerCase() === KEYS.F,
 });
-
-export const actionWrapSelectionInFrame = register({
-  name: "wrapSelectionInFrame",
-  label: "labels.wrapSelectionInFrame",
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return (
-      selectedElements.length > 0 &&
-      !selectedElements.some((element) => isFrameLikeElement(element))
-    );
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    const [x1, y1, x2, y2] = getCommonBounds(
-      selectedElements,
-      app.scene.getNonDeletedElementsMap(),
-    );
-    const PADDING = 16;
-    const frame = newFrameElement({
-      x: x1 - PADDING,
-      y: y1 - PADDING,
-      width: x2 - x1 + PADDING * 2,
-      height: y2 - y1 + PADDING * 2,
-    });
-
-    // for a selected partial group, we want to remove it from the remainder of the group
-    if (appState.editingGroupId) {
-      const elementsInGroup = getElementsInGroup(
-        selectedElements,
-        appState.editingGroupId,
-      );
-
-      for (const elementInGroup of elementsInGroup) {
-        const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
-
-        mutateElement(
-          elementInGroup,
-          {
-            groupIds: elementInGroup.groupIds.slice(0, index),
-          },
-          false,
-        );
-      }
-    }
-
-    const nextElements = addElementsToFrame(
-      [...app.scene.getElementsIncludingDeleted(), frame],
-      selectedElements,
-      frame,
-      appState,
-    );
-
-    return {
-      elements: nextElements,
-      appState: {
-        selectedElementIds: { [frame.id]: true },
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-});

packages/excalidraw/actions/actionGroup.tsx

@@ -25,10 +25,8 @@ import type {
 import type { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
-  frameAndChildrenSelectedTogether,
   getElementsInResizingFrame,
   getFrameLikeElements,
-  getRootElements,
   groupByFrameLikes,
   removeElementsFromFrame,
   replaceAllElementsInFrame,
@@ -62,11 +60,8 @@ const enableActionGroup = (
     selectedElementIds: appState.selectedElementIds,
     includeBoundTextElement: true,
   });
-
   return (
-    selectedElements.length >= 2 &&
-    !allElementsInSameGroup(selectedElements) &&
-    !frameAndChildrenSelectedTogether(selectedElements)
+    selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
   );
 };
 
@@ -76,12 +71,10 @@ export const actionGroup = register({
   icon: (appState) => <GroupIcon theme={appState.theme} />,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getRootElements(
-      app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: true,
-      }),
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    });
     if (selectedElements.length < 2) {
       // nothing to group
       return { appState, elements, storeAction: StoreAction.NONE };

packages/excalidraw/actions/actionProperties.tsx

@@ -53,9 +53,6 @@ import {
   sharpArrowIcon,
   roundArrowIcon,
   elbowArrowIcon,
-  ArrowheadCrowfootIcon,
-  ArrowheadCrowfootOneIcon,
-  ArrowheadCrowfootOneOrManyIcon,
 } from "../components/icons";
 import {
   ARROW_TYPE,
@@ -89,7 +86,6 @@ import type {
   FontFamilyValues,
   TextAlign,
   VerticalAlign,
-  NonDeletedSceneElementsMap,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
@@ -116,12 +112,11 @@ import {
   bindPointToSnapToElementOutline,
   calculateFixedPointForElbowArrowBinding,
   getHoveredElementForBinding,
-  updateBoundElements,
 } from "../element/binding";
+import { mutateElbowArrow } from "../element/routing";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import type { LocalPoint } from "../../math";
-import { pointFrom } from "../../math";
-import { Range } from "../components/Range";
+import { pointFrom, vector } from "../../math";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -221,47 +216,33 @@ const changeFontSize = (
 ) => {
   const newFontSizes = new Set<number>();
 
-  const updatedElements = changeProperty(
-    elements,
-    appState,
-    (oldElement) => {
-      if (isTextElement(oldElement)) {
-        const newFontSize = getNewFontSize(oldElement);
-        newFontSizes.add(newFontSize);
-
-        let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
-          fontSize: newFontSize,
-        });
-        redrawTextBoundingBox(
-          newElement,
-          app.scene.getContainerElement(oldElement),
-          app.scene.getNonDeletedElementsMap(),
-        );
-
-        newElement = offsetElementAfterFontResize(oldElement, newElement);
-
-        return newElement;
-      }
-      return oldElement;
-    },
-    true,
-  );
-
-  // Update arrow elements after text elements have been updated
-  const updatedElementsMap = arrayToMap(updatedElements);
-  getSelectedElements(elements, appState, {
-    includeBoundTextElement: true,
-  }).forEach((element) => {
-    if (isTextElement(element)) {
-      updateBoundElements(
-        element,
-        updatedElementsMap as NonDeletedSceneElementsMap,
-      );
-    }
-  });
-
   return {
-    elements: updatedElements,
+    elements: changeProperty(
+      elements,
+      appState,
+      (oldElement) => {
+        if (isTextElement(oldElement)) {
+          const newFontSize = getNewFontSize(oldElement);
+          newFontSizes.add(newFontSize);
+
+          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
+            fontSize: newFontSize,
+          });
+          redrawTextBoundingBox(
+            newElement,
+            app.scene.getContainerElement(oldElement),
+            app.scene.getNonDeletedElementsMap(),
+          );
+
+          newElement = offsetElementAfterFontResize(oldElement, newElement);
+
+          return newElement;
+        }
+
+        return oldElement;
+      },
+      true,
+    ),
     appState: {
       ...appState,
       // update state only if we've set all select text elements to
@@ -631,12 +612,25 @@ export const actionChangeOpacity = register({
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => (
-    <Range
-      updateData={updateData}
-      elements={elements}
-      appState={appState}
-      testId="opacity"
-    />
+    <label className="control-label">
+      {t("labels.opacity")}
+      <input
+        type="range"
+        min="0"
+        max="100"
+        step="10"
+        onChange={(event) => updateData(+event.target.value)}
+        value={
+          getFormValue(
+            elements,
+            appState,
+            (element) => element.opacity,
+            true,
+            appState.currentItemOpacity,
+          ) ?? undefined
+        }
+      />
+    </label>
   ),
 });
 
@@ -1411,65 +1405,59 @@ const getArrowheadOptions = (flip: boolean) => {
       keyBinding: "w",
       icon: <ArrowheadArrowIcon flip={flip} />,
     },
+    {
+      value: "bar",
+      text: t("labels.arrowhead_bar"),
+      keyBinding: "e",
+      icon: <ArrowheadBarIcon flip={flip} />,
+    },
+    {
+      value: "dot",
+      text: t("labels.arrowhead_circle"),
+      keyBinding: null,
+      icon: <ArrowheadCircleIcon flip={flip} />,
+      showInPicker: false,
+    },
+    {
+      value: "circle",
+      text: t("labels.arrowhead_circle"),
+      keyBinding: "r",
+      icon: <ArrowheadCircleIcon flip={flip} />,
+      showInPicker: false,
+    },
+    {
+      value: "circle_outline",
+      text: t("labels.arrowhead_circle_outline"),
+      keyBinding: null,
+      icon: <ArrowheadCircleOutlineIcon flip={flip} />,
+      showInPicker: false,
+    },
     {
       value: "triangle",
       text: t("labels.arrowhead_triangle"),
       icon: <ArrowheadTriangleIcon flip={flip} />,
-      keyBinding: "e",
+      keyBinding: "t",
     },
     {
       value: "triangle_outline",
       text: t("labels.arrowhead_triangle_outline"),
       icon: <ArrowheadTriangleOutlineIcon flip={flip} />,
-      keyBinding: "r",
-    },
-    {
-      value: "circle",
-      text: t("labels.arrowhead_circle"),
-      keyBinding: "a",
-      icon: <ArrowheadCircleIcon flip={flip} />,
-    },
-    {
-      value: "circle_outline",
-      text: t("labels.arrowhead_circle_outline"),
-      keyBinding: "s",
-      icon: <ArrowheadCircleOutlineIcon flip={flip} />,
+      keyBinding: null,
+      showInPicker: false,
     },
     {
       value: "diamond",
       text: t("labels.arrowhead_diamond"),
       icon: <ArrowheadDiamondIcon flip={flip} />,
-      keyBinding: "d",
+      keyBinding: null,
+      showInPicker: false,
     },
     {
       value: "diamond_outline",
       text: t("labels.arrowhead_diamond_outline"),
       icon: <ArrowheadDiamondOutlineIcon flip={flip} />,
-      keyBinding: "f",
-    },
-    {
-      value: "bar",
-      text: t("labels.arrowhead_bar"),
-      keyBinding: "z",
-      icon: <ArrowheadBarIcon flip={flip} />,
-    },
-    {
-      value: "crowfoot_one",
-      text: t("labels.arrowhead_crowfoot_one"),
-      icon: <ArrowheadCrowfootOneIcon flip={flip} />,
-      keyBinding: "c",
-    },
-    {
-      value: "crowfoot_many",
-      text: t("labels.arrowhead_crowfoot_many"),
-      icon: <ArrowheadCrowfootIcon flip={flip} />,
-      keyBinding: "x",
-    },
-    {
-      value: "crowfoot_one_or_many",
-      text: t("labels.arrowhead_crowfoot_one_or_many"),
-      icon: <ArrowheadCrowfootOneOrManyIcon flip={flip} />,
-      keyBinding: "v",
+      keyBinding: null,
+      showInPicker: false,
     },
   ] as const;
 };
@@ -1533,7 +1521,6 @@ export const actionChangeArrowhead = register({
               appState.currentItemStartArrowhead,
             )}
             onChange={(value) => updateData({ position: "start", type: value })}
-            numberOfOptionsToAlwaysShow={4}
           />
           <IconPicker
             label="arrowhead_end"
@@ -1550,7 +1537,6 @@ export const actionChangeArrowhead = register({
               appState.currentItemEndArrowhead,
             )}
             onChange={(value) => updateData({ position: "end", type: value })}
-            numberOfOptionsToAlwaysShow={4}
           />
         </div>
       </fieldset>
@@ -1563,162 +1549,152 @@ export const actionChangeArrowType = register({
   label: "Change arrow types",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
-    const newElements = changeProperty(elements, appState, (el) => {
-      if (!isArrowElement(el)) {
-        return el;
-      }
-      const newElement = newElementWith(el, {
-        roundness:
-          value === ARROW_TYPE.round
-            ? {
-                type: ROUNDNESS.PROPORTIONAL_RADIUS,
-              }
-            : null,
-        elbowed: value === ARROW_TYPE.elbow,
-        points:
-          value === ARROW_TYPE.elbow || el.elbowed
-            ? [el.points[0], el.points[el.points.length - 1]]
-            : el.points,
-      });
-
-      if (isElbowArrow(newElement)) {
-        const elementsMap = app.scene.getNonDeletedElementsMap();
-
-        app.dismissLinearEditor();
-
-        const startGlobalPoint =
-          LinearElementEditor.getPointAtIndexGlobalCoordinates(
-            newElement,
-            0,
-            elementsMap,
-          );
-        const endGlobalPoint =
-          LinearElementEditor.getPointAtIndexGlobalCoordinates(
-            newElement,
-            -1,
-            elementsMap,
-          );
-        const startHoveredElement =
-          !newElement.startBinding &&
-          getHoveredElementForBinding(
-            tupleToCoors(startGlobalPoint),
-            elements,
-            elementsMap,
-            appState.zoom,
-          );
-        const endHoveredElement =
-          !newElement.endBinding &&
-          getHoveredElementForBinding(
-            tupleToCoors(endGlobalPoint),
-            elements,
-            elementsMap,
-            appState.zoom,
-          );
-        const startElement = startHoveredElement
-          ? startHoveredElement
-          : newElement.startBinding &&
-            (elementsMap.get(
-              newElement.startBinding.elementId,
-            ) as ExcalidrawBindableElement);
-        const endElement = endHoveredElement
-          ? endHoveredElement
-          : newElement.endBinding &&
-            (elementsMap.get(
-              newElement.endBinding.elementId,
-            ) as ExcalidrawBindableElement);
-
-        const finalStartPoint = startHoveredElement
-          ? bindPointToSnapToElementOutline(
-              startGlobalPoint,
-              endGlobalPoint,
-              startHoveredElement,
-              elementsMap,
-            )
-          : startGlobalPoint;
-        const finalEndPoint = endHoveredElement
-          ? bindPointToSnapToElementOutline(
-              endGlobalPoint,
-              startGlobalPoint,
-              endHoveredElement,
-              elementsMap,
-            )
-          : endGlobalPoint;
-
-        startHoveredElement &&
-          bindLinearElement(
-            newElement,
-            startHoveredElement,
-            "start",
-            elementsMap,
-          );
-        endHoveredElement &&
-          bindLinearElement(newElement, endHoveredElement, "end", elementsMap);
-
-        mutateElement(newElement, {
-          points: [finalStartPoint, finalEndPoint].map(
-            (p): LocalPoint =>
-              pointFrom(p[0] - newElement.x, p[1] - newElement.y),
-          ),
-          ...(startElement && newElement.startBinding
-            ? {
-                startBinding: {
-                  // @ts-ignore TS cannot discern check above
-                  ...newElement.startBinding!,
-                  ...calculateFixedPointForElbowArrowBinding(
-                    newElement,
-                    startElement,
-                    "start",
-                    elementsMap,
-                  ),
-                },
-              }
-            : {}),
-          ...(endElement && newElement.endBinding
-            ? {
-                endBinding: {
-                  // @ts-ignore TS cannot discern check above
-                  ...newElement.endBinding,
-                  ...calculateFixedPointForElbowArrowBinding(
-                    newElement,
-                    endElement,
-                    "end",
-                    elementsMap,
-                  ),
-                },
-              }
-            : {}),
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (!isArrowElement(el)) {
+          return el;
+        }
+        const newElement = newElementWith(el, {
+          roundness:
+            value === ARROW_TYPE.round
+              ? {
+                  type: ROUNDNESS.PROPORTIONAL_RADIUS,
+                }
+              : null,
+          elbowed: value === ARROW_TYPE.elbow,
+          points:
+            value === ARROW_TYPE.elbow || el.elbowed
+              ? [el.points[0], el.points[el.points.length - 1]]
+              : el.points,
         });
 
-        LinearElementEditor.updateEditorMidPointsCache(
-          newElement,
-          elementsMap,
-          app.state,
-        );
-      }
+        if (isElbowArrow(newElement)) {
+          const elementsMap = app.scene.getNonDeletedElementsMap();
 
-      return newElement;
-    });
+          app.dismissLinearEditor();
 
-    const newState = {
-      ...appState,
-      currentItemArrowType: value,
-    };
+          const startGlobalPoint =
+            LinearElementEditor.getPointAtIndexGlobalCoordinates(
+              newElement,
+              0,
+              elementsMap,
+            );
+          const endGlobalPoint =
+            LinearElementEditor.getPointAtIndexGlobalCoordinates(
+              newElement,
+              -1,
+              elementsMap,
+            );
+          const startHoveredElement =
+            !newElement.startBinding &&
+            getHoveredElementForBinding(
+              tupleToCoors(startGlobalPoint),
+              elements,
+              elementsMap,
+              appState.zoom,
+              true,
+            );
+          const endHoveredElement =
+            !newElement.endBinding &&
+            getHoveredElementForBinding(
+              tupleToCoors(endGlobalPoint),
+              elements,
+              elementsMap,
+              appState.zoom,
+              true,
+            );
+          const startElement = startHoveredElement
+            ? startHoveredElement
+            : newElement.startBinding &&
+              (elementsMap.get(
+                newElement.startBinding.elementId,
+              ) as ExcalidrawBindableElement);
+          const endElement = endHoveredElement
+            ? endHoveredElement
+            : newElement.endBinding &&
+              (elementsMap.get(
+                newElement.endBinding.elementId,
+              ) as ExcalidrawBindableElement);
 
-    // Change the arrow type and update any other state settings for
-    // the arrow.
-    const selectedId = appState.selectedLinearElement?.elementId;
-    if (selectedId) {
-      const selected = newElements.find((el) => el.id === selectedId);
-      if (selected) {
-        newState.selectedLinearElement = new LinearElementEditor(
-          selected as ExcalidrawLinearElement,
-        );
-      }
-    }
+          const finalStartPoint = startHoveredElement
+            ? bindPointToSnapToElementOutline(
+                startGlobalPoint,
+                endGlobalPoint,
+                startHoveredElement,
+                elementsMap,
+              )
+            : startGlobalPoint;
+          const finalEndPoint = endHoveredElement
+            ? bindPointToSnapToElementOutline(
+                endGlobalPoint,
+                startGlobalPoint,
+                endHoveredElement,
+                elementsMap,
+              )
+            : endGlobalPoint;
 
-    return {
-      elements: newElements,
-      appState: newState,
+          startHoveredElement &&
+            bindLinearElement(
+              newElement,
+              startHoveredElement,
+              "start",
+              elementsMap,
+            );
+          endHoveredElement &&
+            bindLinearElement(
+              newElement,
+              endHoveredElement,
+              "end",
+              elementsMap,
+            );
+
+          mutateElbowArrow(
+            newElement,
+            elementsMap,
+            [finalStartPoint, finalEndPoint].map(
+              (p): LocalPoint =>
+                pointFrom(p[0] - newElement.x, p[1] - newElement.y),
+            ),
+            vector(0, 0),
+            {
+              ...(startElement && newElement.startBinding
+                ? {
+                    startBinding: {
+                      // @ts-ignore TS cannot discern check above
+                      ...newElement.startBinding!,
+                      ...calculateFixedPointForElbowArrowBinding(
+                        newElement,
+                        startElement,
+                        "start",
+                        elementsMap,
+                      ),
+                    },
+                  }
+                : {}),
+              ...(endElement && newElement.endBinding
+                ? {
+                    endBinding: {
+                      // @ts-ignore TS cannot discern check above
+                      ...newElement.endBinding,
+                      ...calculateFixedPointForElbowArrowBinding(
+                        newElement,
+                        endElement,
+                        "end",
+                        elementsMap,
+                      ),
+                    },
+                  }
+                : {}),
+            },
+          );
+        }
+
+        return newElement;
+      }),
+      appState: {
+        ...appState,
+        currentItemArrowType: value,
+      },
       storeAction: StoreAction.CAPTURE,
     };
   },

packages/excalidraw/actions/actionSelectAll.ts

@@ -5,6 +5,7 @@ import { getNonDeletedElements, isTextElement } from "../element";
 import type { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { excludeElementsInFramesFromSelection } from "../scene/selection";
 import { selectAllIcon } from "../components/icons";
 import { StoreAction } from "../store";
 
@@ -19,17 +20,17 @@ export const actionSelectAll = register({
       return false;
     }
 
-    const selectedElementIds = elements
-      .filter(
+    const selectedElementIds = excludeElementsInFramesFromSelection(
+      elements.filter(
         (element) =>
           !element.isDeleted &&
           !(isTextElement(element) && element.containerId) &&
           !element.locked,
-      )
-      .reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
-        map[element.id] = true;
-        return map;
-      }, {});
+      ),
+    ).reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
+      map[element.id] = true;
+      return map;
+    }, {});
 
     return {
       appState: {

packages/excalidraw/actions/shortcuts.ts

@@ -47,7 +47,6 @@ export type ShortcutName =
       | "saveFileToDisk"
       | "saveToActiveFile"
       | "toggleShortcuts"
-      | "wrapSelectionInFrame"
     >
   | "saveScene"
   | "imageExport"
@@ -113,7 +112,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
   toggleShortcuts: [getShortcutKey("?")],
   searchMenu: [getShortcutKey("CtrlOrCmd+F")],
-  wrapSelectionInFrame: [],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName, idx = 0) => {

packages/excalidraw/actions/types.ts

@@ -137,8 +137,7 @@ export type ActionName =
   | "searchMenu"
   | "copyElementLink"
   | "linkToElement"
-  | "cropEditor"
-  | "wrapSelectionInFrame";
+  | "cropEditor";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

packages/excalidraw/align.ts

@@ -1,10 +1,8 @@
 import type { ElementsMap, ExcalidrawElement } from "./element/types";
-import { mutateElement } from "./element/mutateElement";
+import { newElementWith } from "./element/mutateElement";
 import type { BoundingBox } from "./element/bounds";
 import { getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
-import { updateBoundElements } from "./element/binding";
-import type Scene from "./scene/Scene";
 
 export interface Alignment {
   position: "start" | "center" | "end";
@@ -15,7 +13,6 @@ export const alignElements = (
   selectedElements: ExcalidrawElement[],
   elementsMap: ElementsMap,
   alignment: Alignment,
-  scene: Scene,
 ): ExcalidrawElement[] => {
   const groups: ExcalidrawElement[][] = getMaximumGroups(
     selectedElements,
@@ -29,18 +26,12 @@ export const alignElements = (
       selectionBoundingBox,
       alignment,
     );
-    return group.map((element) => {
-      // update element
-      const updatedEle = mutateElement(element, {
+    return group.map((element) =>
+      newElementWith(element, {
         x: element.x + translation.x,
         y: element.y + translation.y,
-      });
-      // update bound elements
-      updateBoundElements(element, scene.getNonDeletedElementsMap(), {
-        simultaneouslyUpdated: group,
-      });
-      return updatedEle;
-    });
+      }),
+    );
   });
 };
 

packages/excalidraw/components/Actions.tsx

@@ -51,7 +51,6 @@ import {
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
 import { CLASSES } from "../constants";
-import { alignActionsPredicate } from "../actions/actionAlign";
 
 export const canChangeStrokeColor = (
   appState: UIAppState,
@@ -91,12 +90,10 @@ export const SelectedShapeActions = ({
   appState,
   elementsMap,
   renderAction,
-  app,
 }: {
   appState: UIAppState;
   elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
   renderAction: ActionManager["renderAction"];
-  app: AppClassProperties;
 }) => {
   const targetElements = getTargetElements(elementsMap, appState);
 
@@ -136,9 +133,6 @@ export const SelectedShapeActions = ({
     targetElements.length === 1 &&
     isImageElement(targetElements[0]);
 
-  const showAlignActions =
-    !isSingleElementBoundContainer && alignActionsPredicate(appState, app);
-
   return (
     <div className="panelColumn">
       <div>
@@ -206,7 +200,7 @@ export const SelectedShapeActions = ({
         </div>
       </fieldset>
 
-      {showAlignActions && !isSingleElementBoundContainer && (
+      {targetElements.length > 1 && !isSingleElementBoundContainer && (
         <fieldset>
           <legend>{t("labels.align")}</legend>
           <div className="buttonList">

packages/excalidraw/components/ActiveConfirmDialog.tsx

@@ -1,6 +1,7 @@
+import { atom, useAtom } from "jotai";
 import { actionClearCanvas } from "../actions";
 import { t } from "../i18n";
-import { atom, useAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 import { useExcalidrawActionManager } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 
@@ -9,6 +10,7 @@ export const activeConfirmDialogAtom = atom<"clearCanvas" | null>(null);
 export const ActiveConfirmDialog = () => {
   const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(
     activeConfirmDialogAtom,
+    jotaiScope,
   );
   const actionManager = useExcalidrawActionManager();
 

packages/excalidraw/components/App.tsx

@@ -165,7 +165,6 @@ import {
   isTextBindableContainer,
   isElbowArrow,
   isFlowchartNodeElement,
-  isBindableElement,
 } from "../element/typeChecks";
 import type {
   ExcalidrawBindableElement,
@@ -190,6 +189,7 @@ import type {
   MagicGenerationData,
   ExcalidrawNonSelectionElement,
   ExcalidrawArrowElement,
+  NonDeletedSceneElementsMap,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -292,6 +292,7 @@ import {
   getDateTime,
   isShallowEqual,
   arrayToMap,
+  toBrandedType,
 } from "../utils";
 import {
   createSrcDoc,
@@ -377,10 +378,9 @@ import { actionPaste } from "../actions/actionClipboard";
 import {
   actionRemoveAllElementsFromFrame,
   actionSelectAllElementsInFrame,
-  actionWrapSelectionInFrame,
 } from "../actions/actionFrame";
 import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
-import { editorJotaiStore } from "../editor-jotai";
+import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import { ImageSceneDataError } from "../errors";
 import {
@@ -442,6 +442,7 @@ import { actionTextAutoResize } from "../actions/actionTextAutoResize";
 import { getVisibleSceneBounds } from "../element/bounds";
 import { isMaybeMermaidDefinition } from "../mermaid";
 import NewElementCanvas from "./canvases/NewElementCanvas";
+import { mutateElbowArrow, updateElbowArrow } from "../element/routing";
 import {
   FlowChartCreator,
   FlowChartNavigator,
@@ -2075,7 +2076,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private openEyeDropper = ({ type }: { type: "stroke" | "background" }) => {
-    editorJotaiStore.set(activeEyeDropperAtom, {
+    jotaiStore.set(activeEyeDropperAtom, {
       swapPreviewOnAlt: true,
       colorPickerType:
         type === "stroke" ? "elementStroke" : "elementBackground",
@@ -2582,6 +2583,21 @@ class App extends React.Component<AppProps, AppState> {
         this.handleWheel,
         { passive: false },
       ),
+      addEventListener(window, "focusin", (event) => {
+        console.log("%c@@@@@@ focusin:", "color:lime", event.target);
+        const target = event.target;
+        if (
+          event.target instanceof HTMLElement &&
+          this.state.editingTextElement
+        ) {
+          if (event.target.tagName !== "TEXTAREA") {
+            this.focusContainer();
+          }
+        }
+      }),
+      addEventListener(window, "focusout", (event) => {
+        console.log("%c@@@@@@ focusout:", "color:red", event.target);
+      }),
       addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false),
       addEventListener(document, EVENT.POINTER_UP, this.removePointer, {
         passive: false,
@@ -3182,7 +3198,49 @@ class App extends React.Component<AppProps, AppState> {
     retainSeed?: boolean;
     fitToContent?: boolean;
   }) => {
-    const elements = restoreElements(opts.elements, null, undefined);
+    let elements = opts.elements.map((el, _, elements) => {
+      if (isElbowArrow(el)) {
+        const startEndElements = [
+          el.startBinding &&
+            elements.find((l) => l.id === el.startBinding?.elementId),
+          el.endBinding &&
+            elements.find((l) => l.id === el.endBinding?.elementId),
+        ];
+        const startBinding = startEndElements[0] ? el.startBinding : null;
+        const endBinding = startEndElements[1] ? el.endBinding : null;
+        return {
+          ...el,
+          ...updateElbowArrow(
+            {
+              ...el,
+              startBinding,
+              endBinding,
+            },
+            toBrandedType<NonDeletedSceneElementsMap>(
+              new Map(
+                startEndElements
+                  .filter((x) => x != null)
+                  .map(
+                    (el) =>
+                      [el!.id, el] as [
+                        string,
+                        Ordered<NonDeletedExcalidrawElement>,
+                      ],
+                  ),
+              ),
+            ),
+            [el.points[0], el.points[el.points.length - 1]],
+            undefined,
+            {
+              zoom: this.state.zoom,
+            },
+          ),
+        };
+      }
+
+      return el;
+    });
+    elements = restoreElements(elements, null, undefined);
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);
 
     const elementsCenterX = distance(minX, maxX) / 2;
@@ -3235,12 +3293,7 @@ class App extends React.Component<AppProps, AppState> {
         newElements,
         topLayerFrame,
       );
-      addElementsToFrame(
-        nextElements,
-        eligibleElements,
-        topLayerFrame,
-        this.state,
-      );
+      addElementsToFrame(nextElements, eligibleElements, topLayerFrame);
     }
 
     this.scene.replaceAllElements(nextElements);
@@ -3286,7 +3339,7 @@ class App extends React.Component<AppProps, AppState> {
         openSidebar:
           this.state.openSidebar &&
           this.device.editor.canFitSidebar &&
-          editorJotaiStore.get(isSidebarDockedAtom)
+          jotaiStore.get(isSidebarDockedAtom)
             ? this.state.openSidebar
             : null,
         ...selectGroupsForSelectedElements(
@@ -4331,17 +4384,14 @@ class App extends React.Component<AppProps, AppState> {
         }
 
         selectedElements.forEach((element) => {
-          mutateElement(
-            element,
-            {
-              x: element.x + offsetX,
-              y: element.y + offsetY,
-            },
-            false,
-          );
+          mutateElement(element, {
+            x: element.x + offsetX,
+            y: element.y + offsetY,
+          });
 
           updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
             simultaneouslyUpdated: selectedElements,
+            zoom: this.state.zoom,
           });
         });
 
@@ -4355,8 +4405,6 @@ class App extends React.Component<AppProps, AppState> {
           ),
         });
 
-        this.scene.triggerUpdate();
-
         event.preventDefault();
       } else if (event.key === KEYS.ENTER) {
         const selectedElements = this.scene.getSelectedElements(this.state);
@@ -4519,7 +4567,7 @@ class App extends React.Component<AppProps, AppState> {
         event[KEYS.CTRL_OR_CMD] &&
         (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE)
       ) {
-        editorJotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
+        jotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
       }
 
       // eye dropper
@@ -4662,10 +4710,7 @@ class App extends React.Component<AppProps, AppState> {
     if (nextActiveTool.type === "hand") {
       setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
     } else if (!isHoldingSpace) {
-      setCursorForShape(this.interactiveCanvas, {
-        ...this.state,
-        activeTool: nextActiveTool,
-      });
+      setCursorForShape(this.interactiveCanvas, this.state);
     }
     if (isToolIcon(document.activeElement)) {
       this.focusContainer();
@@ -4815,6 +4860,12 @@ class App extends React.Component<AppProps, AppState> {
   ) {
     const elementsMap = this.scene.getElementsMapIncludingDeleted();
 
+    // flushSync(() => {
+    //   this.setState({
+    //     editingTextElement: element,
+    //   });
+    // });
+
     const updateElement = (nextOriginalText: string, isDeleted: boolean) => {
       this.scene.replaceAllElements([
         // Not sure why we include deleted elements as well hence using deleted elements map
@@ -5331,11 +5382,6 @@ class App extends React.Component<AppProps, AppState> {
 
     const selectedElements = this.scene.getSelectedElements(this.state);
 
-    let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
-      event,
-      this.state,
-    );
-
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       if (
         event[KEYS.CTRL_OR_CMD] &&
@@ -5349,64 +5395,6 @@ class App extends React.Component<AppProps, AppState> {
           editingLinearElement: new LinearElementEditor(selectedElements[0]),
         });
         return;
-      } else if (
-        this.state.selectedLinearElement &&
-        isElbowArrow(selectedElements[0])
-      ) {
-        const hitCoords = LinearElementEditor.getSegmentMidpointHitCoords(
-          this.state.selectedLinearElement,
-          { x: sceneX, y: sceneY },
-          this.state,
-          this.scene.getNonDeletedElementsMap(),
-        );
-        const midPoint = hitCoords
-          ? LinearElementEditor.getSegmentMidPointIndex(
-              this.state.selectedLinearElement,
-              this.state,
-              hitCoords,
-              this.scene.getNonDeletedElementsMap(),
-            )
-          : -1;
-
-        if (midPoint && midPoint > -1) {
-          this.store.shouldCaptureIncrement();
-          LinearElementEditor.deleteFixedSegment(selectedElements[0], midPoint);
-
-          const nextCoords = LinearElementEditor.getSegmentMidpointHitCoords(
-            {
-              ...this.state.selectedLinearElement,
-              segmentMidPointHoveredCoords: null,
-            },
-            { x: sceneX, y: sceneY },
-            this.state,
-            this.scene.getNonDeletedElementsMap(),
-          );
-          const nextIndex = nextCoords
-            ? LinearElementEditor.getSegmentMidPointIndex(
-                this.state.selectedLinearElement,
-                this.state,
-                nextCoords,
-                this.scene.getNonDeletedElementsMap(),
-              )
-            : null;
-
-          this.setState({
-            selectedLinearElement: {
-              ...this.state.selectedLinearElement,
-              pointerDownState: {
-                ...this.state.selectedLinearElement.pointerDownState,
-                segmentMidpoint: {
-                  index: nextIndex,
-                  value: hitCoords,
-                  added: false,
-                },
-              },
-              segmentMidPointHoveredCoords: nextCoords,
-            },
-          });
-
-          return;
-        }
       }
     }
 
@@ -5417,6 +5405,11 @@ class App extends React.Component<AppProps, AppState> {
 
     resetCursor(this.interactiveCanvas);
 
+    let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+      event,
+      this.state,
+    );
+
     const selectedGroupIds = getSelectedGroupIds(this.state);
 
     if (selectedGroupIds.length > 0) {
@@ -5873,23 +5866,41 @@ class App extends React.Component<AppProps, AppState> {
         if (isPathALoop(points, this.state.zoom.value)) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
         }
-        // update last uncommitted point
-        mutateElement(
-          multiElement,
-          {
-            points: [
+        if (isElbowArrow(multiElement)) {
+          mutateElbowArrow(
+            multiElement,
+            this.scene.getNonDeletedElementsMap(),
+            [
               ...points.slice(0, -1),
               pointFrom<LocalPoint>(
                 lastCommittedX + dxFromLastCommitted,
                 lastCommittedY + dyFromLastCommitted,
               ),
             ],
-          },
-          false,
-          {
-            isDragging: true,
-          },
-        );
+            undefined,
+            undefined,
+            {
+              isDragging: true,
+              informMutation: false,
+              zoom: this.state.zoom,
+            },
+          );
+        } else {
+          // update last uncommitted point
+          mutateElement(
+            multiElement,
+            {
+              points: [
+                ...points.slice(0, -1),
+                pointFrom<LocalPoint>(
+                  lastCommittedX + dxFromLastCommitted,
+                  lastCommittedY + dyFromLastCommitted,
+                ),
+              ],
+            },
+            false,
+          );
+        }
 
         // in this path, we're mutating multiElement to reflect
         // how it will be after adding pointer position as the next point
@@ -6055,7 +6066,7 @@ class App extends React.Component<AppProps, AppState> {
             this.setState({
               activeEmbeddable: { element: hitElement, state: "hover" },
             });
-          } else if (!hitElement || !isElbowArrow(hitElement)) {
+          } else {
             setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
             if (this.state.activeEmbeddable?.state === "hover") {
               this.setState({ activeEmbeddable: null });
@@ -6241,18 +6252,14 @@ class App extends React.Component<AppProps, AppState> {
             this.state,
             this.scene.getNonDeletedElementsMap(),
           );
-        const isHoveringAPointHandle = isElbowArrow(element)
-          ? hoverPointIndex === 0 ||
-            hoverPointIndex === element.points.length - 1
-          : hoverPointIndex >= 0;
-        if (isHoveringAPointHandle || segmentMidPointHoveredCoords) {
+
+        if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
         } else if (this.hitElement(scenePointerX, scenePointerY, element)) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
         }
       } else if (this.hitElement(scenePointerX, scenePointerY, element)) {
         if (
-          // Ebow arrows can only be moved when unconnected
           !isElbowArrow(element) ||
           !(element.startBinding || element.endBinding)
         ) {
@@ -6292,6 +6299,11 @@ class App extends React.Component<AppProps, AppState> {
   private handleCanvasPointerDown = (
     event: React.PointerEvent<HTMLElement>,
   ) => {
+    console.log("(1)", document.activeElement);
+    console.time();
+    this.focusContainer();
+    console.timeEnd();
+    console.log("(2)", document.activeElement);
     this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);
     this.maybeUnfollowRemoteUser();
 
@@ -6302,7 +6314,7 @@ class App extends React.Component<AppProps, AppState> {
           focus: false,
         })),
       }));
-      editorJotaiStore.set(searchItemInFocusAtom, null);
+      jotaiStore.set(searchItemInFocusAtom, null);
     }
 
     // since contextMenu options are potentially evaluated on each render,
@@ -6736,17 +6748,16 @@ class App extends React.Component<AppProps, AppState> {
     }
     isPanning = true;
 
-    // due to event.preventDefault below, container wouldn't get focus
-    // automatically
-    this.focusContainer();
-
     // preventing defualt while text editing messes with cursor/focus
     if (!this.state.editingTextElement) {
       // necessary to prevent browser from scrolling the page if excalidraw
       // not full-page #4489
       //
-      // as such, the above is broken when panning canvas while in wysiwyg
+      // note, this fix won't work when panning canvas while in wysiwyg since
+      // we don't execute it while in wysiwyg
       event.preventDefault();
+      // focus explicitly due to the event.preventDefault above
+      this.focusContainer();
     }
 
     let nextPastePrevented = false;
@@ -6982,7 +6993,6 @@ class App extends React.Component<AppProps, AppState> {
       if (
         selectedElements.length === 1 &&
         !this.state.editingLinearElement &&
-        !isElbowArrow(selectedElements[0]) &&
         !(
           this.state.selectedLinearElement &&
           this.state.selectedLinearElement.hoverPointIndex !== -1
@@ -7684,10 +7694,6 @@ class App extends React.Component<AppProps, AppState> {
               locked: false,
               frameId: topLayerFrame ? topLayerFrame.id : null,
               elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
-              fixedSegments:
-                this.state.currentItemArrowType === ARROW_TYPE.elbow
-                  ? []
-                  : null,
             })
           : newLinearElement({
               type: elementType,
@@ -7928,63 +7934,6 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
       const pointerCoords = viewportCoordsToSceneCoords(event, this.state);
-
-      if (
-        this.state.selectedLinearElement &&
-        this.state.selectedLinearElement.elbowed &&
-        this.state.selectedLinearElement.pointerDownState.segmentMidpoint.index
-      ) {
-        const [gridX, gridY] = getGridPoint(
-          pointerCoords.x,
-          pointerCoords.y,
-          event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
-        );
-
-        let index =
-          this.state.selectedLinearElement.pointerDownState.segmentMidpoint
-            .index;
-        if (index < 0) {
-          const nextCoords = LinearElementEditor.getSegmentMidpointHitCoords(
-            {
-              ...this.state.selectedLinearElement,
-              segmentMidPointHoveredCoords: null,
-            },
-            { x: gridX, y: gridY },
-            this.state,
-            this.scene.getNonDeletedElementsMap(),
-          );
-          index = nextCoords
-            ? LinearElementEditor.getSegmentMidPointIndex(
-                this.state.selectedLinearElement,
-                this.state,
-                nextCoords,
-                this.scene.getNonDeletedElementsMap(),
-              )
-            : -1;
-        }
-
-        const ret = LinearElementEditor.moveFixedSegment(
-          this.state.selectedLinearElement,
-          index,
-          gridX,
-          gridY,
-          this.scene.getNonDeletedElementsMap(),
-        );
-
-        flushSync(() => {
-          if (this.state.selectedLinearElement) {
-            this.setState({
-              selectedLinearElement: {
-                ...this.state.selectedLinearElement,
-                segmentMidPointHoveredCoords: ret.segmentMidPointHoveredCoords,
-                pointerDownState: ret.pointerDownState,
-              },
-            });
-          }
-        });
-        return;
-      }
-
       const lastPointerCoords =
         this.lastPointerMoveCoords ?? pointerDownState.origin;
       this.lastPointerMoveCoords = pointerCoords;
@@ -8331,11 +8280,13 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getNonDeletedElementsMap(),
           );
 
-          this.setState({ snapLines });
+          flushSync(() => {
+            this.setState({ snapLines });
+          });
 
           // when we're editing the name of a frame, we want the user to be
           // able to select and interact with the text input
-          if (!this.state.editingFrame) {
+          !this.state.editingFrame &&
             dragSelectedElements(
               pointerDownState,
               selectedElements,
@@ -8344,7 +8295,6 @@ class App extends React.Component<AppProps, AppState> {
               snapOffset,
               event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
             );
-          }
 
           this.setState({
             selectedElementsAreBeingDragged: true,
@@ -8520,17 +8470,26 @@ class App extends React.Component<AppProps, AppState> {
               },
               false,
             );
-          } else if (
-            points.length === 2 ||
-            (points.length > 1 && isElbowArrow(newElement))
-          ) {
+          } else if (points.length > 1 && isElbowArrow(newElement)) {
+            mutateElbowArrow(
+              newElement,
+              elementsMap,
+              [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
+              vector(0, 0),
+              undefined,
+              {
+                isDragging: true,
+                informMutation: false,
+                zoom: this.state.zoom,
+              },
+            );
+          } else if (points.length === 2) {
             mutateElement(
               newElement,
               {
                 points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
               },
               false,
-              { isDragging: true },
             );
           }
 
@@ -8597,7 +8556,6 @@ class App extends React.Component<AppProps, AppState> {
                 elements,
                 this.state.selectionElement,
                 this.scene.getNonDeletedElementsMap(),
-                false,
               )
             : [];
 
@@ -8726,24 +8684,6 @@ class App extends React.Component<AppProps, AppState> {
         selectedElementsAreBeingDragged: false,
       });
       const elementsMap = this.scene.getNonDeletedElementsMap();
-
-      if (
-        pointerDownState.drag.hasOccurred &&
-        pointerDownState.hit?.element?.id
-      ) {
-        const element = elementsMap.get(pointerDownState.hit.element.id);
-        if (isBindableElement(element)) {
-          // Renormalize elbow arrows when they are changed via indirect move
-          element.boundElements
-            ?.filter((e) => e.type === "arrow")
-            .map((e) => elementsMap.get(e.id))
-            .filter((e) => isElbowArrow(e))
-            .forEach((e) => {
-              !!e && mutateElement(e, {}, true);
-            });
-        }
-      }
-
       // Handle end of dragging a point of a linear element, might close a loop
       // and sets binding element
       if (this.state.editingLinearElement) {
@@ -8768,17 +8708,6 @@ class App extends React.Component<AppProps, AppState> {
           }
         }
       } else if (this.state.selectedLinearElement) {
-        // Normalize elbow arrow points, remove close parallel segments
-        if (this.state.selectedLinearElement.elbowed) {
-          const element = LinearElementEditor.getElement(
-            this.state.selectedLinearElement.elementId,
-            this.scene.getNonDeletedElementsMap(),
-          );
-          if (element) {
-            mutateElement(element, {}, true);
-          }
-        }
-
         if (
           pointerDownState.hit?.element?.id !==
           this.state.selectedLinearElement.elementId
@@ -9026,7 +8955,6 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getElementsMapIncludingDeleted(),
             elementsInsideFrame,
             newElement,
-            this.state,
           ),
         );
       }
@@ -9144,7 +9072,6 @@ class App extends React.Component<AppProps, AppState> {
               nextElements,
               elementsToAdd,
               topLayerFrame,
-              this.state,
             );
           } else if (!topLayerFrame) {
             if (this.state.editingGroupId) {
@@ -9220,10 +9147,10 @@ class App extends React.Component<AppProps, AppState> {
         this.state.selectedLinearElement?.elementId !== hitElement?.id &&
         isLinearElement(hitElement)
       ) {
-        const selectedElements = this.scene.getSelectedElements(this.state);
+        const selectedELements = this.scene.getSelectedElements(this.state);
         // set selectedLinearElement when no other element selected except
         // the one we've hit
-        if (selectedElements.length === 1) {
+        if (selectedELements.length === 1) {
           this.setState({
             selectedLinearElement: new LinearElementEditor(hitElement),
           });
@@ -9431,8 +9358,6 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (
-        // not elbow midpoint dragged
-        !(hitElement && isElbowArrow(hitElement)) &&
         // not dragged
         !pointerDownState.drag.hasOccurred &&
         // not resized
@@ -10761,10 +10686,8 @@ class App extends React.Component<AppProps, AppState> {
       actionCut,
       actionCopy,
       actionPaste,
-      CONTEXT_MENU_SEPARATOR,
       actionSelectAllElementsInFrame,
       actionRemoveAllElementsFromFrame,
-      actionWrapSelectionInFrame,
       CONTEXT_MENU_SEPARATOR,
       actionToggleCropEditor,
       CONTEXT_MENU_SEPARATOR,

packages/excalidraw/components/ColorPicker/ColorInput.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getColor } from "./ColorPicker";
+import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { eyeDropperIcon } from "../icons";
-import { useAtom } from "../../editor-jotai";
+import { jotaiScope } from "../../jotai";
 import { KEYS } from "../../keys";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import clsx from "clsx";
@@ -56,7 +57,10 @@ export const ColorInput = ({
     }
   }, [activeSection]);
 
-  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
 
   useEffect(() => {
     return () => {

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -5,6 +5,7 @@ import { TopPicks } from "./TopPicks";
 import { ButtonSeparator } from "../ButtonSeparator";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
+import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { useExcalidrawContainer } from "../App";
@@ -14,10 +15,11 @@ import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
 import { useRef } from "react";
-import { useAtom } from "../../editor-jotai";
+import { jotaiScope } from "../../jotai";
 import { ColorInput } from "./ColorInput";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
+import { CLASSES } from "../../constants";
 
 import "./ColorPicker.scss";
 
@@ -75,7 +77,10 @@ const ColorPickerPopupContent = ({
   const { container } = useExcalidrawContainer();
   const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
 
-  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
 
   const colorInputJSX = (
     <div>
@@ -182,9 +187,13 @@ const ColorPickerTrigger = ({
   return (
     <Popover.Trigger
       type="button"
-      className={clsx("color-picker__button active-color properties-trigger", {
-        "is-transparent": color === "transparent" || !color,
-      })}
+      className={clsx(
+        "color-picker__button active-color",
+        CLASSES.PROPERTIES_POPOVER_TRIGGER,
+        {
+          "is-transparent": color === "transparent" || !color,
+        },
+      )}
       aria-label={label}
       style={color ? { "--swatch-color": color } : undefined}
       title={

packages/excalidraw/components/ColorPicker/CustomColorList.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { useEffect, useRef } from "react";
+import { useUIAppState } from "../../context/ui-appState";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import HotkeyLabel from "./HotkeyLabel";
 
@@ -17,6 +18,7 @@ export const CustomColorList = ({
   onChange,
   label,
 }: CustomColorListProps) => {
+  const appState = useUIAppState();
   const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(
     activeColorPickerSectionAtom,
   );
@@ -54,7 +56,9 @@ export const CustomColorList = ({
             key={i}
           >
             <div className="color-picker__button-outline" />
-            <HotkeyLabel color={c} keyLabel={i + 1} isCustomColor />
+            {!appState.editingTextElement && (
+              <HotkeyLabel color={c} keyLabel={i + 1} isCustomColor />
+            )}
           </button>
         );
       })}

packages/excalidraw/components/ColorPicker/Picker.tsx

@@ -5,7 +5,7 @@ import type { ExcalidrawElement } from "../../element/types";
 import { ShadeList } from "./ShadeList";
 
 import PickerColorList from "./PickerColorList";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { CustomColorList } from "./CustomColorList";
 import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
 import PickerHeading from "./PickerHeading";

packages/excalidraw/components/ColorPicker/PickerColorList.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import {
   activeColorPickerSectionAtom,
@@ -10,6 +10,7 @@ import HotkeyLabel from "./HotkeyLabel";
 import type { ColorPaletteCustom } from "../../colors";
 import type { TranslationKeys } from "../../i18n";
 import { t } from "../../i18n";
+import { useUIAppState } from "../../context/ui-appState";
 
 interface PickerColorListProps {
   palette: ColorPaletteCustom;
@@ -26,6 +27,8 @@ const PickerColorList = ({
   label,
   activeShade,
 }: PickerColorListProps) => {
+  const appState = useUIAppState();
+
   const colorObj = getColorNameAndShadeFromColor({
     color: color || "transparent",
     palette,
@@ -80,7 +83,9 @@ const PickerColorList = ({
             key={key}
           >
             <div className="color-picker__button-outline" />
-            <HotkeyLabel color={color} keyLabel={keybinding} />
+            {!appState.editingTextElement && (
+              <HotkeyLabel color={color} keyLabel={keybinding} />
+            )}
           </button>
         );
       })}

packages/excalidraw/components/ColorPicker/ShadeList.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import {
   activeColorPickerSectionAtom,
@@ -8,6 +8,7 @@ import {
 import HotkeyLabel from "./HotkeyLabel";
 import { t } from "../../i18n";
 import type { ColorPaletteCustom } from "../../colors";
+import { useUIAppState } from "../../context/ui-appState";
 
 interface ShadeListProps {
   hex: string;
@@ -16,6 +17,8 @@ interface ShadeListProps {
 }
 
 export const ShadeList = ({ hex, onChange, palette }: ShadeListProps) => {
+  const appState = useUIAppState();
+
   const colorObj = getColorNameAndShadeFromColor({
     color: hex || "transparent",
     palette,
@@ -31,7 +34,7 @@ export const ShadeList = ({ hex, onChange, palette }: ShadeListProps) => {
     if (btnRef.current && activeColorPickerSection === "shades") {
       btnRef.current.focus();
     }
-  }, [colorObj, activeColorPickerSection]);
+  }, [colorObj?.colorName, colorObj?.shade, activeColorPickerSection]);
 
   if (colorObj) {
     const { colorName, shade } = colorObj;
@@ -64,7 +67,9 @@ export const ShadeList = ({ hex, onChange, palette }: ShadeListProps) => {
               }}
             >
               <div className="color-picker__button-outline" />
-              <HotkeyLabel color={color} keyLabel={i + 1} isShade />
+              {!appState.editingTextElement && (
+                <HotkeyLabel color={color} keyLabel={i + 1} isShade />
+              )}
             </button>
           ))}
         </div>

packages/excalidraw/components/ColorPicker/TopPicks.tsx

@@ -56,6 +56,7 @@ export const TopPicks = ({
           title={color}
           onClick={() => onChange(color)}
           data-testid={`color-top-pick-${color}`}
+          tabIndex={-1}
         >
           <div className="color-picker__button-outline" />
         </button>

packages/excalidraw/components/ColorPicker/colorPickerUtils.ts

@@ -1,7 +1,7 @@
 import type { ExcalidrawElement } from "../../element/types";
+import { atom } from "jotai";
 import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
 import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
-import { atom } from "../../editor-jotai";
 
 export const getColorNameAndShadeFromColor = ({
   palette,

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -36,7 +36,7 @@ import {
   getShortcutKey,
   isWritableElement,
 } from "../../utils";
-import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
+import { atom, useAtom } from "jotai";
 import { deburr } from "../../deburr";
 import type { MarkRequired } from "../../utility-types";
 import { InlineIcon } from "../InlineIcon";
@@ -48,6 +48,7 @@ import {
   actionLink,
   actionToggleSearchMenu,
 } from "../../actions";
+import { jotaiStore } from "../../jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import type { CommandPaletteItem } from "./types";
 import * as defaultItems from "./defaultCommandPaletteItems";
@@ -262,7 +263,6 @@ function CommandPaletteInner({
         actionManager.actions.cut,
         actionManager.actions.copy,
         actionManager.actions.deleteSelectedElements,
-        actionManager.actions.wrapSelectionInFrame,
         actionManager.actions.copyStyles,
         actionManager.actions.pasteStyles,
         actionManager.actions.bringToFront,
@@ -348,7 +348,7 @@ function CommandPaletteInner({
           keywords: ["delete", "destroy"],
           viewMode: false,
           perform: () => {
-            editorJotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
+            jotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
           },
         },
         {

packages/excalidraw/components/ConfirmDialog.tsx

@@ -5,9 +5,10 @@ import { Dialog } from "./Dialog";
 
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
+import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
 import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
-import { useSetAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
@@ -26,7 +27,7 @@ const ConfirmDialog = (props: Props) => {
     ...rest
   } = props;
   const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
   const { container } = useExcalidrawContainer();
 
   return (

packages/excalidraw/components/Dialog.tsx

@@ -11,8 +11,9 @@ import "./Dialog.scss";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { queryFocusableElements } from "../utils";
+import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
-import { useSetAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 import { t } from "../i18n";
 import { CloseIcon } from "./icons";
 
@@ -91,7 +92,7 @@ export const Dialog = (props: DialogProps) => {
   }, [islandNode, props.autofocus]);
 
   const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
 
   const onClose = () => {
     setAppState({ openMenu: null });

packages/excalidraw/components/EyeDropper.tsx

@@ -1,3 +1,4 @@
+import { atom } from "jotai";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { rgbToHex } from "../colors";
@@ -13,7 +14,6 @@ import { useStable } from "../hooks/useStable";
 import "./EyeDropper.scss";
 import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
 import type { ExcalidrawElement } from "../element/types";
-import { atom } from "../editor-jotai";
 
 export type EyeDropperProperties = {
   keepOpenOnAlt: boolean;

packages/excalidraw/components/FixedSideContainer.scss

@@ -15,6 +15,7 @@
     top: var(--editor-container-padding);
     right: var(--editor-container-padding);
     bottom: var(--editor-container-padding);
+    z-index: 2;
   }
 
   .FixedSideContainer_side_top.zen-mode {

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -250,6 +250,10 @@ export const FontPickerList = React.memo(
         onClose={onClose}
         onPointerLeave={onLeave}
         onKeyDown={onKeyDown}
+        onFocusOutside={(event) => {
+          // so we don't close when refocusing wysiwyg while editing
+          event.preventDefault();
+        }}
       >
         <QuickSearch
           ref={inputRef}

packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx

@@ -5,6 +5,7 @@ import { TextIcon } from "../icons";
 import type { FontFamilyValues } from "../../element/types";
 import { t } from "../../i18n";
 import { isDefaultFont } from "./FontPicker";
+import { CLASSES } from "../../constants";
 
 interface FontPickerTriggerProps {
   selectedFontFamily: FontFamilyValues | null;
@@ -26,7 +27,7 @@ export const FontPickerTrigger = ({
           standalone
           icon={TextIcon}
           title={t("labels.showFonts")}
-          className="properties-trigger"
+          className={CLASSES.PROPERTIES_POPOVER_TRIGGER}
           testId={"font-family-show-fonts"}
           active={isTriggerActive}
           // no-op

packages/excalidraw/components/IconPicker.scss

@@ -1,16 +1,19 @@
 @import "../css/variables.module.scss";
 
 .excalidraw {
+  .picker-container {
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 0.25rem;
+  }
+
   .picker {
-    padding: 0.5rem;
     background: var(--popup-bg-color);
     border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: var(--shadow-island);
+    // ˇˇ yeah, i dunno, open to suggestions here :D
+    box-shadow: rgb(0 0 0 / 25%) 2px 2px 4px 2px;
     border-radius: 4px;
     position: absolute;
-    :root[dir="rtl"] & {
-      padding: 0.4rem;
-    }
   }
 
   .picker-container button,
@@ -52,16 +55,47 @@
     padding: 0.25rem 0.28rem 0.35rem 0.25rem;
   }
 
-  .picker-content {
-    display: grid;
-    grid-template-columns: repeat(4, auto);
-    grid-gap: 0.5rem;
-    border-radius: 4px;
+  .picker-triangle {
+    width: 0;
+    height: 0;
+    position: relative;
+    top: -10px;
+    :root[dir="ltr"] & {
+      left: 12px;
+    }
+
+    :root[dir="rtl"] & {
+      right: 12px;
+    }
+    z-index: 10;
+
+    &:before {
+      content: "";
+      position: absolute;
+      border-style: solid;
+      border-width: 0 9px 10px;
+      border-color: transparent transparent transparentize($oc-black, 0.9);
+      top: -1px;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      border-style: solid;
+      border-width: 0 9px 10px;
+      border-color: transparent transparent var(--popup-bg-color);
+    }
   }
 
-  .picker-collapsible {
-    font-size: 0.75rem;
-    padding: 0.5rem 0;
+  .picker-content {
+    padding: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 0.5rem;
+    border-radius: 4px;
+    :root[dir="rtl"] & {
+      padding: 0.4rem;
+    }
   }
 
   .picker-keybinding {

packages/excalidraw/components/IconPicker.tsx

@@ -1,22 +1,10 @@
-import React, { useEffect } from "react";
-import * as Popover from "@radix-ui/react-popover";
-import { isArrowKey, KEYS } from "../keys";
-import { getLanguage, t } from "../i18n";
-import clsx from "clsx";
-import Collapsible from "./Stats/Collapsible";
-import { atom, useAtom } from "../editor-jotai";
-import { useDevice } from "..";
+import React from "react";
+import { Popover } from "./Popover";
 
 import "./IconPicker.scss";
-
-const moreOptionsAtom = atom(false);
-
-type Option<T> = {
-  value: T;
-  text: string;
-  icon: JSX.Element;
-  keyBinding: string | null;
-};
+import { isArrowKey, KEYS } from "../keys";
+import { getLanguage } from "../i18n";
+import clsx from "clsx";
 
 function Picker<T>({
   options,
@@ -24,16 +12,30 @@ function Picker<T>({
   label,
   onChange,
   onClose,
-  numberOfOptionsToAlwaysShow = options.length,
 }: {
   label: string;
   value: T;
-  options: readonly Option<T>[];
+  options: {
+    value: T;
+    text: string;
+    icon: JSX.Element;
+    keyBinding: string | null;
+  }[];
   onChange: (value: T) => void;
   onClose: () => void;
-  numberOfOptionsToAlwaysShow?: number;
 }) {
-  const device = useDevice();
+  const rFirstItem = React.useRef<HTMLButtonElement>();
+  const rActiveItem = React.useRef<HTMLButtonElement>();
+  const rGallery = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    // After the component is first mounted focus on first input
+    if (rActiveItem.current) {
+      rActiveItem.current.focus();
+    } else if (rGallery.current) {
+      rGallery.current.focus();
+    }
+  }, []);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     const pressedOption = options.find(
@@ -42,19 +44,28 @@ function Picker<T>({
 
     if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {
       // Keybinding navigation
-      onChange(pressedOption.value);
-
+      const index = options.indexOf(pressedOption);
+      (rGallery!.current!.children![index] as any).focus();
       event.preventDefault();
     } else if (event.key === KEYS.TAB) {
-      const index = options.findIndex((option) => option.value === value);
-      const nextIndex = event.shiftKey
-        ? (options.length + index - 1) % options.length
-        : (index + 1) % options.length;
-      onChange(options[nextIndex].value);
+      // Tab navigation cycle through options. If the user tabs
+      // away from the picker, close the picker. We need to use
+      // a timeout here to let the stack clear before checking.
+      setTimeout(() => {
+        const active = rActiveItem.current;
+        const docActive = document.activeElement;
+        if (active !== docActive) {
+          onClose();
+        }
+      }, 0);
     } else if (isArrowKey(event.key)) {
       // Arrow navigation
+      const { activeElement } = document;
       const isRTL = getLanguage().rtl;
-      const index = options.findIndex((option) => option.value === value);
+      const index = Array.prototype.indexOf.call(
+        rGallery!.current!.children,
+        activeElement,
+      );
       if (index !== -1) {
         const length = options.length;
         let nextIndex = index;
@@ -62,26 +73,19 @@ function Picker<T>({
         switch (event.key) {
           // Select the next option
           case isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT:
+          case KEYS.ARROW_DOWN: {
             nextIndex = (index + 1) % length;
             break;
+          }
           // Select the previous option
           case isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT:
-            nextIndex = (length + index - 1) % length;
-            break;
-          // Go the next row
-          case KEYS.ARROW_DOWN: {
-            nextIndex = (index + (numberOfOptionsToAlwaysShow ?? 1)) % length;
-            break;
-          }
-          // Go the previous row
           case KEYS.ARROW_UP: {
-            nextIndex =
-              (length + index - (numberOfOptionsToAlwaysShow ?? 1)) % length;
+            nextIndex = (length + index - 1) % length;
             break;
           }
         }
 
-        onChange(options[nextIndex].value);
+        (rGallery.current!.children![nextIndex] as any).focus();
       }
       event.preventDefault();
     } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
@@ -93,26 +97,15 @@ function Picker<T>({
     event.stopPropagation();
   };
 
-  const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
-
-  const alwaysVisibleOptions = React.useMemo(
-    () => options.slice(0, numberOfOptionsToAlwaysShow),
-    [options, numberOfOptionsToAlwaysShow],
-  );
-  const moreOptions = React.useMemo(
-    () => options.slice(numberOfOptionsToAlwaysShow),
-    [options, numberOfOptionsToAlwaysShow],
-  );
-
-  useEffect(() => {
-    if (!alwaysVisibleOptions.some((option) => option.value === value)) {
-      setShowMoreOptions(true);
-    }
-  }, [value, alwaysVisibleOptions, setShowMoreOptions]);
-
-  const renderOptions = (options: Option<T>[]) => {
-    return (
-      <div className="picker-content">
+  return (
+    <div
+      className={`picker`}
+      role="dialog"
+      aria-modal="true"
+      aria-label={label}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="picker-content" ref={rGallery}>
         {options.map((option, i) => (
           <button
             type="button"
@@ -120,6 +113,7 @@ function Picker<T>({
               active: value === option.value,
             })}
             onClick={(event) => {
+              (event.currentTarget as HTMLButtonElement).focus();
               onChange(option.value);
             }}
             title={`${option.text} ${
@@ -128,13 +122,16 @@ function Picker<T>({
             aria-label={option.text || "none"}
             aria-keyshortcuts={option.keyBinding || undefined}
             key={option.text}
-            ref={(ref) => {
-              if (value === option.value) {
-                // Use a timeout here to render focus properly
-                setTimeout(() => {
-                  ref?.focus();
-                }, 0);
+            ref={(el) => {
+              if (el && i === 0) {
+                rFirstItem.current = el;
               }
+              if (el && option.value === value) {
+                rActiveItem.current = el;
+              }
+            }}
+            onFocus={() => {
+              onChange(option.value);
             }}
           >
             {option.icon}
@@ -144,43 +141,7 @@ function Picker<T>({
           </button>
         ))}
       </div>
-    );
-  };
-
-  return (
-    <Popover.Content
-      side={
-        device.editor.isMobile && !device.viewport.isLandscape
-          ? "top"
-          : "bottom"
-      }
-      align="start"
-      sideOffset={12}
-      style={{ zIndex: "var(--zIndex-popup)" }}
-      onKeyDown={handleKeyDown}
-    >
-      <div
-        className={`picker`}
-        role="dialog"
-        aria-modal="true"
-        aria-label={label}
-      >
-        {renderOptions(alwaysVisibleOptions)}
-
-        {moreOptions.length > 0 && (
-          <Collapsible
-            label={t("labels.more_options")}
-            open={showMoreOptions}
-            openTrigger={() => {
-              setShowMoreOptions((value) => !value);
-            }}
-            className="picker-collapsible"
-          >
-            {renderOptions(moreOptions)}
-          </Collapsible>
-        )}
-      </div>
-    </Popover.Content>
+    </div>
   );
 }
 
@@ -190,7 +151,6 @@ export function IconPicker<T>({
   options,
   onChange,
   group = "",
-  numberOfOptionsToAlwaysShow,
 }: {
   label: string;
   value: T;
@@ -199,40 +159,51 @@ export function IconPicker<T>({
     text: string;
     icon: JSX.Element;
     keyBinding: string | null;
+    showInPicker?: boolean;
   }[];
   onChange: (value: T) => void;
-  numberOfOptionsToAlwaysShow?: number;
   group?: string;
 }) {
   const [isActive, setActive] = React.useState(false);
   const rPickerButton = React.useRef<any>(null);
+  const isRTL = getLanguage().rtl;
 
   return (
     <div>
-      <Popover.Root open={isActive} onOpenChange={(open) => setActive(open)}>
-        <Popover.Trigger
-          name={group}
-          type="button"
-          aria-label={label}
-          onClick={() => setActive(!isActive)}
-          ref={rPickerButton}
-          className={isActive ? "active" : ""}
-        >
-          {options.find((option) => option.value === value)?.icon}
-        </Popover.Trigger>
-        {isActive && (
-          <Picker
-            options={options}
-            value={value}
-            label={label}
-            onChange={onChange}
-            onClose={() => {
-              setActive(false);
-            }}
-            numberOfOptionsToAlwaysShow={numberOfOptionsToAlwaysShow}
-          />
-        )}
-      </Popover.Root>
+      <button
+        name={group}
+        type="button"
+        className={isActive ? "active" : ""}
+        aria-label={label}
+        onClick={() => setActive(!isActive)}
+        ref={rPickerButton}
+      >
+        {options.find((option) => option.value === value)?.icon}
+      </button>
+      <React.Suspense fallback="">
+        {isActive ? (
+          <>
+            <Popover
+              onCloseRequest={(event) =>
+                event.target !== rPickerButton.current && setActive(false)
+              }
+              {...(isRTL ? { right: 5.5 } : { left: -5.5 })}
+            >
+              <Picker
+                options={options.filter((opt) => opt.showInPicker !== false)}
+                value={value}
+                label={label}
+                onChange={onChange}
+                onClose={() => {
+                  setActive(false);
+                  rPickerButton.current?.focus();
+                }}
+              />
+            </Popover>
+            <div className="picker-triangle" />
+          </>
+        ) : null}
+      </React.Suspense>
     </div>
   );
 }

packages/excalidraw/components/LayerUI.tsx

@@ -41,7 +41,8 @@ import { trackEvent } from "../analytics";
 import { useDevice } from "./App";
 import Footer from "./footer/Footer";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
-import { useAtom, useAtomValue } from "../editor-jotai";
+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";
@@ -147,9 +148,10 @@ const LayerUI = ({
   const device = useDevice();
   const tunnels = useInitializeTunnels();
 
-  const TunnelsJotaiProvider = tunnels.tunnelsJotai.Provider;
-
-  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -219,7 +221,6 @@ const LayerUI = ({
           appState={appState}
           elementsMap={app.scene.getNonDeletedElementsMap()}
           renderAction={actionManager.renderAction}
-          app={app}
         />
       </Island>
     </Section>
@@ -381,7 +382,7 @@ const LayerUI = ({
     );
   };
 
-  const isSidebarDocked = useAtomValue(isSidebarDockedAtom);
+  const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
 
   const layerUIJSX = (
     <>
@@ -565,11 +566,11 @@ const LayerUI = ({
 
   return (
     <UIAppStateContext.Provider value={appState}>
-      <TunnelsJotaiProvider>
+      <Provider scope={tunnels.jotaiScope}>
         <TunnelsContext.Provider value={tunnels}>
           {layerUIJSX}
         </TunnelsContext.Provider>
-      </TunnelsJotaiProvider>
+      </Provider>
     </UIAppStateContext.Provider>
   );
 };

packages/excalidraw/components/LibraryMenu.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useCallback,
-  useMemo,
-  useRef,
-  useEffect,
-} from "react";
+import React, { useState, useCallback, useMemo, useRef } from "react";
 import type Library from "../data/library";
 import {
   distributeLibraryItemsOnSquareGrid,
@@ -20,7 +14,8 @@ import type {
 } from "../types";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { trackEvent } from "../analytics";
-import { atom, useAtom } from "../editor-jotai";
+import { atom, useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
 import {
   useApp,
@@ -66,7 +61,7 @@ export const LibraryMenuContent = ({
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
-  const [libraryItemsData] = useAtom(libraryItemsAtom);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
 
   const _onAddToLibrary = useCallback(
     (elements: LibraryItem["elements"]) => {
@@ -156,40 +151,27 @@ const usePendingElementsMemo = (
   appState: UIAppState,
   elements: readonly NonDeletedExcalidrawElement[],
 ) => {
-  const create = useCallback(
-    (appState: UIAppState, elements: readonly NonDeletedExcalidrawElement[]) =>
-      getSelectedElements(elements, appState, {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      }),
-    [],
-  );
-
-  const val = useRef(create(appState, elements));
+  const create = () =>
+    getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
+  const val = useRef(create());
   const prevAppState = useRef<UIAppState>(appState);
   const prevElements = useRef(elements);
 
-  const update = useCallback(() => {
-    if (
-      !isShallowEqual(
-        appState.selectedElementIds,
-        prevAppState.current.selectedElementIds,
-      ) ||
-      !isShallowEqual(elements, prevElements.current)
-    ) {
-      val.current = create(appState, elements);
-      prevAppState.current = appState;
-      prevElements.current = elements;
-    }
-  }, [create, appState, elements]);
-
-  return useMemo(
-    () => ({
-      update,
-      value: val.current,
-    }),
-    [update, val],
-  );
+  if (
+    !isShallowEqual(
+      appState.selectedElementIds,
+      prevAppState.current.selectedElementIds,
+    ) ||
+    !isShallowEqual(elements, prevElements.current)
+  ) {
+    val.current = create();
+    prevAppState.current = appState;
+    prevElements.current = elements;
+  }
+  return val.current;
 };
 
 /**
@@ -200,7 +182,6 @@ export const LibraryMenu = () => {
   const { library, id, onInsertElements } = useApp();
   const appProps = useAppProps();
   const appState = useUIAppState();
-  const app = useApp();
   const setAppState = useExcalidrawSetAppState();
   const elements = useExcalidrawElements();
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
@@ -223,13 +204,9 @@ export const LibraryMenu = () => {
     });
   }, [setAppState]);
 
-  useEffect(() => {
-    return app.onPointerUpEmitter.on(() => pendingElements.update());
-  }, [app, pendingElements]);
-
   return (
     <LibraryMenuContent
-      pendingElements={pendingElements.value}
+      pendingElements={pendingElements}
       onInsertLibraryItems={onInsertLibraryItems}
       onAddToLibrary={deselectItems}
       setAppState={setAppState}

packages/excalidraw/components/LibraryMenuHeaderContent.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { t } from "../i18n";
 import Trans from "./Trans";
-import { useAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 import type { LibraryItem, LibraryItems, UIAppState } from "../types";
 import { useApp, useExcalidrawSetAppState } from "./App";
 import { saveLibraryAsJSON } from "../data/json";
@@ -17,6 +17,7 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
+import { useAtom } from "jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
@@ -50,9 +51,10 @@ export const LibraryDropdownMenuButton: React.FC<{
   appState,
   className,
 }) => {
-  const [libraryItemsData] = useAtom(libraryItemsAtom);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
   const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
     isLibraryMenuOpenAtom,
+    jotaiScope,
   );
 
   const renderRemoveLibAlert = () => {
@@ -284,7 +286,7 @@ export const LibraryDropdownMenu = ({
   const appState = useUIAppState();
   const setAppState = useExcalidrawSetAppState();
 
-  const [libraryItemsData] = useAtom(libraryItemsAtom);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
 
   const removeFromLibrary = async (libraryItems: LibraryItems) => {
     const nextItems = libraryItems.filter(

packages/excalidraw/components/LibraryUnit.scss

@@ -63,6 +63,27 @@
     max-width: 100%;
   }
 
+  .library-unit__checkbox-container,
+  .library-unit__checkbox-container:hover,
+  .library-unit__checkbox-container:active {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--icon-fill-color);
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0.5rem;
+    position: absolute;
+    left: 2rem;
+    bottom: 2rem;
+    cursor: pointer;
+
+    input {
+      cursor: pointer;
+    }
+  }
+
   .library-unit__checkbox {
     position: absolute;
     top: 0.125rem;
@@ -70,7 +91,7 @@
     margin: 0;
 
     .Checkbox-box {
-      margin: 0 !important;
+      margin: 0;
       width: 1rem;
       height: 1rem;
       border-radius: 4px;

packages/excalidraw/components/MobileMenu.tsx

@@ -179,7 +179,6 @@ export const MobileMenu = ({
                 appState={appState}
                 elementsMap={app.scene.getNonDeletedElementsMap()}
                 renderAction={actionManager.renderAction}
-                app={app}
               />
             </Section>
           ) : null}

packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { useAtom } from "jotai";
 
 import { useTunnels } from "../../context/tunnels";
-import { useAtom } from "../../editor-jotai";
+import { jotaiScope } from "../../jotai";
 import { Dialog } from "../Dialog";
 import { withInternalFallback } from "../hoc/withInternalFallback";
 import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
@@ -22,6 +23,7 @@ const OverwriteConfirmDialog = Object.assign(
       const { OverwriteConfirmDialogTunnel } = useTunnels();
       const [overwriteConfirmState, setState] = useAtom(
         overwriteConfirmStateAtom,
+        jotaiScope,
       );
 
       if (!overwriteConfirmState.active) {

packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.ts

@@ -1,4 +1,5 @@
-import { atom, editorJotaiStore } from "../../editor-jotai";
+import { atom } from "jotai";
+import { jotaiStore } from "../../jotai";
 import type React from "react";
 
 export type OverwriteConfirmState =
@@ -31,7 +32,7 @@ export async function openConfirmModal({
   color: "danger" | "warning";
 }) {
   return new Promise<boolean>((resolve) => {
-    editorJotaiStore.set(overwriteConfirmStateAtom, {
+    jotaiStore.set(overwriteConfirmStateAtom, {
       active: true,
       onConfirm: () => resolve(true),
       onClose: () => resolve(false),

packages/excalidraw/components/PropertiesPopover.tsx

@@ -5,6 +5,7 @@ import * as Popover from "@radix-ui/react-popover";
 import { useDevice } from "./App";
 import { Island } from "./Island";
 import { isInteractive } from "../utils";
+import { CLASSES } from "../constants";
 
 interface PropertiesPopoverProps {
   className?: string;
@@ -42,7 +43,11 @@ export const PropertiesPopover = React.forwardRef<
       <Popover.Portal container={container}>
         <Popover.Content
           ref={ref}
-          className={clsx("focus-visible-none", className)}
+          className={clsx(
+            "focus-visible-none",
+            CLASSES.PROPERTIES_POPOVER,
+            className,
+          )}
           data-prevent-outside-click
           side={
             device.editor.isMobile && !device.viewport.isLandscape

packages/excalidraw/components/Range.scss

@@ -1,59 +0,0 @@
-@import "../css/variables.module.scss";
-
-.excalidraw {
-  --Range-track-background: var(--button-bg);
-  --Range-track-background-active: var(--color-primary);
-  --Range-thumb-background: var(--color-on-surface);
-  --Range-legend-color: var(--text-primary-color);
-
-  .range-wrapper {
-    position: relative;
-    padding-top: 10px;
-    padding-bottom: 30px;
-  }
-
-  .range-input {
-    width: 100%;
-    height: 4px;
-    -webkit-appearance: none;
-    background: var(--Range-track-background);
-    border-radius: 2px;
-    outline: none;
-  }
-
-  .range-input::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    background: var(--Range-thumb-background);
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-  }
-
-  .range-input::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: var(--Range-thumb-background);
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-  }
-
-  .value-bubble {
-    position: absolute;
-    bottom: 0;
-    transform: translateX(-50%);
-    font-size: 12px;
-    color: var(--Range-legend-color);
-  }
-
-  .zero-label {
-    position: absolute;
-    bottom: 0;
-    left: 4px;
-    font-size: 12px;
-    color: var(--Range-legend-color);
-  }
-}

packages/excalidraw/components/Range.tsx

@@ -1,65 +0,0 @@
-import React, { useEffect } from "react";
-import { getFormValue } from "../actions/actionProperties";
-import { t } from "../i18n";
-import "./Range.scss";
-
-export type RangeProps = {
-  updateData: (value: number) => void;
-  appState: any;
-  elements: any;
-  testId?: string;
-};
-
-export const Range = ({
-  updateData,
-  appState,
-  elements,
-  testId,
-}: RangeProps) => {
-  const rangeRef = React.useRef<HTMLInputElement>(null);
-  const valueRef = React.useRef<HTMLDivElement>(null);
-  const value = getFormValue(
-    elements,
-    appState,
-    (element) => element.opacity,
-    true,
-    appState.currentItemOpacity,
-  );
-  useEffect(() => {
-    if (rangeRef.current && valueRef.current) {
-      const rangeElement = rangeRef.current;
-      const valueElement = valueRef.current;
-      const inputWidth = rangeElement.offsetWidth;
-      const thumbWidth = 15; // 15 is the width of the thumb
-      const position =
-        (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
-      valueElement.style.left = `${position}px`;
-      rangeElement.style.background = `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
-    }
-  }, [value]);
-
-  return (
-    <label className="control-label">
-      {t("labels.opacity")}
-      <div className="range-wrapper">
-        <input
-          ref={rangeRef}
-          type="range"
-          min="0"
-          max="100"
-          step="10"
-          onChange={(event) => {
-            updateData(+event.target.value);
-          }}
-          value={value}
-          className="range-input"
-          data-testid={testId}
-        />
-        <div className="value-bubble" ref={valueRef}>
-          {value !== 0 ? value : null}
-        </div>
-        <div className="zero-label">0</div>
-      </div>
-    </label>
-  );
-};

packages/excalidraw/components/SearchMenu.tsx

@@ -11,7 +11,8 @@ import { measureText } from "../element/textElement";
 import { addEventListener, getFontString } from "../utils";
 import { KEYS } from "../keys";
 import clsx from "clsx";
-import { atom, useAtom } from "../editor-jotai";
+import { atom, useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
 import { t } from "../i18n";
 import { isElementCompletelyInViewport } from "../element/sizeHelpers";
 import { randomInteger } from "../random";
@@ -57,7 +58,7 @@ export const SearchMenu = () => {
 
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const [inputValue, setInputValue] = useAtom(searchQueryAtom);
+  const [inputValue, setInputValue] = useAtom(searchQueryAtom, jotaiScope);
   const searchQuery = inputValue.trim() as SearchQuery;
 
   const [isSearching, setIsSearching] = useState(false);
@@ -69,7 +70,10 @@ export const SearchMenu = () => {
   const searchedQueryRef = useRef<SearchQuery | null>(null);
   const lastSceneNonceRef = useRef<number | undefined>(undefined);
 
-  const [focusIndex, setFocusIndex] = useAtom(searchItemInFocusAtom);
+  const [focusIndex, setFocusIndex] = useAtom(
+    searchItemInFocusAtom,
+    jotaiScope,
+  );
   const elementsMap = app.scene.getNonDeletedElementsMap();
 
   useEffect(() => {

packages/excalidraw/components/Sidebar/Sidebar.tsx

@@ -8,7 +8,8 @@ import React, {
   useCallback,
 } from "react";
 import { Island } from "../Island";
-import { atom, useSetAtom } from "../../editor-jotai";
+import { atom, useSetAtom } from "jotai";
+import { jotaiScope } from "../../jotai";
 import type { SidebarProps, SidebarPropsContextValue } from "./common";
 import { SidebarPropsContext } from "./common";
 import { SidebarHeader } from "./SidebarHeader";
@@ -57,7 +58,7 @@ export const SidebarInner = forwardRef(
 
     const setAppState = useExcalidrawSetAppState();
 
-    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom);
+    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
 
     useLayoutEffect(() => {
       setIsSidebarDockedAtom(!!docked);

packages/excalidraw/components/Stats/Collapsible.tsx

@@ -9,7 +9,6 @@ interface CollapsibleProps {
   open: boolean;
   openTrigger: () => void;
   children: React.ReactNode;
-  className?: string;
 }
 
 const Collapsible = ({
@@ -17,7 +16,6 @@ const Collapsible = ({
   open,
   openTrigger,
   children,
-  className,
 }: CollapsibleProps) => {
   return (
     <>
@@ -28,7 +26,6 @@ const Collapsible = ({
           justifyContent: "space-between",
           alignItems: "center",
         }}
-        className={className}
         onClick={openTrigger}
       >
         {label}

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -237,7 +237,6 @@ const MultiPosition = ({
           const [x1, y1] = getCommonBounds(elementsInUnit);
           return Math.round((property === "x" ? x1 : y1) * 100) / 100;
         }
-
         const [el] = elementsInUnit;
         const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
 

packages/excalidraw/components/Stats/index.tsx

@@ -31,7 +31,6 @@ import "./Stats.scss";
 import { isGridModeEnabled } from "../../snapping";
 import { getUncroppedWidthAndHeight } from "../../element/cropElement";
 import { round } from "../../../math";
-import { frameAndChildrenSelectedTogether } from "../../frame";
 
 interface StatsProps {
   app: AppClassProperties;
@@ -171,10 +170,6 @@ export const StatsInner = memo(
       return getAtomicUnits(selectedElements, appState);
     }, [selectedElements, appState]);
 
-    const _frameAndChildrenSelectedTogether = useMemo(() => {
-      return frameAndChildrenSelectedTogether(selectedElements);
-    }, [selectedElements]);
-
     return (
       <div className="exc-stats">
         <Island padding={3}>
@@ -231,7 +226,7 @@ export const StatsInner = memo(
             {renderCustomStats?.(elements, appState)}
           </Collapsible>
 
-          {!_frameAndChildrenSelectedTogether && selectedElements.length > 0 && (
+          {selectedElements.length > 0 && (
             <div
               id="elementStats"
               style={{

packages/excalidraw/components/TTDDialog/TTDDialog.tsx

@@ -25,7 +25,7 @@ import type { BinaryFiles } from "../../types";
 import { ArrowRightIcon } from "../icons";
 
 import "./TTDDialog.scss";
-import { atom, useAtom } from "../../editor-jotai";
+import { atom, useAtom } from "jotai";
 import { trackEvent } from "../../analytics";
 import { InlineIcon } from "../InlineIcon";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";

packages/excalidraw/components/ToolButton.tsx

@@ -55,152 +55,146 @@ type ToolButtonProps =
       onPointerDown?(data: { pointerType: PointerType }): void;
     });
 
-export const ToolButton = React.forwardRef(
-  (
-    {
-      size = "medium",
-      visible = true,
-      className = "",
-      ...props
-    }: ToolButtonProps,
-    ref,
-  ) => {
-    const { id: excalId } = useExcalidrawContainer();
-    const innerRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => innerRef.current);
-    const sizeCn = `ToolIcon_size_${size}`;
+export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
+  const { id: excalId } = useExcalidrawContainer();
+  const innerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => innerRef.current);
+  const sizeCn = `ToolIcon_size_${props.size}`;
 
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-    const isMountedRef = useRef(true);
+  const isMountedRef = useRef(true);
 
-    const onClick = async (event: React.MouseEvent) => {
-      const ret = "onClick" in props && props.onClick?.(event);
+  const onClick = async (event: React.MouseEvent) => {
+    const ret = "onClick" in props && props.onClick?.(event);
 
-      if (isPromiseLike(ret)) {
-        try {
-          setIsLoading(true);
-          await ret;
-        } catch (error: any) {
-          if (!(error instanceof AbortError)) {
-            throw error;
-          } else {
-            console.warn(error);
-          }
-        } finally {
-          if (isMountedRef.current) {
-            setIsLoading(false);
-          }
+    if (isPromiseLike(ret)) {
+      try {
+        setIsLoading(true);
+        await ret;
+      } catch (error: any) {
+        if (!(error instanceof AbortError)) {
+          throw error;
+        } else {
+          console.warn(error);
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
         }
       }
-    };
-
-    useEffect(() => {
-      isMountedRef.current = true;
-      return () => {
-        isMountedRef.current = false;
-      };
-    }, []);
-
-    const lastPointerTypeRef = useRef<PointerType | null>(null);
-
-    if (
-      props.type === "button" ||
-      props.type === "icon" ||
-      props.type === "submit"
-    ) {
-      const type = (props.type === "icon" ? "button" : props.type) as
-        | "button"
-        | "submit";
-      return (
-        <button
-          className={clsx(
-            "ToolIcon_type_button",
-            sizeCn,
-            className,
-            visible && !props.hidden
-              ? "ToolIcon_type_button--show"
-              : "ToolIcon_type_button--hide",
-            {
-              ToolIcon: !props.hidden,
-              "ToolIcon--selected": props.selected,
-              "ToolIcon--plain": props.type === "icon",
-            },
-          )}
-          style={props.style}
-          data-testid={props["data-testid"]}
-          hidden={props.hidden}
-          title={props.title}
-          aria-label={props["aria-label"]}
-          type={type}
-          onClick={onClick}
-          ref={innerRef}
-          disabled={isLoading || props.isLoading || !!props.disabled}
-        >
-          {(props.icon || props.label) && (
-            <div
-              className="ToolIcon__icon"
-              aria-hidden="true"
-              aria-disabled={!!props.disabled}
-            >
-              {props.icon || props.label}
-              {props.keyBindingLabel && (
-                <span className="ToolIcon__keybinding">
-                  {props.keyBindingLabel}
-                </span>
-              )}
-              {props.isLoading && <Spinner />}
-            </div>
-          )}
-          {props.showAriaLabel && (
-            <div className="ToolIcon__label">
-              {props["aria-label"]} {isLoading && <Spinner />}
-            </div>
-          )}
-          {props.children}
-        </button>
-      );
     }
+  };
 
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const lastPointerTypeRef = useRef<PointerType | null>(null);
+
+  if (
+    props.type === "button" ||
+    props.type === "icon" ||
+    props.type === "submit"
+  ) {
+    const type = (props.type === "icon" ? "button" : props.type) as
+      | "button"
+      | "submit";
     return (
-      <label
-        className={clsx("ToolIcon", className)}
+      <button
+        className={clsx(
+          "ToolIcon_type_button",
+          sizeCn,
+          props.className,
+          props.visible && !props.hidden
+            ? "ToolIcon_type_button--show"
+            : "ToolIcon_type_button--hide",
+          {
+            ToolIcon: !props.hidden,
+            "ToolIcon--selected": props.selected,
+            "ToolIcon--plain": props.type === "icon",
+          },
+        )}
+        style={props.style}
+        data-testid={props["data-testid"]}
+        hidden={props.hidden}
         title={props.title}
-        onPointerDown={(event) => {
-          lastPointerTypeRef.current = event.pointerType || null;
-          props.onPointerDown?.({ pointerType: event.pointerType || null });
-        }}
-        onPointerUp={() => {
-          requestAnimationFrame(() => {
-            lastPointerTypeRef.current = null;
-          });
-        }}
+        aria-label={props["aria-label"]}
+        type={type}
+        onClick={onClick}
+        ref={innerRef}
+        disabled={isLoading || props.isLoading || !!props.disabled}
       >
-        <input
-          className={`ToolIcon_type_radio ${sizeCn}`}
-          type="radio"
-          name={props.name}
-          aria-label={props["aria-label"]}
-          aria-keyshortcuts={props["aria-keyshortcuts"]}
-          data-testid={props["data-testid"]}
-          id={`${excalId}-${props.id}`}
-          onChange={() => {
-            props.onChange?.({ pointerType: lastPointerTypeRef.current });
-          }}
-          checked={props.checked}
-          ref={innerRef}
-        />
-        <div className="ToolIcon__icon">
-          {props.icon}
-          {props.keyBindingLabel && (
-            <span className="ToolIcon__keybinding">
-              {props.keyBindingLabel}
-            </span>
-          )}
-        </div>
-      </label>
+        {(props.icon || props.label) && (
+          <div
+            className="ToolIcon__icon"
+            aria-hidden="true"
+            aria-disabled={!!props.disabled}
+          >
+            {props.icon || props.label}
+            {props.keyBindingLabel && (
+              <span className="ToolIcon__keybinding">
+                {props.keyBindingLabel}
+              </span>
+            )}
+            {props.isLoading && <Spinner />}
+          </div>
+        )}
+        {props.showAriaLabel && (
+          <div className="ToolIcon__label">
+            {props["aria-label"]} {isLoading && <Spinner />}
+          </div>
+        )}
+        {props.children}
+      </button>
     );
-  },
-);
+  }
+
+  return (
+    <label
+      className={clsx("ToolIcon", props.className)}
+      title={props.title}
+      onPointerDown={(event) => {
+        lastPointerTypeRef.current = event.pointerType || null;
+        props.onPointerDown?.({ pointerType: event.pointerType || null });
+      }}
+      onPointerUp={() => {
+        requestAnimationFrame(() => {
+          lastPointerTypeRef.current = null;
+        });
+      }}
+    >
+      <input
+        className={`ToolIcon_type_radio ${sizeCn}`}
+        type="radio"
+        name={props.name}
+        aria-label={props["aria-label"]}
+        aria-keyshortcuts={props["aria-keyshortcuts"]}
+        data-testid={props["data-testid"]}
+        id={`${excalId}-${props.id}`}
+        onChange={() => {
+          props.onChange?.({ pointerType: lastPointerTypeRef.current });
+        }}
+        checked={props.checked}
+        ref={innerRef}
+      />
+      <div className="ToolIcon__icon">
+        {props.icon}
+        {props.keyBindingLabel && (
+          <span className="ToolIcon__keybinding">{props.keyBindingLabel}</span>
+        )}
+      </div>
+    </label>
+  );
+});
+
+ToolButton.defaultProps = {
+  visible: true,
+  className: "",
+  size: "medium",
+};
 
 ToolButton.displayName = "ToolButton";

packages/excalidraw/components/Trans.test.tsx

@@ -4,7 +4,6 @@ import fallbackLangData from "../locales/en.json";
 
 import Trans from "./Trans";
 import type { TranslationKeys } from "../i18n";
-import { EditorJotaiProvider } from "../editor-jotai";
 
 describe("Test <Trans/>", () => {
   it("should translate the the strings correctly", () => {
@@ -18,7 +17,7 @@ describe("Test <Trans/>", () => {
     };
 
     const { getByTestId } = render(
-      <EditorJotaiProvider>
+      <>
         <div data-testid="test1">
           <Trans
             i18nKey={"transTest.key1" as unknown as TranslationKeys}
@@ -52,7 +51,7 @@ describe("Test <Trans/>", () => {
             connect-link={(el) => <a href="https://example.com">{el}</a>}
           />
         </div>
-      </EditorJotaiProvider>,
+      </>,
     );
 
     expect(getByTestId("test1").innerHTML).toEqual("Hello world");

packages/excalidraw/components/hoc/withInternalFallback.tsx

@@ -1,6 +1,6 @@
+import { atom, useAtom } from "jotai";
 import React, { useLayoutEffect, useRef } from "react";
 import { useTunnels } from "../../context/tunnels";
-import { atom } from "../../editor-jotai";
 
 export const withInternalFallback = <P,>(
   componentName: string,
@@ -13,11 +13,9 @@ export const withInternalFallback = <P,>(
       __fallback?: boolean;
     }
   > = (props) => {
-    const {
-      tunnelsJotai: { useAtom },
-    } = useTunnels();
+    const { jotaiScope } = useTunnels();
     // for rerenders
-    const [, setCounter] = useAtom(renderAtom);
+    const [, setCounter] = useAtom(renderAtom, jotaiScope);
     // for initial & subsequent renders. Tracked as component state
     // due to excalidraw multi-instance scanerios.
     const metaRef = useRef({

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -171,17 +171,15 @@ export const Hyperlink = ({
   }, [handleSubmit]);
 
   useEffect(() => {
+    let timeoutId: number | null = null;
+
     if (
-      isEditing &&
-      inputRef?.current &&
+      inputRef &&
+      inputRef.current &&
       !(device.viewport.isMobile || device.isTouchScreen)
     ) {
       inputRef.current.select();
     }
-  }, [isEditing, device.viewport.isMobile, device.isTouchScreen]);
-
-  useEffect(() => {
-    let timeoutId: number | null = null;
 
     const handlePointerMove = (event: PointerEvent) => {
       if (isEditing) {
@@ -209,7 +207,15 @@ export const Hyperlink = ({
         clearTimeout(timeoutId);
       }
     };
-  }, [appState, element, isEditing, setAppState, elementsMap]);
+  }, [
+    appState,
+    element,
+    isEditing,
+    setAppState,
+    elementsMap,
+    device.viewport.isMobile,
+    device.isTouchScreen,
+  ]);
 
   const handleRemove = useCallback(() => {
     trackEvent("hyperlink", "delete");

packages/excalidraw/components/icons.tsx

@@ -1352,54 +1352,6 @@ export const ArrowheadDiamondOutlineIcon = React.memo(
     ),
 );
 
-export const ArrowheadCrowfootIcon = React.memo(
-  ({ flip = false }: { flip?: boolean }) =>
-    createIcon(
-      <g
-        stroke="currentColor"
-        fill="none"
-        transform={flip ? "" : "translate(40, 0) scale(-1, 1)"}
-        strokeLinejoin="round"
-        strokeWidth={2}
-      >
-        <path d="M34,10 H6 M15,10 L7,5 M15,10 L7,15" />
-      </g>,
-      { width: 40, height: 20 },
-    ),
-);
-
-export const ArrowheadCrowfootOneIcon = React.memo(
-  ({ flip = false }: { flip?: boolean }) =>
-    createIcon(
-      <g
-        stroke="currentColor"
-        fill="none"
-        transform={flip ? "" : "translate(40, 0) scale(-1, 1)"}
-        strokeLinejoin="round"
-        strokeWidth={2}
-      >
-        <path d="M34,10 H6 M15,10 L15,15 L15,5" />
-      </g>,
-      { width: 40, height: 20 },
-    ),
-);
-
-export const ArrowheadCrowfootOneOrManyIcon = React.memo(
-  ({ flip = false }: { flip?: boolean }) =>
-    createIcon(
-      <g
-        stroke="currentColor"
-        fill="none"
-        transform={flip ? "" : "translate(40, 0) scale(-1, 1)"}
-        strokeLinejoin="round"
-        strokeWidth={2}
-      >
-        <path d="M34,10 H6 M15,10 L15,16 L15,4 M15,10 L7,5 M15,10 L7,15" />
-      </g>,
-      { width: 40, height: 20 },
-    ),
-);
-
 export const FontSizeSmallIcon = createIcon(
   <>
     <g clipPath="url(#a)">

packages/excalidraw/components/main-menu/DefaultItems.tsx

@@ -32,8 +32,9 @@ import {
   actionToggleTheme,
 } from "../../actions";
 import clsx from "clsx";
+import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
-import { useSetAtom } from "../../editor-jotai";
+import { jotaiScope } from "../../jotai";
 import { useUIAppState } from "../../context/ui-appState";
 import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
 import Trans from "../Trans";
@@ -188,7 +189,10 @@ Help.displayName = "Help";
 export const ClearCanvas = () => {
   const { t } = useI18n();
 
-  const setActiveConfirmDialog = useSetAtom(activeConfirmDialogAtom);
+  const setActiveConfirmDialog = useSetAtom(
+    activeConfirmDialogAtom,
+    jotaiScope,
+  );
   const actionManager = useExcalidrawActionManager();
 
   if (!actionManager.isActionEnabled(actionClearCanvas)) {

packages/excalidraw/components/welcome-screen/WelcomeScreen.scss

@@ -1,6 +1,6 @@
 .excalidraw {
   .excalifont {
-    font-family: "Excalifont", "Xiaolai";
+    font-family: "Excalifont";
   }
 
   // WelcomeSreen common

packages/excalidraw/constants.ts

@@ -115,6 +115,8 @@ export const CLASSES = {
   SHAPE_ACTIONS_MENU: "App-menu__left",
   ZOOM_ACTIONS: "zoom-actions",
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
+  PROPERTIES_POPOVER: "properties-popover",
+  PROPERTIES_POPOVER_TRIGGER: "properties-popover-trigger",
 };
 
 export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";

packages/excalidraw/context/tunnels.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import tunnel from "tunnel-rat";
-import { createIsolation } from "jotai-scope";
 
 export type Tunnel = ReturnType<typeof tunnel>;
 
@@ -15,17 +14,13 @@ type TunnelsContextValue = {
   DefaultSidebarTabTriggersTunnel: Tunnel;
   OverwriteConfirmDialogTunnel: Tunnel;
   TTDDialogTriggerTunnel: Tunnel;
-  // this can be removed once we create jotai stores per each editor
-  // instance
-  tunnelsJotai: ReturnType<typeof createIsolation>;
+  jotaiScope: symbol;
 };
 
 export const TunnelsContext = React.createContext<TunnelsContextValue>(null!);
 
 export const useTunnels = () => React.useContext(TunnelsContext);
 
-const tunnelsJotai = createIsolation();
-
 export const useInitializeTunnels = () => {
   return React.useMemo((): TunnelsContextValue => {
     return {
@@ -39,7 +34,7 @@ export const useInitializeTunnels = () => {
       DefaultSidebarTabTriggersTunnel: tunnel(),
       OverwriteConfirmDialogTunnel: tunnel(),
       TTDDialogTriggerTunnel: tunnel(),
-      tunnelsJotai,
+      jotaiScope: Symbol(),
     };
   }, []);
 };

packages/excalidraw/css/styles.scss

@@ -759,3 +759,8 @@ body.excalidraw-cursor-resize * {
     font-family: "Assistant";
   }
 }
+
+.excalidraw-textEditorContainer {
+  position: fixed;
+  z-index: var(--zIndex-wysiwyg);
+}

packages/excalidraw/css/theme.scss

@@ -32,7 +32,6 @@
     0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
     0px 7px 14px 0px rgba(0, 0, 0, 0.05);
 
-  --button-bg: var(--color-surface-mid);
   --button-hover-bg: var(--color-surface-high);
   --button-active-bg: var(--color-surface-high);
   --button-active-border: var(--color-brand-active);
@@ -172,8 +171,6 @@
     --button-destructive-bg-color: #5a0000;
     --button-destructive-color: #{$oc-red-3};
 
-    --button-bg: var(--color-surface-high);
-
     --button-gray-1: #363636;
     --button-gray-2: #272727;
     --button-gray-3: #222;

packages/excalidraw/data/__snapshots__/transform.test.ts.snap

@@ -95,7 +95,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
-  "height": 35,
+  "height": 33.519031369643244,
   "id": Any<String>,
   "index": "a2",
   "isDeleted": false,
@@ -109,8 +109,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
       0.5,
     ],
     [
-      394.5,
-      34.5,
+      382.47606040672997,
+      34.019031369643244,
     ],
   ],
   "roughness": 1,
@@ -128,9 +128,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 4,
+  "version": 7,
   "versionNonce": Any<Number>,
-  "width": 395,
+  "width": 381.97606040672997,
   "x": 247,
   "y": 420,
 }
@@ -167,7 +167,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
       0,
     ],
     [
-      399.5,
+      389.5,
       0,
     ],
   ],
@@ -186,10 +186,10 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 4,
+  "version": 6,
   "versionNonce": Any<Number>,
-  "width": 400,
-  "x": 227,
+  "width": 390,
+  "x": 237,
   "y": 450,
 }
 `;
@@ -319,7 +319,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "verticalAlign": "top",
   "width": 100,
   "x": 560,
-  "y": 226.5,
+  "y": 236.95454545454544,
 }
 `;
 
@@ -339,13 +339,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "endBinding": {
     "elementId": "text-2",
     "fixedPoint": null,
-    "focus": 0,
+    "focus": 1.625925925925924,
     "gap": 14,
   },
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
-  "height": 0,
+  "height": 18.278619528619487,
   "id": Any<String>,
   "index": "a2",
   "isDeleted": false,
@@ -356,11 +356,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "points": [
     [
       0.5,
-      0,
+      -0.5,
     ],
     [
-      99.5,
-      0,
+      357.2037037037038,
+      -17.778619528619487,
     ],
   ],
   "roughness": 1,
@@ -378,11 +378,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 4,
+  "version": 6,
   "versionNonce": Any<Number>,
-  "width": 100,
-  "x": 255,
-  "y": 239,
+  "width": 357.7037037037038,
+  "x": 171,
+  "y": 249.45454545454544,
 }
 `;
 
@@ -482,7 +482,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 4,
+  "version": 6,
   "versionNonce": Any<Number>,
   "width": 100,
   "x": 255,
@@ -660,7 +660,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 4,
+  "version": 6,
   "versionNonce": Any<Number>,
   "width": 100,
   "x": 255,
@@ -1505,7 +1505,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
       0,
     ],
     [
-      272.485,
+      270.98528125,
       0,
     ],
   ],
@@ -1526,10 +1526,10 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 4,
+  "version": 7,
   "versionNonce": Any<Number>,
-  "width": 272.985,
-  "x": 111.262,
+  "width": 270.48528125,
+  "x": 112.76171875,
   "y": 57,
 }
 `;
@@ -1587,11 +1587,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 4,
+  "version": 6,
   "versionNonce": Any<Number>,
   "width": 0,
-  "x": 77.017,
-  "y": 79,
+  "x": 83.015625,
+  "y": 81.5,
 }
 `;
 

packages/excalidraw/data/blob.ts

@@ -5,7 +5,6 @@ import { clearElementsForExport } from "../element";
 import type { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError, ImageSceneDataError } from "../errors";
 import { calculateScrollCenter } from "../scene";
-import { decodeSvgBase64Payload } from "../scene/export";
 import type { AppState, DataURL, LibraryItem } from "../types";
 import type { ValueOf } from "../utility-types";
 import { bytesToHexString, isPromiseLike } from "../utils";
@@ -48,7 +47,7 @@ const parseFileContents = async (blob: Blob | File): Promise<string> => {
     }
     if (blob.type === MIME_TYPES.svg) {
       try {
-        return decodeSvgBase64Payload({
+        return (await import("./image")).decodeSvgMetadata({
           svg: contents,
         });
       } catch (error: any) {

packages/excalidraw/data/filesystem.ts

@@ -82,7 +82,6 @@ export const fileSave = (
     name: string;
     /** file extension */
     extension: FILE_EXTENSION;
-    mimeTypes?: string[];
     description: string;
     /** existing FileSystemHandle */
     fileHandle?: FileSystemHandle | null;
@@ -94,11 +93,10 @@ export const fileSave = (
       fileName: `${opts.name}.${opts.extension}`,
       description: opts.description,
       extensions: [`.${opts.extension}`],
-      mimeTypes: opts.mimeTypes,
     },
     opts.fileHandle,
   );
 };
 
-export { nativeFileSystemSupported };
 export type { FileSystemHandle };
+export { nativeFileSystemSupported };

packages/excalidraw/data/image.ts

@@ -1,7 +1,7 @@
 import decodePng from "png-chunks-extract";
 import tEXt from "png-chunk-text";
 import encodePng from "png-chunks-encode";
-import { encode, decode } from "./encode";
+import { stringToBase64, encode, decode, base64ToString } from "./encode";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
 import { blobToArrayBuffer } from "./blob";
 
@@ -67,3 +67,56 @@ export const decodePngMetadata = async (blob: Blob) => {
   }
   throw new Error("INVALID");
 };
+
+// -----------------------------------------------------------------------------
+// SVG
+// -----------------------------------------------------------------------------
+
+export const encodeSvgMetadata = ({ text }: { text: string }) => {
+  const base64 = stringToBase64(
+    JSON.stringify(encode({ text })),
+    true /* is already byte string */,
+  );
+
+  let metadata = "";
+  metadata += `<!-- payload-type:${MIME_TYPES.excalidraw} -->`;
+  metadata += `<!-- payload-version:2 -->`;
+  metadata += "<!-- payload-start -->";
+  metadata += base64;
+  metadata += "<!-- payload-end -->";
+  return metadata;
+};
+
+export const decodeSvgMetadata = ({ svg }: { svg: string }) => {
+  if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
+    const match = svg.match(
+      /<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/,
+    );
+    if (!match) {
+      throw new Error("INVALID");
+    }
+    const versionMatch = svg.match(/<!-- payload-version:(\d+) -->/);
+    const version = versionMatch?.[1] || "1";
+    const isByteString = version !== "1";
+
+    try {
+      const json = base64ToString(match[1], isByteString);
+      const encodedData = JSON.parse(json);
+      if (!("encoded" in encodedData)) {
+        // legacy, un-encoded scene JSON
+        if (
+          "type" in encodedData &&
+          encodedData.type === EXPORT_DATA_TYPES.excalidraw
+        ) {
+          return json;
+        }
+        throw new Error("FAILED");
+      }
+      return decode(encodedData);
+    } catch (error: any) {
+      console.error(error);
+      throw new Error("FAILED");
+    }
+  }
+  throw new Error("INVALID");
+};

packages/excalidraw/data/index.ts

@@ -5,7 +5,6 @@ import {
 import {
   DEFAULT_EXPORT_PADDING,
   DEFAULT_FILENAME,
-  IMAGE_MIME_TYPES,
   isFirefox,
   MIME_TYPES,
 } from "../constants";
@@ -16,9 +15,8 @@ import type {
   ExcalidrawFrameLikeElement,
   NonDeletedExcalidrawElement,
 } from "../element/types";
-import { getElementsOverlappingFrame } from "../frame";
 import { t } from "../i18n";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected, getSelectedElements } from "../scene";
 import { exportToCanvas, exportToSvg } from "../scene/export";
 import type { ExportType } from "../scene/types";
 import type { AppState, BinaryFiles } from "../types";
@@ -27,6 +25,7 @@ import { canvasToBlob } from "./blob";
 import type { FileSystemHandle } from "./filesystem";
 import { fileSave } from "./filesystem";
 import { serializeAsJSON } from "./json";
+import { getElementsOverlappingFrame } from "../frame";
 
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
@@ -131,7 +130,6 @@ export const exportCanvas = async (
           description: "Export to SVG",
           name,
           extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
-          mimeTypes: [IMAGE_MIME_TYPES.svg],
           fileHandle,
         },
       );
@@ -170,8 +168,9 @@ export const exportCanvas = async (
     return fileSave(blob, {
       description: "Export to PNG",
       name,
-      extension: appState.exportEmbedScene ? "excalidraw.png" : "png",
-      mimeTypes: [IMAGE_MIME_TYPES.png],
+      // FIXME reintroduce `excalidraw.png` when most people upgrade away
+      // from 111.0.5563.64 (arm64), see #6349
+      extension: /* appState.exportEmbedScene ? "excalidraw.png" : */ "png",
       fileHandle,
     });
   } else if (type === "clipboard") {

packages/excalidraw/data/library.test.ts

@@ -1,105 +0,0 @@
-import { validateLibraryUrl } from "./library";
-
-describe("validateLibraryUrl", () => {
-  it("should validate hostname & pathname", () => {
-    // valid hostnames
-    // -------------------------------------------------------------------------
-    expect(
-      validateLibraryUrl("https://www.excalidraw.com", ["excalidraw.com"]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com", ["excalidraw.com"]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://library.excalidraw.com", ["excalidraw.com"]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://library.excalidraw.com", [
-        "library.excalidraw.com",
-      ]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com/", ["excalidraw.com/"]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com", ["excalidraw.com/"]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com/", ["excalidraw.com"]),
-    ).toBe(true);
-
-    // valid pathnames
-    // -------------------------------------------------------------------------
-    expect(
-      validateLibraryUrl("https://excalidraw.com/path", ["excalidraw.com"]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com/path/", ["excalidraw.com"]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com/specific/path", [
-        "excalidraw.com/specific/path",
-      ]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com/specific/path/", [
-        "excalidraw.com/specific/path",
-      ]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com/specific/path", [
-        "excalidraw.com/specific/path/",
-      ]),
-    ).toBe(true);
-    expect(
-      validateLibraryUrl("https://excalidraw.com/specific/path/other", [
-        "excalidraw.com/specific/path",
-      ]),
-    ).toBe(true);
-
-    // invalid hostnames
-    // -------------------------------------------------------------------------
-    expect(() =>
-      validateLibraryUrl("https://xexcalidraw.com", ["excalidraw.com"]),
-    ).toThrow();
-    expect(() =>
-      validateLibraryUrl("https://x-excalidraw.com", ["excalidraw.com"]),
-    ).toThrow();
-    expect(() =>
-      validateLibraryUrl("https://excalidraw.comx", ["excalidraw.com"]),
-    ).toThrow();
-    expect(() =>
-      validateLibraryUrl("https://excalidraw.comx", ["excalidraw.com"]),
-    ).toThrow();
-    expect(() =>
-      validateLibraryUrl("https://excalidraw.com.mx", ["excalidraw.com"]),
-    ).toThrow();
-    // protocol must be https
-    expect(() =>
-      validateLibraryUrl("http://excalidraw.com.mx", ["excalidraw.com"]),
-    ).toThrow();
-
-    // invalid pathnames
-    // -------------------------------------------------------------------------
-    expect(() =>
-      validateLibraryUrl("https://excalidraw.com/specific/other/path", [
-        "excalidraw.com/specific/path",
-      ]),
-    ).toThrow();
-    expect(() =>
-      validateLibraryUrl("https://excalidraw.com/specific/paths", [
-        "excalidraw.com/specific/path",
-      ]),
-    ).toThrow();
-    expect(() =>
-      validateLibraryUrl("https://excalidraw.com/specific/path-s", [
-        "excalidraw.com/specific/path",
-      ]),
-    ).toThrow();
-    expect(() =>
-      validateLibraryUrl("https://excalidraw.com/some/specific/path", [
-        "excalidraw.com/specific/path",
-      ]),
-    ).toThrow();
-  });
-});

packages/excalidraw/data/library.ts

@@ -8,7 +8,8 @@ import type {
 } from "../types";
 import { restoreLibraryItems } from "./restore";
 import type App from "../components/App";
-import { atom, editorJotaiStore } from "../editor-jotai";
+import { atom } from "jotai";
+import { jotaiStore } from "../jotai";
 import type { ExcalidrawElement } from "../element/types";
 import { getCommonBoundingBox } from "../element/bounds";
 import { AbortError } from "../errors";
@@ -34,20 +35,6 @@ import type { MaybePromise } from "../utility-types";
 import { Emitter } from "../emitter";
 import { Queue } from "../queue";
 import { hashElementsVersion, hashString } from "../element";
-import { toValidURL } from "./url";
-
-/**
- * format: hostname or hostname/pathname
- *
- * Both hostname and pathname are matched partially,
- * hostname from the end, pathname from the start, with subdomain/path
- * boundaries
- **/
-const ALLOWED_LIBRARY_URLS = [
-  "excalidraw.com",
-  // when installing from github PRs
-  "raw.githubusercontent.com/excalidraw/excalidraw-libraries",
-];
 
 type LibraryUpdate = {
   /** deleted library items since last onLibraryChange event */
@@ -201,13 +188,13 @@ class Library {
 
   private notifyListeners = () => {
     if (this.updateQueue.length > 0) {
-      editorJotaiStore.set(libraryItemsAtom, (s) => ({
+      jotaiStore.set(libraryItemsAtom, (s) => ({
         status: "loading",
         libraryItems: this.currLibraryItems,
         isInitialized: s.isInitialized,
       }));
     } else {
-      editorJotaiStore.set(libraryItemsAtom, {
+      jotaiStore.set(libraryItemsAtom, {
         status: "loaded",
         libraryItems: this.currLibraryItems,
         isInitialized: true,
@@ -235,7 +222,7 @@ class Library {
   destroy = () => {
     this.updateQueue = [];
     this.currLibraryItems = [];
-    editorJotaiStore.set(libraryItemSvgsCache, new Map());
+    jotaiStore.set(libraryItemSvgsCache, new Map());
     // TODO uncomment after/if we make jotai store scoped to each excal instance
     // jotaiStore.set(libraryItemsAtom, {
     //   status: "loading",
@@ -480,39 +467,6 @@ export const distributeLibraryItemsOnSquareGrid = (
   return resElements;
 };
 
-export const validateLibraryUrl = (
-  libraryUrl: string,
-  /**
-   * @returns `true` if the URL is valid, throws otherwise.
-   */
-  validator:
-    | ((libraryUrl: string) => boolean)
-    | string[] = ALLOWED_LIBRARY_URLS,
-): true => {
-  if (
-    typeof validator === "function"
-      ? validator(libraryUrl)
-      : validator.some((allowedUrlDef) => {
-          const allowedUrl = new URL(
-            `https://${allowedUrlDef.replace(/^https?:\/\//, "")}`,
-          );
-
-          const { hostname, pathname } = new URL(libraryUrl);
-
-          return (
-            new RegExp(`(^|\\.)${allowedUrl.hostname}$`).test(hostname) &&
-            new RegExp(
-              `^${allowedUrl.pathname.replace(/\/+$/, "")}(/+|$)`,
-            ).test(pathname)
-          );
-        })
-  ) {
-    return true;
-  }
-
-  throw new Error(`Invalid or disallowed library URL: "${libraryUrl}"`);
-};
-
 export const parseLibraryTokensFromUrl = () => {
   const libraryUrl =
     // current
@@ -654,11 +608,6 @@ const persistLibraryUpdate = async (
 export const useHandleLibrary = (
   opts: {
     excalidrawAPI: ExcalidrawImperativeAPI | null;
-    /**
-     * Return `true` if the library install url should be allowed.
-     * If not supplied, only the excalidraw.com base domain is allowed.
-     */
-    validateLibraryUrl?: (libraryUrl: string) => boolean;
   } & (
     | {
         /** @deprecated we recommend using `opts.adapter` instead */
@@ -701,13 +650,7 @@ export const useHandleLibrary = (
     }) => {
       const libraryPromise = new Promise<Blob>(async (resolve, reject) => {
         try {
-          libraryUrl = decodeURIComponent(libraryUrl);
-
-          libraryUrl = toValidURL(libraryUrl);
-
-          validateLibraryUrl(libraryUrl, optsRef.current.validateLibraryUrl);
-
-          const request = await fetch(libraryUrl);
+          const request = await fetch(decodeURIComponent(libraryUrl));
           const blob = await request.blob();
           resolve(blob);
         } catch (error: any) {
@@ -735,12 +678,7 @@ export const useHandleLibrary = (
           defaultStatus: "published",
           openLibraryMenu: true,
         });
-      } catch (error: any) {
-        excalidrawAPI.updateScene({
-          appState: {
-            errorMessage: error.message,
-          },
-        });
+      } catch (error) {
         throw error;
       } finally {
         if (window.location.hash.includes(URL_HASH_KEYS.addLibrary)) {

packages/excalidraw/data/restore.ts

@@ -1,6 +1,5 @@
 import type {
   ExcalidrawArrowElement,
-  ExcalidrawElbowArrowElement,
   ExcalidrawElement,
   ExcalidrawElementType,
   ExcalidrawLinearElement,
@@ -102,38 +101,23 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
   return DEFAULT_FONT_FAMILY;
 };
 
-const repairBinding = <T extends ExcalidrawLinearElement>(
-  element: T,
+const repairBinding = (
+  element: ExcalidrawLinearElement,
   binding: PointBinding | FixedPointBinding | null,
-): T extends ExcalidrawElbowArrowElement
-  ? FixedPointBinding | null
-  : PointBinding | FixedPointBinding | null => {
+): PointBinding | FixedPointBinding | null => {
   if (!binding) {
     return null;
   }
 
-  const focus = binding.focus || 0;
-
-  if (isElbowArrow(element)) {
-    const fixedPointBinding:
-      | ExcalidrawElbowArrowElement["startBinding"]
-      | ExcalidrawElbowArrowElement["endBinding"] = isFixedPointBinding(binding)
-      ? {
-          ...binding,
-          focus,
-          fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
-        }
-      : null;
-
-    return fixedPointBinding;
-  }
-
   return {
     ...binding,
-    focus,
-  } as T extends ExcalidrawElbowArrowElement
-    ? FixedPointBinding | null
-    : PointBinding | FixedPointBinding | null;
+    focus: binding.focus || 0,
+    ...(isElbowArrow(element) && isFixedPointBinding(binding)
+      ? {
+          fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
+        }
+      : {}),
+  };
 };
 
 const restoreElementWithProperties = <
@@ -324,7 +308,8 @@ const restoreElement = (
         ({ points, x, y } = LinearElementEditor.getNormalizedPoints(element));
       }
 
-      const base = {
+      // TODO: Separate arrow from linear element
+      return restoreElementWithProperties(element as ExcalidrawArrowElement, {
         type: element.type,
         startBinding: repairBinding(element, element.startBinding),
         endBinding: repairBinding(element, element.endBinding),
@@ -336,20 +321,7 @@ const restoreElement = (
         y,
         elbowed: (element as ExcalidrawArrowElement).elbowed,
         ...getSizeFromPoints(points),
-      } as const;
-
-      // TODO: Separate arrow from linear element
-      return isElbowArrow(element)
-        ? restoreElementWithProperties(element as ExcalidrawElbowArrowElement, {
-            ...base,
-            elbowed: true,
-            startBinding: repairBinding(element, element.startBinding),
-            endBinding: repairBinding(element, element.endBinding),
-            fixedSegments: element.fixedSegments,
-            startIsSpecial: element.startIsSpecial,
-            endIsSpecial: element.endIsSpecial,
-          })
-        : restoreElementWithProperties(element as ExcalidrawArrowElement, base);
+      });
     }
 
     // generic elements

packages/excalidraw/data/url.test.tsx

@@ -26,6 +26,5 @@ describe("normalizeLink", () => {
     expect(normalizeLink("[test](https://test)")).toBe("[test](https://test)");
     expect(normalizeLink("[[test]]")).toBe("[[test]]");
     expect(normalizeLink("<test>")).toBe("<test>");
-    expect(normalizeLink("test&")).toBe("test&");
   });
 });

packages/excalidraw/data/url.ts

@@ -1,12 +1,15 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
-import { escapeDoubleQuotes } from "../utils";
+
+export const sanitizeHTMLAttribute = (html: string) => {
+  return html.replace(/"/g, """);
+};
 
 export const normalizeLink = (link: string) => {
   link = link.trim();
   if (!link) {
     return link;
   }
-  return sanitizeUrl(escapeDoubleQuotes(link));
+  return sanitizeUrl(sanitizeHTMLAttribute(link));
 };
 
 export const isLocalLink = (link: string | null) => {

packages/excalidraw/editor-jotai.ts

@@ -1,13 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { atom, createStore, type PrimitiveAtom } from "jotai";
-import { createIsolation } from "jotai-scope";
-
-const jotai = createIsolation();
-
-export { atom, PrimitiveAtom };
-export const { useAtom, useSetAtom, useAtomValue, useStore } = jotai;
-export const EditorJotaiProvider: ReturnType<
-  typeof createIsolation
->["Provider"] = jotai.Provider;
-
-export const editorJotaiStore: ReturnType<typeof createStore> = createStore();

packages/excalidraw/element/binding.ts

@@ -40,7 +40,6 @@ import {
   isBoundToContainer,
   isElbowArrow,
   isFixedPointBinding,
-  isFrameLikeElement,
   isLinearElement,
   isRectangularElement,
   isTextElement,
@@ -504,6 +503,12 @@ export const bindLinearElement = (
       }),
     });
   }
+
+  // update bound elements to make sure the binding tips are in sync with
+  // the normalized gap from above
+  if (!isElbowArrow(linearElement)) {
+    updateBoundElements(hoveredElement, elementsMap);
+  }
 };
 
 // Don't bind both ends of a simple segment
@@ -570,7 +575,7 @@ export const getHoveredElementForBinding = (
         zoom,
         // disable fullshape snapping for frame elements so we
         // can bind to frame children
-        fullShape && !isFrameLikeElement(element),
+        fullShape,
       ),
   );
 
@@ -623,9 +628,11 @@ export const updateBoundElements = (
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: { width: number; height: number };
     changedElements?: Map<string, OrderedExcalidrawElement>;
+    zoom?: AppState["zoom"];
   },
 ) => {
-  const { newSize, simultaneouslyUpdated } = options ?? {};
+  const { newSize, simultaneouslyUpdated, changedElements, zoom } =
+    options ?? {};
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
@@ -659,7 +666,7 @@ export const updateBoundElements = (
 
     // `linearElement` is being moved/scaled already, just update the binding
     if (simultaneouslyUpdatedElementIds.has(element.id)) {
-      mutateElement(element, bindings, true);
+      mutateElement(element, bindings);
       return;
     }
 
@@ -701,14 +708,23 @@ export const updateBoundElements = (
       }> => update !== null,
     );
 
-    LinearElementEditor.movePoints(element, updates, {
-      ...(changedElement.id === element.startBinding?.elementId
-        ? { startBinding: bindings.startBinding }
-        : {}),
-      ...(changedElement.id === element.endBinding?.elementId
-        ? { endBinding: bindings.endBinding }
-        : {}),
-    });
+    LinearElementEditor.movePoints(
+      element,
+      updates,
+      elementsMap,
+      {
+        ...(changedElement.id === element.startBinding?.elementId
+          ? { startBinding: bindings.startBinding }
+          : {}),
+        ...(changedElement.id === element.endBinding?.elementId
+          ? { endBinding: bindings.endBinding }
+          : {}),
+      },
+      {
+        changedElements,
+        zoom,
+      },
+    );
 
     const boundText = getBoundTextElement(element, elementsMap);
     if (boundText && !boundText.isDeleted) {
@@ -767,7 +783,9 @@ export const getHeadingForElbowArrowSnap = (
     );
   }
 
-  return headingForPointFromElement(bindableElement, aabb, p);
+  const pointHeading = headingForPointFromElement(bindableElement, aabb, p);
+
+  return pointHeading;
 };
 
 const getDistanceForBinding = (
@@ -2270,7 +2288,7 @@ export const getGlobalFixedPointForBindableElement = (
   );
 };
 
-export const getGlobalFixedPoints = (
+const getGlobalFixedPoints = (
   arrow: ExcalidrawElbowArrowElement,
   elementsMap: ElementsMap,
 ): [GlobalPoint, GlobalPoint] => {

packages/excalidraw/element/bounds.ts

@@ -556,10 +556,6 @@ export const getArrowheadSize = (arrowhead: Arrowhead): number => {
     case "diamond":
     case "diamond_outline":
       return 12;
-    case "crowfoot_many":
-    case "crowfoot_one":
-    case "crowfoot_one_or_many":
-      return 20;
     default:
       return 15;
   }
@@ -673,21 +669,6 @@ export const getArrowheadPoints = (
 
   const angle = getArrowheadAngle(arrowhead);
 
-  if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
-    // swap (xs, ys) with (x2, y2)
-    const [x3, y3] = pointRotateRads(
-      pointFrom(x2, y2),
-      pointFrom(xs, ys),
-      degreesToRadians(-angle as Degrees),
-    );
-    const [x4, y4] = pointRotateRads(
-      pointFrom(x2, y2),
-      pointFrom(xs, ys),
-      degreesToRadians(angle),
-    );
-    return [xs, ys, x3, y3, x4, y4];
-  }
-
   // Return points
   const [x3, y3] = pointRotateRads(
     pointFrom(xs, ys),

packages/excalidraw/element/dragElements.ts

@@ -42,20 +42,9 @@ export const dragSelectedElements = (
     return;
   }
 
-  const selectedElements = _selectedElements.filter((element) => {
-    if (isElbowArrow(element) && element.startBinding && element.endBinding) {
-      const startElement = _selectedElements.find(
-        (el) => el.id === element.startBinding?.elementId,
-      );
-      const endElement = _selectedElements.find(
-        (el) => el.id === element.endBinding?.elementId,
-      );
-
-      return startElement && endElement;
-    }
-
-    return true;
-  });
+  const selectedElements = _selectedElements.filter(
+    (el) => !(isElbowArrow(el) && el.startBinding && el.endBinding),
+  );
 
   // 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
@@ -89,8 +78,10 @@ export const dragSelectedElements = (
 
   elementsToUpdate.forEach((element) => {
     updateElementCoords(pointerDownState, element, adjustedOffset);
-    if (!isArrowElement(element)) {
+    if (
       // skip arrow labels since we calculate its position during render
+      !isArrowElement(element)
+    ) {
       const textElement = getBoundTextElement(
         element,
         scene.getNonDeletedElementsMap(),
@@ -98,10 +89,10 @@ export const dragSelectedElements = (
       if (textElement) {
         updateElementCoords(pointerDownState, textElement, adjustedOffset);
       }
-      updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
-        simultaneouslyUpdated: Array.from(elementsToUpdate),
-      });
     }
+    updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
+      simultaneouslyUpdated: Array.from(elementsToUpdate),
+    });
   });
 };
 

packages/excalidraw/element/embeddable.ts

@@ -1,7 +1,7 @@
 import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
 import type { ExcalidrawProps } from "../types";
-import { escapeDoubleQuotes, getFontString, updateActiveTool } from "../utils";
+import { getFontString, updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { wrapText } from "./textWrapping";
@@ -11,6 +11,7 @@ import type {
   ExcalidrawIframeLikeElement,
   IframeData,
 } from "./types";
+import { sanitizeHTMLAttribute } from "../data/url";
 import type { MarkRequired } from "../utility-types";
 import { StoreAction } from "../store";
 
@@ -208,7 +209,7 @@ export const getEmbedLink = (
     // Note that we don't attempt to parse the username as it can consist of
     // non-latin1 characters, and the username in the url can be set to anything
     // without affecting the embed.
-    const safeURL = escapeDoubleQuotes(
+    const safeURL = sanitizeHTMLAttribute(
       `https://twitter.com/x/status/${postId}`,
     );
 
@@ -227,7 +228,7 @@ export const getEmbedLink = (
 
   if (RE_REDDIT.test(link)) {
     const [, page, postId, title] = link.match(RE_REDDIT)!;
-    const safeURL = escapeDoubleQuotes(
+    const safeURL = sanitizeHTMLAttribute(
       `https://reddit.com/r/${page}/comments/${postId}/${title}`,
     );
     const ret: IframeDataWithSandbox = {
@@ -245,7 +246,7 @@ export const getEmbedLink = (
 
   if (RE_GH_GIST.test(link)) {
     const [, user, gistId] = link.match(RE_GH_GIST)!;
-    const safeURL = escapeDoubleQuotes(
+    const safeURL = sanitizeHTMLAttribute(
       `https://gist.github.com/${user}/${gistId}`,
     );
     const ret: IframeDataWithSandbox = {

packages/excalidraw/element/flowchart.ts

@@ -254,9 +254,6 @@ const addNewNode = (
     backgroundColor: element.backgroundColor,
     strokeColor: element.strokeColor,
     strokeWidth: element.strokeWidth,
-    opacity: element.opacity,
-    fillStyle: element.fillStyle,
-    strokeStyle: element.strokeStyle,
   });
 
   invariant(
@@ -332,9 +329,6 @@ export const addNewNodes = (
       backgroundColor: startNode.backgroundColor,
       strokeColor: startNode.strokeColor,
       strokeWidth: startNode.strokeWidth,
-      opacity: startNode.opacity,
-      fillStyle: startNode.fillStyle,
-      strokeStyle: startNode.strokeStyle,
     });
 
     invariant(
@@ -422,13 +416,11 @@ const createBindingArrow = (
     type: "arrow",
     x: startX,
     y: startY,
-    startArrowhead: null,
+    startArrowhead: appState.currentItemStartArrowhead,
     endArrowhead: appState.currentItemEndArrowhead,
-    strokeColor: startBindingElement.strokeColor,
-    strokeStyle: startBindingElement.strokeStyle,
-    strokeWidth: startBindingElement.strokeWidth,
-    opacity: startBindingElement.opacity,
-    roughness: startBindingElement.roughness,
+    strokeColor: appState.currentItemStrokeColor,
+    strokeStyle: appState.currentItemStrokeStyle,
+    strokeWidth: appState.currentItemStrokeWidth,
     points: [pointFrom(0, 0), pointFrom(endX, endY)],
     elbowed: true,
   });
@@ -460,12 +452,20 @@ const createBindingArrow = (
     bindingArrow as OrderedExcalidrawElement,
   );
 
-  LinearElementEditor.movePoints(bindingArrow, [
+  LinearElementEditor.movePoints(
+    bindingArrow,
+    [
+      {
+        index: 1,
+        point: bindingArrow.points[1],
+      },
+    ],
+    elementsMap as NonDeletedSceneElementsMap,
+    undefined,
     {
-      index: 1,
-      point: bindingArrow.points[1],
+      changedElements,
     },
-  ]);
+  );
 
   return bindingArrow;
 };

packages/excalidraw/element/heading.ts

@@ -11,7 +11,6 @@ import {
   pointScaleFromOrigin,
   radiansToDegrees,
   triangleIncludesPoint,
-  vectorFromPoint,
 } from "../../math";
 import { getCenterForBounds, type Bounds } from "./bounds";
 import type { ExcalidrawBindableElement } from "./types";
@@ -53,24 +52,9 @@ export const vectorToHeading = (vec: Vector): Heading => {
   return HEADING_UP;
 };
 
-export const headingForPoint = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  o: P,
-) => vectorToHeading(vectorFromPoint<P>(p, o));
-
-export const headingForPointIsHorizontal = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  o: P,
-) => headingIsHorizontal(headingForPoint<P>(p, o));
-
 export const compareHeading = (a: Heading, b: Heading) =>
   a[0] === b[0] && a[1] === b[1];
 
-export const headingIsHorizontal = (a: Heading) =>
-  compareHeading(a, HEADING_RIGHT) || compareHeading(a, HEADING_LEFT);
-
-export const headingIsVertical = (a: Heading) => !headingIsHorizontal(a);
-
 // Gets the heading for the point by creating a bounding box around the rotated
 // close fitting bounding box, then creating 4 search cones around the center of
 // the external bbox.
@@ -79,7 +63,7 @@ export const headingForPointFromElement = <
 >(
   element: Readonly<ExcalidrawBindableElement>,
   aabb: Readonly<Bounds>,
-  p: Readonly<Point>,
+  p: Readonly<LocalPoint | GlobalPoint>,
 ): Heading => {
   const SEARCH_CONE_MULTIPLIER = 2;
 
@@ -133,22 +117,14 @@ export const headingForPointFromElement = <
       element.angle,
     );
 
-    if (
-      triangleIncludesPoint<Point>([top, right, midPoint] as Triangle<Point>, p)
-    ) {
+    if (triangleIncludesPoint([top, right, midPoint] as Triangle<Point>, p)) {
       return headingForDiamond(top, right);
     } else if (
-      triangleIncludesPoint<Point>(
-        [right, bottom, midPoint] as Triangle<Point>,
-        p,
-      )
+      triangleIncludesPoint([right, bottom, midPoint] as Triangle<Point>, p)
     ) {
       return headingForDiamond(right, bottom);
     } else if (
-      triangleIncludesPoint<Point>(
-        [bottom, left, midPoint] as Triangle<Point>,
-        p,
-      )
+      triangleIncludesPoint([bottom, left, midPoint] as Triangle<Point>, p)
     ) {
       return headingForDiamond(bottom, left);
     }
@@ -177,17 +153,17 @@ export const headingForPointFromElement = <
     SEARCH_CONE_MULTIPLIER,
   ) as Point;
 
-  return triangleIncludesPoint<Point>(
+  return triangleIncludesPoint(
     [topLeft, topRight, midPoint] as Triangle<Point>,
     p,
   )
     ? HEADING_UP
-    : triangleIncludesPoint<Point>(
+    : triangleIncludesPoint(
         [topRight, bottomRight, midPoint] as Triangle<Point>,
         p,
       )
     ? HEADING_RIGHT
-    : triangleIncludesPoint<Point>(
+    : triangleIncludesPoint(
         [bottomRight, bottomLeft, midPoint] as Triangle<Point>,
         p,
       )

packages/excalidraw/element/linearElementEditor.ts

@@ -7,10 +7,9 @@ import type {
   ExcalidrawTextElementWithContainer,
   ElementsMap,
   NonDeletedSceneElementsMap,
+  OrderedExcalidrawElement,
   FixedPointBinding,
   SceneElementsMap,
-  FixedSegment,
-  ExcalidrawElbowArrowElement,
 } from "./types";
 import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
 import type { Bounds } from "./bounds";
@@ -25,7 +24,6 @@ import type {
   InteractiveCanvasAppState,
   AppClassProperties,
   NullableGridSize,
-  Zoom,
 } from "../types";
 import { mutateElement } from "./mutateElement";
 
@@ -34,7 +32,7 @@ import {
   getHoveredElementForBinding,
   isBindingEnabled,
 } from "./binding";
-import { invariant, tupleToCoors } from "../utils";
+import { invariant, toBrandedType, tupleToCoors } from "../utils";
 import {
   isBindingElement,
   isElbowArrow,
@@ -46,6 +44,7 @@ import { DRAGGING_THRESHOLD } from "../constants";
 import type { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
 import type { Store } from "../store";
+import { mutateElbowArrow } from "./routing";
 import type Scene from "../scene/Scene";
 import type { Radians } from "../../math";
 import {
@@ -57,8 +56,6 @@ import {
   type GlobalPoint,
   type LocalPoint,
   pointDistance,
-  pointTranslate,
-  vectorFromPoint,
 } from "../../math";
 import {
   getBezierCurveLength,
@@ -68,7 +65,6 @@ import {
   mapIntervalToBezierT,
 } from "../shapes";
 import { getGridPoint } from "../snapping";
-import { headingIsHorizontal, vectorToHeading } from "./heading";
 
 const editorMidPointsCache: {
   version: number | null;
@@ -148,13 +144,13 @@ export class LinearElementEditor {
    * @param id the `elementId` from the instance of this class (so that we can
    *  statically guarantee this method returns an ExcalidrawLinearElement)
    */
-  static getElement<T extends ExcalidrawLinearElement>(
+  static getElement(
     id: InstanceType<typeof LinearElementEditor>["elementId"],
     elementsMap: ElementsMap,
-  ): T | null {
+  ) {
     const element = elementsMap.get(id);
     if (element) {
-      return element as NonDeleted<T>;
+      return element as NonDeleted<ExcalidrawLinearElement>;
     }
     return null;
   }
@@ -295,16 +291,20 @@ export class LinearElementEditor {
           event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         );
 
-        LinearElementEditor.movePoints(element, [
-          {
-            index: selectedIndex,
-            point: pointFrom(
-              width + referencePoint[0],
-              height + referencePoint[1],
-            ),
-            isDragging: selectedIndex === lastClickedPoint,
-          },
-        ]);
+        LinearElementEditor.movePoints(
+          element,
+          [
+            {
+              index: selectedIndex,
+              point: pointFrom(
+                width + referencePoint[0],
+                height + referencePoint[1],
+              ),
+              isDragging: selectedIndex === lastClickedPoint,
+            },
+          ],
+          elementsMap,
+        );
       } else {
         const newDraggingPointPosition = LinearElementEditor.createPointAt(
           element,
@@ -339,6 +339,7 @@ export class LinearElementEditor {
               isDragging: pointIndex === lastClickedPoint,
             };
           }),
+          elementsMap,
         );
       }
 
@@ -421,15 +422,19 @@ export class LinearElementEditor {
           selectedPoint === element.points.length - 1
         ) {
           if (isPathALoop(element.points, appState.zoom.value)) {
-            LinearElementEditor.movePoints(element, [
-              {
-                index: selectedPoint,
-                point:
-                  selectedPoint === 0
-                    ? element.points[element.points.length - 1]
-                    : element.points[0],
-              },
-            ]);
+            LinearElementEditor.movePoints(
+              element,
+              [
+                {
+                  index: selectedPoint,
+                  point:
+                    selectedPoint === 0
+                      ? element.points[element.points.length - 1]
+                      : element.points[0],
+                },
+              ],
+              elementsMap,
+            );
           }
 
           const bindingElement = isBindingEnabled(appState)
@@ -490,7 +495,6 @@ export class LinearElementEditor {
 
     // Since its not needed outside editor unless 2 pointer lines or bound text
     if (
-      !isElbowArrow(element) &&
       !appState.editingLinearElement &&
       element.points.length > 2 &&
       !boundText
@@ -529,7 +533,6 @@ export class LinearElementEditor {
           element,
           element.points[index],
           element.points[index + 1],
-          index,
           appState.zoom,
         )
       ) {
@@ -570,23 +573,19 @@ export class LinearElementEditor {
       scenePointer.x,
       scenePointer.y,
     );
-    if (!isElbowArrow(element) && clickedPointIndex >= 0) {
+    if (clickedPointIndex >= 0) {
       return null;
     }
     const points = LinearElementEditor.getPointsGlobalCoordinates(
       element,
       elementsMap,
     );
-    if (
-      points.length >= 3 &&
-      !appState.editingLinearElement &&
-      !isElbowArrow(element)
-    ) {
+    if (points.length >= 3 && !appState.editingLinearElement) {
       return null;
     }
 
     const threshold =
-      (LinearElementEditor.POINT_HANDLE_SIZE + 1) / appState.zoom.value;
+      LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;
 
     const existingSegmentMidpointHitCoords =
       linearElementEditor.segmentMidPointHoveredCoords;
@@ -605,11 +604,10 @@ export class LinearElementEditor {
     let index = 0;
     const midPoints: typeof editorMidPointsCache["points"] =
       LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);
-
     while (index < midPoints.length) {
       if (midPoints[index] !== null) {
         const distance = pointDistance(
-          midPoints[index]!,
+          pointFrom(midPoints[index]![0], midPoints[index]![1]),
           pointFrom(scenePointer.x, scenePointer.y),
         );
         if (distance <= threshold) {
@@ -622,25 +620,16 @@ export class LinearElementEditor {
     return null;
   };
 
-  static isSegmentTooShort<P extends GlobalPoint | LocalPoint>(
+  static isSegmentTooShort(
     element: NonDeleted<ExcalidrawLinearElement>,
-    startPoint: P,
-    endPoint: P,
-    index: number,
-    zoom: Zoom,
+    startPoint: GlobalPoint | LocalPoint,
+    endPoint: GlobalPoint | LocalPoint,
+    zoom: AppState["zoom"],
   ) {
-    if (isElbowArrow(element)) {
-      if (index >= 0 && index < element.points.length) {
-        return (
-          pointDistance(startPoint, endPoint) * zoom.value <
-          LinearElementEditor.POINT_HANDLE_SIZE / 2
-        );
-      }
-
-      return false;
-    }
-
-    let distance = pointDistance(startPoint, endPoint);
+    let distance = pointDistance(
+      pointFrom(startPoint[0], startPoint[1]),
+      pointFrom(endPoint[0], endPoint[1]),
+    );
     if (element.points.length > 2 && element.roundness) {
       distance = getBezierCurveLength(element, endPoint);
     }
@@ -759,8 +748,12 @@ export class LinearElementEditor {
         segmentMidpoint,
         elementsMap,
       );
-    } else if (event.altKey && appState.editingLinearElement) {
-      if (linearElementEditor.lastUncommittedPoint == null) {
+    }
+    if (event.altKey && appState.editingLinearElement) {
+      if (
+        linearElementEditor.lastUncommittedPoint == null &&
+        !isElbowArrow(element)
+      ) {
         mutateElement(element, {
           points: [
             ...element.points,
@@ -916,7 +909,12 @@ export class LinearElementEditor {
 
     if (!event.altKey) {
       if (lastPoint === lastUncommittedPoint) {
-        LinearElementEditor.deletePoints(element, [points.length - 1]);
+        LinearElementEditor.deletePoints(
+          element,
+          [points.length - 1],
+          elementsMap,
+          app.state.zoom,
+        );
       }
       return {
         ...appState.editingLinearElement,
@@ -954,14 +952,23 @@ export class LinearElementEditor {
     }
 
     if (lastPoint === lastUncommittedPoint) {
-      LinearElementEditor.movePoints(element, [
-        {
-          index: element.points.length - 1,
-          point: newPoint,
-        },
-      ]);
+      LinearElementEditor.movePoints(
+        element,
+        [
+          {
+            index: element.points.length - 1,
+            point: newPoint,
+          },
+        ],
+        elementsMap,
+      );
     } else {
-      LinearElementEditor.addPoints(element, [{ point: newPoint }]);
+      LinearElementEditor.addPoints(
+        element,
+        [{ point: newPoint }],
+        elementsMap,
+        app.state.zoom,
+      );
     }
     return {
       ...appState.editingLinearElement,
@@ -1190,12 +1197,16 @@ export class LinearElementEditor {
     // potentially expanding the bounding box
     if (pointAddedToEnd) {
       const lastPoint = element.points[element.points.length - 1];
-      LinearElementEditor.movePoints(element, [
-        {
-          index: element.points.length - 1,
-          point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
-        },
-      ]);
+      LinearElementEditor.movePoints(
+        element,
+        [
+          {
+            index: element.points.length - 1,
+            point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
+          },
+        ],
+        elementsMap,
+      );
     }
 
     return {
@@ -1210,6 +1221,8 @@ export class LinearElementEditor {
   static deletePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
     pointIndices: readonly number[],
+    elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
+    zoom: AppState["zoom"],
   ) {
     let offsetX = 0;
     let offsetY = 0;
@@ -1239,27 +1252,47 @@ export class LinearElementEditor {
       return acc;
     }, []);
 
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    LinearElementEditor._updatePoints(
+      element,
+      nextPoints,
+      offsetX,
+      offsetY,
+      elementsMap,
+    );
   }
 
   static addPoints(
     element: NonDeleted<ExcalidrawLinearElement>,
     targetPoints: { point: LocalPoint }[],
+    elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
+    zoom: AppState["zoom"],
   ) {
     const offsetX = 0;
     const offsetY = 0;
 
     const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    LinearElementEditor._updatePoints(
+      element,
+      nextPoints,
+      offsetX,
+      offsetY,
+      elementsMap,
+    );
   }
 
   static movePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
     targetPoints: { index: number; point: LocalPoint; isDragging?: boolean }[],
+    elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
     otherUpdates?: {
       startBinding?: PointBinding | null;
       endBinding?: PointBinding | null;
     },
+    options?: {
+      changedElements?: Map<string, OrderedExcalidrawElement>;
+      isDragging?: boolean;
+      zoom?: AppState["zoom"];
+    },
   ) {
     const { points } = element;
 
@@ -1302,6 +1335,7 @@ export class LinearElementEditor {
       nextPoints,
       offsetX,
       offsetY,
+      elementsMap,
       otherUpdates,
       {
         isDragging: targetPoints.reduce(
@@ -1309,6 +1343,8 @@ export class LinearElementEditor {
             dragging || targetPoint.isDragging === true,
           false,
         ),
+        changedElements: options?.changedElements,
+        zoom: options?.zoom,
       },
     );
   }
@@ -1415,49 +1451,54 @@ export class LinearElementEditor {
     nextPoints: readonly LocalPoint[],
     offsetX: number,
     offsetY: number,
+    elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
     otherUpdates?: {
       startBinding?: PointBinding | null;
       endBinding?: PointBinding | null;
     },
     options?: {
+      changedElements?: Map<string, OrderedExcalidrawElement>;
       isDragging?: boolean;
       zoom?: AppState["zoom"];
     },
   ) {
     if (isElbowArrow(element)) {
-      const updates: {
+      const bindings: {
         startBinding?: FixedPointBinding | null;
         endBinding?: FixedPointBinding | null;
-        points?: LocalPoint[];
       } = {};
       if (otherUpdates?.startBinding !== undefined) {
-        updates.startBinding =
+        bindings.startBinding =
           otherUpdates.startBinding !== null &&
           isFixedPointBinding(otherUpdates.startBinding)
             ? otherUpdates.startBinding
             : null;
       }
       if (otherUpdates?.endBinding !== undefined) {
-        updates.endBinding =
+        bindings.endBinding =
           otherUpdates.endBinding !== null &&
           isFixedPointBinding(otherUpdates.endBinding)
             ? otherUpdates.endBinding
             : null;
       }
 
-      updates.points = Array.from(nextPoints);
-      updates.points[0] = pointTranslate(
-        updates.points[0],
-        vector(offsetX, offsetY),
-      );
-      updates.points[updates.points.length - 1] = pointTranslate(
-        updates.points[updates.points.length - 1],
-        vector(offsetX, offsetY),
-      );
+      const mergedElementsMap = options?.changedElements
+        ? toBrandedType<SceneElementsMap>(
+            new Map([...elementsMap, ...options.changedElements]),
+          )
+        : elementsMap;
 
-      mutateElement(element, updates, true, {
-        isDragging: options?.isDragging,
-      });
+      mutateElbowArrow(
+        element,
+        mergedElementsMap,
+        nextPoints,
+        vector(offsetX, offsetY),
+        bindings,
+        {
+          isDragging: options?.isDragging,
+          zoom: options?.zoom,
+        },
+      );
     } else {
       const nextCoords = getElementPointsCoords(element, nextPoints);
       const prevCoords = getElementPointsCoords(element, element.points);
@@ -1732,99 +1773,6 @@ export class LinearElementEditor {
 
     return coords;
   };
-
-  static moveFixedSegment(
-    linearElement: LinearElementEditor,
-    index: number,
-    x: number,
-    y: number,
-    elementsMap: ElementsMap,
-  ): LinearElementEditor {
-    const element = LinearElementEditor.getElement(
-      linearElement.elementId,
-      elementsMap,
-    );
-
-    if (!element || !isElbowArrow(element)) {
-      return linearElement;
-    }
-
-    if (index && index > 0 && index < element.points.length) {
-      const isHorizontal = headingIsHorizontal(
-        vectorToHeading(
-          vectorFromPoint(element.points[index], element.points[index - 1]),
-        ),
-      );
-
-      const fixedSegments = (element.fixedSegments ?? []).reduce(
-        (segments, s) => {
-          segments[s.index] = s;
-          return segments;
-        },
-        {} as Record<number, FixedSegment>,
-      );
-      fixedSegments[index] = {
-        index,
-        start: pointFrom<LocalPoint>(
-          !isHorizontal ? x - element.x : element.points[index - 1][0],
-          isHorizontal ? y - element.y : element.points[index - 1][1],
-        ),
-        end: pointFrom<LocalPoint>(
-          !isHorizontal ? x - element.x : element.points[index][0],
-          isHorizontal ? y - element.y : element.points[index][1],
-        ),
-      };
-      const nextFixedSegments = Object.values(fixedSegments).sort(
-        (a, b) => a.index - b.index,
-      );
-
-      const offset = nextFixedSegments
-        .map((segment) => segment.index)
-        .reduce((count, idx) => (idx < index ? count + 1 : count), 0);
-
-      mutateElement(element, {
-        fixedSegments: nextFixedSegments,
-      });
-
-      const point = pointFrom<GlobalPoint>(
-        element.x +
-          (element.fixedSegments![offset].start[0] +
-            element.fixedSegments![offset].end[0]) /
-            2,
-        element.y +
-          (element.fixedSegments![offset].start[1] +
-            element.fixedSegments![offset].end[1]) /
-            2,
-      );
-
-      return {
-        ...linearElement,
-        segmentMidPointHoveredCoords: point,
-        pointerDownState: {
-          ...linearElement.pointerDownState,
-          segmentMidpoint: {
-            added: false,
-            index: element.fixedSegments![offset].index,
-            value: point,
-          },
-        },
-      };
-    }
-
-    return linearElement;
-  }
-
-  static deleteFixedSegment(
-    element: ExcalidrawElbowArrowElement,
-    index: number,
-  ): void {
-    mutateElement(element, {
-      fixedSegments: element.fixedSegments?.filter(
-        (segment) => segment.index !== index,
-      ),
-    });
-    mutateElement(element, {}, true);
-  }
 }
 
 const normalizeSelectedPoints = (

packages/excalidraw/element/mutateElement.ts

@@ -1,13 +1,10 @@
-import type { ExcalidrawElement, SceneElementsMap } from "./types";
+import type { ExcalidrawElement } from "./types";
 import Scene from "../scene/Scene";
 import { getSizeFromPoints } from "../points";
 import { randomInteger } from "../random";
-import { getUpdatedTimestamp, toBrandedType } from "../utils";
+import { getUpdatedTimestamp } from "../utils";
 import type { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
-import { isElbowArrow } from "./typeChecks";
-import { updateElbowArrowPoints } from "./elbowArrow";
-import type { Radians } from "../../math";
 
 export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
@@ -22,49 +19,14 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   element: TElement,
   updates: ElementUpdate<TElement>,
   informMutation = true,
-  options?: {
-    // Currently only for elbow arrows.
-    // If true, the elbow arrow tries to bind to the nearest element. If false
-    // it tries to keep the same bound element, if any.
-    isDragging?: boolean;
-  },
 ): TElement => {
   let didChange = false;
 
   // casting to any because can't use `in` operator
   // (see https://github.com/microsoft/TypeScript/issues/21732)
-  const { points, fixedSegments, fileId } = updates as any;
+  const { points, fileId } = updates as any;
 
-  if (
-    isElbowArrow(element) &&
-    (Object.keys(updates).length === 0 || // normalization case
-      typeof points !== "undefined" || // repositioning
-      typeof fixedSegments !== "undefined") // segment fixing
-  ) {
-    const elementsMap = toBrandedType<SceneElementsMap>(
-      Scene.getScene(element)?.getNonDeletedElementsMap() ?? new Map(),
-    );
-
-    updates = {
-      ...updates,
-      angle: 0 as Radians,
-      ...updateElbowArrowPoints(
-        {
-          ...element,
-          x: updates.x || element.x,
-          y: updates.y || element.y,
-        },
-        elementsMap,
-        {
-          fixedSegments,
-          points,
-        },
-        {
-          isDragging: options?.isDragging,
-        },
-      ),
-    };
-  } else if (typeof points !== "undefined") {
+  if (typeof points !== "undefined") {
     updates = { ...getSizeFromPoints(points), ...updates };
   }
 

packages/excalidraw/element/newElement.ts

@@ -18,8 +18,6 @@ import type {
   ExcalidrawIframeElement,
   ElementsMap,
   ExcalidrawArrowElement,
-  FixedSegment,
-  ExcalidrawElbowArrowElement,
 } from "./types";
 import {
   arrayToMap,
@@ -452,34 +450,15 @@ export const newLinearElement = (
   };
 };
 
-export const newArrowElement = <T extends boolean>(
+export const newArrowElement = (
   opts: {
     type: ExcalidrawArrowElement["type"];
     startArrowhead?: Arrowhead | null;
     endArrowhead?: Arrowhead | null;
     points?: ExcalidrawArrowElement["points"];
-    elbowed?: T;
-    fixedSegments?: FixedSegment[] | null;
+    elbowed?: boolean;
   } & ElementConstructorOpts,
-): T extends true
-  ? NonDeleted<ExcalidrawElbowArrowElement>
-  : NonDeleted<ExcalidrawArrowElement> => {
-  if (opts.elbowed) {
-    return {
-      ..._newElementBase<ExcalidrawElbowArrowElement>(opts.type, opts),
-      points: opts.points || [],
-      lastCommittedPoint: null,
-      startBinding: null,
-      endBinding: null,
-      startArrowhead: opts.startArrowhead || null,
-      endArrowhead: opts.endArrowhead || null,
-      elbowed: true,
-      fixedSegments: opts.fixedSegments || [],
-      startIsSpecial: false,
-      endIsSpecial: false,
-    } as NonDeleted<ExcalidrawElbowArrowElement>;
-  }
-
+): NonDeleted<ExcalidrawArrowElement> => {
   return {
     ..._newElementBase<ExcalidrawArrowElement>(opts.type, opts),
     points: opts.points || [],
@@ -488,10 +467,8 @@ export const newArrowElement = <T extends boolean>(
     endBinding: null,
     startArrowhead: opts.startArrowhead || null,
     endArrowhead: opts.endArrowhead || null,
-    elbowed: false,
-  } as T extends true
-    ? NonDeleted<ExcalidrawElbowArrowElement>
-    : NonDeleted<ExcalidrawArrowElement>;
+    elbowed: opts.elbowed || false,
+  };
 };
 
 export const newImageElement = (

packages/excalidraw/element/resizeElements.ts

@@ -10,7 +10,6 @@ import type {
   ExcalidrawImageElement,
   ElementsMap,
   SceneElementsMap,
-  ExcalidrawElbowArrowElement,
 } from "./types";
 import type { Mutable } from "../utility-types";
 import {
@@ -54,6 +53,7 @@ import {
 import { wrapText } from "./textWrapping";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isInGroup } from "../groups";
+import { mutateElbowArrow } from "./routing";
 import type { GlobalPoint } from "../../math";
 import {
   pointCenter,
@@ -177,10 +177,10 @@ export const transformElements = (
         elementsMap,
         transformHandleType,
         scene,
-        originalElements,
         {
           shouldResizeFromCenter,
           shouldMaintainAspectRatio,
+          originalElementsMap: originalElements,
           flipByX,
           flipByY,
           nextWidth,
@@ -531,10 +531,8 @@ const rotateMultipleElements = (
       );
 
       if (isElbowArrow(element)) {
-        // Needed to re-route the arrow
-        mutateElement(element, {
-          points: getArrowLocalFixedPoints(element, elementsMap),
-        });
+        const points = getArrowLocalFixedPoints(element, elementsMap);
+        mutateElbowArrow(element, elementsMap, points);
       } else {
         mutateElement(
           element,
@@ -1203,7 +1201,6 @@ export const resizeMultipleElements = (
   elementsMap: ElementsMap,
   handleDirection: TransformHandleDirection,
   scene: Scene,
-  originalElementsMap: ElementsMap,
   {
     shouldMaintainAspectRatio = false,
     shouldResizeFromCenter = false,
@@ -1211,6 +1208,7 @@ export const resizeMultipleElements = (
     flipByY = false,
     nextHeight,
     nextWidth,
+    originalElementsMap,
     originalBoundingBox,
   }: {
     nextWidth?: number;
@@ -1219,6 +1217,7 @@ export const resizeMultipleElements = (
     shouldResizeFromCenter?: boolean;
     flipByX?: boolean;
     flipByY?: boolean;
+    originalElementsMap?: ElementsMap;
     // added to improve performance
     originalBoundingBox?: BoundingBox;
   } = {},
@@ -1388,9 +1387,6 @@ export const resizeMultipleElements = (
         fontSize?: ExcalidrawTextElement["fontSize"];
         scale?: ExcalidrawImageElement["scale"];
         boundTextFontSize?: ExcalidrawTextElement["fontSize"];
-        startBinding?: ExcalidrawElbowArrowElement["startBinding"];
-        endBinding?: ExcalidrawElbowArrowElement["endBinding"];
-        fixedSegments?: ExcalidrawElbowArrowElement["fixedSegments"];
       };
     }[] = [];
 
@@ -1431,44 +1427,6 @@ export const resizeMultipleElements = (
         ...rescaledPoints,
       };
 
-      if (isElbowArrow(orig)) {
-        // Mirror fixed point binding for elbow arrows
-        // when resize goes into the negative direction
-        if (orig.startBinding) {
-          update.startBinding = {
-            ...orig.startBinding,
-            fixedPoint: [
-              flipByX
-                ? -orig.startBinding.fixedPoint[0] + 1
-                : orig.startBinding.fixedPoint[0],
-              flipByY
-                ? -orig.startBinding.fixedPoint[1] + 1
-                : orig.startBinding.fixedPoint[1],
-            ],
-          };
-        }
-        if (orig.endBinding) {
-          update.endBinding = {
-            ...orig.endBinding,
-            fixedPoint: [
-              flipByX
-                ? -orig.endBinding.fixedPoint[0] + 1
-                : orig.endBinding.fixedPoint[0],
-              flipByY
-                ? -orig.endBinding.fixedPoint[1] + 1
-                : orig.endBinding.fixedPoint[1],
-            ],
-          };
-        }
-        if (orig.fixedSegments && rescaledPoints.points) {
-          update.fixedSegments = orig.fixedSegments.map((segment) => ({
-            ...segment,
-            start: rescaledPoints.points[segment.index - 1],
-            end: rescaledPoints.points[segment.index],
-          }));
-        }
-      }
-
       if (isImageElement(orig)) {
         update.scale = [
           orig.scale[0] * flipFactorX,
@@ -1514,10 +1472,7 @@ export const resizeMultipleElements = (
     } of elementsAndUpdates) {
       const { width, height, angle } = update;
 
-      mutateElement(element, update, false, {
-        // needed for the fixed binding point udpate to take effect
-        isDragging: true,
-      });
+      mutateElement(element, update, false);
 
       updateBoundElements(element, elementsMap as SceneElementsMap, {
         simultaneouslyUpdated: elementsToUpdate,

packages/excalidraw/element/routing.test.tsx

@@ -9,121 +9,20 @@ import {
   render,
 } from "../tests/test-utils";
 import { bindLinearElement } from "./binding";
-import { Excalidraw, mutateElement } from "../index";
+import { Excalidraw } from "../index";
+import { mutateElbowArrow } from "./routing";
 import type {
   ExcalidrawArrowElement,
   ExcalidrawBindableElement,
   ExcalidrawElbowArrowElement,
 } from "./types";
 import { ARROW_TYPE } from "../constants";
-import type { LocalPoint } from "../../math";
 import { pointFrom } from "../../math";
 
 const { h } = window;
 
 const mouse = new Pointer("mouse");
 
-describe("elbow arrow segment move", () => {
-  beforeEach(async () => {
-    localStorage.clear();
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-  });
-
-  it("can move the second segment of a fully connected elbow arrow", () => {
-    UI.createElement("rectangle", {
-      x: -100,
-      y: -50,
-      width: 100,
-      height: 100,
-    });
-    UI.createElement("rectangle", {
-      x: 200,
-      y: 150,
-      width: 100,
-      height: 100,
-    });
-
-    UI.clickTool("arrow");
-    UI.clickOnTestId("elbow-arrow");
-
-    mouse.reset();
-    mouse.moveTo(0, 0);
-    mouse.click();
-    mouse.moveTo(200, 200);
-    mouse.click();
-
-    mouse.reset();
-    mouse.moveTo(100, 100);
-    mouse.down();
-    mouse.moveTo(115, 100);
-    mouse.up();
-
-    const arrow = h.scene.getSelectedElements(
-      h.state,
-    )[0] as ExcalidrawElbowArrowElement;
-
-    expect(h.state.selectedElementIds).toEqual({ [arrow.id]: true });
-    expect(arrow.fixedSegments?.length).toBe(1);
-
-    expect(arrow.points).toCloselyEqualPoints([
-      [0, 0],
-      [110, 0],
-      [110, 200],
-      [190, 200],
-    ]);
-
-    mouse.reset();
-    mouse.moveTo(105, 74.275);
-    mouse.doubleClick();
-
-    expect(arrow.points).toCloselyEqualPoints([
-      [0, 0],
-      [110, 0],
-      [110, 200],
-      [190, 200],
-    ]);
-  });
-
-  it("can move the second segment of an unconnected elbow arrow", () => {
-    UI.clickTool("arrow");
-    UI.clickOnTestId("elbow-arrow");
-
-    mouse.reset();
-    mouse.moveTo(0, 0);
-    mouse.click();
-    mouse.moveTo(250, 200);
-    mouse.click();
-
-    mouse.reset();
-    mouse.moveTo(125, 100);
-    mouse.down();
-    mouse.moveTo(130, 100);
-    mouse.up();
-
-    const arrow = h.scene.getSelectedElements(
-      h.state,
-    )[0] as ExcalidrawArrowElement;
-
-    expect(arrow.points).toCloselyEqualPoints([
-      [0, 0],
-      [130, 0],
-      [130, 200],
-      [250, 200],
-    ]);
-
-    mouse.reset();
-    mouse.moveTo(130, 100);
-    mouse.doubleClick();
-
-    expect(arrow.points).toCloselyEqualPoints([
-      [0, 0],
-      [125, 0],
-      [125, 200],
-      [250, 200],
-    ]);
-  });
-});
-
 describe("elbow arrow routing", () => {
   it("can properly generate orthogonal arrow points", () => {
     const scene = new Scene();
@@ -132,12 +31,10 @@ describe("elbow arrow routing", () => {
       elbowed: true,
     }) as ExcalidrawElbowArrowElement;
     scene.insertElement(arrow);
-    mutateElement(arrow, {
-      points: [
-        pointFrom<LocalPoint>(-45 - arrow.x, -100.1 - arrow.y),
-        pointFrom<LocalPoint>(45 - arrow.x, 99.9 - arrow.y),
-      ],
-    });
+    mutateElbowArrow(arrow, scene.getNonDeletedElementsMap(), [
+      pointFrom(-45 - arrow.x, -100.1 - arrow.y),
+      pointFrom(45 - arrow.x, 99.9 - arrow.y),
+    ]);
     expect(arrow.points).toEqual([
       [0, 0],
       [0, 100],
@@ -184,9 +81,7 @@ describe("elbow arrow routing", () => {
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    mutateElement(arrow, {
-      points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
-    });
+    mutateElbowArrow(arrow, elementsMap, [pointFrom(0, 0), pointFrom(90, 200)]);
 
     expect(arrow.points).toEqual([
       [0, 0],
@@ -287,6 +182,8 @@ describe("elbow arrow ui", () => {
     expect(arrow.points.map((point) => point.map(Math.round))).toEqual([
       [0, 0],
       [35, 0],
+      [35, 90],
+      [35, 90], // Note that coordinates are rounded above!
       [35, 165],
       [103, 165],
     ]);

packages/excalidraw/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, POINTER_BUTTON } from "../constants";
+import { CLASSES, EVENT, isSafari, POINTER_BUTTON } from "../constants";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -50,6 +50,8 @@ import {
   originalContainerCache,
   updateOriginalContainerCache,
 } from "./containerCache";
+import { activeEyeDropperAtom } from "../components/EyeDropper";
+import { jotaiStore } from "../jotai";
 
 const getTransform = (
   width: number,
@@ -289,6 +291,8 @@ export const textWysiwyg = ({
   editable.dataset.type = "wysiwyg";
   // prevent line wrapping on Safari
   editable.wrap = "off";
+  // set   placeholder fix for Safari not showing caret for empty textarea
+  editable.placeholder = "\u00A0";
   editable.classList.add("excalidraw-wysiwyg");
 
   let whiteSpace = "pre";
@@ -522,6 +526,7 @@ export const textWysiwyg = ({
   // so that we don't need to create separate a callback for event handlers
   let submittedViaKeyboard = false;
   const handleSubmit = () => {
+    console.warn("handleSubmit");
     // prevent double submit
     if (isDestroyed) {
       return;
@@ -579,62 +584,96 @@ export const textWysiwyg = ({
     });
   };
 
+  const onBlur = () => {
+    console.warn("onBlur", document.activeElement);
+    const isColorPicking = jotaiStore.get(activeEyeDropperAtom);
+    if (isColorPicking) {
+      focusEditable(null);
+    } else if (document.activeElement !== editable) {
+      handleSubmit();
+    }
+  };
+
   const cleanup = () => {
     // remove events to ensure they don't late-fire
     editable.onblur = null;
     editable.oninput = null;
     editable.onkeydown = null;
+    editable.onpointerdown = null;
 
     if (observer) {
       observer.disconnect();
     }
 
-    window.removeEventListener("resize", updateWysiwygStyle);
-    window.removeEventListener("wheel", stopEvent, true);
-    window.removeEventListener("pointerdown", onPointerDown);
-    window.removeEventListener("pointerup", bindBlurEvent);
-    window.removeEventListener("blur", handleSubmit);
-    window.removeEventListener("beforeunload", handleSubmit);
+    window.removeEventListener(EVENT.RESIZE, updateWysiwygStyle);
+    window.removeEventListener(EVENT.WHEEL, stopEvent, true);
+    window.removeEventListener(EVENT.POINTER_DOWN, onPointerDown, {
+      capture: true,
+    });
+    window.removeEventListener(EVENT.POINTER_UP, onPointerUp);
+    window.removeEventListener(EVENT.BLUR, onBlur);
+    window.removeEventListener(EVENT.BEFORE_UNLOAD, handleSubmit);
     unbindUpdate();
     unbindOnScroll();
 
     editable.remove();
   };
 
-  const bindBlurEvent = (event?: MouseEvent) => {
-    window.removeEventListener("pointerup", bindBlurEvent);
-    // Deferred so that the pointerdown that initiates the wysiwyg doesn't
-    // trigger the blur on ensuing pointerup.
-    // Also to handle cases such as picking a color which would trigger a blur
-    // in that same tick.
+  const focusEditable = (event: MouseEvent | FocusEvent | null) => {
     const target = event?.target;
 
-    const isPropertiesTrigger =
-      target instanceof HTMLElement &&
-      target.classList.contains("properties-trigger");
+    const shouldSkipRefocus =
+      target &&
+      // don't steal focus if user is focusing an input such as HEX input
+      ((isWritableElement(target) && document.activeElement !== editable) ||
+        // refocusing while clicking on popver breaks safari
+        (isSafari &&
+          target instanceof HTMLElement &&
+          target.classList.contains(CLASSES.PROPERTIES_POPOVER_TRIGGER)));
 
-    setTimeout(() => {
-      editable.onblur = handleSubmit;
-
-      // case: clicking on the same property → no change → no update → no focus
-      if (!isPropertiesTrigger) {
-        editable.focus();
-      }
-    });
+    if (!shouldSkipRefocus) {
+      // Deferred so that the pointerdown that initiates the wysiwyg doesn't
+      // trigger the blur on ensuing pointerup.
+      // Also to handle cases such as picking a color which would trigger a blur
+      // in that same tick.
+      setTimeout(() => {
+        // double deferred because on onUpdate/color picker shennanings
+        setTimeout(() => {
+          editable.focus();
+        });
+      });
+    }
   };
 
-  const temporarilyDisableSubmit = () => {
+  const onPointerUp = (event: PointerEvent | FocusEvent) => {
+    window.removeEventListener(EVENT.POINTER_UP, onPointerUp);
+    window.removeEventListener(EVENT.FOCUS, onPointerUp);
+    // needs to be deferred due to Safari
+    setTimeout(() => {
+      editable.onblur = onBlur;
+    });
+    focusEditable(event);
+  };
+
+  const disableBlurUntilNextPointerUp = () => {
     editable.onblur = null;
-    window.addEventListener("pointerup", bindBlurEvent);
+    window.addEventListener(EVENT.POINTER_UP, onPointerUp);
     // handle edge-case where pointerup doesn't fire e.g. due to user
     // alt-tabbing away
-    window.addEventListener("blur", handleSubmit);
+    window.addEventListener(EVENT.FOCUS, onPointerUp);
   };
 
   // prevent blur when changing properties from the menu
   const onPointerDown = (event: MouseEvent) => {
     const target = event?.target;
 
+    // ugly hack to close popups such as color picker when clicking back
+    // into the wysiwyg editor (it won't autoclose as blur won't trigger
+    // since we perpetually keep focus inside the wysiwyg)
+    if (target === editable && app.state.openPopup) {
+      app.setState({ openPopup: null });
+    }
+
     // panning canvas
     if (event.button === POINTER_BUTTON.WHEEL) {
       // trying to pan by clicking inside text area itself -> handle here
@@ -642,24 +681,18 @@ export const textWysiwyg = ({
         event.preventDefault();
         app.handleCanvasPanUsingWheelOrSpaceDrag(event);
       }
-      temporarilyDisableSubmit();
+      disableBlurUntilNextPointerUp();
       return;
     }
 
-    const isPropertiesTrigger =
-      target instanceof HTMLElement &&
-      target.classList.contains("properties-trigger");
-
     if (
-      ((event.target instanceof HTMLElement ||
+      (event.target instanceof HTMLElement ||
         event.target instanceof SVGElement) &&
-        event.target.closest(
-          `.${CLASSES.SHAPE_ACTIONS_MENU}, .${CLASSES.ZOOM_ACTIONS}`,
-        ) &&
-        !isWritableElement(event.target)) ||
-      isPropertiesTrigger
+      event.target.closest(
+        `.${CLASSES.SHAPE_ACTIONS_MENU}, .${CLASSES.ZOOM_ACTIONS}, .${CLASSES.PROPERTIES_POPOVER}`,
+      )
     ) {
-      temporarilyDisableSubmit();
+      disableBlurUntilNextPointerUp();
     } else if (
       event.target instanceof HTMLCanvasElement &&
       // Vitest simply ignores stopPropagation, capture-mode, or rAF
@@ -682,9 +715,11 @@ export const textWysiwyg = ({
   const unbindUpdate = app.scene.onUpdate(() => {
     updateWysiwygStyle();
     const isPopupOpened = !!document.activeElement?.closest(
-      ".properties-content",
+      CLASSES.PROPERTIES_POPOVER,
     );
     if (!isPopupOpened) {
+      // we need to keep this code path for safari (iPadOS) bs reasons
+      // (also Vitest)
       editable.focus();
     }
   });
@@ -702,8 +737,11 @@ export const textWysiwyg = ({
     // because we need it to happen *after* the blur event from `pointerdown`)
     editable.select();
   }
-  bindBlurEvent();
-
+  focusEditable(null);
+  setTimeout(() => {
+    editable.onblur = onBlur;
+  });
+  console.log(">>>>>>>>", app.state.editingTextElement);
   // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
   // is preferred so we catch changes from host, where window may not resize.
   let observer: ResizeObserver | null = null;
@@ -713,7 +751,7 @@ export const textWysiwyg = ({
     });
     observer.observe(canvas);
   } else {
-    window.addEventListener("resize", updateWysiwygStyle);
+    window.addEventListener(EVENT.RESIZE, updateWysiwygStyle);
   }
 
   editable.onpointerdown = (event) => event.stopPropagation();
@@ -721,9 +759,11 @@ export const textWysiwyg = ({
   // rAF (+ capture to by doubly sure) so we don't catch te pointerdown that
   // triggered the wysiwyg
   requestAnimationFrame(() => {
-    window.addEventListener("pointerdown", onPointerDown, { capture: true });
+    window.addEventListener(EVENT.POINTER_DOWN, onPointerDown, {
+      capture: true,
+    });
   });
-  window.addEventListener("beforeunload", handleSubmit);
+  window.addEventListener(EVENT.BEFORE_UNLOAD, handleSubmit);
   excalidrawContainer
     ?.querySelector(".excalidraw-textEditorContainer")!
     .appendChild(editable);

packages/excalidraw/element/types.ts

@@ -303,10 +303,7 @@ export type Arrowhead =
   | "triangle"
   | "triangle_outline"
   | "diamond"
-  | "diamond_outline"
-  | "crowfoot_one"
-  | "crowfoot_many"
-  | "crowfoot_one_or_many";
+  | "diamond_outline";
 
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   Readonly<{
@@ -319,12 +316,6 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     endArrowhead: Arrowhead | null;
   }>;
 
-export type FixedSegment = {
-  start: LocalPoint;
-  end: LocalPoint;
-  index: number;
-};
-
 export type ExcalidrawArrowElement = ExcalidrawLinearElement &
   Readonly<{
     type: "arrow";
@@ -337,23 +328,6 @@ export type ExcalidrawElbowArrowElement = Merge<
     elbowed: true;
     startBinding: FixedPointBinding | null;
     endBinding: FixedPointBinding | null;
-    fixedSegments: FixedSegment[] | null;
-    /**
-     * Marks that the 3rd point should be used as the 2nd point of the arrow in
-     * order to temporarily hide the first segment of the arrow without losing
-     * the data from the points array. It allows creating the expected arrow
-     * path when the arrow with fixed segments is bound on a horizontal side and
-     * moved to a vertical and vica versa.
-     */
-    startIsSpecial: boolean | null;
-    /**
-     * Marks that the 3rd point backwards from the end should be used as the 2nd
-     * point of the arrow in order to temporarily hide the last segment of the
-     * arrow without losing the data from the points array. It allows creating
-     * the expected arrow path when the arrow with fixed segments is bound on a
-     * horizontal side and moved to a vertical and vica versa.
-     */
-    endIsSpecial: boolean | null;
   }
 >;
 

packages/excalidraw/fonts/Fonts.ts

@@ -3,6 +3,7 @@ import {
   FONT_FAMILY_FALLBACKS,
   CJK_HAND_DRAWN_FALLBACK_FONT,
   WINDOWS_EMOJI_FALLBACK_FONT,
+  isSafari,
   getFontFamilyFallbacks,
 } from "../constants";
 import { isTextElement } from "../element";
@@ -136,28 +137,50 @@ export class Fonts {
 
   /**
    * Load font faces for a given scene and trigger scene update.
+   *
+   * FontFaceSet loadingdone event we listen on may not always
+   * fire (looking at you Safari), so on init we manually load all
+   * fonts and rerender scene text elements once done.
+   *
+   * For Safari we make sure to check against each loaded font face
+   * with the unique characters per family in the scene,
+   * otherwise fonts might remain unloaded.
    */
   public loadSceneFonts = async (): Promise<FontFace[]> => {
     const sceneFamilies = this.getSceneFamilies();
-    const charsPerFamily = Fonts.getCharsPerFamily(
-      this.scene.getNonDeletedElements(),
-    );
+    const charsPerFamily = isSafari
+      ? Fonts.getCharsPerFamily(this.scene.getNonDeletedElements())
+      : undefined;
 
     return Fonts.loadFontFaces(sceneFamilies, charsPerFamily);
   };
 
   /**
    * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
+   *
+   * For Safari we make sure to check against each loaded font face,
+   * with the unique characters per family in the elements
+   * otherwise fonts might remain unloaded.
    */
   public static loadElementsFonts = async (
     elements: readonly ExcalidrawElement[],
   ): Promise<FontFace[]> => {
     const fontFamilies = Fonts.getUniqueFamilies(elements);
-    const charsPerFamily = Fonts.getCharsPerFamily(elements);
+    const charsPerFamily = isSafari
+      ? Fonts.getCharsPerFamily(elements)
+      : undefined;
 
     return Fonts.loadFontFaces(fontFamilies, charsPerFamily);
   };
 
+  /**
+   * Load all registered font faces.
+   */
+  public static loadAllFonts = async (): Promise<FontFace[]> => {
+    const allFamilies = Fonts.getAllFamilies();
+    return Fonts.loadFontFaces(allFamilies);
+  };
+
   /**
    * Generate CSS @font-face declarations for the given elements.
    */
@@ -200,7 +223,7 @@ export class Fonts {
 
   private static async loadFontFaces(
     fontFamilies: Array<ExcalidrawTextElement["fontFamily"]>,
-    charsPerFamily: Record<number, Set<string>>,
+    charsPerFamily?: Record<number, Set<string>>,
   ) {
     // add all registered font faces into the `document.fonts` (if not added already)
     for (const { fontFaces, metadata } of Fonts.registered.values()) {
@@ -225,7 +248,7 @@ export class Fonts {
 
   private static *fontFacesLoader(
     fontFamilies: Array<ExcalidrawTextElement["fontFamily"]>,
-    charsPerFamily: Record<number, Set<string>>,
+    charsPerFamily?: Record<number, Set<string>>,
   ): Generator<Promise<void | readonly [number, FontFace[]]>> {
     for (const [index, fontFamily] of fontFamilies.entries()) {
       const font = getFontString({
@@ -233,9 +256,12 @@ export class Fonts {
         fontSize: 16,
       });
 
-      // WARN: without "text" param it does not have to mean that all font faces are loaded as it could be just one irrelevant font face!
-      // instead, we are always checking chars used in the family, so that no required font faces remain unloaded
-      const text = Fonts.getCharacters(charsPerFamily, fontFamily);
+      // WARN: without "text" param it does not have to mean that all font faces are loaded, instead it could be just one!
+      // for Safari on init, we rather check with the "text" param, even though it's less efficient, as otherwise fonts might remain unloaded
+      const text =
+        isSafari && charsPerFamily
+          ? Fonts.getCharacters(charsPerFamily, fontFamily)
+          : "";
 
       if (!window.document.fonts.check(font, text)) {
         yield promiseTry(async () => {

packages/excalidraw/fractionalIndex.ts

@@ -190,6 +190,7 @@ export const syncInvalidIndices = (
 ): OrderedExcalidrawElement[] => {
   const indicesGroups = getInvalidIndicesGroups(elements);
   const elementsUpdates = generateIndices(elements, indicesGroups);
+
   for (const [element, update] of elementsUpdates) {
     mutateElement(element, update, false);
   }

packages/excalidraw/frame.ts

@@ -95,11 +95,12 @@ export const getElementsCompletelyInFrame = (
   );
 
 export const isElementContainingFrame = (
+  elements: readonly ExcalidrawElement[],
   element: ExcalidrawElement,
   frame: ExcalidrawFrameLikeElement,
   elementsMap: ElementsMap,
 ) => {
-  return getElementsWithinSelection([frame], element, elementsMap).some(
+  return getElementsWithinSelection(elements, element, elementsMap).some(
     (e) => e.id === frame.id,
   );
 };
@@ -143,7 +144,7 @@ export const elementOverlapsWithFrame = (
   return (
     elementsAreInFrameBounds([element], frame, elementsMap) ||
     isElementIntersectingFrame(element, frame, elementsMap) ||
-    isElementContainingFrame(element, frame, elementsMap)
+    isElementContainingFrame([frame], element, frame, elementsMap)
   );
 };
 
@@ -282,7 +283,7 @@ export const getElementsInResizingFrame = (
   const elementsCompletelyInFrame = new Set([
     ...getElementsCompletelyInFrame(allElements, frame, elementsMap),
     ...prevElementsInFrame.filter((element) =>
-      isElementContainingFrame(element, frame, elementsMap),
+      isElementContainingFrame(allElements, element, frame, elementsMap),
     ),
   ]);
 
@@ -369,57 +370,12 @@ export const getElementsInNewFrame = (
   frame: ExcalidrawFrameLikeElement,
   elementsMap: ElementsMap,
 ) => {
-  return omitPartialGroups(
-    omitGroupsContainingFrameLikes(
-      elements,
-      getElementsCompletelyInFrame(elements, frame, elementsMap),
-    ),
-    frame,
-    elementsMap,
+  return omitGroupsContainingFrameLikes(
+    elements,
+    getElementsCompletelyInFrame(elements, frame, elementsMap),
   );
 };
 
-export const omitPartialGroups = (
-  elements: ExcalidrawElement[],
-  frame: ExcalidrawFrameLikeElement,
-  allElementsMap: ElementsMap,
-) => {
-  const elementsToReturn = [];
-  const checkedGroups = new Map<string, boolean>();
-
-  for (const element of elements) {
-    let shouldOmit = false;
-    if (element.groupIds.length > 0) {
-      // if some partial group should be omitted, then all elements in that group should be omitted
-      if (element.groupIds.some((gid) => checkedGroups.get(gid))) {
-        shouldOmit = true;
-      } else {
-        const allElementsInGroup = new Set(
-          element.groupIds.flatMap((gid) =>
-            getElementsInGroup(allElementsMap, gid),
-          ),
-        );
-
-        shouldOmit = !elementsAreInFrameBounds(
-          Array.from(allElementsInGroup),
-          frame,
-          allElementsMap,
-        );
-      }
-
-      element.groupIds.forEach((gid) => {
-        checkedGroups.set(gid, shouldOmit);
-      });
-    }
-
-    if (!shouldOmit) {
-      elementsToReturn.push(element);
-    }
-  }
-
-  return elementsToReturn;
-};
-
 export const getContainingFrame = (
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
@@ -498,7 +454,6 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
   allElements: T,
   elementsToAdd: NonDeletedExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
-  appState: AppState,
 ): T => {
   const elementsMap = arrayToMap(allElements);
   const currTargetFrameChildrenMap = new Map<ExcalidrawElement["id"], true>();
@@ -534,17 +489,6 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
       continue;
     }
 
-    // if the element is already in another frame (which is also in elementsToAdd),
-    // it means that frame and children are selected at the same time
-    // => keep original frame membership, do not add to the target frame
-    if (
-      element.frameId &&
-      appState.selectedElementIds[element.id] &&
-      appState.selectedElementIds[element.frameId]
-    ) {
-      continue;
-    }
-
     if (!currTargetFrameChildrenMap.has(element.id)) {
       finalElementsToAdd.push(element);
     }
@@ -633,7 +577,6 @@ export const replaceAllElementsInFrame = <T extends ExcalidrawElement>(
     removeAllElementsFromFrame(allElements, frame),
     nextElementsInFrame,
     frame,
-    app.state,
   ).slice();
 };
 
@@ -740,16 +683,6 @@ export const getTargetFrame = (
     ? getContainerElement(element, elementsMap) || element
     : element;
 
-  // if the element and its containing frame are both selected, then
-  // the containing frame is the target frame
-  if (
-    _element.frameId &&
-    appState.selectedElementIds[_element.id] &&
-    appState.selectedElementIds[_element.frameId]
-  ) {
-    return getContainingFrame(_element, elementsMap);
-  }
-
   return appState.selectedElementIds[_element.id] &&
     appState.selectedElementsAreBeingDragged
     ? appState.frameToHighlight
@@ -762,151 +695,61 @@ export const isElementInFrame = (
   element: ExcalidrawElement,
   allElementsMap: ElementsMap,
   appState: StaticCanvasAppState,
-  opts?: {
-    targetFrame?: ExcalidrawFrameLikeElement;
-    checkedGroups?: Map<string, boolean>;
-  },
 ) => {
-  const frame =
-    opts?.targetFrame ?? getTargetFrame(element, allElementsMap, appState);
-
-  if (!frame) {
-    return false;
-  }
-
+  const frame = getTargetFrame(element, allElementsMap, appState);
   const _element = isTextElement(element)
     ? getContainerElement(element, allElementsMap) || element
     : element;
 
-  const setGroupsInFrame = (isInFrame: boolean) => {
-    if (opts?.checkedGroups) {
-      _element.groupIds.forEach((groupId) => {
-        opts.checkedGroups?.set(groupId, isInFrame);
-      });
+  if (frame) {
+    // Perf improvement:
+    // For an element that's already in a frame, if it's not being dragged
+    // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
+    // It has to be in its containing frame.
+    if (
+      !appState.selectedElementIds[element.id] ||
+      !appState.selectedElementsAreBeingDragged
+    ) {
+      return true;
     }
-  };
 
-  if (
-    // if the element is not selected, or it is selected but not being dragged,
-    // frame membership won't update, so return true
-    !appState.selectedElementIds[_element.id] ||
-    !appState.selectedElementsAreBeingDragged ||
-    // if both frame and element are selected, won't update membership, so return true
-    (appState.selectedElementIds[_element.id] &&
-      appState.selectedElementIds[frame.id])
-  ) {
-    return true;
-  }
-
-  if (_element.groupIds.length === 0) {
-    return elementOverlapsWithFrame(_element, frame, allElementsMap);
-  }
-
-  for (const gid of _element.groupIds) {
-    if (opts?.checkedGroups?.has(gid)) {
-      return opts.checkedGroups.get(gid)!!;
+    if (_element.groupIds.length === 0) {
+      return elementOverlapsWithFrame(_element, frame, allElementsMap);
     }
-  }
 
-  const allElementsInGroup = new Set(
-    _element.groupIds
-      .filter((gid) => {
-        if (opts?.checkedGroups) {
-          return !opts.checkedGroups.has(gid);
-        }
-        return true;
-      })
-      .flatMap((gid) => getElementsInGroup(allElementsMap, gid)),
-  );
-
-  if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
-    const selectedElements = new Set(
-      getSelectedElements(allElementsMap, appState),
+    const allElementsInGroup = new Set(
+      _element.groupIds.flatMap((gid) =>
+        getElementsInGroup(allElementsMap, gid),
+      ),
     );
 
-    const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
+    if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
+      const selectedElements = new Set(
+        getSelectedElements(allElementsMap, appState),
+      );
 
-    if (editingGroupOverlapsFrame) {
-      return true;
-    }
+      const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
 
-    selectedElements.forEach((selectedElement) => {
-      allElementsInGroup.delete(selectedElement);
-    });
-  }
-
-  for (const elementInGroup of allElementsInGroup) {
-    if (isFrameLikeElement(elementInGroup)) {
-      setGroupsInFrame(false);
-      return false;
-    }
-  }
-
-  for (const elementInGroup of allElementsInGroup) {
-    if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
-      setGroupsInFrame(true);
-      return true;
-    }
-  }
-
-  return false;
-};
-
-export const shouldApplyFrameClip = (
-  element: ExcalidrawElement,
-  frame: ExcalidrawFrameLikeElement,
-  appState: StaticCanvasAppState,
-  elementsMap: ElementsMap,
-  checkedGroups?: Map<string, boolean>,
-) => {
-  if (!appState.frameRendering || !appState.frameRendering.clip) {
-    return false;
-  }
-
-  // for individual elements, only clip when the element is
-  // a. overlapping with the frame, or
-  // b. containing the frame, for example when an element is used as a background
-  //    and is therefore bigger than the frame and completely contains the frame
-  const shouldClipElementItself =
-    isElementIntersectingFrame(element, frame, elementsMap) ||
-    isElementContainingFrame(element, frame, elementsMap);
-
-  if (shouldClipElementItself) {
-    for (const groupId of element.groupIds) {
-      checkedGroups?.set(groupId, true);
-    }
-
-    return true;
-  }
-
-  // if an element is outside the frame, but is part of a group that has some elements
-  // "in" the frame, we should clip the element
-  if (
-    !shouldClipElementItself &&
-    element.groupIds.length > 0 &&
-    !elementsAreInFrameBounds([element], frame, elementsMap)
-  ) {
-    let shouldClip = false;
-
-    // if no elements are being dragged, we can skip the geometry check
-    // because we know if the element is in the given frame or not
-    if (!appState.selectedElementsAreBeingDragged) {
-      shouldClip = element.frameId === frame.id;
-      for (const groupId of element.groupIds) {
-        checkedGroups?.set(groupId, shouldClip);
+      if (editingGroupOverlapsFrame) {
+        return true;
       }
-    } else {
-      shouldClip = isElementInFrame(element, elementsMap, appState, {
-        targetFrame: frame,
-        checkedGroups,
+
+      selectedElements.forEach((selectedElement) => {
+        allElementsInGroup.delete(selectedElement);
       });
     }
 
-    for (const groupId of element.groupIds) {
-      checkedGroups?.set(groupId, shouldClip);
+    for (const elementInGroup of allElementsInGroup) {
+      if (isFrameLikeElement(elementInGroup)) {
+        return false;
+      }
     }
 
-    return shouldClip;
+    for (const elementInGroup of allElementsInGroup) {
+      if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
+        return true;
+      }
+    }
   }
 
   return false;
@@ -936,16 +779,3 @@ export const getElementsOverlappingFrame = (
       .filter((el) => !el.frameId || el.frameId === frame.id)
   );
 };
-
-export const frameAndChildrenSelectedTogether = (
-  selectedElements: readonly ExcalidrawElement[],
-) => {
-  const selectedElementsMap = arrayToMap(selectedElements);
-
-  return (
-    selectedElements.length > 1 &&
-    selectedElements.some(
-      (element) => element.frameId && selectedElementsMap.has(element.frameId),
-    )
-  );
-};

packages/excalidraw/groups.ts

@@ -105,10 +105,6 @@ export const selectGroupsForSelectedElements = (function () {
     const groupElementsIndex: Record<GroupId, string[]> = {};
     const selectedElementIdsInGroups = elements.reduce(
       (acc: Record<string, true>, element) => {
-        if (element.isDeleted) {
-          return acc;
-        }
-
         const groupId = element.groupIds.find((id) => selectedGroupIds[id]);
 
         if (groupId) {