diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index 4e6f0d58..309e46bd 100644 --- a/src/actions/actionProperties.tsx +++ b/src/actions/actionProperties.tsx @@ -745,16 +745,19 @@ export const actionChangeTextAlign = register({ value: "left", text: t("labels.left"), icon: TextAlignLeftIcon, + testId: "align-left", }, { value: "center", text: t("labels.center"), icon: TextAlignCenterIcon, + testId: "align-horizontal-center", }, { value: "right", text: t("labels.right"), icon: TextAlignRightIcon, + testId: "align-right", }, ]} value={getFormValue( diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx index 2ee9babf..3bbc0ff1 100644 --- a/src/components/Actions.tsx +++ b/src/components/Actions.tsx @@ -30,7 +30,10 @@ import clsx from "clsx"; import { actionToggleZenMode } from "../actions"; import "./Actions.scss"; import { Tooltip } from "./Tooltip"; -import { shouldAllowVerticalAlign } from "../element/textElement"; +import { + shouldAllowVerticalAlign, + suppportsHorizontalAlign, +} from "../element/textElement"; export const SelectedShapeActions = ({ appState, @@ -122,7 +125,8 @@ export const SelectedShapeActions = ({ {renderAction("changeFontFamily")} - {renderAction("changeTextAlign")} + {suppportsHorizontalAlign(targetElements) && + renderAction("changeTextAlign")} )} diff --git a/src/element/textElement.ts b/src/element/textElement.ts index 068d4a82..7dc11c9a 100644 --- a/src/element/textElement.ts +++ b/src/element/textElement.ts @@ -668,14 +668,24 @@ export const shouldAllowVerticalAlign = ( } return true; } - const boundTextElement = getBoundTextElement(element); - if (boundTextElement) { - if (isArrowElement(element)) { + return false; + }); +}; + +export const suppportsHorizontalAlign = ( + selectedElements: NonDeletedExcalidrawElement[], +) => { + return selectedElements.some((element) => { + const hasBoundContainer = isBoundToContainer(element); + if (hasBoundContainer) { + const container = getContainerElement(element); + if (isTextElement(element) && isArrowElement(container)) { return false; } return true; } - return false; + + return isTextElement(element); }); }; diff --git a/src/tests/linearElementEditor.test.tsx b/src/tests/linearElementEditor.test.tsx index a606fb38..8c1d2932 100644 --- a/src/tests/linearElementEditor.test.tsx +++ b/src/tests/linearElementEditor.test.tsx @@ -1179,5 +1179,17 @@ describe("Test Linear Elements", () => { easy" `); }); + + it("should not render horizontal align tool when element selected", () => { + createTwoPointerLinearElement("arrow"); + const arrow = h.elements[0] as ExcalidrawLinearElement; + + createBoundTextElement(DEFAULT_TEXT, arrow); + API.setSelectedElements([arrow]); + + expect(queryByTestId(container, "align-left")).toBeNull(); + expect(queryByTestId(container, "align-horizontal-center")).toBeNull(); + expect(queryByTestId(container, "align-right")).toBeNull(); + }); }); });