@khanacademy/perseus 22.5.1 → 22.6.0

package/dist/index.js

@@ -28758,6 +28758,8 @@ class Graph extends React__namespace.Component {
 
 const defaultGraphConfig = {
   range: [[0, 1], [0, 1]],
+  tickStep: [1, 1],
+  gridStep: [1, 1],
   snapStep: [1, 1],
   markings: "none",
   showTooltips: false,
@@ -28772,6 +28774,7 @@ function useGraphConfig() {
 }
 
 const matrixBuilder = mafs.vec.matrixBuilder;
+
 // When converting vectors, we don't need to translate because a vector
 // is like a pair of x and y distances, which are not bound to specific graph locations.
 function vectorsToPixels(vectors, graphState) {
@@ -29025,7 +29028,7 @@ function Arrowhead(props) {
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "interactive-graph-arrowhead",
-    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
+    transform: `translate(${point[0]} ${point[1]}) rotate(${props.angle})`
   }, /*#__PURE__*/React__namespace.createElement("g", {
     transform: "translate(-1.5)"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -29035,7 +29038,8 @@ function Arrowhead(props) {
       stroke: props.color ?? "inherit"
     },
     strokeLinejoin: "round",
-    strokeLinecap: "round"
+    strokeLinecap: "round",
+    strokeWidth: "2px"
   })));
 }
 
@@ -29072,10 +29076,7 @@ const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
     case isBetween(xAtYExtreme, xMin, xMax):
       return [xAtYExtreme, yExtreme];
     default:
-      // This default case is only reachable if the input is invalid
-      // (initialPoint is outside the graph bounds, or initialPoint and
-      // throughPoint are the same).
-      return [0, 0];
+      return [xExtreme, yExtreme];
   }
 };
 const getLines = points => {
@@ -29115,7 +29116,7 @@ function Vector(props) {
     style
   } = props;
   const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
-  const direction = mafs.vec.sub(tip, tail);
+  const direction = mafs.vec.sub(tipPx, tailPx);
   const angle = calculateAngleInDegrees(direction);
   return /*#__PURE__*/React__namespace.createElement("g", {
     style: {
@@ -29159,7 +29160,9 @@ const LockedLine = props => {
   } else {
     const LineType = kind === "segment" ? mafs.Line.Segment : mafs.Line.ThroughPoints;
     let arrowTip = kind === "segment" ? point2.coord : getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
-    const direction = mafs.vec.sub(point2.coord, point1.coord);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [tailPx, tipPx] = useTransformVectorsToPixels(point2.coord, point1.coord);
+    const direction = mafs.vec.sub(tailPx, tipPx);
     let angle = calculateAngleInDegrees(direction);
     const startArrowHead = kind !== "segment" && /*#__PURE__*/React__namespace.createElement(Arrowhead, {
       angle: angle,
@@ -30184,10 +30187,16 @@ const getLineCoords = _ref3 => {
     range,
     step
   } = _ref3;
-  return (
-    // Return two lines for a linear system, one for a ray or linear
-    graph.coords ?? graph.type === "linear-system" ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
-  );
+  //  Return two lines for a linear system, one for a ray or linear
+  switch (graph.type) {
+    case "linear-system":
+      return defaultLinearCoords.map(points => normalizePoints(range, step, points));
+    case "linear":
+    case "ray":
+      return [normalizePoints(range, step, defaultLinearCoords[0])];
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(graph);
+  }
 };
 const getPolygonCoords = _ref4 => {
   let {
@@ -30281,11 +30290,12 @@ function MovableCircle(props) {
     cy: centerPx[1],
     rx: radiiPx[0] + 3,
     ry: radiiPx[1] + 3
-  }), /*#__PURE__*/React__namespace.createElement(mafs.Circle, {
-    center: center,
-    radius: radius,
-    fillOpacity: 0,
-    color: wonderBlocksTokens.color.blue
+  }), /*#__PURE__*/React__namespace.createElement("ellipse", {
+    className: "circle",
+    cx: centerPx[0],
+    cy: centerPx[1],
+    rx: radiiPx[0],
+    ry: radiiPx[1]
   }), /*#__PURE__*/React__namespace.createElement(DragHandle, {
     center: center
   }));
@@ -30326,6 +30336,260 @@ function crossProduct(as, bs) {
   return result;
 }
 
+// Universal padding for the axis ticks to ensure that the labels
+// have enough space to render without overlapping the tick lines
+const tickPadding = 5;
+const AxisTickLabels = () => {
+  const graphConfig = useGraphConfig();
+  const {
+    tickStep,
+    range
+  } = graphConfig;
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  const yTickStep = tickStep[1];
+  const xTickStep = tickStep[0];
+  const yGridTicks = generateTickLocations$1(yTickStep, yMin, yMax);
+  const xGridTicks = generateTickLocations$1(xTickStep, xMin, xMax);
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: "axis-tick-labels"
+  }, /*#__PURE__*/React__namespace.createElement(YGridAxis, {
+    axisTicks: yGridTicks,
+    graphConfig: graphConfig
+  }), /*#__PURE__*/React__namespace.createElement(XGridAxis, {
+    axisTicks: xGridTicks,
+    graphConfig: graphConfig
+  }));
+};
+
+// Generate the necessary styles and ticks for the y-axis tick labels container
+const YGridAxis = props => {
+  const {
+    axisTicks,
+    graphConfig
+  } = props;
+  const {
+    width,
+    height
+  } = graphConfig;
+
+  // First get the label height by calculating the difference between the first two y-axis labels
+  const yTopPoint = pointToPixel([0, axisTicks[0]], graphConfig);
+  const ySecondPoint = pointToPixel([0, axisTicks[1]], graphConfig);
+  const yLabelHeight = ySecondPoint[1] - yTopPoint[1];
+
+  // When rendering purely positive y-axis labels, we want to adjust the left position
+  // from the lowest calculated tick, as yMin may be negative
+  const yLowestTick = axisTicks[axisTicks.length - 1];
+  const yLeftAdjustment = Math.min(Math.max(yTopPoint[0] - tickPadding, 0), width);
+
+  // We only want to render the 0 label on the y-axis if it is left of the grid
+  const yAxisIsLeftOfGrid = yLeftAdjustment === 0;
+
+  // If the y-axis is right of the graph's viewbox/range,
+  // we want to adjust both the positioning and text alignment
+  const yAxisRightOfGrid = yLeftAdjustment === width;
+
+  // Determine the default spacing for the labels based on whether the y-axis is right of the grid
+  const defaultSpacing = yAxisRightOfGrid ? 0.5 : 0;
+
+  // We also want to adjust the spacing if there are no negative y-axis labels as the extra space is not needed
+  const marginSpacing = yLowestTick >= 0 ? defaultSpacing * 2 : defaultSpacing;
+
+  // Determine the text alignment based on whether the y-axis is right of the grid
+  // We need to cast this as a const as it is used in the inline styles
+  const textAlign = yAxisRightOfGrid ? "left" : "right";
+  const yAxisStyles = {
+    left: `calc(${yLeftAdjustment}px - ${marginSpacing}em)`,
+    top: `calc(${yTopPoint[1]}px - 0.5em)`,
+    height,
+    textAlign,
+    "--y-axis-label-height": yLabelHeight + "px"
+  };
+  const classNames = yAxisRightOfGrid ? "y-axis-tick-labels y-axis-right-of-grid" : "y-axis-tick-labels ";
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: classNames,
+    "data-testid": "y-axis-tick-labels",
+    style: yAxisStyles
+  }, axisTicks.map(label => {
+    return /*#__PURE__*/React__namespace.createElement(AxisTickLabel, {
+      label: label,
+      axis: "y",
+      key: `y-grid-tick-${label}`,
+      graphConfig: graphConfig,
+      axisOutOfBounds: yAxisIsLeftOfGrid
+    });
+  }));
+};
+
+// Generate the necessary styles and ticks for the x-axis tick labels container
+const XGridAxis = props => {
+  const {
+    axisTicks,
+    graphConfig
+  } = props;
+  const {
+    width,
+    height
+  } = graphConfig;
+
+  // Determine label width by calculating the difference between the first two x-axis labels
+  const xFirstPoint = pointToPixel([axisTicks[0], 0], graphConfig);
+  const xSecondPoint = pointToPixel([axisTicks[1], 0], graphConfig);
+  const xLabelWidth = Math.abs(xSecondPoint[0] - xFirstPoint[0]);
+
+  // Determine the top position of the x-axis labels based on
+  // whether the x-axis is above, within, or below the graph
+  const xAxisAboveGraph = xFirstPoint[1] < 0;
+  const xTopAdjustment = xAxisAboveGraph ? 0 : Math.min(xFirstPoint[1] + tickPadding, height);
+
+  // Determine whether the x-axis is outside of the graph's viewbox/range
+  // This is used to conditionally render the 0 label on the x-axis
+  const xAxisOutOfBounds = xTopAdjustment === height || xAxisAboveGraph;
+
+  // Determine the available space to the right of the x-axis labels
+  const availableSpaceRight = width - xFirstPoint[0];
+
+  // Calculate the total combined width of ALL the x-axis labels
+  const axisTicksWidth = axisTicks.length * xLabelWidth;
+
+  // Determine if we need to increase the width of the axis past the graph width
+  const calculatedWidth = axisTicksWidth > width ? axisTicksWidth : width;
+
+  // Determine the right adjustment for the x-axis labels based on the available space
+  // We're adjusting the right as the flex-direction is row-reverse
+  const xRightAdjustment = availableSpaceRight - xLabelWidth / 2;
+  const xAxisStyles = {
+    top: xTopAdjustment,
+    right: xRightAdjustment,
+    width: calculatedWidth,
+    "--x-axis-label-width": xLabelWidth + "px"
+  };
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    className: `x-axis-tick-labels ${xAxisAboveGraph && "x-axis-top-of-grid"}`,
+    "data-testid": "x-axis-tick-labels",
+    style: xAxisStyles
+  }, axisTicks.map(label => {
+    return /*#__PURE__*/React__namespace.createElement(AxisTickLabel, {
+      axis: "x",
+      label: label,
+      key: `x-grid-tick-${label}`,
+      graphConfig: graphConfig,
+      axisOutOfBounds: xAxisOutOfBounds
+    });
+  }));
+};
+
+// Generate the individual tick label elements
+const AxisTickLabel = _ref => {
+  let {
+    label,
+    graphConfig,
+    axisOutOfBounds,
+    axis
+  } = _ref;
+  const {
+    gridStep,
+    tickStep
+  } = graphConfig;
+  // Determine the point on the axis based on the axis type
+  const pointOnAxis = axis === "x" ? [label, 0] : [0, label];
+  const pixelPoint = pointToPixel(pointOnAxis, graphConfig);
+
+  // Remove the negative sign from the label string as it is handled in the data-content attribute
+  const labelString = Math.abs(label).toString();
+
+  // Determine the relevant edge of the graph based on the axis type
+  const graphEdge = axis === "x" ? graphConfig.width : graphConfig.height;
+
+  // Determine the vector index based on the axis type
+  const vectorIndex = axis === "x" ? 0 : 1;
+
+  // Determine whether or not to render the tick label text
+  const shouldShowLabel = showTickLabel({
+    label,
+    axisOutOfBounds,
+    graphEdge,
+    position: pixelPoint[vectorIndex],
+    gridStep: gridStep[vectorIndex],
+    tickStep: tickStep[vectorIndex]
+  });
+
+  // Determine whether or not to render a negative symbol for the tick label
+  // as the negative sign is handled in the data-content attribute in order to
+  // maintain the correct spacing between the labels
+  const dataContent = label < 0 && shouldShowLabel ? "−" : null;
+  return /*#__PURE__*/React__namespace.createElement("span", {
+    className: `${axis}-axis-tick-label`,
+    "data-content": dataContent
+  }, shouldShowLabel && labelString);
+};
+
+// Determine whether or not to show the tick label text
+const showTickLabel = _ref2 => {
+  let {
+    gridStep,
+    tickStep,
+    label,
+    graphEdge,
+    position,
+    axisOutOfBounds
+  } = _ref2;
+  let showLabel = true;
+
+  // We only want to show the initial negative tick labels (e.g. -1) on each
+  // axis if the tickStep > gridStep, to ensure that these labels do not overlap.
+  // e.g. If gridStep = 1 and tickStep = 2, there are 2 grid lines for every 1 tick,
+  // which allows enough room for both these tick labels to render.
+  showLabel = tickStep > gridStep ? true : label !== -tickStep;
+
+  // If the tick label position is greater than the relevant edge of the graph, don't render it
+  if (position <= -graphEdge || position >= graphEdge) {
+    showLabel = false;
+  }
+
+  // If the label is 0, we only want to show it if the axis is to the left of the graph's viewbox/range
+  // otherwise it will overlap with graph axis labels
+  if (label === 0 && !axisOutOfBounds) {
+    showLabel = false;
+  }
+  return showLabel;
+};
+
+// Generate the tick labels for an axis based on the tick step
+function generateTickLocations$1(tickStep, min, max) {
+  const positiveTicks = [];
+  const negativeTicks = [];
+  const ticks = [];
+
+  // Add 0 if it is applicable.
+  // This will be conditionally rendered using showTickLabel.
+  if (min <= 0 && max >= 0) {
+    positiveTicks.push(0);
+  }
+
+  // Add ticks on the positive axis
+  // Start at the first tick after 0 or the minimum value,
+  // taking into account that the graph may be zoomed in on the positive axis
+  let i = Math.max(min, 0) + tickStep;
+  for (i; min < i && i < max; i += tickStep) {
+    positiveTicks.push(i);
+  }
+
+  // Add ticks on the negative axis
+  // Start at the first tick before 0 or the maximum value,
+  // taking into account that the graph may be zoomed in on the negative axis
+  i = Math.min(max, 0) - tickStep;
+  for (i; i > min; i -= tickStep) {
+    negativeTicks.push(i);
+  }
+
+  // Reverse the ticks so that they are in the correct render order
+  positiveTicks.reverse();
+  ticks.push(...positiveTicks, ...negativeTicks);
+  return ticks;
+}
+
 function PointGraph(props) {
   const {
     dispatch
@@ -30353,11 +30617,11 @@ function AxisArrows() {
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
     tip: [0, yMin],
-    angle: 270
+    angle: 90
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
     tip: [0, yMax],
-    angle: 90
+    angle: 270
   }));
 }
 
@@ -30366,62 +30630,88 @@ const tickStyle = {
   stroke: "black",
   strokeWidth: 1
 };
-
-// We only want to show the initial negative tick labels (e.g. -1) on each
-// axis if the tickStep > gridStep, to ensure that these labels do not overlap.
-// e.g. If gridStep = 1 and tickStep = 2, there are 2 grid lines for every 1 tick,
-// which allows enough room for both these tick labels to render.
-const showTickLabel = (gridStep, tickStep, label) => {
-  const showLabel = tickStep > gridStep ? true : label !== -tickStep;
-  return showLabel;
-};
 const YGridTick = _ref => {
   let {
     y,
-    gridStep,
-    tickStep
+    graphInfo
   } = _ref;
-  const pointOnAxis = [0, y];
+  let xPointOnAxis = 0;
+
+  // If the graph is zoomed in, we want to make sure the ticks are still visible
+  // even if they are outside the graph's range.
+  if (graphInfo.range[0][0] > 0) {
+    // If the graph is on the positive side of the x-axis, lock the ticks to the left side of the graph
+    xPointOnAxis = graphInfo.range[0][0];
+  }
+  if (graphInfo.range[0][1] < 0) {
+    // If the graph is on the negative side of the x-axis, lock the ticks to the right side of the graph
+    xPointOnAxis = graphInfo.range[0][1];
+  }
+  const pointOnAxis = [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;
+
+  // Position of the end of the tick
+  const x2 = xPosition + tickSize / 2;
+  const y2 = yPosition;
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "y-axis-ticks"
   }, /*#__PURE__*/React__namespace.createElement("line", {
-    x1: xPosition - tickSize / 2,
-    y1: yPosition,
-    x2: xPosition + tickSize / 2,
-    y2: yPosition,
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
     style: tickStyle
-  }), showTickLabel(gridStep, tickStep, y) && /*#__PURE__*/React__namespace.createElement("text", {
-    height: 20,
-    width: 50,
-    textAnchor: "end",
-    x: xPosition - 10,
-    y: yPosition + 5
-  }, y.toString()));
+  }));
 };
 const XGridTick = _ref2 => {
   let {
     x,
-    gridStep,
-    tickStep
+    graphInfo
   } = _ref2;
-  const pointOnAxis = [x, 0];
+  let yPointOnAxis = 0;
+  // If the graph is zoomed in, we want to make sure the ticks are still visible
+  // even if they are outside the graph's range.
+  if (graphInfo.range[1][0] > 0) {
+    // If the graph is on the positive side of the y-axis, lock the ticks to the top of the graph
+    yPointOnAxis = graphInfo.range[1][0];
+  }
+  if (graphInfo.range[1][1] < 0) {
+    // If the graph is on the negative side of the x-axis, lock the ticks to the bottom of the graph
+    yPointOnAxis = graphInfo.range[1][1];
+  }
+  const pointOnAxis = [x, yPointOnAxis];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
+
+  // If the tick is on the edge of the graph's range, don't render it
+  if (xPosition === -graphInfo.width / 2 || xPosition === graphInfo.width) {
+    return null;
+  }
+
+  // Position of the start of the tick
+  const x1 = xPosition;
+  const y1 = yPosition + tickSize / 2;
+
+  // Position of the end of the tick
+  const x2 = xPosition;
+  const y2 = yPosition - tickSize / 2;
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "x-axis-ticks"
   }, /*#__PURE__*/React__namespace.createElement("line", {
-    x1: xPosition,
-    y1: yPosition + tickSize / 2,
-    x2: xPosition,
-    y2: yPosition - tickSize / 2,
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
     style: tickStyle
-  }), showTickLabel(gridStep, tickStep, x) && /*#__PURE__*/React__namespace.createElement("text", {
-    height: 20,
-    width: 50,
-    textAnchor: "middle",
-    x: xPosition,
-    y: yPosition + 25
-  }, x.toString()));
+  }));
 };
 function generateTickLocations(tickStep, min, max) {
   const ticks = [];
@@ -30432,17 +30722,29 @@ function generateTickLocations(tickStep, min, max) {
   }
 
   // Add ticks in the negative direction
-  for (let i = 0 - tickStep; i > min; i -= tickStep) {
+  // Start at the first tick after 0 or the maximum value if it is negative
+  let i = Math.min(max, 0) - tickStep;
+  for (i; i > min; i -= tickStep) {
     ticks.push(i);
   }
   return ticks;
 }
-const AxisTicks = props => {
-  const range = props.range;
+const AxisTicks = () => {
+  const {
+    tickStep,
+    range,
+    width,
+    height
+  } = useGraphConfig();
+  const graphInfo = {
+    range,
+    width,
+    height
+  };
   const [xMin, xMax] = range[0];
   const [yMin, yMax] = range[1];
-  const yTickStep = props.tickStep[1];
-  const xTickStep = props.tickStep[0];
+  const yTickStep = tickStep[1];
+  const xTickStep = tickStep[0];
   const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
   return /*#__PURE__*/React__namespace.createElement("g", {
@@ -30451,15 +30753,13 @@ const AxisTicks = props => {
     return /*#__PURE__*/React__namespace.createElement(YGridTick, {
       y: y,
       key: `y-grid-tick-${y}`,
-      gridStep: props.gridStep[0],
-      tickStep: yTickStep
+      graphInfo: graphInfo
     });
   }), xGridTicks.map(x => {
     return /*#__PURE__*/React__namespace.createElement(XGridTick, {
       x: x,
       key: `x-grid-tick-${x}`,
-      gridStep: props.gridStep[1],
-      tickStep: xTickStep
+      graphInfo: graphInfo
     });
   }));
 };
@@ -30487,11 +30787,7 @@ const Grid = props => {
     yAxis: axisOptions(props, 1)
   }),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
-  props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, {
-    range: props.range,
-    tickStep: props.tickStep,
-    gridStep: props.gridStep
-  }), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)));
+  props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)));
 };
 
 // Displays a stylized open eye: lint warnings are visible
@@ -31557,11 +31853,14 @@ const MafsGraph = props => {
     labels
   } = props;
   const [width, height] = props.box;
+  const tickStep = props.step;
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
       snapStep: state.snapStep,
       markings: props.markings,
+      tickStep: tickStep,
+      gridStep: props.gridStep,
       showTooltips: !!props.showTooltips,
       graphDimensionsInPixels: props.box,
       width,
@@ -31575,7 +31874,9 @@ const MafsGraph = props => {
       height,
       position: "relative",
       padding: "25px 25px 0 0",
-      boxSizing: "content-box"
+      boxSizing: "content-box",
+      marginLeft: "20px",
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
@@ -31586,7 +31887,7 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(AxisLabels, null), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null), /*#__PURE__*/React__namespace.createElement(AxisTickLabels, null)), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: state.range[0],
@@ -43701,7 +44002,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "22.5.1";
+const libVersion = "22.6.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {