Lemoncode · brauliodiez · Nov 20, 2024 · Nov 19, 2024 · Nov 20, 2024 · Nov 20, 2024
diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts
@@ -15,6 +15,7 @@ const DEFAULT_TEXT_HEIGHT = 38;
 const DEFAULT_FONT_VARIANT = 'normal';
 const DEFAULT_FONT_STYLE = 'normal';
 const DEFAULT_TEXT_DECORATION = 'none';
+const DEFAULT_TEXT_ALIGNMENT = 'left';
 
 export interface DefaultStyleShape {
   DEFAULT_CORNER_RADIUS: number;
@@ -32,6 +33,7 @@ export interface DefaultStyleShape {
   DEFAULT_FONT_VARIANT: string;
   DEFAULT_FONT_STYLE: string;
   DEFAULT_TEXT_DECORATION: string;
+  DEFAULT_TEXT_ALIGNMENT: 'left' | 'center' | 'right';
 }
 
 export const BASIC_SHAPE: DefaultStyleShape = {
@@ -50,6 +52,7 @@ export const BASIC_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_VARIANT,
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
+  DEFAULT_TEXT_ALIGNMENT,
 };
 
 export const INPUT_SHAPE: DefaultStyleShape = {
@@ -68,6 +71,7 @@ export const INPUT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_VARIANT,
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
+  DEFAULT_TEXT_ALIGNMENT,
 };
 
 //! maybe a function to calc max height base on the text
@@ -87,6 +91,7 @@ export const POSTIT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_VARIANT,
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
+  DEFAULT_TEXT_ALIGNMENT,
 };
 
 interface FontValues {

diff --git a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx
@@ -40,8 +40,14 @@ export const Heading1Shape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, textDecoration, fontStyle, fontVariant, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    textDecoration,
+    fontStyle,
+    fontVariant,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +67,7 @@ export const Heading1Shape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx
@@ -40,8 +40,14 @@ export const Heading2Shape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +67,7 @@ export const Heading2Shape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx
@@ -41,8 +41,14 @@ export const Heading3Shape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -62,7 +68,7 @@ export const Heading3Shape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/link-text-shape.tsx b/src/common/components/mock-components/front-text-components/link-text-shape.tsx
@@ -41,7 +41,7 @@ export const LinkShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, textDecoration, fontSize } = useShapeProps(
+  const { textColor, textDecoration, fontSize, textAlignment } = useShapeProps(
     otherProps,
     BASIC_SHAPE
   );
@@ -64,7 +64,7 @@ export const LinkShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx
@@ -40,8 +40,14 @@ export const NormaltextShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +67,7 @@ export const NormaltextShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx
@@ -40,7 +40,10 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontSize } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { textColor, fontSize, textAlignment } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -60,7 +63,7 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="left"
+        align={textAlignment}
         ellipsis={true}
       />
     </Group>

diff --git a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx
@@ -40,8 +40,14 @@ export const SmalltextShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +67,7 @@ export const SmalltextShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts
@@ -43,6 +43,11 @@ export const useShapeProps = (
     [otherProps?.textDecoration]
   );
 
+  const textAlignment = useMemo(
+    () => otherProps?.textAlignment ?? defaultStyleShape.DEFAULT_TEXT_ALIGNMENT,
+    [otherProps?.textAlignment]
+  );
+
   const strokeStyle = useMemo(
     () => otherProps?.strokeStyle ?? [],
     [otherProps?.strokeStyle]
@@ -81,5 +86,6 @@ export const useShapeProps = (
     fontStyle,
     fontSize,
     textDecoration,
+    textAlignment,
   };
 };
diff --git a/src/core/local-disk/shapes-to-document.mapper.ts b/src/core/local-disk/shapes-to-document.mapper.ts
@@ -30,6 +30,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.HEADING1,
+          textAlignment: 'center',
         },
       };
     case 'heading2':
@@ -38,6 +39,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.HEADING2,
+          textAlignment: 'center',
         },
       };
     case 'heading3':
@@ -46,6 +48,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.HEADING3,
+          textAlignment: 'center',
         },
       };
     case 'link':
@@ -54,6 +57,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.LINK,
+          textAlignment: 'center',
         },
       };
     case 'normaltext':
@@ -62,6 +66,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.NORMALTEXT,
+          textAlignment: 'center',
         },
       };
     case 'smalltext':
@@ -70,6 +75,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.SMALLTEXT,
+          textAlignment: 'center',
         },
       };
     case 'paragraph':
@@ -78,6 +84,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.PARAGRAPH,
+          textAlignment: 'center',
         },
       };
     default:

diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -174,6 +174,7 @@ export interface OtherProps {
   borderRadius?: string;
   activeElement?: number;
   selectedBackgroundColor?: string;
+  textAlignment?: 'left' | 'center' | 'right';
 }
 
 export const BASE_ICONS_URL = '/icons/';

diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -126,6 +126,7 @@ export const generateDefaultOtherProps = (
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
         fontSize: FONT_SIZE_VALUES.HEADING1,
+        textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`,
       };
 
     case 'heading2':
@@ -135,6 +136,7 @@ export const generateDefaultOtherProps = (
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
         fontSize: FONT_SIZE_VALUES.HEADING2,
+        textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`,
       };
     case 'heading3':
       return {
@@ -143,12 +145,14 @@ export const generateDefaultOtherProps = (
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
         fontSize: FONT_SIZE_VALUES.HEADING3,
+        textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`,
       };
     case 'link':
       return {
         textColor: `${LINK_SHAPE.DEFAULT_FILL_TEXT}`,
         textDecoration: 'underline',
         fontSize: FONT_SIZE_VALUES.LINK,
+        textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`,
       };
     case 'normaltext':
       return {
@@ -157,6 +161,7 @@ export const generateDefaultOtherProps = (
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
         fontSize: FONT_SIZE_VALUES.NORMALTEXT,
+        textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`,
       };
     case 'smalltext':
       return {
@@ -165,10 +170,12 @@ export const generateDefaultOtherProps = (
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
         fontSize: FONT_SIZE_VALUES.SMALLTEXT,
+        textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`,
       };
     case 'paragraph':
       return {
         fontSize: FONT_SIZE_VALUES.PARAGRAPH,
+        textAlignment: `${BASIC_SHAPE.DEFAULT_TEXT_ALIGNMENT}`,
       };
     case 'label':
       return {

diff --git a/src/pods/properties/components/text-alignment/index.ts b/src/pods/properties/components/text-alignment/index.ts
@@ -0,0 +1 @@
+export * from './text-alignment';
diff --git a/src/pods/properties/components/text-alignment/text-alignment.module.css b/src/pods/properties/components/text-alignment/text-alignment.module.css
@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 1.5em;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.buttonsContainer {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  margin-left: auto;
+}
+
+.button {
+  border: none;
+  color: var(--text-color);
+  background-color: inherit;
+  width: auto;
+  min-width: 30px;
+  border-radius: 10px;
+  font-size: var(--fs-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.button:hover {
+  background-color: var(--primary-100);
+}
+
+.active {
+  background-color: var(--primary-200);
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
+}