@khanacademy/perseus 22.7.0 → 23.1.0

package/dist/index.css

@@ -4177,6 +4177,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;
+  --mafs-axis-stroke-width: 1px;
   --grid-line-subdivision-color: #222;
 
   --mafs-red: #f11d0e;
@@ -4488,7 +4489,7 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 }
 
 .MafsView pattern g {
-    stroke: #909296;
+    stroke: rgba(33, 36, 44, 0.32);
 }
 .axis-tick-labels {
     font-size: 14px;
@@ -4524,19 +4525,6 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     transform: translateY(calc(-100% + 0.25em));
 }
 
-.x-axis-tick-labels span,
-.y-axis-tick-labels span {
-    /* The negative sign is rendered as a pseudo-element to
-        ensure that we are positioning all labels correctly */
-    &::before {
-        content: attr(data-content);
-        position: absolute;
-        /* We're translating the symbol up by 1px to ensure it's legible around gridlines. */
-        transform: translate(-100%, -1px);
-        font-weight: 600; /* This helps get the symbol to render crisply */
-    }
-}
-
 .y-axis-tick-labels span {
     display: inline-block;
     height: var(--y-axis-label-height, 20px);

package/dist/index.d.ts

@@ -87,7 +87,7 @@ export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, } from "./types";
 export type { ParsedValue } from "./util";
-export type { LockedFigure, LockedFigureColor, LockedFigureType, LockedPointType, LockedLineType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureColor, LockedFigureType, LockedPointType, LockedLineType, LockedCircleType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
 PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusExampleGraphieWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";

package/dist/index.js

@@ -1245,8 +1245,6 @@ const ApiOptions = {
     // drawing area (scratchpad) should be allowed/disallowed.
     // Previously handled by `Khan.scratchpad.enable/disable`
     setDrawingAreaAvailable: PropTypes__default["default"].func,
-    // Whether to use the Draft.js editor or the legacy textarea
-    useDraftEditor: PropTypes__default["default"].bool,
     // The color used for the hint progress indicator (eg. 1 / 3)
     hintProgressColor: PropTypes__default["default"].string,
     // Whether this Renderer is allowed to auto-scroll the rest of the
@@ -1256,8 +1254,6 @@ const ApiOptions = {
     //
     // Defaults to `false`.
     canScrollPage: PropTypes__default["default"].bool,
-    // Whether or not we are rendering content inside of a modal.
-    inModal: PropTypes__default["default"].bool,
     // Whether to enable the cross-out feature on multiple-choice radio
     // widgets. This allows users to note which answers they believe to
     // be incorrect, to find the answer by process of elimination.
@@ -1293,9 +1289,7 @@ const ApiOptions = {
       }
     },
     setDrawingAreaAvailable: function () {},
-    useDraftEditor: false,
     canScrollPage: false,
-    inModal: false,
     crossOutEnabled: false,
     editorChangeDelay: 0
   }
@@ -17604,16 +17598,8 @@ class SvgImage extends React__namespace.Component {
     // Props to send to all images
     const imageProps = {
       alt: this.props.alt,
-      title: this.props.title,
-      tabIndex: "0"
+      title: this.props.title
     };
-    // If alt text is present, AND overrideAriaHidden is true,
-    // include aria-hidden to avoid screen reader from crawling texts
-    // both from the div meant for screen readers (see svg-image.jsx)
-    // and alt attribute.
-    if (this.props.alt && this.props.overrideAriaHidden) {
-      imageProps["aria-hidden"] = true;
-    }
     const width = this.props.width && this.props.width * this.props.scale;
     const height = this.props.height && this.props.height * this.props.scale;
     const dimensions = {
@@ -25197,8 +25183,6 @@ var CSProgram$1 = {
   hidden: true
 };
 
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-
 class Definition extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   static defaultProps = {
@@ -25410,8 +25394,6 @@ var Dropdown$1 = {
 
 /* eslint-disable react/sort-comp */
 
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-
 // transform = _.identity
 
 function mediaQueryIsMatched(mediaQuery) {
@@ -27659,7 +27641,7 @@ class ImageWidget extends React__namespace.Component {
 
   render() {
     let image;
-    let alt;
+    const alt = this.props.caption === this.props.alt ? "" : this.props.alt;
     const {
       apiOptions
     } = this.props;
@@ -27672,29 +27654,7 @@ class ImageWidget extends React__namespace.Component {
         } = _ref;
         return /*#__PURE__*/React__namespace.createElement(SvgImage, {
           src: url,
-          alt:
-          /* alt text is formatted in a sr-only
-          div next to the image in addition to
-          the alt attribute.
-          If there is no alt text at all,
-          we don't put an alt attribute on
-          the image, so that screen readers
-          know there's something they can't
-          read there :(.
-          NOTE: React <=0.13 (maybe later)
-          has a bug where it won't ever
-          remove an attribute, so if this
-          alt node is ever defined it's
-          not removed. This is sort of
-          dangerous, but we usually re-key
-          new renderers so that they're
-          rendered from scratch anyways,
-          so this shouldn't be a problem
-          in practice right now, although
-          it will exhibit weird behaviour
-          while editing. */
-          this.props.alt,
-          overrideAriaHidden: true,
+          alt: alt,
           width: backgroundImage.width,
           height: backgroundImage.height,
           preloader: apiOptions.imagePreloader,
@@ -27711,16 +27671,6 @@ class ImageWidget extends React__namespace.Component {
         });
       });
     }
-    if (this.props.alt) {
-      alt = /*#__PURE__*/React__namespace.createElement("span", {
-        className: "perseus-sr-only"
-      }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-        content: this.props.alt,
-        apiOptions: apiOptions,
-        linterContext: this.props.linterContext,
-        strings: this.context.strings
-      }));
-    }
 
     // For mobile we combine an image's title and caption.
     if (apiOptions.isMobile) {
@@ -27787,7 +27737,7 @@ class ImageWidget extends React__namespace.Component {
         style: {
           maxWidth: backgroundImage.width
         }
-      }, image, alt, titleAndCaption);
+      }, image, titleAndCaption);
     }
     let title;
     let caption;
@@ -27819,7 +27769,7 @@ class ImageWidget extends React__namespace.Component {
       style: {
         maxWidth: backgroundImage.width
       }
-    }, title, image, alt, caption);
+    }, title, image, caption);
   }
   static validate(userInput, rubric) {
     return {
@@ -28868,7 +28818,6 @@ function AxisLabels() {
 
 // Range is replaced within this file with Interval, but it is used elsewhere
 // and exported from the package, so we need to keep it around.
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
 const ItemExtras = [
 // The user might benefit from using a Scientific Calculator.  Provided on Khan Academy when true
 "calculator",
@@ -28975,6 +28924,28 @@ const lockedFigureColors = {
 };
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
+const LockedCircle = props => {
+  const {
+    center,
+    radius,
+    color,
+    fillStyle,
+    strokeStyle
+  } = props;
+  const fill = {
+    none: 0,
+    solid: 1,
+    translucent: 0.4
+  };
+  return /*#__PURE__*/React__namespace.createElement(mafs.Circle, {
+    center: center,
+    radius: radius,
+    fillOpacity: fill[fillStyle],
+    strokeStyle: strokeStyle,
+    color: lockedFigureColors[color]
+  });
+};
+
 function pathBuilder() {
   return new PathBuilder();
 }
@@ -29243,6 +29214,10 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
+      case "circle":
+        return /*#__PURE__*/React__namespace.createElement(LockedCircle, _extends({
+          key: `circle-${index}`
+        }, figure));
       default:
         /**
          * Devlopment-time future-proofing: This should
@@ -30048,9 +30023,19 @@ function initializeGraphState(params) {
         center: [0, 0],
         radiusPoint: [1, 0]
       };
-    case "angle":
-    case "sinusoid":
     case "quadratic":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getQuadraticCoords(graph, range, step)
+      };
+    case "sinusoid":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getSinusoidCoords(graph, range, step)
+      };
+    case "angle":
       throw new Error("Mafs not yet implemented for graph type: " + graph.type);
     default:
       throw new wonderStuffCore.UnreachableCaseError(graph);
@@ -30148,6 +30133,18 @@ function getGradableGraph(state, initialGraph) {
       radius: getRadius(state)
     };
   }
+  if (state.type === "quadratic" && initialGraph.type === "quadratic") {
+    return {
+      ...initialGraph,
+      coords: state.coords
+    };
+  }
+  if (state.type === "sinusoid" && initialGraph.type === "sinusoid") {
+    return {
+      ...initialGraph,
+      coords: state.coords
+    };
+  }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
 const getDefaultSegments = _ref2 => {
@@ -30227,6 +30224,16 @@ const getPolygonCoords = _ref4 => {
   coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
   return coords;
 };
+const getSinusoidCoords = (graph, range, step) => {
+  let coords = [[0.5, 0.5], [0.65, 0.6]];
+  coords = normalizePoints(range, step, coords, true);
+  return coords;
+};
+const getQuadraticCoords = (graph, range, step) => {
+  let coords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
+  coords = normalizePoints(range, step, coords, true);
+  return coords;
+};
 
 /**
  * determine radius of a circle graph
@@ -30336,6 +30343,138 @@ function crossProduct(as, bs) {
   return result;
 }
 
+function QuadraticGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+  const {
+    coords
+  } = graphState;
+
+  // The coefficients are used to calculate the quadratic equation, plot the graph, and to indicate
+  // to content creators the currently selected "correct answer". ex: y = 0.200x^2 + 0.000x + 0.000
+  // While we should technically never have invalid coordinates, we want to ensure that we have a fallback
+  const coeffRef = React__namespace.useRef([0, 0, 0]);
+  const coeffs = getQuadraticCoefficients(coords);
+  if (coeffs !== undefined) {
+    coeffRef.current = coeffs;
+  }
+
+  // Destructure the coefficients for calculating the quadratic equation
+  const [a, b, c] = coeffRef.current;
+
+  // Calculate the y value based on the current x value
+  const y = x => (a * x + b) * x + c;
+  const handleOnMove = (destination, elementId) => {
+    // If the destination is invalid, we want do not want to move the point
+    const validDestination = isValidDestination(destination, elementId, coords);
+    if (validDestination === false) {
+      return;
+    }
+    dispatch(movePoint(elementId, destination));
+  };
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
+    y: y,
+    color: wonderBlocksTokens.color.blue
+  }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    key: "point-" + i,
+    point: coord,
+    onMove: destination => handleOnMove(destination, i)
+  })));
+}
+
+// Ensure that we are only snapping to coordinates that result in a valid quadratic equation
+const isValidDestination = (destination, elementId, coords) => {
+  // Set up the new coords and check if the quadratic coefficients are valid
+  const newCoords = [...coords];
+  newCoords[elementId] = destination;
+  const QuadraticCoefficients = getQuadraticCoefficients(newCoords);
+
+  // If the new destination results in an invalid quadratic equation, we don't want to move the point
+  if (QuadraticCoefficients === undefined) {
+    return false;
+  }
+  return true;
+};
+
+// Get the quadratic coefficients from the 3 control points
+// These equations were originally set up in 2013 and may require some
+// additional comments to help clarify the quadratic formula manipulations
+// Origin: https://phabricator.khanacademy.org/D2413
+const getQuadraticCoefficients = coords => {
+  const p1 = coords[0];
+  const p2 = coords[1];
+  const p3 = coords[2];
+
+  // If the denominator is 0, we are going to return undefined as we are
+  // unable to calculate the quadratic coefficients when they hit infinity
+  const denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
+  if (denom === 0) {
+    return;
+  }
+  const a = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
+  const b = (p3[0] * p3[0] * (p1[1] - p2[1]) + p2[0] * p2[0] * (p3[1] - p1[1]) + p1[0] * p1[0] * (p2[1] - p3[1])) / denom;
+  const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
+  return [a, b, c];
+};
+
+function SinusoidGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+
+  // Destructure the coordinates from the graph state
+  // Note: The order of the coordinates is important:
+  // The coords[0] is the root and the coords[1] is the first peak
+  const {
+    coords
+  } = graphState;
+
+  // Get the coefficients for calculating the quadratic equation
+  const coeffs = getSinusoidCoefficients(coords);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
+    y: x => computeSine(x, coeffs),
+    color: wonderBlocksTokens.color.blue
+  }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    key: "point-" + i,
+    point: coord,
+    onMove: destination => dispatch(movePoint(i, destination))
+  })));
+}
+
+// Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+const computeSine = function (x,
+// x-coordinate
+sinusoidCoefficients) {
+  // Break down the coefficients for the sine function to improve readability
+  const {
+    amplitude: a,
+    angularFrequency: b,
+    phase: c,
+    verticalOffset: d
+  } = sinusoidCoefficients;
+  return a * Math.sin(b * x - c) + d;
+};
+const getSinusoidCoefficients = coords => {
+  // It's assumed that p1 is the root and p2 is the first peak
+  const p1 = coords[0];
+  const p2 = coords[1];
+
+  // Resulting coefficients are canonical for this sine curve
+  const amplitude = p2[1] - p1[1];
+  const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
+  const phase = p1[0] * angularFrequency;
+  const verticalOffset = p1[1];
+  return {
+    amplitude,
+    angularFrequency,
+    phase,
+    verticalOffset
+  };
+};
+
 // Universal padding for the axis ticks to ensure that the labels
 // have enough space to render without overlapping the tick lines
 const tickPadding = 5;
@@ -30496,9 +30635,6 @@ const AxisTickLabel = _ref => {
   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;
 
@@ -30514,15 +30650,9 @@ const AxisTickLabel = _ref => {
     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);
+    className: `${axis}-axis-tick-label`
+  }, shouldShowLabel && label);
 };
 
 // Determine whether or not to show the tick label text
@@ -31477,6 +31607,8 @@ function doMoveControlPoint(state, action) {
       throw new Error("FIXME implement circle reducer");
     case "point":
     case "polygon":
+    case "quadratic":
+    case "sinusoid":
       throw new Error(`Don't use moveControlPoint for ${state.type} graphs. Use movePoint instead!`);
     default:
       throw new wonderStuffCore.UnreachableCaseError(state);
@@ -31549,8 +31681,48 @@ function doMoveAll(state, action) {
 }
 function doMovePoint(state, action) {
   switch (state.type) {
-    case "point":
     case "polygon":
+    case "point":
+      {
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: setAtIndex({
+            array: state.coords,
+            index: action.index,
+            newValue: snap(state.snapStep, bound$1({
+              snapStep: state.snapStep,
+              range: state.range,
+              point: action.destination
+            }))
+          })
+        };
+      }
+    case "sinusoid":
+      {
+        // First, we need to verify that the new coordinates are not on the same vertical line
+        // If they are, we don't want to move the point
+        const destination = action.destination;
+        const newCoords = [...state.coords];
+        newCoords[action.index] = action.destination;
+        if (newCoords[0][0] === newCoords[1][0]) {
+          return state;
+        }
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: setAtIndex({
+            array: state.coords,
+            index: action.index,
+            newValue: snap(state.snapStep, bound$1({
+              snapStep: state.snapStep,
+              range: state.range,
+              point: destination
+            }))
+          })
+        };
+      }
+    case "quadratic":
       {
         return {
           ...state,
@@ -31567,7 +31739,7 @@ function doMovePoint(state, action) {
         };
       }
     default:
-      throw new Error("The movePoint action is only for point and polygon graphs");
+      throw new Error("The movePoint action is only for point, quadratic, and polygon graphs");
   }
 }
 function doMoveCenter(state, action) {
@@ -31789,6 +31961,16 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "quadratic":
+      return /*#__PURE__*/React__namespace.createElement(QuadraticGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "sinusoid":
+      return /*#__PURE__*/React__namespace.createElement(SinusoidGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     default:
       return new wonderStuffCore.UnreachableCaseError(type);
   }
@@ -44002,7 +44184,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.7.0";
+const libVersion = "23.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {