[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

.changeset/wild-gifts-grow.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+[Interactive Graph Editor] UI for adding/editing/deleting a locked polygon

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import LockedPolygonSettings from "../locked-polygon-settings";
+import {getDefaultFigureForType} from "../util";
+
+import type {Meta, StoryObj} from "@storybook/react";
+
+export default {
+    title: "PerseusEditor/Components/Locked Polygon Settings",
+    component: LockedPolygonSettings,
+} as Meta<typeof LockedPolygonSettings>;
+
+export const Default = (args): React.ReactElement => {
+    return <LockedPolygonSettings {...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(defaultProps);
+
+        const handlePropsUpdate = (newProps) => {
+            setProps({
+                ...props,
+                ...newProps,
+            });
+        };
+
+        return (
+            <LockedPolygonSettings
+                {...props}
+                onChangeProps={handlePropsUpdate}
+            />
+        );
+    },
+};
+
+Controlled.parameters = {
+    chromatic: {
+        // Disabling because this is testing behavior, not visuals.
+        disableSnapshot: true,
+    },
+};
+
+// Fully expanded view of the locked ellipse settings to allow snapshot testing.
+export const Expanded: StoryComponentType = {
+    render: function Render() {
+        const [expanded, setExpanded] = React.useState(true);
+        const [props, setProps] = React.useState(defaultProps);
+
+        const handlePropsUpdate = (newProps) => {
+            setProps({
+                ...props,
+                ...newProps,
+            });
+        };
+
+        return (
+            <LockedPolygonSettings
+                {...props}
+                expanded={expanded}
+                onToggle={setExpanded}
+                onChangeProps={handlePropsUpdate}
+            />
+        );
+    },
+};

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: () => {},
 };