From 26a1ecb93d7f7209cff16a9ce11d09e3cbd326ab Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Sun, 29 Jan 2023 13:06:57 +0100
Subject: [PATCH] refactor(web/menu): radial menu visibility handling

---
 web/src/features/dev/debug/radial.ts   |  20 ++++
 web/src/features/dev/index.tsx         |   4 +
 web/src/features/menu/radial/index.tsx | 121 +++++++++++--------------
 3 files changed, 77 insertions(+), 68 deletions(-)
 create mode 100644 web/src/features/dev/debug/radial.ts

diff --git a/web/src/features/dev/debug/radial.ts b/web/src/features/dev/debug/radial.ts
new file mode 100644
index 0000000..a05ad18
--- /dev/null
+++ b/web/src/features/dev/debug/radial.ts
@@ -0,0 +1,20 @@
+import { debugData } from '../../../utils/debugData';
+import type { MenuItem } from '../../menu/radial';
+
+export const debugRadial = () => {
+  debugData<{ items: MenuItem[]; sub?: boolean }>([
+    {
+      action: 'openRadialMenu',
+      data: {
+        items: [
+          // TODO: Fix wheel being broken when there's only one item
+          { icon: 'palette', label: 'Paint' },
+          { icon: 'warehouse', label: 'Garage' },
+          { icon: 'palette', label: 'Quite long text' },
+          { icon: 'palette', label: 'Paint' },
+          { icon: 'warehouse', label: 'Garage' },
+        ],
+      },
+    },
+  ]);
+};
diff --git a/web/src/features/dev/index.tsx b/web/src/features/dev/index.tsx
index 9496c4a..db4b4d7 100644
--- a/web/src/features/dev/index.tsx
+++ b/web/src/features/dev/index.tsx
@@ -9,6 +9,7 @@ import { debugCircleProgressbar, debugProgressbar } from './debug/progress';
 import { debugTextUI } from './debug/textui';
 import { debugSkillCheck } from './debug/skillcheck';
 import { useState } from 'react';
+import { debugRadial } from './debug/radial';
 
 const Dev: React.FC = () => {
   const [opened, setOpened] = useState(false);
@@ -46,6 +47,9 @@ const Dev: React.FC = () => {
           <Button fullWidth onClick={() => debugMenu()}>
             Open list menu
           </Button>
+          <Button fullWidth onClick={() => debugRadial()}>
+            Open radial menu
+          </Button>
           <Divider />
           <Button fullWidth onClick={() => debugCustomNotification()}>
             Send notification
diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx
index 2a11743..638f6fe 100644
--- a/web/src/features/menu/radial/index.tsx
+++ b/web/src/features/menu/radial/index.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { useNuiEvent } from '../../../hooks/useNuiEvent';
 import { debugData } from '../../../utils/debugData';
 import { fetchNui } from '../../../utils/fetchNui';
+import ScaleFade from '../../../transitions/ScaleFade';
 
 const radius = 60;
 
@@ -18,29 +19,11 @@ function getTransform(index: number, totalItems: number) {
   return `translate(${x}px, ${y}px)`;
 }
 
-interface MenuItem {
+export interface MenuItem {
   icon: IconProp;
   label: string;
 }
 
-debugData<{ items: MenuItem[]; sub?: boolean }>([
-  {
-    action: 'openRadialMenu',
-    data: {
-      items: [
-        // TODO: Fix wheel being broken when there's only one item
-        { icon: 'palette', label: 'Paint' },
-        { icon: 'warehouse', label: 'Garage' },
-        { icon: 'palette', label: 'Quite long text' },
-        { icon: 'palette', label: 'Paint' },
-        { icon: 'warehouse', label: 'Garage' },
-      ],
-
-      sub: false,
-    },
-  },
-]);
-
 const useStyles = createStyles((theme) => ({
   wrapper: {
     position: 'absolute',
@@ -103,58 +86,60 @@ const RadialMenu: React.FC = () => {
   return (
     <>
       <Box className={classes.wrapper}>
-        <svg width="350px" height="350px" transform="rotate(90)">
-          {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
-          {menu.items.length >= 3 && (
-            <g transform="translate(175, 175)">
-              <circle r={175} className={classes.backgroundCircle} />
-            </g>
-          )}
-          {menu.items.map((item, index) => {
-            const pieAngle = 360 / menu.items.length;
-            const angle = degToRad(pieAngle / 2 + 90);
-            const radius = 175 * 0.65;
-            const iconX = 175 + Math.sin(angle) * radius;
-            const iconY = 175 + Math.cos(angle) * radius;
+        <ScaleFade visible={visible}>
+          <svg width="350px" height="350px" transform="rotate(90)">
+            {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
+            {menu.items.length >= 3 && (
+              <g transform="translate(175, 175)">
+                <circle r={175} className={classes.backgroundCircle} />
+              </g>
+            )}
+            {menu.items.map((item, index) => {
+              const pieAngle = 360 / menu.items.length;
+              const angle = degToRad(pieAngle / 2 + 90);
+              const radius = 175 * 0.65;
+              const iconX = 175 + Math.sin(angle) * radius;
+              const iconY = 175 + Math.cos(angle) * radius;
 
-            return (
-              <>
-                <g transform={`rotate(-${index * pieAngle} 175 175)`} className={classes.sector}>
-                  <path
-                    d={`M175.01,175.01 l175,0 A175.01,175.01 0 0,0 ${175 + 175 * Math.cos(-degToRad(pieAngle))}, ${
-                      175 + 175 * Math.sin(-degToRad(pieAngle))
-                    } z`}
-                  />
-                  <g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
-                    <FontAwesomeIcon
-                      x={iconX - 12.5}
-                      y={iconY - 17.5}
-                      icon={item.icon}
-                      width={25}
-                      height={25}
-                      fixedWidth
+              return (
+                <>
+                  <g transform={`rotate(-${index * pieAngle} 175 175)`} className={classes.sector}>
+                    <path
+                      d={`M175.01,175.01 l175,0 A175.01,175.01 0 0,0 ${175 + 175 * Math.cos(-degToRad(pieAngle))}, ${
+                        175 + 175 * Math.sin(-degToRad(pieAngle))
+                      } z`}
                     />
-                    <text x={iconX} y={iconY + 25} fill="#fff" textAnchor="middle" pointerEvents="none">
-                      {item.label}
-                    </text>
+                    <g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
+                      <FontAwesomeIcon
+                        x={iconX - 12.5}
+                        y={iconY - 17.5}
+                        icon={item.icon}
+                        width={25}
+                        height={25}
+                        fixedWidth
+                      />
+                      <text x={iconX} y={iconY + 25} fill="#fff" textAnchor="middle" pointerEvents="none">
+                        {item.label}
+                      </text>
+                    </g>
                   </g>
-                </g>
-              </>
-            );
-          })}
-          <g transform="translate(175, 175)">
-            <circle r={30} className={classes.centerCircle} />
-          </g>
-          <FontAwesomeIcon
-            icon="xmark"
-            className={classes.centerIcon}
-            color="#fff"
-            width={28}
-            height={28}
-            x={175 - 28 / 2}
-            y={175 - 28 / 2}
-          />
-        </svg>
+                </>
+              );
+            })}
+            <g transform="translate(175, 175)" onClick={() => setVisible(false)}>
+              <circle r={30} className={classes.centerCircle} />
+            </g>
+            <FontAwesomeIcon
+              icon="xmark"
+              className={classes.centerIcon}
+              color="#fff"
+              width={28}
+              height={28}
+              x={175 - 28 / 2}
+              y={175 - 28 / 2}
+            />
+          </svg>
+        </ScaleFade>
       </Box>
     </>
   );