@khanacademy/perseus 23.4.0 → 23.5.0

package/dist/index.d.ts

@@ -51,7 +51,7 @@ export { default as KhanMath } from "./util/math";
 export { default as LoadingContext } from "./loading-context";
 export { default as mediaQueries } from "./styles/media-queries";
 export { default as PerseusMarkdown } from "./perseus-markdown";
-export { PerseusExpressionAnswerFormConsidered, plotterPlotTypes, ItemExtras, lockedFigureColors, lockedEllipseFillStyles, } from "./perseus-types";
+export { PerseusExpressionAnswerFormConsidered, plotterPlotTypes, ItemExtras, lockedFigureColors, lockedFigureFillStyles, } from "./perseus-types";
 export { traverse } from "./traversal";
 export { isItemRenderableByVersion } from "./renderability";
 export { violatingWidgets } from "./a11y";
@@ -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, LockedEllipseType, LockedEllipseFillType, LockedVectorType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureColor, LockedFigureFillType, LockedFigureType, LockedPointType, LockedLineType, LockedVectorType, LockedEllipseType, LockedPolygonType, 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

@@ -28947,13 +28947,15 @@ const ItemExtras = [
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 const lockedFigureColors = {
+  blue: "#3D7586",
   green: "#447A53",
   grayH: "#3B3D45",
   purple: "#594094",
   pink: "#B25071",
-  red: "#D92916"
+  red: "#D92916",
+  orange: "#946700"
 };
-const lockedEllipseFillStyles = {
+const lockedFigureFillStyles = {
   none: 0,
   solid: 1,
   translucent: 0.4
@@ -28973,7 +28975,7 @@ const LockedEllipse = props => {
     center: center,
     radius: radius,
     angle: angle,
-    fillOpacity: lockedEllipseFillStyles[fillStyle],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
   });
@@ -29232,6 +29234,29 @@ const LockedPoint = props => {
   });
 };
 
+const LockedPolygon = props => {
+  const {
+    points,
+    color,
+    showVertices,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "locked-polygon"
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
+    points: [...points],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
+    strokeStyle: strokeStyle,
+    color: lockedFigureColors[color]
+  }), showVertices && points.map((point, index) => /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+    key: `locked-polygon-point-${index}`,
+    x: point[0],
+    y: point[1],
+    color: lockedFigureColors[color]
+  })));
+};
+
 const LockedVector = props => {
   const {
     color,
@@ -29262,13 +29287,17 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
+      case "vector":
+        return /*#__PURE__*/React__namespace.createElement(LockedVector, _extends({
+          key: `vector-${index}`
+        }, figure));
       case "ellipse":
         return /*#__PURE__*/React__namespace.createElement(LockedEllipse, _extends({
           key: `ellipse-${index}`
         }, figure));
-      case "vector":
-        return /*#__PURE__*/React__namespace.createElement(LockedVector, _extends({
-          key: `vector-${index}`
+      case "polygon":
+        return /*#__PURE__*/React__namespace.createElement(LockedPolygon, _extends({
+          key: `polygon-${index}`
         }, figure));
       default:
         /**
@@ -29282,6 +29311,13 @@ const GraphLockedLayer = props => {
   }));
 };
 
+const REINITIALIZE = "reinitialize";
+function reinitialize(params) {
+  return {
+    type: REINITIALIZE,
+    params
+  };
+}
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(pointIndex, destination, itemIndex) {
   return {
@@ -31609,6 +31645,8 @@ function getCircleCoords(graph) {
 
 function interactiveGraphReducer(state, action) {
   switch (action.type) {
+    case REINITIALIZE:
+      return initializeGraphState(action.params);
     case MOVE_CONTROL_POINT:
       return doMoveControlPoint(state, action);
     case MOVE_LINE:
@@ -32258,11 +32296,12 @@ function mafsStateToInteractiveGraph(state) {
 }
 const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const {
-    onChange
+    onChange,
+    graph
   } = props;
   const [state, dispatch] = React__namespace.useReducer(interactiveGraphReducer, props, initializeGraphState);
   React.useImperativeHandle(ref, () => ({
-    getUserInput: () => getGradableGraph(state, props.graph)
+    getUserInput: () => getGradableGraph(state, graph)
   }));
   const prevState = React.useRef(state);
   React.useEffect(() => {
@@ -32285,6 +32324,18 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
   React.useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+  const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const originalPropsRef = React.useRef(props);
+  const latestPropsRef = wonderBlocksCore.useLatestRef(props);
+  React.useEffect(() => {
+    // This conditional prevents the state from being "reinitialized" right
+    // after the first render. This is an optimization, but also prevents
+    // a bug where the graph would be marked "incorrect" during grading
+    // even if the user never interacted with it.
+    if (latestPropsRef.current !== originalPropsRef.current) {
+      dispatch(reinitialize(latestPropsRef.current));
+    }
+  }, [graph.type, numSegments, latestPropsRef]);
   return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -44446,7 +44497,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "23.4.0";
+const libVersion = "23.5.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47546,8 +47597,8 @@ exports.itemDataVersion = itemDataVersion;
 exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
-exports.lockedEllipseFillStyles = lockedEllipseFillStyles;
 exports.lockedFigureColors = lockedFigureColors;
+exports.lockedFigureFillStyles = lockedFigureFillStyles;
 exports.mediaQueries = mediaQueries;
 exports.parsePerseusItem = parsePerseusItem;
 exports.plotterPlotTypes = plotterPlotTypes;