113 lines
5.3 KiB
TypeScript
113 lines
5.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
const ParallelPerpendicularWidget: React.FC = () => {
|
|
const [slope, setSlope] = useState(2);
|
|
const [showParallel, setShowParallel] = useState(true);
|
|
const [showPerpendicular, setShowPerpendicular] = useState(true);
|
|
|
|
const range = 10;
|
|
const scale = 20; // 20px per unit
|
|
const size = 300;
|
|
const center = size / 2;
|
|
|
|
const toPx = (v: number, isY = false) => isY ? center - v * scale : center + v * scale;
|
|
|
|
const getLinePath = (m: number, b: number) => {
|
|
// Find two points on edges of view box (-range, +range)
|
|
// y = mx + b
|
|
// Need to clip lines to viewBox to be nice
|
|
const x1 = -range;
|
|
const y1 = m * x1 + b;
|
|
const x2 = range;
|
|
const y2 = m * x2 + b;
|
|
return `M ${toPx(x1)} ${toPx(y1, true)} L ${toPx(x2)} ${toPx(y2, true)}`;
|
|
};
|
|
|
|
const perpSlope = slope === 0 ? 1000 : -1 / slope; // Hack for vertical
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
|
|
<div className="flex flex-col md:flex-row gap-8">
|
|
<div className="w-full md:w-1/3 space-y-6">
|
|
<div className="p-4 bg-slate-50 border border-slate-200 rounded-xl">
|
|
<label className="text-xs font-bold text-slate-500 uppercase mb-2 block">Reference Slope (m)</label>
|
|
<div className="flex items-center gap-4">
|
|
<input
|
|
type="range" min="-4" max="4" step="0.5"
|
|
value={slope} onChange={e => setSlope(parseFloat(e.target.value))}
|
|
className="flex-1 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
|
/>
|
|
<span className="font-mono font-bold text-indigo-700 w-12 text-right">{slope}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => setShowParallel(!showParallel)}
|
|
className={`w-full flex items-center justify-between p-3 rounded-lg border-2 transition-all ${
|
|
showParallel ? 'border-sky-500 bg-sky-50 text-sky-900' : 'border-slate-200 text-slate-400'
|
|
}`}
|
|
>
|
|
<span className="font-bold">Parallel</span>
|
|
<span className="font-mono text-sm">{showParallel ? `m = ${slope}` : 'Hidden'}</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setShowPerpendicular(!showPerpendicular)}
|
|
className={`w-full flex items-center justify-between p-3 rounded-lg border-2 transition-all ${
|
|
showPerpendicular ? 'border-rose-500 bg-rose-50 text-rose-900' : 'border-slate-200 text-slate-400'
|
|
}`}
|
|
>
|
|
<span className="font-bold">Perpendicular</span>
|
|
<span className="font-mono text-sm">{showPerpendicular ? `m = ${slope === 0 ? 'Undef' : (-1/slope).toFixed(2)}` : 'Hidden'}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="text-xs text-slate-500 bg-slate-50 p-3 rounded">
|
|
<strong>Key Rule:</strong> Perpendicular slopes are negative reciprocals ($m$ vs $-1/m$). Their product is always -1.
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex justify-center">
|
|
<div className="relative w-[300px] h-[300px] border border-slate-200 rounded-xl overflow-hidden bg-white">
|
|
<svg width="300" height="300" viewBox="0 0 300 300">
|
|
<defs>
|
|
<pattern id="grid-p" width="20" height="20" patternUnits="userSpaceOnUse">
|
|
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" strokeWidth="1"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#grid-p)" />
|
|
|
|
{/* Axes */}
|
|
<line x1="0" y1={center} x2={size} y2={center} stroke="#cbd5e1" strokeWidth="2" />
|
|
<line x1={center} y1="0" x2={center} y2={size} stroke="#cbd5e1" strokeWidth="2" />
|
|
|
|
{/* Reference Line (Indigo) */}
|
|
<path d={getLinePath(slope, 0)} stroke="#4f46e5" strokeWidth="3" />
|
|
|
|
{/* Parallel Line (Sky) - Shifted up by 3 units */}
|
|
{showParallel && (
|
|
<path d={getLinePath(slope, 3)} stroke="#0ea5e9" strokeWidth="3" strokeDasharray="5,5" />
|
|
)}
|
|
|
|
{/* Perpendicular Line (Rose) - Through Origin */}
|
|
{showPerpendicular && (
|
|
<>
|
|
<path d={getLinePath(perpSlope, 0)} stroke="#e11d48" strokeWidth="3" />
|
|
{/* Right Angle Marker approx */}
|
|
<rect
|
|
x={center} y={center} width="15" height="15"
|
|
fill="rgba(225, 29, 72, 0.2)"
|
|
transform={`rotate(${-Math.atan(slope) * 180 / Math.PI} ${center} ${center})`}
|
|
/>
|
|
</>
|
|
)}
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ParallelPerpendicularWidget; |