Khan · SonicScrewdriver · Apr 27, 2026 · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026
diff --git a/.changeset/olive-planes-raise.md b/.changeset/olive-planes-raise.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Implementing bug fix for jumping MovableLines in the Correct Answer graph in the editor
diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.tsx
@@ -31,7 +31,7 @@ type Props = {
         end: boolean;
     };
     onMovePoint?: (endpointIndex: number, destination: vec.Vector2) => unknown;
-    onMoveLine?: (delta: vec.Vector2) => unknown;
+    onMoveLine?: (newStart: vec.Vector2, newEnd: vec.Vector2) => unknown;
 };
 
 export const MovableLine = (props: Props) => {
@@ -110,9 +110,9 @@ export const MovableLine = (props: Props) => {
             start={start}
             end={end}
             extend={extend}
-            onMove={(delta) => {
+            onMove={(newStart, newEnd) => {
                 setAriaLives(["off", "off", "polite"]);
-                onMoveLine(delta);
+                onMoveLine(newStart, newEnd);
             }}
         />
     );
@@ -141,7 +141,7 @@ type LineProps = {
               start: boolean;
               end: boolean;
           };
-    onMove: (delta: vec.Vector2) => unknown;
+    onMove: (newStart: vec.Vector2, newEnd: vec.Vector2) => unknown;
 };
 
 const Line = (props: LineProps) => {
@@ -170,12 +170,19 @@ const Line = (props: LineProps) => {
             : undefined;
     }
 
+    // Capture the offset between start and end at drag begin so we
+    // can compute absolute positions for both points each frame.
+    const offsetRef = useRef(vec.sub(end, start));
     const line = useRef<SVGGElement>(null);
     const {dragging} = useDraggable({
         gestureTarget: line,
         point: start,
-        onMove: (newPoint) => {
-            onMove(vec.sub(newPoint, start));
+        onMove: (newStart) => {
+            const newEnd = vec.add(newStart, offsetRef.current);
+            onMove(newStart, newEnd);
+        },
+        onDragStart: () => {
+            offsetRef.current = vec.sub(end, start);
         },
         constrainKeyboardMovement: (p) => snap(snapStep, p),
     });

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.tsx
@@ -112,8 +112,10 @@ const LinearSystemGraph = (props: LinearSystemGraphProps) => {
                         }),
                     }}
                     ariaDescribedBy={`${linesAriaInfo[i].interceptDescriptionId} ${linesAriaInfo[i].slopeDescriptionId} ${intersectionId}`}
-                    onMoveLine={(delta: vec.Vector2) => {
-                        dispatch(actions.linearSystem.moveLine(i, delta));
+                    onMoveLine={(newStart, newEnd) => {
+                        dispatch(
+                            actions.linearSystem.moveLine(i, newStart, newEnd),
+                        );
                     }}
                     extend={{
                         start: true,

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/linear.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/linear.tsx
@@ -63,8 +63,8 @@ const LinearGraph = (props: LinearGraphProps, key: number) => {
                 ariaLabels={{grabHandleAriaLabel: srLinearGrabHandle}}
                 ariaDescribedBy={`${interceptDescriptionId} ${slopeDescriptionId}`}
                 points={line}
-                onMoveLine={(delta: vec.Vector2) => {
-                    dispatch(actions.linear.moveLine(delta));
+                onMoveLine={(newStart, newEnd) => {
+                    dispatch(actions.linear.moveLine(newStart, newEnd));
                 }}
                 extend={{
                     start: true,

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/ray.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/ray.tsx
@@ -33,8 +33,8 @@ const RayGraph = (props: Props) => {
     const {dispatch} = props;
     const {coords: line} = props.graphState;
 
-    const handleMoveLine = (delta: vec.Vector2) =>
-        dispatch(actions.ray.moveRay(delta));
+    const handleMoveLine = (newStart: vec.Vector2, newEnd: vec.Vector2) =>
+        dispatch(actions.ray.moveRay(newStart, newEnd));
     const handleMovePoint = (pointIndex: number, newPoint: vec.Vector2) =>
         dispatch(actions.ray.movePoint(pointIndex, newPoint));
 

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/segment.tsx
@@ -119,8 +119,10 @@ const SegmentGraph = ({dispatch, graphState}: SegmentProps) => {
                     <MovableLine
                         key={i}
                         points={segment}
-                        onMoveLine={(delta: vec.Vector2) => {
-                            dispatch(actions.segment.moveLine(i, delta));
+                        onMoveLine={(newStart, newEnd) => {
+                            dispatch(
+                                actions.segment.moveLine(i, newStart, newEnd),
+                            );
                         }}
                         onMovePoint={(
                             endpointIndex: number,

diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-action.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-action.ts
@@ -37,7 +37,8 @@ export const actions = {
         moveRadiusPoint,
     },
     linear: {
-        moveLine: (delta: vec.Vector2) => moveLine(0, delta),
+        moveLine: (newStart: vec.Vector2, newEnd: vec.Vector2) =>
+            moveLine(0, newStart, newEnd),
         movePoint: (pointIndex, destination) =>
             movePointInFigure(0, pointIndex, destination),
     },
@@ -68,7 +69,8 @@ export const actions = {
         movePoint,
     },
     ray: {
-        moveRay: (delta: vec.Vector2) => moveLine(0, delta),
+        moveRay: (newStart: vec.Vector2, newEnd: vec.Vector2) =>
+            moveLine(0, newStart, newEnd),
         movePoint: (pointIndex, destination) =>
             movePointInFigure(0, pointIndex, destination),
     },
@@ -109,13 +111,17 @@ export const MOVE_LINE = "move-line";
 export interface MoveLine {
     type: typeof MOVE_LINE;
     itemIndex: number;
-    delta: vec.Vector2;
+    newPoints: [vec.Vector2, vec.Vector2];
 }
-function moveLine(itemIndex: number, delta: vec.Vector2): MoveLine {
+function moveLine(
+    itemIndex: number,
+    newStart: vec.Vector2,
+    newEnd: vec.Vector2,
+): MoveLine {
     return {
         type: MOVE_LINE,
         itemIndex,
-        delta,
+        newPoints: [newStart, newEnd],
     };
 }
 

diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts
@@ -410,7 +410,7 @@ describe("movePointInFigure", () => {
 });
 
 describe("moveSegment", () => {
-    it("moves an entire segment by the given delta vector", () => {
+    it("sets segment coords to the given positions", () => {
         const state: InteractiveGraphState = {
             ...baseSegmentGraphState,
             coords: [
@@ -423,7 +423,7 @@ describe("moveSegment", () => {
 
         const updated = interactiveGraphReducer(
             state,
-            actions.segment.moveLine(0, [5, -3]),
+            actions.segment.moveLine(0, [6, -1], [8, 1]),
         );
 
         invariant(updated.type === "segment");
@@ -446,7 +446,7 @@ describe("moveSegment", () => {
 
         const updated = interactiveGraphReducer(
             state,
-            actions.segment.moveLine(0, [0.5, 0.5]),
+            actions.segment.moveLine(0, [1.5, 2.5], [3.5, 4.5]),
         );
 
         invariant(updated.type === "segment");
@@ -456,7 +456,7 @@ describe("moveSegment", () => {
         ]);
     });
 
-    it("keeps the segment within the graph bounds", () => {
+    it("clamps points to the graph bounds", () => {
         const state: InteractiveGraphState = {
             ...baseSegmentGraphState,
             coords: [
@@ -469,12 +469,13 @@ describe("moveSegment", () => {
 
         const updated = interactiveGraphReducer(
             state,
-            actions.segment.moveLine(0, [99, 99]),
+            actions.segment.moveLine(0, [99, 99], [99, 99]),
         );
 
         invariant(updated.type === "segment");
+        // Each point is clamped independently to the graph range
         expect(updated.coords[0]).toEqual([
-            [7, 7],
+            [9, 9],
             [9, 9],
         ]);
     });
@@ -492,7 +493,7 @@ describe("moveSegment", () => {
 
         const updated = interactiveGraphReducer(
             state,
-            actions.segment.moveLine(0, [1, 1]),
+            actions.segment.moveLine(0, [2, 3], [4, 5]),
         );
 
         expect(updated.hasBeenInteractedWith).toBe(true);

diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts
@@ -331,27 +331,18 @@ function doMoveLine(
     action: MoveLine,
 ): InteractiveGraphState {
     const {snapStep, range} = state;
+    const [newStart, newEnd] = action.newPoints;
+    const newLine: PairOfPoints = [
+        boundAndSnapToGrid(newStart, {snapStep, range}),
+        boundAndSnapToGrid(newEnd, {snapStep, range}),
+    ];
+
     switch (state.type) {
         case "segment":
         case "linear-system": {
             if (action.itemIndex === undefined) {
                 throw new Error("Please provide index of line to move");
             }
-            const currentLine = state.coords[action.itemIndex];
-            // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-            if (!currentLine) {
-                throw new Error("No line to move");
-            }
-            const change = getChange(currentLine, action.delta, {
-                snapStep,
-                range,
-            });
-
-            const newLine: PairOfPoints = [
-                snap(snapStep, vec.add(currentLine[0], change)),
-                snap(snapStep, vec.add(currentLine[1], change)),
-            ];
-
             const newCoords = setAtIndex({
                 array: state.coords,
                 index: action.itemIndex,
@@ -367,17 +358,6 @@ function doMoveLine(
         }
         case "linear":
         case "ray": {
-            const currentLine = state.coords;
-            const change = getChange(currentLine, action.delta, {
-                snapStep,
-                range,
-            });
-
-            const newLine: PairOfPoints = [
-                snap(snapStep, vec.add(currentLine[0], change)),
-                snap(snapStep, vec.add(currentLine[1], change)),
-            ];
-
             return {
                 ...state,
                 type: state.type,
@@ -386,8 +366,6 @@ function doMoveLine(
             };
         }
         default:
-            // The MoveLine action doesn't make sense for other graph types;
-            // ignore it if it somehow happens
             return state;
     }
 }