@khanacademy/perseus 22.1.0 → 22.3.0

package/dist/index.css

@@ -1864,8 +1864,7 @@ body.mobile ul.inequalities-one-line-radios > li {
   .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
     color: #3b3e40;
   }
-  .framework-perseus.perseus-mobile .katex,
-  .framework-perseus.perseus-mobile mjx-container {
+  .framework-perseus.perseus-mobile :is(.katex, mjx-container):not(.mafs-graph *) {
     font-size: 21px;
     line-height: 1.2;
     color: #21242c;
@@ -2007,8 +2006,7 @@ body.mobile ul.inequalities-one-line-radios > li {
   .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
     color: #3b3e40;
   }
-  .framework-perseus.perseus-mobile .katex,
-  .framework-perseus.perseus-mobile mjx-container {
+  .framework-perseus.perseus-mobile :is(.katex, mjx-container):not(.mafs-graph *) {
     font-size: 23px;
     line-height: 1.3;
     color: #21242c;
@@ -2150,8 +2148,7 @@ body.mobile ul.inequalities-one-line-radios > li {
   .framework-perseus.perseus-mobile .perseus-image-caption.has-title .paragraph .paragraph strong:first-child {
     color: #3b3e40;
   }
-  .framework-perseus.perseus-mobile .katex,
-  .framework-perseus.perseus-mobile mjx-container {
+  .framework-perseus.perseus-mobile :is(.katex, mjx-container):not(.mafs-graph *) {
     font-size: 25px;
     line-height: 1.2;
     color: #21242c;
@@ -4172,6 +4169,7 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 
   --mafs-origin-color: var(--mafs-fg);
   --mafs-line-color: #555;
+  --mafs-line-stroke-dash-style: 4, 3;
   --grid-line-subdivision-color: #222;
 
   --mafs-red: #f11d0e;

package/dist/index.js

@@ -28952,19 +28952,170 @@ const ItemExtras = [
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 const lockedFigureColors = {
-  blue: "#3D7586",
   green: "#447A53",
-  gray: "#5D5F66",
   grayH: "#3B3D45",
-  grayI: "#21242C",
   purple: "#594094",
-  purpleD: "#8351E8",
   pink: "#B25071",
-  orange: "#946700",
   red: "#D92916"
 };
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
+function pathBuilder() {
+  return new PathBuilder();
+}
+class PathBuilder {
+  path = [];
+  scaleFactor = 1;
+  build() {
+    return this.path.map(scaleCommandBy(this.scaleFactor)).map(commandToString).join("");
+  }
+
+  // add a move (M) command to the path
+  move(x, y) {
+    this.path.push({
+      action: "M",
+      coords: [x, y]
+    });
+    return this;
+  }
+
+  // add a curve (C) command to the path
+  curve(control1X, control1Y, control2X, control2Y, endX, endY) {
+    this.path.push({
+      action: "C",
+      coords: [control1X, control1Y, control2X, control2Y, endX, endY]
+    });
+    return this;
+  }
+
+  // Scale all coordinates of the path by a factor
+  scale(factor) {
+    this.scaleFactor *= factor;
+    return this;
+  }
+}
+function commandToString(command) {
+  return `${command.action}${command.coords.join(" ")}`;
+}
+function scaleCommandBy(scaleFactor) {
+  return command => ({
+    ...command,
+    coords: command.coords.map(c => c * scaleFactor)
+  });
+}
+
+// We use the pathBuilder here to scale up the SVG path coordinates used
+// elsewhere for arrowheads. We scale in the path itself instead of using a CSS
+// transform because a transform would also scale up the stroke weight, and we
+// 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] = useTransformVectorsToPixels(props.tip);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(-1.5)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: arrowPath,
+    fill: "none",
+    style: {
+      stroke: props.color ?? "inherit"
+    },
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  })));
+}
+
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style,
+    className,
+    testId
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style,
+    className: className,
+    "data-testid": testId
+  });
+}
+
+function Vector(props) {
+  const {
+    tail,
+    tip,
+    color,
+    style
+  } = props;
+  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
+  const direction = mafs.vec.sub(tip, tail);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      stroke: color,
+      strokeWidth: 2
+    }
+  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: tailPx,
+    end: tipPx,
+    style: style
+  }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
+    tip: tip,
+    angle: angleDegrees(direction)
+  }));
+}
+function angleDegrees(_ref) {
+  let [x, y] = _ref;
+  return Math.atan2(y, x) * 180 / Math.PI;
+}
+
+/**
+ * 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 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;
+  const yAtXMin = slope * (xMin - aX) + aY;
+  const yAtXMax = slope * (xMax - aX) + aY;
+  const xAtYMin = (yMin - aY) / slope + aX;
+  const xAtYMax = (yMax - aY) / slope + aX;
+
+  // clock analogy to describe quadrants
+  switch (true) {
+    // 12 o'clock to 2:59
+    case yDiff > 0 && xDiff >= 0:
+      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
+    // 3 o'clock to 5:59
+    case yDiff <= 0 && xDiff > 0:
+      // xAtYMin evaluates to -Infinity here, so we use absolute value
+      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
+    // 9 o'clock to 11:59
+    case yDiff >= 0 && xDiff < 0:
+      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
+    // 6 o'clock to 8:59
+    case yDiff < 0 && xDiff <= 0:
+      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
+    default:
+      return [xMax, yAtXMax];
+  }
+};
+const getLines = points => points.map((point, i) => {
+  const next = points[(i + 1) % points.length];
+  return [point, next];
+});
+
 const LockedLine = props => {
   const {
     color,
@@ -28972,11 +29123,27 @@ const LockedLine = props => {
     kind,
     points,
     showStartPoint,
-    showEndPoint
+    showEndPoint,
+    range
   } = props;
   const [point1, point2] = points;
   let line;
-  if (kind === "line" || kind === "segment") {
+  if (kind === "ray") {
+    // Rays extend to the end of the graph in one direction.
+    const endExtend = getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    line = /*#__PURE__*/React__namespace.createElement(Vector, {
+      tail: point1.coord,
+      tip: endExtend,
+      color: lockedFigureColors[color],
+      style: {
+        strokeDasharray: lineStyle === "dashed" ?
+        // TODO(lems-1930): Uncomment this line when the
+        // dashed style is updated in Mafs.
+        // ? "var(--mafs-line-stroke-dash-style)"
+        "4, 3" : undefined
+      }
+    });
+  } else {
     const LineType = kind === "segment" ? mafs.Line.Segment : mafs.Line.ThroughPoints;
     line = /*#__PURE__*/React__namespace.createElement(LineType, {
       point1: point1.coord,
@@ -28984,12 +29151,9 @@ const LockedLine = props => {
       color: lockedFigureColors[color],
       style: lineStyle
     });
-  } else {
-    // TODO(LEMS-1928): Implement rays
-    return null;
   }
   return /*#__PURE__*/React__namespace.createElement("g", {
-    className: "locked-line"
+    className: kind === "ray" ? "locked-ray" : "locked-line"
   }, line, showStartPoint && /*#__PURE__*/React__namespace.createElement(mafs.Point, {
     x: point1.coord[0],
     y: point1.coord[1],
@@ -29038,14 +29202,16 @@ const GraphLockedLayer = props => {
     lockedFigures
   } = props;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lockedFigures.map((figure, index) => {
-    let Figure;
     switch (figure.type) {
       case "point":
-        Figure = LockedPoint;
-        break;
+        return /*#__PURE__*/React__namespace.createElement(LockedPoint, _extends({
+          key: `point-${index}`
+        }, figure));
       case "line":
-        Figure = LockedLine;
-        break;
+        return /*#__PURE__*/React__namespace.createElement(LockedLine, _extends({
+          key: `line-${index}`,
+          range: props.range
+        }, figure));
       default:
         /**
          * Devlopment-time future-proofing: This should
@@ -29055,9 +29221,6 @@ const GraphLockedLayer = props => {
          */
         throw new wonderStuffCore.UnreachableCaseError(figure);
     }
-    return /*#__PURE__*/React__namespace.createElement(Figure, _extends({
-      key: `${figure.type}-${index}`
-    }, figure));
   }));
 };
 
@@ -29139,160 +29302,6 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
-/**
- * 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 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;
-  const yAtXMin = slope * (xMin - aX) + aY;
-  const yAtXMax = slope * (xMax - aX) + aY;
-  const xAtYMin = (yMin - aY) / slope + aX;
-  const xAtYMax = (yMax - aY) / slope + aX;
-
-  // clock analogy to describe quadrants
-  switch (true) {
-    // 12 o'clock to 2:59
-    case yDiff > 0 && xDiff >= 0:
-      return xAtYMax > xMax ? [xMax, yAtXMax] : [xAtYMax, yMax];
-    // 3 o'clock to 5:59
-    case yDiff <= 0 && xDiff > 0:
-      // xAtYMin evaluates to -Infinity here, so we use absolute value
-      return Math.abs(xAtYMin) > xMax ? [xMax, yAtXMax] : [xAtYMin, yMin];
-    // 9 o'clock to 11:59
-    case yDiff >= 0 && xDiff < 0:
-      return xAtYMax < xMin ? [xMin, yAtXMin] : [xAtYMax, yMax];
-    // 6 o'clock to 8:59
-    case yDiff < 0 && xDiff <= 0:
-      return xAtYMin < xMin ? [xMin, yAtXMin] : [xAtYMin, yMin];
-    default:
-      return [xMax, yAtXMax];
-  }
-};
-const getLines = points => points.map((point, i) => {
-  const next = points[(i + 1) % points.length];
-  return [point, next];
-});
-
-function SVGLine(props) {
-  const {
-    start,
-    end,
-    style,
-    className,
-    testId
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement("line", {
-    x1: start[0],
-    y1: start[1],
-    x2: end[0],
-    y2: end[1],
-    style: style,
-    className: `${className}`,
-    "data-testid": testId
-  });
-}
-
-function pathBuilder() {
-  return new PathBuilder();
-}
-class PathBuilder {
-  path = [];
-  scaleFactor = 1;
-  build() {
-    return this.path.map(scaleCommandBy(this.scaleFactor)).map(commandToString).join("");
-  }
-
-  // add a move (M) command to the path
-  move(x, y) {
-    this.path.push({
-      action: "M",
-      coords: [x, y]
-    });
-    return this;
-  }
-
-  // add a curve (C) command to the path
-  curve(control1X, control1Y, control2X, control2Y, endX, endY) {
-    this.path.push({
-      action: "C",
-      coords: [control1X, control1Y, control2X, control2Y, endX, endY]
-    });
-    return this;
-  }
-
-  // Scale all coordinates of the path by a factor
-  scale(factor) {
-    this.scaleFactor *= factor;
-    return this;
-  }
-}
-function commandToString(command) {
-  return `${command.action}${command.coords.join(" ")}`;
-}
-function scaleCommandBy(scaleFactor) {
-  return command => ({
-    ...command,
-    coords: command.coords.map(c => c * scaleFactor)
-  });
-}
-
-// We use the pathBuilder here to scale up the SVG path coordinates used
-// elsewhere for arrowheads. We scale in the path itself instead of using a CSS
-// transform because a transform would also scale up the stroke weight, and we
-// 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] = useTransformVectorsToPixels(props.tip);
-  return /*#__PURE__*/React__namespace.createElement("g", {
-    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
-  }, /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-1.5)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: arrowPath,
-    fill: "none",
-    style: {
-      stroke: props.color ?? "inherit"
-    },
-    strokeLinejoin: "round",
-    strokeLinecap: "round"
-  })));
-}
-
-function Vector(props) {
-  const {
-    tail,
-    tip,
-    color
-  } = props;
-  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
-  const direction = mafs.vec.sub(tip, tail);
-  return /*#__PURE__*/React__namespace.createElement("g", {
-    style: {
-      stroke: color,
-      strokeWidth: 2
-    }
-  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: tailPx,
-    end: tipPx
-  }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
-    tip: tip,
-    angle: angleDegrees(direction)
-  }));
-}
-function angleDegrees(_ref) {
-  let [x, y] = _ref;
-  return Math.atan2(y, x) * 180 / Math.PI;
-}
-
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -31244,6 +31253,7 @@ const MafsGraph = props => {
       labels
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    className: "mafs-graph",
     style: {
       width,
       height,
@@ -31278,7 +31288,8 @@ const MafsGraph = props => {
     containerSizeClass: props.containerSizeClass,
     markings: props.markings
   }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
-    lockedFigures: props.lockedFigures
+    lockedFigures: props.lockedFigures,
+    range: props.range
   }), renderGraph({
     state,
     dispatch
@@ -43374,7 +43385,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.1.0";
+const libVersion = "22.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {