Radial Menu

1'use client';
2 
3import * as React from 'react';
4import { LucideIcon } from 'lucide-react';
5import { motion, AnimatePresence, type Transition } from 'motion/react';
6import { ContextMenu } from '@base-ui-components/react/context-menu';
7import { cn } from '@/lib/utils';
8 
9type RadialMenuProps = {
10  children?: React.ReactNode;
11  menuItems: MenuItem[];
12  size?: number;
13  iconSize?: number;
14  bandWidth?: number;
15  innerGap?: number;
16  outerGap?: number;
17  outerRingWidth?: number;
18  onSelect?: (item: MenuItem) => void;
19};
20 
21type MenuItem = {
22  id: number;
23  label: string;
24  icon: LucideIcon;
25};
26 
27type Point = { x: number; y: number };
28 
29const menuTransition: Transition = {
30  type: 'spring',
31  stiffness: 420,
32  damping: 32,
33  mass: 1,
34};
35 
36const wedgeTransition: Transition = {
37  duration: 0.05,
38  ease: 'easeOut',
39};
40 
41const FULL_CIRCLE = 360;
42const START_ANGLE = -90;
43 
44function degToRad(deg: number) {
45  return (deg * Math.PI) / 180;
46}
47 
48function polarToCartesian(radius: number, angleDeg: number): Point {
49  const rad = degToRad(angleDeg);
50  return {
51    x: Math.cos(rad) * radius,
52    y: Math.sin(rad) * radius,
53  };
54}
55 
56function slicePath(
57  index: number,
58  total: number,
59  wedgeRadius: number,
60  innerRadius: number,
61) {
62  if (total <= 0) return '';
63 
64  // single item → full donut ring
65  if (total === 1) {
66    return `
67      M ${wedgeRadius} 0
68      A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${-wedgeRadius} 0
69      A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${wedgeRadius} 0
70      M ${innerRadius} 0
71      A ${innerRadius} ${innerRadius} 0 1 0 ${-innerRadius} 0
72      A ${innerRadius} ${innerRadius} 0 1 0 ${innerRadius} 0
73    `;
74  }
75 
76  const anglePerSlice = FULL_CIRCLE / total;
77  const midDeg = START_ANGLE + anglePerSlice * index;
78  const halfSlice = anglePerSlice / 2;
79 
80  const startDeg = midDeg - halfSlice;
81  const endDeg = midDeg + halfSlice;
82 
83  const outerStart = polarToCartesian(wedgeRadius, startDeg);
84  const outerEnd = polarToCartesian(wedgeRadius, endDeg);
85  const innerStart = polarToCartesian(innerRadius, startDeg);
86  const innerEnd = polarToCartesian(innerRadius, endDeg);
87 
88  const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
89 
90  return `
91    M ${outerStart.x} ${outerStart.y}
92    A ${wedgeRadius} ${wedgeRadius} 0 ${largeArcFlag} 1 ${outerEnd.x} ${outerEnd.y}
93    L ${innerEnd.x} ${innerEnd.y}
94    A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x} ${innerStart.y}
95    Z
96  `;
97}
98 
99function RadialMenu({
100  children,
101  menuItems,
102  size = 240,
103  iconSize = 18,
104// … truncated