website

commit 3ce5b8592746fbd7bde130ad919a163bccf85e2e
parent 118f64e93bf7c32cc275b772d3908566369848a7
Author: hrryt <harry@mayesfield.uk>
Date:   Thu, 13 Aug 2026 18:27:17 +0100

Add double arc angle notation

Diffstat:
M
src/components/graphing/Angle.jsx
 | 
19
+++++++++++++------
M
src/pages/Home.jsx
 | 
2
+-

2 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/src/components/graphing/Angle.jsx b/src/components/graphing/Angle.jsx
@@ -36,17 +36,24 @@ function getArc(points, radius) {
   return [start, end];
 }
 
-function getLabelPosition(points, radius, start, end) {
+function AngleArc({ points, radius, colour }) {
+  const [start, end] = getArc(points, radius);
+  return <path d={`M ${start} A ${radius} ${radius} 0 0 1 ${end}`} class={getColourClass(colour)} />;
+}
+
+function AngleLabel({ points, radius, colour, children }) {
+  const [start, end] = getArc(points, 1);
   const midpoint = interpolate(start, end, 0.5);
-  return interpolateDistance(points[1], midpoint, 1.5 * radius);
+  const point = interpolateDistance(points[1], midpoint, 1.5 * radius);
+  return <Label point={point} colour={colour}>{children}</Label>;
 }
 
-export default function Angle({ points, radius = 0.5, label = null, colour = "auto" }) {
-  const [start, end] = getArc(points, radius);
+export default function Angle({ points, radius = 0.5, double = false, label = null, colour = "auto" }) {
   return (
     <g>
-      <path d={`M ${start} A ${radius} ${radius} 0 0 1 ${end}`} class={getColourClass(colour)} />
-      {label && <Label point={getLabelPosition(points, radius, start, end)} colour={colour}>{label}</Label>}
+      <AngleArc points={points} radius={radius} colour={colour} />
+      {double && <AngleArc points={points} radius={1.2*radius} colour={colour} />}
+      {label && <AngleLabel points={points} radius={radius} colour={colour}>{label}</AngleLabel>}
     </g>
   );
 }
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -15,7 +15,7 @@ export default function Home() {
           <Graph viewBox={viewBox}>
             <Quadratic a={2} b={1} c={-3} colour="1" viewBox={viewBox} />
             <Polygon points={[[1,2], [-1,1], [-4,3]]} label="P" colour="2" />
-            <Angle points={[[-4,3], [1,2], [-1,1]]} colour="2" />
+            <Angle points={[[-4,3], [1,2], [-1,1]]} double={true} colour="2" />
             <Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox}/>
           </Graph>
         </div>