From f0ffe530df119a068fb13abc958f732fb9d03f7c Mon Sep 17 00:00:00 2001 From: Gorka Reguero Date: Thu, 9 Oct 2025 16:29:07 +0200 Subject: [PATCH 1/3] Tener disponible el combo box con las diferentes font size y pasarle al componente HorizontalMenuShape el valor de la propiedad. --- .../horizontal-menu/horizontal-menu.tsx | 8 +++----- src/pods/canvas/model/shape-other-props.utils.ts | 1 + 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx index 39121266..2bee8a77 100644 --- a/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx +++ b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx @@ -54,10 +54,8 @@ export const HorizontalMenu = forwardRef((props, ref) => { const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1); const itemWidth = totalMargins / numberOfItems; - const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps( - otherProps, - BASIC_SHAPE - ); + const { stroke, strokeStyle, fill, textColor, borderRadius, fontSize } = + useShapeProps(otherProps, BASIC_SHAPE); const itemVerticalPadding = 4; @@ -98,7 +96,7 @@ export const HorizontalMenu = forwardRef((props, ref) => { y={restrictedHeight / 2 - 8} text={header} fontFamily="Arial" - fontSize={16} + fontSize={fontSize} fill={textColor} width={itemWidth} align="center" diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index f2c1007f..e652ed03 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -48,6 +48,7 @@ export const generateDefaultOtherProps = ( strokeStyle: [], borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`, activeElement: 0, + fontSize: FONT_SIZE_VALUES.NORMALTEXT, }; case 'datepickerinput': case 'timepickerinput': From 38cf5c87607bb94a5d9dc2c46f79676a40725651 Mon Sep 17 00:00:00 2001 From: Gorka Reguero Date: Fri, 10 Oct 2025 11:44:20 +0200 Subject: [PATCH 2/3] font variant to resize --- .../horizontal-menu/horizontal-menu.tsx | 15 ++++++++++++--- src/pods/canvas/model/shape-other-props.utils.ts | 1 + 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx index 2bee8a77..c8fe944b 100644 --- a/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx +++ b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx @@ -10,6 +10,7 @@ import { splitCSVContentIntoRows, } from '@/common/utils/active-element-selector.utils'; import { useGroupShapeProps } from '../../mock-components.utils'; +import { useResizeOnFontSizeChange } from '../../front-text-components/front-text-hooks/resize-fontsize-change.hook'; const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 200, @@ -54,8 +55,15 @@ export const HorizontalMenu = forwardRef((props, ref) => { const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1); const itemWidth = totalMargins / numberOfItems; - const { stroke, strokeStyle, fill, textColor, borderRadius, fontSize } = - useShapeProps(otherProps, BASIC_SHAPE); + const { + stroke, + strokeStyle, + fill, + textColor, + borderRadius, + fontSize, + fontVariant, + } = useShapeProps(otherProps, BASIC_SHAPE); const itemVerticalPadding = 4; @@ -67,7 +75,7 @@ export const HorizontalMenu = forwardRef((props, ref) => { shapeType, ref ); - + useResizeOnFontSizeChange(id, { x, y }, text, fontSize, fontVariant); return ( ((props, ref) => { align="center" wrap="none" ellipsis={true} + fontVariant={fontVariant} /> ))} diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index e652ed03..6e06de10 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -49,6 +49,7 @@ export const generateDefaultOtherProps = ( borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`, activeElement: 0, fontSize: FONT_SIZE_VALUES.NORMALTEXT, + fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`, }; case 'datepickerinput': case 'timepickerinput': From 6ebba52565065f7042768a30199601aa7a9f217a Mon Sep 17 00:00:00 2001 From: Gorka Reguero Date: Fri, 10 Oct 2025 12:55:50 +0200 Subject: [PATCH 3/3] feat: add font size property to horizontal menu --- .../horizontal-menu/horizontal-menu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx index c8fe944b..c50151b1 100644 --- a/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx +++ b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx @@ -42,7 +42,7 @@ export const HorizontalMenu = forwardRef((props, ref) => { const csvData = splitCSVContentIntoRows(text); const headers = extractCSVHeaders(csvData[0]); const itemLabels = headers.map(header => header.text); - + const verticalPadding = 8; const numberOfItems = itemLabels.length; const itemSpacing = 10; @@ -96,12 +96,12 @@ export const HorizontalMenu = forwardRef((props, ref) => { x={itemSpacing * (index + 1) + itemWidth * index} y={itemVerticalPadding} width={itemWidth} - height={restrictedHeight - 2 * itemVerticalPadding} + height={restrictedHeight - verticalPadding} fill={index === activeSelected ? 'lightblue' : fill} />