feat(web/radial): radial menu text scaling (#639)

* radial menu improvements

* addressing comments from Luke

* removing uneeded comments

* style(web/radial): remove icon scaling, increase number of items on page

* style(web/radial): cursor pointer, remove stroke, container overflow

---------

Co-authored-by: Luke <39926192+LukeWasTakenn@users.noreply.github.com>

web/src/features/dev/debug/radial.ts

@@ -10,9 +10,10 @@ export const debugRadial = () => {
           { icon: 'palette', label: 'Paint' },
           { iconWidth: 35, iconHeight: 35, icon: 'https://icon-library.com/images/white-icon-png/white-icon-png-18.jpg', label: 'External icon'},
           { icon: 'warehouse', label: 'Garage' },
-          { icon: 'palette', label: 'Quite long  \ntext' },
+          { icon: 'palette', label: 'Quite Long Text' },
+          { icon: 'palette', label: 'Fahrzeuginteraktionen' },
+          { icon: 'palette', label: 'Fahrzeuginteraktionen' },
           { icon: 'palette', label: 'Paint' },
-          { icon: 'warehouse', label: 'Garage' },
         ],
       },
     },

web/src/features/menu/radial/index.tsx

@@ -22,12 +22,14 @@ const useStyles = createStyles((theme) => ({
 
     '&:hover': {
       fill: theme.fn.primaryColor(),
+      cursor: 'pointer',
       '> g > text, > g > svg > path': {
         fill: '#fff',
       },
     },
     '> g > text': {
       fill: theme.colors.dark[0],
+      strokeWidth: 0,
     },
   },
   backgroundCircle: {
@@ -39,6 +41,7 @@ const useStyles = createStyles((theme) => ({
     stroke: theme.colors.dark[6],
     strokeWidth: 4,
     '&:hover': {
+      cursor: 'pointer',
       fill: theme.colors[theme.primaryColor][theme.fn.primaryShade() - 1],
     },
   },
@@ -54,14 +57,37 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-// includes More... button
+const calculateFontSize = (text: string): number => {
-const PAGE_ITEMS = 8;
+  if (text.length > 20) return 10;
+  if (text.length > 15) return 12;
+  return 13;
+};
+
+const splitTextIntoLines = (text: string, maxCharPerLine: number = 15): string[] => {
+  const words = text.split(' ');
+  const lines: string[] = [];
+  let currentLine = words[0];
+
+  for (let i = 1; i < words.length; i++) {
+    if (currentLine.length + words[i].length + 1 <= maxCharPerLine) {
+      currentLine += ' ' + words[i];
+    } else {
+      lines.push(currentLine);
+      currentLine = words[i];
+    }
+  }
+  lines.push(currentLine);
+  return lines;
+};
+
+const PAGE_ITEMS = 6;
 
 const degToRad = (deg: number) => deg * (Math.PI / 180);
 
 const RadialMenu: React.FC = () => {
   const { classes } = useStyles();
   const { locale } = useLocales();
+  const newDimension = 350 * 1.1025;
   const [visible, setVisible] = useState(false);
   const [menuItems, setMenuItems] = useState<RadialMenuItem[]>([]);
   const [menu, setMenu] = useState<{ items: RadialMenuItem[]; sub?: boolean; page: number }>({
@@ -119,33 +145,36 @@ const RadialMenu: React.FC = () => {
         }}
       >
         <ScaleFade visible={visible}>
-          <svg width="350px" height="350px" transform="rotate(90)">
+          <svg
-            {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
+            style={{ overflow: 'visible' }}
+            width={`${newDimension}px`}
+            height={`${newDimension}px`}
+            viewBox="0 0 350 350"
+            transform="rotate(90)"
+          >
+            {/* Fixed issues with background circle extending the circle when there's less than 3 items */}
             <g transform="translate(175, 175)">
               <circle r={175} className={classes.backgroundCircle} />
             </g>
             {menuItems.map((item, index) => {
-              // Always draw full circle to avoid elipse circles with 2 or less items
               const pieAngle = 360 / (menuItems.length < 3 ? 3 : menuItems.length);
               const angle = degToRad(pieAngle / 2 + 90);
-              const gap = 0;
+              const gap = 1;
               const radius = 175 * 0.65 - gap;
               const sinAngle = Math.sin(angle);
               const cosAngle = Math.cos(angle);
+              const iconYOffset = splitTextIntoLines(item.label, 15).length > 3 ? 3 : 0;
               const iconX = 175 + sinAngle * radius;
-              const iconY = 175 + cosAngle * radius;
+              const iconY = 175 + cosAngle * radius + iconYOffset; // Apply the Y offset to iconY
               const iconWidth = Math.min(Math.max(item.iconWidth || 50, 0), 100);
               const iconHeight = Math.min(Math.max(item.iconHeight || 50, 0), 100);
 
-
               return (
-                <>
                 <g
                   transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`}
                   className={classes.sector}
                   onClick={async () => {
-                      const clickIndex =
+                    const clickIndex = menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
-                        menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
                     if (!item.isMore) fetchNui('radialClick', clickIndex);
                     else {
                       await changePage(true);
@@ -167,26 +196,32 @@ const RadialMenu: React.FC = () => {
                         y={iconY - iconHeight / 2 - iconHeight / 4}
                       />
                     ) : (
-                        <LibIcon x={iconX - 12.5} y={iconY - 17.5} icon={item.icon as IconProp} width={25} height={25} fixedWidth/>
+                      <LibIcon
+                        x={iconX - 14.5}
+                        y={iconY - 17.5}
+                        icon={item.icon as IconProp}
+                        width={30}
+                        height={30}
+                        fixedWidth
+                      />
                     )}
                     <text
                       x={iconX}
-                        y={iconY + (item.label.includes('  \n') ? 7 : 25)}
+                      y={iconY + (splitTextIntoLines(item.label, 15).length > 2 ? 15 : 28)}
                       fill="#fff"
                       textAnchor="middle"
+                      fontSize={calculateFontSize(item.label)}
                       pointerEvents="none"
+                      lengthAdjust="spacingAndGlyphs"
                     >
-                        {item.label.includes('  \n')
+                      {splitTextIntoLines(item.label, 15).map((line, index) => (
-                          ? item.label.split('  \n').map((value) => (
+                        <tspan x={iconX} dy={index === 0 ? 0 : '1.2em'} key={index}>
-                              <tspan x={iconX} dy="1.2em">
+                          {line}
-                                {value}
                         </tspan>
-                            ))
+                      ))}
-                          : item.label}
                     </text>
                   </g>
                 </g>
-                </>
               );
             })}
             <g
@@ -202,7 +237,7 @@ const RadialMenu: React.FC = () => {
                 }
               }}
             >
-              <circle r={32} className={classes.centerCircle} />
+              <circle r={28} className={classes.centerCircle} />
             </g>
           </svg>
           <div className={classes.centerIconContainer}>