commit c8d1e72f2d81d3410ee5c18ca800c75453bc8f74
parent a57d89f4f0b8089a105073f39ae5fdd73334b478
Author: hrryt <harry@mayesfield.uk>
Date: Tue, 11 Aug 2026 11:55:18 +0100
Add text colour and automatic font size and axis tick spread
Diffstat:
9 files changed, 26 insertions(+), 15 deletions(-)
diff --git a/src/components/graphing/CoordinateLabel.jsx b/src/components/graphing/CoordinateLabel.jsx
@@ -1,5 +1,5 @@
import Label from './Label.jsx';
-export default function CoordinateLabel({x, y, position}) {
+export default function CoordinateLabel({ x, y, position = "top" }) {
return <Label x={x} y={y} position={position}>{`(${x},${y})`}</Label>;
}
diff --git a/src/components/graphing/Cubic.jsx b/src/components/graphing/Cubic.jsx
@@ -1,4 +1,4 @@
-import { getSymmetricBounds } from '/src/scripts/utils.js';
+import { getSymmetricBounds } from '../../scripts/utils.js';
export default function Cubic({ a=1, b=0, c=0, d=0, colour="1", viewBox }) {
// https://math.stackexchange.com/questions/3356084/to-construct-a-polynomial-using-b%C3%A9zier-curves
diff --git a/src/components/graphing/Graph.jsx b/src/components/graphing/Graph.jsx
@@ -39,7 +39,13 @@ function AxisTicks({ every = 1, viewBox }) {
)
}
-export default function Graph({ children, viewBox, width="500", height="500" }) {
+export default function Graph({ children, viewBox, width="300", height="300" }) {
+ const scaleFactor = Math.max(viewBox[2] / width, viewBox[3] / height);
+ const style = `
+ text {
+ font-size: ${scaleFactor}em;
+ }
+ `;
return (
<svg
width={width} height={height} viewBox={viewBox.join(' ')}
@@ -56,11 +62,14 @@ export default function Graph({ children, viewBox, width="500", height="500" })
>
<polygon points="0,0 4,2 0,4" id='arrowhead' />
</marker>
+ <style>
+ {style}
+ </style>
</defs>
<Grid viewBox={viewBox} />
<Axes viewBox={viewBox} />
{children}
- <AxisTicks viewBox={viewBox} />
+ <AxisTicks every={Math.floor(50 * scaleFactor)} viewBox={viewBox} />
</svg>
);
}
diff --git a/src/components/graphing/Label.jsx b/src/components/graphing/Label.jsx
@@ -15,13 +15,15 @@ function getPosition(position) {
}
}
-export default function Label({ x, y, position='central', d=.15, children }) {
+export default function Label({ x, y, position='central', colour='auto', d=.15, children }) {
const [dominantBaseline, textAnchor, dx, dy] = getPosition(position);
+ const colourClass = colour == 'auto' ? '' : `color-${colour}`;
return (
<text
x={x} y={-y} dx={d*dx} dy={-d*dy} transform='scale(1 -1)'
dominant-baseline={dominantBaseline}
text-anchor={textAnchor}
+ class={colourClass}
>
{children}
</text>
diff --git a/src/components/graphing/Polygon.jsx b/src/components/graphing/Polygon.jsx
@@ -10,17 +10,18 @@ function getMiddle(points) {
return [getMean(x), getMean(y)];
}
-function PolygonLabel({ children, points }) {
+function PolygonLabel({ children, points, colour }) {
const [x, y] = getMiddle(points);
- return <Label x={x} y={y}>{children}</Label>;
+ return <Label x={x} y={y} colour={colour}>{children}</Label>;
}
export default function Polygon({ points, label=null, colour="1" }) {
const pointsString = points.map((point) => point.join(",")).join(" ");
+ const colourClass = `color-${colour}`;
return (
<g>
- <polygon points={pointsString} class={`color-${colour}`}/>
- {label && <PolygonLabel points={points}>{label}</PolygonLabel>}
+ <polygon points={pointsString} class={colourClass}/>
+ {label && <PolygonLabel points={points} colour={colour}>{label}</PolygonLabel>}
</g>
);
}
diff --git a/src/components/graphing/Quadratic.jsx b/src/components/graphing/Quadratic.jsx
@@ -1,4 +1,4 @@
-import { getSymmetricBounds } from '/src/scripts/utils.js';
+import { getSymmetricBounds } from '../../scripts/utils.js';
export default function Quadratic({ a=1, b=0, c=0, colour="1", viewBox }) {
function f(x) { return a*x*x + b*x + c; }
diff --git a/src/components/questions/DoubleTransformationQuestion.jsx b/src/components/questions/DoubleTransformationQuestion.jsx
@@ -30,12 +30,12 @@ export default function DoubleTransformationQuestion({ seed, showAnswer }) {
<p>
What single transformation..?
</p>
- <Graph viewBox={viewBox} width="300" height="300">
+ <Graph viewBox={viewBox}>
<Polygon points={originalShape} label="P" colour="1" />
<Polygon points={ midShape} label="Q" colour="2" />
<Polygon points={ endShape} label="R" colour="3" />
- <CoordinateLabel x={axis1[0]} y={axis1[1]} position="top" />
- <CoordinateLabel x={axis2[0]} y={axis2[1]} position="top" />
+ <CoordinateLabel x={axis1[0]} y={axis1[1]} />
+ <CoordinateLabel x={axis2[0]} y={axis2[1]} />
</Graph>
</>)
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -16,7 +16,7 @@ export default function Home() {
<Quadratic a={2} b={1} c={-3} colour="1" viewBox={viewBox} />
<CoordinateLabel x={-.25} y={-3.125} position="bottom" />
<Polygon points={[[1,2], [-1,1], [-4,3]]} label="P" colour="2" />
- <CoordinateLabel x={-4} y={3} position="top" />
+ <CoordinateLabel x={-4} y={3} />
<Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox}/>
</Graph>
</div>
diff --git a/src/styles/svg.css b/src/styles/svg.css
@@ -25,7 +25,6 @@ polygon#arrowhead {
}
text {
- font-size: 0.02em;
stroke: white;
stroke-width: 0.03;
paint-order: stroke;
