diff --git a/src/components/Map/RadialMenu.css b/src/components/Map/RadialMenu.css index 76e5da1..283b738 100644 --- a/src/components/Map/RadialMenu.css +++ b/src/components/Map/RadialMenu.css @@ -181,6 +181,12 @@ --color: #3b82f6; } +.fab-sub.is-excluded { + opacity: 0.35; + filter: grayscale(0.8); + transform: translate(var(--x), var(--y)) scale(0.85); +} + @keyframes fab-pop-in { from { opacity: 0; diff --git a/src/components/Map/RadialMenu.jsx b/src/components/Map/RadialMenu.jsx index e60a679..60b7246 100644 --- a/src/components/Map/RadialMenu.jsx +++ b/src/components/Map/RadialMenu.jsx @@ -135,17 +135,20 @@ 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); // More spacing + const subAngle = angle - 25 + (si * 38); const subRad = (subAngle * Math.PI) / 180; const subX = x + Math.cos(subRad) * subRadius; const subY = y + Math.sin(subRad) * subRadius; - const isSubActive = activeSubcategories.includes(`${cat.id}:${sub.id}`); + // Inverted logic: active if NOT in excluded list, or if list is empty + const catSubs = activeSubcategories.filter(s => s.startsWith(cat.id + ":")); + const isSubActive = catSubs.length === 0 || activeSubcategories.includes(`${cat.id}:${sub.id}`); return (