@khanacademy/perseus 19.7.3 → 19.8.0

package/dist/index.d.ts

@@ -84,7 +84,7 @@ export type { ServerItemRenderer as ServerItemRendererComponent } from "./server
 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 { PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
-PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusRenderer, PerseusWidget, } from "./perseus-types";
+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

@@ -18971,7 +18971,7 @@ const getRendererPropsForWidgetInfo = (widgetInfo, problemNum) => {
     // It shouldn't matter what we return here, but for consistency
     // we return the untransformed options, as if the widget did
     // not have a transform defined.
-    return widgetInfo.options;
+    return widgetInfo;
   }
   let transform;
   if (widgetInfo.static) {
@@ -19614,11 +19614,8 @@ class Renderer extends React__namespace.Component {
 
     // The widget needs access to its "rubric" at all times when in review
     // mode (which is really just part of its widget info).
-    let reviewModeRubric = null;
     const widgetInfo = this.state.widgetInfo[id];
-    if (this.props.reviewMode && widgetInfo) {
-      reviewModeRubric = widgetInfo.options;
-    }
+    const reviewModeRubric = this.props.reviewMode && widgetInfo ? widgetInfo.options : null;
     if (!this._interactionTrackers) {
       this._interactionTrackers = {};
     }
@@ -28326,38 +28323,174 @@ class Graph extends React__namespace.Component {
   }
 }
 
-const useInteractivePoint = (coords, snaps, range) => mafs.useMovablePoint(coords, {
-  constrain: coord => constrain(coord, snaps, range),
-  color: Color__default["default"].blue
-});
+const MOVE_CONTROL_POINT = "move-control-point";
+function moveControlPoint(objectIndex, pointIndex, destination) {
+  return {
+    type: MOVE_CONTROL_POINT,
+    objectIndex,
+    pointIndex,
+    destination
+  };
+}
+const MOVE_SEGMENT = "move-segment";
+function moveSegment(segmentIndex, delta) {
+  return {
+    type: MOVE_SEGMENT,
+    segmentIndex,
+    delta
+  };
+}
 
-/**
- * We do not want to call `onGraphChange` until the user
- * has interacted with the graph. See the test,
- * "should reject no interaction"
- */
-const useEffectAfterFirstRender = (fn, deps) => {
-  const firstRender = React.useRef(true);
-  React.useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false;
-      return;
-    }
-    fn();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fn, ...deps]);
+const SegmentGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    segments,
+    snapStep,
+    range
+  } = props.graphState;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React__namespace.createElement(SegmentView, {
+    key: i,
+    segment: segment,
+    snaps: snapStep,
+    range: range,
+    onMoveSegment: delta => {
+      dispatch(moveSegment(i, delta));
+    },
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination)),
+    "data-testid": "segment" + i
+  })));
 };
-const snap = (val, step) => {
-  const inverse = 1 / step;
-  return Math.round(val * inverse) / inverse;
+const SegmentView = props => {
+  const [pt1, pt2] = props.segment;
+  const midpoint = mafs.vec.midpoint(pt1, pt2);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Line.Segment, {
+    point1: pt1,
+    point2: pt2
+  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+    point: midpoint,
+    color: Color__default["default"].blue,
+    onMove: newPoint => {
+      props.onMoveSegment(mafs.vec.sub(newPoint, midpoint));
+    }
+  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+    point: pt1,
+    color: Color__default["default"].blue,
+    onMove: newPoint => {
+      props.onMovePoint(0, newPoint);
+    }
+  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+    point: pt2,
+    color: Color__default["default"].blue,
+    onMove: newPoint => {
+      props.onMovePoint(1, newPoint);
+    }
+  }));
 };
-const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
-const constrain = (coord, snapStep, range) => {
-  const [x, y] = coord;
-  const [xSnap, ySnap] = snapStep;
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  return [clamp(snap(x, xSnap), xMin, xMax), clamp(snap(y, ySnap), yMin, yMax)];
+
+const renderLineLabel = (n, _ref) => {
+  let [min, max] = _ref;
+  return n !== -1 && n !== min && n !== max;
 };
+const axisOptions = (props, index) => ({
+  axis: props.markings === "graph",
+  lines: props.step[index],
+  subdivisions: props.step[index] / props.gridStep[index],
+  labels: n => renderLineLabel(n, props.range[index]) ? n : ""
+});
+const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
+  xAxis: axisOptions(props, 0),
+  yAxis: axisOptions(props, 1)
+});
+
+function interactiveGraphReducer(state, action) {
+  switch (action.type) {
+    case "move-control-point":
+      {
+        const newSegments = updateAtIndex(state.segments, action.objectIndex, segment => setAtIndex(segment, action.pointIndex, snap(state, bound$1(state, action.destination))));
+        if (!validSegments(newSegments)) {
+          return state;
+        }
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          segments: newSegments
+        };
+      }
+    case "move-segment":
+      {
+        const oldSegment = state.segments[action.segmentIndex];
+        const maxMoves = oldSegment.map(point => maxMove(state, point));
+        const minMoves = oldSegment.map(point => minMove(state, point));
+        const maxXMove = Math.min(...maxMoves.map(move => move[0]));
+        const maxYMove = Math.min(...maxMoves.map(move => move[1]));
+        const minXMove = Math.max(...minMoves.map(move => move[0]));
+        const minYMove = Math.max(...minMoves.map(move => move[1]));
+        const dx = clamp(action.delta[0], minXMove, maxXMove);
+        const dy = clamp(action.delta[1], minYMove, maxYMove);
+        const newSegment = oldSegment.map(point => snap(state, kmath.vector.add(point, [dx, dy])));
+        const newSegments = setAtIndex(state.segments, action.segmentIndex, newSegment);
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          segments: newSegments
+        };
+      }
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(action);
+  }
+}
+function snap(state, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = state.snapStep;
+  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
+}
+
+// Returns the closest point to the given `point` that is within the graph
+// bounds given in `state`.
+function bound$1(state, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = state.snapStep;
+  const [[minX, maxX], [minY, maxY]] = state.range;
+  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
+}
+
+// Returns the vector from the given point to the top-right corner of the graph
+function maxMove(state, point) {
+  const topRight = bound$1(state, [Infinity, Infinity]);
+  return mafs.vec.sub(topRight, point);
+}
+
+// Returns the vector from the given point to the bottom-left corner of the
+// graph
+function minMove(state, point) {
+  const bottomLeft = bound$1(state, [-Infinity, -Infinity]);
+  return mafs.vec.sub(bottomLeft, point);
+}
+function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+function validSegments(segments) {
+  return segments.every(_ref => {
+    let [start, end] = _ref;
+    return !kmath.vector.equal(start, end);
+  });
+}
+function updateAtIndex(array, index, update) {
+  return setAtIndex(array, index, update(array[index]));
+}
+function setAtIndex(array, index, newValue) {
+  const copy = [...array];
+  copy[index] = newValue;
+  return copy;
+}
 
 // same as pointsFromNormalized in interactive-graph.tsx
 const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
@@ -28379,11 +28512,30 @@ const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.
   return (coord + ranges[i][1]) / extent;
 }));
 
-const getSegmentCoords = props => {
-  const coords = props.graph.coords;
-  if (coords) {
-    return coords;
+function initializeGraphState(params) {
+  const {
+    graph,
+    step,
+    snapStep,
+    range
+  } = params;
+  switch (graph.type) {
+    case "segment":
+      return {
+        type: "segment",
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        segments: getDefaultSegments({
+          graph,
+          step,
+          range
+        })
+      };
   }
+  throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+}
+const getDefaultSegments = props => {
   const ys = n => {
     switch (n) {
       case 2:
@@ -28401,60 +28553,12 @@ const getSegmentCoords = props => {
     }
   };
   return ys(props.graph.numSegments).map(y => {
-    let segment = [[-5, y], [5, y]];
-    segment = normalizeCoords(segment, props.range);
-    segment = normalizePoints(props.range, props.step, segment);
-    return segment;
+    let endpoints = [[-5, y], [5, y]];
+    endpoints = normalizeCoords(endpoints, props.range);
+    endpoints = normalizePoints(props.range, props.step, endpoints);
+    return endpoints;
   });
 };
-const updateSegmentsArray = (segments, index, segment) => segments.map((seg, i) => index === i ? segment : seg);
-const SegmentGraph = props => {
-  const segments = getSegmentCoords(props);
-  const handleChange = (i, segment) => props.onGraphChange(current => ({
-    ...current,
-    coords: current.coords ? updateSegmentsArray(current.coords, i, segment) : updateSegmentsArray(segments, i, segment)
-  }));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments.map((segment, i) => /*#__PURE__*/React__namespace.createElement(Segment, {
-    key: i,
-    i: i,
-    segment: segment,
-    snaps: props.snapStep,
-    range: props.range,
-    onChange: handleChange,
-    "data-testid": "segment" + i
-  })));
-};
-const Segment = props => {
-  const [start, end] = props.segment;
-  const {
-    point: pt1,
-    element: el1
-  } = useInteractivePoint(start, props.snaps, props.range);
-  const {
-    point: pt2,
-    element: el2
-  } = useInteractivePoint(end, props.snaps, props.range);
-  useEffectAfterFirstRender(() => props.onChange(props.i, [pt1, pt2]), [pt1, pt2]);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Line.Segment, {
-    point1: pt1,
-    point2: pt2
-  }), el1, el2);
-};
-
-const renderLineLabel = (n, _ref) => {
-  let [min, max] = _ref;
-  return n !== -1 && n !== min && n !== max;
-};
-const axisOptions = (props, index) => ({
-  axis: props.markings === "graph",
-  lines: props.step[index],
-  subdivisions: props.step[index] / props.gridStep[index],
-  labels: n => renderLineLabel(n, props.range[index]) ? n : ""
-});
-const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
-  xAxis: axisOptions(props, 0),
-  yAxis: axisOptions(props, 1)
-});
 
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
@@ -29144,29 +29248,38 @@ const getLegacyGrid = (box, backgroundImage) => {
 
 const renderGraph = props => {
   const {
-    graph,
-    ...rest
+    state,
+    dispatch
   } = props;
-  switch (graph.type) {
+  switch (state.type) {
     case "segment":
-      return /*#__PURE__*/React__namespace.createElement(SegmentGraph, _extends({}, rest, {
-        graph: graph,
-        onGraphChange: props.onGraphChange
-      }));
+      return /*#__PURE__*/React__namespace.createElement(SegmentGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
   }
+  throw new Error("Mafs is not yet implemented for graph type: " + state.type);
 };
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return initialGraph;
+  }
+  switch (initialGraph.type) {
+    case "segment":
+      return {
+        ...initialGraph,
+        coords: state.segments
+      };
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
 const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
-  // Storing the gradable state in a ref so that it can be updated without
-  // causing a re-render.
-  const graphRef = React__namespace.useRef(props.graph);
-  const handleGraphUpdate = callback => {
-    graphRef.current = callback(graphRef.current);
-  };
-  React__namespace.useImperativeHandle(ref, () => ({
-    getUserInput: () => graphRef.current
-  }));
   const [width, height] = props.box;
   const legacyGrid = getLegacyGrid([width, height], props.backgroundImage);
+  const [state, dispatch] = React__namespace.useReducer(interactiveGraphReducer, props, initializeGraphState);
+  React__namespace.useImperativeHandle(ref, () => ({
+    getUserInput: () => getGradableGraph(state, props.graph)
+  }));
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       width: props.backgroundImage?.width ?? width,
@@ -29190,8 +29303,8 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     width: width,
     height: height
   }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), renderGraph({
-    ...props,
-    onGraphChange: handleGraphUpdate
+    state,
+    dispatch
   }))));
 });
 
@@ -32969,21 +33082,21 @@ class Tile extends React__namespace.Component {
     });
   }
   _flip = () => {
-    this.props.onChange(!this.props.value);
+    // On change requires a value, but we don't actually have access
+    // to the coordinates here, so we just pass the inverse value as a workaround.
+    this.props.onChange({
+      value: !this.props.value
+    });
   };
 }
 
 // A grid of glowy cells
 class TileGrid extends React__namespace.Component {
-  static propTypes = {
-    cells: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].bool)).isRequired,
-    size: PropTypes__default["default"].number.isRequired
-  };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       style: TABLE_STYLE,
       className: "no-select"
-    }, ___default["default"].map(this.props.cells, (row, y) => {
+    }, this.props.cells && ___default["default"].map(this.props.cells, (row, y) => {
       return /*#__PURE__*/React__namespace.createElement("div", {
         key: y,
         style: ROW_STYLE
@@ -32994,7 +33107,12 @@ class TileGrid extends React__namespace.Component {
         }, /*#__PURE__*/React__namespace.createElement(Tile, {
           value: cell,
           size: this.props.size,
-          onChange: ___default["default"].partial(this.props.onChange, y, x)
+          onChange: ___default["default"].partial(this.props.onChange, {
+            value: {
+              y,
+              x
+            }
+          })
         }));
       }));
     }));
@@ -33025,13 +33143,6 @@ const flipTilesPattern = (oldCells, tileY, tileX, pattern) => {
 class LightsPuzzle extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property '_patternIndex' has no initializer and is not definitely assigned in the constructor.
 
-  static propTypes = {
-    ...propTypes,
-    cells: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].bool)),
-    startCells: PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].bool)),
-    flipPattern: PropTypes__default["default"].string.isRequired,
-    moveCount: PropTypes__default["default"].number.isRequired
-  };
   static defaultProps = {
     cells: [[false, false, false], [false, false, false], [false, false, false]],
     startCells: [[false, false, false], [false, false, false], [false, false, false]],
@@ -33077,7 +33188,7 @@ class LightsPuzzle extends React__namespace.Component {
     };
   })();
   _width = () => {
-    if (this.props.cells.length !== 0) {
+    if (this.props.cells && this.props.cells.length !== 0) {
       return this.props.cells[0].length;
     }
     return 0; // default to 0
@@ -33092,21 +33203,31 @@ class LightsPuzzle extends React__namespace.Component {
     }
   }
   _initNextPatterns = () => {
-    this._currPattern = PATTERNS[this.props.flipPattern](0);
-    this._nextPattern = PATTERNS[this.props.flipPattern](1);
+    if (this.props.flipPattern) {
+      this._currPattern = PATTERNS[this.props.flipPattern](0);
+      this._nextPattern = PATTERNS[this.props.flipPattern](1);
+    }
     this._patternIndex = 2;
   };
   _shiftPatterns = () => {
-    this._currPattern = this._nextPattern;
-    this._nextPattern = PATTERNS[this.props.flipPattern](this._patternIndex);
-    this._patternIndex++;
+    if (this.props.flipPattern) {
+      this._currPattern = this._nextPattern;
+      this._nextPattern = PATTERNS[this.props.flipPattern](this._patternIndex);
+      this._patternIndex++;
+    }
   };
-  _flipTile = (tileY, tileX) => {
-    const newCells = flipTilesPattern(this.props.cells, tileY, tileX, this._currPattern);
+  _flipTile = _ref => {
+    let {
+      value: {
+        y,
+        x
+      }
+    } = _ref;
+    const newCells = flipTilesPattern(this.props.cells, y, x, this._currPattern);
     this._shiftPatterns();
     this.change({
       cells: newCells,
-      moveCount: this.props.moveCount + 1
+      moveCount: (this.props.moveCount || 0) + 1
     });
   };
   _reset = () => {
@@ -35516,11 +35637,6 @@ const parse$1 = SmilesParser.parse;
 const ParseError = SmilesParser.ParseError;
 const borderSize = 30;
 class Molecule extends React__namespace.Component {
-  static propTypes = {
-    id: PropTypes__default["default"].string.isRequired,
-    rotationAngle: PropTypes__default["default"].number,
-    smiles: PropTypes__default["default"].string
-  };
   state = {
     parsedSmiles: null,
     error: null
@@ -35593,7 +35709,7 @@ class Molecule extends React__namespace.Component {
     // screen readers?
     let content = /*#__PURE__*/React__namespace.createElement("canvas", {
       className: "molecule-canvas",
-      id: this.props.id + "-molecule"
+      id: this.props.widgetId + "-molecule"
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "canvas"
@@ -35611,11 +35727,6 @@ class Molecule extends React__namespace.Component {
   }
 }
 class MoleculeWidget extends React__namespace.Component {
-  static propTypes = {
-    rotationAngle: PropTypes__default["default"].number,
-    smiles: PropTypes__default["default"].string,
-    widgetId: PropTypes__default["default"].string
-  };
   static defaultProps = {
     rotationAngle: 0
   };
@@ -35643,7 +35754,7 @@ class MoleculeWidget extends React__namespace.Component {
   };
   render() {
     return /*#__PURE__*/React__namespace.createElement(Molecule, {
-      id: this.props.widgetId,
+      widgetId: this.props.widgetId,
       smiles: this.props.smiles,
       rotationAngle: this.props.rotationAngle
     });
@@ -38980,11 +39091,6 @@ var Passage$1 = {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class PassageRefTarget extends React__namespace.Component {
-  static propTypes = {
-    ...propTypes,
-    content: PropTypes__default["default"].string,
-    linterContext: PerseusLinter.linterContextProps
-  };
   static defaultProps = {
     content: "",
     linterContext: PerseusLinter.linterContextDefault
@@ -39909,11 +40015,6 @@ var PythonProgram$1 = {
 
 class Separator extends React__namespace.Component {
   arrowLength = 100;
-  static propTypes = {
-    // TODO(colin): figure out and add shape.
-    data: PropTypes__default["default"].any,
-    index: PropTypes__default["default"].number
-  };
   componentDidMount() {
     this.drawArrow();
   }
@@ -39962,16 +40063,6 @@ class Separator extends React__namespace.Component {
   }
 }
 class ReactionDiagramWidget extends React__namespace.Component {
-  static propTypes = {
-    // TODO(colin): at the moment, these must be arrays of two elements;
-    // we're limited to a single reaction step.  At some point, add support
-    // for more steps in the reaction.
-    rotationAngle: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-    // eslint-disable-next-line react/forbid-prop-types
-    separators: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
-    smiles: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    widgetId: PropTypes__default["default"].string
-  };
   static defaultProps = {
     smiles: [],
     rotationAngle: [],
@@ -40014,7 +40105,7 @@ class ReactionDiagramWidget extends React__namespace.Component {
           key: id,
           className: "molecule-container"
         }, /*#__PURE__*/React__namespace.createElement(Molecule, {
-          id: id,
+          widgetId: id,
           rotationAngle: this.props.rotationAngle[i],
           smiles: s
         }), i === this.props.smiles.length - 1 ? null : /*#__PURE__*/React__namespace.createElement(Separator, {
@@ -42262,7 +42353,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.7.3";
+const libVersion = "19.8.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43404,8 +43495,6 @@ const ItemExtras = [
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
-// TODO(FEI-3983): Create proper types for these.
-
 /**
  * Traverses a {content, widgets, images} renderer props object,
  * such as `itemData.question`