From bda2c2657a17b80e34c50d7fab3dada36facd465 Mon Sep 17 00:00:00 2001
From: Jag <77469789+jag3dagster@users.noreply.github.com>
Date: Mon, 1 May 2023 02:07:17 -0700
Subject: [PATCH] feat(web/radial): newlines support (#316)

* feat(radial): Support newlines

* chore: update to `  \n` to match markdown
---
 web/src/features/dev/debug/radial.ts   | 2 +-
 web/src/features/menu/radial/index.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/features/dev/debug/radial.ts b/web/src/features/dev/debug/radial.ts
index 48dcd08..d09a634 100644
--- a/web/src/features/dev/debug/radial.ts
+++ b/web/src/features/dev/debug/radial.ts
@@ -9,7 +9,7 @@ export const debugRadial = () => {
         items: [
           { icon: 'palette', label: 'Paint' },
           { icon: 'warehouse', label: 'Garage' },
-          { icon: 'palette', label: 'Quite long text' },
+          { icon: 'palette', label: 'Quite long  \ntext' },
           { icon: 'palette', label: 'Paint' },
           { icon: 'warehouse', label: 'Garage' },
         ],
diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx
index 5837658..0f433eb 100644
--- a/web/src/features/menu/radial/index.tsx
+++ b/web/src/features/menu/radial/index.tsx
@@ -155,8 +155,11 @@ const RadialMenu: React.FC = () => {
                         height={25}
                         fixedWidth
                       />
-                      <text x={iconX} y={iconY + 25} fill="#fff" textAnchor="middle" pointerEvents="none">
-                        {item.label}
+                      <text x={iconX} y={iconY + (item.label.includes("  \n") ? 7 : 25)} fill="#fff" textAnchor="middle" pointerEvents="none">
+                        {item.label.includes("  \n")
+                          ? item.label.split("  \n").map((value) => <tspan x={iconX} dy="1.2em">{value}</tspan>)
+                          : item.label
+                        }
                       </text>
                     </g>
                   </g>