FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web/menu): always draw full radial menu circle

Browse Source
This commit is contained in:
Luke
2023-01-30 19:38:20 +01:00
parent 054dc2688c
commit 1b2e287153
2 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/features/dev/debug/radial.ts
View File

@@ -7,7 +7,6 @@ export const debugRadial = () => {
action: 'openRadialMenu', action: 'openRadialMenu',
data: { data: {
items: [ items: [
// TODO: Fix wheel being broken when there's only one item
{ icon: 'palette', label: 'Paint' }, { icon: 'palette', label: 'Paint' },
{ icon: 'warehouse', label: 'Garage' }, { icon: 'warehouse', label: 'Garage' },
{ icon: 'palette', label: 'Quite long text' }, { icon: 'palette', label: 'Quite long text' },

11
web/src/features/menu/radial/index.tsx
View File

@@ -79,13 +79,12 @@ const RadialMenu: React.FC = () => {
<ScaleFade visible={visible}> <ScaleFade visible={visible}>
<svg width="350px" height="350px" transform="rotate(90)"> <svg width="350px" height="350px" transform="rotate(90)">
{/*Fixed issues with background circle extending the circle when there's less than 3 items*/} {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
{menu.items.length >= 3 && ( <g transform="translate(175, 175)">
<g transform="translate(175, 175)"> <circle r={175} className={classes.backgroundCircle} />
<circle r={175} className={classes.backgroundCircle} /> </g>
</g>
)}
{menu.items.map((item, index) => { {menu.items.map((item, index) => {
const pieAngle = 360 / menu.items.length; // Always draw full circle to avoid elipse circles with 2 or less items
const pieAngle = 360 / (menu.items.length < 3 ? 3 : menu.items.length);
const angle = degToRad(pieAngle / 2 + 90); const angle = degToRad(pieAngle / 2 + 90);
const radius = 175 * 0.65; const radius = 175 * 0.65;
const iconX = 175 + Math.sin(angle) * radius; const iconX = 175 + Math.sin(angle) * radius;