@khanacademy/perseus-editor 5.1.3 → 5.2.0

package/dist/components/locked-point-settings.d.ts

@@ -3,6 +3,7 @@ import type { LockedPoint } from "@khanacademy/perseus";
 export type Props = LockedPoint & {
     onRemove: () => void;
     onChangeCoord: (coord: [number, number]) => void;
+    onChangeColor: (color: string) => void;
 };
 declare const LockedPointSettings: (props: Props) => JSX.Element;
 export default LockedPointSettings;

package/dist/es/index.js

@@ -30,7 +30,7 @@ import * as i18n$1 from '@khanacademy/wonder-blocks-i18n';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.1.3";
+const libVersion = "5.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -30277,11 +30277,14 @@ function getDefaultFigureForFigureType(type) {
  *
  * Used in the interactive graph editor's locked figures section.
  */
+const possibleColors = ["purple", "blue", "teal", "green", "gold", "red", "pink"];
 const LockedPointSettings = props => {
   const {
     coord,
-    onRemove,
-    onChangeCoord
+    style,
+    onChangeColor,
+    onChangeCoord,
+    onRemove
   } = props;
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
@@ -30292,6 +30295,7 @@ const LockedPointSettings = props => {
   const ids = useUniqueIdWithMock();
   const xCoordId = ids.get("x-coord");
   const yCoordId = ids.get("y-coord");
+  const colorSelectId = ids.get("color-select");
   function handleBlur() {
     const validCoord = [getValidNumberFromString(coordState[0]), getValidNumberFromString(coordState[1])];
 
@@ -30300,7 +30304,7 @@ const LockedPointSettings = props => {
     // Update the graph with the new coordinates.
     onChangeCoord(validCoord);
   }
-  function handleChange(newValue, coordIndex) {
+  function handleCoordChange(newValue, coordIndex) {
     const newCoord = [...coordState];
     newCoord[coordIndex] = newValue;
     setCoordState(newCoord);
@@ -30322,7 +30326,7 @@ const LockedPointSettings = props => {
   }, "x Coordinate"), /*#__PURE__*/React.createElement(TextField, {
     id: xCoordId,
     value: coordState[0],
-    onChange: newValue => handleChange(newValue, 0),
+    onChange: newValue => handleCoordChange(newValue, 0),
     onBlur: handleBlur,
     style: styles$d.textField
   })), /*#__PURE__*/React.createElement(View, {
@@ -30334,10 +30338,32 @@ const LockedPointSettings = props => {
   }, "y Coordinate"), /*#__PURE__*/React.createElement(TextField, {
     id: yCoordId,
     value: coordState[1],
-    onChange: newValue => handleChange(newValue, 1),
+    onChange: newValue => handleCoordChange(newValue, 1),
     onBlur: handleBlur,
     style: styles$d.textField
-  }))));
+  }))), /*#__PURE__*/React.createElement(View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    htmlFor: colorSelectId,
+    style: styles$d.label,
+    tag: "label"
+  }, "Color"), /*#__PURE__*/React.createElement(SingleSelect, {
+    id: colorSelectId,
+    selectedValue: (style == null ? void 0 : style.fill) || "blue",
+    onChange: onChangeColor
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, possibleColors.map(colorName => /*#__PURE__*/React.createElement(OptionItem, {
+    key: colorName,
+    value: colorName,
+    label: colorName,
+    leftAccessory: /*#__PURE__*/React.createElement(View, {
+      style: [styles$d.colorCircle, {
+        backgroundColor: color[colorName]
+      }]
+    })
+  }, colorName)))));
 };
 const styles$d = StyleSheet.create({
   container: {
@@ -30356,6 +30382,14 @@ const styles$d = StyleSheet.create({
   },
   textField: {
     width: spacing.xxxLarge_64
+  },
+  colorCircle: {
+    // Add a white border so that the color circle is visible when
+    // the dropdown option is highlighted with its blue background.
+    border: `2px solid ${color.offWhite}`,
+    borderRadius: "50%",
+    width: spacing.large_24,
+    height: spacing.large_24
   }
 });
 
@@ -30404,13 +30438,26 @@ const LockedFiguresSection = props => {
     };
     onChange(newProps);
   }
+  function changeColor(index, colorName) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures.slice(0, index), _extends({}, lockedFigures[index], {
+        style: _extends({}, lockedFigures[index].style, {
+          fill: colorName,
+          stroke: colorName
+        })
+      }), ...lockedFigures.slice(index + 1)]
+    };
+    onChange(newProps);
+  }
   return /*#__PURE__*/React.createElement(View, {
     style: styles$c.container
   }, figures == null ? void 0 : figures.map((figure, index) => /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
     key: `${uniqueId}-locked-${figure}-${index}`
   }, figure, {
-    onRemove: () => removeLockedFigure(index),
-    onChangeCoord: coord => changeCoord(index, coord)
+    onChangeColor: color => changeColor(index, color),
+    onChangeCoord: coord => changeCoord(index, coord),
+    onRemove: () => removeLockedFigure(index)
   }))), /*#__PURE__*/React.createElement(LockedFigureSelect, {
     id: `${uniqueId}-select`,
     onChange: addLockedFigure