From 78891fb4b97af6d5401c827c29f362ccb657fc87 Mon Sep 17 00:00:00 2001
From: ktx-mega <85870293+ktx-mega@users.noreply.github.com>
Date: Sun, 18 Feb 2024 12:11:40 +0100
Subject: [PATCH] feat(web): support icon urls in radial menu (#487)

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

* fix: update lua & ts types + clamp size parameters
---
 package/client/resource/interface/radial.ts |  4 +++-
 resource/interface/client/radial.lua        |  2 ++
 web/src/features/dev/debug/radial.ts        |  5 +++--
 web/src/features/menu/radial/index.tsx      | 17 ++++++++++++++++-
 web/src/typings/radial.ts                   |  4 +++-
 5 files changed, 27 insertions(+), 5 deletions(-)

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`}
                     />
                     <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)}
diff --git a/web/src/typings/radial.ts b/web/src/typings/radial.ts
index 3aa13c0..85da726 100644
--- a/web/src/typings/radial.ts
+++ b/web/src/typings/radial.ts
@@ -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;
 }