debug: clipboard

* fix: don't update label position when dragging labelled arrows

* lint

* add test

* don't update coords for label when labelled arrow inside frame

* increase locales bundle size limit

dev-docs/docs/codebase/frames.mdx

@@ -20,13 +20,3 @@ Frames should be ordered where frame children come first, followed by the frame
 ```
 
 If not oredered correctly, the editor will still function, but the elements may not be rendered and clipped correctly. Further, the renderer relies on this ordering for performance optimizations.
-
-# Arrows
-
-An arrow can be a child of a frame only if it has no binding (either start or end) to any other element, regardless of whether the bound element is inside the frame or not.
-
-This ensures that when an arrow is bound to an element outside the frame, it's rendered and behaves correctly.
-
-Therefore, when an arrow (that's a child of a frame) gets bound to an element, it's automatically removed from the frame.
-
-Bound-arrow is duplicated alongside a frame only if the arrow start is bound to an element within that frame.

package.json

@@ -49,11 +49,11 @@
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",
     "png-chunks-extract": "1.0.0",
-    "points-on-curve": "0.2.0",
+    "points-on-curve": "1.0.1",
     "pwacompat": "2.0.17",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "roughjs": "4.5.2",
+    "roughjs": "4.6.4",
     "sass": "1.51.0",
     "socket.io-client": "2.3.1",
     "tunnel-rat": "0.1.2"

src/actions/actionClipboard.tsx

@@ -10,26 +10,34 @@ import { actionDeleteSelected } from "./actionDeleteSelected";
 import { exportCanvas } from "../data/index";
 import { getNonDeletedElements, isTextElement } from "../element";
 import { t } from "../i18n";
+import { isFirefox } from "../constants";
 
 export const actionCopy = register({
   name: "copy",
   trackEvent: { category: "element" },
-  perform: (elements, appState, _, app) => {
+  perform: async (elements, appState, _, app) => {
     const elementsToCopy = app.scene.getSelectedElements({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: true,
       includeElementsInFrames: true,
     });
 
-    copyToClipboard(elementsToCopy, app.files);
+    try {
+      await copyToClipboard(elementsToCopy, app.files);
+    } catch (error: any) {
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          errorMessage: error.message,
+        },
+      };
+    }
 
     return {
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
   contextItemLabel: "labels.copy",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
@@ -38,15 +46,91 @@ export const actionCopy = register({
 export const actionPaste = register({
   name: "paste",
   trackEvent: { category: "element" },
-  perform: (elements: any, appStates: any, data, app) => {
-    app.pasteFromClipboard(null);
+  perform: async (elements, appState, data, app) => {
+    const MIME_TYPES: Record<string, string> = {};
+    try {
+      try {
+        const clipboardItems = await navigator.clipboard?.read();
+        for (const item of clipboardItems) {
+          for (const type of item.types) {
+            try {
+              const blob = await item.getType(type);
+              MIME_TYPES[type] = await blob.text();
+            } catch (error: any) {
+              console.warn(
+                `Cannot retrieve ${type} from clipboardItem: ${error.message}`,
+              );
+            }
+          }
+        }
+        if (Object.keys(MIME_TYPES).length === 0) {
+          console.warn(
+            "No clipboard data found from clipboard.read(). Falling back to clipboard.readText()",
+          );
+          // throw so we fall back onto clipboard.readText()
+          throw new Error("No clipboard data found");
+        }
+      } catch (error: any) {
+        try {
+          MIME_TYPES["text/plain"] = await navigator.clipboard?.readText();
+        } catch (error: any) {
+          console.warn(`Cannot readText() from clipboard: ${error.message}`);
+          if (isFirefox) {
+            return {
+              commitToHistory: false,
+              appState: {
+                ...appState,
+                errorMessage: t("hints.firefox_clipboard_write"),
+              },
+            };
+          }
+          throw error;
+        }
+      }
+    } catch (error: any) {
+      console.error(`actionPaste: ${error.message}`);
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          errorMessage: error.message,
+        },
+      };
+    }
+    try {
+      console.log("actionPaste (1)", { MIME_TYPES });
+      const event = new ClipboardEvent("paste", {
+        clipboardData: new DataTransfer(),
+      });
+      for (const [type, value] of Object.entries(MIME_TYPES)) {
+        try {
+          event.clipboardData?.setData(type, value);
+        } catch (error: any) {
+          console.warn(
+            `Cannot set ${type} as clipboardData item: ${error.message}`,
+          );
+        }
+      }
+      event.clipboardData?.types.forEach((type) => {
+        console.log(
+          `actionPaste (2) event.clipboardData?.getData(${type})`,
+          event.clipboardData?.getData(type),
+        );
+      });
+      app.pasteFromClipboard(event);
+    } catch (error: any) {
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          errorMessage: error.message,
+        },
+      };
+    }
     return {
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
   contextItemLabel: "labels.paste",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,

src/actions/actionDuplicateSelection.tsx

@@ -155,12 +155,7 @@ const duplicateElements = (
             groupId,
           ).flatMap((element) =>
             isFrameElement(element)
-              ? [
-                  ...getFrameElements(elements, element.id, {
-                    includeBoundArrows: true,
-                  }),
-                  element,
-                ]
+              ? [...getFrameElements(elements, element.id), element]
               : [element],
           );
 
@@ -186,9 +181,7 @@ const duplicateElements = (
           continue;
         }
         if (isElementAFrame) {
-          const elementsInFrame = getFrameElements(sortedElements, element.id, {
-            includeBoundArrows: true,
-          });
+          const elementsInFrame = getFrameElements(sortedElements, element.id);
 
           elementsWithClones.push(
             ...markAsProcessed([

src/actions/actionProperties.test.tsx

@@ -0,0 +1,167 @@
+import { Excalidraw } from "../packages/excalidraw/index";
+import { queryByTestId } from "@testing-library/react";
+import { render } from "../tests/test-utils";
+import { UI } from "../tests/helpers/ui";
+import { API } from "../tests/helpers/api";
+import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
+import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
+
+const { h } = window;
+
+describe("element locking", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+  });
+
+  describe("properties when tool selected", () => {
+    it("should show active background top picks", () => {
+      UI.clickTool("rectangle");
+
+      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
+
+      // just in case we change it in the future
+      expect(color).not.toBe(COLOR_PALETTE.transparent);
+
+      h.setState({
+        currentItemBackgroundColor: color,
+      });
+      const activeColor = queryByTestId(
+        document.body,
+        `color-top-pick-${color}`,
+      );
+      expect(activeColor).toHaveClass("active");
+    });
+
+    it("should show fill style when background non-transparent", () => {
+      UI.clickTool("rectangle");
+
+      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
+
+      // just in case we change it in the future
+      expect(color).not.toBe(COLOR_PALETTE.transparent);
+
+      h.setState({
+        currentItemBackgroundColor: color,
+        currentItemFillStyle: "hachure",
+      });
+      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
+
+      expect(hachureFillButton).toHaveClass("active");
+      h.setState({
+        currentItemFillStyle: "solid",
+      });
+      const solidFillStyle = queryByTestId(document.body, `fill-solid`);
+      expect(solidFillStyle).toHaveClass("active");
+    });
+
+    it("should not show fill style when background transparent", () => {
+      UI.clickTool("rectangle");
+
+      h.setState({
+        currentItemBackgroundColor: COLOR_PALETTE.transparent,
+        currentItemFillStyle: "hachure",
+      });
+      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
+
+      expect(hachureFillButton).toBe(null);
+    });
+
+    it("should show horizontal text align for text tool", () => {
+      UI.clickTool("text");
+
+      h.setState({
+        currentItemTextAlign: "right",
+      });
+
+      const centerTextAlign = queryByTestId(document.body, `align-right`);
+      expect(centerTextAlign).toBeChecked();
+    });
+  });
+
+  describe("properties when elements selected", () => {
+    it("should show active styles when single element selected", () => {
+      const rect = API.createElement({
+        type: "rectangle",
+        backgroundColor: "red",
+        fillStyle: "cross-hatch",
+      });
+      h.elements = [rect];
+      API.setSelectedElements([rect]);
+
+      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
+      expect(crossHatchButton).toHaveClass("active");
+    });
+
+    it("should not show fill style selected element's background is transparent", () => {
+      const rect = API.createElement({
+        type: "rectangle",
+        backgroundColor: COLOR_PALETTE.transparent,
+        fillStyle: "cross-hatch",
+      });
+      h.elements = [rect];
+      API.setSelectedElements([rect]);
+
+      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
+      expect(crossHatchButton).toBe(null);
+    });
+
+    it("should highlight common stroke width of selected elements", () => {
+      const rect1 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.thin,
+      });
+      const rect2 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.thin,
+      });
+      h.elements = [rect1, rect2];
+      API.setSelectedElements([rect1, rect2]);
+
+      const thinStrokeWidthButton = queryByTestId(
+        document.body,
+        `strokeWidth-thin`,
+      );
+      expect(thinStrokeWidthButton).toBeChecked();
+    });
+
+    it("should not highlight any stroke width button if no common style", () => {
+      const rect1 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.thin,
+      });
+      const rect2 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.bold,
+      });
+      h.elements = [rect1, rect2];
+      API.setSelectedElements([rect1, rect2]);
+
+      expect(queryByTestId(document.body, `strokeWidth-thin`)).not.toBe(null);
+      expect(
+        queryByTestId(document.body, `strokeWidth-thin`),
+      ).not.toBeChecked();
+      expect(
+        queryByTestId(document.body, `strokeWidth-bold`),
+      ).not.toBeChecked();
+      expect(
+        queryByTestId(document.body, `strokeWidth-extraBold`),
+      ).not.toBeChecked();
+    });
+
+    it("should show properties of different element types when selected", () => {
+      const rect = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.bold,
+      });
+      const text = API.createElement({
+        type: "text",
+        fontFamily: FONT_FAMILY.Cascadia,
+      });
+      h.elements = [rect, text];
+      API.setSelectedElements([rect, text]);
+
+      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
+      expect(queryByTestId(document.body, `font-family-code`)).toBeChecked();
+    });
+  });
+});

src/actions/actionProperties.tsx

@@ -1,4 +1,4 @@
-import { AppState } from "../../src/types";
+import { AppState, Primitive } from "../../src/types";
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
   DEFAULT_ELEMENT_BACKGROUND_PICKS,
@@ -51,6 +51,7 @@ import {
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
   ROUNDNESS,
+  STROKE_WIDTH,
   VERTICAL_ALIGN,
 } from "../constants";
 import {
@@ -82,7 +83,6 @@ import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
-  canChangeRoundness,
   canHaveArrowheads,
   getCommonAttributeOfSelectedElements,
   getSelectedElements,
@@ -118,25 +118,44 @@ export const changeProperty = (
   });
 };
 
-export const getFormValue = function <T>(
+export const getFormValue = function <T extends Primitive>(
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   getAttribute: (element: ExcalidrawElement) => T,
-  defaultValue: T,
+  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
+  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
   const editingElement = appState.editingElement;
   const nonDeletedElements = getNonDeletedElements(elements);
-  return (
-    (editingElement && getAttribute(editingElement)) ??
-    (isSomeElementSelected(nonDeletedElements, appState)
-      ? getCommonAttributeOfSelectedElements(
-          nonDeletedElements,
+
+  let ret: T | null = null;
+
+  if (editingElement) {
+    ret = getAttribute(editingElement);
+  }
+
+  if (!ret) {
+    const hasSelection = isSomeElementSelected(nonDeletedElements, appState);
+
+    if (hasSelection) {
+      ret =
+        getCommonAttributeOfSelectedElements(
+          isRelevantElement === true
+            ? nonDeletedElements
+            : nonDeletedElements.filter((el) => isRelevantElement(el)),
           appState,
           getAttribute,
-        )
-      : defaultValue) ??
-    defaultValue
-  );
+        ) ??
+        (typeof defaultValue === "function"
+          ? defaultValue(true)
+          : defaultValue);
+    } else {
+      ret =
+        typeof defaultValue === "function" ? defaultValue(false) : defaultValue;
+    }
+  }
+
+  return ret;
 };
 
 const offsetElementAfterFontResize = (
@@ -247,6 +266,7 @@ export const actionChangeStrokeColor = register({
           elements,
           appState,
           (element) => element.strokeColor,
+          true,
           appState.currentItemStrokeColor,
         )}
         onChange={(color) => updateData({ currentItemStrokeColor: color })}
@@ -289,6 +309,7 @@ export const actionChangeBackgroundColor = register({
           elements,
           appState,
           (element) => element.backgroundColor,
+          true,
           appState.currentItemBackgroundColor,
         )}
         onChange={(color) => updateData({ currentItemBackgroundColor: color })}
@@ -338,23 +359,28 @@ export const actionChangeFillStyle = register({
               } (${getShortcutKey("Alt-Click")})`,
               icon: allElementsZigZag ? FillZigZagIcon : FillHachureIcon,
               active: allElementsZigZag ? true : undefined,
+              testId: `fill-hachure`,
             },
             {
               value: "cross-hatch",
               text: t("labels.crossHatch"),
               icon: FillCrossHatchIcon,
+              testId: `fill-cross-hatch`,
             },
             {
               value: "solid",
               text: t("labels.solid"),
               icon: FillSolidIcon,
+              testId: `fill-solid`,
             },
           ]}
           value={getFormValue(
             elements,
             appState,
             (element) => element.fillStyle,
-            appState.currentItemFillStyle,
+            (element) => element.hasOwnProperty("fillStyle"),
+            (hasSelection) =>
+              hasSelection ? null : appState.currentItemFillStyle,
           )}
           onClick={(value, event) => {
             const nextValue =
@@ -393,26 +419,31 @@ export const actionChangeStrokeWidth = register({
         group="stroke-width"
         options={[
           {
-            value: 1,
+            value: STROKE_WIDTH.thin,
             text: t("labels.thin"),
             icon: StrokeWidthBaseIcon,
+            testId: "strokeWidth-thin",
           },
           {
-            value: 2,
+            value: STROKE_WIDTH.bold,
             text: t("labels.bold"),
             icon: StrokeWidthBoldIcon,
+            testId: "strokeWidth-bold",
           },
           {
-            value: 4,
+            value: STROKE_WIDTH.extraBold,
             text: t("labels.extraBold"),
             icon: StrokeWidthExtraBoldIcon,
+            testId: "strokeWidth-extraBold",
           },
         ]}
         value={getFormValue(
           elements,
           appState,
           (element) => element.strokeWidth,
-          appState.currentItemStrokeWidth,
+          (element) => element.hasOwnProperty("strokeWidth"),
+          (hasSelection) =>
+            hasSelection ? null : appState.currentItemStrokeWidth,
         )}
         onChange={(value) => updateData(value)}
       />
@@ -461,7 +492,9 @@ export const actionChangeSloppiness = register({
           elements,
           appState,
           (element) => element.roughness,
-          appState.currentItemRoughness,
+          (element) => element.hasOwnProperty("roughness"),
+          (hasSelection) =>
+            hasSelection ? null : appState.currentItemRoughness,
         )}
         onChange={(value) => updateData(value)}
       />
@@ -509,7 +542,9 @@ export const actionChangeStrokeStyle = register({
           elements,
           appState,
           (element) => element.strokeStyle,
-          appState.currentItemStrokeStyle,
+          (element) => element.hasOwnProperty("strokeStyle"),
+          (hasSelection) =>
+            hasSelection ? null : appState.currentItemStrokeStyle,
         )}
         onChange={(value) => updateData(value)}
       />
@@ -549,6 +584,7 @@ export const actionChangeOpacity = register({
             elements,
             appState,
             (element) => element.opacity,
+            true,
             appState.currentItemOpacity,
           ) ?? undefined
         }
@@ -607,7 +643,12 @@ export const actionChangeFontSize = register({
             }
             return null;
           },
-          appState.currentItemFontSize || DEFAULT_FONT_SIZE,
+          (element) =>
+            isTextElement(element) || getBoundTextElement(element) !== null,
+          (hasSelection) =>
+            hasSelection
+              ? null
+              : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
         )}
         onChange={(value) => updateData(value)}
       />
@@ -692,21 +733,25 @@ export const actionChangeFontFamily = register({
       value: FontFamilyValues;
       text: string;
       icon: JSX.Element;
+      testId: string;
     }[] = [
       {
         value: FONT_FAMILY.Virgil,
         text: t("labels.handDrawn"),
         icon: FreedrawIcon,
+        testId: "font-family-virgil",
       },
       {
         value: FONT_FAMILY.Helvetica,
         text: t("labels.normal"),
         icon: FontFamilyNormalIcon,
+        testId: "font-family-normal",
       },
       {
         value: FONT_FAMILY.Cascadia,
         text: t("labels.code"),
         icon: FontFamilyCodeIcon,
+        testId: "font-family-code",
       },
     ];
 
@@ -729,7 +774,12 @@ export const actionChangeFontFamily = register({
               }
               return null;
             },
-            appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
+            (element) =>
+              isTextElement(element) || getBoundTextElement(element) !== null,
+            (hasSelection) =>
+              hasSelection
+                ? null
+                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
           )}
           onChange={(value) => updateData(value)}
         />
@@ -806,7 +856,10 @@ export const actionChangeTextAlign = register({
               }
               return null;
             },
-            appState.currentItemTextAlign,
+            (element) =>
+              isTextElement(element) || getBoundTextElement(element) !== null,
+            (hasSelection) =>
+              hasSelection ? null : appState.currentItemTextAlign,
           )}
           onChange={(value) => updateData(value)}
         />
@@ -882,7 +935,9 @@ export const actionChangeVerticalAlign = register({
               }
               return null;
             },
-            VERTICAL_ALIGN.MIDDLE,
+            (element) =>
+              isTextElement(element) || getBoundTextElement(element) !== null,
+            (hasSelection) => (hasSelection ? null : VERTICAL_ALIGN.MIDDLE),
           )}
           onChange={(value) => updateData(value)}
         />
@@ -947,9 +1002,9 @@ export const actionChangeRoundness = register({
             appState,
             (element) =>
               hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
-            (canChangeRoundness(appState.activeTool.type) &&
-              appState.currentItemRoundness) ||
-              null,
+            (element) => element.hasOwnProperty("roundness"),
+            (hasSelection) =>
+              hasSelection ? null : appState.currentItemRoundness,
           )}
           onChange={(value) => updateData(value)}
         />
@@ -1043,6 +1098,7 @@ export const actionChangeArrowhead = register({
                 isLinearElement(element) && canHaveArrowheads(element.type)
                   ? element.startArrowhead
                   : appState.currentItemStartArrowhead,
+              true,
               appState.currentItemStartArrowhead,
             )}
             onChange={(value) => updateData({ position: "start", type: value })}
@@ -1089,6 +1145,7 @@ export const actionChangeArrowhead = register({
                 isLinearElement(element) && canHaveArrowheads(element.type)
                   ? element.endArrowhead
                   : appState.currentItemEndArrowhead,
+              true,
               appState.currentItemEndArrowhead,
             )}
             onChange={(value) => updateData({ position: "end", type: value })}

src/clipboard.ts

@@ -118,7 +118,7 @@ export const copyToClipboard = async (
     await copyTextToSystemClipboard(json);
   } catch (error: any) {
     PREFER_APP_CLIPBOARD = true;
-    console.error(error);
+    throw error;
   }
 };
 
@@ -193,7 +193,7 @@ const maybeParseHTMLPaste = (event: ClipboardEvent) => {
  *  via async clipboard API if supported)
  */
 const getSystemClipboard = async (
-  event: ClipboardEvent | null,
+  event: ClipboardEvent,
   isPlainPaste = false,
 ): Promise<
   | { type: "text"; value: string }
@@ -205,10 +205,7 @@ const getSystemClipboard = async (
       return { type: "mixedContent", value: mixedContent };
     }
 
-    const text = event
-      ? event.clipboardData?.getData("text/plain")
-      : probablySupportsClipboardReadText &&
-        (await navigator.clipboard.readText());
+    const text = event.clipboardData?.getData("text/plain");
 
     return { type: "text", value: (text || "").trim() };
   } catch {
@@ -220,7 +217,7 @@ const getSystemClipboard = async (
  * Attempts to parse clipboard. Prefers system clipboard.
  */
 export const parseClipboard = async (
-  event: ClipboardEvent | null,
+  event: ClipboardEvent,
   isPlainPaste = false,
 ): Promise<ClipboardData> => {
   const systemClipboard = await getSystemClipboard(event, isPlainPaste);

src/components/Actions.tsx

@@ -11,7 +11,6 @@ import {
   hasBackground,
   hasStrokeStyle,
   hasStrokeWidth,
-  hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppClassProperties, UIAppState, Zoom } from "../types";
@@ -20,7 +19,7 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement } from "../element/typeChecks";
+import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import { Tooltip } from "./Tooltip";
@@ -66,7 +65,8 @@ export const SelectedShapeActions = ({
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(appState.activeTool.type) ||
+    (hasBackground(appState.activeTool.type) &&
+      !isTransparent(appState.currentItemBackgroundColor)) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
@@ -123,14 +123,15 @@ export const SelectedShapeActions = ({
         <>{renderAction("changeRoundness")}</>
       )}
 
-      {(hasText(appState.activeTool.type) ||
-        targetElements.some((element) => hasText(element.type))) && (
+      {(appState.activeTool.type === "text" ||
+        targetElements.some(isTextElement)) && (
         <>
           {renderAction("changeFontSize")}
 
           {renderAction("changeFontFamily")}
 
-          {suppportsHorizontalAlign(targetElements) &&
+          {(appState.activeTool.type === "text" ||
+            suppportsHorizontalAlign(targetElements)) &&
             renderAction("changeTextAlign")}
         </>
       )}

src/components/App.tsx

@@ -374,6 +374,7 @@ import {
   resetCursor,
   setCursorForShape,
 } from "../cursor";
+import { Emitter } from "../emitter";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -505,6 +506,30 @@ class App extends React.Component<AppProps, AppState> {
 
   laserPathManager: LaserPathManager = new LaserPathManager(this);
 
+  onChangeEmitter = new Emitter<
+    [
+      elements: readonly ExcalidrawElement[],
+      appState: AppState,
+      files: BinaryFiles,
+    ]
+  >();
+
+  onPointerDownEmitter = new Emitter<
+    [
+      activeTool: AppState["activeTool"],
+      pointerDownState: PointerDownState,
+      event: React.PointerEvent<HTMLElement>,
+    ]
+  >();
+
+  onPointerUpEmitter = new Emitter<
+    [
+      activeTool: AppState["activeTool"],
+      pointerDownState: PointerDownState,
+      event: PointerEvent,
+    ]
+  >();
+
   constructor(props: AppProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
@@ -568,6 +593,9 @@ class App extends React.Component<AppProps, AppState> {
         resetCursor: this.resetCursor,
         updateFrameRendering: this.updateFrameRendering,
         toggleSidebar: this.toggleSidebar,
+        onChange: (cb) => this.onChangeEmitter.on(cb),
+        onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
+        onPointerUp: (cb) => this.onPointerUpEmitter.on(cb),
       } as const;
       if (typeof excalidrawRef === "function") {
         excalidrawRef(api);
@@ -1247,6 +1275,12 @@ class App extends React.Component<AppProps, AppState> {
                             top={this.state.contextMenu.top}
                             left={this.state.contextMenu.left}
                             actionManager={this.actionManager}
+                            onClose={(cb) => {
+                              this.setState({ contextMenu: null }, () => {
+                                this.focusContainer();
+                                cb?.();
+                              });
+                            }}
                           />
                         )}
                         <StaticCanvas
@@ -1750,6 +1784,7 @@ class App extends React.Component<AppProps, AppState> {
     this.scene.destroy();
     this.library.destroy();
     this.laserPathManager.destroy();
+    this.onChangeEmitter.destroy();
     ShapeCache.destroy();
     SnapCache.destroy();
     clearTimeout(touchTimeout);
@@ -2034,6 +2069,11 @@ class App extends React.Component<AppProps, AppState> {
         this.state,
         this.files,
       );
+      this.onChangeEmitter.trigger(
+        this.scene.getElementsIncludingDeleted(),
+        this.state,
+        this.files,
+      );
     }
   }
 
@@ -2161,14 +2201,21 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   public pasteFromClipboard = withBatchedUpdates(
-    async (event: ClipboardEvent | null) => {
+    async (event: ClipboardEvent) => {
       const isPlainPaste = !!(IS_PLAIN_PASTE && event);
 
+      console.warn(
+        "pasteFromClipboard",
+        event?.clipboardData?.types,
+        event?.clipboardData?.getData("text/plain"),
+      );
+
       // #686
       const target = document.activeElement;
       const isExcalidrawActive =
         this.excalidrawContainerRef.current?.contains(target);
       if (event && !isExcalidrawActive) {
+        console.log("exit (1)");
         return;
       }
 
@@ -2181,6 +2228,7 @@ class App extends React.Component<AppProps, AppState> {
         (!(elementUnderCursor instanceof HTMLCanvasElement) ||
           isWritableElement(target))
       ) {
+        console.log("exit (2)");
         return;
       }
 
@@ -2520,12 +2568,18 @@ class App extends React.Component<AppProps, AppState> {
 
         const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
         if (text.length) {
+          const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+            x,
+            y: currentY,
+          });
+
           const element = newTextElement({
             ...textElementProps,
             x,
             y: currentY,
             text,
             lineHeight,
+            frameId: topLayerFrame ? topLayerFrame.id : null,
           });
           acc.push(element);
           currentY += element.height + LINE_GAP;
@@ -3215,7 +3269,7 @@ class App extends React.Component<AppProps, AppState> {
   });
 
   setActiveTool = (
-    tool:
+    tool: (
       | (
           | { type: Exclude<ToolType, "image"> }
           | {
@@ -3223,7 +3277,8 @@ class App extends React.Component<AppProps, AppState> {
               insertOnCanvasDirectly?: boolean;
             }
         )
-      | { type: "custom"; customType: string },
+      | { type: "custom"; customType: string }
+    ) & { locked?: boolean },
   ) => {
     const nextActiveTool = updateActiveTool(this.state, tool);
     if (nextActiveTool.type === "hand") {
@@ -3539,11 +3594,6 @@ class App extends React.Component<AppProps, AppState> {
     return getElementsAtPosition(elements, (element) =>
       hitTest(element, this.state, this.frameNameBoundsCache, x, y),
     ).filter((element) => {
-      // arrows don't clip even if they're children of frames,
-      // so always allow hitbox regardless of beinging contained in frame
-      if (isArrowElement(element)) {
-        return true;
-      }
       // hitting a frame's element from outside the frame is not considered a hit
       const containingFrame = getContainingFrame(element);
       return containingFrame &&
@@ -4680,7 +4730,7 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState,
       );
     } else if (this.state.activeTool.type === "custom") {
-      setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO);
+      setCursorForShape(this.interactiveCanvas, this.state);
     } else if (this.state.activeTool.type === "frame") {
       this.createFrameElementOnPointerDown(pointerDownState);
     } else if (this.state.activeTool.type === "laser") {
@@ -4699,6 +4749,11 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     this.props?.onPointerDown?.(this.state.activeTool, pointerDownState);
+    this.onPointerDownEmitter.trigger(
+      this.state.activeTool,
+      pointerDownState,
+      event,
+    );
 
     const onPointerMove =
       this.onPointerMoveFromPointerDownHandler(pointerDownState);
@@ -6551,6 +6606,12 @@ class App extends React.Component<AppProps, AppState> {
         this.setState({ pendingImageElementId: null });
       }
 
+      this.onPointerUpEmitter.trigger(
+        this.state.activeTool,
+        pointerDownState,
+        childEvent,
+      );
+
       if (draggingElement?.type === "freedraw") {
         const pointerCoords = viewportCoordsToSceneCoords(
           childEvent,

src/components/ColorPicker/TopPicks.tsx

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

src/components/ContextMenu.tsx

@@ -9,11 +9,7 @@ import {
 } from "../actions/shortcuts";
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
-import {
-  useExcalidrawAppState,
-  useExcalidrawElements,
-  useExcalidrawSetAppState,
-} from "./App";
+import { useExcalidrawAppState, useExcalidrawElements } from "./App";
 import React from "react";
 
 export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
@@ -25,14 +21,14 @@ type ContextMenuProps = {
   items: ContextMenuItems;
   top: number;
   left: number;
+  onClose: (cb?: () => void) => void;
 };
 
 export const CONTEXT_MENU_SEPARATOR = "separator";
 
 export const ContextMenu = React.memo(
-  ({ actionManager, items, top, left }: ContextMenuProps) => {
+  ({ actionManager, items, top, left, onClose }: ContextMenuProps) => {
     const appState = useExcalidrawAppState();
-    const setAppState = useExcalidrawSetAppState();
     const elements = useExcalidrawElements();
 
     const filteredItems = items.reduce((acc: ContextMenuItem[], item) => {
@@ -54,7 +50,7 @@ export const ContextMenu = React.memo(
 
     return (
       <Popover
-        onCloseRequest={() => setAppState({ contextMenu: null })}
+        onCloseRequest={() => onClose()}
         top={top}
         left={left}
         fitInViewport={true}
@@ -102,7 +98,7 @@ export const ContextMenu = React.memo(
                   // we need update state before executing the action in case
                   // the action uses the appState it's being passed (that still
                   // contains a defined contextMenu) to return the next state.
-                  setAppState({ contextMenu: null }, () => {
+                  onClose(() => {
                     actionManager.executeAction(item, "contextMenu");
                   });
                 }}

src/constants.ts

@@ -296,6 +296,18 @@ export const ROUNDNESS = {
  * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 
+export const ROUGHNESS = {
+  architect: 0,
+  artist: 1,
+  cartoonist: 2,
+} as const;
+
+export const STROKE_WIDTH = {
+  thin: 1,
+  bold: 2,
+  extraBold: 4,
+} as const;
+
 export const DEFAULT_ELEMENT_PROPS: {
   strokeColor: ExcalidrawElement["strokeColor"];
   backgroundColor: ExcalidrawElement["backgroundColor"];
@@ -308,10 +320,10 @@ export const DEFAULT_ELEMENT_PROPS: {
 } = {
   strokeColor: COLOR_PALETTE.black,
   backgroundColor: COLOR_PALETTE.transparent,
-  fillStyle: "hachure",
-  strokeWidth: 1,
+  fillStyle: "solid",
+  strokeWidth: 2,
   strokeStyle: "solid",
-  roughness: 1,
+  roughness: ROUGHNESS.artist,
   opacity: 100,
   locked: false,
 };

src/cursor.ts

@@ -99,5 +99,7 @@ export const setCursorForShape = (
     interactiveCanvas.style.cursor = `url(${url}), auto`;
   } else if (!["image", "custom"].includes(appState.activeTool.type)) {
     interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
+  } else {
+    interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO;
   }
 };

src/data/restore.ts

@@ -43,7 +43,6 @@ import {
   measureBaseline,
 } from "../element/textElement";
 import { normalizeLink } from "./url";
-import { isValidFrameChild } from "../frame";
 
 type RestoredAppState = Omit<
   AppState,
@@ -397,7 +396,7 @@ const repairBoundElement = (
 };
 
 /**
- * resets `frameId` if no longer applicable.
+ * Remove an element's frameId if its containing frame is non-existent
  *
  * NOTE mutates elements.
  */
@@ -405,16 +404,12 @@ const repairFrameMembership = (
   element: Mutable<ExcalidrawElement>,
   elementsMap: Map<string, Mutable<ExcalidrawElement>>,
 ) => {
-  if (!element.frameId) {
-    return;
-  }
+  if (element.frameId) {
+    const containingFrame = elementsMap.get(element.frameId);
 
-  if (
-    !isValidFrameChild(element) ||
-    // target frame not exists
-    !elementsMap.get(element.frameId)
-  ) {
-    element.frameId = null;
+    if (!containingFrame) {
+      element.frameId = null;
+    }
   }
 };
 
@@ -458,8 +453,6 @@ export const restoreElements = (
   // repair binding. Mutates elements.
   const restoredElementsMap = arrayToMap(restoredElements);
   for (const element of restoredElements) {
-    // repair frame membership *after* bindings we do in restoreElement()
-    // since we rely on bindings to be correct
     if (element.frameId) {
       repairFrameMembership(element, restoredElementsMap);
     }

src/data/transform.test.ts

@@ -5,7 +5,31 @@ import {
 } from "./transform";
 import { ExcalidrawArrowElement } from "../element/types";
 
+const opts = { regenerateIds: false };
+
 describe("Test Transform", () => {
+  it("should generate id unless opts.regenerateIds is set to false explicitly", () => {
+    const elements = [
+      {
+        type: "rectangle",
+        x: 100,
+        y: 100,
+        id: "rect-1",
+      },
+    ];
+    let data = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    );
+    expect(data.length).toBe(1);
+    expect(data[0].id).toBe("id0");
+
+    data = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+      opts,
+    );
+    expect(data[0].id).toBe("rect-1");
+  });
+
   it("should transform regular shapes", () => {
     const elements = [
       {
@@ -59,6 +83,7 @@ describe("Test Transform", () => {
 
     convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     ).forEach((ele) => {
       expect(ele).toMatchSnapshot({
         seed: expect.any(Number),
@@ -87,6 +112,7 @@ describe("Test Transform", () => {
     ];
     convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     ).forEach((ele) => {
       expect(ele).toMatchSnapshot({
         seed: expect.any(Number),
@@ -128,6 +154,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(4);
@@ -210,6 +237,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(12);
@@ -267,6 +295,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(8);
@@ -300,6 +329,7 @@ describe("Test Transform", () => {
       ];
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -321,7 +351,7 @@ describe("Test Transform", () => {
       });
 
       expect(text).toMatchObject({
-        x: 340,
+        x: 240,
         y: 226.5,
         type: "text",
         text: "HELLO WORLD!!",
@@ -341,7 +371,7 @@ describe("Test Transform", () => {
       });
 
       expect(ellipse).toMatchObject({
-        x: 555,
+        x: 355,
         y: 189,
         type: "ellipse",
         boundElements: [
@@ -383,10 +413,10 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
-
       const [arrow, text1, text2, text3] = excaldrawElements;
 
       expect(arrow).toMatchObject({
@@ -406,7 +436,7 @@ describe("Test Transform", () => {
       });
 
       expect(text1).toMatchObject({
-        x: 340,
+        x: 240,
         y: 226.5,
         type: "text",
         text: "HELLO WORLD!!",
@@ -426,7 +456,7 @@ describe("Test Transform", () => {
       });
 
       expect(text3).toMatchObject({
-        x: 555,
+        x: 355,
         y: 226.5,
         type: "text",
         boundElements: [
@@ -499,6 +529,7 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(5);
@@ -547,6 +578,7 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -600,17 +632,18 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
-      const [, , arrow] = excaldrawElements;
+      const [, , arrow, text] = excaldrawElements;
       expect(arrow).toMatchObject({
         type: "arrow",
         x: 255,
         y: 239,
         boundElements: [
           {
-            id: "id46",
+            id: text.id,
             type: "text",
           },
         ],
@@ -650,17 +683,18 @@ describe("Test Transform", () => {
       ];
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
       expect(excaldrawElements.length).toBe(2);
       const [arrow, rect] = excaldrawElements;
       expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
         elementId: "rect-1",
         focus: 0,
-        gap: 5,
+        gap: 205,
       });
       expect(rect.boundElements).toStrictEqual([
         {
-          id: "id47",
+          id: arrow.id,
           type: "arrow",
         },
       ]);
@@ -692,6 +726,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(1);

src/data/transform.ts

@@ -39,6 +39,8 @@ import {
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
 import { assertNever, getFontString } from "../utils";
+import { getSizeFromPoints } from "../points";
+import { randomId } from "../random";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -159,7 +161,7 @@ export type ExcalidrawElementSkeleton =
     } & Partial<ExcalidrawImageElement>);
 
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
-  width: 300,
+  width: 100,
   height: 0,
 };
 
@@ -357,6 +359,48 @@ const bindLinearElementToElement = (
       );
     }
   }
+
+  // Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
+  const endPointIndex = linearElement.points.length - 1;
+  const delta = 0.5;
+  const newPoints = JSON.parse(JSON.stringify(linearElement.points));
+  // left to right so shift the arrow towards right
+  if (
+    linearElement.points[endPointIndex][0] >
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = delta;
+    newPoints[endPointIndex][0] -= delta;
+  }
+
+  // right to left so shift the arrow towards left
+  if (
+    linearElement.points[endPointIndex][0] <
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = -delta;
+    newPoints[endPointIndex][0] += delta;
+  }
+  // top to bottom so shift the arrow towards top
+  if (
+    linearElement.points[endPointIndex][1] >
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = delta;
+    newPoints[endPointIndex][1] -= delta;
+  }
+
+  // bottom to top so shift the arrow towards bottom
+  if (
+    linearElement.points[endPointIndex][1] <
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = -delta;
+    newPoints[endPointIndex][1] += delta;
+  }
+
+  Object.assign(linearElement, { points: newPoints });
+
   return {
     linearElement,
     startBoundElement,
@@ -384,18 +428,28 @@ class ElementStore {
 }
 
 export const convertToExcalidrawElements = (
-  elements: ExcalidrawElementSkeleton[] | null,
+  elementsSkeleton: ExcalidrawElementSkeleton[] | null,
+  opts?: { regenerateIds: boolean },
 ) => {
-  if (!elements) {
+  if (!elementsSkeleton) {
     return [];
   }
+  const elements: ExcalidrawElementSkeleton[] = JSON.parse(
+    JSON.stringify(elementsSkeleton),
+  );
 
   const elementStore = new ElementStore();
   const elementsWithIds = new Map<string, ExcalidrawElementSkeleton>();
+  const oldToNewElementIdMap = new Map<string, string>();
 
   // Create individual elements
   for (const element of elements) {
     let excalidrawElement: ExcalidrawElement;
+    const originalId = element.id;
+    if (opts?.regenerateIds !== false) {
+      Object.assign(element, { id: randomId() });
+    }
+
     switch (element.type) {
       case "rectangle":
       case "ellipse":
@@ -444,6 +498,11 @@ export const convertToExcalidrawElements = (
           ],
           ...element,
         });
+
+        Object.assign(
+          excalidrawElement,
+          getSizeFromPoints(excalidrawElement.points),
+        );
         break;
       }
       case "text": {
@@ -499,6 +558,9 @@ export const convertToExcalidrawElements = (
     } else {
       elementStore.add(excalidrawElement);
       elementsWithIds.set(excalidrawElement.id, element);
+      if (originalId) {
+        oldToNewElementIdMap.set(originalId, excalidrawElement.id);
+      }
     }
   }
 
@@ -524,6 +586,18 @@ export const convertToExcalidrawElements = (
               element.type === "arrow" ? element?.start : undefined;
             const originalEnd =
               element.type === "arrow" ? element?.end : undefined;
+            if (originalStart && originalStart.id) {
+              const newStartId = oldToNewElementIdMap.get(originalStart.id);
+              if (newStartId) {
+                Object.assign(originalStart, { id: newStartId });
+              }
+            }
+            if (originalEnd && originalEnd.id) {
+              const newEndId = oldToNewElementIdMap.get(originalEnd.id);
+              if (newEndId) {
+                Object.assign(originalEnd, { id: newEndId });
+              }
+            }
             const { linearElement, startBoundElement, endBoundElement } =
               bindLinearElementToElement(
                 container as ExcalidrawArrowElement,
@@ -539,13 +613,23 @@ export const convertToExcalidrawElements = (
         } else {
           switch (element.type) {
             case "arrow": {
+              const { start, end } = element;
+              if (start && start.id) {
+                const newStartId = oldToNewElementIdMap.get(start.id);
+                Object.assign(start, { id: newStartId });
+              }
+              if (end && end.id) {
+                const newEndId = oldToNewElementIdMap.get(end.id);
+                Object.assign(end, { id: newEndId });
+              }
               const { linearElement, startBoundElement, endBoundElement } =
                 bindLinearElementToElement(
                   excalidrawElement as ExcalidrawArrowElement,
-                  element.start,
-                  element.end,
+                  start,
+                  end,
                   elementStore,
                 );
+
               elementStore.add(linearElement);
               elementStore.add(startBoundElement);
               elementStore.add(endBoundElement);

src/element/Hyperlink.tsx

@@ -392,7 +392,7 @@ export const getLinkHandleFromCoords = (
   [x1, y1, x2, y2]: Bounds,
   angle: number,
   appState: Pick<UIAppState, "zoom">,
-): [x: number, y: number, width: number, height: number] => {
+): Bounds => {
   const size = DEFAULT_LINK_SIZE;
   const linkWidth = size / appState.zoom.value;
   const linkHeight = size / appState.zoom.value;

src/element/binding.ts

@@ -27,7 +27,6 @@ import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
-import { isValidFrameChild } from "../frame";
 
 export type SuggestedBinding =
   | NonDeleted<ExcalidrawBindableElement>
@@ -212,15 +211,6 @@ export const bindLinearElement = (
       }),
     });
   }
-  if (linearElement.frameId && !isValidFrameChild(linearElement)) {
-    mutateElement(
-      linearElement,
-      {
-        frameId: null,
-      },
-      false,
-    );
-  }
 };
 
 // Don't bind both ends of a simple segment

src/element/bounds.ts

@@ -34,7 +34,12 @@ export type RectangleBox = {
 type MaybeQuadraticSolution = [number | null, number | null] | false;
 
 // x and y position of top left corner, x and y position of bottom right corner
-export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];
+export type Bounds = readonly [
+  minX: number,
+  minY: number,
+  maxX: number,
+  maxY: number,
+];
 
 export class ElementBounds {
   private static boundsCache = new WeakMap<
@@ -63,7 +68,7 @@ export class ElementBounds {
   }
 
   private static calculateBounds(element: ExcalidrawElement): Bounds {
-    let bounds: [number, number, number, number];
+    let bounds: Bounds;
 
     const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
 
@@ -387,7 +392,7 @@ const getCubicBezierCurveBound = (
 export const getMinMaxXYFromCurvePathOps = (
   ops: Op[],
   transformXY?: (x: number, y: number) => [number, number],
-): [number, number, number, number] => {
+): Bounds => {
   let currentP: Point = [0, 0];
 
   const { minX, minY, maxX, maxY } = ops.reduce(
@@ -435,9 +440,9 @@ export const getMinMaxXYFromCurvePathOps = (
   return [minX, minY, maxX, maxY];
 };
 
-const getBoundsFromPoints = (
+export const getBoundsFromPoints = (
   points: ExcalidrawFreeDrawElement["points"],
-): [number, number, number, number] => {
+): Bounds => {
   let minX = Infinity;
   let minY = Infinity;
   let maxX = -Infinity;
@@ -589,7 +594,7 @@ const getLinearElementRotatedBounds = (
   element: ExcalidrawLinearElement,
   cx: number,
   cy: number,
-): [number, number, number, number] => {
+): Bounds => {
   if (element.points.length < 2) {
     const [pointX, pointY] = element.points[0];
     const [x, y] = rotate(
@@ -600,7 +605,7 @@ const getLinearElementRotatedBounds = (
       element.angle,
     );
 
-    let coords: [number, number, number, number] = [x, y, x, y];
+    let coords: Bounds = [x, y, x, y];
     const boundTextElement = getBoundTextElement(element);
     if (boundTextElement) {
       const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
@@ -625,12 +630,7 @@ const getLinearElementRotatedBounds = (
   const transformXY = (x: number, y: number) =>
     rotate(element.x + x, element.y + y, cx, cy, element.angle);
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
-  let coords: [number, number, number, number] = [
-    res[0],
-    res[1],
-    res[2],
-    res[3],
-  ];
+  let coords: Bounds = [res[0], res[1], res[2], res[3]];
   const boundTextElement = getBoundTextElement(element);
   if (boundTextElement) {
     const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
@@ -692,7 +692,7 @@ export const getResizedElementAbsoluteCoords = (
   nextWidth: number,
   nextHeight: number,
   normalizePoints: boolean,
-): [number, number, number, number] => {
+): Bounds => {
   if (!(isLinearElement(element) || isFreeDrawElement(element))) {
     return [
       element.x,
@@ -709,7 +709,7 @@ export const getResizedElementAbsoluteCoords = (
     normalizePoints,
   );
 
-  let bounds: [number, number, number, number];
+  let bounds: Bounds;
 
   if (isFreeDrawElement(element)) {
     // Free Draw
@@ -740,7 +740,7 @@ export const getResizedElementAbsoluteCoords = (
 export const getElementPointsCoords = (
   element: ExcalidrawLinearElement,
   points: readonly (readonly [number, number])[],
-): [number, number, number, number] => {
+): Bounds => {
   // This might be computationally heavey
   const gen = rough.generator();
   const curve =

src/element/collision.ts

@@ -494,7 +494,9 @@ const hitTestFreeDrawElement = (
   // for filled freedraw shapes, support
   // selecting from inside
   if (shape && shape.sets.length) {
-    return hitTestRoughShape(shape, x, y, threshold);
+    return element.fillStyle === "solid"
+      ? hitTestCurveInside(shape, x, y, "round")
+      : hitTestRoughShape(shape, x, y, threshold);
   }
 
   return false;

src/element/dragElements.ts

@@ -1,5 +1,5 @@
 import { updateBoundElements } from "./binding";
-import { getCommonBounds } from "./bounds";
+import { Bounds, getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { NonDeletedExcalidrawElement } from "./types";
@@ -8,7 +8,11 @@ import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
 import { getGridPoint } from "../math";
 import Scene from "../scene/Scene";
-import { isFrameElement } from "./typeChecks";
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isFrameElement,
+} from "./typeChecks";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -35,44 +39,41 @@ export const dragSelectedElements = (
   if (frames.length > 0) {
     const elementsInFrames = scene
       .getNonDeletedElements()
+      .filter((e) => !isBoundToContainer(e))
       .filter((e) => e.frameId !== null)
       .filter((e) => frames.includes(e.frameId!));
 
     elementsInFrames.forEach((element) => elementsToUpdate.add(element));
   }
 
+  const commonBounds = getCommonBounds(
+    Array.from(elementsToUpdate).map(
+      (el) => pointerDownState.originalElements.get(el.id) ?? el,
+    ),
+  );
+  const adjustedOffset = calculateOffset(
+    commonBounds,
+    offset,
+    snapOffset,
+    gridSize,
+  );
+
   elementsToUpdate.forEach((element) => {
-    updateElementCoords(
-      pointerDownState,
-      element,
-      offset,
-      snapOffset,
-      gridSize,
-    );
+    updateElementCoords(pointerDownState, element, adjustedOffset);
     // update coords of bound text only if we're dragging the container directly
     // (we don't drag the group that it's part of)
     if (
+      // Don't update coords of arrow label since we calculate its position during render
+      !isArrowElement(element) &&
       // container isn't part of any group
       // (perf optim so we don't check `isSelectedViaGroup()` in every case)
-      !element.groupIds.length ||
-      // container is part of a group, but we're dragging the container directly
-      (appState.editingGroupId && !isSelectedViaGroup(appState, element))
+      (!element.groupIds.length ||
+        // container is part of a group, but we're dragging the container directly
+        (appState.editingGroupId && !isSelectedViaGroup(appState, element)))
     ) {
       const textElement = getBoundTextElement(element);
-      if (
-        textElement &&
-        // when container is added to a frame, so will its bound text
-        // so the text is already in `elementsToUpdate` and we should avoid
-        // updating its coords again
-        (!textElement.frameId || !frames.includes(textElement.frameId))
-      ) {
-        updateElementCoords(
-          pointerDownState,
-          textElement,
-          offset,
-          snapOffset,
-          gridSize,
-        );
+      if (textElement) {
+        updateElementCoords(pointerDownState, textElement, adjustedOffset);
       }
     }
     updateBoundElements(element, {
@@ -81,23 +82,20 @@ export const dragSelectedElements = (
   });
 };
 
-const updateElementCoords = (
-  pointerDownState: PointerDownState,
-  element: NonDeletedExcalidrawElement,
+const calculateOffset = (
+  commonBounds: Bounds,
   dragOffset: { x: number; y: number },
   snapOffset: { x: number; y: number },
   gridSize: AppState["gridSize"],
-) => {
-  const originalElement =
-    pointerDownState.originalElements.get(element.id) ?? element;
-
-  let nextX = originalElement.x + dragOffset.x + snapOffset.x;
-  let nextY = originalElement.y + dragOffset.y + snapOffset.y;
+): { x: number; y: number } => {
+  const [x, y] = commonBounds;
+  let nextX = x + dragOffset.x + snapOffset.x;
+  let nextY = y + dragOffset.y + snapOffset.y;
 
   if (snapOffset.x === 0 || snapOffset.y === 0) {
     const [nextGridX, nextGridY] = getGridPoint(
-      originalElement.x + dragOffset.x,
-      originalElement.y + dragOffset.y,
+      x + dragOffset.x,
+      y + dragOffset.y,
       gridSize,
     );
 
@@ -109,6 +107,22 @@ const updateElementCoords = (
       nextY = nextGridY;
     }
   }
+  return {
+    x: nextX - x,
+    y: nextY - y,
+  };
+};
+
+const updateElementCoords = (
+  pointerDownState: PointerDownState,
+  element: NonDeletedExcalidrawElement,
+  dragOffset: { x: number; y: number },
+) => {
+  const originalElement =
+    pointerDownState.originalElements.get(element.id) ?? element;
+
+  const nextX = originalElement.x + dragOffset.x;
+  const nextY = originalElement.y + dragOffset.y;
 
   mutateElement(element, {
     x: nextX,

src/element/embeddable.ts

@@ -48,6 +48,9 @@ const RE_VALTOWN =
 const RE_GENERIC_EMBED =
   /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
 
+const RE_GIPHY =
+  /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
+
 const ALLOWED_DOMAINS = new Set([
   "youtube.com",
   "youtu.be",
@@ -60,6 +63,7 @@ const ALLOWED_DOMAINS = new Set([
   "*.simplepdf.eu",
   "stackblitz.com",
   "val.town",
+  "giphy.com",
 ]);
 
 const createSrcDoc = (body: string) => {
@@ -309,6 +313,10 @@ export const extractSrc = (htmlString: string): string => {
     return gistMatch[1];
   }
 
+  if (RE_GIPHY.test(htmlString)) {
+    return `https://giphy.com/embed/${RE_GIPHY.exec(htmlString)![1]}`;
+  }
+
   const match = htmlString.match(RE_GENERIC_EMBED);
   if (match && match.length === 2) {
     return match[1];

src/element/linearElementEditor.ts

@@ -21,6 +21,7 @@ import {
 } from "../math";
 import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
 import {
+  Bounds,
   getCurvePathOps,
   getElementPointsCoords,
   getMinMaxXYFromCurvePathOps,
@@ -1316,7 +1317,7 @@ export class LinearElementEditor {
 
   static getMinMaxXYWithBoundText = (
     element: ExcalidrawLinearElement,
-    elementBounds: [number, number, number, number],
+    elementBounds: Bounds,
     boundTextElement: ExcalidrawTextElementWithContainer,
   ): [number, number, number, number, number, number] => {
     let [x1, y1, x2, y2] = elementBounds;

src/element/resizeTest.ts

@@ -13,6 +13,7 @@ import {
   MaybeTransformHandleType,
 } from "./transformHandles";
 import { AppState, Zoom } from "../types";
+import { Bounds } from "./bounds";
 
 const isInsideTransformHandle = (
   transformHandle: TransformHandle,
@@ -87,7 +88,7 @@ export const getElementWithTransformHandleType = (
 };
 
 export const getTransformHandleTypeFromCoords = (
-  [x1, y1, x2, y2]: readonly [number, number, number, number],
+  [x1, y1, x2, y2]: Bounds,
   scenePointerX: number,
   scenePointerY: number,
   zoom: Zoom,

src/element/textWysiwyg.test.tsx

@@ -8,7 +8,7 @@ import {
   mockBoundingClientRect,
   restoreOriginalGetBoundingClientRect,
 } from "../tests/test-utils";
-import { queryByText, waitFor } from "@testing-library/react";
+import { queryByText } from "@testing-library/react";
 
 import { FONT_FAMILY, TEXT_ALIGN, VERTICAL_ALIGN } from "../constants";
 import {
@@ -18,6 +18,7 @@ import {
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
 import { getOriginalContainerHeightFromCache } from "./textWysiwyg";
+import { getTextEditor } from "../tests/queries/dom";
 
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -25,18 +26,6 @@ ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 const tab = "    ";
 const mouse = new Pointer("mouse");
 
-const getTextEditor = async (waitForEditor = false) => {
-  const query = () =>
-    document.querySelector(
-      ".excalidraw-textEditorContainer > textarea",
-    ) as HTMLTextAreaElement;
-  if (waitForEditor) {
-    waitFor(() => expect(query()).not.toBe(null));
-    return query();
-  }
-  return query();
-};
-
 const updateTextEditor = (editor: HTMLTextAreaElement, value: string) => {
   fireEvent.change(editor, { target: { value } });
   editor.dispatchEvent(new Event("input"));
@@ -206,7 +195,7 @@ describe("textWysiwyg", () => {
 
       mouse.clickAt(text.x + 50, text.y + 50);
 
-      const editor = await getTextEditor();
+      const editor = await getTextEditor(false);
 
       expect(editor).not.toBe(null);
       expect(h.state.editingElement?.id).toBe(text.id);
@@ -228,7 +217,7 @@ describe("textWysiwyg", () => {
 
       mouse.doubleClickAt(text.x + 50, text.y + 50);
 
-      const editor = await getTextEditor();
+      const editor = await getTextEditor(false);
 
       expect(editor).not.toBe(null);
       expect(h.state.editingElement?.id).toBe(text.id);
@@ -1436,7 +1425,7 @@ describe("textWysiwyg", () => {
               type: "text",
             },
           ],
-          fillStyle: "hachure",
+          fillStyle: "solid",
           groupIds: [],
           height: 35,
           isDeleted: false,
@@ -1449,7 +1438,7 @@ describe("textWysiwyg", () => {
           },
           strokeColor: "#1e1e1e",
           strokeStyle: "solid",
-          strokeWidth: 1,
+          strokeWidth: 2,
           type: "rectangle",
           updated: 1,
           version: 1,

src/element/transformHandles.ts

@@ -4,7 +4,7 @@ import {
   PointerType,
 } from "./types";
 
-import { getElementAbsoluteCoords } from "./bounds";
+import { Bounds, getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { InteractiveCanvasAppState, Zoom } from "../types";
 import { isTextElement } from ".";
@@ -23,7 +23,7 @@ export type TransformHandleDirection =
 
 export type TransformHandleType = TransformHandleDirection | "rotation";
 
-export type TransformHandle = [number, number, number, number];
+export type TransformHandle = Bounds;
 export type TransformHandles = Partial<{
   [T in TransformHandleType]: TransformHandle;
 }>;

src/emitter.ts

@@ -0,0 +1,47 @@
+type Subscriber<T extends any[]> = (...payload: T) => void;
+
+export class Emitter<T extends any[] = []> {
+  public subscribers: Subscriber<T>[] = [];
+  public value: T | undefined;
+  private updateOnChangeOnly: boolean;
+
+  constructor(opts?: { initialState?: T; updateOnChangeOnly?: boolean }) {
+    this.updateOnChangeOnly = opts?.updateOnChangeOnly ?? false;
+    this.value = opts?.initialState;
+  }
+
+  /**
+   * Attaches subscriber
+   *
+   * @returns unsubscribe function
+   */
+  on(...handlers: Subscriber<T>[] | Subscriber<T>[][]) {
+    const _handlers = handlers
+      .flat()
+      .filter((item) => typeof item === "function");
+
+    this.subscribers.push(..._handlers);
+
+    return () => this.off(_handlers);
+  }
+
+  off(...handlers: Subscriber<T>[] | Subscriber<T>[][]) {
+    const _handlers = handlers.flat();
+    this.subscribers = this.subscribers.filter(
+      (handler) => !_handlers.includes(handler),
+    );
+  }
+
+  trigger(...payload: T): any[] {
+    if (this.updateOnChangeOnly && this.value === payload) {
+      return [];
+    }
+    this.value = payload;
+    return this.subscribers.map((handler) => handler(...payload));
+  }
+
+  destroy() {
+    this.subscribers = [];
+    this.value = undefined;
+  }
+}

src/frame.test.tsx

@@ -123,7 +123,7 @@ describe("adding elements to frames", () => {
   const commonTestCases = async (
     func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
   ) => {
-    describe("when frame is in a layer below", async () => {
+    describe.skip("when frame is in a layer below", async () => {
       it("should add an element", async () => {
         h.elements = [frame, rect2];
 
@@ -167,7 +167,7 @@ describe("adding elements to frames", () => {
       });
     });
 
-    describe("when frame is in a layer above", async () => {
+    describe.skip("when frame is in a layer above", async () => {
       it("should add an element", async () => {
         h.elements = [rect2, frame];
 
@@ -212,7 +212,7 @@ describe("adding elements to frames", () => {
     });
 
     describe("when frame is in an inner layer", async () => {
-      it("should add elements", async () => {
+      it.skip("should add elements", async () => {
         h.elements = [rect2, frame, rect3];
 
         func(frame, rect2);
@@ -223,7 +223,7 @@ describe("adding elements to frames", () => {
         expectEqualIds([rect2, rect3, frame]);
       });
 
-      it("should add elements when there are other other elements in between", async () => {
+      it.skip("should add elements when there are other other elements in between", async () => {
         h.elements = [rect2, rect1, frame, rect4, rect3];
 
         func(frame, rect2);
@@ -234,7 +234,7 @@ describe("adding elements to frames", () => {
         expectEqualIds([rect1, rect2, rect3, frame, rect4]);
       });
 
-      it("should add elements when there are other elements in between and the order is reversed", async () => {
+      it.skip("should add elements when there are other elements in between and the order is reversed", async () => {
         h.elements = [rect3, rect4, frame, rect2, rect1];
 
         func(frame, rect2);
@@ -289,7 +289,7 @@ describe("adding elements to frames", () => {
   describe("resizing frame over elements", async () => {
     await commonTestCases(resizeFrameOverElement);
 
-    it("resizing over text containers and labelled arrows", async () => {
+    it.skip("resizing over text containers and labelled arrows", async () => {
       await resizingTest(
         "rectangle",
         ["frame", "rectangle", "text"],
@@ -339,7 +339,7 @@ describe("adding elements to frames", () => {
       // );
     });
 
-    it("should add arrow bound with text when frame is in a layer below", async () => {
+    it.skip("should add arrow bound with text when frame is in a layer below", async () => {
       h.elements = [frame, arrow, text];
 
       resizeFrameOverElement(frame, arrow);
@@ -359,7 +359,7 @@ describe("adding elements to frames", () => {
       expectEqualIds([arrow, text, frame]);
     });
 
-    it("should add arrow bound with text when frame is in an inner layer", async () => {
+    it.skip("should add arrow bound with text when frame is in an inner layer", async () => {
       h.elements = [arrow, frame, text];
 
       resizeFrameOverElement(frame, arrow);
@@ -371,7 +371,7 @@ describe("adding elements to frames", () => {
   });
 
   describe("resizing frame over elements but downwards", async () => {
-    it("should add elements when frame is in a layer below", async () => {
+    it.skip("should add elements when frame is in a layer below", async () => {
       h.elements = [frame, rect1, rect2, rect3, rect4];
 
       resizeFrameOverElement(frame, rect4);
@@ -382,7 +382,7 @@ describe("adding elements to frames", () => {
       expectEqualIds([rect2, rect3, frame, rect4, rect1]);
     });
 
-    it("should add elements when frame is in a layer above", async () => {
+    it.skip("should add elements when frame is in a layer above", async () => {
       h.elements = [rect1, rect2, rect3, rect4, frame];
 
       resizeFrameOverElement(frame, rect4);
@@ -393,7 +393,7 @@ describe("adding elements to frames", () => {
       expectEqualIds([rect1, rect2, rect3, frame, rect4]);
     });
 
-    it("should add elements when frame is in an inner layer", async () => {
+    it.skip("should add elements when frame is in an inner layer", async () => {
       h.elements = [rect1, rect2, frame, rect3, rect4];
 
       resizeFrameOverElement(frame, rect4);
@@ -408,7 +408,7 @@ describe("adding elements to frames", () => {
   describe("dragging elements into the frame", async () => {
     await commonTestCases(dragElementIntoFrame);
 
-    it("should drag element inside, duplicate it and keep it in frame", () => {
+    it.skip("should drag element inside, duplicate it and keep it in frame", () => {
       h.elements = [frame, rect2];
 
       dragElementIntoFrame(frame, rect2);
@@ -422,7 +422,7 @@ describe("adding elements to frames", () => {
       expectEqualIds([rect2_copy, rect2, frame]);
     });
 
-    it("should drag element inside, duplicate it and remove it from frame", () => {
+    it.skip("should drag element inside, duplicate it and remove it from frame", () => {
       h.elements = [frame, rect2];
 
       dragElementIntoFrame(frame, rect2);

src/frame.ts

@@ -19,10 +19,10 @@ import { mutateElement } from "./element/mutateElement";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { isFrameElement } from "./element";
-import { moveOneRight } from "./zindex";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
 import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 import { getElementLineSegments } from "./element/bounds";
+import { doLineSegmentsIntersect } from "./packages/utils";
 
 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (
@@ -56,130 +56,21 @@ export const bindElementsToFramesAfterDuplication = (
   }
 };
 
-// --------------------------- Frame Geometry ---------------------------------
-class Point {
-  x: number;
-  y: number;
+export function isElementIntersectingFrame(
+  element: ExcalidrawElement,
+  frame: ExcalidrawFrameElement,
+) {
+  const frameLineSegments = getElementLineSegments(frame);
 
-  constructor(x: number, y: number) {
-    this.x = x;
-    this.y = y;
-  }
-}
+  const elementLineSegments = getElementLineSegments(element);
 
-class LineSegment {
-  first: Point;
-  second: Point;
+  const intersecting = frameLineSegments.some((frameLineSegment) =>
+    elementLineSegments.some((elementLineSegment) =>
+      doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
+    ),
+  );
 
-  constructor(pointA: Point, pointB: Point) {
-    this.first = pointA;
-    this.second = pointB;
-  }
-
-  public getBoundingBox(): [Point, Point] {
-    return [
-      new Point(
-        Math.min(this.first.x, this.second.x),
-        Math.min(this.first.y, this.second.y),
-      ),
-      new Point(
-        Math.max(this.first.x, this.second.x),
-        Math.max(this.first.y, this.second.y),
-      ),
-    ];
-  }
-}
-
-// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
-class FrameGeometry {
-  private static EPSILON = 0.000001;
-
-  private static crossProduct(a: Point, b: Point) {
-    return a.x * b.y - b.x * a.y;
-  }
-
-  private static doBoundingBoxesIntersect(
-    a: [Point, Point],
-    b: [Point, Point],
-  ) {
-    return (
-      a[0].x <= b[1].x &&
-      a[1].x >= b[0].x &&
-      a[0].y <= b[1].y &&
-      a[1].y >= b[0].y
-    );
-  }
-
-  private static isPointOnLine(a: LineSegment, b: Point) {
-    const aTmp = new LineSegment(
-      new Point(0, 0),
-      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
-    );
-    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
-    const r = this.crossProduct(aTmp.second, bTmp);
-    return Math.abs(r) < this.EPSILON;
-  }
-
-  private static isPointRightOfLine(a: LineSegment, b: Point) {
-    const aTmp = new LineSegment(
-      new Point(0, 0),
-      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
-    );
-    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
-    return this.crossProduct(aTmp.second, bTmp) < 0;
-  }
-
-  private static lineSegmentTouchesOrCrossesLine(
-    a: LineSegment,
-    b: LineSegment,
-  ) {
-    return (
-      this.isPointOnLine(a, b.first) ||
-      this.isPointOnLine(a, b.second) ||
-      (this.isPointRightOfLine(a, b.first)
-        ? !this.isPointRightOfLine(a, b.second)
-        : this.isPointRightOfLine(a, b.second))
-    );
-  }
-
-  private static doLineSegmentsIntersect(
-    a: [readonly [number, number], readonly [number, number]],
-    b: [readonly [number, number], readonly [number, number]],
-  ) {
-    const aSegment = new LineSegment(
-      new Point(a[0][0], a[0][1]),
-      new Point(a[1][0], a[1][1]),
-    );
-    const bSegment = new LineSegment(
-      new Point(b[0][0], b[0][1]),
-      new Point(b[1][0], b[1][1]),
-    );
-
-    const box1 = aSegment.getBoundingBox();
-    const box2 = bSegment.getBoundingBox();
-    return (
-      this.doBoundingBoxesIntersect(box1, box2) &&
-      this.lineSegmentTouchesOrCrossesLine(aSegment, bSegment) &&
-      this.lineSegmentTouchesOrCrossesLine(bSegment, aSegment)
-    );
-  }
-
-  public static isElementIntersectingFrame(
-    element: ExcalidrawElement,
-    frame: ExcalidrawFrameElement,
-  ) {
-    const frameLineSegments = getElementLineSegments(frame);
-
-    const elementLineSegments = getElementLineSegments(element);
-
-    const intersecting = frameLineSegments.some((frameLineSegment) =>
-      elementLineSegments.some((elementLineSegment) =>
-        this.doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
-      ),
-    );
-
-    return intersecting;
-  }
+  return intersecting;
 }
 
 export const getElementsCompletelyInFrame = (
@@ -207,10 +98,7 @@ export const isElementContainingFrame = (
 export const getElementsIntersectingFrame = (
   elements: readonly ExcalidrawElement[],
   frame: ExcalidrawFrameElement,
-) =>
-  elements.filter((element) =>
-    FrameGeometry.isElementIntersectingFrame(element, frame),
-  );
+) => elements.filter((element) => isElementIntersectingFrame(element, frame));
 
 export const elementsAreInFrameBounds = (
   elements: readonly ExcalidrawElement[],
@@ -236,7 +124,7 @@ export const elementOverlapsWithFrame = (
 ) => {
   return (
     elementsAreInFrameBounds([element], frame) ||
-    FrameGeometry.isElementIntersectingFrame(element, frame) ||
+    isElementIntersectingFrame(element, frame) ||
     isElementContainingFrame([frame], element, frame)
   );
 };
@@ -273,7 +161,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (
   return !!elementsInGroup.find(
     (element) =>
       elementsAreInFrameBounds([element], frame) ||
-      FrameGeometry.isElementIntersectingFrame(element, frame),
+      isElementIntersectingFrame(element, frame),
   );
 };
 
@@ -294,7 +182,7 @@ export const groupsAreCompletelyOutOfFrame = (
     elementsInGroup.find(
       (element) =>
         elementsAreInFrameBounds([element], frame) ||
-        FrameGeometry.isElementIntersectingFrame(element, frame),
+        isElementIntersectingFrame(element, frame),
     ) === undefined
   );
 };
@@ -323,24 +211,7 @@ export const groupByFrames = (elements: readonly ExcalidrawElement[]) => {
 export const getFrameElements = (
   allElements: ExcalidrawElementsIncludingDeleted,
   frameId: string,
-  opts?: { includeBoundArrows?: boolean },
-) => {
-  return allElements.filter((element) => {
-    if (element.frameId === frameId) {
-      return true;
-    }
-    if (opts?.includeBoundArrows && element.type === "arrow") {
-      const bindingId = element.startBinding?.elementId;
-      if (bindingId) {
-        const boundElement = Scene.getScene(element)?.getElement(bindingId);
-        if (boundElement?.frameId === frameId) {
-          return true;
-        }
-      }
-    }
-    return false;
-  });
-};
+) => allElements.filter((element) => element.frameId === frameId);
 
 export const getElementsInResizingFrame = (
   allElements: ExcalidrawElementsIncludingDeleted,
@@ -371,7 +242,7 @@ export const getElementsInResizingFrame = (
   );
 
   for (const element of elementsNotCompletelyInFrame) {
-    if (!FrameGeometry.isElementIntersectingFrame(element, frame)) {
+    if (!isElementIntersectingFrame(element, frame)) {
       if (element.groupIds.length === 0) {
         nextElementsInFrame.delete(element);
       }
@@ -468,14 +339,6 @@ export const getContainingFrame = (
   return null;
 };
 
-export const isValidFrameChild = (element: ExcalidrawElement) => {
-  return (
-    element.type !== "frame" &&
-    // arrows that are bound to elements cannot be frame children
-    (element.type !== "arrow" || (!element.startBinding && !element.endBinding))
-  );
-};
-
 // --------------------------- Frame Operations -------------------------------
 
 /**
@@ -488,20 +351,17 @@ export const addElementsToFrame = (
   elementsToAdd: NonDeletedExcalidrawElement[],
   frame: ExcalidrawFrameElement,
 ) => {
-  const { allElementsIndexMap, currTargetFrameChildrenMap } =
-    allElements.reduce(
-      (acc, element, index) => {
-        acc.allElementsIndexMap.set(element.id, index);
-        if (element.frameId === frame.id) {
-          acc.currTargetFrameChildrenMap.set(element.id, true);
-        }
-        return acc;
-      },
-      {
-        allElementsIndexMap: new Map<ExcalidrawElement["id"], number>(),
-        currTargetFrameChildrenMap: new Map<ExcalidrawElement["id"], true>(),
-      },
-    );
+  const { currTargetFrameChildrenMap } = allElements.reduce(
+    (acc, element, index) => {
+      if (element.frameId === frame.id) {
+        acc.currTargetFrameChildrenMap.set(element.id, true);
+      }
+      return acc;
+    },
+    {
+      currTargetFrameChildrenMap: new Map<ExcalidrawElement["id"], true>(),
+    },
+  );
 
   const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
 
@@ -514,9 +374,6 @@ export const addElementsToFrame = (
     elementsToAdd,
   )) {
     if (!currTargetFrameChildrenMap.has(element.id)) {
-      if (!isValidFrameChild(element)) {
-        continue;
-      }
       finalElementsToAdd.push(element);
     }
 
@@ -530,66 +387,6 @@ export const addElementsToFrame = (
     }
   }
 
-  const finalElementsToAddSet = new Set(finalElementsToAdd.map((el) => el.id));
-
-  const nextElements: ExcalidrawElement[] = [];
-
-  const processedElements = new Set<ExcalidrawElement["id"]>();
-
-  for (const element of allElements) {
-    if (processedElements.has(element.id)) {
-      continue;
-    }
-
-    processedElements.add(element.id);
-
-    if (
-      finalElementsToAddSet.has(element.id) ||
-      (element.frameId && element.frameId === frame.id)
-    ) {
-      // will be added in bulk once we process target frame
-      continue;
-    }
-
-    // target frame
-    if (element.id === frame.id) {
-      const currFrameChildren = getFrameElements(allElements, frame.id);
-      currFrameChildren.forEach((child) => {
-        processedElements.add(child.id);
-      });
-
-      // if not found, add all children on top by assigning the lowest index
-      const targetFrameIndex = allElementsIndexMap.get(frame.id) ?? -1;
-
-      const { newChildren_left, newChildren_right } = finalElementsToAdd.reduce(
-        (acc, element) => {
-          // if index not found, add on top of current frame children
-          const elementIndex = allElementsIndexMap.get(element.id) ?? Infinity;
-          if (elementIndex < targetFrameIndex) {
-            acc.newChildren_left.push(element);
-          } else {
-            acc.newChildren_right.push(element);
-          }
-          return acc;
-        },
-        {
-          newChildren_left: [] as ExcalidrawElement[],
-          newChildren_right: [] as ExcalidrawElement[],
-        },
-      );
-
-      nextElements.push(
-        ...newChildren_left,
-        ...currFrameChildren,
-        ...newChildren_right,
-        element,
-      );
-      continue;
-    }
-
-    nextElements.push(element);
-  }
-
   for (const element of finalElementsToAdd) {
     mutateElement(
       element,
@@ -599,8 +396,7 @@ export const addElementsToFrame = (
       false,
     );
   }
-
-  return nextElements;
+  return allElements.slice();
 };
 
 export const removeElementsFromFrame = (
@@ -608,20 +404,34 @@ export const removeElementsFromFrame = (
   elementsToRemove: NonDeletedExcalidrawElement[],
   appState: AppState,
 ) => {
-  const _elementsToRemove: ExcalidrawElement[] = [];
+  const _elementsToRemove = new Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement
+  >();
+
+  const toRemoveElementsByFrame = new Map<
+    ExcalidrawFrameElement["id"],
+    ExcalidrawElement[]
+  >();
 
   for (const element of elementsToRemove) {
     if (element.frameId) {
-      _elementsToRemove.push(element);
+      _elementsToRemove.set(element.id, element);
+
+      const arr = toRemoveElementsByFrame.get(element.frameId) || [];
+      arr.push(element);
 
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
-        _elementsToRemove.push(boundTextElement);
+        _elementsToRemove.set(boundTextElement.id, boundTextElement);
+        arr.push(boundTextElement);
       }
+
+      toRemoveElementsByFrame.set(element.frameId, arr);
     }
   }
 
-  for (const element of _elementsToRemove) {
+  for (const [, element] of _elementsToRemove) {
     mutateElement(
       element,
       {
@@ -631,13 +441,7 @@ export const removeElementsFromFrame = (
     );
   }
 
-  const nextElements = moveOneRight(
-    allElements,
-    appState,
-    Array.from(_elementsToRemove),
-  );
-
-  return nextElements;
+  return allElements.slice();
 };
 
 export const removeAllElementsFromFrame = (

src/math.ts

@@ -505,3 +505,7 @@ export const rangeIntersection = (
 
   return null;
 };
+
+export const isValueInRange = (value: number, min: number, max: number) => {
+  return value >= min && value <= max;
+};

src/packages/bbox.ts

@@ -0,0 +1,65 @@
+import { Bounds } from "../element/bounds";
+import { Point } from "../types";
+
+export type LineSegment = [Point, Point];
+
+export function getBBox(line: LineSegment): Bounds {
+  return [
+    Math.min(line[0][0], line[1][0]),
+    Math.min(line[0][1], line[1][1]),
+    Math.max(line[0][0], line[1][0]),
+    Math.max(line[0][1], line[1][1]),
+  ];
+}
+
+export function crossProduct(a: Point, b: Point) {
+  return a[0] * b[1] - b[0] * a[1];
+}
+
+export function doBBoxesIntersect(a: Bounds, b: Bounds) {
+  return a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
+}
+
+export function translate(a: Point, b: Point): Point {
+  return [a[0] - b[0], a[1] - b[1]];
+}
+
+const EPSILON = 0.000001;
+
+export function isPointOnLine(l: LineSegment, p: Point) {
+  const p1 = translate(l[1], l[0]);
+  const p2 = translate(p, l[0]);
+
+  const r = crossProduct(p1, p2);
+
+  return Math.abs(r) < EPSILON;
+}
+
+export function isPointRightOfLine(l: LineSegment, p: Point) {
+  const p1 = translate(l[1], l[0]);
+  const p2 = translate(p, l[0]);
+
+  return crossProduct(p1, p2) < 0;
+}
+
+export function isLineSegmentTouchingOrCrossingLine(
+  a: LineSegment,
+  b: LineSegment,
+) {
+  return (
+    isPointOnLine(a, b[0]) ||
+    isPointOnLine(a, b[1]) ||
+    (isPointRightOfLine(a, b[0])
+      ? !isPointRightOfLine(a, b[1])
+      : isPointRightOfLine(a, b[1]))
+  );
+}
+
+// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
+export function doLineSegmentsIntersect(a: LineSegment, b: LineSegment) {
+  return (
+    doBBoxesIntersect(getBBox(a), getBBox(b)) &&
+    isLineSegmentTouchingOrCrossingLine(a, b) &&
+    isLineSegmentTouchingOrCrossingLine(b, a)
+  );
+}

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

@@ -1,12 +1,12 @@
 [
   {
     "path": "dist/excalidraw.production.min.js",
-    "limit": "305 kB"
+    "limit": "320 kB"
   },
   {
     "path": "dist/excalidraw-assets/locales",
     "name": "dist/excalidraw-assets/locales",
-    "limit": "270 kB"
+    "limit": "290 kB"
   },
   {
     "path": "dist/excalidraw-assets/vendor-*.js",

src/packages/excalidraw/CHANGELOG.md

@@ -15,7 +15,9 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [7078](https://github.com/excalidraw/excalidraw/pull/7078)
+- Export `elementsOverlappingBBox`, `isElementInsideBBox`, `elementPartiallyOverlapsWithOrContainsBBox` helpers for filtering/checking if elements within bounds. [#6727](https://github.com/excalidraw/excalidraw/pull/6727)
+- Regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping [#7195](https://github.com/excalidraw/excalidraw/pull/7195)
+- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [#7078](https://github.com/excalidraw/excalidraw/pull/7078)
 
 ## 0.16.1 (2023-09-21)
 

src/packages/excalidraw/index.tsx

@@ -254,3 +254,9 @@ export { DefaultSidebar } from "../../components/DefaultSidebar";
 
 export { normalizeLink } from "../../data/url";
 export { convertToExcalidrawElements } from "../../data/transform";
+
+export {
+  elementsOverlappingBBox,
+  isElementInsideBBox,
+  elementPartiallyOverlapsWithOrContainsBBox,
+} from "../withinBounds";

src/packages/utils.ts

@@ -229,6 +229,12 @@ export const exportToClipboard = async (
   }
 };
 
+export * from "./bbox";
+export {
+  elementsOverlappingBBox,
+  isElementInsideBBox,
+  elementPartiallyOverlapsWithOrContainsBBox,
+} from "./withinBounds";
 export { serializeAsJSON, serializeLibraryAsJSON } from "../data/json";
 export {
   loadFromBlob,

src/packages/withinBounds.test.ts

@@ -0,0 +1,262 @@
+import { Bounds } from "../element/bounds";
+import { API } from "../tests/helpers/api";
+import {
+  elementPartiallyOverlapsWithOrContainsBBox,
+  elementsOverlappingBBox,
+  isElementInsideBBox,
+} from "./withinBounds";
+
+const makeElement = (x: number, y: number, width: number, height: number) =>
+  API.createElement({
+    type: "rectangle",
+    x,
+    y,
+    width,
+    height,
+  });
+
+const makeBBox = (
+  minX: number,
+  minY: number,
+  maxX: number,
+  maxY: number,
+): Bounds => [minX, minY, maxX, maxY];
+
+describe("isElementInsideBBox()", () => {
+  it("should return true if element is fully inside", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    // bbox contains element
+    expect(isElementInsideBBox(makeElement(0, 0, 100, 100), bbox)).toBe(true);
+    expect(isElementInsideBBox(makeElement(10, 10, 90, 90), bbox)).toBe(true);
+  });
+
+  it("should return false if element is only partially overlapping", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    // element contains bbox
+    expect(isElementInsideBBox(makeElement(-10, -10, 110, 110), bbox)).toBe(
+      false,
+    );
+
+    // element overlaps bbox from top-left
+    expect(isElementInsideBBox(makeElement(-10, -10, 100, 100), bbox)).toBe(
+      false,
+    );
+    // element overlaps bbox from top-right
+    expect(isElementInsideBBox(makeElement(90, -10, 100, 100), bbox)).toBe(
+      false,
+    );
+    // element overlaps bbox from bottom-left
+    expect(isElementInsideBBox(makeElement(-10, 90, 100, 100), bbox)).toBe(
+      false,
+    );
+    // element overlaps bbox from bottom-right
+    expect(isElementInsideBBox(makeElement(90, 90, 100, 100), bbox)).toBe(
+      false,
+    );
+  });
+
+  it("should return false if element outside", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    // outside diagonally
+    expect(isElementInsideBBox(makeElement(110, 110, 100, 100), bbox)).toBe(
+      false,
+    );
+
+    // outside on the left
+    expect(isElementInsideBBox(makeElement(-110, 10, 50, 50), bbox)).toBe(
+      false,
+    );
+    // outside on the right
+    expect(isElementInsideBBox(makeElement(110, 10, 50, 50), bbox)).toBe(false);
+    // outside on the top
+    expect(isElementInsideBBox(makeElement(10, -110, 50, 50), bbox)).toBe(
+      false,
+    );
+    // outside on the bottom
+    expect(isElementInsideBBox(makeElement(10, 110, 50, 50), bbox)).toBe(false);
+  });
+
+  it("should return true if bbox contains element and flag enabled", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    // element contains bbox
+    expect(
+      isElementInsideBBox(makeElement(-10, -10, 110, 110), bbox, true),
+    ).toBe(true);
+
+    // bbox contains element
+    expect(isElementInsideBBox(makeElement(0, 0, 100, 100), bbox)).toBe(true);
+    expect(isElementInsideBBox(makeElement(10, 10, 90, 90), bbox)).toBe(true);
+  });
+});
+
+describe("elementPartiallyOverlapsWithOrContainsBBox()", () => {
+  it("should return true if element overlaps, is inside, or contains", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    // bbox contains element
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(0, 0, 100, 100),
+        bbox,
+      ),
+    ).toBe(true);
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(10, 10, 90, 90),
+        bbox,
+      ),
+    ).toBe(true);
+
+    // element contains bbox
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(-10, -10, 110, 110),
+        bbox,
+      ),
+    ).toBe(true);
+
+    // element overlaps bbox from top-left
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(-10, -10, 100, 100),
+        bbox,
+      ),
+    ).toBe(true);
+    // element overlaps bbox from top-right
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(90, -10, 100, 100),
+        bbox,
+      ),
+    ).toBe(true);
+    // element overlaps bbox from bottom-left
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(-10, 90, 100, 100),
+        bbox,
+      ),
+    ).toBe(true);
+    // element overlaps bbox from bottom-right
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(90, 90, 100, 100),
+        bbox,
+      ),
+    ).toBe(true);
+  });
+
+  it("should return false if element does not overlap", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    // outside diagonally
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(110, 110, 100, 100),
+        bbox,
+      ),
+    ).toBe(false);
+
+    // outside on the left
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(-110, 10, 50, 50),
+        bbox,
+      ),
+    ).toBe(false);
+    // outside on the right
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(110, 10, 50, 50),
+        bbox,
+      ),
+    ).toBe(false);
+    // outside on the top
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(10, -110, 50, 50),
+        bbox,
+      ),
+    ).toBe(false);
+    // outside on the bottom
+    expect(
+      elementPartiallyOverlapsWithOrContainsBBox(
+        makeElement(10, 110, 50, 50),
+        bbox,
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("elementsOverlappingBBox()", () => {
+  it("should return elements that overlap bbox", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    const rectOutside = makeElement(110, 110, 100, 100);
+    const rectInside = makeElement(10, 10, 90, 90);
+    const rectContainingBBox = makeElement(-10, -10, 110, 110);
+    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
+
+    expect(
+      elementsOverlappingBBox({
+        bounds: bbox,
+        type: "overlap",
+        elements: [
+          rectOutside,
+          rectInside,
+          rectContainingBBox,
+          rectOverlappingTopLeft,
+        ],
+      }),
+    ).toEqual([rectInside, rectContainingBBox, rectOverlappingTopLeft]);
+  });
+
+  it("should return elements inside/containing bbox", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    const rectOutside = makeElement(110, 110, 100, 100);
+    const rectInside = makeElement(10, 10, 90, 90);
+    const rectContainingBBox = makeElement(-10, -10, 110, 110);
+    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
+
+    expect(
+      elementsOverlappingBBox({
+        bounds: bbox,
+        type: "contain",
+        elements: [
+          rectOutside,
+          rectInside,
+          rectContainingBBox,
+          rectOverlappingTopLeft,
+        ],
+      }),
+    ).toEqual([rectInside, rectContainingBBox]);
+  });
+
+  it("should return elements inside bbox", () => {
+    const bbox = makeBBox(0, 0, 100, 100);
+
+    const rectOutside = makeElement(110, 110, 100, 100);
+    const rectInside = makeElement(10, 10, 90, 90);
+    const rectContainingBBox = makeElement(-10, -10, 110, 110);
+    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
+
+    expect(
+      elementsOverlappingBBox({
+        bounds: bbox,
+        type: "inside",
+        elements: [
+          rectOutside,
+          rectInside,
+          rectContainingBBox,
+          rectOverlappingTopLeft,
+        ],
+      }),
+    ).toEqual([rectInside]);
+  });
+
+  // TODO test linear, freedraw, and diamond element types (+rotated)
+});

src/packages/withinBounds.ts

@@ -0,0 +1,206 @@
+import type {
+  ExcalidrawElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawLinearElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
+import {
+  isArrowElement,
+  isFreeDrawElement,
+  isLinearElement,
+  isTextElement,
+} from "../element/typeChecks";
+import { isValueInRange, rotatePoint } from "../math";
+import type { Point } from "../types";
+import { Bounds } from "../element/bounds";
+
+type Element = NonDeletedExcalidrawElement;
+type Elements = readonly NonDeletedExcalidrawElement[];
+
+type Points = readonly Point[];
+
+/** @returns vertices relative to element's top-left [0,0] position  */
+const getNonLinearElementRelativePoints = (
+  element: Exclude<
+    Element,
+    ExcalidrawLinearElement | ExcalidrawFreeDrawElement
+  >,
+): [TopLeft: Point, TopRight: Point, BottomRight: Point, BottomLeft: Point] => {
+  if (element.type === "diamond") {
+    return [
+      [element.width / 2, 0],
+      [element.width, element.height / 2],
+      [element.width / 2, element.height],
+      [0, element.height / 2],
+    ];
+  }
+  return [
+    [0, 0],
+    [0 + element.width, 0],
+    [0 + element.width, element.height],
+    [0, element.height],
+  ];
+};
+
+/** @returns vertices relative to element's top-left [0,0] position  */
+const getElementRelativePoints = (element: ExcalidrawElement): Points => {
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
+    return element.points;
+  }
+  return getNonLinearElementRelativePoints(element);
+};
+
+const getMinMaxPoints = (points: Points) => {
+  const ret = points.reduce(
+    (limits, [x, y]) => {
+      limits.minY = Math.min(limits.minY, y);
+      limits.minX = Math.min(limits.minX, x);
+
+      limits.maxX = Math.max(limits.maxX, x);
+      limits.maxY = Math.max(limits.maxY, y);
+
+      return limits;
+    },
+    {
+      minX: Infinity,
+      minY: Infinity,
+      maxX: -Infinity,
+      maxY: -Infinity,
+      cx: 0,
+      cy: 0,
+    },
+  );
+
+  ret.cx = (ret.maxX + ret.minX) / 2;
+  ret.cy = (ret.maxY + ret.minY) / 2;
+
+  return ret;
+};
+
+const getRotatedBBox = (element: Element): Bounds => {
+  const points = getElementRelativePoints(element);
+
+  const { cx, cy } = getMinMaxPoints(points);
+  const centerPoint: Point = [cx, cy];
+
+  const rotatedPoints = points.map((point) =>
+    rotatePoint([point[0], point[1]], centerPoint, element.angle),
+  );
+  const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
+
+  return [
+    minX + element.x,
+    minY + element.y,
+    maxX + element.x,
+    maxY + element.y,
+  ];
+};
+
+export const isElementInsideBBox = (
+  element: Element,
+  bbox: Bounds,
+  eitherDirection = false,
+): boolean => {
+  const elementBBox = getRotatedBBox(element);
+
+  const elementInsideBbox =
+    bbox[0] <= elementBBox[0] &&
+    bbox[2] >= elementBBox[2] &&
+    bbox[1] <= elementBBox[1] &&
+    bbox[3] >= elementBBox[3];
+
+  if (!eitherDirection) {
+    return elementInsideBbox;
+  }
+
+  if (elementInsideBbox) {
+    return true;
+  }
+
+  return (
+    elementBBox[0] <= bbox[0] &&
+    elementBBox[2] >= bbox[2] &&
+    elementBBox[1] <= bbox[1] &&
+    elementBBox[3] >= bbox[3]
+  );
+};
+
+export const elementPartiallyOverlapsWithOrContainsBBox = (
+  element: Element,
+  bbox: Bounds,
+): boolean => {
+  const elementBBox = getRotatedBBox(element);
+
+  return (
+    (isValueInRange(elementBBox[0], bbox[0], bbox[2]) ||
+      isValueInRange(bbox[0], elementBBox[0], elementBBox[2])) &&
+    (isValueInRange(elementBBox[1], bbox[1], bbox[3]) ||
+      isValueInRange(bbox[1], elementBBox[1], elementBBox[3]))
+  );
+};
+
+export const elementsOverlappingBBox = ({
+  elements,
+  bounds,
+  type,
+  errorMargin = 0,
+}: {
+  elements: Elements;
+  bounds: Bounds;
+  /** safety offset. Defaults to 0. */
+  errorMargin?: number;
+  /**
+   * - overlap: elements overlapping or inside bounds
+   * - contain: elements inside bounds or bounds inside elements
+   * - inside: elements inside bounds
+   **/
+  type: "overlap" | "contain" | "inside";
+}) => {
+  const adjustedBBox: Bounds = [
+    bounds[0] - errorMargin,
+    bounds[1] - errorMargin,
+    bounds[2] + errorMargin,
+    bounds[3] + errorMargin,
+  ];
+
+  const includedElementSet = new Set<string>();
+
+  for (const element of elements) {
+    if (includedElementSet.has(element.id)) {
+      continue;
+    }
+
+    const isOverlaping =
+      type === "overlap"
+        ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox)
+        : type === "inside"
+        ? isElementInsideBBox(element, adjustedBBox)
+        : isElementInsideBBox(element, adjustedBBox, true);
+
+    if (isOverlaping) {
+      includedElementSet.add(element.id);
+
+      if (element.boundElements) {
+        for (const boundElement of element.boundElements) {
+          includedElementSet.add(boundElement.id);
+        }
+      }
+
+      if (isTextElement(element) && element.containerId) {
+        includedElementSet.add(element.containerId);
+      }
+
+      if (isArrowElement(element)) {
+        if (element.startBinding) {
+          includedElementSet.add(element.startBinding.elementId);
+        }
+
+        if (element.endBinding) {
+          includedElementSet.add(element.endBinding?.elementId);
+        }
+      }
+    }
+  }
+
+  return elements.filter((element) => includedElementSet.has(element.id));
+};

src/renderer/renderScene.ts

@@ -69,7 +69,6 @@ import {
 } from "../element/Hyperlink";
 import { renderSnaps } from "./renderSnaps";
 import {
-  isArrowElement,
   isEmbeddableElement,
   isFrameElement,
   isLinearElement,
@@ -985,10 +984,7 @@ const _renderStaticScene = ({
 
           // TODO do we need to check isElementInFrame here?
           if (frame && isElementInFrame(element, elements, appState)) {
-            // do not clip arrows
-            if (!isArrowElement(element)) {
-              frameClip(frame, context, renderConfig, appState);
-            }
+            frameClip(frame, context, renderConfig, appState);
           }
           renderElement(element, rc, context, renderConfig, appState);
           context.restore();

src/scene/Shape.ts

@@ -12,11 +12,22 @@ import type {
 import { isPathALoop, getCornerRadius } from "../math";
 import { generateFreeDrawShape } from "../renderer/renderElement";
 import { isTransparent, assertNever } from "../utils";
+import { simplify } from "points-on-curve";
+import { ROUGHNESS } from "../constants";
 
 const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
 
 const getDashArrayDotted = (strokeWidth: number) => [1.5, 6 + strokeWidth];
 
+function adjustRoughness(size: number, roughness: number): number {
+  if (size >= 50) {
+    return roughness;
+  }
+  const factor = 2 + (50 - size) / 10;
+
+  return roughness / factor;
+}
+
 export const generateRoughOptions = (
   element: ExcalidrawElement,
   continuousPath = false,
@@ -43,9 +54,13 @@ export const generateRoughOptions = (
     // calculate them (and we don't want the fills to be modified)
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
-    roughness: element.roughness,
+    roughness: adjustRoughness(
+      Math.min(element.width, element.height),
+      element.roughness,
+    ),
     stroke: element.strokeColor,
-    preserveVertices: continuousPath,
+    preserveVertices:
+      continuousPath || element.roughness < ROUGHNESS.cartoonist,
   };
 
   switch (element.type) {
@@ -334,7 +349,8 @@ export const _generateElementShape = (
 
       if (isPathALoop(element.points)) {
         // generate rough polygon to fill freedraw shape
-        shape = generator.polygon(element.points as [number, number][], {
+        const simplifiedPoints = simplify(element.points, 0.75);
+        shape = generator.curve(simplifiedPoints as [number, number][], {
           ...generateRoughOptions(element),
           stroke: "none",
         });

src/scene/comparisons.ts

@@ -39,8 +39,6 @@ export const canChangeRoundness = (type: string) =>
   type === "line" ||
   type === "diamond";
 
-export const hasText = (type: string) => type === "text";
-
 export const canHaveArrowheads = (type: string) => type === "arrow";
 
 export const getElementAtPosition = (

src/scene/export.ts

@@ -1,6 +1,10 @@
 import rough from "roughjs/bin/rough";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
+import {
+  Bounds,
+  getCommonBounds,
+  getElementAbsoluteCoords,
+} from "../element/bounds";
 import { renderSceneToSvg, renderStaticScene } from "../renderer/renderScene";
 import { distance, isOnlyExportingSingleFrame } from "../utils";
 import { AppState, BinaryFiles } from "../types";
@@ -221,7 +225,7 @@ export const exportToSvg = async (
 const getCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
-): [number, number, number, number] => {
+): Bounds => {
   // we should decide if we are exporting the whole canvas
   // if so, we are not clipping elements in the frame
   // and therefore, we should not do anything special

src/scene/index.ts

@@ -14,7 +14,6 @@ export {
   canHaveArrowheads,
   canChangeRoundness,
   getElementAtPosition,
-  hasText,
   getElementsAtPosition,
 } from "./comparisons";
 export { getNormalizedZoom } from "./zoom";

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

@@ -9,7 +9,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "boundElements": null,
   "endArrowhead": "arrow",
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -38,7 +38,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
   "version": 3,
@@ -56,7 +56,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -72,7 +72,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "diamond",
   "updated": 1,
   "version": 2,
@@ -90,7 +90,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -106,7 +106,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "ellipse",
   "updated": 1,
   "version": 2,
@@ -124,7 +124,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "boundElements": null,
   "endArrowhead": null,
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -153,7 +153,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "line",
   "updated": 1,
   "version": 3,
@@ -171,7 +171,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -187,7 +187,7 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
   "version": 2,

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

@@ -5,7 +5,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -21,7 +21,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 1`] = `
   "seed": 1014066025,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
@@ -37,7 +37,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 2`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -53,7 +53,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 2`] = `
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
@@ -69,7 +69,7 @@ exports[`move element > rectangle 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -85,7 +85,7 @@ exports[`move element > rectangle 1`] = `
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
@@ -106,7 +106,7 @@ exports[`move element > rectangles with binding arrow 1`] = `
       "type": "arrow",
     },
   ],
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -122,7 +122,7 @@ exports[`move element > rectangles with binding arrow 1`] = `
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
@@ -143,7 +143,7 @@ exports[`move element > rectangles with binding arrow 2`] = `
       "type": "arrow",
     },
   ],
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 300,
@@ -159,7 +159,7 @@ exports[`move element > rectangles with binding arrow 2`] = `
   "seed": 2019559783,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
   "version": 6,
@@ -181,7 +181,7 @@ exports[`move element > rectangles with binding arrow 3`] = `
     "focus": -0.46666666666666673,
     "gap": 10,
   },
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 81.48231043525051,
@@ -214,7 +214,7 @@ exports[`move element > rectangles with binding arrow 3`] = `
   },
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "line",
   "updated": 1,
   "version": 11,

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

@@ -7,7 +7,7 @@ exports[`multi point mode in linear elements > arrow 1`] = `
   "boundElements": null,
   "endArrowhead": "arrow",
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 110,
@@ -43,7 +43,7 @@ exports[`multi point mode in linear elements > arrow 1`] = `
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
   "version": 7,
@@ -61,7 +61,7 @@ exports[`multi point mode in linear elements > line 1`] = `
   "boundElements": null,
   "endArrowhead": null,
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 110,
@@ -97,7 +97,7 @@ exports[`multi point mode in linear elements > line 1`] = `
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "line",
   "updated": 1,
   "version": 7,

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

@@ -7,7 +7,7 @@ exports[`select single element on the scene > arrow 1`] = `
   "boundElements": null,
   "endArrowhead": "arrow",
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -36,7 +36,7 @@ exports[`select single element on the scene > arrow 1`] = `
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
   "version": 3,
@@ -54,7 +54,7 @@ exports[`select single element on the scene > arrow escape 1`] = `
   "boundElements": null,
   "endArrowhead": null,
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -83,7 +83,7 @@ exports[`select single element on the scene > arrow escape 1`] = `
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "line",
   "updated": 1,
   "version": 3,
@@ -99,7 +99,7 @@ exports[`select single element on the scene > diamond 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -115,7 +115,7 @@ exports[`select single element on the scene > diamond 1`] = `
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "diamond",
   "updated": 1,
   "version": 2,
@@ -131,7 +131,7 @@ exports[`select single element on the scene > ellipse 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -147,7 +147,7 @@ exports[`select single element on the scene > ellipse 1`] = `
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "ellipse",
   "updated": 1,
   "version": 2,
@@ -163,7 +163,7 @@ exports[`select single element on the scene > rectangle 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -179,7 +179,7 @@ exports[`select single element on the scene > rectangle 1`] = `
   "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
   "version": 2,

src/tests/data/__snapshots__/restore.test.ts.snap

@@ -7,7 +7,7 @@ exports[`restoreElements > should restore arrow element correctly 1`] = `
   "boundElements": [],
   "endArrowhead": null,
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -36,7 +36,7 @@ exports[`restoreElements > should restore arrow element correctly 1`] = `
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
   "version": 1,
@@ -160,7 +160,7 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": [],
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -180,7 +180,7 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
   "simulatePressure": true,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "freedraw",
   "updated": 1,
   "version": 1,
@@ -198,7 +198,7 @@ exports[`restoreElements > should restore line and draw elements correctly 1`] =
   "boundElements": [],
   "endArrowhead": null,
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -227,7 +227,7 @@ exports[`restoreElements > should restore line and draw elements correctly 1`] =
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "line",
   "updated": 1,
   "version": 1,
@@ -245,7 +245,7 @@ exports[`restoreElements > should restore line and draw elements correctly 2`] =
   "boundElements": [],
   "endArrowhead": null,
   "endBinding": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -274,7 +274,7 @@ exports[`restoreElements > should restore line and draw elements correctly 2`] =
   "startBinding": null,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "type": "line",
   "updated": 1,
   "version": 1,
@@ -292,7 +292,7 @@ exports[`restoreElements > should restore text element correctly passing value f
   "baseline": 0,
   "boundElements": [],
   "containerId": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 14,
   "frameId": null,
@@ -312,7 +312,7 @@ exports[`restoreElements > should restore text element correctly passing value f
   "seed": Any<Number>,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "text": "text",
   "textAlign": "center",
   "type": "text",
@@ -333,7 +333,7 @@ exports[`restoreElements > should restore text element correctly with unknown fo
   "baseline": 0,
   "boundElements": [],
   "containerId": null,
-  "fillStyle": "hachure",
+  "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 10,
   "frameId": null,
@@ -353,7 +353,7 @@ exports[`restoreElements > should restore text element correctly with unknown fo
   "seed": Any<Number>,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
-  "strokeWidth": 1,
+  "strokeWidth": 2,
   "text": "",
   "textAlign": "left",
   "type": "text",

src/tests/helpers/api.ts

@@ -94,7 +94,7 @@ export class API {
     angle?: number;
     id?: string;
     isDeleted?: boolean;
-    frameId?: ExcalidrawElement["id"];
+    frameId?: ExcalidrawElement["id"] | null;
     groupIds?: string[];
     // generic element props
     strokeColor?: ExcalidrawGenericElement["strokeColor"];

src/tests/helpers/ui.ts

@@ -32,6 +32,7 @@ import {
 } from "../../element/typeChecks";
 import { getCommonBounds, getElementPointsCoords } from "../../element/bounds";
 import { rotatePoint } from "../../math";
+import { getTextEditor } from "../queries/dom";
 
 const { h } = window;
 
@@ -476,11 +477,7 @@ export class UI {
       Keyboard.keyPress(KEYS.ENTER);
     }
 
-    const editor =
-      openedEditor ??
-      document.querySelector<HTMLTextAreaElement>(
-        ".excalidraw-textEditorContainer > textarea",
-      );
+    const editor = await getTextEditor();
     if (!editor) {
       throw new Error("Can't find wysiwyg text editor in the dom");
     }

src/tests/linearElementEditor.test.tsx

@@ -1202,5 +1202,29 @@ describe("Test Linear Elements", () => {
         }),
       );
     });
+
+    it("should not update label position when arrow dragged", () => {
+      createTwoPointerLinearElement("arrow");
+      let arrow = h.elements[0] as ExcalidrawLinearElement;
+      createBoundTextElement(DEFAULT_TEXT, arrow);
+      let label = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(arrow.x).toBe(20);
+      expect(arrow.y).toBe(20);
+      expect(label.x).toBe(0);
+      expect(label.y).toBe(0);
+      mouse.reset();
+      mouse.select(arrow);
+      mouse.select(label);
+      mouse.downAt(arrow.x, arrow.y);
+      mouse.moveTo(arrow.x + 20, arrow.y + 30);
+      mouse.up(arrow.x + 20, arrow.y + 30);
+
+      arrow = h.elements[0] as ExcalidrawLinearElement;
+      label = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(arrow.x).toBe(80);
+      expect(arrow.y).toBe(100);
+      expect(label.x).toBe(0);
+      expect(label.y).toBe(0);
+    });
   });
 });

src/tests/packages/__snapshots__/excalidraw.test.tsx.snap

@@ -535,6 +535,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
             >
               <button
                 class="color-picker__button active"
+                data-testid="color-top-pick-#ffffff"
                 style="--swatch-color: #ffffff;"
                 title="#ffffff"
                 type="button"
@@ -545,6 +546,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
               </button>
               <button
                 class="color-picker__button"
+                data-testid="color-top-pick-#f8f9fa"
                 style="--swatch-color: #f8f9fa;"
                 title="#f8f9fa"
                 type="button"
@@ -555,6 +557,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
               </button>
               <button
                 class="color-picker__button"
+                data-testid="color-top-pick-#f5faff"
                 style="--swatch-color: #f5faff;"
                 title="#f5faff"
                 type="button"
@@ -565,6 +568,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
               </button>
               <button
                 class="color-picker__button"
+                data-testid="color-top-pick-#fffce8"
                 style="--swatch-color: #fffce8;"
                 title="#fffce8"
                 type="button"
@@ -575,6 +579,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
               </button>
               <button
                 class="color-picker__button"
+                data-testid="color-top-pick-#fdf8f6"
                 style="--swatch-color: #fdf8f6;"
                 title="#fdf8f6"
                 type="button"

src/tests/packages/__snapshots__/utils.test.ts.snap

@@ -14,7 +14,7 @@ exports[`exportToSvg > with default arguments 1`] = `
   "currentChartType": "bar",
   "currentItemBackgroundColor": "transparent",
   "currentItemEndArrowhead": "arrow",
-  "currentItemFillStyle": "hachure",
+  "currentItemFillStyle": "solid",
   "currentItemFontFamily": 1,
   "currentItemFontSize": 20,
   "currentItemOpacity": 100,
@@ -23,7 +23,7 @@ exports[`exportToSvg > with default arguments 1`] = `
   "currentItemStartArrowhead": null,
   "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 1,
+  "currentItemStrokeWidth": 2,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,

src/tests/packages/events.test.tsx

@@ -0,0 +1,58 @@
+import { vi } from "vitest";
+import { Excalidraw } from "../../packages/excalidraw/index";
+import { ExcalidrawImperativeAPI } from "../../types";
+import { resolvablePromise } from "../../utils";
+import { render } from "../test-utils";
+import { Pointer } from "../helpers/ui";
+
+describe("event callbacks", () => {
+  const h = window.h;
+
+  let excalidrawAPI: ExcalidrawImperativeAPI;
+
+  const mouse = new Pointer("mouse");
+
+  beforeEach(async () => {
+    const excalidrawAPIPromise = resolvablePromise<ExcalidrawImperativeAPI>();
+    await render(
+      <Excalidraw ref={(api) => excalidrawAPIPromise.resolve(api as any)} />,
+    );
+    excalidrawAPI = await excalidrawAPIPromise;
+  });
+
+  it("should trigger onChange on render", async () => {
+    const onChange = vi.fn();
+
+    const origBackgroundColor = h.state.viewBackgroundColor;
+    excalidrawAPI.onChange(onChange);
+    excalidrawAPI.updateScene({ appState: { viewBackgroundColor: "red" } });
+    expect(onChange).toHaveBeenCalledWith(
+      // elements
+      [],
+      // appState
+      expect.objectContaining({
+        viewBackgroundColor: "red",
+      }),
+      // files
+      {},
+    );
+    expect(onChange.mock.lastCall[1].viewBackgroundColor).not.toBe(
+      origBackgroundColor,
+    );
+  });
+
+  it("should trigger onPointerDown/onPointerUp on canvas pointerDown/pointerUp", async () => {
+    const onPointerDown = vi.fn();
+    const onPointerUp = vi.fn();
+
+    excalidrawAPI.onPointerDown(onPointerDown);
+    excalidrawAPI.onPointerUp(onPointerUp);
+
+    mouse.downAt(100);
+    expect(onPointerDown).toHaveBeenCalledTimes(1);
+    expect(onPointerUp).not.toHaveBeenCalled();
+    mouse.up();
+    expect(onPointerDown).toHaveBeenCalledTimes(1);
+    expect(onPointerUp).toHaveBeenCalledTimes(1);
+  });
+});

src/tests/queries/dom.ts

@@ -0,0 +1,13 @@
+import { waitFor } from "@testing-library/dom";
+
+export const getTextEditor = async (waitForEditor = true) => {
+  const query = () =>
+    document.querySelector(
+      ".excalidraw-textEditorContainer > textarea",
+    ) as HTMLTextAreaElement;
+  if (waitForEditor) {
+    await waitFor(() => expect(query()).not.toBe(null));
+    return query();
+  }
+  return query();
+};

src/tests/regressionTests.test.tsx

@@ -1089,20 +1089,6 @@ describe("regression tests", () => {
     });
     assertSelectedElements(rect3);
   });
-
-  it("should show fill icons when element has non transparent background", async () => {
-    UI.clickTool("rectangle");
-    expect(screen.queryByText(/fill/i)).not.toBeNull();
-    mouse.down();
-    mouse.up(10, 10);
-    expect(screen.queryByText(/fill/i)).toBeNull();
-    togglePopover("Background");
-    UI.clickOnTestId("color-red");
-    // select rectangle
-    mouse.reset();
-    mouse.click();
-    expect(screen.queryByText(/fill/i)).not.toBeNull();
-  });
 });
 
 it(

src/tests/tool.test.tsx

@@ -0,0 +1,55 @@
+import { Excalidraw } from "../packages/excalidraw/index";
+import { ExcalidrawImperativeAPI } from "../types";
+import { resolvablePromise } from "../utils";
+import { render } from "./test-utils";
+import { Pointer } from "./helpers/ui";
+
+describe("setActiveTool()", () => {
+  const h = window.h;
+
+  let excalidrawAPI: ExcalidrawImperativeAPI;
+
+  const mouse = new Pointer("mouse");
+
+  beforeEach(async () => {
+    const excalidrawAPIPromise = resolvablePromise<ExcalidrawImperativeAPI>();
+    await render(
+      <Excalidraw ref={(api) => excalidrawAPIPromise.resolve(api as any)} />,
+    );
+    excalidrawAPI = await excalidrawAPIPromise;
+  });
+
+  it("should expose setActiveTool on package API", () => {
+    expect(excalidrawAPI.setActiveTool).toBeDefined();
+    expect(excalidrawAPI.setActiveTool).toBe(h.app.setActiveTool);
+  });
+
+  it("should set the active tool type", async () => {
+    expect(h.state.activeTool.type).toBe("selection");
+    excalidrawAPI.setActiveTool({ type: "rectangle" });
+    expect(h.state.activeTool.type).toBe("rectangle");
+
+    mouse.down(10, 10);
+    mouse.up(20, 20);
+
+    expect(h.state.activeTool.type).toBe("selection");
+  });
+
+  it("should support tool locking", async () => {
+    expect(h.state.activeTool.type).toBe("selection");
+    excalidrawAPI.setActiveTool({ type: "rectangle", locked: true });
+    expect(h.state.activeTool.type).toBe("rectangle");
+
+    mouse.down(10, 10);
+    mouse.up(20, 20);
+
+    expect(h.state.activeTool.type).toBe("rectangle");
+  });
+
+  it("should set custom tool", async () => {
+    expect(h.state.activeTool.type).toBe("selection");
+    excalidrawAPI.setActiveTool({ type: "custom", customType: "comment" });
+    expect(h.state.activeTool.type).toBe("custom");
+    expect(h.state.activeTool.customType).toBe("comment");
+  });
+});

src/tests/zindex.test.tsx

@@ -12,6 +12,11 @@ import {
 import { AppState } from "../types";
 import { API } from "./helpers/api";
 import { selectGroupsForSelectedElements } from "../groups";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameElement,
+  ExcalidrawSelectionElement,
+} from "../element/types";
 
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -23,9 +28,15 @@ beforeEach(() => {
 
 const { h } = window;
 
+type ExcalidrawElementType = Exclude<
+  ExcalidrawElement,
+  ExcalidrawSelectionElement
+>["type"];
+
 const populateElements = (
   elements: {
     id: string;
+    type?: ExcalidrawElementType;
     isDeleted?: boolean;
     isSelected?: boolean;
     groupIds?: string[];
@@ -34,6 +45,7 @@ const populateElements = (
     width?: number;
     height?: number;
     containerId?: string;
+    frameId?: ExcalidrawFrameElement["id"];
   }[],
   appState?: Partial<AppState>,
 ) => {
@@ -50,9 +62,11 @@ const populateElements = (
       width = 100,
       height = 100,
       containerId = null,
+      frameId = null,
+      type,
     }) => {
       const element = API.createElement({
-        type: containerId ? "text" : "rectangle",
+        type: type ?? (containerId ? "text" : "rectangle"),
         id,
         isDeleted,
         x,
@@ -61,6 +75,7 @@ const populateElements = (
         height,
         groupIds,
         containerId,
+        frameId: frameId || null,
       });
       if (isSelected) {
         selectedElementIds[element.id] = true;
@@ -116,6 +131,8 @@ const assertZindex = ({
     isSelected?: true;
     groupIds?: string[];
     containerId?: string;
+    frameId?: ExcalidrawFrameElement["id"];
+    type?: ExcalidrawElementType;
   }[];
   appState?: Partial<AppState>;
   operations: [Actions, string[]][];
@@ -1183,3 +1200,285 @@ describe("z-index manipulation", () => {
     });
   });
 });
+
+describe("z-indexing with frames", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+  });
+
+  // naming scheme:
+  // F#   ... frame element
+  // F#_# ... frame child of F# (rectangle)
+  // R#   ... unrelated element (rectangle)
+
+  it("moving whole frame by one (normalized)", () => {
+    // normalized frame order
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "R1" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +1
+        [actionBringForward, ["R1", "F1_1", "F1_2", "F1", "R2"]],
+        // +1
+        [actionBringForward, ["R1", "R2", "F1_1", "F1_2", "F1"]],
+        // noop
+        [actionBringForward, ["R1", "R2", "F1_1", "F1_2", "F1"]],
+        // -1
+        [actionSendBackward, ["R1", "F1_1", "F1_2", "F1", "R2"]],
+        // -1
+        [actionSendBackward, ["F1_1", "F1_2", "F1", "R1", "R2"]],
+        // noop
+        [actionSendBackward, ["F1_1", "F1_2", "F1", "R1", "R2"]],
+      ],
+    });
+  });
+
+  it("moving whole frame by one (DENORMALIZED)", () => {
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R1" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +1
+        [actionBringForward, ["R1", "F1_1", "F1", "F1_2", "R2"]],
+        // +1
+        [actionBringForward, ["R1", "R2", "F1_1", "F1", "F1_2"]],
+        // noop
+        [actionBringForward, ["R1", "R2", "F1_1", "F1", "F1_2"]],
+      ],
+    });
+
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "R1" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +1
+        [actionBringForward, ["R1", "F1_1", "F1", "R2", "F1_2"]],
+        // +1
+        [actionBringForward, ["R1", "R2", "F1_1", "F1", "F1_2"]],
+        // noop
+        [actionBringForward, ["R1", "R2", "F1_1", "F1", "F1_2"]],
+      ],
+    });
+
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "R1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "R2" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R3" },
+      ],
+      operations: [
+        // +1
+        [actionBringForward, ["R1", "F1_1", "R2", "F1", "R3", "F1_2"]],
+        // +1
+        // FIXME incorrect, should put F1_1 after R3
+        [actionBringForward, ["R1", "R2", "F1_1", "R3", "F1", "F1_2"]],
+        // +1
+        // FIXME should be noop from previous step after it's fixed
+        [actionBringForward, ["R1", "R2", "R3", "F1_1", "F1", "F1_2"]],
+      ],
+    });
+
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "R1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "R2" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R3" },
+      ],
+      operations: [
+        // -1
+        [actionSendBackward, ["F1_1", "F1", "R1", "F1_2", "R2", "R3"]],
+        // -1
+        [actionSendBackward, ["F1_1", "F1", "F1_2", "R1", "R2", "R3"]],
+      ],
+    });
+  });
+
+  it("moving selected frame children by one (normalized)", () => {
+    // normalized frame order
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1", isSelected: true },
+        { id: "F1_2", frameId: "F1" },
+        { id: "F1", type: "frame" },
+        { id: "R1" },
+      ],
+      operations: [
+        // +1
+        [actionBringForward, ["F1_2", "F1_1", "F1", "R1"]],
+        // noop
+        [actionBringForward, ["F1_2", "F1_1", "F1", "R1"]],
+      ],
+    });
+
+    // normalized frame order, multiple frames
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1", isSelected: true },
+        { id: "F1_2", frameId: "F1" },
+        { id: "F1", type: "frame" },
+        { id: "R1" },
+        { id: "F2_1", frameId: "F2", isSelected: true },
+        { id: "F2_2", frameId: "F2" },
+        { id: "F2", type: "frame" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +1
+        [
+          actionBringForward,
+          ["F1_2", "F1_1", "F1", "R1", "F2_2", "F2_1", "F2", "R2"],
+        ],
+        // noop
+        [
+          actionBringForward,
+          ["F1_2", "F1_1", "F1", "R1", "F2_2", "F2_1", "F2", "R2"],
+        ],
+      ],
+    });
+  });
+
+  it("moving selected frame children by one (DENORMALIZED)", () => {
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1", isSelected: true },
+        { id: "F1", type: "frame" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R1" },
+      ],
+      operations: [
+        // +1
+        // NOTE not sure what we wanna do here
+        [actionBringForward, ["F1", "F1_2", "F1_1", "R1"]],
+        // noop
+        [actionBringForward, ["F1", "F1_2", "F1_1", "R1"]],
+        // -1
+        [actionSendBackward, ["F1", "F1_1", "F1_2", "R1"]],
+        // noop
+        [actionSendBackward, ["F1", "F1_1", "F1_2", "R1"]],
+      ],
+    });
+
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1", isSelected: true },
+        { id: "R1" },
+        { id: "F1", type: "frame" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +1
+        // NOTE not sure what we wanna do here
+        [actionBringForward, ["R1", "F1", "F1_2", "F1_1", "R2"]],
+        // noop
+        [actionBringForward, ["R1", "F1", "F1_2", "F1_1", "R2"]],
+        // -1
+        [actionSendBackward, ["R1", "F1", "F1_1", "F1_2", "R2"]],
+        // noop
+        [actionSendBackward, ["R1", "F1", "F1_1", "F1_2", "R2"]],
+      ],
+    });
+  });
+
+  it("moving whole frame to front/end", () => {
+    // normalized frame order
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "R1" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +∞
+        [actionBringToFront, ["R1", "R2", "F1_1", "F1_2", "F1"]],
+        // noop
+        [actionBringToFront, ["R1", "R2", "F1_1", "F1_2", "F1"]],
+        // -∞
+        [actionSendToBack, ["F1_1", "F1_2", "F1", "R1", "R2"]],
+        // noop
+        [actionSendToBack, ["F1_1", "F1_2", "F1", "R1", "R2"]],
+      ],
+    });
+
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R1" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +∞
+        [actionBringToFront, ["R1", "R2", "F1_1", "F1", "F1_2"]],
+        // noop
+        [actionBringToFront, ["R1", "R2", "F1_1", "F1", "F1_2"]],
+        // -∞
+        [actionSendToBack, ["F1_1", "F1", "F1_2", "R1", "R2"]],
+        // noop
+        [actionSendToBack, ["F1_1", "F1", "F1_2", "R1", "R2"]],
+      ],
+    });
+
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "R1" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R2" },
+      ],
+      operations: [
+        // +∞
+        [actionBringToFront, ["R1", "R2", "F1_1", "F1", "F1_2"]],
+      ],
+    });
+
+    // DENORMALIZED FRAME ORDER
+    assertZindex({
+      elements: [
+        { id: "F1_1", frameId: "F1" },
+        { id: "R1" },
+        { id: "F1", type: "frame", isSelected: true },
+        { id: "R2" },
+        { id: "F1_2", frameId: "F1" },
+        { id: "R3" },
+      ],
+      operations: [
+        // +1
+        [actionBringToFront, ["R1", "R2", "R3", "F1_1", "F1", "F1_2"]],
+      ],
+    });
+  });
+});

src/types.ts

@@ -607,6 +607,8 @@ export type PointerDownState = Readonly<{
   };
 }>;
 
+type UnsubscribeCallback = () => void;
+
 export type ExcalidrawImperativeAPI = {
   updateScene: InstanceType<typeof App>["updateScene"];
   updateLibrary: InstanceType<typeof Library>["updateLibrary"];
@@ -637,6 +639,27 @@ export type ExcalidrawImperativeAPI = {
    * used in conjunction with view mode (props.viewModeEnabled).
    */
   updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
+  onChange: (
+    callback: (
+      elements: readonly ExcalidrawElement[],
+      appState: AppState,
+      files: BinaryFiles,
+    ) => void,
+  ) => UnsubscribeCallback;
+  onPointerDown: (
+    callback: (
+      activeTool: AppState["activeTool"],
+      pointerDownState: PointerDownState,
+      event: React.PointerEvent<HTMLElement>,
+    ) => void,
+  ) => UnsubscribeCallback;
+  onPointerUp: (
+    callback: (
+      activeTool: AppState["activeTool"],
+      pointerDownState: PointerDownState,
+      event: PointerEvent,
+    ) => void,
+  ) => UnsubscribeCallback;
 };
 
 export type Device = Readonly<{
@@ -672,3 +695,12 @@ export type KeyboardModifiersObject = {
   altKey: boolean;
   metaKey: boolean;
 };
+
+export type Primitive =
+  | number
+  | string
+  | boolean
+  | bigint
+  | symbol
+  | null
+  | undefined;

src/utils.ts

@@ -363,18 +363,21 @@ export const distance = (x: number, y: number) => Math.abs(x - y);
 
 export const updateActiveTool = (
   appState: Pick<AppState, "activeTool">,
-  data: (
+  data: ((
     | {
         type: ToolType;
       }
     | { type: "custom"; customType: string }
-  ) & { lastActiveToolBeforeEraser?: ActiveTool | null },
+  ) & { locked?: boolean }) & {
+    lastActiveToolBeforeEraser?: ActiveTool | null;
+  },
 ): AppState["activeTool"] => {
   if (data.type === "custom") {
     return {
       ...appState.activeTool,
       type: "custom",
       customType: data.customType,
+      locked: data.locked ?? appState.activeTool.locked,
     };
   }
 
@@ -386,6 +389,7 @@ export const updateActiveTool = (
         : data.lastActiveToolBeforeEraser,
     type: data.type,
     customType: null,
+    locked: data.locked ?? appState.activeTool.locked,
   };
 };
 

src/zindex.ts

@@ -1,16 +1,14 @@
 import { bumpVersion } from "./element/mutateElement";
 import { isFrameElement } from "./element/typeChecks";
-import { ExcalidrawElement } from "./element/types";
-import { groupByFrames } from "./frame";
+import { ExcalidrawElement, ExcalidrawFrameElement } from "./element/types";
 import { getElementsInGroup } from "./groups";
 import { getSelectedElements } from "./scene";
 import Scene from "./scene/Scene";
 import { AppState } from "./types";
 import { arrayToMap, findIndex, findLastIndex } from "./utils";
 
-// elements that do not belong to a frame are considered a root element
-const isRootElement = (element: ExcalidrawElement) => {
-  return !element.frameId;
+const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
+  return element.frameId === frameId || element.id === frameId;
 };
 
 /**
@@ -35,6 +33,7 @@ const getIndicesToMove = (
       ? elementsToBeMoved
       : getSelectedElements(elements, appState, {
           includeBoundTextElement: true,
+          includeElementsInFrames: true,
         }),
   );
   while (++index < elements.length) {
@@ -106,6 +105,26 @@ const getTargetIndexAccountingForBinding = (
   }
 };
 
+const getContiguousFrameRangeElements = (
+  allElements: readonly ExcalidrawElement[],
+  frameId: ExcalidrawFrameElement["id"],
+) => {
+  let rangeStart = -1;
+  let rangeEnd = -1;
+  allElements.forEach((element, index) => {
+    if (isOfTargetFrame(element, frameId)) {
+      if (rangeStart === -1) {
+        rangeStart = index;
+      }
+      rangeEnd = index;
+    }
+  });
+  if (rangeStart === -1) {
+    return [];
+  }
+  return allElements.slice(rangeStart, rangeEnd + 1);
+};
+
 /**
  * Returns next candidate index that's available to be moved to. Currently that
  *  is a non-deleted element, and not inside a group (unless we're editing it).
@@ -115,6 +134,11 @@ const getTargetIndex = (
   elements: readonly ExcalidrawElement[],
   boundaryIndex: number,
   direction: "left" | "right",
+  /**
+   * Frame id if moving frame children.
+   * If whole frame (including all children) is being moved, supply `null`.
+   */
+  containingFrame: ExcalidrawFrameElement["id"] | null,
 ) => {
   const sourceElement = elements[boundaryIndex];
 
@@ -122,6 +146,9 @@ const getTargetIndex = (
     if (element.isDeleted) {
       return false;
     }
+    if (containingFrame) {
+      return element.frameId === containingFrame;
+    }
     // if we're editing group, find closest sibling irrespective of whether
     // there's a different-group element between them (for legacy reasons)
     if (appState.editingGroupId) {
@@ -132,8 +159,12 @@ const getTargetIndex = (
 
   const candidateIndex =
     direction === "left"
-      ? findLastIndex(elements, indexFilter, Math.max(0, boundaryIndex - 1))
-      : findIndex(elements, indexFilter, boundaryIndex + 1);
+      ? findLastIndex(
+          elements,
+          (el) => indexFilter(el),
+          Math.max(0, boundaryIndex - 1),
+        )
+      : findIndex(elements, (el) => indexFilter(el), boundaryIndex + 1);
 
   const nextElement = elements[candidateIndex];
 
@@ -156,6 +187,19 @@ const getTargetIndex = (
     }
   }
 
+  if (
+    !containingFrame &&
+    (nextElement.frameId || nextElement.type === "frame")
+  ) {
+    const frameElements = getContiguousFrameRangeElements(
+      elements,
+      nextElement.frameId || nextElement.id,
+    );
+    return direction === "left"
+      ? elements.indexOf(frameElements[0])
+      : elements.indexOf(frameElements[frameElements.length - 1]);
+  }
+
   if (!nextElement.groupIds.length) {
     return (
       getTargetIndexAccountingForBinding(nextElement, elements, direction) ??
@@ -195,13 +239,12 @@ const getTargetElementsMap = <T extends ExcalidrawElement>(
   }, {} as Record<string, ExcalidrawElement>);
 };
 
-const _shiftElements = (
+const shiftElementsByOne = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   direction: "left" | "right",
-  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
+  const indicesToMove = getIndicesToMove(elements, appState);
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   let groupedIndices = toContiguousGroups(indicesToMove);
 
@@ -209,16 +252,30 @@ const _shiftElements = (
     groupedIndices = groupedIndices.reverse();
   }
 
+  const selectedFrames = new Set<ExcalidrawFrameElement["id"]>(
+    indicesToMove
+      .filter((idx) => elements[idx].type === "frame")
+      .map((idx) => elements[idx].id),
+  );
+
   groupedIndices.forEach((indices, i) => {
     const leadingIndex = indices[0];
     const trailingIndex = indices[indices.length - 1];
     const boundaryIndex = direction === "left" ? leadingIndex : trailingIndex;
 
+    const containingFrame = indices.some((idx) => {
+      const el = elements[idx];
+      return el.frameId && selectedFrames.has(el.frameId);
+    })
+      ? null
+      : elements[boundaryIndex]?.frameId;
+
     const targetIndex = getTargetIndex(
       appState,
       elements,
       boundaryIndex,
       direction,
+      containingFrame,
     );
 
     if (targetIndex === -1 || boundaryIndex === targetIndex) {
@@ -263,34 +320,25 @@ const _shiftElements = (
   });
 };
 
-const shiftElements = (
-  appState: AppState,
+const shiftElementsToEnd = (
   elements: readonly ExcalidrawElement[],
+  appState: AppState,
   direction: "left" | "right",
+  containingFrame: ExcalidrawFrameElement["id"] | null,
   elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shift(
-    elements,
-    appState,
-    direction,
-    _shiftElements,
-    elementsToBeMoved,
-  );
-};
-
-const _shiftElementsToEnd = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  direction: "left" | "right",
-) => {
-  const indicesToMove = getIndicesToMove(elements, appState);
+  const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   const displacedElements: ExcalidrawElement[] = [];
 
   let leadingIndex: number;
   let trailingIndex: number;
   if (direction === "left") {
-    if (appState.editingGroupId) {
+    if (containingFrame) {
+      leadingIndex = findIndex(elements, (el) =>
+        isOfTargetFrame(el, containingFrame),
+      );
+    } else if (appState.editingGroupId) {
       const groupElements = getElementsInGroup(
         elements,
         appState.editingGroupId,
@@ -305,7 +353,11 @@ const _shiftElementsToEnd = (
 
     trailingIndex = indicesToMove[indicesToMove.length - 1];
   } else {
-    if (appState.editingGroupId) {
+    if (containingFrame) {
+      trailingIndex = findLastIndex(elements, (el) =>
+        isOfTargetFrame(el, containingFrame),
+      );
+    } else if (appState.editingGroupId) {
       const groupElements = getElementsInGroup(
         elements,
         appState.editingGroupId,
@@ -321,6 +373,10 @@ const _shiftElementsToEnd = (
     leadingIndex = indicesToMove[0];
   }
 
+  if (leadingIndex === -1) {
+    leadingIndex = 0;
+  }
+
   for (let index = leadingIndex; index < trailingIndex + 1; index++) {
     if (!indicesToMove.includes(index)) {
       displacedElements.push(elements[index]);
@@ -349,121 +405,123 @@ const _shiftElementsToEnd = (
       ];
 };
 
-const shiftElementsToEnd = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  direction: "left" | "right",
-  elementsToBeMoved?: readonly ExcalidrawElement[],
-) => {
-  return shift(
-    elements,
-    appState,
-    direction,
-    _shiftElementsToEnd,
-    elementsToBeMoved,
-  );
-};
-
-function shift(
-  elements: readonly ExcalidrawElement[],
+function shiftElementsAccountingForFrames(
+  allElements: readonly ExcalidrawElement[],
   appState: AppState,
   direction: "left" | "right",
   shiftFunction: (
-    elements: ExcalidrawElement[],
+    elements: readonly ExcalidrawElement[],
     appState: AppState,
     direction: "left" | "right",
+    containingFrame: ExcalidrawFrameElement["id"] | null,
     elementsToBeMoved?: readonly ExcalidrawElement[],
   ) => ExcalidrawElement[] | readonly ExcalidrawElement[],
-  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) {
-  const elementsMap = arrayToMap(elements);
-  const frameElementsMap = groupByFrames(elements);
-
-  // in case root is non-existent, we promote children elements to root
-  let rootElements = elements.filter(
-    (element) =>
-      isRootElement(element) ||
-      (element.frameId && !elementsMap.has(element.frameId)),
+  const elementsToMove = arrayToMap(
+    getSelectedElements(allElements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    }),
   );
-  // and remove non-existet root
-  for (const frameId of frameElementsMap.keys()) {
-    if (!elementsMap.has(frameId)) {
-      frameElementsMap.delete(frameId);
+
+  const frameAwareContiguousElementsToMove: {
+    regularElements: ExcalidrawElement[];
+    frameChildren: Map<ExcalidrawFrameElement["id"], ExcalidrawElement[]>;
+  } = { regularElements: [], frameChildren: new Map() };
+
+  const fullySelectedFrames = new Set<ExcalidrawFrameElement["id"]>();
+
+  for (const element of allElements) {
+    if (elementsToMove.has(element.id) && isFrameElement(element)) {
+      fullySelectedFrames.add(element.id);
     }
   }
 
-  // shift the root elements first
-  rootElements = shiftFunction(
-    rootElements,
+  for (const element of allElements) {
+    if (elementsToMove.has(element.id)) {
+      if (
+        isFrameElement(element) ||
+        (element.frameId && fullySelectedFrames.has(element.frameId))
+      ) {
+        frameAwareContiguousElementsToMove.regularElements.push(element);
+      } else if (!element.frameId) {
+        frameAwareContiguousElementsToMove.regularElements.push(element);
+      } else {
+        const frameChildren =
+          frameAwareContiguousElementsToMove.frameChildren.get(
+            element.frameId,
+          ) || [];
+        frameChildren.push(element);
+        frameAwareContiguousElementsToMove.frameChildren.set(
+          element.frameId,
+          frameChildren,
+        );
+      }
+    }
+  }
+
+  let nextElements = allElements;
+
+  const frameChildrenSets = Array.from(
+    frameAwareContiguousElementsToMove.frameChildren.entries(),
+  );
+
+  for (const [frameId, children] of frameChildrenSets) {
+    nextElements = shiftFunction(
+      allElements,
+      appState,
+      direction,
+      frameId,
+      children,
+    );
+  }
+
+  return shiftFunction(
+    nextElements,
     appState,
     direction,
-    elementsToBeMoved,
-  ) as ExcalidrawElement[];
-
-  // shift the elements in frames if needed
-  frameElementsMap.forEach((frameElements, frameId) => {
-    if (!appState.selectedElementIds[frameId]) {
-      frameElementsMap.set(
-        frameId,
-        shiftFunction(
-          frameElements,
-          appState,
-          direction,
-          elementsToBeMoved,
-        ) as ExcalidrawElement[],
-      );
-    }
-  });
-
-  // return the final elements
-  let finalElements: ExcalidrawElement[] = [];
-
-  rootElements.forEach((element) => {
-    if (isFrameElement(element)) {
-      finalElements = [
-        ...finalElements,
-        ...(frameElementsMap.get(element.id) ?? []),
-        element,
-      ];
-    } else {
-      finalElements = [...finalElements, element];
-    }
-  });
-
-  return finalElements;
+    null,
+    frameAwareContiguousElementsToMove.regularElements,
+  );
 }
 
 // public API
 // -----------------------------------------------------------------------------
 
 export const moveOneLeft = (
-  elements: readonly ExcalidrawElement[],
+  allElements: readonly ExcalidrawElement[],
   appState: AppState,
-  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElements(appState, elements, "left", elementsToBeMoved);
+  return shiftElementsByOne(allElements, appState, "left");
 };
 
 export const moveOneRight = (
-  elements: readonly ExcalidrawElement[],
+  allElements: readonly ExcalidrawElement[],
   appState: AppState,
-  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElements(appState, elements, "right", elementsToBeMoved);
+  return shiftElementsByOne(allElements, appState, "right");
 };
 
 export const moveAllLeft = (
-  elements: readonly ExcalidrawElement[],
+  allElements: readonly ExcalidrawElement[],
   appState: AppState,
-  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElementsToEnd(elements, appState, "left", elementsToBeMoved);
+  return shiftElementsAccountingForFrames(
+    allElements,
+    appState,
+    "left",
+    shiftElementsToEnd,
+  );
 };
 
 export const moveAllRight = (
-  elements: readonly ExcalidrawElement[],
+  allElements: readonly ExcalidrawElement[],
   appState: AppState,
-  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElementsToEnd(elements, appState, "right", elementsToBeMoved);
+  return shiftElementsAccountingForFrames(
+    allElements,
+    appState,
+    "right",
+    shiftElementsToEnd,
+  );
 };

yarn.lock

@@ -4684,6 +4684,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+hachure-fill@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/hachure-fill/-/hachure-fill-0.5.2.tgz#d19bc4cc8750a5962b47fb1300557a85fcf934cc"
+  integrity sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -6028,6 +6033,11 @@ points-on-curve@0.2.0, points-on-curve@^0.2.0:
   resolved "https://registry.yarnpkg.com/points-on-curve/-/points-on-curve-0.2.0.tgz#7dbb98c43791859434284761330fa893cb81b4d1"
   integrity sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==
 
+points-on-curve@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/points-on-curve/-/points-on-curve-1.0.1.tgz#03fcdc08e48e3bfdc7e8bd1d7ccd4d5f11e132c6"
+  integrity sha512-3nmX4/LIiyuwGLwuUrfhTlDeQFlAhi7lyK/zcRNGhalwapDWgAGR82bUpmn2mA03vII3fvNCG8jAONzKXwpxAg==
+
 points-on-path@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/points-on-path/-/points-on-path-0.2.1.tgz#553202b5424c53bed37135b318858eacff85dd52"
@@ -6449,11 +6459,12 @@ rollup@^3.25.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-roughjs@4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.5.2.tgz#aab644dcb41e9a75826c8bd5a5b0a859095f2f10"
-  integrity sha512-2xSlLDKdsWyFxrveYWk9YQ/Y9UfK38EAMRNkYkMqYBJvPX8abCa9PN0x3w02H8Oa6/0bcZICJU+U95VumPqseg==
+roughjs@4.6.4:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.6.4.tgz#b6f39b44645854a6e0a4a28b078368701eb7f939"
+  integrity sha512-s6EZ0BntezkFYMf/9mGn7M8XGIoaav9QQBCnJROWB3brUWQ683Q2LbRD/hq0Z3bAJ/9NVpU/5LpiTWvQMyLDhw==
   dependencies:
+    hachure-fill "^0.5.2"
     path-data-parser "^0.1.0"
     points-on-curve "^0.2.0"
     points-on-path "^0.2.1"