@khanacademy/perseus-editor 8.0.0 → 8.2.0

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, lockedFigureColors, lockedFigureFillStyles, getLineCoords, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, displaySigFigs, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
 import _ from 'underscore';
@@ -20,7 +20,7 @@ import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
-import { LabelSmall, LabelMedium, LabelLarge, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
 import Button from '@khanacademy/wonder-blocks-button';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -33,10 +33,11 @@ import Switch from '@khanacademy/wonder-blocks-switch';
 import minusCircle from '@phosphor-icons/core/regular/minus-circle.svg';
 import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
 import Banner from '@khanacademy/wonder-blocks-banner';
+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 = "8.0.0";
+const libVersion = "8.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -226,7 +227,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$G.button
+      style: styles$H.button
     }, ({
       hovered,
       focused,
@@ -234,7 +235,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$b, icon));
   }
 }
-const styles$G = StyleSheet.create({
+const styles$H = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20739,13 +20740,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$F.expanded : styles$F.collapsed;
+  const iconStyle = props.isExpanded ? styles$G.expanded : styles$G.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$F = StyleSheet.create({
+const styles$G = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20778,16 +20779,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$E.errorContainer
+      style: styles$F.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$E.title,
+      style: styles$F.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$E.errorExplanation
+      style: styles$F.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
-      style: styles$E.error,
+      style: styles$F.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20796,7 +20797,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$E = StyleSheet.create({
+const styles$F = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24590,7 +24591,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$D.baseButton, color === "green" && styles$D.green, color === "orange" && styles$D.orange),
+      className: css(styles$E.baseButton, color === "green" && styles$E.green, color === "orange" && styles$E.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24605,7 +24606,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$D = StyleSheet.create({
+const styles$E = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24825,23 +24826,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader)
+    className: css(styles$D.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$D.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$C.row, styles$C.rowHeading)
+    className: css(styles$D.row, styles$D.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$C.containerHeader)
+    className: "pod-title " + css(styles$D.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24854,11 +24855,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$D.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft, styles$C.containerHeader)
+    className: css(styles$D.columnLeft, styles$D.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24871,28 +24872,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader)
+    className: css(styles$D.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.containerHeader, styles$C.previewCollectionHeader)
+    className: css(styles$D.containerHeader, styles$D.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$C.containerTitle)
+    className: css(styles$D.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.container)
+    className: css(styles$D.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$C.row)
+    className: css(styles$D.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$C.contentIndent)
+    className: css(path.length > 0 && styles$D.contentIndent)
   }, children));
 };
 
@@ -25015,11 +25016,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.row)
+    className: css(styles$D.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25027,9 +25028,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25045,13 +25046,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.row)
+    className: css(styles$D.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$C.hintEditor),
+    className: css(styles$D.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25066,9 +25067,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnRight)
+    className: css(styles$D.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$C.sticky)
+    className: css(sticky && styles$D.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25085,9 +25086,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.columnLeft)
+    className: css(styles$D.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$C.tagsEditor)
+    className: css(styles$D.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25118,23 +25119,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$C.control)
+      className: css(styles$D.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$C.verticalFlip)
+      className: css(styles$D.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$C.control)
+      className: css(styles$D.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$C.control)
+      className: css(styles$D.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25142,7 +25143,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$C.arrayElement, !elementIsLeaf && styles$C.arrayElementAndNotLeaf)
+      className: css(styles$D.arrayElement, !elementIsLeaf && styles$D.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25168,7 +25169,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$C.objectElement)
+    className: css(styles$D.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25335,7 +25336,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$C = StyleSheet.create({
+const styles$D = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25487,47 +25488,47 @@ const StatefulArticleEditor = createReactClass({
       screen
     } = this.state;
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: styles$B.controlBar
+      style: styles$C.controlBar
     }, /*#__PURE__*/React.createElement("span", {
-      style: styles$B.controls
+      style: styles$C.controls
     }, "Mode:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$B.controlSelected : styles$B.control
+      style: mode === "edit" ? styles$C.controlSelected : styles$C.control
     }, "EDIT"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$B.controlSelected : styles$B.control
+      style: mode === "preview" ? styles$C.controlSelected : styles$C.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$B.controlSelected : styles$B.control
+      style: mode === "json" ? styles$C.controlSelected : styles$C.control
     }, "JSON")), /*#__PURE__*/React.createElement("span", {
-      style: styles$B.controls
+      style: styles$C.controls
     }, "Screen:", " ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$B.controlSelected : styles$B.control
+      style: screen === "phone" ? styles$C.controlSelected : styles$C.control
     }, "PHONE"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$B.controlSelected : styles$B.control
+      style: screen === "tablet" ? styles$C.controlSelected : styles$C.control
     }, "TABLET"), " | ", /*#__PURE__*/React.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$B.controlSelected : styles$B.control
+      style: screen === "desktop" ? styles$C.controlSelected : styles$C.control
     }, "DESKTOP"))), /*#__PURE__*/React.createElement("div", {
-      style: styles$B.editor
+      style: styles$C.editor
     }, /*#__PURE__*/React.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$B = {
+const styles$C = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27017,10 +27018,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$A.title)
+      className: css(styles$B.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$A.input)
+      className: css(styles$B.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27045,7 +27046,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$A.hintsTitle)
+      className: css(styles$B.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27082,7 +27083,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$A = StyleSheet.create({
+const styles$B = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28421,13 +28422,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$z.outerWrapper
+    style: styles$A.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$z = StyleSheet.create({
+const styles$A = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29473,16 +29474,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$y.label)
+    className: css(styles$z.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$y.row, style]
+    style: [styles$z.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$y.spaceEnd
+    style: styles$z.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$y.spaceStart
+    style: styles$z.spaceStart
   }, label)));
 };
-const styles$y = StyleSheet.create({
+const styles$z = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29559,11 +29560,11 @@ class Spring extends React.Component {
     } = this.props;
     return React.createElement(View, {
       "aria-hidden": "true",
-      style: [styles$x.grow, style]
+      style: [styles$y.grow, style]
     });
   }
 }
-const styles$x = StyleSheet.create({
+const styles$y = StyleSheet.create({
   grow: {
     flexGrow: 1
   }
@@ -29592,6 +29593,38 @@ const strutStyle = size => {
   };
 };
 
+function Heading({
+  title,
+  isOpen,
+  isCollapsible,
+  onToggle
+}) {
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: color.offBlack8,
+      padding: spacing.xSmall_8,
+      marginTop: spacing.small_12,
+      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+      // variable found in perseus-editor.less. For now, it must
+      // match otherwise there's a gap from this header to the edge
+      // of the editor borders.
+      marginInline: -10,
+      cursor: isCollapsible ? "pointer" : "default",
+      userSelect: "none"
+    },
+    onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
+  }, /*#__PURE__*/React.createElement(LabelLarge, {
+    style: {
+      fontSize: 14,
+      fontWeight: 600
+    }
+  }, title), isCollapsible && /*#__PURE__*/React.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -29712,17 +29745,17 @@ const LockedFigureSelect = props => {
   } = props;
   const figureTypes = props.showM2Features ? ["point", "line", "vector", "ellipse", "polygon"] : ["point", "line"];
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$w.container
+    style: styles$x.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$w.addElementSelect
+    style: styles$x.addElementSelect
   }, figureTypes.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }, figureType))));
 };
-const styles$w = StyleSheet.create({
+const styles$x = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -29753,19 +29786,19 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$v.row
+    style: styles$w.row
   }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$v.textField
+    style: styles$w.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$w = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29790,6 +29823,12 @@ const CoordinatePairInput = props => {
   const [coordState, setCoordState] = React.useState([
   // Using strings to make it easier to work with the text fields.
   coord[0].toString(), coord[1].toString()]);
+
+  // Update the local state when the props change. (Such as when the graph
+  // type is changed, and the coordinates are reset.)
+  React.useEffect(() => {
+    setCoordState([coord[0].toString(), coord[1].toString()]);
+  }, [coord]);
   function handleCoordChange(newValue, coordIndex) {
     // Update the local state (update the input field value).
     const newCoordState = [...coordState];
@@ -29808,32 +29847,32 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$u.row, style]
+    style: [styles$v.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$u.textField, error ? styles$u.errorField : undefined]
+    style: [styles$v.textField, error ? styles$v.errorField : undefined]
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$u.row
+    style: styles$v.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(TextField, {
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$u.textField, error ? styles$u.errorField : undefined]
+    style: [styles$v.textField, error ? styles$v.errorField : undefined]
   })));
 };
-const styles$u = StyleSheet.create({
+const styles$v = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29866,14 +29905,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$t.container, containerStyle],
-    headerStyle: styles$t.accordionHeader,
+    style: [styles$u.container, containerStyle],
+    headerStyle: styles$u.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.accordionPanel, panelStyle]
+    style: [styles$u.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$t = StyleSheet.create({
+const styles$u = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -29904,13 +29943,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$s.colorSwatch, {
+    style: [styles$t.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$s = StyleSheet.create({
+const styles$t = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -29929,10 +29968,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$r.row, style]
+    style: [styles$s.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$r.row
+    style: styles$s.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -29951,7 +29990,7 @@ const ColorSelect = props => {
     })
   }, colorName)))));
 };
-const styles$r = StyleSheet.create({
+const styles$s = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29967,17 +30006,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$q.container, {
+    style: [styles$r.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$q.innerCircle, {
+    style: [styles$r.innerCircle, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$q = StyleSheet.create({
+const styles$r = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30008,40 +30047,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$p.container
+    style: styles$q.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$p.deleteButton
+    style: styles$q.deleteButton
   }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), props.showM2Features && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$p.iconButton
+    style: styles$q.iconButton
   })));
 };
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30088,7 +30127,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$o.row
+      style: styles$p.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(EllipseSwatch, {
@@ -30097,19 +30136,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$o.row
+    style: styles$p.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$o.spaceUnder
+    style: styles$p.spaceUnder
   }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30121,7 +30160,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$o.row, styles$o.spaceUnder]
+    style: [styles$p.row, styles$p.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30129,7 +30168,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$o.row
+    style: styles$p.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30146,7 +30185,7 @@ const LockedEllipseSettings = props => {
     label: option
   }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$o.row
+    style: styles$p.row
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30170,7 +30209,7 @@ const LockedEllipseSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30191,7 +30230,7 @@ const LabeledSwitch = props => {
   const ids = useUniqueIdWithMock();
   const switchId = ids.get("switch");
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$n.row, style]
+    style: [styles$o.row, style]
   }, /*#__PURE__*/React.createElement(Switch, {
     id: switchId,
     checked: checked,
@@ -30203,7 +30242,7 @@ const LabeledSwitch = props => {
     htmlFor: switchId
   }, label));
 };
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30237,13 +30276,13 @@ const DefiningPointSettings = props => {
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
-    containerStyle: styles$m.container,
-    panelStyle: styles$m.accordionPanel,
+    containerStyle: styles$n.container,
+    panelStyle: styles$n.accordionPanel,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$m.row
+      style: styles$n.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), showPoint && /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30253,7 +30292,7 @@ const DefiningPointSettings = props => {
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
     error: !!error,
-    style: styles$m.spaceUnder,
+    style: styles$n.spaceUnder,
     onChange: newCoords => {
       onChangeProps({
         coord: newCoords
@@ -30262,12 +30301,12 @@ const DefiningPointSettings = props => {
   }), onTogglePoint && /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show point on graph",
     checked: !!showPoint,
-    style: showPoint && styles$m.spaceUnder,
+    style: showPoint && styles$n.spaceUnder,
     onChange: onTogglePoint
   }), showPoint && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$m.spaceUnder
+    style: styles$n.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30278,7 +30317,7 @@ const DefiningPointSettings = props => {
     }
   })));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8,
     marginBottom: 0,
@@ -30305,15 +30344,15 @@ const LineSwatch = props => {
     lineStyle
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$l.container
+    style: styles$m.container
   }, /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$l.lineSwatch, {
+    style: [styles$m.lineSwatch, {
       border: `5px ${lineStyle} ${lockedFigureColors[color]}`
     }]
   }));
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   container: {
     backgroundColor: color.white,
     justifyContent: "center",
@@ -30367,7 +30406,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$k.row
+      style: styles$l.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30376,7 +30415,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$k.row, styles$k.spaceUnder]
+    style: [styles$l.row, styles$l.spaceUnder]
   }, "kind", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30397,7 +30436,7 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$k.row
+    style: styles$l.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
@@ -30405,7 +30444,7 @@ const LockedLineSettings = props => {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$k.row
+    style: styles$l.row
   }, "style", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30416,7 +30455,7 @@ const LockedLineSettings = props => {
     // Placeholder is required, but never gets used.
     ,
     placeholder: "",
-    style: styles$k.selectMarginOffset
+    style: styles$l.selectMarginOffset
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
@@ -30424,7 +30463,7 @@ const LockedLineSettings = props => {
     value: "dashed",
     label: "dashed"
   })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$k.errorText
+    style: styles$l.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30450,7 +30489,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30495,7 +30534,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$j.row
+      style: styles$k.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30504,7 +30543,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$j.spaceUnder,
+    style: styles$k.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30513,7 +30552,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$j.spaceUnder
+    style: styles$k.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30529,7 +30568,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30547,17 +30586,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$i.container, {
+    style: [styles$j.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$i.innerSquare, {
+    style: [styles$j.innerSquare, {
       backgroundColor: lockedFigureColors[color],
       opacity: lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30599,7 +30638,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React.createElement(View, {
-      style: styles$h.row
+      style: styles$i.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(PolygonSwatch, {
@@ -30608,7 +30647,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30616,7 +30655,7 @@ const LockedPolygonSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$h.row
+    style: styles$i.row
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30633,7 +30672,7 @@ const LockedPolygonSettings = props => {
     label: option
   }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$h.row, styles$h.spaceUnder]
+    style: [styles$i.row, styles$i.spaceUnder]
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30656,17 +30695,17 @@ const LockedPolygonSettings = props => {
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$h.spaceUnder
+    style: styles$i.spaceUnder
   }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$h.pointAccordionContainer,
-    panelStyle: styles$h.pointAccordionPanel
+    containerStyle: styles$i.pointAccordionContainer,
+    panelStyle: styles$i.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React.createElement(View, {
       key: `locked-polygon-point-${point[0]}-${point[1]}-index-${index}`,
-      style: [styles$h.row, styles$h.spaceUnder]
+      style: [styles$i.row, styles$i.spaceUnder]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.medium_16
     }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -30694,7 +30733,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$h.icon
+      style: styles$i.icon
     }));
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
@@ -30711,7 +30750,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30769,7 +30808,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30777,19 +30816,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$g.row, styles$g.spaceUnder]
+    style: [styles$h.row, styles$h.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$g.errorText
+    style: styles$h.errorText
   }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$g.container,
-    panelStyle: styles$g.accordionPanel,
+    containerStyle: styles$h.container,
+    panelStyle: styles$h.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30800,10 +30839,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$g.container,
-    panelStyle: styles$g.accordionPanel,
+    containerStyle: styles$h.container,
+    panelStyle: styles$h.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$g.row
+      style: styles$h.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30818,7 +30857,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   accordionPanel: {
     paddingBottom: spacing.medium_16
   },
@@ -30878,6 +30917,7 @@ const LockedFiguresSection = props => {
   // expand/collapse all button. Set the whole array to false initially.
   const collapsedStateArray = Array(((_props$figures = props.figures) != null ? _props$figures : []).length).fill(false);
   const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
+  const [isExpanded, setIsExpanded] = React.useState(true);
   const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
   const {
     figures,
@@ -30964,7 +31004,12 @@ const LockedFiguresSection = props => {
   const allCollapsed = expandedStates.every(value => !value);
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!(figures != null && figures.length);
-  return /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Locked Figures",
+    isOpen: isExpanded,
+    onToggle: () => setIsExpanded(!isExpanded),
+    isCollapsible: true
+  }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
     if (figure.type === "function") {
       // TODO(LEMS-1947): Add locked function settings.
       // Remove this block once function locked figure settings are
@@ -30987,7 +31032,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$f.buttonContainer
+    style: styles$g.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
     showM2Features: props.showM2Features,
     showM2bFeatures: props.showM2bFeatures,
@@ -30998,10 +31043,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$f.button
-  }, buttonLabel)));
+    style: styles$g.button
+  }, buttonLabel))));
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31036,7 +31081,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$e.singleSelectShort
+    style: styles$f.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -31047,7 +31092,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31060,7 +31105,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$d.singleSelectShort
+    style: styles$e.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31093,7 +31138,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31101,29 +31146,27 @@ const styles$d = StyleSheet.create({
   }
 });
 
-function Heading({
-  title,
-  isOpen,
-  onToggle
-}) {
-  return /*#__PURE__*/React.createElement(View, {
+function InteractiveGraphCorrectAnswer(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Correct Answer",
+    isOpen: true,
+    isCollapsible: false
+  }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
     style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: color.offBlack8,
-      padding: spacing.xSmall_8,
-      marginTop: spacing.small_12,
-      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-      // variable found in perseus-editor.less. For now, it must
-      // match otherwise there's a gap from this header to the edge
-      // of the editor borders.
-      marginInline: -10,
-      cursor: "pointer"
-    },
-    onClick: () => onToggle == null ? void 0 : onToggle(!isOpen)
-  }, /*#__PURE__*/React.createElement(LabelSmall, null, title), /*#__PURE__*/React.createElement(ToggleableCaret, {
-    isExpanded: isOpen
-  }));
+      paddingTop: spacing.xxSmall_6,
+      paddingBottom: spacing.xxSmall_6,
+      color: color.offBlack64
+    }
+  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React.createElement(BodyMonospace, {
+    style: {
+      fontSize: 12,
+      backgroundColor: "#eee",
+      paddingInline: spacing.xxSmall_6,
+      borderColor: "#ccc",
+      borderStyle: "solid",
+      borderWidth: 1
+    }
+  }, props.equationString)), props.children));
 }
 
 const {
@@ -31416,6 +31459,7 @@ class InteractiveGraphSettings extends React.Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
       title: "Common Graph Settings",
       isOpen: this.state.isExpanded,
+      isCollapsible: true,
       onToggle: () => this.setState({
         isExpanded: !this.state.isExpanded
       })
@@ -31510,10 +31554,10 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$c.backgroundUrlInput),
+      className: css(styles$d.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31527,28 +31571,28 @@ class InteractiveGraphSettings extends React.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$c.rulerSection
+      style: styles$d.rulerSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$c.checkboxRow
+      style: styles$d.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }), /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     })), (this.props.showRuler || this.props.showProtractor) && /*#__PURE__*/React.createElement(Banner, {
       layout: "floating",
       text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
       kind: "warning"
     }), this.props.showRuler && /*#__PURE__*/React.createElement(View, {
-      style: styles$c.spaceTop
+      style: styles$d.spaceTop
     }, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$c.resetSpaceTop
+      style: styles$d.resetSpaceTop
     }, /*#__PURE__*/React.createElement(SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -31558,7 +31602,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "None",
-      style: styles$c.singleSelectShort
+      style: styles$d.singleSelectShort
     }, /*#__PURE__*/React.createElement(OptionItem, {
       value: "",
       label: "None",
@@ -31599,7 +31643,7 @@ class InteractiveGraphSettings extends React.Component {
         });
       },
       placeholder: "10",
-      style: styles$c.singleSelectShort
+      style: styles$d.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React.createElement(OptionItem, {
       key: value,
       value: `${value}`,
@@ -31623,7 +31667,7 @@ InteractiveGraphSettings.defaultProps = {
   rulerLabel: "",
   rulerTicks: 10
 };
-const styles$c = StyleSheet.create({
+const styles$d = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -31668,13 +31712,13 @@ const SegmentCountSelector = ({
     const num = +newValue;
     onChange(num);
   },
-  style: styles$b.singleSelectShort
+  style: styles$c.singleSelectShort
 }, _.range(1, 7).map(n => /*#__PURE__*/React.createElement(OptionItem, {
   key: n,
   value: `${n}`,
   label: `${n} segment${n > 1 ? "s" : ""}`
 })));
-const styles$b = StyleSheet.create({
+const styles$c = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31682,6 +31726,78 @@ const styles$b = StyleSheet.create({
   }
 });
 
+const StartCoordSettingsInner = props => {
+  const {
+    type,
+    startCoords,
+    onChange
+  } = props;
+
+  // Check if coords is of type CollinearTuple
+  switch (type) {
+    case "linear":
+    case "ray":
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+        style: styles$b.tile
+      }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1"), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+        coord: startCoords[0],
+        onChange: value => onChange([value, startCoords[1]])
+      })), /*#__PURE__*/React.createElement(View, {
+        style: styles$b.tile
+      }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2"), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+        coord: startCoords[1],
+        onChange: value => onChange([startCoords[0], value])
+      })));
+    default:
+      return null;
+  }
+};
+const StartCoordSettings = props => {
+  var _props$startCoords;
+  const {
+    type,
+    range,
+    step,
+    onChange
+  } = props;
+  const [isOpen, setIsOpen] = React.useState(true);
+  if (type !== "linear" && type !== "ray") {
+    return null;
+  }
+  const defaultStartCoords = getLineCoords({
+    type: type
+  }, range, step);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$b.container
+  }, /*#__PURE__*/React.createElement(Heading, {
+    isCollapsible: true,
+    title: "Start coordinates",
+    isOpen: isOpen,
+    onToggle: () => setIsOpen(!isOpen)
+  }), isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartCoordSettingsInner, {
+    type: type,
+    startCoords: (_props$startCoords = props.startCoords) != null ? _props$startCoords : defaultStartCoords,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(Button, {
+    startIcon: arrowCounterClockwise,
+    kind: "tertiary",
+    size: "small",
+    onClick: () => {
+      onChange(defaultStartCoords);
+    }
+  }, "Use default start coords")));
+};
+const styles$b = StyleSheet.create({
+  tile: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8,
+    padding: spacing.small_12,
+    borderRadius: spacing.xSmall_8
+  }
+});
+
 const {
   InfoTip: InfoTip$b
 } = components;
@@ -31729,6 +31845,18 @@ class InteractiveGraphEditor extends React.Component {
         correct: correct
       });
     };
+    this.changeStartCoords = coords => {
+      var _this$props$graph, _this$props$graph2;
+      if (((_this$props$graph = this.props.graph) == null ? void 0 : _this$props$graph.type) !== "linear" && ((_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) !== "ray") {
+        return;
+      }
+      const graph = _extends({}, this.props.graph, {
+        startCoords: coords
+      });
+      this.props.onChange({
+        graph: graph
+      });
+    };
     this.getSaveWarnings = () => {
       const issues = [];
 
@@ -31747,7 +31875,7 @@ class InteractiveGraphEditor extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$graph$typ, _this$props$graph, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3;
+    var _this$props$graph$typ, _this$props$graph3, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph6, _this$props$graph7, _this$props$apiOption, _this$props$apiOption2, _this$props$apiOption3, _this$props$apiOption4;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -31779,13 +31907,14 @@ class InteractiveGraphEditor extends React.Component {
           let correct = this.props.correct;
           // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
           if (correct.type === newProps.graph.type) {
-            correct = _.extend({}, correct, newProps.graph);
+            correct = _extends({}, correct, newProps.graph);
           } else {
             // Clear options from previous graph
             correct = newProps.graph;
           }
           this.props.onChange({
-            correct: correct
+            correct: correct,
+            graph: this.props.graph
           });
         }
       };
@@ -31813,7 +31942,7 @@ class InteractiveGraphEditor extends React.Component {
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
-      graphType: (_this$props$graph$typ = (_this$props$graph = this.props.graph) == null ? void 0 : _this$props$graph.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
+      graphType: (_this$props$graph$typ = (_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) != null ? _this$props$graph$typ : InteractiveGraph.defaultProps.graph.type,
       onChange: type => {
         this.props.onChange({
           graph: {
@@ -31824,7 +31953,9 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
+    })), /*#__PURE__*/React.createElement(InteractiveGraphCorrectAnswer, {
+      equationString: equationString
+    }, graph), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Number of Points:"
     }, /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
       numPoints: (_this$props$correct2 = this.props.correct) == null ? void 0 : _this$props$correct2.numPoints,
@@ -31899,8 +32030,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct8 = this.props.correct) != null && _this$props$correct8.showAngles),
       onChange: () => {
-        var _this$props$graph2;
-        if (((_this$props$graph2 = this.props.graph) == null ? void 0 : _this$props$graph2.type) === "polygon") {
+        var _this$props$graph4;
+        if (((_this$props$graph4 = this.props.graph) == null ? void 0 : _this$props$graph4.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showAngles: !this.props.correct.showAngles
@@ -31919,8 +32050,8 @@ class InteractiveGraphEditor extends React.Component {
       // Don't show indeterminate checkbox state
       !!((_this$props$correct9 = this.props.correct) != null && _this$props$correct9.showSides),
       onChange: () => {
-        var _this$props$graph3;
-        if (((_this$props$graph3 = this.props.graph) == null ? void 0 : _this$props$graph3.type) === "polygon") {
+        var _this$props$graph5;
+        if (((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) === "polygon") {
           this.props.onChange({
             correct: _extends({}, this.props.correct, {
               showSides: !this.props.correct.showSides
@@ -31948,6 +32079,10 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
+    })), (((_this$props$graph6 = this.props.graph) == null ? void 0 : _this$props$graph6.type) === "linear" || ((_this$props$graph7 = this.props.graph) == null ? void 0 : _this$props$graph7.type) === "ray") && ((_this$props$apiOption = this.props.apiOptions.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["start-coords-ui"]) && /*#__PURE__*/React.createElement(StartCoordSettings, _extends({}, this.props.graph, {
+      range: this.props.range,
+      step: this.props.step,
+      onChange: this.changeStartCoords
     })), /*#__PURE__*/React.createElement(InteractiveGraphSettings, {
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
@@ -32000,38 +32135,33 @@ class InteractiveGraphEditor extends React.Component {
     }), /*#__PURE__*/React.createElement(OptionItem, {
       value: "congruent",
       label: "be congruent"
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))), /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Correct answer:"
-    }, /*#__PURE__*/React.createElement(BodyMonospace, {
-      style: {
-        fontSize: 12,
-        backgroundColor: "#eee",
-        paddingInline: spacing.xxSmall_6,
-        borderColor: "#ccc",
-        borderStyle: "solid",
-        borderWidth: 1
-      }
-    }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
+    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))),
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
-    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
-      showM2Features: (_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2["interactive-graph-locked-features-m2"],
-      showM2bFeatures: (_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["interactive-graph-locked-features-m2b"],
+    this.props.graph && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+      showM2Features: (_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["interactive-graph-locked-features-m2"],
+      showM2bFeatures: (_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-m2b"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));
   }
+  // serialize() is what makes copy/paste work. All the properties included
+  // in the serialization json are included when, for example, a graph
+  // is copied from the question editor and pasted into the hint editor
+  // (double brackets in the markdown).
   serialize() {
     const json = _.pick(this.props, "step", "backgroundImage", "markings", "labels", "showProtractor", "showRuler", "showTooltips", "rulerLabel", "rulerTicks", "range", "gridStep", "snapStep", "lockedFigures");
 
     // eslint-disable-next-line react/no-string-refs
     const graph = this.refs.graph;
     if (graph) {
+      var _this$props$graph8;
       // @ts-expect-error TS2339 Property 'getUserInput' does not exist on type 'ReactInstance'. Property 'getUserInput' does not exist on type 'Component<any, {}, any>'.
       const correct = graph && graph.getUserInput();
       _.extend(json, {
         graph: {
-          type: correct.type
+          type: correct.type,
+          startCoords: (_this$props$graph8 = this.props.graph) == null ? void 0 : _this$props$graph8.startCoords
         },
         correct: correct
       });