Skip to content

Commit

Permalink
feat(web/radial): radial menu text scaling (#639)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
  • Loading branch information
@enlistedmango @LukeWasTakenn
enlistedmango and LukeWasTakenn authored Sep 12, 2024
1 parent 9f5879e commit 80267eb
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 58 deletions.
5 changes: 3 additions & 2 deletions web/src/features/dev/debug/radial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
],
},
},
Expand Down
147 changes: 91 additions & 56 deletions web/src/features/menu/radial/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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],
},
},
Expand All @@ -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 }>({
Expand Down Expand Up @@ -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
Expand All @@ -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}>
Expand Down

0 comments on commit 80267eb

Please sign in to comment.