commit 118f64e93bf7c32cc275b772d3908566369848a7
parent 810728014395012b890a5be8c2bc45a814b8020c
Author: hrryt <harry@mayesfield.uk>
Date: Thu, 13 Aug 2026 17:58:47 +0100
Merge x,y props into point prop
Diffstat:
6 files changed, 19 insertions(+), 24 deletions(-)
diff --git a/src/components/graphing/Angle.jsx b/src/components/graphing/Angle.jsx
@@ -36,18 +36,17 @@ function getArc(points, radius) {
return [start, end];
}
-function getLabelPosition(points, start, end) {
+function getLabelPosition(points, radius, start, end) {
const midpoint = interpolate(start, end, 0.5);
- return interpolate(points[1], midpoint, 1.5);
+ return interpolateDistance(points[1], midpoint, 1.5 * radius);
}
export default function Angle({ points, radius = 0.5, label = null, colour = "auto" }) {
const [start, end] = getArc(points, radius);
- if (label ) { const [labelX, labelY] = getLabelPosition(points, start, end); }
return (
<g>
<path d={`M ${start} A ${radius} ${radius} 0 0 1 ${end}`} class={getColourClass(colour)} />
- {label && <Label x={labelX} y={labelY} colour={colour}>{label}</Label>}
+ {label && <Label point={getLabelPosition(points, radius, start, end)} colour={colour}>{label}</Label>}
</g>
);
}
diff --git a/src/components/graphing/Graph.jsx b/src/components/graphing/Graph.jsx
@@ -24,17 +24,17 @@ function AxisTicks({ every = 1, viewBox }) {
{Array.from({ length: width - 1 }).map((_, i) => {
const x = i + minX + 1;
if (x == 0 || x % every) { return; }
- return <Label x={x} y="0" position="bottom" d={.1}>{x}</Label>;
+ return <Label point={[x, 0]} position="bottom" d={.1}>{x}</Label>;
})}
</g>
<g>
{Array.from({ length: height - 1 }).map((_, i) => {
const y = i + minY + 1;
if (y == 0 || y % every) { return; }
- return <Label x="0" y={y} position="left" d={.1}>{y}</Label>;
+ return <Label point={[0, y]} position="left" d={.1}>{y}</Label>;
})}
</g>
- <Label x="0" y="0" position="bottom-left" d={.1}>0</Label>
+ <Label point={[0, 0]} position="bottom-left" d={.1}>0</Label>
</g>
)
}
diff --git a/src/components/graphing/Label.jsx b/src/components/graphing/Label.jsx
@@ -17,7 +17,8 @@ function getPosition(position) {
}
}
-export default function Label({ x, y, position='central', colour='auto', d=.15, children }) {
+export default function Label({ point, position='central', colour='auto', d=.15, children }) {
+ const [x, y] = point;
const [dominantBaseline, textAnchor, dx, dy] = getPosition(position);
return (
<text
diff --git a/src/components/graphing/Point.jsx b/src/components/graphing/Point.jsx
@@ -1,11 +1,11 @@
import Label from './Label.jsx';
import { getColourClass } from '../../scripts/utils.js';
-export default function Point({ x, y, label=null, colour="auto", position="top" }) {
+export default function Point({ point, label=null, colour="auto", position="top" }) {
return (
<g>
- <path marker-start="url(#cross)" d={`M ${x},${y}`} class={getColourClass(colour)}/>
- {label && <Label x={x} y={y} position={position} d={.3} colour={colour}>{label}</Label>}
+ <path marker-start="url(#cross)" d={`M ${point}`} class={getColourClass(colour)}/>
+ {label && <Label point={point} position={position} d={.3} colour={colour}>{label}</Label>}
</g>
);
}
diff --git a/src/components/graphing/Polygon.jsx b/src/components/graphing/Polygon.jsx
@@ -11,17 +11,12 @@ function getMiddle(points) {
return [getMean(x), getMean(y)];
}
-function PolygonLabel({ children, points, colour }) {
- const [x, y] = getMiddle(points);
- return <Label x={x} y={y} colour={colour}>{children}</Label>;
-}
-
export default function Polygon({ points, label=null, colour="auto" }) {
const pointsString = points.map((point) => point.join(",")).join(" ");
return (
<g>
<polygon points={pointsString} class={getColourClass(colour)}/>
- {label && <PolygonLabel points={points} colour={colour}>{label}</PolygonLabel>}
+ {label && <Label point={getMiddle(points)} colour={colour}>{label}</Label>}
</g>
);
}
diff --git a/src/components/questions/RotationTranslationQuestion.jsx b/src/components/questions/RotationTranslationQuestion.jsx
@@ -51,19 +51,19 @@ export default function RotationTranslationQuestion({ seed, showAnswer }) {
<p>Shape R is translated by <Equation equation={`vec(${translationVector[0]}, ${translationVector[1]})`} /> to form shape S.</p>
<p>What single transformation maps shape P onto shape S?</p>
<Graph viewBox={viewBox}>
- <Polygon points={originalShape} label="P" colour="1" />
- <Point x={axis1[0]} y={axis1[1]} label="Q" colour="2" />
+ <Polygon points={originalShape} label="P" colour="1" />
+ <Point point={ axis1} label="Q" colour="2" />
</Graph>
</>)
const answer = (<>
<p>Rotation {angleExpression} about <Equation equation={`(${axis2[0]}, ${axis2[1]})`} />.</p>
<Graph viewBox={viewBox}>
- <Polygon points={originalShape} label="P" colour="1" />
- <Point x={axis1[0]} y={axis1[1]} label="Q" colour="2" />
- <Polygon points={ midShape} label="R" colour="3" />
- <Polygon points={ endShape} label="S" colour="4" />
- <Point x={axis2[0]} y={axis2[1]} />
+ <Polygon points={originalShape} label="P" colour="1" />
+ <Point point={ axis1} label="Q" colour="2" />
+ <Polygon points={ midShape} label="R" colour="3" />
+ <Polygon points={ endShape} label="S" colour="4" />
+ <Point point={ axis2} />
</Graph>
</>)
