feat/ability to change the alignment of the text (#1213)

* feat: add the ability to change the alignement of the text

* test: update the snapshots to included the newely textAlign state

* style: use explicit key assignment to object

* test: add missing new key textAlign to newElement.test.ts

* style: make the text on the buttons start with uppercase

* Update src/locales/en.json

* add types

* add migration

* remove incorrect update

Co-authored-by: Youness Fkhach <younessfkhach@porotonmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/element/newElement.test.ts

@@ -77,6 +77,7 @@ it("clones text element", () => {
     opacity: 100,
     text: "hello",
     font: "Arial 20px",
+    textAlign: "left",
   });
 
   const copy = duplicateElement(element);

src/element/newElement.ts

@@ -4,6 +4,7 @@ import {
   ExcalidrawLinearElement,
   ExcalidrawGenericElement,
   NonDeleted,
+  TextAlign,
 } from "../element/types";
 import { measureText } from "../utils";
 import { randomInteger, randomId } from "../random";
@@ -73,15 +74,16 @@ export function newTextElement(
   opts: {
     text: string;
     font: string;
+    textAlign: TextAlign;
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> {
-  const { text, font } = opts;
-  const metrics = measureText(text, font);
+  const metrics = measureText(opts.text, opts.font);
   const textElement = newElementWith(
     {
       ..._newElementBase<ExcalidrawTextElement>("text", opts),
-      text: text,
-      font: font,
+      text: opts.text,
+      font: opts.font,
+      textAlign: opts.textAlign,
       // Center the text
       x: opts.x - metrics.width / 2,
       y: opts.y - metrics.height / 2,

src/element/textWysiwyg.tsx

@@ -21,6 +21,7 @@ type TextWysiwygParams = {
   opacity: number;
   zoom: number;
   angle: number;
+  textAlign: string;
   onChange?: (text: string) => void;
   onSubmit: (text: string) => void;
   onCancel: () => void;
@@ -36,6 +37,7 @@ export function textWysiwyg({
   zoom,
   angle,
   onChange,
+  textAlign,
   onSubmit,
   onCancel,
 }: TextWysiwygParams) {
@@ -59,7 +61,7 @@ export function textWysiwyg({
     top: `${y}px`,
     left: `${x}px`,
     transform: `translate(-50%, -50%) scale(${zoom}) rotate(${degree}deg)`,
-    textAlign: "left",
+    textAlign: textAlign,
     display: "inline-block",
     font: font,
     padding: "4px",

src/element/types.ts

@@ -45,6 +45,7 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
     font: string;
     text: string;
     baseline: number;
+    textAlign: TextAlign;
   }>;
 
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
@@ -55,3 +56,5 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   }>;
 
 export type PointerType = "mouse" | "pen" | "touch";
+
+export type TextAlign = "left" | "center" | "right";