@khanacademy/perseus-editor 14.2.0 → 14.3.0

package/dist/index.js

@@ -36,12 +36,12 @@ var caretUpIcon = require('@phosphor-icons/core/bold/caret-up-bold.svg');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
 var copyIcon = require('@phosphor-icons/core/assets/regular/copy.svg');
 var autoPasteIcon = require('@phosphor-icons/core/assets/regular/note-pencil.svg');
+var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var arrowFatDown = require('@phosphor-icons/core/regular/arrow-fat-down.svg');
 var arrowFatLeft = require('@phosphor-icons/core/regular/arrow-fat-left.svg');
 var arrowFatRight = require('@phosphor-icons/core/regular/arrow-fat-right.svg');
 var arrowFatUp = require('@phosphor-icons/core/regular/arrow-fat-up.svg');
 var minusCircle = require('@phosphor-icons/core/regular/minus-circle.svg');
-var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var arrowCounterClockwise = require('@phosphor-icons/core/bold/arrow-counter-clockwise-bold.svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -85,17 +85,17 @@ var caretUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretUpIcon);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
 var copyIcon__default = /*#__PURE__*/_interopDefaultLegacy(copyIcon);
 var autoPasteIcon__default = /*#__PURE__*/_interopDefaultLegacy(autoPasteIcon);
+var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
 var arrowFatDown__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatDown);
 var arrowFatLeft__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatLeft);
 var arrowFatRight__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatRight);
 var arrowFatUp__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatUp);
 var minusCircle__default = /*#__PURE__*/_interopDefaultLegacy(minusCircle);
-var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
 var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCounterClockwise);
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -30769,7 +30769,7 @@ const LockedFigureSettingsActions = props => {
     onClick: onRemove,
     kind: "tertiary",
     style: styles$u.deleteButton
-  }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+  }, "Delete"), onMove && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
@@ -30793,7 +30793,7 @@ const LockedFigureSettingsActions = props => {
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
     style: styles$u.iconButton
-  }));
+  })));
 };
 const styles$u = aphrodite.StyleSheet.create({
   container: {
@@ -31294,7 +31294,8 @@ function LockedLabelSettings(props) {
         backgroundColor: wonderBlocksTokens.color.white,
         color: perseus.lockedFigureColors[color]
       }, styles$q.accordionHeader]
-    }, text))
+    }, text)),
+    containerStyle: !onMove && styles$q.innerLabelAccordionPanel
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     onChange: newCoords => {
@@ -31316,7 +31317,7 @@ function LockedLabelSettings(props) {
     })
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: styles$q.row
-  }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+  }, onMove && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: newColor => {
       onChangeProps({
@@ -31326,7 +31327,7 @@ function LockedLabelSettings(props) {
     style: styles$q.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     style: styles$q.row
   }, "size", /*#__PURE__*/React__namespace.createElement(Strut, {
@@ -31376,6 +31377,9 @@ const styles$q = aphrodite.StyleSheet.create({
   },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  innerLabelAccordionPanel: {
+    backgroundColor: wonderBlocksTokens.color.white
   }
 });
 
@@ -31625,24 +31629,127 @@ const styles$n = aphrodite.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"), {
+          ...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 wonderStuffCore.UnreachableCaseError(type);
+  }
+}
+
 const LockedPointSettings = props => {
   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 => ({
+      ...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 => ({
+      ...label,
+      coord: [label.coord[0] + xOffset, label.coord[1] + yOffset]
+    }));
+    onChangeProps(newProps);
+  }
+  function handleLabelChange(updatedLabel, labelIndex) {
+    const updatedLabels = [...labels];
+    updatedLabels[labelIndex] = {
+      ...labels[labelIndex],
+      ...updatedLabel
+    };
+    onChangeProps({
+      labels: updatedLabels
+    });
+  }
+  function handleLabelRemove(labelIndex) {
+    const updatedLabels = labels.filter((_, index) => index !== labelIndex);
+    onChangeProps({
+      labels: updatedLabels
     });
   }
   return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
@@ -31662,11 +31769,7 @@ const LockedPointSettings = props => {
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
     style: styles$m.spaceUnder,
-    onChange: newCoord => {
-      onChangeProps({
-        coord: newCoord
-      });
-    }
+    onChange: handleCoordChange
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
@@ -31678,8 +31781,38 @@ const LockedPointSettings = props => {
       onChangeProps({
         filled: !newValue
       });
+    },
+    style: styles$m.spaceUnder
+  }), flags?.["mafs"]?.["locked-point-labels"] && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labels.map((label, labelIndex) => /*#__PURE__*/React__namespace.createElement(LockedLabelSettings, _extends({}, label, {
+    expanded: true,
+    onChangeProps: newLabel => {
+      handleLabelChange(newLabel, labelIndex);
+    },
+    onRemove: () => {
+      handleLabelRemove(labelIndex);
     }
-  }), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  }))), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+    kind: "tertiary",
+    startIcon: plusCircle__default["default"],
+    onClick: () => {
+      const newLabel = {
+        ...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?.length],
+        // Default to the same color as the point
+        color: pointColor
+      };
+      onChangeProps({
+        labels: [...labels, newLabel]
+      });
+    },
+    style: styles$m.addButton
+  }, "Add visible label")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -31692,6 +31825,9 @@ const styles$m = aphrodite.StyleSheet.create({
   },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  addButton: {
+    alignSelf: "start"
   }
 });
 
@@ -32093,75 +32229,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"), {
-          ...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 wonderStuffCore.UnreachableCaseError(type);
-  }
-}
-
 const LockedFiguresSection = props => {
   // Keep track of all figures' accordions' expanded states for the
   // expand/collapse all button. Set the whole array to false initially.
@@ -32265,6 +32332,7 @@ const LockedFiguresSection = props => {
   }), isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => {
     return /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
+      flags: props.flags,
       showLabelsFlag: props.showLabelsFlag,
       expanded: expandedStates[index],
       onToggle: newValue => {
@@ -33290,6 +33358,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
     this.props.graph && this.props.apiOptions?.flags?.mafs?.[this.props.graph.type] && /*#__PURE__*/React__namespace.createElement(LockedFiguresSection, {
+      flags: this.props.apiOptions.flags,
       showLabelsFlag: this.props.apiOptions?.flags?.mafs?.["interactive-graph-locked-features-labels"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
@@ -37186,14 +37255,6 @@ class TableEditor extends React__namespace.Component {
     });
   };
   render() {
-    const tableProps = ___default["default"].pick(this.props, "headers", "answers", "onChange", "apiOptions");
-    ___default["default"].extend(tableProps, {
-      editableHeaders: true,
-      Editor,
-      onFocus: () => {},
-      onBlur: () => {},
-      trackInteraction: () => {}
-    });
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", null, "Number of columns:", " ", /*#__PURE__*/React__namespace.createElement(NumberInput, {
@@ -37218,7 +37279,17 @@ class TableEditor extends React__namespace.Component {
         }
       },
       useArrowKeys: true
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$1, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Table, tableProps)));
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, " ", "Table of answers:", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$1, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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
+    })));
   }
 }