From 1b2e287153864a033c4ea29391464c42bde81ff3 Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Mon, 30 Jan 2023 19:38:20 +0100
Subject: [PATCH] refactor(web/menu): always draw full radial menu circle

---
 web/src/features/dev/debug/radial.ts   |  1 -
 web/src/features/menu/radial/index.tsx | 11 +++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/src/features/dev/debug/radial.ts b/web/src/features/dev/debug/radial.ts
index a05ad18..d50d1e8 100644
--- a/web/src/features/dev/debug/radial.ts
+++ b/web/src/features/dev/debug/radial.ts
@@ -7,7 +7,6 @@ export const debugRadial = () => {
       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' },
diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx
index 31b6ec7..f9f966f 100644
--- a/web/src/features/menu/radial/index.tsx
+++ b/web/src/features/menu/radial/index.tsx
@@ -79,13 +79,12 @@ const RadialMenu: React.FC = () => {
         <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>
-            )}
+            <g transform="translate(175, 175)">
+              <circle r={175} className={classes.backgroundCircle} />
+            </g>
             {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 radius = 175 * 0.65;
               const iconX = 175 + Math.sin(angle) * radius;