@khanacademy/perseus-editor 5.1.4 → 5.2.1

package/dist/index.js

@@ -70,7 +70,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "5.1.4";
+const libVersion = "5.2.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -30353,11 +30353,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__namespace.useState([
   // Using strings to make it easier to work with the text fields.
@@ -30368,6 +30371,7 @@ const LockedPointSettings = props => {
   const ids = wonderBlocksCore.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])];
 
@@ -30376,7 +30380,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);
@@ -30398,7 +30402,7 @@ const LockedPointSettings = props => {
   }, "x Coordinate"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     id: xCoordId,
     value: coordState[0],
-    onChange: newValue => handleChange(newValue, 0),
+    onChange: newValue => handleCoordChange(newValue, 0),
     onBlur: handleBlur,
     style: styles$d.textField
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -30410,10 +30414,32 @@ const LockedPointSettings = props => {
   }, "y Coordinate"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     id: yCoordId,
     value: coordState[1],
-    onChange: newValue => handleChange(newValue, 1),
+    onChange: newValue => handleCoordChange(newValue, 1),
     onBlur: handleBlur,
     style: styles$d.textField
-  }))));
+  }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$d.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    htmlFor: colorSelectId,
+    style: styles$d.label,
+    tag: "label"
+  }, "Color"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    id: colorSelectId,
+    selectedValue: style?.fill || "blue",
+    onChange: onChangeColor
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, possibleColors.map(colorName => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    key: colorName,
+    value: colorName,
+    label: colorName,
+    leftAccessory: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: [styles$d.colorCircle, {
+        backgroundColor: wonderBlocksTokens.color[colorName]
+      }]
+    })
+  }, colorName)))));
 };
 const styles$d = aphrodite.StyleSheet.create({
   container: {
@@ -30432,6 +30458,14 @@ const styles$d = aphrodite.StyleSheet.create({
   },
   textField: {
     width: wonderBlocksTokens.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 ${wonderBlocksTokens.color.offWhite}`,
+    borderRadius: "50%",
+    width: wonderBlocksTokens.spacing.large_24,
+    height: wonderBlocksTokens.spacing.large_24
   }
 });
 
@@ -30481,13 +30515,28 @@ const LockedFiguresSection = props => {
     };
     onChange(newProps);
   }
+  function changeColor(index, colorName) {
+    const lockedFigures = figures || [];
+    const newProps = {
+      lockedFigures: [...lockedFigures.slice(0, index), {
+        ...lockedFigures[index],
+        style: {
+          ...lockedFigures[index].style,
+          fill: colorName,
+          stroke: colorName
+        }
+      }, ...lockedFigures.slice(index + 1)]
+    };
+    onChange(newProps);
+  }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$c.container
   }, figures?.map((figure, index) => /*#__PURE__*/React__namespace.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__namespace.createElement(LockedFigureSelect, {
     id: `${uniqueId}-select`,
     onChange: addLockedFigure