@khanacademy/perseus 21.5.0 → 21.6.0

package/dist/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/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, } from "./perseus-types";
+export { PerseusExpressionAnswerFormConsidered, plotterPlotTypes, ItemExtras, lockedFigureColors, } from "./perseus-types";
 export { traverse } from "./traversal";
 export { isItemRenderableByVersion } from "./renderability";
 export { violatingWidgets } from "./a11y";
@@ -86,7 +86,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, LockedFigureType, LockedPoint, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureColor, LockedFigureType, LockedPointType, LockedLineType, 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

@@ -22853,7 +22853,7 @@ const FocusRing = function (props) {
     borderRadius
   };
   return /*#__PURE__*/React__namespace.createElement("span", {
-    "data-test-id": "focus-ring",
+    "data-testid": "focus-ring",
     className: aphrodite.css(styles$z.ring),
     style: style
   }, children);
@@ -22924,7 +22924,7 @@ const CrossOutLine = function (props) {
     height: CROSS_OUT_LINE_SIZE,
     viewBox: `0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`,
     className: aphrodite.css(styles$x.crossOutLine),
-    "data-test-id": "choice-icon__cross-out-line"
+    "data-testid": "choice-icon__cross-out-line"
   }, /*#__PURE__*/React__namespace.createElement("line", {
     // The line stretches from the bottom-left to top-right.
     // We don't quite go to the _very_ corner, because the cute
@@ -23027,7 +23027,7 @@ const ChoiceIcon = function (props) {
   }, /*#__PURE__*/React__namespace.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: aphrodite.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
@@ -23383,7 +23383,7 @@ const Choice = function (props) {
     });
   })), showRationale && /*#__PURE__*/React__namespace.createElement("div", {
     className: rationaleClassName,
-    "data-test-id": `perseus-radio-rationale-content-${pos}`
+    "data-testid": `perseus-radio-rationale-content-${pos}`
   }, rationale));
 };
 const styles$u = aphrodite.StyleSheet.create({
@@ -28322,44 +28322,99 @@ 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 LockedLine = props => {
+  const {
+    color,
+    lineStyle,
+    kind,
+    points,
+    showStartPoint,
+    showEndPoint
+  } = props;
+  const [point1, point2] = points;
+  let line;
+  if (kind === "line" || kind === "segment") {
+    const LineType = kind === "segment" ? mafs.Line.Segment : mafs.Line.ThroughPoints;
+    line = /*#__PURE__*/React__namespace.createElement(LineType, {
+      point1: point1.coord,
+      point2: point2.coord,
+      color: wonderBlocksTokens.color[color],
+      style: lineStyle
+    });
+  } else {
+    // TODO(LEMS-1928): Implement rays
+    return null;
+  }
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "locked-line"
+  }, line, showStartPoint && /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+    x: point1.coord[0],
+    y: point1.coord[1],
+    svgCircleProps: {
+      style: {
+        fill: point1.filled ? wonderBlocksTokens.color[point1.color] : wonderBlocksTokens.color.white,
+        stroke: wonderBlocksTokens.color[point1.color],
+        strokeWidth: wonderBlocksTokens.spacing.xxxxSmall_2
+      }
+    }
+  }), showEndPoint && /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+    x: point2.coord[0],
+    y: point2.coord[1],
+    svgCircleProps: {
+      style: {
+        fill: point2.filled ? wonderBlocksTokens.color[point2.color] : wonderBlocksTokens.color.white,
+        stroke: wonderBlocksTokens.color[point2.color],
+        strokeWidth: wonderBlocksTokens.spacing.xxxxSmall_2
+      }
+    }
+  }));
+};
+
+const LockedPoint = props => {
+  const {
+    color,
+    coord,
+    filled
+  } = props;
+  const [x, y] = coord;
+  return /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+    x: x,
+    y: y,
+    svgCircleProps: {
+      style: {
+        fill: filled ? wonderBlocksTokens.color[color] : wonderBlocksTokens.color.white,
+        stroke: wonderBlocksTokens.color[color],
+        strokeWidth: wonderBlocksTokens.spacing.xxxxSmall_2
+      }
+    }
+  });
+};
+
 const GraphLockedLayer = props => {
   const {
     lockedFigures
   } = props;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lockedFigures.map((figure, index) => {
+    let Figure;
     switch (figure.type) {
       case "point":
-        const [x, y] = figure.coord;
-        return /*#__PURE__*/React__namespace.createElement(mafs.Point, {
-          key: `${figure.type}-${index}`,
-          x: x,
-          y: y,
-          svgCircleProps: {
-            style: convertStyle(figure.style)
-          }
-        });
-    }
-
-    /**
-     * 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 wonderStuffCore.UnreachableCaseError(figure.type);
+        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 wonderStuffCore.UnreachableCaseError(figure);
+    }
+    return /*#__PURE__*/React__namespace.createElement(Figure, _extends({
+      key: `${figure.type}-${index}`
+    }, figure));
   }));
 };
 
@@ -28511,7 +28566,7 @@ function SVGLine(props) {
     y2: end[1],
     style: style,
     className: `${className}`,
-    "data-test-id": testId
+    "data-testid": testId
   });
 }
 
@@ -28640,7 +28695,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"
     }
@@ -28742,7 +28797,7 @@ const StyledMovablePoint = props => {
     style: {
       "--movable-point-color": color
     },
-    "data-test-id": "movable-point"
+    "data-testid": "movable-point"
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -28767,7 +28822,7 @@ const StyledMovablePoint = props => {
     style: {
       fill: color
     },
-    "data-test-id": "movable-point__center"
+    "data-testid": "movable-point__center"
   })));
 };
 
@@ -28786,8 +28841,7 @@ const SegmentGraph = props => {
     },
     onMovePoint: (endpointIndex, destination) => {
       dispatch(moveControlPoint(endpointIndex, destination, i));
-    },
-    "data-testid": "segment" + i
+    }
   })));
 };
 const SegmentView = props => {
@@ -28817,8 +28871,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__namespace.createElement(React__namespace.Fragment, null, lines?.map((line, i) => /*#__PURE__*/React__namespace.createElement(LineView, {
@@ -28827,10 +28880,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]
   })));
 };
@@ -29077,7 +29127,6 @@ const PolygonGraph = props => {
   } = props;
   const {
     coords,
-    type,
     showAngles,
     showSides,
     range,
@@ -29149,8 +29198,7 @@ const PolygonGraph = props => {
   }), points.map((point, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
     key: "point-" + i,
     point: point,
-    onMove: destination => dispatch(movePoint(i, destination)),
-    "data-testid": type + i
+    onMove: destination => dispatch(movePoint(i, destination))
   })));
 };
 
@@ -42644,7 +42692,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43777,6 +43825,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"];
 
 /**
@@ -45823,6 +45872,7 @@ exports.itemDataVersion = itemDataVersion;
 exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
+exports.lockedFigureColors = lockedFigureColors;
 exports.mediaQueries = mediaQueries;
 exports.parsePerseusItem = parsePerseusItem;
 exports.plotterPlotTypes = plotterPlotTypes;