diff --git a/package/client/resource/interface/radial.ts b/package/client/resource/interface/radial.ts index 0d369dc..1906c7b 100644 --- a/package/client/resource/interface/radial.ts +++ b/package/client/resource/interface/radial.ts @@ -3,9 +3,11 @@ import type { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types type RadialItem = { id: string; label: string; - icon: IconName | [IconPrefix, IconName]; + icon: IconName | [IconPrefix, IconName] | string; onSelect?: (currentMenu: string | null, itemIndex: number) => void | string; menu?: string; + iconWidth?: number; + iconHeight?: number; }; export const addRadialItem = (items: RadialItem | RadialItem[]) => exports.ox_lib.addRadialItem(items); diff --git a/resource/interface/client/radial.lua b/resource/interface/client/radial.lua index a7ed00d..0177fff 100644 --- a/resource/interface/client/radial.lua +++ b/resource/interface/client/radial.lua @@ -5,6 +5,8 @@ ---@field onSelect? fun(currentMenu: string | nil, itemIndex: number) | string ---@field [string] any ---@field keepOpen? boolean +---@field iconWidth? number +---@field iconHeight? number ---@class RadialMenuItem: RadialItem ---@field id string diff --git a/web/src/features/dev/debug/radial.ts b/web/src/features/dev/debug/radial.ts index d09a634..15fa333 100644 --- a/web/src/features/dev/debug/radial.ts +++ b/web/src/features/dev/debug/radial.ts @@ -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' }, diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx index e41dbcd..aa9409d 100644 --- a/web/src/features/menu/radial/index.tsx +++ b/web/src/features/menu/radial/index.tsx @@ -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`} /> - + {typeof item.icon === 'string' && isIconUrl(item.icon) ? ( + + ) : ( + + )}