fix: align angle with container if container non-arrow

packages/common/src/constants.ts

@@ -112,6 +112,7 @@ export const YOUTUBE_STATES = {
 export const ENV = {
   TEST: "test",
   DEVELOPMENT: "development",
+  PRODUCTION: "production",
 };
 
 export const CLASSES = {

packages/common/src/utils.ts

@@ -739,6 +739,8 @@ export const isTestEnv = () => import.meta.env.MODE === ENV.TEST;
 
 export const isDevEnv = () => import.meta.env.MODE === ENV.DEVELOPMENT;
 
+export const isProdEnv = () => import.meta.env.MODE === ENV.PRODUCTION;
+
 export const isServerEnv = () =>
   typeof process !== "undefined" && !!process?.env?.NODE_ENV;
 

packages/element/src/textElement.ts

@@ -6,6 +6,8 @@ import {
   TEXT_ALIGN,
   VERTICAL_ALIGN,
   getFontString,
+  isProdEnv,
+  invariant,
 } from "@excalidraw/common";
 
 import type { AppState } from "@excalidraw/excalidraw/types";
@@ -44,13 +46,25 @@ export const redrawTextBoundingBox = (
   informMutation = true,
 ) => {
   let maxWidth = undefined;
+
+  if (!isProdEnv()) {
+    invariant(
+      !container || !isArrowElement(container) || textElement.angle === 0,
+      "text element angle must be 0 if bound to arrow container",
+    );
+  }
+
   const boundTextUpdates = {
     x: textElement.x,
     y: textElement.y,
     text: textElement.text,
     width: textElement.width,
     height: textElement.height,
-    angle: textElement.angle,
+    angle: container
+      ? isArrowElement(container)
+        ? 0
+        : container.angle
+      : textElement.angle,
   };
 
   boundTextUpdates.text = textElement.text;

packages/excalidraw/actions/actionBoundText.tsx

@@ -21,6 +21,7 @@ import {
 
 import {
   hasBoundTextElement,
+  isArrowElement,
   isTextBindableContainer,
   isTextElement,
   isUsingAdaptiveRadius,
@@ -157,7 +158,7 @@ export const actionBindText = register({
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
       autoResize: true,
-      angle: 0 as Radians,
+      angle: (isArrowElement(container) ? 0 : container?.angle ?? 0) as Radians,
     });
     mutateElement(container, {
       boundElements: (container.boundElements || []).concat({

packages/excalidraw/data/restore.ts

@@ -464,9 +464,9 @@ const repairBoundElement = (
     ? elementsMap.get(boundElement.containerId)
     : null;
 
-  if (boundElement.angle) {
+  (boundElement as Mutable<typeof boundElement>).angle = (
-    (boundElement as Mutable<typeof boundElement>).angle = 0 as Radians;
+    isArrowElement(container) ? 0 : container?.angle ?? 0
-  }
+  ) as Radians;
 
   if (!container) {
     boundElement.containerId = null;

packages/excalidraw/tests/__snapshots__/history.test.tsx.snap

@@ -4735,10 +4735,12 @@ History {
         "updated": Map {
           "id164" => Delta {
             "deleted": {
+              "angle": 0,
               "x": 15,
               "y": 15,
             },
             "inserted": {
+              "angle": 0,
               "x": 15,
               "y": 15,
             },
@@ -4907,7 +4909,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
 
 exports[`history > multiplayer undo/redo > conflicts in bound text elements and their containers > should redraw remotely added bound text when it's container is updated through the history > [end of test] element 1 1`] = `
 {
-  "angle": 0,
+  "angle": 90,
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,

packages/excalidraw/tests/history.test.tsx

@@ -4057,7 +4057,7 @@ describe("history", () => {
             // text element got redrawn!
             x: 205,
             y: 205,
-            angle: 0,
+            angle: 90,
             id: text.id,
             containerId: container.id,
             isDeleted: false,
@@ -4101,7 +4101,7 @@ describe("history", () => {
             ...textProps,
             x: 205,
             y: 205,
-            angle: 0,
+            angle: 90,
             id: text.id,
             containerId: container.id,
             isDeleted: false,
@@ -4123,6 +4123,7 @@ describe("history", () => {
             newElementWith(h.elements[0], {
               x: 205,
               y: 205,
+              angle: 90 as Radians,
             }),
           ],
           captureUpdate: CaptureUpdateAction.IMMEDIATELY,