mirror of
https://github.com/CommunityOx/ox_lib.git
synced 2026-08-17 06:56:03 +01:00
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>
This commit is contained in:
NotMango
GitHub
@@ -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' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user