adjust tabsbar text-width methods

src/common/components/mock-components/front-rich-components/tabsbar/business/balance-space.ts

@@ -16,7 +16,7 @@ export const balanceSpacePerItem = (
 
     const lastItemSize: number = index > 0 ? newList[index - 1] : 0;
 
-    // Once the maximum possible size of the item is reached, apply this size directly.
+    // A) Once the maximum possible size of the item is reached, apply this size directly.
     if (maxItemSize.value) {
       totalSpaceUsed.add(maxItemSize.value);
       return [...newList, lastItemSize];
@@ -27,7 +27,7 @@ export const balanceSpacePerItem = (
     const timesToApply = arr.length - index;
     const virtualTotalsSum = totalSpaceUsed.value + current * timesToApply;
 
-    /** First "Bigger" tab behaviour: If the virtual-sum of next items using this size
+    /** B) First "Bigger" tab behaviour: If the virtual-sum of next items using this size
      * doesn't fit within available space, calc maxItemSize */
     if (virtualTotalsSum >= availableSpace) {
       const remainder =
@@ -40,7 +40,7 @@ export const balanceSpacePerItem = (
       return [...newList, maxItemSize.value];
     }
 
-    //"Normal" behaviour: Apply this new size to current
+    // C) "Normal" behaviour: Apply proposed new size to current
     totalSpaceUsed.add(current);
     return [...newList, current];
   }, []);

src/common/components/mock-components/front-rich-components/tabsbar/business/calc-text-width.ts

@@ -3,6 +3,28 @@ export const calcTextWidth = (
   fontSize: number,
   _fontfamily: string
 ) => {
-  const charAverageWidth = fontSize * 0.5;
-  return inputText.length * charAverageWidth + charAverageWidth / 2;
+  const REGX_DEFS = {
+    LOWERCASE_BIG: /[mwoq]/,
+    LOWERCASE: /[a-z0-9]/,
+    UPPERCASE_BIG: /[MWOQ]/,
+    UPPERCASE: /[A-Z]/,
+    MARKS: /[.,;:!?'"(){}\[\]\-]/,
+    SPACE: /\s/,
+    DEFAULT: 'default',
+  };
+
+  const calcLength = [...inputText].reduce((sum, current) => {
+    const testChar = (regx: RegExp) => regx.test(current);
+    const addLength = (value: number) => sum + fontSize * value;
+
+    if (testChar(REGX_DEFS.LOWERCASE_BIG)) return addLength(0.85);
+    if (testChar(REGX_DEFS.LOWERCASE)) return addLength(0.5);
+    if (testChar(REGX_DEFS.SPACE)) return addLength(0.2);
+    if (testChar(REGX_DEFS.UPPERCASE_BIG)) return addLength(0.95);
+    if (testChar(REGX_DEFS.UPPERCASE)) return addLength(0.7);
+    if (testChar(REGX_DEFS.MARKS)) return addLength(0.3);
+    return addLength(0.5);
+  }, 0);
+
+  return calcLength;
 };

src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.ts

@@ -19,9 +19,9 @@ export const adjustTabWidths = (args: {
   const containerWidthWithoutTabGaps =
     containerWidth - (tabs.length - 1) * tabsGap;
 
-  //Create info Object with originalPositions and desired width
+  //Create info List with originalPositions and desired width
   interface OriginalTabInfo {
-    initialTabPosition: number;
+    originalTabPosition: number;
     desiredWidth: number;
   }
   const arrangeTabsInfo = tabs.reduce(
@@ -32,15 +32,15 @@ export const adjustTabWidths = (args: {
       return [
         ...acc,
         {
-          initialTabPosition: index,
+          originalTabPosition: index,
           desiredWidth,
         },
       ];
     },
     []
   );
 
-  // This order is neccessary to build layer by layer the new sizes
+  // This order is necessary to build layer by layer the new sizes
   const ascendentTabList = arrangeTabsInfo.sort(
     (a, b) => a.desiredWidth - b.desiredWidth
   );
@@ -56,18 +56,18 @@ export const adjustTabWidths = (args: {
   const reassembledData = ascendentTabList.reduce(
     (accList: number[], current, index) => {
       const newList = [...accList];
-      newList[current.initialTabPosition] = adjustedSizeList[index];
+      newList[current.originalTabPosition] = adjustedSizeList[index];
       return newList;
     },
     []
   );
 
-  // Calc item offset position
+  // Calc item offset position (mixed with external variable to avoid adding to reducer() extra complexity)
   let sumOfXposition = 0;
   const relativeTabPosition = reassembledData.reduce(
-    (acc: number[], el, index) => {
+    (acc: number[], currentTab, index) => {
       const currentElementXPos = index ? sumOfXposition : 0;
-      sumOfXposition += el + tabsGap;
+      sumOfXposition += currentTab + tabsGap;
       return [...acc, currentElementXPos];
     },
     []

src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx

@@ -8,6 +8,7 @@ import {
   splitCSVContentIntoRows,
 } from '@/common/utils/active-element-selector.utils';
 import { useGroupShapeProps } from '../../mock-components.utils';
+import { adjustTabWidths } from './business/tabsbar.business';
 
 const tabsBarShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 450,
@@ -47,11 +48,21 @@ export const TabsBarShape = forwardRef<any, ShapeProps>((props, ref) => {
   const tabLabels = headers.map(header => header.text);
 
   // Calculate tab dimensions and margin
-  const tabWidth = 106; // Width of each tab
+  const minTabWidth = 40; // Min-width of each tab, without xPadding
   const tabHeight = 30; // Tab height
   const tabMargin = 10; // Horizontal margin between tabs
+  const tabXPadding = 20;
+  const tabFont = { fontSize: 14, fontFamily: 'Arial' };
   const bodyHeight = restrictedHeight - tabHeight - 10; // Height of the tabs bar body
-  const totalTabsWidth = tabLabels.length * (tabWidth + tabMargin) + tabWidth; // Total width required plus one additional tab
+
+  const tabAdjustedWidths = adjustTabWidths({
+    tabs: tabLabels,
+    containerWidth: restrictedWidth - tabMargin * 2, //left and right tabList margin
+    minTabWidth,
+    tabXPadding,
+    tabsGap: tabMargin,
+    font: tabFont,
+  });
 
   const activeTab = otherProps?.activeElement ?? 0;
 
@@ -68,36 +79,41 @@ export const TabsBarShape = forwardRef<any, ShapeProps>((props, ref) => {
       <Rect
         x={0}
         y={tabHeight + 10}
-        width={Math.max(restrictedWidth, totalTabsWidth)} // Adjusts the width of the background to include an additional tab
+        width={restrictedWidth}
         height={bodyHeight}
         stroke="black"
         strokeWidth={1}
         fill="white"
       />
       {/* Map through headerRow to create tabs */}
-      {tabLabels.map((header, index) => (
-        <Group key={index} x={10 + index * (tabWidth + tabMargin)} y={10}>
-          <Rect
-            width={tabWidth}
-            height={tabHeight}
-            fill={index === activeTab ? 'white' : '#E0E0E0'}
-            stroke="black"
-            strokeWidth={1}
-          />
-          <Text
-            x={20}
-            y={8}
-            width={tabWidth - 20}
-            height={tabHeight}
-            ellipsis={true}
-            wrap="none"
-            text={header} // Use the header text
-            fontFamily="Arial"
-            fontSize={14}
-            fill="black"
-          />
-        </Group>
-      ))}
+      {tabLabels.map((header, index) => {
+        const { widthList: newWidthList, relativeTabPosition: xPosList } =
+          tabAdjustedWidths;
+
+        return (
+          <Group key={index} x={10 + xPosList[index]} y={10}>
+            <Rect
+              width={newWidthList[index]}
+              height={tabHeight}
+              fill={index === activeTab ? 'white' : '#E0E0E0'}
+              stroke="black"
+              strokeWidth={1}
+            />
+            <Text
+              x={tabXPadding}
+              y={8}
+              width={newWidthList[index] - tabXPadding * 2}
+              height={tabHeight}
+              ellipsis={true}
+              wrap="none"
+              text={header} // Use the header text
+              fontFamily={tabFont.fontFamily}
+              fontSize={tabFont.fontSize}
+              fill="black"
+            />
+          </Group>
+        );
+      })}
     </Group>
   );
 });