From b5f672207d8194faae4f2accaf5ebbd306876085 Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Mon, 20 Oct 2025 16:47:34 +0200 Subject: [PATCH 1/4] fix min height component --- .../front-rich-components/horizontal-menu/horizontal-menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c50151b1..3d6751fe 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 @@ -14,7 +14,7 @@ import { useResizeOnFontSizeChange } from '../../front-text-components/front-tex const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 200, - minHeight: 25, + minHeight: 50, maxWidth: -1, maxHeight: 100, defaultWidth: 500, From bac076675ebc7fb16034e3d8e4e5923280b8aabb Mon Sep 17 00:00:00 2001 From: Braulio Date: Mon, 20 Oct 2025 17:57:16 +0200 Subject: [PATCH 2/4] updated width calc --- .../horizontal-menu/horizontal-menu.tsx | 37 +++++++++++++++---- .../resize-fontsize-change.hook.ts | 30 +++++++++++---- 2 files changed, 52 insertions(+), 15 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 3d6751fe..672c5d3a 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,7 +10,10 @@ 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'; +import { + MultipleItemsInfo, + useResizeOnFontSizeChange, +} from '../../front-text-components/front-text-hooks/resize-fontsize-change.hook'; const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 200, @@ -42,7 +45,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 totalVerticalPadding = 8; const numberOfItems = itemLabels.length; const itemSpacing = 10; @@ -52,8 +55,9 @@ export const HorizontalMenu = forwardRef((props, ref) => { height ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1); - const itemWidth = totalMargins / numberOfItems; + const totalHorizontalMargins = + restrictedWidth - itemSpacing * (numberOfItems + 1); + const itemWidth = totalHorizontalMargins / numberOfItems; const { stroke, @@ -65,7 +69,7 @@ export const HorizontalMenu = forwardRef((props, ref) => { fontVariant, } = useShapeProps(otherProps, BASIC_SHAPE); - const itemVerticalPadding = 4; + const singleVerticalPadding = totalVerticalPadding / 2; const activeSelected = otherProps?.activeElement ?? 0; @@ -75,9 +79,25 @@ export const HorizontalMenu = forwardRef((props, ref) => { shapeType, ref ); - useResizeOnFontSizeChange(id, { x, y }, text, fontSize, fontVariant); + + const multiplesItemsInfo: MultipleItemsInfo = { + numberOfItems: numberOfItems, + horizontalSpacing: itemSpacing, + }; + + useResizeOnFontSizeChange( + id, + { x, y }, + text, + fontSize, + fontVariant, + false, + multiplesItemsInfo + ); + return ( + {/* Main Rectangle*/} ((props, ref) => { {itemLabels.map((header, index) => ( + {/* Blue selected rectangle */} { const previousFontSize = useRef(fontSize); const { updateShapeSizeAndPosition, stageRef } = useCanvasContext(); @@ -21,12 +27,22 @@ export const useResizeOnFontSizeChange = ( const paragraphLines = _extractParagraphLines(text); const longestLine = _findLongestString(paragraphLines); - const { width, height } = calcTextDimensions( - multiline ? longestLine : text, - fontSize, - fontVariant, - konvaLayer - ); + const { width: longestLineWidth, height: longestLineHeight } = + calcTextDimensions( + multiline ? longestLine : text, + fontSize, + fontVariant, + konvaLayer + ); + + // We add to the longest line width the spacing between items if multiple items + const width = + longestLineWidth + + (multipleItemsInfo + ? multipleItemsInfo.horizontalSpacing * + multipleItemsInfo.numberOfItems + : 0); + const height = longestLineHeight; updateShapeSizeAndPosition( id, From 82b6bc4c8f6e45d2013e235e0db60be2f9eec6ec Mon Sep 17 00:00:00 2001 From: Braulio Date: Tue, 21 Oct 2025 08:58:41 +0200 Subject: [PATCH 3/4] update merge --- src/pods/canvas/model/shape-other-props.utils.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index 8ad7a6d3..c60ce3b8 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -48,6 +48,8 @@ export const generateDefaultOtherProps = ( strokeStyle: [], borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`, activeElement: 0, + fontSize: FONT_SIZE_VALUES.NORMALTEXT, + fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`, }; case 'input-stepper': return { From 2e64edbdd9b691780a67115eafb216e91d90d4ac Mon Sep 17 00:00:00 2001 From: Braulio Date: Tue, 21 Oct 2025 09:32:06 +0200 Subject: [PATCH 4/4] update --- .../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 0539e3a9..672c5d3a 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 @@ -46,7 +46,6 @@ export const HorizontalMenu = forwardRef((props, ref) => { const headers = extractCSVHeaders(csvData[0]); const itemLabels = headers.map(header => header.text); const totalVerticalPadding = 8; - const numberOfItems = itemLabels.length; const itemSpacing = 10; @@ -123,15 +122,16 @@ export const HorizontalMenu = forwardRef((props, ref) => { /> ))}