Add specs

src/element/linearElementEditor.ts

@@ -40,7 +40,11 @@ import { isBindingElement } from "./typeChecks";
 import { shouldRotateWithDiscreteAngle } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import { getShapeForElement } from "../renderer/renderElement";
-import { DRAGGING_THRESHOLD } from "../constants";
+import {
+  BOUND_TEXT_PADDING,
+  DRAGGING_THRESHOLD,
+  VERTICAL_ALIGN,
+} from "../constants";
 import { Mutable } from "../utility-types";
 
 const editorMidPointsCache: {
@@ -1304,6 +1308,16 @@ export class LinearElementEditor {
       }
       x = midSegmentMidpoint[0] - boundTextElement.width / 2;
       y = midSegmentMidpoint[1] - boundTextElement.height / 2;
+      if (element.points.length === 2) {
+        if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) {
+          y =
+            midSegmentMidpoint[1] -
+            boundTextElement.height -
+            BOUND_TEXT_PADDING * 2;
+        } else if (boundTextElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+          y = midSegmentMidpoint[1] + BOUND_TEXT_PADDING * 2;
+        }
+      }
     }
     return { x, y };
   };

src/element/textElement.ts

@@ -98,6 +98,7 @@ export const redrawTextBoundingBox = (
       mutateElement(container, { height: nextHeight });
       updateOriginalContainerCache(container.id, nextHeight);
     }
+    if (!isArrowElement(container)) {
       const updatedTextElement = {
         ...textElement,
         ...boundTextUpdates,
@@ -106,6 +107,7 @@ export const redrawTextBoundingBox = (
       boundTextUpdates.x = x;
       boundTextUpdates.y = y;
     }
+  }
 
   mutateElement(textElement, boundTextUpdates);
 };
@@ -793,7 +795,11 @@ export const shouldAllowVerticalAlign = (
     const hasBoundContainer = isBoundToContainer(element);
     if (hasBoundContainer) {
       const container = getContainerElement(element);
-      if (isTextElement(element) && isArrowElement(container)) {
+      if (
+        isTextElement(element) &&
+        isArrowElement(container) &&
+        container.points.length > 2
+      ) {
         return false;
       }
       return true;

src/element/textWysiwyg.tsx

@@ -233,17 +233,14 @@ export const textWysiwyg = ({
           );
           mutateElement(container, { height: targetContainerHeight });
         }
-        // Start pushing text upward until a diff of 30px (padding)
-        // is reached
-        else {
+        // update y coord as you type, not needed for arrow as we calculate
+        // position from the container element for editor and canvas when rendering labelled arrows
+        else if (!isArrowElement(container)) {
           const containerCoords = getContainerCoords(container);
 
           // vertically center align the text
           if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
-            if (!isArrowElement(container)) {
-              coordY =
-                containerCoords.y + maxHeight / 2 - textElementHeight / 2;
-            }
+            coordY = containerCoords.y + maxHeight / 2 - textElementHeight / 2;
           }
           if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
             coordY = containerCoords.y + (maxHeight - textElementHeight);

src/tests/linearElementEditor.test.tsx

@@ -733,6 +733,7 @@ describe("Test Linear Elements", () => {
         containerId: container.id,
         width: 30,
         height: 20,
+        verticalAlign: VERTICAL_ALIGN.MIDDLE,
       }) as ExcalidrawTextElementWithContainer;
 
       container = {
@@ -1108,9 +1109,17 @@ describe("Test Linear Elements", () => {
       `);
     });
 
-    it("should not render vertical align tool when element selected", () => {
-      createTwoPointerLinearElement("arrow");
-      const arrow = h.elements[0] as ExcalidrawLinearElement;
+    it("should render vertical align tool when element selected only for two pointer arrow", () => {
+      let arrow = createTwoPointerLinearElement("arrow");
+
+      createBoundTextElement(DEFAULT_TEXT, arrow);
+      API.setSelectedElements([arrow]);
+
+      expect(queryByTestId(container, "align-top")).not.toBeNull();
+      expect(queryByTestId(container, "align-middle")).not.toBeNull();
+      expect(queryByTestId(container, "align-bottom")).not.toBeNull();
+
+      arrow = createThreePointerLinearElement("arrow");
 
       createBoundTextElement(DEFAULT_TEXT, arrow);
       API.setSelectedElements([arrow]);