@khanacademy/perseus-editor 14.2.0 → 14.3.0

package/dist/es/index.js

@@ -34,17 +34,17 @@ import caretUpIcon from '@phosphor-icons/core/bold/caret-up-bold.svg';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
 import copyIcon from '@phosphor-icons/core/assets/regular/copy.svg';
 import autoPasteIcon from '@phosphor-icons/core/assets/regular/note-pencil.svg';
+import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
 import arrowFatDown from '@phosphor-icons/core/regular/arrow-fat-down.svg';
 import arrowFatLeft from '@phosphor-icons/core/regular/arrow-fat-left.svg';
 import arrowFatRight from '@phosphor-icons/core/regular/arrow-fat-right.svg';
 import arrowFatUp from '@phosphor-icons/core/regular/arrow-fat-up.svg';
 import minusCircle from '@phosphor-icons/core/regular/minus-circle.svg';
-import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
 import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clockwise-bold.svg';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.2.0";
+const libVersion = "14.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -30661,7 +30661,7 @@ const LockedFigureSettingsActions = props => {
     onClick: onRemove,
     kind: "tertiary",
     style: styles$u.deleteButton
-  }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
+  }, "Delete"), onMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
@@ -30685,7 +30685,7 @@ const LockedFigureSettingsActions = props => {
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
     style: styles$u.iconButton
-  }));
+  })));
 };
 const styles$u = StyleSheet.create({
   container: {
@@ -31186,7 +31186,8 @@ function LockedLabelSettings(props) {
         backgroundColor: color.white,
         color: lockedFigureColors[color$1]
       }, styles$q.accordionHeader]
-    }, text))
+    }, text)),
+    containerStyle: !onMove && styles$q.innerLabelAccordionPanel
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     onChange: newCoords => {
@@ -31208,7 +31209,7 @@ function LockedLabelSettings(props) {
     })
   })), /*#__PURE__*/React.createElement(View, {
     style: styles$q.row
-  }, /*#__PURE__*/React.createElement(ColorSelect, {
+  }, onMove && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color$1,
     onChange: newColor => {
       onChangeProps({
@@ -31218,7 +31219,7 @@ function LockedLabelSettings(props) {
     style: styles$q.spaceUnder
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
+  })), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     style: styles$q.row
   }, "size", /*#__PURE__*/React.createElement(Strut, {
@@ -31268,6 +31269,9 @@ const styles$q = StyleSheet.create({
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
+  },
+  innerLabelAccordionPanel: {
+    backgroundColor: color.white
   }
 });
 
@@ -31512,24 +31516,122 @@ const styles$n = StyleSheet.create({
   }
 });
 
-/**
- * LockedPointSettings is a component that allows the user to edit the
- * settings of specifically a locked point on the graph.
- *
- * Used in the interactive graph editor's locked figures section.
- */
+const DEFAULT_COLOR = "grayH";
+function getDefaultFigureForType(type) {
+  switch (type) {
+    case "point":
+      return {
+        type: "point",
+        coord: [0, 0],
+        color: DEFAULT_COLOR,
+        filled: true,
+        labels: []
+      };
+    case "line":
+      return {
+        type: "line",
+        kind: "line",
+        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
+          coord: [2, 2]
+        })],
+        color: DEFAULT_COLOR,
+        lineStyle: "solid",
+        showPoint1: false,
+        showPoint2: false
+      };
+    case "vector":
+      return {
+        type: "vector",
+        points: [[0, 0], [2, 2]],
+        color: DEFAULT_COLOR
+      };
+    case "ellipse":
+      return {
+        type: "ellipse",
+        center: [0, 0],
+        radius: [1, 1],
+        angle: 0,
+        color: DEFAULT_COLOR,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        points: [[0, 2], [-1, 0], [1, 0]],
+        color: DEFAULT_COLOR,
+        showVertices: false,
+        fillStyle: "none",
+        strokeStyle: "solid"
+      };
+    case "function":
+      return {
+        type: "function",
+        color: DEFAULT_COLOR,
+        strokeStyle: "solid",
+        equation: "x^2",
+        directionalAxis: "x"
+      };
+    case "label":
+      return {
+        type: "label",
+        coord: [0, 0],
+        text: "",
+        color: DEFAULT_COLOR,
+        size: "medium"
+      };
+    default:
+      throw new UnreachableCaseError(type);
+  }
+}
+
 const LockedPointSettings = props => {
+  var _flags$mafs;
   const {
+    flags,
     coord,
     color: pointColor,
     filled = true,
+    labels,
     onChangeProps,
     onMove,
     onRemove
   } = props;
   function handleColorChange(newValue) {
-    onChangeProps({
+    const newProps = {
       color: newValue
+    };
+
+    // Update the color of the all labels to match the point
+    newProps.labels = labels.map(label => _extends({}, label, {
+      color: newValue
+    }));
+    onChangeProps(newProps);
+  }
+  function handleCoordChange(newCoord) {
+    const xOffset = newCoord[0] - coord[0];
+    const yOffset = newCoord[1] - coord[1];
+    const newProps = {
+      coord: newCoord
+    };
+
+    // Update the coord by the same amount as the point for all labels
+    newProps.labels = labels.map(label => _extends({}, label, {
+      coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = _extends({}, labels[labelIndex], updatedLabel);
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
     });
   }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
@@ -31549,11 +31651,7 @@ const LockedPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     style: styles$m.spaceUnder,
-    onChange: newCoord => {
-      onChangeProps({
-        coord: newCoord
-      });
-    }
+    onChange: handleCoordChange
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
@@ -31565,8 +31663,37 @@ const LockedPointSettings = props => {
       onChangeProps({
         filled: !newValue
       });
+    },
+    style: styles$m.spaceUnder
+  }), (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-point-labels"]) && /*#__PURE__*/React.createElement(React.Fragment, null, labels.map((label, labelIndex) => /*#__PURE__*/React.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
     }
-  }), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  }))), /*#__PURE__*/React.createElement(Button, {
+    kind: "tertiary",
+    startIcon: plusCircle,
+    onClick: () => {
+      const newLabel = _extends({}, getDefaultFigureForType("label"), {
+        // Place the label at the same position
+        // as the point. Add a small offset to
+        // avoid crowding.
+        coord: [coord[0] + 0.5,
+        // Additional offset for each label so
+        // they don't overlap.
+        coord[1] - 1 * (labels == null ? void 0 : labels.length)],
+        // Default to the same color as the point
+        color: pointColor
+      });
+      onChangeProps({
+        labels: [...labels, newLabel]
+      });
+    },
+    style: styles$m.addButton
+  }, "Add visible label")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -31579,6 +31706,9 @@ const styles$m = StyleSheet.create({
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
+  },
+  addButton: {
+    alignSelf: "start"
   }
 });
 
@@ -31968,74 +32098,6 @@ const LockedFigureSettings = props => {
   return null;
 };
 
-const DEFAULT_COLOR = "grayH";
-function getDefaultFigureForType(type) {
-  switch (type) {
-    case "point":
-      return {
-        type: "point",
-        coord: [0, 0],
-        color: DEFAULT_COLOR,
-        filled: true
-      };
-    case "line":
-      return {
-        type: "line",
-        kind: "line",
-        points: [getDefaultFigureForType("point"), _extends({}, getDefaultFigureForType("point"), {
-          coord: [2, 2]
-        })],
-        color: DEFAULT_COLOR,
-        lineStyle: "solid",
-        showPoint1: false,
-        showPoint2: false
-      };
-    case "vector":
-      return {
-        type: "vector",
-        points: [[0, 0], [2, 2]],
-        color: DEFAULT_COLOR
-      };
-    case "ellipse":
-      return {
-        type: "ellipse",
-        center: [0, 0],
-        radius: [1, 1],
-        angle: 0,
-        color: DEFAULT_COLOR,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "polygon":
-      return {
-        type: "polygon",
-        points: [[0, 2], [-1, 0], [1, 0]],
-        color: DEFAULT_COLOR,
-        showVertices: false,
-        fillStyle: "none",
-        strokeStyle: "solid"
-      };
-    case "function":
-      return {
-        type: "function",
-        color: DEFAULT_COLOR,
-        strokeStyle: "solid",
-        equation: "x^2",
-        directionalAxis: "x"
-      };
-    case "label":
-      return {
-        type: "label",
-        coord: [0, 0],
-        text: "",
-        color: DEFAULT_COLOR,
-        size: "medium"
-      };
-    default:
-      throw new UnreachableCaseError(type);
-  }
-}
-
 const LockedFiguresSection = props => {
   var _props$figures;
   // Keep track of all figures' accordions' expanded states for the
@@ -32137,6 +32199,7 @@ const LockedFiguresSection = props => {
   }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
     return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
+      flags: props.flags,
       showLabelsFlag: props.showLabelsFlag,
       expanded: expandedStates[index],
       onToggle: newValue => {
@@ -33130,6 +33193,7 @@ class InteractiveGraphEditor extends React.Component {
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
     this.props.graph && ((_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+      flags: this.props.apiOptions.flags,
       showLabelsFlag: (_this$props$apiOption4 = this.props.apiOptions) == null || (_this$props$apiOption4 = _this$props$apiOption4.flags) == null || (_this$props$apiOption4 = _this$props$apiOption4.mafs) == null ? void 0 : _this$props$apiOption4["interactive-graph-locked-features-labels"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
@@ -36927,14 +36991,6 @@ class TableEditor extends React.Component {
     };
   }
   render() {
-    const tableProps = _.pick(this.props, "headers", "answers", "onChange", "apiOptions");
-    _.extend(tableProps, {
-      editableHeaders: true,
-      Editor,
-      onFocus: () => {},
-      onBlur: () => {},
-      trackInteraction: () => {}
-    });
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React.createElement(NumberInput, {
@@ -36959,7 +37015,17 @@ class TableEditor extends React.Component {
         }
       },
       useArrowKeys: true
-    }))), /*#__PURE__*/React.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React.createElement(InfoTip$1, null, /*#__PURE__*/React.createElement("p", null, "The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, tableProps)));
+    }))), /*#__PURE__*/React.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React.createElement(InfoTip$1, null, /*#__PURE__*/React.createElement("p", null, "The student has to fill out all cells in the table. For partially filled tables create a table using the template, and insert text input boxes as desired."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, {
+      headers: this.props.headers,
+      answers: this.props.answers,
+      onChange: this.props.onChange,
+      apiOptions: this.props.apiOptions,
+      editableHeaders: true,
+      onFocus: () => {},
+      onBlur: () => {},
+      trackInteraction: () => {},
+      Editor: Editor
+    })));
   }
 }
 TableEditor.propTypes = {