@khanacademy/perseus 23.4.0 → 23.5.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, UniqueIDProvider, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -29,7 +29,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Ellipse, Line as Line$4, Point as Point$2, useMovable, Text as Text$1, Polygon, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
+import { vec, Ellipse, Line as Line$4, Point as Point$2, Polygon, useMovable, Text as Text$1, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -28656,13 +28656,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
@@ -28682,7 +28684,7 @@ const LockedEllipse = props => {
     center: center,
     radius: radius,
     angle: angle,
-    fillOpacity: lockedEllipseFillStyles[fillStyle],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
   });
@@ -28942,6 +28944,29 @@ const LockedPoint = props => {
   });
 };
 
+const LockedPolygon = props => {
+  const {
+    points,
+    color,
+    showVertices,
+    fillStyle,
+    strokeStyle
+  } = props;
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-polygon"
+  }, /*#__PURE__*/React.createElement(Polygon, {
+    points: [...points],
+    fillOpacity: lockedFigureFillStyles[fillStyle],
+    strokeStyle: strokeStyle,
+    color: lockedFigureColors[color]
+  }), showVertices && points.map((point, index) => /*#__PURE__*/React.createElement(Point$2, {
+    key: `locked-polygon-point-${index}`,
+    x: point[0],
+    y: point[1],
+    color: lockedFigureColors[color]
+  })));
+};
+
 const LockedVector = props => {
   const {
     color,
@@ -28972,13 +28997,17 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
+      case "vector":
+        return /*#__PURE__*/React.createElement(LockedVector, _extends({
+          key: `vector-${index}`
+        }, figure));
       case "ellipse":
         return /*#__PURE__*/React.createElement(LockedEllipse, _extends({
           key: `ellipse-${index}`
         }, figure));
-      case "vector":
-        return /*#__PURE__*/React.createElement(LockedVector, _extends({
-          key: `vector-${index}`
+      case "polygon":
+        return /*#__PURE__*/React.createElement(LockedPolygon, _extends({
+          key: `polygon-${index}`
         }, figure));
       default:
         /**
@@ -28992,6 +29021,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 {
@@ -31284,6 +31320,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:
@@ -31908,11 +31946,12 @@ function mafsStateToInteractiveGraph(state) {
 }
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    onChange
+    onChange,
+    graph
   } = props;
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
   useImperativeHandle(ref, () => ({
-    getUserInput: () => getGradableGraph(state, props.graph)
+    getUserInput: () => getGradableGraph(state, graph)
   }));
   const prevState = useRef(state);
   useEffect(() => {
@@ -31935,6 +31974,18 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+  const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const originalPropsRef = useRef(props);
+  const latestPropsRef = useLatestRef(props);
+  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.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -44101,7 +44152,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 = "23.4.0";
+const libVersion = "23.5.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47102,5 +47153,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedEllipseFillStyles, lockedFigureColors, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map