@khanacademy/perseus 22.0.2 → 22.1.0

package/dist/components/info-tip/info-tip.d.ts

@@ -1,14 +1,6 @@
 import * as React from "react";
 type Props = {
-    children: React.ReactNode;
+    children: string | React.ReactElement | React.ReactElement[];
 };
-type State = {
-    hover: boolean;
-};
-declare class InfoTip extends React.Component<Props, State> {
-    state: State;
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
-    render(): React.ReactNode;
-}
+export declare const InfoTip: (props: Props) => JSX.Element;
 export default InfoTip;

package/dist/es/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/es/index.js

@@ -29,10 +29,10 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { Line as Line$3, Point as Point$2, useTransformContext, vec, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
+import { vec, Line as Line$3, Point as Point$2, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
+import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
-import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import createReactClass from 'create-react-class';
 import Switch from '@khanacademy/wonder-blocks-switch';
 import Pill from '@khanacademy/wonder-blocks-pill';
@@ -28477,6 +28477,89 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+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__*/createContext(defaultGraphConfig);
+function useGraphConfig() {
+  return React__default.useContext(GraphConfigContext);
+}
+
+const matrixBuilder = 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, translation = [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 => 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 = (...vectors) => {
+  const graphState = useGraphConfig();
+  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] = vec.add(pointToPixel(yAxisLabelLocation, graphInfo), [0, -24]);
+  const {
+    TeX
+  } = getDependencies();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      position: "absolute",
+      left: x1,
+      top: y1,
+      fontSize: "14px",
+      transform: "translate(7px, -50%)"
+    }
+  }, /*#__PURE__*/React__default.createElement(TeX, null, xAxisLabelText)), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      position: "absolute",
+      left: x2,
+      top: y2,
+      fontSize: "14px",
+      transform: "translate(-50%, 0px)"
+    }
+  }, /*#__PURE__*/React__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
 
@@ -28768,26 +28851,17 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
-const useTransform = (...points) => {
-  const {
-    viewTransform,
-    userTransform
-  } = useTransformContext();
-  const transformToPx = vec.matrixMult(viewTransform, userTransform);
-  const transformedPoints = points.map(point => 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;
@@ -28891,7 +28965,7 @@ function scaleCommandBy(scaleFactor) {
 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) {
   var _props$color;
-  const [point] = useTransform([props.x, props.y]);
+  const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React.createElement("g", {
     transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
   }, /*#__PURE__*/React.createElement("g", {
@@ -28913,7 +28987,7 @@ function Vector(props) {
     tip,
     color
   } = props;
-  const [tailPx, tipPx] = useTransform(tail, tip);
+  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
   const direction = vec.sub(tip, tail);
   return /*#__PURE__*/React.createElement("g", {
     style: {
@@ -28924,8 +28998,7 @@ function Vector(props) {
     start: tailPx,
     end: tipPx
   }), /*#__PURE__*/React.createElement(Arrowhead, {
-    x: tip[0],
-    y: tip[1],
+    tip: tip,
     angle: angleDegrees(direction)
   }));
 }
@@ -28943,12 +29016,16 @@ const MovableLine = props => {
     stroke = defaultStroke
   } = props;
   const midpoint = 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 = useRef(null);
   const {
@@ -29005,16 +29082,24 @@ const MovableLine = props => {
     color: stroke
   }));
 };
-
-const defaultGraphConfig = {
-  range: [[0, 1], [0, 1]],
-  snapStep: [1, 1],
-  markings: "none",
-  showTooltips: false
-};
-const GraphConfigContext = /*#__PURE__*/createContext(defaultGraphConfig);
-function useGraphConfig() {
-  return React__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
@@ -29047,13 +29132,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.createElement("g", null, /*#__PURE__*/React.createElement("line", {
     x1: verticalStartX,
@@ -29375,7 +29460,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++);
 
@@ -29498,23 +29583,19 @@ function AxisArrows() {
   const axisColor = "var(--mafs-fg)";
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Arrowhead, {
     color: axisColor,
-    x: xMin,
-    y: 0,
+    tip: [xMin, 0],
     angle: 180
   }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     color: axisColor,
-    x: xMax,
-    y: 0,
+    tip: [xMax, 0],
     angle: 0
   }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     color: axisColor,
-    x: 0,
-    y: yMin,
+    tip: [0, yMin],
     angle: 270
   }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     color: axisColor,
-    x: 0,
-    y: yMax,
+    tip: [0, yMax],
     angle: 90
   }));
 }
@@ -29539,7 +29620,7 @@ const YGridTick = ({
   tickStep
 }) => {
   const pointOnAxis = [0, y];
-  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
   return /*#__PURE__*/React.createElement("g", {
     className: "y-axis-ticks"
   }, /*#__PURE__*/React.createElement("line", {
@@ -29562,7 +29643,7 @@ const XGridTick = ({
   tickStep
 }) => {
   const pointOnAxis = [x, 0];
-  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
   return /*#__PURE__*/React.createElement("g", {
     className: "x-axis-ticks"
   }, /*#__PURE__*/React.createElement("line", {
@@ -29783,97 +29864,26 @@ const styles$k = 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.createElement(Tooltip$1, {
+    content: /*#__PURE__*/React.createElement(Body, {
+      style: styles$j.body
+    }, props.children),
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(PhosphorIcon, {
+    size: "small",
+    icon: questionIcon,
+    style: styles$j.spacingLeft
+  }));
 };
 const styles$j = StyleSheet.create({
-  infoTip: {
-    display: "inline-block",
-    marginLeft: "5px",
-    position: "relative"
+  spacingLeft: {
+    marginInlineStart: 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": _extends({}, triangleBeforeAfter, {
-      borderRight: "9px solid #bbb",
-      right: "0"
-    }),
-    ":after": _extends({}, 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: spacing.medium_16
   }
 });
-class InfoTip$1 extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      hover: false
-    };
-    this.handleMouseEnter = () => {
-      this.setState({
-        hover: true
-      });
-    };
-    this.handleMouseLeave = () => {
-      this.setState({
-        hover: false
-      });
-    };
-  }
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.infoTip)
-    }, /*#__PURE__*/React.createElement(View, {
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave
-    }, /*#__PURE__*/React.createElement(PhosphorIcon, {
-      size: "small",
-      icon: questionIcon
-    })), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.infoTipContainer),
-      style: {
-        display: this.state.hover ? "block" : "none"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.infoTipTriangle)
-    }), /*#__PURE__*/React.createElement("div", {
-      className: css(styles$j.verticalShadow, styles$j.infoTipContentContainer)
-    }, this.props.children)));
-  }
-}
 
 /**
  * A wrapper around info-tip/info-tip.jsx that can be rendered on the
@@ -30713,9 +30723,7 @@ const getDefaultPoints = ({
 // Instead of updating to v5, using generic type to relate input and output types.
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
-    return {
-      type: initialGraph.type
-    };
+    return _extends({}, initialGraph);
   }
   if (initialGraph.type === "linear-system" && state.type === "linear-system") {
     return _extends({}, initialGraph, {
@@ -30874,7 +30882,8 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
 const MafsGraph = props => {
   const {
     state,
-    dispatch
+    dispatch,
+    labels
   } = props;
   const [width, height] = props.box;
   const prevState = useRef(state);
@@ -30903,7 +30912,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.createElement(View, {
     style: {
@@ -30922,7 +30935,7 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, /*#__PURE__*/React.createElement(Mafs, {
+  }, props.markings === "graph" && /*#__PURE__*/React.createElement(AxisLabels, null), /*#__PURE__*/React.createElement(Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: props.range[0],
@@ -32104,8 +32117,6 @@ class LegacyInteractiveGraph extends React.Component {
         graph: graph
       });
     };
-    this.getUserInput = () => InteractiveGraph.getUserInputFromProps(this.props);
-    this.simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
     this.focus = $.noop;
   }
   // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
@@ -32157,6 +32168,12 @@ class LegacyInteractiveGraph extends React.Component {
   areSegmentGraphsEqual(prevGraph, currentGraph) {
     return prevGraph.numSegments !== currentGraph.numSegments;
   }
+  getUserInput() {
+    return InteractiveGraph.getUserInputFromProps(this.props);
+  }
+  simpleValidate(rubric) {
+    return InteractiveGraph.validate(this.getUserInput(), rubric, this);
+  }
   render() {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
@@ -32238,10 +32255,10 @@ class InteractiveGraph extends React.Component {
       }
       throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
     };
-    this.simpleValidate = rubric => {
-      var _this$getUserInput;
-      return InteractiveGraph.validate((_this$getUserInput = this.getUserInput) == null ? void 0 : _this$getUserInput.call(this), rubric, this);
-    };
+  }
+  simpleValidate(rubric) {
+    var _this$getUserInput;
+    return InteractiveGraph.validate((_this$getUserInput = this.getUserInput) == null ? void 0 : _this$getUserInput.call(this), rubric, this);
   }
   render() {
     var _this$props$apiOption;
@@ -43037,7 +43054,7 @@ const init = function init(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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {