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>
overextended · Sep 12, 2024 · 80267eb · 80267eb
1 parent 9f5879e
commit 80267eb
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 58 deletions.
diff --git a/web/src/features/dev/debug/radial.ts b/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' },
  ],
  },
  },

diff --git a/web/src/features/menu/radial/index.tsx b/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 PAGE_ITEMS = 8;
+const calculateFontSize = (text: string): number => {
+ 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,74 +145,83 @@ const RadialMenu: React.FC = () => {
  }}
  >
  <ScaleFade visible={visible}>
- <svg width="350px" height="350px" transform="rotate(90)">
- {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
+ <svg
+ 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 =
- menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
- if (!item.isMore) fetchNui('radialClick', clickIndex);
- else {
- await changePage(true);
- }
- }}
- >
- <path
- d={`M175.01,175.01 l${175 - gap},0 A175.01,175.01 0 0,0 ${
- 175 + (175 - gap) * Math.cos(-degToRad(pieAngle))
- }, ${175 + (175 - gap) * Math.sin(-degToRad(pieAngle))} z`}
- />
- <g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
- {typeof item.icon === 'string' && isIconUrl(item.icon) ? (
- <image
- href={item.icon}
- width={iconWidth}
- height={iconHeight}
- x={iconX - iconWidth / 2}
- 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/>
- )}
- <text
- x={iconX}
- y={iconY + (item.label.includes(' \n') ? 7 : 25)}
- fill="#fff"
- textAnchor="middle"
- pointerEvents="none"
- >
- {item.label.includes(' \n')
- ? item.label.split(' \n').map((value) => (
- <tspan x={iconX} dy="1.2em">
- {value}
- </tspan>
- ))
- : item.label}
- </text>
- </g>
+ <g
+ transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`}
+ className={classes.sector}
+ onClick={async () => {
+ const clickIndex = menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
+ if (!item.isMore) fetchNui('radialClick', clickIndex);
+ else {
+ await changePage(true);
+ }
+ }}
+ >
+ <path
+ d={`M175.01,175.01 l${175 - gap},0 A175.01,175.01 0 0,0 ${
+ 175 + (175 - gap) * Math.cos(-degToRad(pieAngle))
+ }, ${175 + (175 - gap) * Math.sin(-degToRad(pieAngle))} z`}
+ />
+ <g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
+ {typeof item.icon === 'string' && isIconUrl(item.icon) ? (
+ <image
+ href={item.icon}
+ width={iconWidth}
+ height={iconHeight}
+ x={iconX - iconWidth / 2}
+ y={iconY - iconHeight / 2 - iconHeight / 4}
+ />
+ ) : (
+ <LibIcon
+ x={iconX - 14.5}
+ y={iconY - 17.5}
+ icon={item.icon as IconProp}
+ width={30}
+ height={30}
+ fixedWidth
+ />
+ )}
+ <text
+ x={iconX}
+ y={iconY + (splitTextIntoLines(item.label, 15).length > 2 ? 15 : 28)}
+ fill="#fff"
+ textAnchor="middle"
+ fontSize={calculateFontSize(item.label)}
+ pointerEvents="none"
+ lengthAdjust="spacingAndGlyphs"
+ >
+ {splitTextIntoLines(item.label, 15).map((line, index) => (
+ <tspan x={iconX} dy={index === 0 ? 0 : '1.2em'} key={index}>
+ {line}
+ </tspan>
+ ))}
+ </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}>