From f6e8be399e55f39c9858f510d67cbe7fd68f8d47 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 14 Mar 2023 17:21:46 +0530
Subject: [PATCH] fix: hide text align for labelled arrows (#6339)

* fix: hide text align for labelled arrows

* lintttt

* since we fetch seledcted Elements including the bound text hence this block can be removed

* fix
---
 src/actions/actionProperties.tsx       |  3 +++
 src/components/Actions.tsx             |  8 ++++++--
 src/element/textElement.ts             | 18 ++++++++++++++----
 src/tests/linearElementEditor.test.tsx | 12 ++++++++++++
 4 files changed, 35 insertions(+), 6 deletions(-)

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();
+    });
   });
 });