@khanacademy/perseus 25.0.0 → 25.1.1

package/dist/perseus-api.d.ts

@@ -106,6 +106,8 @@ export declare const ApiOptions: {
             } & {
                 "interactive-graph-locked-features-m2"?: boolean | undefined;
                 "interactive-graph-locked-features-m2b"?: boolean | undefined;
+            } & {
+                "start-coords-ui"?: boolean | undefined;
             }) | undefined;
         } | undefined;
         onWidgetStartProps?: ((widgets: import("./perseus-types").PerseusWidgetsMap) => void) | undefined;

package/dist/perseus-types.d.ts

@@ -417,24 +417,29 @@ export type PerseusGraphTypeAngle = {
     snapDegrees?: number;
     match?: "congruent";
     coords?: [Coord, Coord, Coord];
+    startCoords?: [Coord, Coord, Coord];
 };
 export type PerseusGraphTypeCircle = {
     type: "circle";
     center?: Coord;
     radius?: number;
+    startCoords?: Coord;
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeLinear = {
     type: "linear";
     coords?: CollinearTuple;
+    startCoords?: CollinearTuple;
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeLinearSystem = {
     type: "linear-system";
     coords?: CollinearTuple[];
+    startCoords?: CollinearTuple[];
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypePoint = {
     type: "point";
     numPoints?: number | "unlimited";
     coords?: ReadonlyArray<Coord>;
+    startCoords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypePolygon = {
     type: "polygon";
@@ -444,23 +449,28 @@ export type PerseusGraphTypePolygon = {
     snapTo?: "grid" | "angles" | "sides";
     match?: "similar" | "congruent" | "approx";
     coords?: ReadonlyArray<Coord>;
+    startCoords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeQuadratic = {
     type: "quadratic";
     coords?: [Coord, Coord, Coord];
+    startCoords?: [Coord, Coord, Coord];
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeSegment = {
     type: "segment";
     numSegments?: number;
     coords?: CollinearTuple[];
+    startCoords?: CollinearTuple[];
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeSinusoid = {
     type: "sinusoid";
     coords?: ReadonlyArray<Coord>;
+    startCoords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeRay = {
     type: "ray";
     coords?: CollinearTuple;
+    startCoords?: CollinearTuple;
 } & PerseusGraphTypeCommon;
 export type PerseusLabelImageWidgetOptions = {
     choices: ReadonlyArray<string>;

package/dist/server-item-renderer.d.ts

@@ -153,6 +153,8 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
             } & {
                 "interactive-graph-locked-features-m2"?: boolean | undefined;
                 "interactive-graph-locked-features-m2b"?: boolean | undefined;
+            } & {
+                "start-coords-ui"?: boolean | undefined;
             }) | undefined;
         } | undefined;
         onWidgetStartProps?: ((widgets: import("./perseus-types").PerseusWidgetsMap) => void) | undefined;

package/dist/types.d.ts

@@ -79,6 +79,7 @@ type TrackInteractionArgs = {
 } & Partial<TrackingGradedGroupExtraArguments> & Partial<TrackingSequenceExtraArguments>;
 export declare const MafsGraphTypeFlags: readonly ["angle", "segment", "linear", "linear-system", "ray", "polygon", "circle", "quadratic", "sinusoid", "point"];
 export declare const InteractiveGraphLockedFeaturesFlags: readonly ["interactive-graph-locked-features-m2", "interactive-graph-locked-features-m2b"];
+export declare const InteractiveGraphEditorFlags: readonly ["start-coords-ui"];
 /**
  * APIOptions provides different ways to customize the behaviour of Perseus.
  *
@@ -206,6 +207,8 @@ export type APIOptions = Readonly<{
             [Key in (typeof MafsGraphTypeFlags)[number]]?: boolean;
         } & {
             [Key in (typeof InteractiveGraphLockedFeaturesFlags)[number]]?: boolean;
+        } & {
+            [Key in (typeof InteractiveGraphEditorFlags)[number]]?: boolean;
         });
     };
     /**

package/dist/widgets/expression.d.ts

@@ -147,6 +147,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
@@ -226,6 +228,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
@@ -305,6 +309,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
@@ -381,6 +387,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
@@ -460,6 +468,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
@@ -539,6 +549,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;

package/dist/widgets/interactive-graphs/{grid.d.ts → backgrounds/grid.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { GraphRange } from "../../perseus-types";
-import type { SizeClass } from "../../util/sizing-utils";
+import type { GraphRange } from "../../../perseus-types";
+import type { SizeClass } from "../../../util/sizing-utils";
 import type { vec } from "mafs";
 interface GridProps {
     tickStep: vec.Vector2;

package/dist/widgets/interactive-graphs/{legacy-grid.d.ts → backgrounds/legacy-grid.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PerseusImageBackground } from "../../perseus-types";
+import type { PerseusImageBackground } from "../../../perseus-types";
 interface Props {
     box: [number, number];
     backgroundImage?: PerseusImageBackground;

package/dist/widgets/interactive-graphs/interactive-graph-question-builder.d.ts

@@ -4,6 +4,8 @@ import type { vec } from "mafs";
 export type LockedFunctionOptions = Omit<Partial<LockedFunctionType>, "type" | "equation">;
 export declare function interactiveGraphQuestionBuilder(): InteractiveGraphQuestionBuilder;
 declare class InteractiveGraphQuestionBuilder {
+    private content;
+    private backgroundImage?;
     private gridStep;
     private labels;
     private markings;
@@ -15,6 +17,14 @@ declare class InteractiveGraphQuestionBuilder {
     private interactiveFigureConfig;
     private lockedFigures;
     build(): PerseusRenderer;
+    withContent(content: string): InteractiveGraphQuestionBuilder;
+    withBackgroundImage(url: string, height: number, width: number, options?: {
+        scale?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    }): InteractiveGraphQuestionBuilder;
     withGridStep(x: number, y: number): InteractiveGraphQuestionBuilder;
     withAxisLabels(x: string, y: string): InteractiveGraphQuestionBuilder;
     withMarkings(markings: "graph" | "grid" | "none"): InteractiveGraphQuestionBuilder;
@@ -23,17 +33,69 @@ declare class InteractiveGraphQuestionBuilder {
     withSnapStep(x: number, y: number): InteractiveGraphQuestionBuilder;
     withTickStep(x: number, y: number): InteractiveGraphQuestionBuilder;
     withProtractor(): InteractiveGraphQuestionBuilder;
-    withSegments(startCoords: CollinearTuple[]): InteractiveGraphQuestionBuilder;
-    withNumSegments(numSegments: number): InteractiveGraphQuestionBuilder;
-    withLinear(startCoords?: CollinearTuple): InteractiveGraphQuestionBuilder;
-    withLinearSystem(startCoords?: CollinearTuple[]): InteractiveGraphQuestionBuilder;
-    withRay(startCoords?: CollinearTuple): InteractiveGraphQuestionBuilder;
-    withCircle(startCoords?: Coord): InteractiveGraphQuestionBuilder;
-    withQuadratic(startCoords?: [Coord, Coord, Coord]): InteractiveGraphQuestionBuilder;
-    withSinusoid(startCoords?: [Coord, Coord]): InteractiveGraphQuestionBuilder;
-    withPolygon(snapTo: "grid" | "angles" | "sides"): InteractiveGraphQuestionBuilder;
-    addLockedPointAt(x: number, y: number): InteractiveGraphQuestionBuilder;
-    addLockedLine(point1: vec.Vector2, point2: vec.Vector2): InteractiveGraphQuestionBuilder;
+    withSegments(options?: {
+        numSegments?: number;
+        startCoords?: CollinearTuple[];
+        coords?: CollinearTuple[];
+    }): InteractiveGraphQuestionBuilder;
+    withLinear(options?: {
+        coords?: CollinearTuple;
+        startCoords?: CollinearTuple;
+    }): InteractiveGraphQuestionBuilder;
+    withLinearSystem(options?: {
+        coords?: CollinearTuple[];
+        startCoords?: CollinearTuple[];
+    }): InteractiveGraphQuestionBuilder;
+    withRay(options?: {
+        coords?: CollinearTuple;
+        startCoords?: CollinearTuple;
+    }): InteractiveGraphQuestionBuilder;
+    withCircle(options?: {
+        center?: Coord;
+        radius?: number;
+        startCoords?: Coord;
+    }): InteractiveGraphQuestionBuilder;
+    withQuadratic(options?: {
+        coords?: [Coord, Coord, Coord];
+        startCoords?: [Coord, Coord, Coord];
+    }): InteractiveGraphQuestionBuilder;
+    withSinusoid(options?: {
+        coords?: [Coord, Coord];
+        startCoords?: [Coord, Coord];
+    }): InteractiveGraphQuestionBuilder;
+    withPolygon(snapTo: "grid" | "angles" | "sides", options?: {
+        match?: "similar" | "congruent" | "approx";
+        numSides?: number | "unlimited";
+        showAngles?: boolean;
+        showSides?: boolean;
+        coords?: Coord[];
+        startCoords?: Coord[];
+    }): InteractiveGraphQuestionBuilder;
+    withPoints(numPoints: number | "unlimited", options?: {
+        coords?: Coord[];
+        startCoords?: Coord[];
+    }): InteractiveGraphQuestionBuilder;
+    withAngle(options?: {
+        coords?: [Coord, Coord, Coord];
+        startCoords?: [Coord, Coord, Coord];
+        showAngles?: boolean;
+        allowReflexAngles?: boolean;
+        angleOffsetDeg?: number;
+        snapDegrees?: number;
+        match?: "congruent";
+    }): InteractiveGraphQuestionBuilder;
+    addLockedPointAt(x: number, y: number, options?: {
+        color?: LockedFigureColor;
+        filled?: boolean;
+    }): InteractiveGraphQuestionBuilder;
+    addLockedLine(point1: vec.Vector2, point2: vec.Vector2, options?: {
+        kind?: "line" | "ray" | "segment";
+        lineStyle?: "solid" | "dashed";
+        color?: LockedFigureColor;
+        filled?: [boolean, boolean];
+        showPoint1?: boolean;
+        showPoint2?: boolean;
+    }): InteractiveGraphQuestionBuilder;
     addLockedVector(tail: vec.Vector2, tip: vec.Vector2, color?: LockedFigureColor): InteractiveGraphQuestionBuilder;
     addLockedEllipse(center: vec.Vector2, radius: [x: number, y: number], options?: {
         angle?: number;

package/dist/widgets/interactive-graphs/reducer/initialize-graph-state.d.ts

@@ -1,5 +1,5 @@
-import type { PerseusGraphType } from "../../../perseus-types";
-import type { InteractiveGraphState } from "../types";
+import type { PerseusGraphType, PerseusGraphTypeLinear, PerseusGraphTypeRay } from "../../../perseus-types";
+import type { InteractiveGraphState, PairOfPoints } from "../types";
 import type { Interval } from "mafs";
 export type InitializeGraphStateParams = {
     range: [x: Interval, y: Interval];
@@ -8,3 +8,4 @@ export type InitializeGraphStateParams = {
     graph: PerseusGraphType;
 };
 export declare function initializeGraphState(params: InitializeGraphStateParams): InteractiveGraphState;
+export declare function getLineCoords(graph: PerseusGraphTypeRay | PerseusGraphTypeLinear, range: [x: Interval, y: Interval], step: [x: number, y: number]): PairOfPoints;

package/dist/widgets/interactive-graphs/reducer/interactive-graph-action.d.ts

@@ -1,55 +1,84 @@
 import type { InitializeGraphStateParams } from "./initialize-graph-state";
 import type { Interval, vec } from "mafs";
-export type InteractiveGraphAction = Reinitialize | MoveControlPoint | MoveLine | MoveAll | MovePoint | MoveCenter | MoveRadiusPoint | ChangeSnapStep | ChangeRange;
-export declare const REINITIALIZE = "reinitialize";
-export interface Reinitialize {
-    type: typeof REINITIALIZE;
-    params: InitializeGraphStateParams;
-}
-export declare function reinitialize(params: InitializeGraphStateParams): Reinitialize;
-export declare const MOVE_CONTROL_POINT = "move-control-point";
-export interface MoveControlPoint {
-    type: typeof MOVE_CONTROL_POINT;
-    itemIndex: number;
-    pointIndex: number;
-    destination: vec.Vector2;
-}
-export declare function moveControlPoint(pointIndex: number, destination: vec.Vector2, itemIndex: number): MoveControlPoint;
-export declare const MOVE_ALL = "move-all";
+export type InteractiveGraphAction = Reinitialize | MovePointInFigure | MoveLine | MoveAll | MovePoint | MoveCenter | MoveRadiusPoint | ChangeSnapStep | ChangeRange;
+export declare const actions: {
+    angle: {
+        movePoint: typeof movePoint;
+    };
+    circle: {
+        moveCenter: typeof moveCenter;
+        moveRadiusPoint: typeof moveRadiusPoint;
+    };
+    linear: {
+        moveLine: (delta: vec.Vector2) => MoveLine;
+        movePoint: (pointIndex: any, destination: any) => MovePointInFigure;
+    };
+    linearSystem: {
+        moveLine: typeof moveLine;
+        movePointInFigure: typeof movePointInFigure;
+    };
+    pointGraph: {
+        movePoint: typeof movePoint;
+    };
+    polygon: {
+        movePoint: typeof movePoint;
+        moveAll: typeof moveAll;
+    };
+    quadratic: {
+        movePoint: typeof movePoint;
+    };
+    ray: {
+        moveRay: (delta: vec.Vector2) => MoveLine;
+        movePoint: (pointIndex: any, destination: any) => MovePointInFigure;
+    };
+    segment: {
+        movePointInFigure: typeof movePointInFigure;
+        moveLine: typeof moveLine;
+    };
+    sinusoid: {
+        movePoint: typeof movePoint;
+    };
+};
 export declare const MOVE_LINE = "move-line";
-interface MoveItem {
-    delta: vec.Vector2;
-    itemIndex?: number;
-}
-export interface MoveLine extends MoveItem {
+export interface MoveLine {
     type: typeof MOVE_LINE;
+    itemIndex: number;
+    delta: vec.Vector2;
 }
-export interface MoveAll extends MoveItem {
+declare function moveLine(itemIndex: number, delta: vec.Vector2): MoveLine;
+export declare const MOVE_ALL = "move-all";
+export interface MoveAll {
     type: typeof MOVE_ALL;
+    delta: vec.Vector2;
 }
-/** This action assumes the state.coords holds an array of collinear tuples that define lines */
-export declare function moveLine(itemIndex: number, delta: vec.Vector2): MoveLine;
-/** This action assumes a flat array of vectors */
-export declare const moveAll: (delta: vec.Vector2) => MoveAll;
+declare function moveAll(delta: vec.Vector2): MoveAll;
 export declare const MOVE_POINT = "move-point";
 export interface MovePoint {
     type: typeof MOVE_POINT;
     index: number;
     destination: vec.Vector2;
 }
-export declare function movePoint(index: number, destination: vec.Vector2): MovePoint;
+declare function movePoint(index: number, destination: vec.Vector2): MovePoint;
+export declare const MOVE_POINT_IN_FIGURE = "move-point-in-figure";
+export interface MovePointInFigure {
+    type: typeof MOVE_POINT_IN_FIGURE;
+    figureIndex: number;
+    pointIndex: number;
+    destination: vec.Vector2;
+}
+declare function movePointInFigure(figureIndex: number, pointIndex: number, destination: vec.Vector2): MovePointInFigure;
 export declare const MOVE_CENTER = "move-center";
 export interface MoveCenter {
     type: typeof MOVE_CENTER;
     destination: vec.Vector2;
 }
-export declare function moveCenter(destination: vec.Vector2): MoveCenter;
+declare function moveCenter(destination: vec.Vector2): MoveCenter;
 export declare const MOVE_RADIUS_POINT = "MOVE_RADIUS_POINT";
 export interface MoveRadiusPoint {
     type: typeof MOVE_RADIUS_POINT;
     destination: vec.Vector2;
 }
-export declare function moveRadiusPoint(destination: vec.Vector2): MoveRadiusPoint;
+declare function moveRadiusPoint(destination: vec.Vector2): MoveRadiusPoint;
 export declare const CHANGE_SNAP_STEP = "change-snap-step";
 export interface ChangeSnapStep {
     type: typeof CHANGE_SNAP_STEP;
@@ -62,4 +91,10 @@ export interface ChangeRange {
     range: [x: Interval, y: Interval];
 }
 export declare function changeRange(range: [x: Interval, y: Interval]): ChangeRange;
+export declare const REINITIALIZE = "reinitialize";
+export interface Reinitialize {
+    type: typeof REINITIALIZE;
+    params: InitializeGraphStateParams;
+}
+export declare function reinitialize(params: InitializeGraphStateParams): Reinitialize;
 export {};

package/dist/widgets/label-image.d.ts

@@ -141,6 +141,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("..").PerseusWidgetsMap) => void) | undefined;
@@ -204,6 +206,8 @@ declare const _default: Readonly<{
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                     "interactive-graph-locked-features-m2b"?: boolean | undefined;
+                } & {
+                    "start-coords-ui"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
             onWidgetStartProps?: ((widgets: import("..").PerseusWidgetsMap) => void) | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "25.0.0",
+    "version": "25.1.1",
     "publishConfig": {
         "access": "public"
     },