website

commit cb5ed8d2f5db191331ef6e236ab65bea62bfa25d
parent 850e939777cc757d2f95ca42fdf1577138fa8eba
Author: hrryt <harry@mayesfield.uk>
Date:   Fri, 14 Aug 2026 15:43:50 +0100

Scale concentric arc gaps in angle

Diffstat:
M
src/components/graphing/Angle.jsx
 | 
5
++++-
M
src/pages/Home.jsx
 | 
4
++--

2 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/components/graphing/Angle.jsx b/src/components/graphing/Angle.jsx
@@ -1,4 +1,6 @@
 import Label from './Label.jsx';
+import { useContext } from 'preact/hooks';
+import { ScaleFactorContext } from '../../scripts/contexts.js';
 import { getColourClass, getMidpoint, interpolateDistance } from '../../scripts/utils.js';
 
 function getArc(points, radius) {
@@ -18,10 +20,11 @@ function AngleLabel({ points, radius, colour, children }) {
 }
 
 export default function Angle({ points, radius = 0.5, arcs = 1, label = null, colour = "auto" }) {
+  const concentricGap = 7 * useContext(ScaleFactorContext);
   return (
     <g>
       {Array.from({ length: arcs }).map(
-        (_, i) => <AngleArc points={points} radius={(1 + .2*i) * radius} colour={colour} />
+        (_, i) => <AngleArc points={points} radius={(1 + i*concentricGap) * 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
@@ -18,11 +18,11 @@ 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]]} arcs={3} colour="2" />
+            <Angle points={[[-4,3], [1,2], [-1,1]]} arcs={2} colour="2" />
             <Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox} />
             <Line line={{a: -10, b: -9, c: -1}} colour="5" viewBox={viewBox} />
             <Segment points={[[0,1], [2,2]]} marker="double-feather" />
-            <Point point={[0,1]} label="Q" colour="1" />
+            <Point point={[0,1]} label="Q" colour="4" />
           </Graph>
         </div>
       </Window>