@khanacademy/perseus 20.4.1 → 20.6.0

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export * as SizingUtils from "./util/sizing-utils";
 export { getAnswersFromWidgets, injectWidgets, } from "./util/extract-perseus-data";
 export { parsePerseusItem } from "./util/parse-perseus-json";
 export { generateTestPerseusItem, genericPerseusItemData, } from "./util/test-utils";
+export { convertWidgetNameToEnum, getWidgetTypeFromWidgetId, } from "./util/widget-enum-utils";
 /**
  * Mixins
  */

package/dist/index.js

@@ -33,6 +33,7 @@ var caretDown = require('@phosphor-icons/core/assets/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
@@ -19559,7 +19560,6 @@ class Renderer extends React__namespace.Component {
 
   // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
   _getAllWidgetsInfo = props => {
-    // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
     return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
       if (!widgetInfo.type || !widgetInfo.alignment) {
         const newValues = {};
@@ -28278,6 +28278,18 @@ class Graph extends React__namespace.Component {
   }
 }
 
+/**
+ * Takes a style object with color names and converts them to actual
+ * Wonder Blocks color values. This way, we can use colors and their
+ * names in the editor UI without having to convert them back and forth.
+ */
+function convertStyle(style) {
+  return {
+    ...style,
+    stroke: wonderBlocksTokens.color[style?.stroke || "blue"],
+    fill: wonderBlocksTokens.color[style?.fill || "blue"]
+  };
+}
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -28291,7 +28303,7 @@ const GraphLockedLayer = props => {
           x: x,
           y: y,
           svgCircleProps: {
-            style: figure.style
+            style: convertStyle(figure.style)
           }
         });
     }
@@ -29690,7 +29702,7 @@ const makeInvalidTypeError = (functionName, graphType) => {
 
 // There's no transform function in exports
 
-class InteractiveGraph extends React__namespace.Component {
+class LegacyInteractiveGraph extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property 'points' has no initializer and is not definitely assigned in the constructor.
 
   // @ts-expect-error - TS2564 - Property 'shouldResetGraphie' has no initializer and is not definitely assigned in the constructor.
@@ -29710,7 +29722,6 @@ class InteractiveGraph extends React__namespace.Component {
       type: "linear"
     }
   };
-  mafsRef = /*#__PURE__*/React__namespace.createRef();
   state = {
     shouldShowInstructions: _getShouldShowInstructions(this.props)
   };
@@ -30821,26 +30832,13 @@ class InteractiveGraph extends React__namespace.Component {
       graph: graph
     });
   };
-  getUserInput = () => this.mafsRef.current?.getUserInput?.() ?? InteractiveGraph.getUserInputFromProps(this.props);
+  getUserInput = () => InteractiveGraph.getUserInputFromProps(this.props);
   simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput(), rubric, this);
   focus = $__default["default"].noop;
-
-  // const segment: boolean = useFeatureIsOn("mafs-segment-graph");
-  // <Renderer apiOptions={{flags: {mafs: {segment}}}}
   render() {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
     const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-
-    // Mafs shim
-    if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
-      return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, this.props, {
-        ref: this.mafsRef,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        box: box
-      }));
-    }
     let instructions;
     // isClickToAddPoints() only applies to points and polygons
     if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
@@ -30886,6 +30884,52 @@ class InteractiveGraph extends React__namespace.Component {
       isMobile: isMobile
     }));
   }
+}
+class InteractiveGraph extends React__namespace.Component {
+  legacyGraphRef = /*#__PURE__*/React__namespace.createRef();
+  mafsRef = /*#__PURE__*/React__namespace.createRef();
+  static defaultProps = {
+    labels: ["x", "y"],
+    range: [[-10, 10], [-10, 10]],
+    step: [1, 1],
+    backgroundImage: defaultBackgroundImage,
+    markings: "graph",
+    showTooltips: false,
+    showProtractor: false,
+    showRuler: false,
+    rulerLabel: "",
+    rulerTicks: 10,
+    graph: {
+      type: "linear"
+    }
+  };
+  getUserInput = () => {
+    if (this.mafsRef.current) {
+      return this.mafsRef.current.getUserInput?.();
+    }
+    if (this.legacyGraphRef.current) {
+      return this.legacyGraphRef.current.getUserInput();
+    }
+    throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
+  };
+  simpleValidate = rubric => InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
+  render() {
+    // Mafs shim
+    if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
+      const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
+      const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
+      const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+      return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, this.props, {
+        ref: this.mafsRef,
+        gridStep: gridStep,
+        snapStep: snapStep,
+        box: box
+      }));
+    }
+    return /*#__PURE__*/React__namespace.createElement(LegacyInteractiveGraph, _extends({
+      ref: this.legacyGraphRef
+    }, this.props));
+  }
   static getQuadraticCoefficients(coords) {
     const p1 = coords[0];
     const p2 = coords[1];
@@ -41605,7 +41649,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.4.1";
+const libVersion = "20.6.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -42377,7 +42421,6 @@ class ServerItemRenderer extends React__namespace.Component {
     const qScore = this.questionRenderer.scoreWidgets();
     const qGuess = this.questionRenderer.getUserInputForWidgets();
     const state = this.questionRenderer.getSerializedState();
-    // @ts-expect-error - TS2322 - Type 'Partial<Record<string, KEScore>>' is not assignable to type '{ [key: string]: KEScore; }'. | TS2345 - Argument of type '{ [widgetId: string]: PerseusScore; }' is not assignable to parameter of type 'Partial<Record<string, { type: "invalid"; message?: string | null | undefined; suppressAlmostThere?: boolean | null | undefined; }>>'.
     return mapObject(qScore, (score, id) => {
       return Util.keScoreFromPerseusScore(score, qGuess[id], state);
     });
@@ -44309,6 +44352,71 @@ function generateTestPerseusItem() {
   };
 }
 
+/**
+ * Some helpers for CEDAR logging. CEDAR convention dictates
+ * that enum values should be upper case. Ex: for the
+ * PerseusWidgetUsedInProblemAttempt CEDAR event, we needed
+ * to: get the type and convert that to an enum value.
+ */
+
+const widgetNameToEnum = {
+  categorizer: "CATEGORIZER",
+  "cs-program": "CS_PROGRAM",
+  definition: "DEFINITION",
+  "deprecated-standin": "DEPRECATED_STANDIN",
+  dropdown: "DROPDOWN",
+  explanation: "EXPLANATION",
+  expression: "EXPRESSION",
+  "graded-group-set": "GRADED_GROUP_SET",
+  "graded-group": "GRADED_GROUP",
+  grapher: "GRAPHER",
+  group: "GROUP",
+  iframe: "IFRAME",
+  image: "IMAGE",
+  "input-number": "INPUT_NUMBER",
+  interaction: "INTERACTIVE",
+  "interactive-graph": "INTERACTIVE_GRAPH",
+  "label-image": "LABEL_IMAGE",
+  "lights-puzzle": "LIGHTS_PUZZLE",
+  matcher: "MATCHER",
+  matrix: "MATRIX",
+  measurer: "MEASURER",
+  "molecule-renderer": "MOLECULE",
+  "number-line": "NUMBER_LINE",
+  "numeric-input": "NUMERIC_INPUT",
+  orderer: "ORDERER",
+  passage: "PASSAGE",
+  "passage-ref": "PASSAGE_REF",
+  "passage-ref-target": "PASSAGE_REF_TARGET",
+  plotter: "PLOTTER",
+  "python-program": "PYTHON_PROGRAM",
+  "reaction-diagram": "REACTION_DIAGRAM",
+  radio: "RADIO",
+  sequence: "SEQUENCE",
+  simulator: "SIMULATOR",
+  sorter: "SORTER",
+  table: "TABLE",
+  "unit-input": "UNIT",
+  video: "VIDEO"
+};
+function convertWidgetNameToEnum(name) {
+  const widgetEnum = widgetNameToEnum[name];
+  if (!widgetEnum) {
+    throw new Error(`Unknown widget name: ${name}`);
+  }
+  return widgetEnum;
+}
+function getWidgetTypeFromWidgetId(widgetId) {
+  const [widgetType, widgetNumber] = widgetId.split(" ");
+  if (!widgetNumber) {
+    throw new Error(`Incorrect format for widget ID: ${widgetId}`);
+  }
+  if (!widgetNameToEnum[widgetType]) {
+    throw new Error(`Unknown widget type (${widgetType}) in widget ID: ${widgetId}`);
+  }
+  return widgetType;
+}
+
 const EditorJsonify = {
   serialize: function () {
     // Omit props that get passed to all widgets
@@ -44364,10 +44472,12 @@ exports.buildEmptyItemTreeForShape = buildEmptyItemTreeForShape;
 exports.buildMapper = buildMapper;
 exports.components = components;
 exports.constants = constants;
+exports.convertWidgetNameToEnum = convertWidgetNameToEnum;
 exports.displaySigFigs = displaySigFigs;
 exports.generateTestPerseusItem = generateTestPerseusItem;
 exports.genericPerseusItemData = genericPerseusItemData;
 exports.getAnswersFromWidgets = getAnswersFromWidgets;
+exports.getWidgetTypeFromWidgetId = getWidgetTypeFromWidgetId;
 exports.globalConstants = globalConstants;
 exports.globalStyles = globalStyles;
 exports.icons = iconPaths;