You put the svg in the svg and you line it all up

Khan · Aug 15, 2024 · b04aca0 · b04aca0
1 parent dd5d41c
commit b04aca0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 38 deletions.
diff --git a/packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-arrows.tsx b/packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-arrows.tsx
@@ -17,10 +17,18 @@ export default function AxisArrows() {
 
     return (
         <>
-            <Arrowhead color={axisColor} tip={[xMin, 0]} angle={180} />
-            <Arrowhead color={axisColor} tip={[xMax, 0]} angle={0} />
-            <Arrowhead color={axisColor} tip={[0, yMin]} angle={90} />
-            <Arrowhead color={axisColor} tip={[0, yMax]} angle={270} />
+            {!(yMin > 0 || yMax < 0) && (
+                <>
+                    <Arrowhead color={axisColor} tip={[xMin, 0]} angle={180} />
+                    <Arrowhead color={axisColor} tip={[xMax, 0]} angle={0} />
+                </>
+            )}
+            {!(xMin > 0 || xMax < 0) && (
+                <>
+                    <Arrowhead color={axisColor} tip={[0, yMin]} angle={90} />
+                    <Arrowhead color={axisColor} tip={[0, yMax]} angle={270} />
+                </>
+            )}
         </>
     );
 }
diff --git a/packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-ticks.tsx b/packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-ticks.tsx
@@ -32,14 +32,6 @@ const YGridTick = ({y, graphInfo}: {y: number; graphInfo: GraphDimensions}) => {
     const pointOnAxis: vec.Vector2 = [xPointOnAxis, y];
     const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
 
-    // If the tick is on the edge of the graph's range, don't render it
-    if (
-        yPosition === -graphInfo.height ||
-        yPosition === graphInfo.height + 20
-    ) {
-        return null;
-    }
-
     // Position of the start of the tick
     const x1 = xPosition - tickSize / 2;
     const y1 = yPosition;
@@ -50,7 +42,6 @@ const YGridTick = ({y, graphInfo}: {y: number; graphInfo: GraphDimensions}) => {
 
     // Adjust the y position of the x-axis labels based on
     // whether the x-axis is above, within, or below the graph
-    console.log("xPosition", xPosition);
     const xAdjustment = xPosition >= graphInfo.width ? -10 : 23;
     const xPositionText = xPosition + xAdjustment;
     const yPositionText = yPosition + 3;
@@ -104,7 +95,6 @@ const XGridTick = ({x, graphInfo}: {x: number; graphInfo: GraphDimensions}) => {
 
     // Adjust the y position of the x-axis labels based on
     // whether the x-axis is above, within, or below the graph
-    console.log("yPosition", yPosition);
     const yAdjustment = yPosition >= graphInfo.height ? -10 : 23;
     const xPositionText = xPosition;
     const yPositionText = yPosition + yAdjustment;
@@ -135,7 +125,8 @@ export function generateTickLocations(
     const ticks: number[] = [];
 
     // Add ticks in the positive direction
-    for (let i = 0 + tickStep; i < max; i += tickStep) {
+    const start = Math.max(min, 0);
+    for (let i = start + tickStep; i < max; i += tickStep) {
         ticks.push(i);
     }
 
@@ -163,6 +154,7 @@ export const AxisTicks = () => {
     const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
     const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
 
+    console.log("yGridTicks", yGridTicks);
     return (
         <g className="axis-ticks">
             {yGridTicks.map((y) => {

diff --git a/packages/perseus/src/widgets/interactive-graphs/backgrounds/grid.tsx b/packages/perseus/src/widgets/interactive-graphs/backgrounds/grid.tsx
@@ -68,7 +68,7 @@ const axisOptions = (
 const getVerticalAdjustment = (range: GraphRange) => {
     console.log("range", range);
     const yMax = range[1][1];
-    return yMax <= 0 && yMax % 2 !== 0 ? 6.6 : 0.5;
+    return yMax <= 0 && yMax % 2 !== 0 && yMax !== -1 ? 6.6 : 0.5;
 };
 
 export const Grid = (props: GridProps) => {
@@ -84,6 +84,7 @@ export const Grid = (props: GridProps) => {
     const pad = vec.transform([xPad, yPad], viewTransform);
 
     // STOPSHIP: this is hacky as all heck but this is for testing
+    console.log("pad", pad);
 
     const horizontalAdjustment = props.range[0][0] > 0 ? 0 : -0.5;
     const verticalAdjustment = getVerticalAdjustment(props.range);
@@ -109,12 +110,6 @@ export const Grid = (props: GridProps) => {
                 xAxis={axisOptions(props, X)}
                 yAxis={axisOptions(props, Y)}
             />
-            {props.lockedFigures && (
-                <GraphLockedLayer
-                    lockedFigures={props.lockedFigures}
-                    range={props.range}
-                />
-            )}
         </g>
     );
 };
diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx
@@ -135,23 +135,37 @@ export const MafsGraph = (props: MafsGraphProps) => {
                                 </>
                             )
                         }
-
-                        {/* Protractor */}
-                        {props.showProtractor && <Protractor />}
-                        {/* Interactive layer */}
-                        <g
-                            style={{
-                                width: width,
-                                height: height,
-                                overflow: "hidden",
-                            }}
-                            className="dumbo"
+                        <svg
+                            width={width}
+                            height={height}
+                            viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
+                            preserveAspectRatio="xMidYMin"
+                            x={-width / 2}
+                            y={-height / 2}
                         >
-                            {renderGraph({
-                                state,
-                                dispatch,
-                            })}
-                        </g>
+                            {props.lockedFigures && (
+                                <GraphLockedLayer
+                                    lockedFigures={props.lockedFigures}
+                                    range={state.range}
+                                />
+                            )}
+                            {/* Protractor */}
+                            {props.showProtractor && <Protractor />}
+                            {/* Interactive layer */}
+                            <g
+                                style={{
+                                    width: width,
+                                    height: height,
+                                    overflow: "hidden",
+                                }}
+                                className="dumbo"
+                            >
+                                {renderGraph({
+                                    state,
+                                    dispatch,
+                                })}
+                            </g>
+                        </svg>
                     </Mafs>
                 </View>
             </View>