267 lines
7.6 KiB
TypeScript
267 lines
7.6 KiB
TypeScript
import React, { useRef, useState } from "react";
|
|
import {
|
|
scaleToSvg,
|
|
scaleFromSvg,
|
|
round,
|
|
calculateDistanceSquared,
|
|
} from "../../utils/math";
|
|
import { type CircleState, type Point } from "../../types/lesson";
|
|
|
|
interface CoordinatePlaneProps {
|
|
circle: CircleState;
|
|
point?: Point | null;
|
|
onPointClick?: (p: Point) => void;
|
|
interactive?: boolean;
|
|
showDistance?: boolean;
|
|
mode?: "view" | "place_point";
|
|
}
|
|
|
|
const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
|
|
circle,
|
|
point,
|
|
onPointClick,
|
|
showDistance = false,
|
|
mode = "view",
|
|
}) => {
|
|
const svgRef = useRef<SVGSVGElement>(null);
|
|
const [hoverPoint, setHoverPoint] = useState<Point | null>(null);
|
|
|
|
// Viewport settings
|
|
const width = 400;
|
|
const height = 400;
|
|
const range = 10; // -10 to 10
|
|
const tickSpacing = 1;
|
|
|
|
// Scales
|
|
const toX = (val: number) => scaleToSvg(val, -range, range, 0, width);
|
|
const toY = (val: number) => scaleToSvg(val, range, -range, 0, height); // Inverted Y for SVG
|
|
const fromX = (px: number) => scaleFromSvg(px, -range, range, 0, width);
|
|
const fromY = (px: number) => scaleFromSvg(px, range, -range, 0, height);
|
|
|
|
const cx = toX(circle.h);
|
|
const cy = toY(circle.k);
|
|
// Radius in pixels (assuming uniform aspect ratio)
|
|
const rPx = toX(circle.r) - toX(0);
|
|
|
|
const handleMouseMove = (e: React.MouseEvent) => {
|
|
if (mode !== "place_point" || !svgRef.current) return;
|
|
const rect = svgRef.current.getBoundingClientRect();
|
|
const rawX = e.clientX - rect.left;
|
|
const rawY = e.clientY - rect.top;
|
|
|
|
// Snap to nearest 0.5 for cleaner UX
|
|
const graphX = Math.round(fromX(rawX) * 2) / 2;
|
|
const graphY = Math.round(fromY(rawY) * 2) / 2;
|
|
|
|
setHoverPoint({ x: graphX, y: graphY });
|
|
};
|
|
|
|
const handleClick = () => {
|
|
if (mode === "place_point" && hoverPoint && onPointClick) {
|
|
onPointClick(hoverPoint);
|
|
}
|
|
};
|
|
|
|
// Generate grid lines
|
|
const ticks = [];
|
|
for (let i = -range; i <= range; i += tickSpacing) {
|
|
if (i === 0) continue; // Skip axes (drawn separately)
|
|
ticks.push(i);
|
|
}
|
|
|
|
const dSquared = point
|
|
? calculateDistanceSquared(point.x, point.y, circle.h, circle.k)
|
|
: 0;
|
|
const isInside = dSquared < circle.r * circle.r;
|
|
const isOn = Math.abs(dSquared - circle.r * circle.r) < 0.01;
|
|
|
|
const pointFill = isOn ? "#ca8a04" : isInside ? "#16a34a" : "#dc2626";
|
|
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<div className="relative shadow-lg rounded-xl overflow-hidden bg-white border border-slate-200">
|
|
<svg
|
|
ref={svgRef}
|
|
width={width}
|
|
height={height}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseLeave={() => setHoverPoint(null)}
|
|
onClick={handleClick}
|
|
className={`${mode === "place_point" ? "cursor-crosshair" : "cursor-default"}`}
|
|
>
|
|
{/* Grid Background */}
|
|
{ticks.map((t) => (
|
|
<React.Fragment key={t}>
|
|
<line
|
|
x1={toX(t)}
|
|
y1={0}
|
|
x2={toX(t)}
|
|
y2={height}
|
|
stroke="#e2e8f0"
|
|
strokeWidth="1"
|
|
/>
|
|
<line
|
|
x1={0}
|
|
y1={toY(t)}
|
|
x2={width}
|
|
y2={toY(t)}
|
|
stroke="#e2e8f0"
|
|
strokeWidth="1"
|
|
/>
|
|
</React.Fragment>
|
|
))}
|
|
|
|
{/* Axes */}
|
|
<line
|
|
x1={toX(0)}
|
|
y1={0}
|
|
x2={toX(0)}
|
|
y2={height}
|
|
stroke="#64748b"
|
|
strokeWidth="2"
|
|
/>
|
|
<line
|
|
x1={0}
|
|
y1={toY(0)}
|
|
x2={width}
|
|
y2={toY(0)}
|
|
stroke="#64748b"
|
|
strokeWidth="2"
|
|
/>
|
|
|
|
{/* Circle */}
|
|
<circle
|
|
cx={cx}
|
|
cy={cy}
|
|
r={Math.abs(rPx)}
|
|
fill="rgba(99, 102, 241, 0.1)"
|
|
stroke="#4f46e5"
|
|
strokeWidth="3"
|
|
className="transition-all duration-300 ease-out"
|
|
/>
|
|
|
|
{/* Center Point */}
|
|
<circle cx={cx} cy={cy} r={4} fill="#4f46e5" />
|
|
<text
|
|
x={cx + 8}
|
|
y={cy - 8}
|
|
fontSize="12"
|
|
fill="#4f46e5"
|
|
fontWeight="bold"
|
|
>
|
|
Center ({circle.h}, {circle.k})
|
|
</text>
|
|
|
|
{/* Radius Line (only if distance line is not active to avoid clutter) */}
|
|
{!point && (
|
|
<line
|
|
x1={cx}
|
|
y1={cy}
|
|
x2={cx + rPx}
|
|
y2={cy}
|
|
stroke="#4f46e5"
|
|
strokeWidth="2"
|
|
strokeDasharray="5,5"
|
|
/>
|
|
)}
|
|
{!point && (
|
|
<text x={cx + rPx / 2} y={cy - 5} fontSize="12" fill="#4f46e5">
|
|
r = {circle.r}
|
|
</text>
|
|
)}
|
|
|
|
{/* Placed Point */}
|
|
{point && (
|
|
<>
|
|
<line
|
|
x1={cx}
|
|
y1={cy}
|
|
x2={toX(point.x)}
|
|
y2={toY(point.y)}
|
|
stroke="#94a3b8"
|
|
strokeWidth="2"
|
|
strokeDasharray="4,4"
|
|
/>
|
|
<circle
|
|
cx={toX(point.x)}
|
|
cy={toY(point.y)}
|
|
r={6}
|
|
fill={pointFill}
|
|
stroke="white"
|
|
strokeWidth="2"
|
|
/>
|
|
<text
|
|
x={toX(point.x) + 8}
|
|
y={toY(point.y) - 8}
|
|
fontSize="12"
|
|
fontWeight="bold"
|
|
fill={pointFill}
|
|
>
|
|
({point.x}, {point.y})
|
|
</text>
|
|
</>
|
|
)}
|
|
|
|
{/* Hover Ghost Point */}
|
|
{mode === "place_point" && hoverPoint && !point && (
|
|
<circle
|
|
cx={toX(hoverPoint.x)}
|
|
cy={toY(hoverPoint.y)}
|
|
r={4}
|
|
fill="rgba(0,0,0,0.3)"
|
|
/>
|
|
)}
|
|
</svg>
|
|
|
|
<div className="absolute bottom-2 left-2 text-xs text-slate-400 bg-white/80 px-2 py-1 rounded">
|
|
1 unit = {width / (range * 2)}px
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info Panel below graph */}
|
|
{point && showDistance && (
|
|
<div
|
|
className={`mt-4 p-4 rounded-lg border-l-4 w-full max-w-md bg-white shadow-sm transition-colors ${
|
|
isOn
|
|
? "border-yellow-500 bg-yellow-50"
|
|
: isInside
|
|
? "border-green-500 bg-green-50"
|
|
: "border-red-500 bg-red-50"
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<span className="font-bold text-slate-700">Distance Check:</span>
|
|
<span
|
|
className={`px-2 py-0.5 rounded text-sm font-bold uppercase ${
|
|
isOn
|
|
? "bg-yellow-200 text-yellow-800"
|
|
: isInside
|
|
? "bg-green-200 text-green-800"
|
|
: "bg-red-200 text-red-800"
|
|
}`}
|
|
>
|
|
{isOn ? "On Circle" : isInside ? "Inside" : "Outside"}
|
|
</span>
|
|
</div>
|
|
<div className="font-mono text-sm space-y-1">
|
|
<p>d² = (x - h)² + (y - k)²</p>
|
|
<p>
|
|
d² = ({point.x} - {circle.h})² + ({point.y} - {circle.k})²
|
|
</p>
|
|
<p>
|
|
d² ={" "}
|
|
{round(
|
|
calculateDistanceSquared(point.x, point.y, circle.h, circle.k),
|
|
)}{" "}
|
|
<span className="mx-2 text-slate-400">vs</span> r² ={" "}
|
|
{circle.r * circle.r}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CoordinatePlane;
|