canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FAB: rotate selected category to middle-right, better subcategory spacing 

- Selected category rotates to horizontal middle position
- Subcategories centered around category with more spacing
- Prevents subcategories from going off screen

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
SocioWire 2026-01-11 07:33:01 +00:00
parent 52d4d36727
commit 01e3ef2362
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Map/RadialMenu.jsx
View File

@ -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 (
<React.Fragment key={cat.id}>
@ -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;