233 lines
7.7 KiB
TypeScript
233 lines
7.7 KiB
TypeScript
import React, { useState, useRef } from "react";
|
||
|
||
const InteractiveSectorWidget: React.FC = () => {
|
||
const [angle, setAngle] = useState(60); // degrees
|
||
const [radius, setRadius] = useState(120); // pixels
|
||
const isDragging = useRef<"angle" | "radius" | null>(null);
|
||
const svgRef = useRef<SVGSVGElement>(null);
|
||
|
||
const cx = 200;
|
||
const cy = 200;
|
||
const maxRadius = 160;
|
||
|
||
// Calculate Handle Position
|
||
const rad = (angle * Math.PI) / 180;
|
||
const hx = cx + radius * Math.cos(-rad); // SVG Y is down, so -rad for standard math "up" rotation behavior if we want counter-clockwise from East
|
||
const hy = cy + radius * Math.sin(-rad);
|
||
|
||
// For the arc path
|
||
// Start point is (cx + r, cy) [0 degrees]
|
||
// End point is (hx, hy)
|
||
const largeArc = angle > 180 ? 1 : 0;
|
||
// Sweep flag 0 because we are using -rad (counter clockwise visual in SVG)
|
||
const pathData = `
|
||
M ${cx} ${cy}
|
||
L ${cx + radius} ${cy}
|
||
A ${radius} ${radius} 0 ${largeArc} 0 ${hx} ${hy}
|
||
Z
|
||
`;
|
||
|
||
// Interaction
|
||
const handleInteraction = (e: React.MouseEvent) => {
|
||
if (!svgRef.current || !isDragging.current) return;
|
||
const rect = svgRef.current.getBoundingClientRect();
|
||
const mx = e.clientX - rect.left;
|
||
const my = e.clientY - rect.top;
|
||
|
||
const dx = mx - cx;
|
||
const dy = my - cy;
|
||
|
||
if (isDragging.current === "angle") {
|
||
let deg = Math.atan2(-dy, dx) * (180 / Math.PI); // -dy to correct for SVG coords
|
||
if (deg < 0) deg += 360;
|
||
setAngle(Math.round(deg));
|
||
} else if (isDragging.current === "radius") {
|
||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||
setRadius(Math.max(50, Math.min(maxRadius, dist)));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200 flex flex-col md:flex-row items-center gap-8">
|
||
<div className="relative select-none">
|
||
<svg
|
||
ref={svgRef}
|
||
width="400"
|
||
height="400"
|
||
onMouseMove={handleInteraction}
|
||
onMouseUp={() => (isDragging.current = null)}
|
||
onMouseLeave={() => (isDragging.current = null)}
|
||
className="cursor-crosshair"
|
||
>
|
||
{/* Full Circle Ghost */}
|
||
<circle
|
||
cx={cx}
|
||
cy={cy}
|
||
r={radius}
|
||
stroke="#e2e8f0"
|
||
strokeWidth="1"
|
||
fill="none"
|
||
strokeDasharray="4,4"
|
||
/>
|
||
|
||
{/* Sector */}
|
||
<path
|
||
d={pathData}
|
||
fill="rgba(249, 115, 22, 0.2)"
|
||
stroke="#f97316"
|
||
strokeWidth="2"
|
||
/>
|
||
|
||
{/* Radius Handle Line (Baseline) */}
|
||
<line
|
||
x1={cx}
|
||
y1={cy}
|
||
x2={cx + radius}
|
||
y2={cy}
|
||
stroke="#cbd5e1"
|
||
strokeWidth="2"
|
||
/>
|
||
|
||
{/* Radius Drag Handle (on baseline) */}
|
||
<circle
|
||
cx={cx + radius}
|
||
cy={cy}
|
||
r={8}
|
||
fill="#94a3b8"
|
||
stroke="white"
|
||
strokeWidth="2"
|
||
className="cursor-ew-resize hover:fill-slate-600 shadow-sm"
|
||
onMouseDown={() => (isDragging.current = "radius")}
|
||
/>
|
||
|
||
{/* Angle Drag Handle (on arc) */}
|
||
<circle
|
||
cx={hx}
|
||
cy={hy}
|
||
r={10}
|
||
fill="#f97316"
|
||
stroke="white"
|
||
strokeWidth="2"
|
||
className="cursor-pointer hover:scale-110 transition-transform shadow-md"
|
||
onMouseDown={() => (isDragging.current = "angle")}
|
||
/>
|
||
|
||
{/* Angle Text */}
|
||
<text
|
||
x={cx + 20}
|
||
y={cy - 10}
|
||
className="text-xs font-bold fill-orange-600"
|
||
>
|
||
{angle}°
|
||
</text>
|
||
|
||
{/* Radius Text */}
|
||
<text
|
||
x={cx + radius / 2}
|
||
y={cy + 15}
|
||
textAnchor="middle"
|
||
className="text-xs font-bold fill-slate-400"
|
||
>
|
||
r = {Math.round(radius / 10)}
|
||
</text>
|
||
|
||
{/* Center */}
|
||
<circle cx={cx} cy={cy} r={4} fill="#64748b" />
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="flex-1 w-full space-y-6">
|
||
<div className="bg-orange-50 border border-orange-100 p-4 rounded-xl">
|
||
<h3 className="text-orange-900 font-bold mb-2 flex items-center gap-2">
|
||
<span className="p-1 bg-orange-200 rounded text-xs">INPUT</span>
|
||
Parameters
|
||
</h3>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<div className="flex justify-between text-xs text-orange-700 uppercase font-bold mb-1">
|
||
Angle (θ): {angle}°
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min="1"
|
||
max="360"
|
||
value={angle}
|
||
onChange={(e) => setAngle(parseInt(e.target.value))}
|
||
className="w-full h-2 bg-orange-200 rounded-lg appearance-none cursor-pointer accent-orange-600"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<div className="flex justify-between text-xs text-orange-700 uppercase font-bold mb-1">
|
||
Radius (r): {Math.round(radius / 10)}
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min="50"
|
||
max={maxRadius}
|
||
value={radius}
|
||
onChange={(e) => setRadius(parseInt(e.target.value))}
|
||
className="w-full h-2 bg-orange-200 rounded-lg appearance-none cursor-pointer accent-orange-600"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 bg-white border border-slate-200 rounded-xl shadow-sm">
|
||
<div className="flex justify-between items-center mb-1">
|
||
<span className="text-sm font-bold text-slate-600">
|
||
Fraction of Circle
|
||
</span>
|
||
<span className="font-mono text-orange-600 font-bold">
|
||
{angle}/360 ≈ {(angle / 360).toFixed(2)}
|
||
</span>
|
||
</div>
|
||
<div className="w-full bg-slate-100 rounded-full h-2">
|
||
<div
|
||
className="bg-orange-500 h-2 rounded-full transition-all"
|
||
style={{ width: `${(angle / 360) * 100}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div className="p-4 bg-white border border-slate-200 rounded-xl shadow-sm">
|
||
<span className="text-xs font-bold text-slate-400 uppercase">
|
||
Arc Length
|
||
</span>
|
||
<div className="font-mono text-lg text-slate-800 mt-1">
|
||
2π({Math.round(radius / 10)}) ×{" "}
|
||
<span className="text-orange-600">
|
||
{(angle / 360).toFixed(2)}
|
||
</span>
|
||
</div>
|
||
<div className="font-bold text-xl text-slate-900 mt-1">
|
||
= {(2 * Math.PI * (radius / 10) * (angle / 360)).toFixed(1)}
|
||
</div>
|
||
</div>
|
||
<div className="p-4 bg-white border border-slate-200 rounded-xl shadow-sm">
|
||
<span className="text-xs font-bold text-slate-400 uppercase">
|
||
Sector Area
|
||
</span>
|
||
<div className="font-mono text-lg text-slate-800 mt-1">
|
||
π({Math.round(radius / 10)})² ×{" "}
|
||
<span className="text-orange-600">
|
||
{(angle / 360).toFixed(2)}
|
||
</span>
|
||
</div>
|
||
<div className="font-bold text-xl text-slate-900 mt-1">
|
||
={" "}
|
||
{(Math.PI * Math.pow(radius / 10, 2) * (angle / 360)).toFixed(
|
||
1,
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default InteractiveSectorWidget;
|