@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/element/sortElements.js

@@ -97,8 +97,5 @@ const normalizeBoundElementsOrder = (elements) => {
     return [...sortedElements];
 };
 export const normalizeElementOrder = (elements) => {
-    // console.time();
-    const ret = normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
-    // console.timeEnd();
-    return ret;
+    return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
 };

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

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

package/dist/excalidraw/fonts/Fonts.d.ts

@@ -31,28 +31,12 @@ export declare class Fonts {
     onLoaded: (fontFaces: readonly FontFace[]) => void;
     /**
      * Load font faces for a given scene and trigger scene update.
-     *
-     * FontFaceSet loadingdone event we listen on may not always
-     * fire (looking at you Safari), so on init we manually load all
-     * fonts and rerender scene text elements once done.
-     *
-     * For Safari we make sure to check against each loaded font face
-     * with the unique characters per family in the scene,
-     * otherwise fonts might remain unloaded.
      */
     loadSceneFonts: () => Promise<FontFace[]>;
     /**
      * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
-     *
-     * For Safari we make sure to check against each loaded font face,
-     * with the unique characters per family in the elements
-     * otherwise fonts might remain unloaded.
      */
     static loadElementsFonts: (elements: readonly ExcalidrawElement[]) => Promise<FontFace[]>;
-    /**
-     * Load all registered font faces.
-     */
-    static loadAllFonts: () => Promise<FontFace[]>;
     /**
      * Generate CSS @font-face declarations for the given elements.
      */

package/dist/excalidraw/fonts/Fonts.js

@@ -1,4 +1,4 @@
-import { FONT_FAMILY, FONT_FAMILY_FALLBACKS, CJK_HAND_DRAWN_FALLBACK_FONT, WINDOWS_EMOJI_FALLBACK_FONT, isSafari, getFontFamilyFallbacks, } from "../constants";
+import { FONT_FAMILY, FONT_FAMILY_FALLBACKS, CJK_HAND_DRAWN_FALLBACK_FONT, WINDOWS_EMOJI_FALLBACK_FONT, getFontFamilyFallbacks, } from "../constants";
 import { isTextElement } from "../element";
 import { charWidth, getContainerElement } from "../element/textElement";
 import { containsCJK } from "../element/textWrapping";
@@ -94,43 +94,20 @@ export class Fonts {
     };
     /**
      * Load font faces for a given scene and trigger scene update.
-     *
-     * FontFaceSet loadingdone event we listen on may not always
-     * fire (looking at you Safari), so on init we manually load all
-     * fonts and rerender scene text elements once done.
-     *
-     * For Safari we make sure to check against each loaded font face
-     * with the unique characters per family in the scene,
-     * otherwise fonts might remain unloaded.
      */
     loadSceneFonts = async () => {
         const sceneFamilies = this.getSceneFamilies();
-        const charsPerFamily = isSafari
-            ? Fonts.getCharsPerFamily(this.scene.getNonDeletedElements())
-            : undefined;
+        const charsPerFamily = Fonts.getCharsPerFamily(this.scene.getNonDeletedElements());
         return Fonts.loadFontFaces(sceneFamilies, charsPerFamily);
     };
     /**
      * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
-     *
-     * For Safari we make sure to check against each loaded font face,
-     * with the unique characters per family in the elements
-     * otherwise fonts might remain unloaded.
      */
     static loadElementsFonts = async (elements) => {
         const fontFamilies = Fonts.getUniqueFamilies(elements);
-        const charsPerFamily = isSafari
-            ? Fonts.getCharsPerFamily(elements)
-            : undefined;
+        const charsPerFamily = Fonts.getCharsPerFamily(elements);
         return Fonts.loadFontFaces(fontFamilies, charsPerFamily);
     };
-    /**
-     * Load all registered font faces.
-     */
-    static loadAllFonts = async () => {
-        const allFamilies = Fonts.getAllFamilies();
-        return Fonts.loadFontFaces(allFamilies);
-    };
     /**
      * Generate CSS @font-face declarations for the given elements.
      */
@@ -184,11 +161,9 @@ export class Fonts {
                 fontFamily,
                 fontSize: 16,
             });
-            // WARN: without "text" param it does not have to mean that all font faces are loaded, instead it could be just one!
-            // for Safari on init, we rather check with the "text" param, even though it's less efficient, as otherwise fonts might remain unloaded
-            const text = isSafari && charsPerFamily
-                ? Fonts.getCharacters(charsPerFamily, fontFamily)
-                : "";
+            // WARN: without "text" param it does not have to mean that all font faces are loaded as it could be just one irrelevant font face!
+            // instead, we are always checking chars used in the family, so that no required font faces remain unloaded
+            const text = Fonts.getCharacters(charsPerFamily, fontFamily);
             if (!window.document.fonts.check(font, text)) {
                 yield promiseTry(async () => {
                     try {

package/dist/excalidraw/frame.d.ts

@@ -5,7 +5,7 @@ import type { ReadonlySetLike } from "./utility-types";
 export declare const bindElementsToFramesAfterDuplication: (nextElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 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 isElementContainingFrame: (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, elementsMap: ElementsMap) => boolean;
 export declare const elementOverlapsWithFrame: (element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => boolean;
@@ -31,7 +31,8 @@ export declare const getFrameLikeElements: (allElements: ExcalidrawElementsInclu
  */
 export declare const getRootElements: (allElements: ExcalidrawElementsIncludingDeleted) => ExcalidrawElement[];
 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 getElementsInNewFrame: (elements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => (import("./element/types").ExcalidrawSelectionElement | import("./element/types").ExcalidrawRectangleElement | import("./element/types").ExcalidrawDiamondElement | import("./element/types").ExcalidrawEllipseElement | import("./element/types").ExcalidrawTextElement | import("./element/types").ExcalidrawLinearElement | import("./element/types").ExcalidrawFreeDrawElement | import("./element/types").ExcalidrawImageElement | import("./element/types").ExcalidrawFrameElement | import("./element/types").ExcalidrawMagicFrameElement | import("./element/types").ExcalidrawIframeElement | import("./element/types").ExcalidrawEmbeddableElement)[];
+export declare const omitPartialGroups: (elements: ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, allElementsMap: ElementsMap) => (import("./element/types").ExcalidrawSelectionElement | import("./element/types").ExcalidrawRectangleElement | import("./element/types").ExcalidrawDiamondElement | import("./element/types").ExcalidrawEllipseElement | import("./element/types").ExcalidrawTextElement | import("./element/types").ExcalidrawLinearElement | import("./element/types").ExcalidrawFreeDrawElement | import("./element/types").ExcalidrawImageElement | import("./element/types").ExcalidrawFrameElement | import("./element/types").ExcalidrawMagicFrameElement | import("./element/types").ExcalidrawIframeElement | import("./element/types").ExcalidrawEmbeddableElement)[];
 export declare const getContainingFrame: (element: ExcalidrawElement, elementsMap: ElementsMap) => ExcalidrawFrameLikeElement | null;
 /** */
 export declare const filterElementsEligibleAsFrameChildren: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => ExcalidrawElement[];
@@ -42,7 +43,7 @@ export declare const filterElementsEligibleAsFrameChildren: (elements: readonly
  *
  * @returns mutated allElements (same data structure)
  */
-export declare const addElementsToFrame: <T extends ElementsMapOrArray>(allElements: T, elementsToAdd: NonDeletedExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => T;
+export declare const addElementsToFrame: <T extends ElementsMapOrArray>(allElements: T, elementsToAdd: NonDeletedExcalidrawElement[], frame: ExcalidrawFrameLikeElement, appState: AppState) => 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[];
@@ -57,7 +58,12 @@ export declare const omitGroupsContainingFrameLikes: (allElements: ElementsMapOr
  * 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, 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 getTargetFrame: (element: ExcalidrawElement, elementsMap: ElementsMap, appState: StaticCanvasAppState) => ExcalidrawFrameLikeElement | null;
+export declare const isElementInFrame: (element: ExcalidrawElement, allElementsMap: ElementsMap, appState: StaticCanvasAppState, opts?: {
+    targetFrame?: ExcalidrawFrameLikeElement;
+    checkedGroups?: Map<string, boolean>;
+}) => boolean;
+export declare const shouldApplyFrameClip: (element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, appState: StaticCanvasAppState, elementsMap: ElementsMap, checkedGroups?: Map<string, boolean>) => boolean;
 export declare const getFrameLikeTitle: (element: ExcalidrawFrameLikeElement) => string;
 export declare const getElementsOverlappingFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement) => NonDeletedExcalidrawElement[];
+export declare const frameAndChildrenSelectedTogether: (selectedElements: readonly ExcalidrawElement[]) => boolean;

package/dist/excalidraw/frame.js

@@ -35,8 +35,8 @@ export function isElementIntersectingFrame(element, frame, elementsMap) {
 }
 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, elementsMap) => {
-    return getElementsWithinSelection(elements, element, elementsMap).some((e) => e.id === frame.id);
+export const isElementContainingFrame = (element, frame, elementsMap) => {
+    return getElementsWithinSelection([frame], element, elementsMap).some((e) => e.id === frame.id);
 };
 export const getElementsIntersectingFrame = (elements, frame) => {
     const elementsMap = arrayToMap(elements);
@@ -53,7 +53,7 @@ export const elementsAreInFrameBounds = (elements, frame, elementsMap) => {
 export const elementOverlapsWithFrame = (element, frame, elementsMap) => {
     return (elementsAreInFrameBounds([element], frame, elementsMap) ||
         isElementIntersectingFrame(element, frame, elementsMap) ||
-        isElementContainingFrame([frame], element, frame, elementsMap));
+        isElementContainingFrame(element, frame, elementsMap));
 };
 export const isCursorInFrame = (cursorCoords, frame, elementsMap) => {
     const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);
@@ -122,7 +122,7 @@ export const getElementsInResizingFrame = (allElements, frame, appState, element
     const nextElementsInFrame = new Set(prevElementsInFrame);
     const elementsCompletelyInFrame = new Set([
         ...getElementsCompletelyInFrame(allElements, frame, elementsMap),
-        ...prevElementsInFrame.filter((element) => isElementContainingFrame(allElements, element, frame, elementsMap)),
+        ...prevElementsInFrame.filter((element) => isElementContainingFrame(element, frame, elementsMap)),
     ]);
     const elementsNotCompletelyInFrame = prevElementsInFrame.filter((element) => !elementsCompletelyInFrame.has(element));
     // for elements that are completely in the frame
@@ -178,7 +178,31 @@ export const getElementsInResizingFrame = (allElements, frame, appState, element
     });
 };
 export const getElementsInNewFrame = (elements, frame, elementsMap) => {
-    return omitGroupsContainingFrameLikes(elements, getElementsCompletelyInFrame(elements, frame, elementsMap));
+    return omitPartialGroups(omitGroupsContainingFrameLikes(elements, getElementsCompletelyInFrame(elements, frame, elementsMap)), frame, elementsMap);
+};
+export const omitPartialGroups = (elements, frame, allElementsMap) => {
+    const elementsToReturn = [];
+    const checkedGroups = new Map();
+    for (const element of elements) {
+        let shouldOmit = false;
+        if (element.groupIds.length > 0) {
+            // if some partial group should be omitted, then all elements in that group should be omitted
+            if (element.groupIds.some((gid) => checkedGroups.get(gid))) {
+                shouldOmit = true;
+            }
+            else {
+                const allElementsInGroup = new Set(element.groupIds.flatMap((gid) => getElementsInGroup(allElementsMap, gid)));
+                shouldOmit = !elementsAreInFrameBounds(Array.from(allElementsInGroup), frame, allElementsMap);
+            }
+            element.groupIds.forEach((gid) => {
+                checkedGroups.set(gid, shouldOmit);
+            });
+        }
+        if (!shouldOmit) {
+            elementsToReturn.push(element);
+        }
+    }
+    return elementsToReturn;
 };
 export const getContainingFrame = (element, elementsMap) => {
     if (!element.frameId) {
@@ -234,7 +258,7 @@ export const filterElementsEligibleAsFrameChildren = (elements, frame) => {
  *
  * @returns mutated allElements (same data structure)
  */
-export const addElementsToFrame = (allElements, elementsToAdd, frame) => {
+export const addElementsToFrame = (allElements, elementsToAdd, frame, appState) => {
     const elementsMap = arrayToMap(allElements);
     const currTargetFrameChildrenMap = new Map();
     for (const element of allElements.values()) {
@@ -258,6 +282,14 @@ export const addElementsToFrame = (allElements, elementsToAdd, frame) => {
             (element.frameId && otherFrames.has(element.frameId))) {
             continue;
         }
+        // if the element is already in another frame (which is also in elementsToAdd),
+        // it means that frame and children are selected at the same time
+        // => keep original frame membership, do not add to the target frame
+        if (element.frameId &&
+            appState.selectedElementIds[element.id] &&
+            appState.selectedElementIds[element.frameId]) {
+            continue;
+        }
         if (!currTargetFrameChildrenMap.has(element.id)) {
             finalElementsToAdd.push(element);
         }
@@ -303,7 +335,7 @@ export const removeAllElementsFromFrame = (allElements, frame) => {
     return allElements;
 };
 export const replaceAllElementsInFrame = (allElements, nextElementsInFrame, frame, app) => {
-    return addElementsToFrame(removeAllElementsFromFrame(allElements, frame), nextElementsInFrame, frame).slice();
+    return addElementsToFrame(removeAllElementsFromFrame(allElements, frame), nextElementsInFrame, frame, app.state).slice();
 };
 /** does not mutate elements, but returns new ones */
 export const updateFrameMembershipOfSelectedElements = (allElements, appState, app) => {
@@ -378,6 +410,13 @@ export const getTargetFrame = (element, elementsMap, appState) => {
     const _element = isTextElement(element)
         ? getContainerElement(element, elementsMap) || element
         : element;
+    // if the element and its containing frame are both selected, then
+    // the containing frame is the target frame
+    if (_element.frameId &&
+        appState.selectedElementIds[_element.id] &&
+        appState.selectedElementIds[_element.frameId]) {
+        return getContainingFrame(_element, elementsMap);
+    }
     return appState.selectedElementIds[_element.id] &&
         appState.selectedElementsAreBeingDragged
         ? appState.frameToHighlight
@@ -385,44 +424,111 @@ export const getTargetFrame = (element, elementsMap, appState) => {
 };
 // TODO: this a huge bottleneck for large scenes, optimise
 // given an element, return if the element is in some frame
-export const isElementInFrame = (element, allElementsMap, appState) => {
-    const frame = getTargetFrame(element, allElementsMap, appState);
+export const isElementInFrame = (element, allElementsMap, appState, opts) => {
+    const frame = opts?.targetFrame ?? getTargetFrame(element, allElementsMap, appState);
+    if (!frame) {
+        return false;
+    }
     const _element = isTextElement(element)
         ? getContainerElement(element, allElementsMap) || element
         : element;
-    if (frame) {
-        // Perf improvement:
-        // For an element that's already in a frame, if it's not being dragged
-        // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
-        // It has to be in its containing frame.
-        if (!appState.selectedElementIds[element.id] ||
-            !appState.selectedElementsAreBeingDragged) {
+    const setGroupsInFrame = (isInFrame) => {
+        if (opts?.checkedGroups) {
+            _element.groupIds.forEach((groupId) => {
+                opts.checkedGroups?.set(groupId, isInFrame);
+            });
+        }
+    };
+    if (
+    // if the element is not selected, or it is selected but not being dragged,
+    // frame membership won't update, so return true
+    !appState.selectedElementIds[_element.id] ||
+        !appState.selectedElementsAreBeingDragged ||
+        // if both frame and element are selected, won't update membership, so return true
+        (appState.selectedElementIds[_element.id] &&
+            appState.selectedElementIds[frame.id])) {
+        return true;
+    }
+    if (_element.groupIds.length === 0) {
+        return elementOverlapsWithFrame(_element, frame, allElementsMap);
+    }
+    for (const gid of _element.groupIds) {
+        if (opts?.checkedGroups?.has(gid)) {
+            return opts.checkedGroups.get(gid);
+        }
+    }
+    const allElementsInGroup = new Set(_element.groupIds
+        .filter((gid) => {
+        if (opts?.checkedGroups) {
+            return !opts.checkedGroups.has(gid);
+        }
+        return true;
+    })
+        .flatMap((gid) => getElementsInGroup(allElementsMap, gid)));
+    if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
+        const selectedElements = new Set(getSelectedElements(allElementsMap, appState));
+        const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
+        if (editingGroupOverlapsFrame) {
             return true;
         }
-        if (_element.groupIds.length === 0) {
-            return elementOverlapsWithFrame(_element, frame, allElementsMap);
+        selectedElements.forEach((selectedElement) => {
+            allElementsInGroup.delete(selectedElement);
+        });
+    }
+    for (const elementInGroup of allElementsInGroup) {
+        if (isFrameLikeElement(elementInGroup)) {
+            setGroupsInFrame(false);
+            return false;
         }
-        const allElementsInGroup = new Set(_element.groupIds.flatMap((gid) => getElementsInGroup(allElementsMap, gid)));
-        if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
-            const selectedElements = new Set(getSelectedElements(allElementsMap, appState));
-            const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
-            if (editingGroupOverlapsFrame) {
-                return true;
-            }
-            selectedElements.forEach((selectedElement) => {
-                allElementsInGroup.delete(selectedElement);
-            });
+    }
+    for (const elementInGroup of allElementsInGroup) {
+        if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
+            setGroupsInFrame(true);
+            return true;
         }
-        for (const elementInGroup of allElementsInGroup) {
-            if (isFrameLikeElement(elementInGroup)) {
-                return false;
-            }
+    }
+    return false;
+};
+export const shouldApplyFrameClip = (element, frame, appState, elementsMap, checkedGroups) => {
+    if (!appState.frameRendering || !appState.frameRendering.clip) {
+        return false;
+    }
+    // for individual elements, only clip when the element is
+    // a. overlapping with the frame, or
+    // b. containing the frame, for example when an element is used as a background
+    //    and is therefore bigger than the frame and completely contains the frame
+    const shouldClipElementItself = isElementIntersectingFrame(element, frame, elementsMap) ||
+        isElementContainingFrame(element, frame, elementsMap);
+    if (shouldClipElementItself) {
+        for (const groupId of element.groupIds) {
+            checkedGroups?.set(groupId, true);
         }
-        for (const elementInGroup of allElementsInGroup) {
-            if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
-                return true;
+        return true;
+    }
+    // if an element is outside the frame, but is part of a group that has some elements
+    // "in" the frame, we should clip the element
+    if (!shouldClipElementItself &&
+        element.groupIds.length > 0 &&
+        !elementsAreInFrameBounds([element], frame, elementsMap)) {
+        let shouldClip = false;
+        // if no elements are being dragged, we can skip the geometry check
+        // because we know if the element is in the given frame or not
+        if (!appState.selectedElementsAreBeingDragged) {
+            shouldClip = element.frameId === frame.id;
+            for (const groupId of element.groupIds) {
+                checkedGroups?.set(groupId, shouldClip);
             }
         }
+        else {
+            shouldClip = isElementInFrame(element, elementsMap, appState, {
+                targetFrame: frame,
+                checkedGroups,
+            });
+        }
+        for (const groupId of element.groupIds) {
+            checkedGroups?.set(groupId, shouldClip);
+        }
+        return shouldClip;
     }
     return false;
 };
@@ -444,3 +550,8 @@ export const getElementsOverlappingFrame = (elements, frame) => {
         // and thus invisible in target frame
         .filter((el) => !el.frameId || el.frameId === frame.id));
 };
+export const frameAndChildrenSelectedTogether = (selectedElements) => {
+    const selectedElementsMap = arrayToMap(selectedElements);
+    return (selectedElements.length > 1 &&
+        selectedElements.some((element) => element.frameId && selectedElementsMap.has(element.frameId)));
+};

package/dist/excalidraw/groups.js

@@ -58,6 +58,9 @@ export const selectGroupsForSelectedElements = (function () {
         // Gather all the elements within selected groups
         const groupElementsIndex = {};
         const selectedElementIdsInGroups = elements.reduce((acc, element) => {
+            if (element.isDeleted) {
+                return acc;
+            }
             const groupId = element.groupIds.find((id) => selectedGroupIds[id]);
             if (groupId) {
                 acc[element.id] = true;

package/dist/excalidraw/hooks/useLibraryItemSvg.d.ts

@@ -1,6 +1,6 @@
 import type { LibraryItem } from "../types";
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
-export declare const libraryItemSvgsCache: import("jotai").PrimitiveAtom<SvgCache> & {
+export declare const libraryItemSvgsCache: import("jotai/vanilla/atom").PrimitiveAtom<SvgCache> & {
     init: SvgCache;
 };
 export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache) => SVGSVGElement | undefined;

package/dist/excalidraw/hooks/useLibraryItemSvg.js

@@ -1,7 +1,6 @@
-import { atom, useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { COLOR_PALETTE } from "../colors";
-import { jotaiScope } from "../jotai";
+import { atom, useAtom } from "../editor-jotai";
 import { exportToSvg } from "../../utils/export";
 export const libraryItemSvgsCache = atom(new Map());
 const exportLibraryItemToSvg = async (elements) => {
@@ -51,7 +50,7 @@ export const useLibraryItemSvg = (id, elements, svgCache) => {
     return svg;
 };
 export const useLibraryCache = () => {
-    const [svgCache] = useAtom(libraryItemSvgsCache, jotaiScope);
+    const [svgCache] = useAtom(libraryItemSvgsCache);
     const clearLibraryCache = () => svgCache.clear();
     const deleteItemsFromLibraryCache = (items) => {
         items.forEach((item) => svgCache.delete(item));

package/dist/excalidraw/hooks/useScrollPosition.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { atom, useAtom } from "jotai";
+import { atom, useAtom } from "../editor-jotai";
 import throttle from "lodash.throttle";
 const scrollPositionAtom = atom(0);
 export const useScrollPosition = (elementRef) => {

package/dist/excalidraw/i18n.js

@@ -1,7 +1,6 @@
 import fallbackLangData from "./locales/en.json";
 import percentages from "./locales/percentages.json";
-import { jotaiScope, jotaiStore } from "./jotai";
-import { atom, useAtomValue } from "jotai";
+import { useAtomValue, editorJotaiStore, atom } from "./editor-jotai";
 const COMPLETION_THRESHOLD = 85;
 export const defaultLang = { code: "en", label: "English" };
 export const languages = [
@@ -82,7 +81,7 @@ export const setLanguage = async (lang) => {
             currentLangData = fallbackLangData;
         }
     }
-    jotaiStore.set(editorLangCodeAtom, lang.code);
+    editorJotaiStore.set(editorLangCodeAtom, lang.code);
 };
 export const getLanguage = () => currentLang;
 const findPartsForData = (data, parts) => {
@@ -132,6 +131,6 @@ const editorLangCodeAtom = atom(defaultLang.code);
 // - component is rendered internally by <Excalidraw>, but the component
 //   is memoized w/o being updated on `langCode`, `AppState`, or `UIAppState`
 export const useI18n = () => {
-    const langCode = useAtomValue(editorLangCodeAtom, jotaiScope);
+    const langCode = useAtomValue(editorLangCodeAtom);
     return { t, langCode };
 };

package/dist/excalidraw/index.js

@@ -9,15 +9,14 @@ import "./css/styles.scss";
 import "./fonts/fonts.css";
 import { defaultLang } from "./i18n";
 import { DEFAULT_UI_OPTIONS } from "./constants";
-import { Provider } from "jotai";
-import { jotaiScope, jotaiStore } from "./jotai";
+import { EditorJotaiProvider, editorJotaiStore } from "./editor-jotai";
 import Footer from "./components/footer/FooterCenter";
 import MainMenu from "./components/main-menu/MainMenu";
 import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
 import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 polyfill();
 const ExcalidrawBase = (props) => {
-    const { onChange, initialData, excalidrawAPI, isCollaborating = false, onPointerUpdate, renderTopRightUI, langCode = defaultLang.code, viewModeEnabled, zenModeEnabled, gridModeEnabled, libraryReturnUrl, theme, name, renderCustomStats, onPaste, detectScroll = true, handleKeyboardGlobally = false, onLibraryChange, autoFocus = false, generateIdForFile, onLinkOpen, generateLinkForSelection, onPointerDown, onPointerUp, onScrollChange, children, validateEmbeddable, renderEmbeddable, aiEnabled, showDeprecatedFonts, } = props;
+    const { onChange, initialData, excalidrawAPI, isCollaborating = false, onPointerUpdate, renderTopRightUI, langCode = defaultLang.code, viewModeEnabled, zenModeEnabled, gridModeEnabled, libraryReturnUrl, theme, name, renderCustomStats, onPaste, detectScroll = true, handleKeyboardGlobally = false, onLibraryChange, autoFocus = false, generateIdForFile, onLinkOpen, generateLinkForSelection, onPointerDown, onPointerUp, onScrollChange, onDuplicate, children, validateEmbeddable, renderEmbeddable, aiEnabled, showDeprecatedFonts, } = props;
     const canvasActions = props.UIOptions?.canvasActions;
     // FIXME normalize/set defaults in parent component so that the memo resolver
     // compares the same values
@@ -60,7 +59,7 @@ const ExcalidrawBase = (props) => {
             document.removeEventListener("touchmove", handleTouchMove);
         };
     }, []);
-    return (_jsx(Provider, { unstable_createStore: () => jotaiStore, scope: jotaiScope, children: _jsx(InitializeApp, { langCode: langCode, theme: theme, children: _jsx(App, { onChange: onChange, initialData: initialData, excalidrawAPI: excalidrawAPI, isCollaborating: isCollaborating, onPointerUpdate: onPointerUpdate, renderTopRightUI: renderTopRightUI, langCode: langCode, viewModeEnabled: viewModeEnabled, zenModeEnabled: zenModeEnabled, gridModeEnabled: gridModeEnabled, libraryReturnUrl: libraryReturnUrl, theme: theme, name: name, renderCustomStats: renderCustomStats, UIOptions: UIOptions, onPaste: onPaste, detectScroll: detectScroll, handleKeyboardGlobally: handleKeyboardGlobally, onLibraryChange: onLibraryChange, autoFocus: autoFocus, generateIdForFile: generateIdForFile, onLinkOpen: onLinkOpen, generateLinkForSelection: generateLinkForSelection, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onScrollChange: onScrollChange, validateEmbeddable: validateEmbeddable, renderEmbeddable: renderEmbeddable, aiEnabled: aiEnabled !== false, showDeprecatedFonts: showDeprecatedFonts, children: children }) }) }));
+    return (_jsx(EditorJotaiProvider, { store: editorJotaiStore, children: _jsx(InitializeApp, { langCode: langCode, theme: theme, children: _jsx(App, { onChange: onChange, initialData: initialData, excalidrawAPI: excalidrawAPI, isCollaborating: isCollaborating, onPointerUpdate: onPointerUpdate, renderTopRightUI: renderTopRightUI, langCode: langCode, viewModeEnabled: viewModeEnabled, zenModeEnabled: zenModeEnabled, gridModeEnabled: gridModeEnabled, libraryReturnUrl: libraryReturnUrl, theme: theme, name: name, renderCustomStats: renderCustomStats, UIOptions: UIOptions, onPaste: onPaste, detectScroll: detectScroll, handleKeyboardGlobally: handleKeyboardGlobally, onLibraryChange: onLibraryChange, autoFocus: autoFocus, generateIdForFile: generateIdForFile, onLinkOpen: onLinkOpen, generateLinkForSelection: generateLinkForSelection, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onScrollChange: onScrollChange, onDuplicate: onDuplicate, validateEmbeddable: validateEmbeddable, renderEmbeddable: renderEmbeddable, aiEnabled: aiEnabled !== false, showDeprecatedFonts: showDeprecatedFonts, children: children }) }) }));
 };
 const areEqual = (prevProps, nextProps) => {
     // short-circuit early

package/dist/excalidraw/locales/en.json

@@ -46,6 +46,10 @@
         "arrowhead_triangle_outline": "Triangle (outline)",
         "arrowhead_diamond": "Diamond",
         "arrowhead_diamond_outline": "Diamond (outline)",
+        "arrowhead_crowfoot_many": "Crow's foot (many)",
+        "arrowhead_crowfoot_one": "Crow's foot (one)",
+        "arrowhead_crowfoot_one_or_many": "Crow's foot (one or many)",
+        "more_options": "More options",
         "arrowtypes": "Arrow type",
         "arrowtype_sharp": "Sharp arrow",
         "arrowtype_round": "Curved arrow",
@@ -157,8 +161,11 @@
         "zoomToFit": "Zoom to fit all elements",
         "installPWA": "Install Excalidraw locally (PWA)",
         "autoResize": "Enable text auto-resizing",
+        "imageCropping": "Image cropping",
+        "unCroppedDimension": "Uncropped dimension",
         "copyElementLink": "Copy link to object",
-        "linkToElement": "Link to object"
+        "linkToElement": "Link to object",
+        "wrapSelectionInFrame": "Wrap selection in frame"
     },
     "elementLink": {
         "title": "Link to object",