Show Arrowheads on Locked Lines (#1229)

## Summary: Arrowheads on locked lines apply only to rays and lines, not line segments. Previously, showing arrows was an option that could be turned "off" on a per-line basis. After reviewing the use cases for locked features, it was determined that this option should not exist - lines and rays should always have arrowheads. Issue: LEMS-1929 ## Test plan: 1. Run `yarn start` to launch Storybook. 1. In Storybook, go to "Interactive Graph Editor - With Locked Lines" within the Perseus Editor section. * http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph-editor--with-locked-lines 1. Notice that the line and ray each have arrowheads in their appropriate location, and that the line segment does not have any arrowheads. ## Affected behavior: ### With arrows ![Locked Figures with Arrows](https://github.com/Khan/perseus/assets/13896410/18eb4192-c934-41d3-bc20-aac601e1a1a6) Author: mark-fitzgerald Reviewers: nishasy, benchristel, mark-fitzgerald Required Reviewers: Approved By: nishasy, benchristel Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ gerald, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1229
Khan · May 7, 2024 · 3c1e398 · 3c1e398
1 parent 54689a1
commit 3c1e398
Show file tree

Hide file tree

Showing 17 changed files with 634 additions and 143 deletions.
diff --git a/.changeset/gold-deers-heal.md b/.changeset/gold-deers-heal.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Show Arrowheads on Locked Lines in Interactive Graphs
diff --git a/packages/perseus-editor/src/components/__tests__/util.test.ts b/packages/perseus-editor/src/components/__tests__/util.test.ts
@@ -70,7 +70,6 @@ describe("getDefaultFigureForType", () => {
             ],
             color: "grayH",
             lineStyle: "solid",
-            showArrows: false,
             showStartPoint: false,
             showEndPoint: false,
         });

diff --git a/packages/perseus-editor/src/components/locked-line-settings.tsx b/packages/perseus-editor/src/components/locked-line-settings.tsx
@@ -14,7 +14,6 @@ import * as React from "react";
 
 import ColorSelect from "./color-select";
 import ColorSwatch from "./color-swatch";
-import LabeledSwitch from "./labeled-switch";
 import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import LockedPointSettings from "./locked-point-settings";
@@ -37,7 +36,6 @@ const LockedLineSettings = (props: Props) => {
         points,
         color: lineColor,
         lineStyle = "solid",
-        showArrows,
         showStartPoint,
         showEndPoint,
         onChangeProps,
@@ -154,13 +152,6 @@ const LockedLineSettings = (props: Props) => {
                 </View>
             </View>
 
-            {/* Show arrows setting */}
-            <LabeledSwitch
-                label="show arrows"
-                checked={showArrows}
-                onChange={(newValue) => onChangeProps({showArrows: newValue})}
-            />
-
             {/* Defining points settings */}
             <LockedPointSettings
                 label="Start point"

diff --git a/packages/perseus-editor/src/components/util.ts b/packages/perseus-editor/src/components/util.ts
@@ -79,7 +79,6 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
                 ],
                 color: DEFAULT_COLOR,
                 lineStyle: "solid",
-                showArrows: false,
                 showStartPoint: false,
                 showEndPoint: false,
             };

diff --git a/packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx
@@ -155,7 +155,6 @@ export const WithLockedLines: StoryComponentType = {
                     ],
                     color: "green",
                     lineStyle: "solid",
-                    showArrows: false,
                     showStartPoint: false,
                     showEndPoint: false,
                 },
@@ -168,7 +167,6 @@ export const WithLockedLines: StoryComponentType = {
                     ],
                     color: "pink",
                     lineStyle: "solid",
-                    showArrows: true,
                     showStartPoint: true,
                     showEndPoint: false,
                 },
@@ -181,7 +179,6 @@ export const WithLockedLines: StoryComponentType = {
                     ],
                     color: "grayH",
                     lineStyle: "solid",
-                    showArrows: true,
                     showStartPoint: true,
                     showEndPoint: true,
                 },

diff --git a/...ges/perseus-editor/src/widgets/__tests__/interactive-graph-editor-locked-figures.test.tsx b/...ges/perseus-editor/src/widgets/__tests__/interactive-graph-editor-locked-figures.test.tsx
@@ -499,40 +499,6 @@ describe("InteractiveGraphEditor locked figures", () => {
             );
         });
 
-        test("Calls onChange when a locked line's showArrows is changed", async () => {
-            // Arrange
-            const onChangeMock = jest.fn();
-
-            render(
-                <InteractiveGraphEditor
-                    {...mafsProps}
-                    onChange={onChangeMock}
-                    lockedFigures={[defaultLine]}
-                />,
-                {
-                    wrapper: RenderStateRoot,
-                },
-            );
-
-            // Act
-            const showArrowsInput = screen.getByRole("switch", {
-                name: "show arrows",
-            });
-            await userEvent.click(showArrowsInput);
-
-            // Assert
-            expect(onChangeMock).toBeCalledWith(
-                expect.objectContaining({
-                    lockedFigures: [
-                        expect.objectContaining({
-                            ...defaultLine,
-                            showArrows: true,
-                        }),
-                    ],
-                }),
-            );
-        });
-
         test("Calls onChange when a locked line's start point is changed", async () => {
             // Arrange
             const onChangeMock = jest.fn();

diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
@@ -689,7 +689,6 @@ export type LockedLineType = {
     points: [startPoint: LockedPointType, endPoint: LockedPointType];
     color: LockedFigureColor;
     lineStyle: "solid" | "dashed";
-    showArrows: boolean;
     showStartPoint: boolean;
     showEndPoint: boolean;
 };

diff --git a/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts b/packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
@@ -1139,7 +1139,6 @@ export const segmentWithLockedLineQuestion: PerseusRenderer = {
                         ],
                         color: "green",
                         lineStyle: "solid",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: true,
                     },
@@ -1162,7 +1161,6 @@ export const segmentWithLockedLineQuestion: PerseusRenderer = {
                         ],
                         color: "grayH",
                         lineStyle: "solid",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: true,
                     },
@@ -1185,7 +1183,117 @@ export const segmentWithLockedLineQuestion: PerseusRenderer = {
                         ],
                         color: "pink",
                         lineStyle: "solid",
-                        showArrows: false,
+                        showStartPoint: true,
+                        showEndPoint: false,
+                    },
+                ],
+            },
+            type: "interactive-graph",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};
+
+export const segmentWithLockedLineAndArrowheadsQuestion: PerseusRenderer = {
+    content:
+        "Line segment $\\overline{OG}$ is rotated $180^\\circ$ about the point $(-2,4)$.  \n\n**Draw the image of this rotation using the interactive graph.**\n\n*The direction of a rotation by a positive angle is counter-clockwise.* \n\n[[☃ interactive-graph 1]]\n\n",
+    images: {},
+    widgets: {
+        "interactive-graph 1": {
+            graded: true,
+            options: {
+                correct: {
+                    coords: [
+                        [
+                            [-7, -7],
+                            [2, -5],
+                        ],
+                    ],
+                    type: "segment",
+                },
+                graph: {
+                    type: "segment",
+                },
+                gridStep: [1, 1],
+                labels: ["x", "y"],
+                markings: "graph",
+                range: [
+                    [-10, 10],
+                    [-10, 10],
+                ],
+                rulerLabel: "",
+                rulerTicks: 10,
+                showProtractor: false,
+                showRuler: false,
+                snapStep: [0.5, 0.5],
+                step: [1, 1],
+                lockedFigures: [
+                    {
+                        type: "line",
+                        kind: "line",
+                        points: [
+                            {
+                                type: "point",
+                                coord: [-7, -7],
+                                color: "purple",
+                                filled: true,
+                            },
+                            {
+                                type: "point",
+                                coord: [2, -5],
+                                color: "purple",
+                                filled: false,
+                            },
+                        ],
+                        color: "purple",
+                        lineStyle: "solid",
+                        showStartPoint: true,
+                        showEndPoint: true,
+                    },
+                    {
+                        type: "line",
+                        kind: "segment",
+                        points: [
+                            {
+                                type: "point",
+                                coord: [-7, -6],
+                                color: "green",
+                                filled: false,
+                            },
+                            {
+                                type: "point",
+                                coord: [2, -4],
+                                color: "green",
+                                filled: true,
+                            },
+                        ],
+                        color: "green",
+                        lineStyle: "solid",
+                        showStartPoint: true,
+                        showEndPoint: true,
+                    },
+                    {
+                        type: "line",
+                        kind: "ray",
+                        points: [
+                            {
+                                type: "point",
+                                coord: [-7, -8],
+                                color: "pink",
+                                filled: false,
+                            },
+                            {
+                                type: "point",
+                                coord: [2, -6],
+                                color: "pink",
+                                filled: true,
+                            },
+                        ],
+                        color: "pink",
+                        lineStyle: "solid",
                         showStartPoint: true,
                         showEndPoint: false,
                     },
@@ -1524,7 +1632,6 @@ export const segmentWithAllLockedLineSegmentVariations: PerseusRenderer = {
                         ],
                         color: "green",
                         lineStyle: "solid",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: true,
                     },
@@ -1548,7 +1655,6 @@ export const segmentWithAllLockedLineSegmentVariations: PerseusRenderer = {
                         ],
                         color: "grayH",
                         lineStyle: "dashed",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: false,
                     },
@@ -1572,7 +1678,6 @@ export const segmentWithAllLockedLineSegmentVariations: PerseusRenderer = {
                         ],
                         color: "pink",
                         lineStyle: "solid",
-                        showArrows: true,
                         showStartPoint: false,
                         showEndPoint: false,
                     },
@@ -1640,7 +1745,6 @@ export const segmentWithAllLockedLineVariations: PerseusRenderer = {
                         ],
                         color: "green",
                         lineStyle: "solid",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: true,
                     },
@@ -1664,7 +1768,6 @@ export const segmentWithAllLockedLineVariations: PerseusRenderer = {
                         ],
                         color: "grayH",
                         lineStyle: "dashed",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: false,
                     },
@@ -1688,7 +1791,6 @@ export const segmentWithAllLockedLineVariations: PerseusRenderer = {
                         ],
                         color: "pink",
                         lineStyle: "solid",
-                        showArrows: true,
                         showStartPoint: false,
                         showEndPoint: false,
                     },
@@ -1756,7 +1858,6 @@ export const segmentWithAllLockedRayVariations: PerseusRenderer = {
                         ],
                         color: "green",
                         lineStyle: "solid",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: true,
                     },
@@ -1780,7 +1881,6 @@ export const segmentWithAllLockedRayVariations: PerseusRenderer = {
                         ],
                         color: "grayH",
                         lineStyle: "dashed",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: false,
                     },
@@ -1804,7 +1904,6 @@ export const segmentWithAllLockedRayVariations: PerseusRenderer = {
                         ],
                         color: "pink",
                         lineStyle: "solid",
-                        showArrows: true,
                         showStartPoint: false,
                         showEndPoint: false,
                     },
@@ -1879,7 +1978,6 @@ export const segmentWithLockedFigures: PerseusRenderer = {
                         ],
                         color: "green",
                         lineStyle: "solid",
-                        showArrows: false,
                         showStartPoint: true,
                         showEndPoint: true,
                     },