[Interactive Graph Editor] Add the ability to reorder locked figure settings

.changeset/neat-carrots-guess.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Interactive Graph Editor] Add the ability to reorder locked figure settings

packages/perseus-editor/src/components/__stories__/locked-ellipse-settings.stories.tsx

@@ -14,21 +14,21 @@ export const Default = (args): React.ReactElement => {
     return <LockedEllipseSettings {...args} />;
 };
 
-type StoryComponentType = StoryObj<typeof LockedEllipseSettings>;
-
-// Set the default values in the control panel.
-Default.args = {
+const defaultProps = {
     ...getDefaultFigureForType("ellipse"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 
+type StoryComponentType = StoryObj<typeof LockedEllipseSettings>;
+
+// Set the default values in the control panel.
+Default.args = defaultProps;
+
 export const Controlled: StoryComponentType = {
     render: function Render() {
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("ellipse"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -57,10 +57,7 @@ Controlled.parameters = {
 export const Expanded: StoryComponentType = {
     render: function Render() {
         const [expanded, setExpanded] = React.useState(true);
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("ellipse"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({

packages/perseus-editor/src/components/__stories__/locked-line-settings.stories.tsx

@@ -14,21 +14,21 @@ export const Default = (args): React.ReactElement => {
     return <LockedLineSettings {...args} />;
 };
 
-type StoryComponentType = StoryObj<typeof LockedLineSettings>;
-
-// Set the default values in the control panel.
-Default.args = {
+const defaultProps = {
     ...getDefaultFigureForType("line"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 
+type StoryComponentType = StoryObj<typeof LockedLineSettings>;
+
+// Set the default values in the control panel.
+Default.args = defaultProps;
+
 export const Controlled: StoryComponentType = {
     render: function Render() {
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("line"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -57,10 +57,7 @@ Controlled.parameters = {
  */
 export const WithInvalidPoints: StoryComponentType = {
     render: function Render() {
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("line"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -87,10 +84,7 @@ export const WithInvalidPoints: StoryComponentType = {
 export const Expanded: StoryComponentType = {
     render: function Render() {
         const [expanded, setExpanded] = React.useState(true);
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("line"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -115,8 +109,7 @@ export const ExpandedNondefaultProps: StoryComponentType = {
     render: function Render() {
         const [expanded, setExpanded] = React.useState(true);
         const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("line"),
-            onRemove: () => {},
+            ...defaultProps,
             kind: "segment" as const,
             color: "green" as const,
             lineStyle: "dashed" as const,

packages/perseus-editor/src/components/__stories__/locked-point-settings.stories.tsx

@@ -14,21 +14,21 @@ export const Default = (args): React.ReactElement => {
     return <LockedPointSettings {...args} />;
 };
 
-type StoryComponentType = StoryObj<typeof LockedPointSettings>;
-
-// Set the default values in the control panel.
-Default.args = {
+const defaultProps = {
     ...getDefaultFigureForType("point"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 
+type StoryComponentType = StoryObj<typeof LockedPointSettings>;
+
+// Set the default values in the control panel.
+Default.args = defaultProps;
+
 export const Controlled: StoryComponentType = {
     render: function Render() {
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("point"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -54,10 +54,7 @@ Controlled.parameters = {
 export const Expanded: StoryComponentType = {
     render: function Render() {
         const [expanded, setExpanded] = React.useState(true);
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("point"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -81,12 +78,7 @@ export const Expanded: StoryComponentType = {
 export const ExpandedNondefaultProps: StoryComponentType = {
     render: function Render() {
         const [expanded, setExpanded] = React.useState(true);
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("point"),
-            onRemove: () => {},
-            color: "green" as const,
-            filled: false,
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({

packages/perseus-editor/src/components/__stories__/locked-polygon-settings.stories.tsx

@@ -14,21 +14,21 @@ export const Default = (args): React.ReactElement => {
     return <LockedPolygonSettings {...args} />;
 };
 
-type StoryComponentType = StoryObj<typeof LockedPolygonSettings>;
-
-// Set the default values in the control panel.
-Default.args = {
+const defaultProps = {
     ...getDefaultFigureForType("polygon"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 
+type StoryComponentType = StoryObj<typeof LockedPolygonSettings>;
+
+// Set the default values in the control panel.
+Default.args = defaultProps;
+
 export const Controlled: StoryComponentType = {
     render: function Render() {
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("polygon"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -57,10 +57,7 @@ Controlled.parameters = {
 export const Expanded: StoryComponentType = {
     render: function Render() {
         const [expanded, setExpanded] = React.useState(true);
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("polygon"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({

packages/perseus-editor/src/components/__stories__/locked-vector-settings.stories.tsx

@@ -14,21 +14,21 @@ export const Default = (args): React.ReactElement => {
     return <LockedVectorSettings {...args} />;
 };
 
-type StoryComponentType = StoryObj<typeof LockedVectorSettings>;
-
-// Set the default values in the control panel.
-Default.args = {
+const defaultProps = {
     ...getDefaultFigureForType("vector"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 
+type StoryComponentType = StoryObj<typeof LockedVectorSettings>;
+
+// Set the default values in the control panel.
+Default.args = defaultProps;
+
 export const Expanded: StoryComponentType = {
     render: function Render() {
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("vector"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({
@@ -54,10 +54,7 @@ export const Expanded: StoryComponentType = {
  */
 export const WithInvalidPoints: StoryComponentType = {
     render: function Render() {
-        const [props, setProps] = React.useState({
-            ...getDefaultFigureForType("vector"),
-            onRemove: () => {},
-        });
+        const [props, setProps] = React.useState(defaultProps);
 
         const handlePropsUpdate = (newProps) => {
             setProps({

packages/perseus-editor/src/components/__tests__/locked-ellipse-settings.test.tsx

@@ -11,6 +11,7 @@ import type {UserEvent} from "@testing-library/user-event";
 const defaultProps = {
     ...getDefaultFigureForType("ellipse"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 

packages/perseus-editor/src/components/__tests__/locked-line-settings.test.tsx

@@ -11,6 +11,7 @@ import type {UserEvent} from "@testing-library/user-event";
 const defaultProps = {
     ...getDefaultFigureForType("line"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 

packages/perseus-editor/src/components/__tests__/locked-point-settings.test.tsx

@@ -11,6 +11,7 @@ import type {UserEvent} from "@testing-library/user-event";
 const defaultProps = {
     ...getDefaultFigureForType("point"),
     onRemove: () => {},
+    onMove: () => {},
     onChangeProps: () => {},
 };
 

packages/perseus-editor/src/components/__tests__/locked-polygon-settings.test.tsx

@@ -11,6 +11,7 @@ import type {UserEvent} from "@testing-library/user-event";
 const defaultProps = {
     ...getDefaultFigureForType("polygon"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 };
 

packages/perseus-editor/src/components/__tests__/locked-vector-settings.test.tsx

@@ -12,6 +12,7 @@ import type {UserEvent} from "@testing-library/user-event";
 const defaultProps = {
     ...getDefaultFigureForType("vector"),
     onChangeProps: () => {},
+    onMove: () => {},
     onRemove: () => {},
 } as Props;
 

packages/perseus-editor/src/components/defining-point-settings.tsx

@@ -17,33 +17,41 @@ import CoordinatePairInput from "./coordinate-pair-input";
 import LabeledSwitch from "./labeled-switch";
 import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 
-import type {AccordionProps} from "./locked-figure-settings";
 import type {LockedPointType} from "@khanacademy/perseus";
 
-export type Props = AccordionProps &
-    LockedPointType & {
-        /**
-         * Optional label for the point to display in the header summary.
-         * Defaults to "Point".
-         */
-        label: string;
-        /**
-         * Whether the extra point settings are toggled open.
-         */
-        showPoint?: boolean;
-        /**
-         * Optional error message to display.
-         */
-        error?: string | null;
-        /**
-         * Called when the extra settings toggle switch is changed.
-         */
-        onTogglePoint?: (newValue) => void;
-        /**
-         * Called when the props (coords, color, etc.) are updated.
-         */
-        onChangeProps: (newProps: Partial<LockedPointType>) => void;
-    };
+export type Props = LockedPointType & {
+    /**
+     * Optional label for the point to display in the header summary.
+     * Defaults to "Point".
+     */
+    label: string;
+    /**
+     * Whether the extra point settings are toggled open.
+     */
+    showPoint?: boolean;
+    /**
+     * Optional error message to display.
+     */
+    error?: string | null;
+    /**
+     * Called when the extra settings toggle switch is changed.
+     */
+    onTogglePoint?: (newValue) => void;
+    /**
+     * Called when the props (coords, color, etc.) are updated.
+     */
+    onChangeProps: (newProps: Partial<LockedPointType>) => void;
+
+    // Accordion props
+    /**
+     * Whether this accordion is expanded.
+     */
+    expanded?: boolean;
+    /**
+     * Called when the accordion is expanded or collapsed.
+     */
+    onToggle?: (expanded: boolean) => void;
+};
 
 const DefiningPointSettings = (props: Props) => {
     const {
@@ -55,6 +63,8 @@ const DefiningPointSettings = (props: Props) => {
         error,
         onChangeProps,
         onTogglePoint,
+        expanded,
+        onToggle,
     } = props;
 
     function handleColorChange(newValue) {
@@ -63,8 +73,8 @@ const DefiningPointSettings = (props: Props) => {
 
     return (
         <LockedFigureSettingsAccordion
-            expanded={props.expanded}
-            onToggle={props.onToggle}
+            expanded={expanded}
+            onToggle={onToggle}
             containerStyle={styles.container}
             panelStyle={styles.accordionPanel}
             header={