Testing prototype of new SVG axis tick labels + clipping mask

.changeset/wet-students-float.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Implementation of SVG-based Axis Tick Labels for Interactive Graph

packages/perseus/src/widgets/interactive-graphs/backgrounds/axis-ticks.tsx

@@ -1,3 +1,4 @@
+import {usePaneContext} from "mafs";
 import * as React from "react";
 
 import {useTransformVectorsToPixels} from "../graphs/use-transform";
@@ -47,9 +48,26 @@ const YGridTick = ({y, graphInfo}: {y: number; graphInfo: GraphDimensions}) => {
     const x2 = xPosition + tickSize / 2;
     const y2 = yPosition;
 
+    // Adjust the y position of the x-axis labels based on
+    // whether the x-axis is above, within, or below the graph
+    const xAdjustment = xPosition >= graphInfo.width ? -10 : 30;
+    const xPositionText = xPosition + xAdjustment;
+    const yPositionText = yPosition + 3;
+
     return (
         <g className="y-axis-ticks">
             <line x1={x1} y1={y1} x2={x2} y2={y2} style={tickStyle} />
+            {y !== -1 && (
+                <text
+                    height={20}
+                    width={50}
+                    textAnchor="end"
+                    x={xPositionText}
+                    y={yPositionText}
+                >
+                    {y.toString()}
+                </text>
+            )}
         </g>
     );
 };
@@ -83,9 +101,26 @@ const XGridTick = ({x, graphInfo}: {x: number; graphInfo: GraphDimensions}) => {
     const x2 = xPosition;
     const y2 = yPosition - tickSize / 2;
 
+    // Adjust the y position of the x-axis labels based on
+    // whether the x-axis is above, within, or below the graph
+    const yAdjustment = yPosition >= graphInfo.height ? -10 : 25;
+    const xPositionText = xPosition;
+    const yPositionText = yPosition + yAdjustment;
+
     return (
         <g className="x-axis-ticks">
             <line x1={x1} y1={y1} x2={x2} y2={y2} style={tickStyle} />
+            {x !== -1 && (
+                <text
+                    height={20}
+                    width={50}
+                    textAnchor="middle"
+                    x={xPositionText}
+                    y={yPositionText}
+                >
+                    {x.toString()}
+                </text>
+            )}
         </g>
     );
 };
@@ -126,6 +161,10 @@ export const AxisTicks = () => {
     const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
     const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
 
+    const cool = usePaneContext();
+
+    console.log("usePaneContext", cool);
+
     return (
         <g className="axis-ticks">
             {yGridTicks.map((y) => {

packages/perseus/src/widgets/interactive-graphs/backgrounds/grid.tsx

@@ -1,4 +1,4 @@
-import {Coordinates} from "mafs";
+import {Coordinates, usePaneContext, useTransformContext, vec} from "mafs";
 import * as React from "react";
 
 import {X, Y} from "../math";
@@ -8,14 +8,15 @@ import {AxisTicks} from "./axis-ticks";
 
 import type {GraphRange} from "../../../perseus-types";
 import type {SizeClass} from "../../../util/sizing-utils";
-import type {vec} from "mafs";
 
 interface GridProps {
     tickStep: vec.Vector2;
     gridStep: vec.Vector2;
     range: GraphRange;
     containerSizeClass: SizeClass;
     markings: "graph" | "grid" | "none";
+    width: number;
+    height: number;
 }
 
 /**
@@ -62,8 +63,31 @@ const axisOptions = (
 };
 
 export const Grid = (props: GridProps) => {
+    const {viewTransform} = useTransformContext();
+    const {xPaneRange, yPaneRange} = usePaneContext();
+
+    const xMin = xPaneRange[0];
+    const yMax = yPaneRange[1];
+
+    const xPad = props.range[0][0] - Math.min(0, xMin);
+    const yPad = props.range[1][1] - Math.max(0, yMax);
+
+    const pad = vec.transform([xPad, yPad], viewTransform);
+
+    const horizontalAdjustment = props.range[0][0] > 0 ? 6.6 : 0;
+    const verticalAdjustment = props.range[1][1] < 0 ? 6.6 : 0;
+
+    const rectTop = pad[1] + verticalAdjustment - 1;
+    const rectBottom = pad[1] + props.height + verticalAdjustment + 1;
+    const rectLeft = pad[0] + horizontalAdjustment - 1;
+    const rectRight = pad[0] + props.width + horizontalAdjustment + 1;
+
     return props.markings === "none" ? null : (
-        <>
+        <g
+            style={{
+                clipPath: `rect(${rectTop}px ${rectRight}px ${rectBottom}px ${rectLeft}px`,
+            }}
+        >
             <Coordinates.Cartesian
                 xAxis={axisOptions(props, X)}
                 yAxis={axisOptions(props, Y)}
@@ -77,6 +101,6 @@ export const Grid = (props: GridProps) => {
                     </>
                 )
             }
-        </>
+        </g>
     );
 };

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -1,10 +1,11 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
-import {Mafs} from "mafs";
+import {Mafs, usePaneContext} from "mafs";
 import * as React from "react";
 
 import AxisLabels from "./backgrounds/axis-labels";
 import {AxisTickLabels} from "./backgrounds/axis-tick-labels";
+import {AxisTicks} from "./backgrounds/axis-ticks";
 import {Grid} from "./backgrounds/grid";
 import {LegacyGrid} from "./backgrounds/legacy-grid";
 import GraphLockedLayer from "./graph-locked-layer";
@@ -76,7 +77,7 @@ export const MafsGraph = (props: MafsGraphProps) => {
                     padding: "25px 25px 0 0",
                     boxSizing: "content-box",
                     marginLeft: "20px",
-                    marginBottom: "20px",
+                    marginBottom: "30px",
                 }}
             >
                 <LegacyGrid
@@ -93,7 +94,6 @@ export const MafsGraph = (props: MafsGraphProps) => {
                     {props.markings === "graph" && (
                         <>
                             <AxisLabels />
-                            <AxisTickLabels />
                         </>
                     )}
                     <Mafs
@@ -117,7 +117,15 @@ export const MafsGraph = (props: MafsGraphProps) => {
                             range={state.range}
                             containerSizeClass={props.containerSizeClass}
                             markings={props.markings}
+                            width={width}
+                            height={height}
                         />
+                        {/* Axis Tick Labels */}
+                        {props.markings === "graph" && (
+                            <>
+                                <AxisTicks />
+                            </>
+                        )}
                         {/* Locked layer */}
                         {props.lockedFigures && (
                             <GraphLockedLayer

packages/perseus/src/widgets/interactive-graphs/mafs-styles.css

@@ -29,11 +29,13 @@
     --movable-line-stroke-color: var(--mafs-blue);
     --movable-line-stroke-weight: 2px;
     --movable-line-stroke-weight-active: 4px;
+    overflow: visible !important;
 }
 
 .MafsView > svg {
     /* Chrome/Safari bugfix for LEMS-1906 */
     display: block;
+    overflow: visible; /* <= our change */
 }
 
 .MafsView .movable-line:hover,
@@ -264,3 +266,8 @@
 
     stroke-width: 0.1px;
 }
+
+.MafsView .axis-ticks text {
+    font-size: 14px;
+    font-family: "Mafs-MJXTEX";
+}