@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-a38e82f

package/dist/excalidraw/element/types.d.ts

@@ -1,6 +1,6 @@
 import { Point } from "../types";
 import { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
-import { MarkNonNullable, ValueOf } from "../utility-types";
+import { MakeBrand, MarkNonNullable, ValueOf } from "../utility-types";
 import { MagicCacheData } from "../data/magic";
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
@@ -76,14 +76,6 @@ export type ExcalidrawEllipseElement = _ExcalidrawElementBase & {
 };
 export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase & Readonly<{
     type: "embeddable";
-    /**
-     * indicates whether the embeddable src (url) has been validated for rendering.
-     * null value indicates that the validation is pending. We reset the
-     * value on each restore (or url change) so that we can guarantee
-     * the validation came from a trusted source (the editor). Also because we
-     * may not have access to host-app supplied url validator during restore.
-     */
-    validated: boolean | null;
 }>;
 export type ExcalidrawIframeElement = _ExcalidrawElementBase & Readonly<{
     type: "iframe";
@@ -97,7 +89,7 @@ export type IframeData = ({
         w: number;
         h: number;
     };
-    warning?: string;
+    error?: Error;
 } & ({
     type: "video" | "generic";
     link: string;
@@ -142,7 +134,6 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     fontSize: number;
     fontFamily: FontFamilyValues;
     text: string;
-    baseline: number;
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
     containerId: ExcalidrawGenericElement["id"] | null;
@@ -189,4 +180,26 @@ export type FileId = string & {
     _brand: "FileId";
 };
 export type ExcalidrawElementType = ExcalidrawElement["type"];
+/**
+ * Map of excalidraw elements.
+ * Unspecified whether deleted or non-deleted.
+ * Can be a subset of Scene elements.
+ */
+export type ElementsMap = Map<ExcalidrawElement["id"], ExcalidrawElement>;
+/**
+ * Map of non-deleted elements.
+ * Can be a subset of Scene elements.
+ */
+export type NonDeletedElementsMap = Map<ExcalidrawElement["id"], NonDeletedExcalidrawElement> & MakeBrand<"NonDeletedElementsMap">;
+/**
+ * Map of all excalidraw Scene elements, including deleted.
+ * Not a subset. Use this type when you need access to current Scene elements.
+ */
+export type SceneElementsMap = Map<ExcalidrawElement["id"], ExcalidrawElement> & MakeBrand<"SceneElementsMap">;
+/**
+ * Map of all non-deleted Scene elements.
+ * Not a subset. Use this type when you need access to current Scene elements.
+ */
+export type NonDeletedSceneElementsMap = Map<ExcalidrawElement["id"], NonDeletedExcalidrawElement> & MakeBrand<"NonDeletedSceneElementsMap">;
+export type ElementsMapOrArray = readonly ExcalidrawElement[] | Readonly<ElementsMap>;
 export {};

package/dist/excalidraw/frame.d.ts

@@ -1,24 +1,25 @@
-import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
+import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
-import { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
+import type { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
+import { ReadonlySetLike } from "./utility-types";
 export declare const bindElementsToFramesAfterDuplication: (nextElements: ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
-export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement): boolean;
-export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
-export declare const isElementContainingFrame: (elements: readonly ExcalidrawElement[], element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement) => boolean;
+export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap): boolean;
+export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => ExcalidrawElement[];
+export declare const isElementContainingFrame: (elements: readonly ExcalidrawElement[], element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => boolean;
 export declare const getElementsIntersectingFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
-export declare const elementsAreInFrameBounds: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => boolean;
-export declare const elementOverlapsWithFrame: (element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement) => boolean;
+export declare const elementsAreInFrameBounds: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => boolean;
+export declare const elementOverlapsWithFrame: (element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => boolean;
 export declare const isCursorInFrame: (cursorCoords: {
     x: number;
     y: number;
-}, frame: NonDeleted<ExcalidrawFrameLikeElement>) => boolean;
+}, frame: NonDeleted<ExcalidrawFrameLikeElement>, elementsMap: ElementsMap) => boolean;
 export declare const groupsAreAtLeastIntersectingTheFrame: (elements: readonly NonDeletedExcalidrawElement[], groupIds: readonly string[], frame: ExcalidrawFrameLikeElement) => boolean;
 export declare const groupsAreCompletelyOutOfFrame: (elements: readonly NonDeletedExcalidrawElement[], groupIds: readonly string[], frame: ExcalidrawFrameLikeElement) => boolean;
 /**
  * Returns a map of frameId to frame elements. Includes empty frames.
  */
 export declare const groupByFrameLikes: (elements: readonly ExcalidrawElement[]) => Map<string, ExcalidrawElement[]>;
-export declare const getFrameChildren: (allElements: ExcalidrawElementsIncludingDeleted, frameId: string) => ExcalidrawElement[];
+export declare const getFrameChildren: (allElements: ElementsMapOrArray, frameId: string) => ExcalidrawElement[];
 export declare const getFrameLikeElements: (allElements: ExcalidrawElementsIncludingDeleted) => ExcalidrawFrameLikeElement[];
 /**
  * Returns ExcalidrawFrameElements and non-frame-children elements.
@@ -29,29 +30,34 @@ export declare const getFrameLikeElements: (allElements: ExcalidrawElementsInclu
  * Considers non-frame bound elements (container or arrow labels) as root.
  */
 export declare const getRootElements: (allElements: ExcalidrawElementsIncludingDeleted) => ExcalidrawElement[];
-export declare const getElementsInResizingFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement, appState: AppState) => ExcalidrawElement[];
-export declare const getElementsInNewFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
-export declare const getContainingFrame: (element: ExcalidrawElement, elementsMap?: Map<string, ExcalidrawElement>) => ExcalidrawFrameLikeElement | null;
+export declare const getElementsInResizingFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement, appState: AppState, elementsMap: ElementsMap) => ExcalidrawElement[];
+export declare const getElementsInNewFrame: (elements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => ExcalidrawElement[];
+export declare const getContainingFrame: (element: ExcalidrawElement, elementsMap: ElementsMap) => ExcalidrawFrameLikeElement | null;
+/** */
+export declare const filterElementsEligibleAsFrameChildren: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
 /**
  * Retains (or repairs for target frame) the ordering invriant where children
  * elements come right before the parent frame:
  * [el, el, child, child, frame, el]
+ *
+ * @returns mutated allElements (same data structure)
  */
-export declare const addElementsToFrame: (allElements: ExcalidrawElementsIncludingDeleted, elementsToAdd: NonDeletedExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
-export declare const removeElementsFromFrame: (allElements: ExcalidrawElementsIncludingDeleted, elementsToRemove: NonDeletedExcalidrawElement[], appState: AppState) => ExcalidrawElement[];
-export declare const removeAllElementsFromFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement, appState: AppState) => ExcalidrawElement[];
-export declare const replaceAllElementsInFrame: (allElements: ExcalidrawElementsIncludingDeleted, nextElementsInFrame: ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, appState: AppState) => ExcalidrawElement[];
+export declare const addElementsToFrame: <T extends ElementsMapOrArray>(allElements: T, elementsToAdd: NonDeletedExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => T;
+export declare const removeElementsFromFrame: (elementsToRemove: ReadonlySetLike<NonDeletedExcalidrawElement>, elementsMap: ElementsMap) => void;
+export declare const removeAllElementsFromFrame: <T extends ExcalidrawElement>(allElements: readonly T[], frame: ExcalidrawFrameLikeElement) => readonly T[];
+export declare const replaceAllElementsInFrame: <T extends ExcalidrawElement>(allElements: readonly T[], nextElementsInFrame: ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, app: AppClassProperties) => T[];
 /** does not mutate elements, but returns new ones */
-export declare const updateFrameMembershipOfSelectedElements: (allElements: ExcalidrawElementsIncludingDeleted, appState: AppState, app: AppClassProperties) => ExcalidrawElementsIncludingDeleted;
+export declare const updateFrameMembershipOfSelectedElements: <T extends ElementsMapOrArray>(allElements: T, appState: AppState, app: AppClassProperties) => T;
 /**
  * filters out elements that are inside groups that contain a frame element
  * anywhere in the group tree
  */
-export declare const omitGroupsContainingFrameLikes: (allElements: ExcalidrawElementsIncludingDeleted, selectedElements?: readonly ExcalidrawElement[]) => ExcalidrawElement[];
+export declare const omitGroupsContainingFrameLikes: (allElements: ElementsMapOrArray, selectedElements?: readonly ExcalidrawElement[]) => ExcalidrawElement[];
 /**
  * depending on the appState, return target frame, which is the frame the given element
  * is going to be added to or remove from
  */
-export declare const getTargetFrame: (element: ExcalidrawElement, appState: StaticCanvasAppState) => import("./element/types").ExcalidrawFrameElement | import("./element/types").ExcalidrawMagicFrameElement | null;
-export declare const isElementInFrame: (element: ExcalidrawElement, allElements: ExcalidrawElementsIncludingDeleted, appState: StaticCanvasAppState) => boolean;
+export declare const getTargetFrame: (element: ExcalidrawElement, elementsMap: ElementsMap, appState: StaticCanvasAppState) => import("./element/types").ExcalidrawFrameElement | import("./element/types").ExcalidrawMagicFrameElement | null;
+export declare const isElementInFrame: (element: ExcalidrawElement, allElementsMap: ElementsMap, appState: StaticCanvasAppState) => boolean;
 export declare const getFrameLikeTitle: (element: ExcalidrawFrameLikeElement, frameIdx: number) => string;
+export declare const getElementsOverlappingFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => NonDeletedExcalidrawElement[];

package/dist/excalidraw/frame.js

@@ -5,9 +5,8 @@ import { arrayToMap } from "./utils";
 import { mutateElement } from "./element/mutateElement";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
-import Scene from "./scene/Scene";
 import { getElementLineSegments } from "./element/bounds";
-import { doLineSegmentsIntersect } from "../utils/index";
+import { doLineSegmentsIntersect, elementsOverlappingBBox } from "../utils/";
 import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (nextElements, oldElements, oldIdToDuplicatedId) => {
@@ -28,50 +27,55 @@ export const bindElementsToFramesAfterDuplication = (nextElements, oldElements,
         }
     }
 };
-export function isElementIntersectingFrame(element, frame) {
-    const frameLineSegments = getElementLineSegments(frame);
-    const elementLineSegments = getElementLineSegments(element);
+export function isElementIntersectingFrame(element, frame, elementsMap) {
+    const frameLineSegments = getElementLineSegments(frame, elementsMap);
+    const elementLineSegments = getElementLineSegments(element, elementsMap);
     const intersecting = frameLineSegments.some((frameLineSegment) => elementLineSegments.some((elementLineSegment) => doLineSegmentsIntersect(frameLineSegment, elementLineSegment)));
     return intersecting;
 }
-export const getElementsCompletelyInFrame = (elements, frame) => omitGroupsContainingFrameLikes(getElementsWithinSelection(elements, frame, false)).filter((element) => (!isFrameLikeElement(element) && !element.frameId) ||
+export const getElementsCompletelyInFrame = (elements, frame, elementsMap) => omitGroupsContainingFrameLikes(getElementsWithinSelection(elements, frame, elementsMap, false)).filter((element) => (!isFrameLikeElement(element) && !element.frameId) ||
     element.frameId === frame.id);
-export const isElementContainingFrame = (elements, element, frame) => {
-    return getElementsWithinSelection(elements, element).some((e) => e.id === frame.id);
+export const isElementContainingFrame = (elements, element, frame, elementsMap) => {
+    return getElementsWithinSelection(elements, element, elementsMap).some((e) => e.id === frame.id);
 };
-export const getElementsIntersectingFrame = (elements, frame) => elements.filter((element) => isElementIntersectingFrame(element, frame));
-export const elementsAreInFrameBounds = (elements, frame) => {
-    const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(frame);
+export const getElementsIntersectingFrame = (elements, frame) => {
+    const elementsMap = arrayToMap(elements);
+    return elements.filter((element) => isElementIntersectingFrame(element, frame, elementsMap));
+};
+export const elementsAreInFrameBounds = (elements, frame, elementsMap) => {
+    const [frameX1, frameY1, frameX2, frameY2] = getElementAbsoluteCoords(frame, elementsMap);
     const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(elements);
-    return (selectionX1 <= elementX1 &&
-        selectionY1 <= elementY1 &&
-        selectionX2 >= elementX2 &&
-        selectionY2 >= elementY2);
+    return (frameX1 <= elementX1 &&
+        frameY1 <= elementY1 &&
+        frameX2 >= elementX2 &&
+        frameY2 >= elementY2);
 };
-export const elementOverlapsWithFrame = (element, frame) => {
-    return (elementsAreInFrameBounds([element], frame) ||
-        isElementIntersectingFrame(element, frame) ||
-        isElementContainingFrame([frame], element, frame));
+export const elementOverlapsWithFrame = (element, frame, elementsMap) => {
+    return (elementsAreInFrameBounds([element], frame, elementsMap) ||
+        isElementIntersectingFrame(element, frame, elementsMap) ||
+        isElementContainingFrame([frame], element, frame, elementsMap));
 };
-export const isCursorInFrame = (cursorCoords, frame) => {
-    const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
+export const isCursorInFrame = (cursorCoords, frame, elementsMap) => {
+    const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);
     return isPointWithinBounds([fx1, fy1], [cursorCoords.x, cursorCoords.y], [fx2, fy2]);
 };
 export const groupsAreAtLeastIntersectingTheFrame = (elements, groupIds, frame) => {
+    const elementsMap = arrayToMap(elements);
     const elementsInGroup = groupIds.flatMap((groupId) => getElementsInGroup(elements, groupId));
     if (elementsInGroup.length === 0) {
         return true;
     }
-    return !!elementsInGroup.find((element) => elementsAreInFrameBounds([element], frame) ||
-        isElementIntersectingFrame(element, frame));
+    return !!elementsInGroup.find((element) => elementsAreInFrameBounds([element], frame, elementsMap) ||
+        isElementIntersectingFrame(element, frame, elementsMap));
 };
 export const groupsAreCompletelyOutOfFrame = (elements, groupIds, frame) => {
+    const elementsMap = arrayToMap(elements);
     const elementsInGroup = groupIds.flatMap((groupId) => getElementsInGroup(elements, groupId));
     if (elementsInGroup.length === 0) {
         return true;
     }
-    return (elementsInGroup.find((element) => elementsAreInFrameBounds([element], frame) ||
-        isElementIntersectingFrame(element, frame)) === undefined);
+    return (elementsInGroup.find((element) => elementsAreInFrameBounds([element], frame, elementsMap) ||
+        isElementIntersectingFrame(element, frame, elementsMap)) === undefined);
 };
 // --------------------------- Frame Utils ------------------------------------
 /**
@@ -87,7 +91,15 @@ export const groupByFrameLikes = (elements) => {
     }
     return frameElementsMap;
 };
-export const getFrameChildren = (allElements, frameId) => allElements.filter((element) => element.frameId === frameId);
+export const getFrameChildren = (allElements, frameId) => {
+    const frameChildren = [];
+    for (const element of allElements.values()) {
+        if (element.frameId === frameId) {
+            frameChildren.push(element);
+        }
+    }
+    return frameChildren;
+};
 export const getFrameLikeElements = (allElements) => {
     return allElements.filter((element) => isFrameLikeElement(element));
 };
@@ -105,12 +117,12 @@ export const getRootElements = (allElements) => {
         !element.frameId ||
         !frameElements.has(element.frameId));
 };
-export const getElementsInResizingFrame = (allElements, frame, appState) => {
+export const getElementsInResizingFrame = (allElements, frame, appState, elementsMap) => {
     const prevElementsInFrame = getFrameChildren(allElements, frame.id);
     const nextElementsInFrame = new Set(prevElementsInFrame);
     const elementsCompletelyInFrame = new Set([
-        ...getElementsCompletelyInFrame(allElements, frame),
-        ...prevElementsInFrame.filter((element) => isElementContainingFrame(allElements, element, frame)),
+        ...getElementsCompletelyInFrame(allElements, frame, elementsMap),
+        ...prevElementsInFrame.filter((element) => isElementContainingFrame(allElements, element, frame, elementsMap)),
     ]);
     const elementsNotCompletelyInFrame = prevElementsInFrame.filter((element) => !elementsCompletelyInFrame.has(element));
     // for elements that are completely in the frame
@@ -118,7 +130,7 @@ export const getElementsInResizingFrame = (allElements, frame, appState) => {
     // considered to belong to the frame
     const groupsToKeep = new Set(Array.from(elementsCompletelyInFrame).flatMap((element) => element.groupIds));
     for (const element of elementsNotCompletelyInFrame) {
-        if (!isElementIntersectingFrame(element, frame)) {
+        if (!isElementIntersectingFrame(element, frame, elementsMap)) {
             if (element.groupIds.length === 0) {
                 nextElementsInFrame.delete(element);
             }
@@ -154,7 +166,7 @@ export const getElementsInResizingFrame = (allElements, frame, appState) => {
     for (const [id, isSelected] of Object.entries(groupIds)) {
         if (isSelected) {
             const elementsInGroup = getElementsInGroup(allElements, id);
-            if (elementsAreInFrameBounds(elementsInGroup, frame)) {
+            if (elementsAreInFrameBounds(elementsInGroup, frame, elementsMap)) {
                 for (const element of elementsInGroup) {
                     nextElementsInFrame.add(element);
                 }
@@ -165,49 +177,91 @@ export const getElementsInResizingFrame = (allElements, frame, appState) => {
         return !(isTextElement(element) && element.containerId);
     });
 };
-export const getElementsInNewFrame = (allElements, frame) => {
-    return omitGroupsContainingFrameLikes(allElements, getElementsCompletelyInFrame(allElements, frame));
+export const getElementsInNewFrame = (elements, frame, elementsMap) => {
+    return omitGroupsContainingFrameLikes(elements, getElementsCompletelyInFrame(elements, frame, elementsMap));
 };
-export const getContainingFrame = (element, 
-/**
- * Optionally an elements map, in case the elements aren't in the Scene yet.
- * Takes precedence over Scene elements, even if the element exists
- * in Scene elements and not the supplied elements map.
- */
-elementsMap) => {
-    if (element.frameId) {
-        if (elementsMap) {
-            return (elementsMap.get(element.frameId) ||
-                null);
-        }
-        return (Scene.getScene(element)?.getElement(element.frameId) || null);
+export const getContainingFrame = (element, elementsMap) => {
+    if (!element.frameId) {
+        return null;
     }
-    return null;
+    return (elementsMap.get(element.frameId) ||
+        null);
 };
 // --------------------------- Frame Operations -------------------------------
+/** */
+export const filterElementsEligibleAsFrameChildren = (elements, frame) => {
+    const otherFrames = new Set();
+    const elementsMap = arrayToMap(elements);
+    elements = omitGroupsContainingFrameLikes(elements);
+    for (const element of elements) {
+        if (isFrameLikeElement(element) && element.id !== frame.id) {
+            otherFrames.add(element.id);
+        }
+    }
+    const processedGroups = new Set();
+    const eligibleElements = [];
+    for (const element of elements) {
+        // don't add frames or their children
+        if (isFrameLikeElement(element) ||
+            (element.frameId && otherFrames.has(element.frameId))) {
+            continue;
+        }
+        if (element.groupIds.length) {
+            const shallowestGroupId = element.groupIds.at(-1);
+            if (!processedGroups.has(shallowestGroupId)) {
+                processedGroups.add(shallowestGroupId);
+                const groupElements = getElementsInGroup(elements, shallowestGroupId);
+                if (groupElements.some((el) => elementOverlapsWithFrame(el, frame, elementsMap))) {
+                    for (const child of groupElements) {
+                        eligibleElements.push(child);
+                    }
+                }
+            }
+        }
+        else {
+            const overlaps = elementOverlapsWithFrame(element, frame, elementsMap);
+            if (overlaps) {
+                eligibleElements.push(element);
+            }
+        }
+    }
+    return eligibleElements;
+};
 /**
  * Retains (or repairs for target frame) the ordering invriant where children
  * elements come right before the parent frame:
  * [el, el, child, child, frame, el]
+ *
+ * @returns mutated allElements (same data structure)
  */
 export const addElementsToFrame = (allElements, elementsToAdd, frame) => {
-    const { currTargetFrameChildrenMap } = allElements.reduce((acc, element, index) => {
+    const elementsMap = arrayToMap(allElements);
+    const currTargetFrameChildrenMap = new Map();
+    for (const element of allElements.values()) {
         if (element.frameId === frame.id) {
-            acc.currTargetFrameChildrenMap.set(element.id, true);
+            currTargetFrameChildrenMap.set(element.id, true);
         }
-        return acc;
-    }, {
-        currTargetFrameChildrenMap: new Map(),
-    });
+    }
     const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
     const finalElementsToAdd = [];
+    const otherFrames = new Set();
+    for (const element of elementsToAdd) {
+        if (isFrameLikeElement(element) && element.id !== frame.id) {
+            otherFrames.add(element.id);
+        }
+    }
     // - add bound text elements if not already in the array
     // - filter out elements that are already in the frame
     for (const element of omitGroupsContainingFrameLikes(allElements, elementsToAdd)) {
+        // don't add frames or their children
+        if (isFrameLikeElement(element) ||
+            (element.frameId && otherFrames.has(element.frameId))) {
+            continue;
+        }
         if (!currTargetFrameChildrenMap.has(element.id)) {
             finalElementsToAdd.push(element);
         }
-        const boundTextElement = getBoundTextElement(element);
+        const boundTextElement = getBoundTextElement(element, elementsMap);
         if (boundTextElement &&
             !suppliedElementsToAddSet.has(boundTextElement.id) &&
             !currTargetFrameChildrenMap.has(boundTextElement.id)) {
@@ -219,9 +273,9 @@ export const addElementsToFrame = (allElements, elementsToAdd, frame) => {
             frameId: frame.id,
         }, false);
     }
-    return allElements.slice();
+    return allElements;
 };
-export const removeElementsFromFrame = (allElements, elementsToRemove, appState) => {
+export const removeElementsFromFrame = (elementsToRemove, elementsMap) => {
     const _elementsToRemove = new Map();
     const toRemoveElementsByFrame = new Map();
     for (const element of elementsToRemove) {
@@ -229,7 +283,7 @@ export const removeElementsFromFrame = (allElements, elementsToRemove, appState)
             _elementsToRemove.set(element.id, element);
             const arr = toRemoveElementsByFrame.get(element.frameId) || [];
             arr.push(element);
-            const boundTextElement = getBoundTextElement(element);
+            const boundTextElement = getBoundTextElement(element, elementsMap);
             if (boundTextElement) {
                 _elementsToRemove.set(boundTextElement.id, boundTextElement);
                 arr.push(boundTextElement);
@@ -242,14 +296,14 @@ export const removeElementsFromFrame = (allElements, elementsToRemove, appState)
             frameId: null,
         }, false);
     }
-    return allElements.slice();
 };
-export const removeAllElementsFromFrame = (allElements, frame, appState) => {
+export const removeAllElementsFromFrame = (allElements, frame) => {
     const elementsInFrame = getFrameChildren(allElements, frame.id);
-    return removeElementsFromFrame(allElements, elementsInFrame, appState);
+    removeElementsFromFrame(elementsInFrame, arrayToMap(allElements));
+    return allElements;
 };
-export const replaceAllElementsInFrame = (allElements, nextElementsInFrame, frame, appState) => {
-    return addElementsToFrame(removeAllElementsFromFrame(allElements, frame, appState), nextElementsInFrame, frame);
+export const replaceAllElementsInFrame = (allElements, nextElementsInFrame, frame, app) => {
+    return addElementsToFrame(removeAllElementsFromFrame(allElements, frame), nextElementsInFrame, frame).slice();
 };
 /** does not mutate elements, but returns new ones */
 export const updateFrameMembershipOfSelectedElements = (allElements, appState, app) => {
@@ -272,16 +326,18 @@ export const updateFrameMembershipOfSelectedElements = (allElements, appState, a
         }
     }
     const elementsToRemove = new Set();
+    const elementsMap = arrayToMap(allElements);
     elementsToFilter.forEach((element) => {
         if (element.frameId &&
             !isFrameLikeElement(element) &&
-            !isElementInFrame(element, allElements, appState)) {
+            !isElementInFrame(element, elementsMap, appState)) {
             elementsToRemove.add(element);
         }
     });
-    return elementsToRemove.size > 0
-        ? removeElementsFromFrame(allElements, [...elementsToRemove], appState)
-        : allElements;
+    if (elementsToRemove.size > 0) {
+        removeElementsFromFrame(elementsToRemove, elementsMap);
+    }
+    return allElements;
 };
 /**
  * filters out elements that are inside groups that contain a frame element
@@ -293,7 +349,8 @@ export const omitGroupsContainingFrameLikes = (allElements,
  */
 selectedElements) => {
     const uniqueGroupIds = new Set();
-    for (const el of selectedElements || allElements) {
+    const elements = selectedElements || allElements;
+    for (const el of elements.values()) {
         const topMostGroupId = el.groupIds[el.groupIds.length - 1];
         if (topMostGroupId) {
             uniqueGroupIds.add(topMostGroupId);
@@ -305,27 +362,33 @@ selectedElements) => {
             rejectedGroupIds.add(groupId);
         }
     }
-    return (selectedElements || allElements).filter((el) => !rejectedGroupIds.has(el.groupIds[el.groupIds.length - 1]));
+    const ret = [];
+    for (const element of elements.values()) {
+        if (!rejectedGroupIds.has(element.groupIds[element.groupIds.length - 1])) {
+            ret.push(element);
+        }
+    }
+    return ret;
 };
 /**
  * depending on the appState, return target frame, which is the frame the given element
  * is going to be added to or remove from
  */
-export const getTargetFrame = (element, appState) => {
+export const getTargetFrame = (element, elementsMap, appState) => {
     const _element = isTextElement(element)
-        ? getContainerElement(element) || element
+        ? getContainerElement(element, elementsMap) || element
         : element;
     return appState.selectedElementIds[_element.id] &&
         appState.selectedElementsAreBeingDragged
         ? appState.frameToHighlight
-        : getContainingFrame(_element);
+        : getContainingFrame(_element, elementsMap);
 };
 // TODO: this a huge bottleneck for large scenes, optimise
 // given an element, return if the element is in some frame
-export const isElementInFrame = (element, allElements, appState) => {
-    const frame = getTargetFrame(element, appState);
+export const isElementInFrame = (element, allElementsMap, appState) => {
+    const frame = getTargetFrame(element, allElementsMap, appState);
     const _element = isTextElement(element)
-        ? getContainerElement(element) || element
+        ? getContainerElement(element, allElementsMap) || element
         : element;
     if (frame) {
         // Perf improvement:
@@ -337,11 +400,11 @@ export const isElementInFrame = (element, allElements, appState) => {
             return true;
         }
         if (_element.groupIds.length === 0) {
-            return elementOverlapsWithFrame(_element, frame);
+            return elementOverlapsWithFrame(_element, frame, allElementsMap);
         }
-        const allElementsInGroup = new Set(_element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)));
+        const allElementsInGroup = new Set(_element.groupIds.flatMap((gid) => getElementsInGroup(allElementsMap, gid)));
         if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
-            const selectedElements = new Set(getSelectedElements(allElements, appState));
+            const selectedElements = new Set(getSelectedElements(allElementsMap, appState));
             const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
             if (editingGroupOverlapsFrame) {
                 return true;
@@ -356,7 +419,7 @@ export const isElementInFrame = (element, allElements, appState) => {
             }
         }
         for (const elementInGroup of allElementsInGroup) {
-            if (elementOverlapsWithFrame(elementInGroup, frame)) {
+            if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
                 return true;
             }
         }
@@ -364,10 +427,20 @@ export const isElementInFrame = (element, allElements, appState) => {
     return false;
 };
 export const getFrameLikeTitle = (element, frameIdx) => {
-    const existingName = element.name?.trim();
-    if (existingName) {
-        return existingName;
-    }
-    // TODO name frames AI only is specific to AI frames
-    return isFrameElement(element) ? `Frame ${frameIdx}` : `AI Frame ${frameIdx}`;
+    // TODO name frames "AI" only if specific to AI frames
+    return element.name === null
+        ? isFrameElement(element)
+            ? `Frame ${frameIdx}`
+            : `AI Frame $${frameIdx}`
+        : element.name;
+};
+export const getElementsOverlappingFrame = (elements, frame) => {
+    return (elementsOverlappingBBox({
+        elements,
+        bounds: frame,
+        type: "overlap",
+    })
+        // removes elements who are overlapping, but are in a different frame,
+        // and thus invisible in target frame
+        .filter((el) => !el.frameId || el.frameId === frame.id));
 };

package/dist/excalidraw/groups.d.ts

@@ -1,4 +1,4 @@
-import { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
+import { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ElementsMapOrArray, ElementsMap } from "./element/types";
 import { AppClassProperties, AppState, InteractiveCanvasAppState } from "./types";
 import { Mutable } from "./utility-types";
 export declare const selectGroup: (groupId: GroupId, appState: InteractiveCanvasAppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => Pick<InteractiveCanvasAppState, "selectedGroupIds" | "selectedElementIds" | "editingGroupId">;
@@ -18,7 +18,7 @@ export declare const selectGroupsFromGivenElements: (elements: readonly NonDelet
 };
 export declare const editGroupForSelectedElement: (appState: AppState, element: NonDeleted<ExcalidrawElement>) => AppState;
 export declare const isElementInGroup: (element: ExcalidrawElement, groupId: string) => boolean;
-export declare const getElementsInGroup: (elements: readonly ExcalidrawElement[], groupId: string) => ExcalidrawElement[];
+export declare const getElementsInGroup: (elements: ElementsMapOrArray, groupId: string) => ExcalidrawElement[];
 export declare const getSelectedGroupIdForElement: (element: ExcalidrawElement, selectedGroupIds: {
     [groupId: string]: boolean;
 }) => string | undefined;
@@ -27,5 +27,5 @@ export declare const addToGroup: (prevGroupIds: ExcalidrawElement["groupIds"], n
 export declare const removeFromSelectedGroups: (groupIds: ExcalidrawElement["groupIds"], selectedGroupIds: {
     [groupId: string]: boolean;
 }) => string[];
-export declare const getMaximumGroups: (elements: ExcalidrawElement[]) => ExcalidrawElement[][];
+export declare const getMaximumGroups: (elements: ExcalidrawElement[], elementsMap: ElementsMap) => ExcalidrawElement[][];
 export declare const elementsAreInSameGroup: (elements: ExcalidrawElement[]) => boolean;

package/dist/excalidraw/groups.js

@@ -171,7 +171,15 @@ export const editGroupForSelectedElement = (appState, element) => {
     };
 };
 export const isElementInGroup = (element, groupId) => element.groupIds.includes(groupId);
-export const getElementsInGroup = (elements, groupId) => elements.filter((element) => isElementInGroup(element, groupId));
+export const getElementsInGroup = (elements, groupId) => {
+    const elementsInGroup = [];
+    for (const element of elements.values()) {
+        if (isElementInGroup(element, groupId)) {
+            elementsInGroup.push(element);
+        }
+    }
+    return elementsInGroup;
+};
 export const getSelectedGroupIdForElement = (element, selectedGroupIds) => element.groupIds.find((groupId) => selectedGroupIds[groupId]);
 export const getNewGroupIdsForDuplication = (groupIds, editingGroupId, mapper) => {
     const copy = [...groupIds];
@@ -195,7 +203,7 @@ export const addToGroup = (prevGroupIds, newGroupId, editingGroupId) => {
     return groupIds;
 };
 export const removeFromSelectedGroups = (groupIds, selectedGroupIds) => groupIds.filter((groupId) => !selectedGroupIds[groupId]);
-export const getMaximumGroups = (elements) => {
+export const getMaximumGroups = (elements, elementsMap) => {
     const groups = new Map();
     elements.forEach((element) => {
         const groupId = element.groupIds.length === 0
@@ -203,7 +211,7 @@ export const getMaximumGroups = (elements) => {
             : element.groupIds[element.groupIds.length - 1];
         const currentGroupMembers = groups.get(groupId) || [];
         // Include bound text if present when grouping
-        const boundTextElement = getBoundTextElement(element);
+        const boundTextElement = getBoundTextElement(element, elementsMap);
         if (boundTextElement) {
             currentGroupMembers.push(boundTextElement);
         }

package/dist/excalidraw/history.d.ts

@@ -14,7 +14,7 @@ declare const clearAppStatePropertiesForHistory: (appState: AppState) => {
     viewBackgroundColor: string;
     editingLinearElement: import("./element/linearElementEditor").LinearElementEditor | null;
     editingGroupId: string | null;
-    name: string;
+    name: string | null;
 };
 declare class History {
     private elementCache;

package/dist/excalidraw/hooks/useLibraryItemSvg.js

@@ -2,7 +2,7 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { COLOR_PALETTE } from "../colors";
 import { jotaiScope } from "../jotai";
-import { exportToSvg } from "../../utils/index";
+import { exportToSvg } from "../../utils/export";
 export const libraryItemSvgsCache = atom(new Map());
 const exportLibraryItemToSvg = async (elements) => {
     return await exportToSvg({