fix: Apply correct translation when text editor overflows when zoom not 100% (#3225)

* fix: Apply correct translation when zoom not 100%

* fix

* fix

* Update src/element/textWysiwyg.tsx

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/element/textWysiwyg.tsx

@@ -21,14 +21,18 @@ const getTransform = (
   height: number,
   angle: number,
   appState: AppState,
+  maxWidth: number,
 ) => {
   const { zoom, offsetTop, offsetLeft } = appState;
   const degree = (180 * angle) / Math.PI;
   // offsets must be multiplied by 2 to account for the division by 2 of
   // the whole expression afterwards
-  return `translate(${((width - offsetLeft * 2) * (zoom.value - 1)) / 2}px, ${
-    ((height - offsetTop * 2) * (zoom.value - 1)) / 2
-  }px) scale(${zoom.value}) rotate(${degree}deg)`;
+  let translateX = ((width - offsetLeft * 2) * (zoom.value - 1)) / 2;
+  const translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
+  if (width > maxWidth && zoom.value !== 1) {
+    translateX = (maxWidth / 2) * (zoom.value - 1);
+  }
+  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
 
 export const textWysiwyg = ({
@@ -61,6 +65,15 @@ export const textWysiwyg = ({
 
       const lines = updatedElement.text.replace(/\r\n?/g, "\n").split("\n");
       const lineHeight = updatedElement.height / lines.length;
+      const maxWidth =
+        (appState.offsetLeft + appState.width - viewportX - 8) /
+          appState.zoom.value -
+        // margin-right of parent if any
+        Number(
+          getComputedStyle(
+            document.querySelector(".excalidraw")!.parentNode as Element,
+          ).marginRight.slice(0, -2),
+        );
 
       Object.assign(editable.style, {
         font: getFontString(updatedElement),
@@ -75,24 +88,13 @@ export const textWysiwyg = ({
           updatedElement.height,
           angle,
           appState,
+          maxWidth,
         ),
         textAlign,
         color: updatedElement.strokeColor,
         opacity: updatedElement.opacity / 100,
         filter: "var(--appearance-filter)",
-        maxWidth: `${
-          appState.offsetLeft +
-          appState.width -
-          viewportX -
-          // margin-right of parent if any
-          Number(
-            getComputedStyle(
-              document.querySelector(".excalidraw")!.parentNode as Element,
-            ).marginRight.slice(0, -2),
-          ) -
-          // padding of layer ui footer
-          8
-        }px`,
+        maxWidth: `${maxWidth}px`,
       });
     }
   };