wip: working

Khan · Sep 6, 2024 · 569eb2f · 569eb2f
1 parent c4432ff
commit 569eb2f
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 11 deletions.
diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx
@@ -444,6 +444,7 @@ describe("MafsGraph", () => {
             type: "point",
             numPoints: 2,
             focusedPointIndex: null,
+            previouslyFocusedPointIndex: null,
             hasBeenInteractedWith: true,
             range: [
                 [-10, 10],
@@ -700,6 +701,7 @@ describe("MafsGraph", () => {
                 type: "point",
                 numPoints: "unlimited",
                 focusedPointIndex: null,
+                previouslyFocusedPointIndex: null,
                 hasBeenInteractedWith: true,
                 range: [
                     [-10, 10],
@@ -734,6 +736,7 @@ describe("MafsGraph", () => {
                 type: "point",
                 numPoints: "unlimited",
                 focusedPointIndex: null,
+                previouslyFocusedPointIndex: null,
                 hasBeenInteractedWith: true,
                 range: [
                     [-10, 10],

diff --git a/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx b/packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx
@@ -29,7 +29,11 @@ import {type InteractiveGraphAction} from "./reducer/interactive-graph-action";
 import {actions} from "./reducer/interactive-graph-action";
 import {GraphConfigContext} from "./reducer/use-graph-config";
 
-import type {InteractiveGraphState, InteractiveGraphProps} from "./types";
+import type {
+    InteractiveGraphState,
+    InteractiveGraphProps,
+    PointGraphState,
+} from "./types";
 import type {vec} from "mafs";
 
 import "mafs/core.css";
@@ -168,21 +172,49 @@ export const MafsGraph = (props: MafsGraphProps) => {
 };
 
 const renderPointGraphControls = (props: {
-    state: InteractiveGraphState;
+    state: PointGraphState;
     dispatch: (action: InteractiveGraphAction) => unknown;
 }) => (
-    <Button
-        kind="secondary"
+    <View
         style={{
-            width: "100%",
-            marginLeft: "20px",
-        }}
-        onClick={() => {
-            props.dispatch(actions.pointGraph.addPoint([0, 0]));
+            flexDirection: "row",
         }}
     >
-        Add Point
-    </Button>
+        <Button
+            kind="secondary"
+            style={{
+                width: "100%",
+                marginLeft: "20px",
+            }}
+            onClick={() => {
+                props.dispatch(actions.pointGraph.addPoint([0, 0]));
+            }}
+        >
+            Add Point
+        </Button>
+        {(props.state.focusedPointIndex !== null ||
+            props.state.previouslyFocusedPointIndex !== null) && (
+            <Button
+                kind="secondary"
+                color="destructive"
+                style={{
+                    width: "100%",
+                    marginLeft: "20px",
+                }}
+                onClick={(event) => {
+                    event.preventDefault();
+                    console.log(props.state.focusedPointIndex);
+                    props.dispatch(
+                        actions.pointGraph.removePoint(
+                            props.state.previouslyFocusedPointIndex!,
+                        ),
+                    );
+                }}
+            >
+                Remove Point
+            </Button>
+        )}
+    </View>
 );
 
 const renderGraphControls = (props: {

diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts
@@ -78,6 +78,7 @@ export function initializeGraphState(
                 coords: getPointCoords(graph, range, step),
                 numPoints: graph.numPoints || 0,
                 focusedPointIndex: null,
+                previouslyFocusedPointIndex: null,
             };
         case "circle":
             return {

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
@@ -31,6 +31,7 @@ const basePointGraphState: InteractiveGraphState = {
         [-10, 10],
     ],
     focusedPointIndex: null,
+    previouslyFocusedPointIndex: null,
     snapStep: [1, 1],
     coords: [],
 };
@@ -44,6 +45,7 @@ const baseUnlimitedPointGraphState: PointGraphState = {
         [-10, 10],
     ],
     focusedPointIndex: null,
+    previouslyFocusedPointIndex: null,
     snapStep: [1, 1],
     coords: [],
 };

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
@@ -141,6 +141,7 @@ function doBlurPoint(
         case "point":
             return {
                 ...state,
+                previouslyFocusedPointIndex: state.focusedPointIndex,
                 focusedPointIndex: null,
             };
         default:
@@ -605,6 +606,7 @@ function doRemovePoint(
         ...state,
         coords: state.coords.filter((_, i) => i !== action.index),
         focusedPointIndex: null,
+        previouslyFocusedPointIndex: null,
     };
 }
 

diff --git a/packages/perseus/src/widgets/interactive-graphs/types.ts b/packages/perseus/src/widgets/interactive-graphs/types.ts
@@ -54,6 +54,7 @@ export interface PointGraphState extends InteractiveGraphStateCommon {
     coords: Coord[];
     numPoints?: number | "unlimited";
     focusedPointIndex: number | null;
+    previouslyFocusedPoint: number | null;
 }
 
 export interface RayGraphState extends InteractiveGraphStateCommon {