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

feat(web): support icon urls in radial menu (#487)

Browse Source 
* feat(package): support icon urls in radial menu

* fix: update lua & ts types + clamp size parameters
This commit is contained in:
ktx-mega
2024-02-18 12:11:40 +01:00
committed by GitHub
parent bd6183aa04
commit 78891fb4b9
5 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,14 @@
import { debugData } from '../../../utils/debugData';
import type { MenuItem } from '../../../typings';
import type { RadialMenuItem } from '../../../typings';
export const debugRadial = () => {
debugData<{ items: MenuItem[]; sub?: boolean }>([
debugData<{ items: RadialMenuItem[]; sub?: boolean }>([
{
action: 'openRadialMenu',
data: {
items: [
{ 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: 'Paint' },

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

@@ -1,7 +1,9 @@
import { Box, createStyles } from '@mantine/core';
import { useEffect, useState } from 'react';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { useNuiEvent } from '../../../hooks/useNuiEvent';
import { fetchNui } from '../../../utils/fetchNui';
import { isIconUrl } from '../../../utils/isIconUrl';
import ScaleFade from '../../../transitions/ScaleFade';
import type { RadialMenuItem } from '../../../typings';
import { useLocales } from '../../../providers/LocaleProvider';
@@ -132,6 +134,9 @@ const RadialMenu: React.FC = () => {
const cosAngle = Math.cos(angle);
const iconX = 175 + sinAngle * radius;
const iconY = 175 + cosAngle * radius;
const iconWidth = Math.min(Math.max(item.iconWidth || 50, 0), 100);
const iconHeight = Math.min(Math.max(item.iconHeight || 50, 0), 100);
return (
<>
@@ -153,7 +158,17 @@ const RadialMenu: React.FC = () => {
}, ${175 + (175 - gap) * Math.sin(-degToRad(pieAngle))} z`}
/>
<g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
<LibIcon x={iconX - 12.5} y={iconY - 17.5} icon={item.icon} width={25} height={25} fixedWidth />
{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)}

4
web/src/typings/radial.ts
View File

@@ -1,8 +1,10 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
export interface RadialMenuItem {
icon: IconProp;
icon: string | IconProp;
label: string;
isMore?: boolean;
menu?: string;
iconWidth?: number;
iconHeight?: number;
}