diff --git a/src/components/Map/RadialMenu.jsx b/src/components/Map/RadialMenu.jsx index 60b7246..bdcae2c 100644 --- a/src/components/Map/RadialMenu.jsx +++ b/src/components/Map/RadialMenu.jsx @@ -109,9 +109,9 @@ export default function RadialMenu({ {CATEGORIES.map((cat, i) => { // Find index of first active category to rotate const firstActiveIdx = CATEGORIES.findIndex(c => activeCategories.includes(c.id)); - // Rotate so active category is at top-right (angle 20) - const rotateOffset = firstActiveIdx >= 0 ? -firstActiveIdx * 42 : 0; - const angle = 20 + (i * 42) + rotateOffset; // Rotated based on selection + // Rotate so active category is at middle-right (angle 0 = straight right) + const rotateOffset = firstActiveIdx >= 0 ? -firstActiveIdx * 40 : 0; + const angle = -20 + (i * 40) + rotateOffset; const rad = (angle * Math.PI) / 180; const r = 62; const x = Math.cos(rad) * r; @@ -120,7 +120,10 @@ export default function RadialMenu({ // Subcategories for this category const subcats = SUBCATEGORIES[cat.id] || []; - const subRadius = 55; + const subRadius = 52; + // Spread subcats more - center them around the category angle + const subSpacing = 32; + const subStartAngle = angle - ((subcats.length - 1) * subSpacing) / 2; return ( @@ -137,7 +140,7 @@ export default function RadialMenu({ {/* Subcategories - appear around the category when active */} {/* Logic: empty = all selected, clicking toggles exclusion */} {isActive && leftOpen && subcats.map((sub, si) => { - const subAngle = angle - 25 + (si * 38); + const subAngle = subStartAngle + (si * subSpacing); const subRad = (subAngle * Math.PI) / 180; const subX = x + Math.cos(subRad) * subRadius; const subY = y + Math.sin(subRad) * subRadius;