@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/actions/actionAlign.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alignElements } from "../align";
+import { AlignBottomIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, CenterHorizontallyIcon, CenterVerticallyIcon, } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
+import { t } from "../i18n";
+import { KEYS } from "../keys";
+import { isSomeElementSelected } from "../scene";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
+const alignActionsPredicate = (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    return (selectedElements.length > 1 &&
+        // TODO enable aligning frames when implemented properly
+        !selectedElements.some((el) => isFrameLikeElement(el)));
+};
+const alignSelectedElements = (elements, appState, app, alignment) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    const updatedElements = alignElements(selectedElements, alignment);
+    const updatedElementsMap = arrayToMap(updatedElements);
+    return updateFrameMembershipOfSelectedElements(elements.map((element) => updatedElementsMap.get(element.id) || element), appState, app);
+};
+export const actionAlignTop = register({
+    name: "alignTop",
+    trackEvent: { category: "element" },
+    predicate: alignActionsPredicate,
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: alignSelectedElements(elements, appState, app, {
+                position: "start",
+                axis: "y",
+            }),
+            commitToHistory: true,
+        };
+    },
+    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignTopIcon, onClick: () => updateData(null), title: `${t("labels.alignTop")} — ${getShortcutKey("CtrlOrCmd+Shift+Up")}`, "aria-label": t("labels.alignTop"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});
+export const actionAlignBottom = register({
+    name: "alignBottom",
+    trackEvent: { category: "element" },
+    predicate: alignActionsPredicate,
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: alignSelectedElements(elements, appState, app, {
+                position: "end",
+                axis: "y",
+            }),
+            commitToHistory: true,
+        };
+    },
+    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignBottomIcon, onClick: () => updateData(null), title: `${t("labels.alignBottom")} — ${getShortcutKey("CtrlOrCmd+Shift+Down")}`, "aria-label": t("labels.alignBottom"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});
+export const actionAlignLeft = register({
+    name: "alignLeft",
+    trackEvent: { category: "element" },
+    predicate: alignActionsPredicate,
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: alignSelectedElements(elements, appState, app, {
+                position: "start",
+                axis: "x",
+            }),
+            commitToHistory: true,
+        };
+    },
+    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignLeftIcon, onClick: () => updateData(null), title: `${t("labels.alignLeft")} — ${getShortcutKey("CtrlOrCmd+Shift+Left")}`, "aria-label": t("labels.alignLeft"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});
+export const actionAlignRight = register({
+    name: "alignRight",
+    trackEvent: { category: "element" },
+    predicate: alignActionsPredicate,
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: alignSelectedElements(elements, appState, app, {
+                position: "end",
+                axis: "x",
+            }),
+            commitToHistory: true,
+        };
+    },
+    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: AlignRightIcon, onClick: () => updateData(null), title: `${t("labels.alignRight")} — ${getShortcutKey("CtrlOrCmd+Shift+Right")}`, "aria-label": t("labels.alignRight"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});
+export const actionAlignVerticallyCentered = register({
+    name: "alignVerticallyCentered",
+    trackEvent: { category: "element" },
+    predicate: alignActionsPredicate,
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: alignSelectedElements(elements, appState, app, {
+                position: "center",
+                axis: "y",
+            }),
+            commitToHistory: true,
+        };
+    },
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: CenterVerticallyIcon, onClick: () => updateData(null), title: t("labels.centerVertically"), "aria-label": t("labels.centerVertically"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});
+export const actionAlignHorizontallyCentered = register({
+    name: "alignHorizontallyCentered",
+    trackEvent: { category: "element" },
+    predicate: alignActionsPredicate,
+    perform: (elements, appState, _, app) => {
+        return {
+            appState,
+            elements: alignSelectedElements(elements, appState, app, {
+                position: "center",
+                axis: "x",
+            }),
+            commitToHistory: true,
+        };
+    },
+    PanelComponent: ({ elements, appState, updateData, app }) => (_jsx(ToolButton, { hidden: !alignActionsPredicate(elements, appState, null, app), type: "button", icon: CenterHorizontallyIcon, onClick: () => updateData(null), title: t("labels.centerHorizontally"), "aria-label": t("labels.centerHorizontally"), visible: isSomeElementSelected(getNonDeletedElements(elements), appState) })),
+});

package/dist/packages/excalidraw/actions/actionBoundText.js

@@ -0,0 +1,213 @@
+import { BOUND_TEXT_PADDING, ROUNDNESS, VERTICAL_ALIGN, TEXT_ALIGN, } from "../constants";
+import { isTextElement, newElement } from "../element";
+import { mutateElement } from "../element/mutateElement";
+import { computeBoundTextPosition, computeContainerDimensionForBoundText, getBoundTextElement, measureText, redrawTextBoundingBox, } from "../element/textElement";
+import { getOriginalContainerHeightFromCache, resetOriginalContainerCache, updateOriginalContainerCache, } from "../element/textWysiwyg";
+import { hasBoundTextElement, isTextBindableContainer, isUsingAdaptiveRadius, } from "../element/typeChecks";
+import { getFontString } from "../utils";
+import { register } from "./register";
+export const actionUnbindText = register({
+    name: "unbindText",
+    contextItemLabel: "labels.unbindText",
+    trackEvent: { category: "element" },
+    predicate: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements(appState);
+        return selectedElements.some((element) => hasBoundTextElement(element));
+    },
+    perform: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements(appState);
+        selectedElements.forEach((element) => {
+            const boundTextElement = getBoundTextElement(element);
+            if (boundTextElement) {
+                const { width, height, baseline } = measureText(boundTextElement.originalText, getFontString(boundTextElement), boundTextElement.lineHeight);
+                const originalContainerHeight = getOriginalContainerHeightFromCache(element.id);
+                resetOriginalContainerCache(element.id);
+                const { x, y } = computeBoundTextPosition(element, boundTextElement);
+                mutateElement(boundTextElement, {
+                    containerId: null,
+                    width,
+                    height,
+                    baseline,
+                    text: boundTextElement.originalText,
+                    x,
+                    y,
+                });
+                mutateElement(element, {
+                    boundElements: element.boundElements?.filter((ele) => ele.id !== boundTextElement.id),
+                    height: originalContainerHeight
+                        ? originalContainerHeight
+                        : element.height,
+                });
+            }
+        });
+        return {
+            elements,
+            appState,
+            commitToHistory: true,
+        };
+    },
+});
+export const actionBindText = register({
+    name: "bindText",
+    contextItemLabel: "labels.bindText",
+    trackEvent: { category: "element" },
+    predicate: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements(appState);
+        if (selectedElements.length === 2) {
+            const textElement = isTextElement(selectedElements[0]) ||
+                isTextElement(selectedElements[1]);
+            let bindingContainer;
+            if (isTextBindableContainer(selectedElements[0])) {
+                bindingContainer = selectedElements[0];
+            }
+            else if (isTextBindableContainer(selectedElements[1])) {
+                bindingContainer = selectedElements[1];
+            }
+            if (textElement &&
+                bindingContainer &&
+                getBoundTextElement(bindingContainer) === null) {
+                return true;
+            }
+        }
+        return false;
+    },
+    perform: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements(appState);
+        let textElement;
+        let container;
+        if (isTextElement(selectedElements[0]) &&
+            isTextBindableContainer(selectedElements[1])) {
+            textElement = selectedElements[0];
+            container = selectedElements[1];
+        }
+        else {
+            textElement = selectedElements[1];
+            container = selectedElements[0];
+        }
+        mutateElement(textElement, {
+            containerId: container.id,
+            verticalAlign: VERTICAL_ALIGN.MIDDLE,
+            textAlign: TEXT_ALIGN.CENTER,
+        });
+        mutateElement(container, {
+            boundElements: (container.boundElements || []).concat({
+                type: "text",
+                id: textElement.id,
+            }),
+        });
+        const originalContainerHeight = container.height;
+        redrawTextBoundingBox(textElement, container);
+        // overwritting the cache with original container height so
+        // it can be restored when unbind
+        updateOriginalContainerCache(container.id, originalContainerHeight);
+        return {
+            elements: pushTextAboveContainer(elements, container, textElement),
+            appState: { ...appState, selectedElementIds: { [container.id]: true } },
+            commitToHistory: true,
+        };
+    },
+});
+const pushTextAboveContainer = (elements, container, textElement) => {
+    const updatedElements = elements.slice();
+    const textElementIndex = updatedElements.findIndex((ele) => ele.id === textElement.id);
+    updatedElements.splice(textElementIndex, 1);
+    const containerIndex = updatedElements.findIndex((ele) => ele.id === container.id);
+    updatedElements.splice(containerIndex + 1, 0, textElement);
+    return updatedElements;
+};
+const pushContainerBelowText = (elements, container, textElement) => {
+    const updatedElements = elements.slice();
+    const containerIndex = updatedElements.findIndex((ele) => ele.id === container.id);
+    updatedElements.splice(containerIndex, 1);
+    const textElementIndex = updatedElements.findIndex((ele) => ele.id === textElement.id);
+    updatedElements.splice(textElementIndex, 0, container);
+    return updatedElements;
+};
+export const actionWrapTextInContainer = register({
+    name: "wrapTextInContainer",
+    contextItemLabel: "labels.createContainerFromText",
+    trackEvent: { category: "element" },
+    predicate: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements(appState);
+        const areTextElements = selectedElements.every((el) => isTextElement(el));
+        return selectedElements.length > 0 && areTextElements;
+    },
+    perform: (elements, appState, _, app) => {
+        const selectedElements = app.scene.getSelectedElements(appState);
+        let updatedElements = elements.slice();
+        const containerIds = {};
+        for (const textElement of selectedElements) {
+            if (isTextElement(textElement)) {
+                const container = newElement({
+                    type: "rectangle",
+                    backgroundColor: appState.currentItemBackgroundColor,
+                    boundElements: [
+                        ...(textElement.boundElements || []),
+                        { id: textElement.id, type: "text" },
+                    ],
+                    angle: textElement.angle,
+                    fillStyle: appState.currentItemFillStyle,
+                    strokeColor: appState.currentItemStrokeColor,
+                    roughness: appState.currentItemRoughness,
+                    strokeWidth: appState.currentItemStrokeWidth,
+                    strokeStyle: appState.currentItemStrokeStyle,
+                    roundness: appState.currentItemRoundness === "round"
+                        ? {
+                            type: isUsingAdaptiveRadius("rectangle")
+                                ? ROUNDNESS.ADAPTIVE_RADIUS
+                                : ROUNDNESS.PROPORTIONAL_RADIUS,
+                        }
+                        : null,
+                    opacity: 100,
+                    locked: false,
+                    x: textElement.x - BOUND_TEXT_PADDING,
+                    y: textElement.y - BOUND_TEXT_PADDING,
+                    width: computeContainerDimensionForBoundText(textElement.width, "rectangle"),
+                    height: computeContainerDimensionForBoundText(textElement.height, "rectangle"),
+                    groupIds: textElement.groupIds,
+                    frameId: textElement.frameId,
+                });
+                // update bindings
+                if (textElement.boundElements?.length) {
+                    const linearElementIds = textElement.boundElements
+                        .filter((ele) => ele.type === "arrow")
+                        .map((el) => el.id);
+                    const linearElements = updatedElements.filter((ele) => linearElementIds.includes(ele.id));
+                    linearElements.forEach((ele) => {
+                        let startBinding = ele.startBinding;
+                        let endBinding = ele.endBinding;
+                        if (startBinding?.elementId === textElement.id) {
+                            startBinding = {
+                                ...startBinding,
+                                elementId: container.id,
+                            };
+                        }
+                        if (endBinding?.elementId === textElement.id) {
+                            endBinding = { ...endBinding, elementId: container.id };
+                        }
+                        if (startBinding || endBinding) {
+                            mutateElement(ele, { startBinding, endBinding }, false);
+                        }
+                    });
+                }
+                mutateElement(textElement, {
+                    containerId: container.id,
+                    verticalAlign: VERTICAL_ALIGN.MIDDLE,
+                    boundElements: null,
+                    textAlign: TEXT_ALIGN.CENTER,
+                }, false);
+                redrawTextBoundingBox(textElement, container);
+                updatedElements = pushContainerBelowText([...updatedElements, container], container, textElement);
+                containerIds[container.id] = true;
+            }
+        }
+        return {
+            elements: updatedElements,
+            appState: {
+                ...appState,
+                selectedElementIds: containerIds,
+            },
+            commitToHistory: true,
+        };
+    },
+});