FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 15:36:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web/menu): wip radial menu

Browse Source 
i hate circles
This commit is contained in:
Luke
2023-01-21 15:06:25 +01:00
parent aac17fd4af
commit 6c9d3d21cc
1 changed files with 55 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/src/features/menu/planet/index.tsx
View File

@@ -30,8 +30,8 @@ debugData<{ items: MenuItem[]; sub?: boolean }>([
items: [ items: [
{ icon: 'palette', label: 'Paint' }, { icon: 'palette', label: 'Paint' },
{ icon: 'warehouse', label: 'Garage' }, { icon: 'warehouse', label: 'Garage' },
{ icon: 'handcuffs', label: 'Arrest' }, { icon: 'palette', label: 'Paint' },
{ icon: 'handcuffs', label: 'Arrest' }, // { icon: 'warehouse', label: 'Garage' },
], ],
sub: false, sub: false,
}, },
@@ -96,8 +96,22 @@ const useStyles = createStyles((theme) => ({
boxShadow: theme.shadows.sm, boxShadow: theme.shadows.sm,
textAlign: 'center', textAlign: 'center',
}, },
sector: {
fill: theme.colors.dark[6],
color: theme.colors.dark[0],
'&:hover': {
fill: theme.fn.primaryColor(),
},
stroke: '#fff',
strokeWidth: '1px',
},
circleIcon: {
// position: 'relative',
},
})); }));
const degToRad = (deg: number) => deg * (Math.PI / 180);
const PlanetMenu: React.FC = () => { const PlanetMenu: React.FC = () => {
const { classes } = useStyles(); const { classes } = useStyles();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@@ -120,40 +134,46 @@ const PlanetMenu: React.FC = () => {
return ( return (
<> <>
<Box className={classes.wrapper}> <Box className={classes.wrapper}>
<> <svg width="500px" height="500px" transform="rotate(90)">
{visible && ( {menu.items.map((item, index) => {
<> // TODO: center labels and icon inside sector
<ActionIcon variant="filled" radius="xl" size="xl" color="primary" className={classes.centerButton}> const pieAngle = 360 / menu.items.length;
<FontAwesomeIcon fixedWidth icon="xmark" size="lg" /> const startAngle = index * pieAngle;
</ActionIcon> const endAngle = startAngle + pieAngle;
<Box className={classes.buttonsContainer}> console.log(startAngle + endAngle / 2);
{menu.items.map((item, index) => ( const angle = degToRad((startAngle + endAngle) / 2);
<Box const radius = 250 / 2;
onMouseEnter={() => setCurrentItem({ label: item.label, visible: true })} const iconX = Math.sin(angle) * radius;
onMouseLeave={() => setCurrentItem((prevState) => ({ ...prevState, visible: false }))} const iconY = Math.cos(angle) * radius;
onClick={() => handleItemClick(index)}
sx={{ return (
transform: getTransform(index, menu.items.length), <>
}} <g transform={`rotate(-${index * pieAngle} 250 250)`}>
className={classes.button} <path
> className={classes.sector}
<FontAwesomeIcon icon={item.icon} fixedWidth /> d={`M250,250 l250,0 A250,250 0 0,0 ${250 + 250 * Math.cos(-degToRad(pieAngle))}, ${
</Box> 250 + 250 * Math.sin(-degToRad(pieAngle))
))} } z`}
</Box> />
</> <text x={iconX} y={iconY} textAnchor="middle" fill="#fff" width={50} height={50}>
)} {item.label}
</> </text>
{/*<FontAwesomeIcon*/}
{/* icon={item.icon}*/}
{/* fixedWidth*/}
{/* className={classes.circleIcon}*/}
{/* width={50}*/}
{/* height={50}*/}
{/* x={iconX}*/}
{/* y={iconY}*/}
{/* // transform="translate(-5,-5)"*/}
{/*/>*/}
</g>
</>
);
})}
</svg>
</Box> </Box>
<Stack justify="center" align="center" className={classes.labelWrapper}>
<Transition transition="fade" mounted={currentItem.visible}>
{(styles) => (
<Box style={styles} className={classes.labelContainer}>
<Text>{currentItem.label}</Text>
</Box>
)}
</Transition>
</Stack>
</> </>
); );
}; };