@khanacademy/perseus 37.0.1 → 38.0.0

package/dist/es/index.js

@@ -9967,9 +9967,6 @@ const setLabelMargins = function setLabelMargins(span, size) {
     // Inherited line-height values can really mess up placement.
     $container.css("line-height", "normal");
 
-    // TODO: Verify that this change doesn't impact other graphies
-    //       Check the full list of consuming widgets.
-
     // If the change in line-height affected the height of the element,
     //     then the height used for calculations should be updated.
     // This can happen when the first label in the container calls this method,
@@ -28275,7 +28272,7 @@ const Exponential = _.extend({}, PlotDefaults, {
    * coordinate, and `false` uses oldCoord as the resulting coordinate.
    */
   extraCoordConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
-    const y = _.head(asymptote)[1];
+    const y = asymptote[0][1];
     return _.all(coords, coord => coord[1] !== y);
   },
   extraAsymptoteConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
@@ -28299,7 +28296,7 @@ const Exponential = _.extend({}, PlotDefaults, {
   getCoefficients: function (coords, asymptote) {
     const p1 = coords[0];
     const p2 = coords[1];
-    const c = _.head(asymptote)[1];
+    const c = asymptote[0][1];
     const b = Math.log((p1[1] - c) / (p2[1] - c)) / (p1[0] - p2[0]);
     const a = (p1[1] - c) / Math.exp(b * p1[0]);
     return [a, b, c];
@@ -28326,7 +28323,7 @@ const Logarithm = _.extend({}, PlotDefaults, {
   defaultCoords: [[0.55, 0.5], [0.75, 0.75]],
   defaultAsymptote: [[0.5, 0], [0.5, 1.0]],
   extraCoordConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
-    const x = _.head(asymptote)[0];
+    const x = asymptote[0][0];
     return _.all(coords, coord => coord[0] !== x) && coords[0][1] !== coords[1][1];
   },
   extraAsymptoteConstraint: function (newCoord, oldCoord, coords, asymptote, graph) {
@@ -28354,10 +28351,12 @@ const Logarithm = _.extend({}, PlotDefaults, {
     // logic between the two 'models'.
     const flip = coord => [coord[1], coord[0]];
     const inverseCoeffs = Exponential.getCoefficients(_.map(coords, flip), _.map(asymptote, flip));
-    const c = -inverseCoeffs[2] / inverseCoeffs[0];
-    const b = 1 / inverseCoeffs[0];
-    const a = 1 / inverseCoeffs[1];
-    return [a, b, c];
+    if (inverseCoeffs) {
+      const c = -inverseCoeffs[2] / inverseCoeffs[0];
+      const b = 1 / inverseCoeffs[0];
+      const a = 1 / inverseCoeffs[1];
+      return [a, b, c];
+    }
   },
   getFunctionForCoeffs: function (coeffs, x, asymptote) {
     const a = coeffs[0],
@@ -28421,11 +28420,9 @@ const functionTypeMapping = {
   absolute_value: AbsoluteValue
 };
 const allTypes = _.keys(functionTypeMapping);
-function functionForType(
-// TODO(jeremy): Actually `$Keys<typeof functionTypeMapping>` but that
-// triggers TypeScript to require all of our Plot types to be fully typed which
-// is a big amount of work/change.
-type) {
+function functionForType(type) {
+  // @ts-expect-error: TypeScript doesn't know how to use deal with generics
+  // and conditional types in this way.
   return functionTypeMapping[type];
 }
 const getEquationString = props => {
@@ -28490,12 +28487,13 @@ const defaultPlotProps = (type, graph) => {
   // widget before even reading the question; you can't lose, but you
   // might get a free win.
   const model = functionForType(type);
+  const defaultAsymptote = "defaultAsymptote" in model ? model.defaultAsymptote : null;
   const gridStep = [1, 1];
   // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type '[number, number]'.
   const snapStep = Util.snapStepFromGridStep(gridStep);
   return {
     type,
-    asymptote: maybePointsFromNormalized(model.defaultAsymptote, graph.range, graph.step, snapStep),
+    asymptote: maybePointsFromNormalized(defaultAsymptote, graph.range, graph.step, snapStep),
     coords: null
   };
 };
@@ -28555,8 +28553,19 @@ var util = /*#__PURE__*/Object.freeze({
   typeToButton: typeToButton
 });
 
-function grapherValidator(state, rubric) {
-  if (state.type !== rubric.correct.type) {
+function getCoefficientsByType(data) {
+  if (data.type === "exponential" || data.type === "logarithm") {
+    const grader = functionForType(data.type);
+    return grader.getCoefficients(data.coords, data.asymptote);
+  } else if (data.type === "linear" || data.type === "quadratic" || data.type === "absolute_value" || data.type === "sinusoid" || data.type === "tangent") {
+    const grader = functionForType(data.type);
+    return grader.getCoefficients(data.coords);
+  } else {
+    throw new PerseusError("Invalid grapher type", Errors.InvalidInput);
+  }
+}
+function grapherValidator(userInput, rubric) {
+  if (userInput.type !== rubric.correct.type) {
     return {
       type: "points",
       earned: 0,
@@ -28566,7 +28575,7 @@ function grapherValidator(state, rubric) {
   }
 
   // We haven't moved the coords
-  if (state.coords == null) {
+  if (userInput.coords == null) {
     return {
       type: "invalid",
       message: null
@@ -28574,11 +28583,9 @@ function grapherValidator(state, rubric) {
   }
 
   // Get new function handler for grading
-  const grader = functionForType(state.type);
-  const guessCoeffs = grader.getCoefficients(state.coords, state.asymptote);
-  const correctCoeffs = grader.getCoefficients(rubric.correct.coords,
-  // @ts-expect-error - TS(2339) - Property 'asymptote' does not exist on type '{ type: "absolute_value"; coords: [Coord, Coord]; }'
-  rubric.correct.asymptote);
+  const grader = functionForType(userInput.type);
+  const guessCoeffs = getCoefficientsByType(userInput);
+  const correctCoeffs = getCoefficientsByType(rubric.correct);
   if (guessCoeffs == null || correctCoeffs == null) {
     return {
       type: "invalid",
@@ -42060,17 +42067,23 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   const results = [];
 
   // For convenience, extract some props into separate variables
-  const range = props.range;
-  const labelRange = props.labelRange;
+  const {
+    range,
+    labelRange,
+    labelStyle,
+    labelTicks,
+    tickStep,
+    numDivisions
+  } = props;
   const leftLabel = labelRange[0] == null ? range[0] : labelRange[0];
   const rightLabel = labelRange[1] == null ? range[1] : labelRange[1];
 
   // Find base via GCD for non-reduced fractions
   let base;
-  if (props.labelStyle === "non-reduced") {
+  if (labelStyle === "non-reduced") {
     const fractions = [leftLabel, rightLabel];
-    for (let i = 0; i <= props.numDivisions; i++) {
-      const x = range[0] + i * props.tickStep;
+    for (let i = 0; i <= numDivisions; i++) {
+      const x = range[0] + i * tickStep;
       fractions.push(x);
     }
     const getDenom = x => number.toFraction(x)[1];
@@ -42079,30 +42092,40 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   } else {
     base = undefined;
   }
-
-  // Draw and save the tick marks and tick labels
-  for (let i = 0; i <= props.numDivisions; i++) {
-    const x = range[0] + i * props.tickStep;
-    results.push(graphie.line([x, -0.2], [x, 0.2]));
-    const labelTicks = props.labelTicks;
-    if (labelTicks || props.labelStyle === "decimal ticks") {
-      if (x === leftLabel || x === rightLabel) {
-        results.push(graphie.style({
-          color: KhanColors.BLUE
-        }, () => _label(graphie, props.labelStyle, x, x, base)));
-      } else {
-        results.push(_label(graphie, props.labelStyle, x, x, base));
-      }
-    }
-  }
-
-  // Render the labels' lines
-  graphie.style({
+  const highlightedLineStyle = {
     stroke: KhanColors.BLUE,
     strokeWidth: 3.5
-  }, () => {
-    results.push(graphie.line([leftLabel, -0.2], [leftLabel, 0.2]));
-    results.push(graphie.line([rightLabel, -0.2], [rightLabel, 0.2]));
+  };
+  const highlightedTextStyle = {
+    color: KhanColors.BLUE
+  };
+
+  // Generate an array of tick numbers:
+  //    `Array(props.numDivisions)` makes an array of null values - one for every division marker
+  //    `.keys()` gets the index values for each marker placeholder
+  //    `.map()` converts the index values into actual tick numbers
+  const initialTicks = [...Array(numDivisions).keys()].map(index => range[0] + index * tickStep);
+
+  // .sort() comparator
+  const byNumericAscending = (a, b) => a - b;
+
+  // Ensure that any label markers and range endpoints are included in the array
+  // Using `Set()` prevents duplication of tick numbers (and is quite performant)
+  const allTicks = [...new Set([...initialTicks, leftLabel, rightLabel, ...range])].sort(byNumericAscending);
+
+  // Cycle through each tick number and add a tick line, and a label (if needed)
+  allTicks.forEach(tick => {
+    const tickIsHighlighted = tick === leftLabel || tick === rightLabel;
+    const lineStyle = tickIsHighlighted ? highlightedLineStyle : null;
+    const textStyle = tickIsHighlighted ? highlightedTextStyle : null;
+    graphie.style(lineStyle, () => {
+      results.push(graphie.line([tick, -0.2], [tick, 0.2]));
+    });
+    if (labelTicks || tickIsHighlighted || labelStyle === "decimal ticks") {
+      graphie.style(textStyle, () => {
+        results.push(_label(graphie, labelStyle, tick, tick, base));
+      });
+    }
   });
   return results;
 });
@@ -42781,7 +42804,7 @@ class Orderer extends React.Component {
           list.splice(index, 0, newCard);
         }
         this.props.onChange({
-          // @ts-expect-error - TS2345 - Argument of type '{ current: any[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: WidgetDict | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
+          // @ts-expect-error - TS2345 - Argument of type '{ current: any[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: PerseusWidgetsMap | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
           current: list
         });
         this.setState({
@@ -42943,7 +42966,7 @@ class Orderer extends React.Component {
         };
       });
       this.props.onChange({
-        // @ts-expect-error - TS2345 - Argument of type '{ current: { content: string; }[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: WidgetDict | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
+        // @ts-expect-error - TS2345 - Argument of type '{ current: { content: string; }[]; }' is not assignable to parameter of type '{ hints?: readonly Hint[] | undefined; replace?: boolean | undefined; content?: string | undefined; widgets?: PerseusWidgetsMap | undefined; images?: ImageDict | undefined; ... 13 more ...; plot?: any; }'.
         current: list
       });
       this.setState({
@@ -44804,7 +44827,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 = "37.0.1";
+const libVersion = "38.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {