@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/actions/actionFrame.d.ts

@@ -758,3 +758,496 @@ export declare const actionSetFrameAsActiveTool: {
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
+export declare const actionWrapSelectionInFrame: {
+    name: "wrapSelectionInFrame";
+    label: string;
+    trackEvent: {
+        category: "element";
+    };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, _: import("../types").ExcalidrawProps, app: AppClassProperties) => boolean;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
+        elements: (import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & {
+            type: "selection";
+        } & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & {
+            type: "rectangle";
+        } & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & {
+            type: "diamond";
+        } & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & {
+            type: "ellipse";
+        } & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & Readonly<{
+            type: "text";
+            fontSize: number;
+            fontFamily: number;
+            text: string;
+            textAlign: string;
+            verticalAlign: string;
+            containerId: string | null;
+            originalText: string;
+            autoResize: boolean;
+            lineHeight: number & {
+                _brand: "unitlessLineHeight";
+            };
+        }> & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & Readonly<{
+            type: "line" | "arrow";
+            points: readonly import("../../math").LocalPoint[];
+            lastCommittedPoint: import("../../math").LocalPoint | null;
+            startBinding: import("../element/types").PointBinding | null;
+            endBinding: import("../element/types").PointBinding | null;
+            startArrowhead: import("../element/types").Arrowhead | null;
+            endArrowhead: import("../element/types").Arrowhead | null;
+        }> & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & Readonly<{
+            type: "freedraw";
+            points: readonly import("../../math").LocalPoint[];
+            pressures: readonly number[];
+            simulatePressure: boolean;
+            lastCommittedPoint: import("../../math").LocalPoint | null;
+        }> & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & Readonly<{
+            type: "image";
+            fileId: import("../element/types").FileId | null;
+            status: "pending" | "saved" | "error";
+            scale: [number, number];
+            crop: import("../element/types").ImageCrop | null;
+        }> & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & {
+            type: "frame";
+            name: string | null;
+        } & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & {
+            type: "magicframe";
+            name: string | null;
+        } & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & Readonly<{
+            type: "iframe";
+            customData?: {
+                generationData?: import("../element/types").MagicGenerationData | undefined;
+            } | undefined;
+        }> & {
+            index: import("../element/types").FractionalIndex;
+        }) | (Readonly<{
+            id: string;
+            x: number;
+            y: number;
+            strokeColor: string;
+            backgroundColor: string;
+            fillStyle: import("../element/types").FillStyle;
+            strokeWidth: number;
+            strokeStyle: import("../element/types").StrokeStyle;
+            roundness: {
+                type: import("../element/types").RoundnessType;
+                value?: number | undefined;
+            } | null;
+            roughness: number;
+            opacity: number;
+            width: number;
+            height: number;
+            angle: import("../../math").Radians;
+            seed: number;
+            version: number;
+            versionNonce: number;
+            index: import("../element/types").FractionalIndex | null;
+            isDeleted: boolean;
+            groupIds: readonly string[];
+            frameId: string | null;
+            boundElements: readonly Readonly<{
+                id: string;
+                type: "text" | "arrow";
+            }>[] | null;
+            updated: number;
+            link: string | null;
+            locked: boolean;
+            customData?: Record<string, any> | undefined;
+        }> & Readonly<{
+            type: "embeddable";
+        }> & {
+            index: import("../element/types").FractionalIndex;
+        }))[];
+        appState: {
+            selectedElementIds: {
+                [x: string]: true;
+            };
+        };
+        storeAction: "capture";
+    };
+} & {
+    keyTest?: undefined;
+};

package/dist/excalidraw/actions/actionFrame.js

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

package/dist/excalidraw/actions/actionGroup.js

@@ -11,7 +11,7 @@ import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
 import { isBoundToContainer } from "../element/typeChecks";
-import { getElementsInResizingFrame, getFrameLikeElements, groupByFrameLikes, removeElementsFromFrame, replaceAllElementsInFrame, } from "../frame";
+import { frameAndChildrenSelectedTogether, getElementsInResizingFrame, getFrameLikeElements, getRootElements, groupByFrameLikes, removeElementsFromFrame, replaceAllElementsInFrame, } from "../frame";
 import { syncMovedIndices } from "../fractionalIndex";
 import { StoreAction } from "../store";
 const allElementsInSameGroup = (elements) => {
@@ -30,7 +30,9 @@ const enableActionGroup = (elements, appState, app) => {
         selectedElementIds: appState.selectedElementIds,
         includeBoundTextElement: true,
     });
-    return (selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements));
+    return (selectedElements.length >= 2 &&
+        !allElementsInSameGroup(selectedElements) &&
+        !frameAndChildrenSelectedTogether(selectedElements));
 };
 export const actionGroup = register({
     name: "group",
@@ -38,10 +40,10 @@ export const actionGroup = register({
     icon: (appState) => _jsx(GroupIcon, { theme: appState.theme }),
     trackEvent: { category: "element" },
     perform: (elements, appState, _, app) => {
-        const selectedElements = app.scene.getSelectedElements({
+        const selectedElements = getRootElements(app.scene.getSelectedElements({
             selectedElementIds: appState.selectedElementIds,
             includeBoundTextElement: true,
-        });
+        }));
         if (selectedElements.length < 2) {
             // nothing to group
             return { appState, elements, storeAction: StoreAction.NONE };