@khanacademy/perseus 21.5.0 → 21.6.0

package/dist/es/index.css

@@ -3518,6 +3518,9 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
     font-size: 18px;
   }
 }
+.perseus-widget-editor-content .locked-figure-accordion h2 {
+  padding-top: 0;
+}
 .keypad-input {
   outline: none !important;
 }

package/dist/es/index.js

@@ -30,7 +30,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { Point as Point$2, useTransformContext, vec, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
+import { Line as Line$3, Point as Point$2, useTransformContext, vec, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -45,14 +45,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -63,13 +61,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -4255,7 +4251,6 @@ function _classPrivateFieldBase(receiver, privateKey) {
   if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
     throw new TypeError("attempted to use private field on non-instance");
   }
-
   return receiver;
 }
 
@@ -22758,7 +22753,7 @@ const FocusRing = function FocusRing(props) {
     borderRadius
   };
   return /*#__PURE__*/React.createElement("span", {
-    "data-test-id": "focus-ring",
+    "data-testid": "focus-ring",
     className: css(styles$z.ring),
     style: style
   }, children);
@@ -22829,7 +22824,7 @@ const CrossOutLine = function CrossOutLine(props) {
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
     className: css(styles$x.crossOutLine),
-    "data-test-id": "choice-icon__cross-out-line"
+    "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React.createElement("line", {
     // The line stretches from the bottom-left to top-right.
     // We don't quite go to the _very_ corner, because the cute
@@ -22932,7 +22927,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
   }, /*#__PURE__*/React.createElement("div", {
     // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
-    "data-test-id": "choice-icon__library-choice-icon",
+    "data-testid": "choice-icon__library-choice-icon",
     className: css(styles$w.circle, showCorrectness && correct && styles$w.circleCorrect, showCorrectness && !correct && styles$w.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$w.circleIncorrectAnswered)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
@@ -23282,7 +23277,7 @@ const Choice = function Choice(props) {
     color: color.offBlack64
   })))), showRationale && /*#__PURE__*/React.createElement("div", {
     className: rationaleClassName,
-    "data-test-id": `perseus-radio-rationale-content-${pos}`
+    "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
 const styles$u = StyleSheet.create({
@@ -28168,43 +28163,99 @@ Graph.defaultProps = {
   isMobile: false
 };
 
-/**
- * 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 _extends({}, style, {
-    stroke: color[(style == null ? void 0 : style.stroke) || "blue"],
-    fill: color[(style == null ? void 0 : style.fill) || "blue"]
+const LockedLine = props => {
+  const {
+    color: color$1,
+    lineStyle,
+    kind,
+    points,
+    showStartPoint,
+    showEndPoint
+  } = props;
+  const [point1, point2] = points;
+  let line;
+  if (kind === "line" || kind === "segment") {
+    const LineType = kind === "segment" ? Line$3.Segment : Line$3.ThroughPoints;
+    line = /*#__PURE__*/React.createElement(LineType, {
+      point1: point1.coord,
+      point2: point2.coord,
+      color: color[color$1],
+      style: lineStyle
+    });
+  } else {
+    // TODO(LEMS-1928): Implement rays
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-line"
+  }, line, showStartPoint && /*#__PURE__*/React.createElement(Point$2, {
+    x: point1.coord[0],
+    y: point1.coord[1],
+    svgCircleProps: {
+      style: {
+        fill: point1.filled ? color[point1.color] : color.white,
+        stroke: color[point1.color],
+        strokeWidth: spacing.xxxxSmall_2
+      }
+    }
+  }), showEndPoint && /*#__PURE__*/React.createElement(Point$2, {
+    x: point2.coord[0],
+    y: point2.coord[1],
+    svgCircleProps: {
+      style: {
+        fill: point2.filled ? color[point2.color] : color.white,
+        stroke: color[point2.color],
+        strokeWidth: spacing.xxxxSmall_2
+      }
+    }
+  }));
+};
+
+const LockedPoint = props => {
+  const {
+    color: color$1,
+    coord,
+    filled
+  } = props;
+  const [x, y] = coord;
+  return /*#__PURE__*/React.createElement(Point$2, {
+    x: x,
+    y: y,
+    svgCircleProps: {
+      style: {
+        fill: filled ? color[color$1] : color.white,
+        stroke: color[color$1],
+        strokeWidth: spacing.xxxxSmall_2
+      }
+    }
   });
-}
+};
+
 const GraphLockedLayer = props => {
   const {
     lockedFigures
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, lockedFigures.map((figure, index) => {
+    let Figure;
     switch (figure.type) {
       case "point":
-        const [x, y] = figure.coord;
-        return /*#__PURE__*/React.createElement(Point$2, {
-          key: `${figure.type}-${index}`,
-          x: x,
-          y: y,
-          svgCircleProps: {
-            style: convertStyle(figure.style)
-          }
-        });
+        Figure = LockedPoint;
+        break;
+      case "line":
+        Figure = LockedLine;
+        break;
+      default:
+        /**
+         * Devlopment-time future-proofing: This should
+         * fail during type-checking if we add a new locked
+         * shape type and forget to handle it in any other
+         * switch case here.
+         */
+        throw new UnreachableCaseError(figure);
     }
-
-    /**
-     * Devlopment-time future-proofing: This `never` should
-     * fail during type-checking if we add a new locked
-     * shape type and forget to handle it in any other
-     * switch case here.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    throw new UnreachableCaseError(figure.type);
+    return /*#__PURE__*/React.createElement(Figure, _extends({
+      key: `${figure.type}-${index}`
+    }, figure));
   }));
 };
 
@@ -28353,7 +28404,7 @@ function SVGLine(props) {
     y2: end[1],
     style: style,
     className: `${className}`,
-    "data-test-id": testId
+    "data-testid": testId
   });
 }
 
@@ -28482,7 +28533,7 @@ const MovableLine = props => {
     ref: line,
     tabIndex: 0,
     className: "movable-line",
-    "data-test-id": "movable-line",
+    "data-testid": "movable-line",
     style: {
       cursor: dragging ? "grabbing" : "grab"
     }
@@ -28584,7 +28635,7 @@ const StyledMovablePoint = props => {
     style: {
       "--movable-point-color": color$1
     },
-    "data-test-id": "movable-point"
+    "data-testid": "movable-point"
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -28609,7 +28660,7 @@ const StyledMovablePoint = props => {
     style: {
       fill: color$1
     },
-    "data-test-id": "movable-point__center"
+    "data-testid": "movable-point__center"
   })));
 };
 
@@ -28628,8 +28679,7 @@ const SegmentGraph = props => {
     },
     onMovePoint: (endpointIndex, destination) => {
       dispatch(moveControlPoint(endpointIndex, destination, i));
-    },
-    "data-testid": "segment" + i
+    }
   })));
 };
 const SegmentView = props => {
@@ -28659,8 +28709,7 @@ const LinearGraph = props => {
     dispatch
   } = props;
   const {
-    coords: lines,
-    type
+    coords: lines
   } = props.graphState;
   const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
   return /*#__PURE__*/React.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(LineView, {
@@ -28669,10 +28718,7 @@ const LinearGraph = props => {
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i))
-    // "linear" or "linear-system" + index
-    ,
-    "data-testid": type + i,
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
     stroke: colors[i]
   })));
 };
@@ -28912,7 +28958,6 @@ const PolygonGraph = props => {
   } = props;
   const {
     coords,
-    type,
     showAngles,
     showSides,
     range,
@@ -28983,8 +29028,7 @@ const PolygonGraph = props => {
   }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
     point: point,
-    onMove: destination => dispatch(movePoint(i, destination)),
-    "data-testid": type + i
+    onMove: destination => dispatch(movePoint(i, destination))
   })));
 };
 
@@ -42489,7 +42533,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 = "21.5.0";
+const libVersion = "21.6.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43617,6 +43661,7 @@ const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 
 // 2D range: xMin, xMax, yMin, yMax
 
+const lockedFigureColors = ["purple", "blue", "teal", "green", "gold", "red", "pink"];
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
 /**
@@ -45587,5 +45632,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, 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, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, 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, 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, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map