@khanacademy/perseus 22.0.2 → 22.1.0

package/dist/index.css

@@ -2470,7 +2470,10 @@ img.zoom-img {
   padding-top: 5px;
 }
 .framework-perseus .svg-image {
-  display: inline-block;
+  display: block;
+  margin: 0 auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 .framework-perseus .unresponsive-svg-image,
 .framework-perseus .perseus-rendered-radio .unresponsive-svg-image {
@@ -2750,6 +2753,16 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
 .perseus-image-editor .graph-settings {
   margin-top: 5px;
 }
+.perseus-image-widget {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+.perseus-hint-renderer .perseus-image-widget {
+  margin-inline-start: 0;
+}
+.perseus-hint-renderer .svg-image {
+  margin-inline-start: 0;
+}
 .perseus-widget-interactive-graph {
   box-sizing: content-box;
   padding: 25px 25px 0 0;

package/dist/index.js

@@ -32,8 +32,8 @@ var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
-var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var createReactClass = require('create-react-class');
 var Switch = require('@khanacademy/wonder-blocks-switch');
 var Pill = require('@khanacademy/wonder-blocks-pill');
@@ -28761,6 +28761,93 @@ class Graph extends React__namespace.Component {
   }
 }
 
+const defaultGraphConfig = {
+  range: [[0, 1], [0, 1]],
+  snapStep: [1, 1],
+  markings: "none",
+  showTooltips: false,
+  graphDimensionsInPixels: [1, 1],
+  width: 0,
+  height: 0,
+  labels: []
+};
+const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
+function useGraphConfig() {
+  return React__default["default"].useContext(GraphConfigContext);
+}
+
+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) {
+  let translation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
+  const {
+    range,
+    width,
+    height
+  } = graphState;
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const transformToPx = matrixBuilder().translate(...translation).scale(width / (xMax - xMin), -height / (yMax - yMin)).get();
+  return vectors.map(p => mafs.vec.transform(p, transformToPx));
+}
+
+// When converting points, we translate so the pixel point ends up in the right location.
+// This is because points are specific locations on graphs, unlike vectors.
+function pointToPixel(point, graphState) {
+  const [[xMin], [, yMax]] = graphState.range;
+  const [a, b] = [-xMin, -yMax];
+  return vectorsToPixels([point], graphState, [a, b])[0];
+}
+const useTransformVectorsToPixels = function () {
+  const graphState = useGraphConfig();
+  for (var _len = arguments.length, vectors = new Array(_len), _key = 0; _key < _len; _key++) {
+    vectors[_key] = arguments[_key];
+  }
+  return vectorsToPixels(vectors, graphState);
+};
+
+function AxisLabels() {
+  const {
+    range,
+    labels,
+    width,
+    height
+  } = useGraphConfig();
+  const yAxisLabelLocation = [0, range[1][1]];
+  const xAxisLabelLocation = [range[0][1], 0];
+  const [xAxisLabelText, yAxisLabelText] = labels;
+  const graphInfo = {
+    range,
+    width,
+    height
+  };
+  const [x1, y1] = pointToPixel(xAxisLabelLocation, graphInfo);
+  // The default location for the y-axis-label is at the maximum y point
+  // This is just underneath the tick line for that point. The -24 moves the
+  // label up one grid square, so it sits on top of the graph
+  const [x2, y2] = mafs.vec.add(pointToPixel(yAxisLabelLocation, graphInfo), [0, -24]);
+  const {
+    TeX
+  } = getDependencies();
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      left: x1,
+      top: y1,
+      fontSize: "14px",
+      transform: "translate(7px, -50%)"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TeX, null, xAxisLabelText)), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      position: "absolute",
+      left: x2,
+      top: y2,
+      fontSize: "14px",
+      transform: "translate(-50%, 0px)"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TeX, null, yAxisLabelText)));
+}
+
 // TODO(FEI-4010): Remove `Perseus` prefix for all types here
 // TODO(FEI-4011): Use types generated by https://github.com/jaredly/generate-perseus-flowtypes
 
@@ -29052,29 +29139,17 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
-const useTransform = function () {
-  const {
-    viewTransform,
-    userTransform
-  } = mafs.useTransformContext();
-  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
-  for (var _len = arguments.length, points = new Array(_len), _key = 0; _key < _len; _key++) {
-    points[_key] = arguments[_key];
-  }
-  const transformedPoints = points.map(point => mafs.vec.transform(point, transformToPx));
-  return transformedPoints;
-};
-
 /**
- * Given two points, find the tips that extends through the points to the edge of the range.
- * @param collinearPoint - The point that the line passes through. Needed to establish slope.
- * @param extendFrom - The point that the line extends from to the edge of the graph.
+ * Given a ray and a rectangular box, find the point where the ray intersects
+ * the edge of the box. Assumes the `initialPoint` is inside the box.
+ * @param initialPoint - The starting point of the ray.
+ * @param throughPoint - A point that the ray passes through. Must be different from initialPoint.
+ * @param box - The box with which to intersect the ray, in the form [[xMin, xMax], [yMin, yMax]]
  */
-const getRayIntersectionCoords = (collinearPoint, extendFrom, range) => {
-  // edges of the graph
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const [aX, aY] = collinearPoint;
-  const [bX, bY] = extendFrom;
+const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
+  const [[xMin, xMax], [yMin, yMax]] = box;
+  const [aX, aY] = throughPoint;
+  const [bX, bY] = initialPoint;
   const yDiff = bY - aY;
   const xDiff = bX - aX;
   const slope = yDiff / xDiff;
@@ -29176,7 +29251,7 @@ function scaleCommandBy(scaleFactor) {
 // don't want that.
 const arrowPath = pathBuilder().move(-3, 4).curve(-2.75, 2.5, 0, 0.25, 0.75, 0).curve(0, -0.25, -2.75, -2.5, -3, -4).scale(1.4).build();
 function Arrowhead(props) {
-  const [point] = useTransform([props.x, props.y]);
+  const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React__namespace.createElement("g", {
     transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
   }, /*#__PURE__*/React__namespace.createElement("g", {
@@ -29198,7 +29273,7 @@ function Vector(props) {
     tip,
     color
   } = props;
-  const [tailPx, tipPx] = useTransform(tail, tip);
+  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
   const direction = mafs.vec.sub(tip, tail);
   return /*#__PURE__*/React__namespace.createElement("g", {
     style: {
@@ -29209,8 +29284,7 @@ function Vector(props) {
     start: tailPx,
     end: tipPx
   }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
-    x: tip[0],
-    y: tip[1],
+    tip: tip,
     angle: angleDegrees(direction)
   }));
 }
@@ -29229,12 +29303,16 @@ const MovableLine = props => {
     stroke = defaultStroke
   } = props;
   const midpoint = mafs.vec.midpoint(start, end);
-  const [startPtPx, endPtPx] = useTransform(start, end);
+  const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
+  const {
+    graphDimensionsInPixels
+  } = useGraphConfig();
   let startExtend = undefined;
   let endExtend = undefined;
   if (extend) {
-    startExtend = extend.start ? getRayIntersectionCoords(end, start, extend.range) : undefined;
-    endExtend = extend.end ? getRayIntersectionCoords(start, end, extend.range) : undefined;
+    const trimmedRange = trimRange(extend.range, graphDimensionsInPixels);
+    startExtend = extend.start ? getIntersectionOfRayWithBox(start, end, trimmedRange) : undefined;
+    endExtend = extend.end ? getIntersectionOfRayWithBox(end, start, trimmedRange) : undefined;
   }
   const line = React.useRef(null);
   const {
@@ -29291,16 +29369,24 @@ const MovableLine = props => {
     color: stroke
   }));
 };
-
-const defaultGraphConfig = {
-  range: [[0, 1], [0, 1]],
-  snapStep: [1, 1],
-  markings: "none",
-  showTooltips: false
-};
-const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
-function useGraphConfig() {
-  return React__default["default"].useContext(GraphConfigContext);
+function trimRange(range, graphDimensionsInPixels) {
+  const pixelsToTrim = 4;
+  const [xRange, yRange] = range;
+  const [pixelsWide, pixelsTall] = graphDimensionsInPixels;
+  const graphUnitsPerPixelX = size(xRange) / pixelsWide;
+  const graphUnitsPerPixelY = size(yRange) / pixelsTall;
+  const graphUnitsToTrimX = pixelsToTrim * graphUnitsPerPixelX;
+  const graphUnitsToTrimY = pixelsToTrim * graphUnitsPerPixelY;
+  return [trim(xRange, graphUnitsToTrimX), trim(yRange, graphUnitsToTrimY)];
+}
+function trim(interval, amount) {
+  if (size(interval) < amount * 2) {
+    return [0, 0];
+  }
+  return [interval[0] + amount, interval[1] - amount];
+}
+function size(interval) {
+  return interval[1] - interval[0];
 }
 
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
@@ -29335,13 +29421,13 @@ const StyledMovablePoint = props => {
     constrain: p => snap(snapStep, p)
   });
   const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""}`;
-  const [[x, y]] = useTransform(point);
+  const [[x, y]] = useTransformVectorsToPixels(point);
   const [xMin, xMax] = range[0];
   const [yMin, yMax] = range[1];
-  const [[verticalStartX]] = useTransform([xMin, 0]);
-  const [[verticalEndX]] = useTransform([xMax, 0]);
-  const [[_, horizontalStartY]] = useTransform([0, yMin]);
-  const [[__, horizontalEndY]] = useTransform([0, yMax]);
+  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
+  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
+  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
   const showHairlines = dragging && markings !== "none";
   const hairlines = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
     x1: verticalStartX,
@@ -29669,7 +29755,7 @@ const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
  */
 const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
   // Create a ray from the midpoint (inside angle) to the edge of the range
-  const rangeIntersectionPoint = getRayIntersectionCoords(midpoint, vertex, range);
+  const rangeIntersectionPoint = getIntersectionOfRayWithBox(vertex, midpoint, range);
   let lineIntersectionCount = 0;
   polygonLines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
 
@@ -29794,23 +29880,19 @@ function AxisArrows() {
   const axisColor = "var(--mafs-fg)";
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: xMin,
-    y: 0,
+    tip: [xMin, 0],
     angle: 180
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: xMax,
-    y: 0,
+    tip: [xMax, 0],
     angle: 0
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: 0,
-    y: yMin,
+    tip: [0, yMin],
     angle: 270
   }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     color: axisColor,
-    x: 0,
-    y: yMax,
+    tip: [0, yMax],
     angle: 90
   }));
 }
@@ -29836,7 +29918,7 @@ const YGridTick = _ref => {
     tickStep
   } = _ref;
   const pointOnAxis = [0, y];
-  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "y-axis-ticks"
   }, /*#__PURE__*/React__namespace.createElement("line", {
@@ -29860,7 +29942,7 @@ const XGridTick = _ref2 => {
     tickStep
   } = _ref2;
   const pointOnAxis = [x, 0];
-  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: "x-axis-ticks"
   }, /*#__PURE__*/React__namespace.createElement("line", {
@@ -30082,96 +30164,26 @@ const styles$k = aphrodite.StyleSheet.create({
   }
 });
 
-const colors$1 = {
-  grayLight: "#aaa",
-  basicBorderColor: "#ccc",
-  white: "#fff"
-};
-const triangleBeforeAfter = {
-  borderBottom: "9px solid transparent",
-  borderTop: "9px solid transparent",
-  content: '" "',
-  height: "0",
-  position: "absolute",
-  top: "0",
-  width: "0"
+const InfoTip$1 = props => {
+  return /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+    content: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.Body, {
+      style: styles$j.body
+    }, props.children),
+    placement: "right"
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+    size: "small",
+    icon: questionIcon__default["default"],
+    style: styles$j.spacingLeft
+  }));
 };
 const styles$j = aphrodite.StyleSheet.create({
-  infoTip: {
-    display: "inline-block",
-    marginLeft: "5px",
-    position: "relative"
+  spacingLeft: {
+    marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
   },
-  infoTipContainer: {
-    position: "absolute",
-    top: "-12px",
-    left: "22px",
-    zIndex: 1000
-  },
-  infoTipTriangle: {
-    height: "10px",
-    left: "0",
-    position: "absolute",
-    top: "8px",
-    width: "0",
-    zIndex: 1,
-    ":before": {
-      ...triangleBeforeAfter,
-      borderRight: "9px solid #bbb",
-      right: "0"
-    },
-    ":after": {
-      ...triangleBeforeAfter,
-      borderRight: `9px solid ${colors$1.white}`,
-      right: "-1px"
-    }
-  },
-  verticalShadow: {
-    border: `1px solid ${colors$1.basicBorderColor}`,
-    boxShadow: `0 1px 3px ${colors$1.basicBorderColor}`,
-    borderBottom: `1px solid ${colors$1.grayLight}`
-  },
-  infoTipContentContainer: {
-    background: colors$1.white,
-    padding: "5px 10px",
-    width: "240px"
+  body: {
+    padding: wonderBlocksTokens.spacing.medium_16
   }
 });
-class InfoTip$1 extends React__namespace.Component {
-  state = {
-    hover: false
-  };
-  handleMouseEnter = () => {
-    this.setState({
-      hover: true
-    });
-  };
-  handleMouseLeave = () => {
-    this.setState({
-      hover: false
-    });
-  };
-  render() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.infoTip)
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-      size: "small",
-      icon: questionIcon__default["default"]
-    })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.infoTipContainer),
-      style: {
-        display: this.state.hover ? "block" : "none"
-      }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.infoTipTriangle)
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$j.verticalShadow, styles$j.infoTipContentContainer)
-    }, this.props.children)));
-  }
-}
 
 /**
  * A wrapper around info-tip/info-tip.jsx that can be rendered on the
@@ -31028,7 +31040,7 @@ const getDefaultPoints = _ref => {
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return {
-      type: initialGraph.type
+      ...initialGraph
     };
   }
   if (initialGraph.type === "linear-system" && state.type === "linear-system") {
@@ -31195,7 +31207,8 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
 const MafsGraph = props => {
   const {
     state,
-    dispatch
+    dispatch,
+    labels
   } = props;
   const [width, height] = props.box;
   const prevState = React.useRef(state);
@@ -31224,7 +31237,11 @@ const MafsGraph = props => {
       range: state.range,
       snapStep: state.snapStep,
       markings: props.markings,
-      showTooltips: !!props.showTooltips
+      showTooltips: !!props.showTooltips,
+      graphDimensionsInPixels: props.box,
+      width,
+      height,
+      labels
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -31243,7 +31260,7 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+  }, props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(AxisLabels, null), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: props.range[0],
@@ -32470,8 +32487,12 @@ class LegacyInteractiveGraph extends React__namespace.Component {
       graph: graph
     });
   };
-  getUserInput = () => InteractiveGraph.getUserInputFromProps(this.props);
-  simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
+  getUserInput() {
+    return InteractiveGraph.getUserInputFromProps(this.props);
+  }
+  simpleValidate(rubric) {
+    return InteractiveGraph.validate(this.getUserInput(), rubric, this);
+  }
   focus = $__default["default"].noop;
   render() {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
@@ -32550,7 +32571,9 @@ class InteractiveGraph extends React__namespace.Component {
     }
     throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
   };
-  simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
+  simpleValidate(rubric) {
+    return InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
+  }
   render() {
     // Mafs shim
     if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
@@ -43351,7 +43374,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.0.2";
+const libVersion = "22.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {