[ Interactive Graph | Vector Graph ] PR5: Editor Support

.changeset/fast-points-complain.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Creation of new Vector Graph Editor

packages/perseus-editor/src/__testdata__/interactive-graph-question-builder.ts

@@ -302,6 +302,14 @@
         return this;
     }
 
+    withVector(options?: {
+        coords?: CollinearTuple;
+        startCoords?: CollinearTuple;
+    }): InteractiveGraphQuestionBuilder {
+        this.interactiveFigureConfig = new VectorGraphConfig(options);
+        return this;
+    }
+
     withPolygon(
         snapTo?: SnapTo,
         options?: {
@@ -842,6 +850,30 @@
     }
 }
 
+class VectorGraphConfig implements InteractiveFigureConfig {
+    private coords?: CollinearTuple;
+    private startCoords?: CollinearTuple;
+
+    constructor(options?: {
+        coords?: CollinearTuple;
+        startCoords?: CollinearTuple;
+    }) {
+        this.coords = options?.coords;
+        this.startCoords = options?.startCoords;
+    }
+
+    correct(): PerseusGraphType {
+        return {
+            type: "vector",
+            coords: this.coords,
+        };
+    }
+
+    graph(): PerseusGraphType {
+        return {type: "vector", startCoords: this.startCoords};
+    }
+}
+
 class PolygonGraphConfig implements InteractiveFigureConfig {
     private snapTo: SnapTo;
     private match?: "similar" | "congruent" | "approx";
@@ -966,7 +998,7 @@
             showAngles: this.showAngles,
             allowReflexAngles: this.allowReflexAngles,
             angleOffsetDeg: this.angleOffsetDeg,
             snapDegrees: this.snapDegrees,
             match: this.match,
         };
     }

packages/perseus-editor/src/__testdata__/interactive-graph.testdata.ts

@@ -157,6 +157,9 @@ export const sinusoidMinimalQuestion: PerseusRenderer =
 export const exponentialMinimalQuestion: PerseusRenderer =
     interactiveGraphQuestionBuilder().withExponential().build();
 
+export const vectorMinimalQuestion: PerseusRenderer =
+    interactiveGraphQuestionBuilder().withVector().build();
+
 export const segmentWithLockedFigures: PerseusRenderer =
     interactiveGraphQuestionBuilder()
         .addLockedPointAt(-7, -7, {labels: [{text: "A"}], ariaLabel: "Point A"})

packages/perseus-editor/src/widgets/__docs__/interactive-graph-editor.stories.tsx

@@ -27,6 +27,7 @@ import {
     segmentWithLockedFigures,
     segmentWithStartingCoordsQuestion,
     exponentialMinimalQuestion,
+    vectorMinimalQuestion,
     sinusoidMinimalQuestion,
     sinusoidWithStartingCoordsAndPiTicksQuestion,
     unlimitedPolygonWithCorrectAnswerQuestion,
@@ -121,6 +122,10 @@ export const InteractiveGraphExponential = (): React.ReactElement => {
     );
 };
 
+export const InteractiveGraphVector = (): React.ReactElement => {
+    return <EditorPageWithStorybookPreview question={vectorMinimalQuestion} />;
+};
+
 export const InteractiveGraphSinusoid = (): React.ReactElement => {
     return (
         <EditorPageWithStorybookPreview question={sinusoidMinimalQuestion} />

packages/perseus-editor/src/widgets/interactive-graph-editor/components/graph-type-selector.tsx

@@ -29,6 +29,11 @@ const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
         "interactive-graph-tangent",
     );
 
+    const showVector = isFeatureOn(
+        {apiOptions: props.apiOptions},
+        "interactive-graph-vector",
+    );
+
     return (
         <SingleSelect
             selectedValue={props.graphType}
@@ -55,6 +60,7 @@ const GraphTypeSelector = (props: GraphTypeSelectorProps) => {
             <OptionItem value="polygon" label="Polygon" />
             <OptionItem value="segment" label="Line Segment(s)" />
             <OptionItem value="ray" label="Ray" />
+            {showVector && <OptionItem value="vector" label="Vector" />}
             <OptionItem value="angle" label="Angle" />
         </SingleSelect>
     );

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-settings.tsx

@@ -11,6 +11,7 @@ import {
     getSegmentCoords,
     getSinusoidCoords,
     getTangentCoords,
+    getVectorCoords,
 } from "@khanacademy/perseus";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
@@ -124,6 +125,15 @@ const StartCoordsSettingsInner = (props: Props) => {
                 />
             );
         }
+        case "vector": {
+            const vectorCoords = getVectorCoords(props, range, step);
+            return (
+                <StartCoordsLine
+                    startCoords={vectorCoords}
+                    onChange={onChange}
+                />
+            );
+        }
         case "tangent":
             const tangentCoords = getTangentCoords(props, range, step);
             return (

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/types.ts

@@ -13,7 +13,8 @@ type GraphTypesThatHaveStartCoords =
     | {type: "segment"}
     | {type: "sinusoid"}
     | {type: "exponential"}
-    | {type: "tangent"};
+    | {type: "tangent"}
+    | {type: "vector"};
 
 export type StartCoords = Extract<
     PerseusGraphType,

packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/util.ts

@@ -12,6 +12,7 @@ import {
     getSegmentCoords,
     getSinusoidCoords,
     getTangentCoords,
+    getVectorCoords,
 } from "@khanacademy/perseus";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 
@@ -46,6 +47,12 @@ export function getDefaultGraphStartCoords(
                 range,
                 step,
             );
+        case "vector":
+            return getVectorCoords(
+                {...graph, startCoords: undefined},
+                range,
+                step,
+            );
         case "segment":
             return getSegmentCoords(
                 {...graph, startCoords: undefined},