@khanacademy/perseus 21.0.0 → 21.2.0

package/dist/perseus-api.d.ts

@@ -96,7 +96,7 @@ export declare const ApiOptions: {
         crossOutEnabled?: boolean | undefined;
         editorChangeDelay?: number | undefined;
         flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-        onWidgetStartProps?: ((widgets: import("./perseus-types").PerseusWidgetsMap) => import("./perseus-types").PerseusWidgetsMap) | undefined;
+        onWidgetStartProps?: ((widgets: import("./perseus-types").PerseusWidgetsMap) => void) | undefined;
     }> & {
         GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
         baseElements: {

package/dist/perseus-types.d.ts

@@ -250,6 +250,10 @@ export type PerseusGradedGroupWidgetOptions = {
 export type PerseusGradedGroupSetWidgetOptions = {
     gradedGroups: ReadonlyArray<PerseusGradedGroupWidgetOptions>;
 };
+export type GraphRange = [
+    x: [min: number, max: number],
+    y: [min: number, max: number]
+];
 export type PerseusGrapherWidgetOptions = {
     availableTypes: ReadonlyArray<"absolute_value" | "exponential" | "linear" | "logarithm" | "quadratic" | "sinusoid" | "tangent">;
     correct: {
@@ -296,7 +300,7 @@ export type PerseusGrapherWidgetOptions = {
         gridStep?: [number, number];
         labels: [string, string];
         markings: "graph" | "none" | "grid";
-        range: [[number, number], [number, number]];
+        range: GraphRange;
         rulerLabel: "";
         rulerTicks: number;
         showProtractor?: boolean;
@@ -341,7 +345,7 @@ export type PerseusInteractiveGraphWidgetOptions = {
     showTooltips?: boolean;
     rulerLabel: string;
     rulerTicks: number;
-    range: [[number, number], [number, number]];
+    range: GraphRange;
     graph: PerseusGraphType;
     correct: PerseusGraphType;
     lockedFigures?: ReadonlyArray<LockedFigure>;

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

@@ -138,7 +138,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
         crossOutEnabled?: boolean | undefined;
         editorChangeDelay?: number | undefined;
         flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-        onWidgetStartProps?: ((widgets: import("./perseus-types").PerseusWidgetsMap) => import("./perseus-types").PerseusWidgetsMap) | undefined;
+        onWidgetStartProps?: ((widgets: import("./perseus-types").PerseusWidgetsMap) => void) | undefined;
     }> | undefined;
     linterContext?: PerseusLinter.LinterContextProps | undefined;
     onRendered?: ((isRendered: boolean) => void) | undefined;

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import type { ILogger } from "./logging/log";
 import type { Item } from "./multi-items/item-types";
 import type { PerseusAnswerArea, PerseusRenderer, PerseusWidget, PerseusWidgetsMap } from "./perseus-types";
 import type { SizeClass } from "./util/sizing-utils";
+import type { InteractiveGraphState } from "./widgets/interactive-graphs/types";
 import type { KeypadAPI } from "@khanacademy/math-input";
 import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
@@ -65,6 +66,7 @@ export type ChangeHandler = (arg1: {
     currentValue?: string;
     selected?: number;
     plot?: any;
+    graph?: InteractiveGraphState;
 }, callback?: () => unknown | null | undefined, silent?: boolean) => unknown;
 export type ImageUploader = (file: string, callback: (url: string) => unknown) => unknown;
 export type WidgetSize = "normal" | "small" | "mini";
@@ -203,7 +205,7 @@ export type APIOptions = Readonly<{
      * This is useful for when we need to know how a widget has shuffled its
      * the available choices.
      */
-    onWidgetStartProps?: (widgets: PerseusWidgetsMap) => PerseusWidgetsMap;
+    onWidgetStartProps?: (widgets: PerseusWidgetsMap) => void;
 }>;
 type TeXProps = {
     children: string;

package/dist/util/extract-perseus-data.d.ts

@@ -1,4 +1,4 @@
-import type { PerseusItem, PerseusRenderer, PerseusWidgetsMap } from "../perseus-types";
+import type { PerseusItem, PerseusWidgetsMap, PerseusRenderer } from "../perseus-types";
 /**
  * This function extracts the answers from the widgets.
  *
@@ -22,7 +22,7 @@ declare function getAnswersFromWidgets(widgets: PerseusRenderer["widgets"]): Rea
  * @param {PerseusRenderer["widgets"]} widgets
  * @returns
  */
-declare function injectWidgets(content: string, widgets: PerseusRenderer["widgets"]): string;
+declare function injectWidgets(content: string, widgets: PerseusRenderer["widgets"], widgetProps?: PerseusWidgetsMap): string;
 export declare const isWrongAnswerSupported: (widgetIds: Array<string>, widgetMap: PerseusWidgetsMap) => boolean;
 export declare const shouldHaveIndividualAnswer: (widgetId: string, widgetMap: PerseusWidgetsMap) => boolean;
 export declare const getAnswerFromUserInput: (widgetType: string, userInput: any) => any;

package/dist/util.d.ts

@@ -188,6 +188,8 @@ declare function getWordBeforeCursor(textarea: HTMLTextAreaElement): WordAndPosi
  * @param {int} pos - The position where the cursor will be moved
  */
 declare function moveCursor(textarea: HTMLTextAreaElement, pos: number): void;
+type Cloneable = null | undefined | boolean | string | number | Cloneable[] | readonly Cloneable[];
+declare function deepClone<T extends Cloneable>(obj: T): T;
 declare const Util: {
     readonly inputPathsEqual: typeof inputPathsEqual;
     readonly nestedMap: <T, M>(children: T | ReadonlyArray<T>, func: (arg1: T) => M, context: unknown) => M | ReadonlyArray<M>;
@@ -242,5 +244,6 @@ declare const Util: {
     };
     readonly unescapeMathMode: (label: string) => string;
     readonly random: RNG;
+    readonly deepClone: typeof deepClone;
 };
 export default Util;

package/dist/widgets/expression.d.ts

@@ -124,7 +124,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => import("../perseus-types").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -191,7 +191,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => import("../perseus-types").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -258,7 +258,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => import("../perseus-types").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -322,7 +322,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => import("../perseus-types").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -389,7 +389,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => import("../perseus-types").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -456,7 +456,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => import("../perseus-types").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("../perseus-types").PerseusWidgetsMap) => void) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {

package/dist/widgets/interactive-graph.d.ts

@@ -2,10 +2,13 @@ import * as React from "react";
 import type { Coord } from "../interactive2/types";
 import type { PerseusGraphType, PerseusGraphTypeAngle, PerseusGraphTypePoint, PerseusGraphTypePolygon, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions } from "../perseus-types";
 import type { Widget } from "../renderer";
-import type { PerseusScore, WidgetProps } from "../types";
+import type { ChangeHandler, PerseusScore, WidgetProps } from "../types";
 import type { QuadraticCoefficient, SineCoefficient, Range } from "../util/geometry";
 type RenderProps = PerseusInteractiveGraphWidgetOptions;
-type Rubric = PerseusInteractiveGraphWidgetOptions;
+export type Rubric = {
+    correct: PerseusGraphType;
+    graph: PerseusGraphType;
+};
 type Props = WidgetProps<RenderProps, Rubric>;
 type State = any;
 type DefaultProps = {
@@ -81,7 +84,7 @@ declare class LegacyInteractiveGraph extends React.Component<Props, State> {
     createPointForPolygonType: (arg1: Coord, arg2: number) => any;
     updateCoordsFromPoints: () => void;
     clearCoords: () => void;
-    onChange: (arg1: any) => void;
+    onChange: ChangeHandler;
     addPointControls: () => void;
     removePointControls: () => void;
     addSegmentControls: () => void;

package/dist/widgets/interactive-graphs/axis-arrows.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AxisArrows(): JSX.Element;

package/dist/widgets/interactive-graphs/axis-ticks.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function generateTickLocations(tickStep: number, min: number, max: number): number[];
+type Props = {
+    tickStep: [number, number];
+    range: [[number, number], [number, number]];
+};
+export declare const AxisTicks: (props: Props) => JSX.Element;
+export {};

package/dist/widgets/interactive-graphs/graphs/components/movable-line.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
 import { vec } from "mafs";
 import type { Interval } from "mafs";
-export declare const MovableLine: (props: {
+type Props = {
     start: vec.Vector2;
     end: vec.Vector2;
     onMove: (delta: vec.Vector2) => unknown;
-    stroke?: string | undefined;
+    stroke?: string;
     extend?: {
         start: boolean;
         end: boolean;
         range: [Interval, Interval];
-    } | undefined;
-}) => JSX.Element;
+    };
+};
+export declare const MovableLine: (props: Props) => JSX.Element;
+export {};

package/dist/widgets/interactive-graphs/graphs/point.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { PointGraphState, MafsGraphProps } from "../types";
+type PointGraphProps = MafsGraphProps<PointGraphState>;
+export declare function PointGraph(props: PointGraphProps): JSX.Element;
+export {};

package/dist/widgets/interactive-graphs/grid.d.ts

@@ -1,11 +1,22 @@
 /// <reference types="react" />
+import type { GraphRange } from "../../perseus-types";
 import type { SizeClass } from "../../util/sizing-utils";
+import type { vec } from "mafs";
 interface GridProps {
-    step: [number, number];
-    gridStep: [number, number];
-    range: [[number, number], [number, number]];
+    tickStep: vec.Vector2;
+    gridStep: vec.Vector2;
+    range: GraphRange;
     containerSizeClass: SizeClass;
     markings: "graph" | "grid" | "none";
 }
+/**
+ * lineLabelText get the text that should
+ * be displayed for a specific tick place
+ *
+ * @param {number} n the tick number
+ * @param {number} tickStep how frequently a label should appear
+ * @param {vec.Vector2} range the min/max range on the axis
+ */
+export declare const lineLabelText: (n: number, tickStep: number, range: vec.Vector2) => string;
 export declare const Grid: (props: GridProps) => JSX.Element | null;
 export {};

package/dist/widgets/interactive-graphs/mafs-graph.d.ts

@@ -1,80 +1,21 @@
 import * as React from "react";
+import type { InteractiveGraphProps } from "./types";
 import type { Widget } from "../../renderer";
 import "mafs/core.css";
 import "./mafs-styles.css";
-export declare const MafsGraph: React.ForwardRefExoticComponent<import("../..").PerseusInteractiveGraphWidgetOptions & {
-    widgetId: string;
-    alignment: string | null | undefined;
-    static: boolean | null | undefined;
-    problemNum: number | null | undefined;
-    apiOptions: Readonly<Readonly<{
-        isArticle?: boolean | undefined;
-        onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
-        onFocusChange?: ((newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
-        GroupMetadataEditor?: React.ComponentType<any> | undefined;
-        showAlignmentOptions?: boolean | undefined;
-        readOnly?: boolean | undefined;
-        answerableCallback?: ((arg1: boolean) => unknown) | undefined;
-        getAnotherHint?: (() => unknown) | undefined;
-        interactionCallback?: ((widgetData: {
-            [widgetId: string]: any;
-        }) => void) | undefined;
-        groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
-        imagePlaceholder?: React.ReactNode;
-        widgetPlaceholder?: React.ReactNode;
-        baseElements?: {
-            Link: React.ComponentType<any>;
-        } | undefined;
-        imagePreloader?: ((dimensions: import("../../types").Dimensions) => React.ReactNode) | undefined;
-        trackInteraction?: ((args: {
-            type: string;
-            id: string;
-            correct?: boolean | undefined;
-        } & Partial<import("../../types").TrackingGradedGroupExtraArguments> & Partial<import("../../types").TrackingSequenceExtraArguments>) => void) | undefined;
-        customKeypad?: boolean | undefined;
-        nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
-        isMobile?: boolean | undefined;
-        setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
-        useDraftEditor?: boolean | undefined;
-        hintProgressColor?: string | undefined;
-        canScrollPage?: boolean | undefined;
-        inModal?: boolean | undefined;
-        crossOutEnabled?: boolean | undefined;
-        editorChangeDelay?: number | undefined;
-        flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-        onWidgetStartProps?: ((widgets: import("../..").PerseusWidgetsMap) => import("../..").PerseusWidgetsMap) | undefined;
-    }> & {
-        GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
-        baseElements: {
-            Link: React.ComponentType<any>;
-        };
-        canScrollPage: NonNullable<boolean | undefined>;
-        crossOutEnabled: NonNullable<boolean | undefined>;
-        editorChangeDelay: number;
-        groupAnnotator: (groupNumber: number, widgetId: string) => React.ReactNode;
-        inModal: NonNullable<boolean | undefined>;
-        isArticle: NonNullable<boolean | undefined>;
-        isMobile: NonNullable<boolean | undefined>;
-        onFocusChange: (newFocusPath: import("../..").FocusPath, oldFocusPath: import("../..").FocusPath, keypadHeight?: number | undefined, focusedElement?: HTMLElement | undefined) => unknown;
-        onInputError: (widgetId: any, value: string, message?: string | null | undefined) => unknown;
-        readOnly: NonNullable<boolean | undefined>;
-        setDrawingAreaAvailable: (arg1: boolean) => unknown;
-        showAlignmentOptions: NonNullable<boolean | undefined>;
-        useDraftEditor: NonNullable<boolean | undefined>;
-    }>;
-    keypadElement?: any;
-    questionCompleted?: boolean | undefined;
-    onFocus: (blurPath: import("../..").FocusPath) => void;
-    onBlur: (blurPath: import("../..").FocusPath) => void;
-    findWidgets: (arg1: import("../../types").FilterCriterion) => readonly any[];
-    reviewModeRubric: import("../..").PerseusInteractiveGraphWidgetOptions;
-    onChange: import("../..").ChangeHandler;
-    trackInteraction: (extraData?: {} | undefined) => void;
-    isLastUsedWidget: boolean;
-    linterContext: import("@khanacademy/perseus-linter").LinterContextProps;
-    containerSizeClass: import("../../util/sizing-utils").SizeClass;
-} & {
-    children?: React.ReactNode;
-} & {
+export type Props = {
     box: [number, number];
+    backgroundImage?: InteractiveGraphProps["backgroundImage"];
+    graph: InteractiveGraphProps["graph"];
+    lockedFigures?: InteractiveGraphProps["lockedFigures"];
+    range: InteractiveGraphProps["range"];
+    snapStep: InteractiveGraphProps["snapStep"];
+    step: InteractiveGraphProps["step"];
+    gridStep: InteractiveGraphProps["gridStep"];
+    containerSizeClass: InteractiveGraphProps["containerSizeClass"];
+    markings: InteractiveGraphProps["markings"];
+    onChange: InteractiveGraphProps["onChange"];
+};
+export declare const MafsGraph: React.ForwardRefExoticComponent<Props & {
+    children?: React.ReactNode;
 } & React.RefAttributes<Partial<Widget>>>;

package/dist/widgets/interactive-graphs/mafs-supported-graph-types.d.ts

@@ -1,3 +1,3 @@
-export declare const mafsSupportedGraphTypes: readonly ["segment", "linear", "linear-system", "ray", "polygon"];
+export declare const mafsSupportedGraphTypes: readonly ["segment", "linear", "linear-system", "ray", "polygon", "point"];
 export type MafsSupportedGraphType = (typeof mafsSupportedGraphTypes)[number];
 export declare const trueForAllMafsSupportedGraphTypes: Record<MafsSupportedGraphType, true>;

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

@@ -1,13 +1,14 @@
+import type { Props as MafsGraphProps } from "../mafs-graph";
 import type { vec } from "mafs";
-export type InteractiveGraphAction = MoveControlPoint | MoveLine | MoveAll;
+export type InteractiveGraphAction = MoveControlPoint | MoveLine | MoveAll | MovePoint | ChangeSnapStep | ChangeRange;
 export declare const MOVE_CONTROL_POINT = "move-control-point";
 export interface MoveControlPoint {
     type: typeof MOVE_CONTROL_POINT;
-    itemIndex?: number;
+    itemIndex: number;
     pointIndex: number;
     destination: vec.Vector2;
 }
-export declare function moveControlPoint(pointIndex: number, destination: vec.Vector2, itemIndex?: number): MoveControlPoint;
+export declare function moveControlPoint(pointIndex: number, destination: vec.Vector2, itemIndex: number): MoveControlPoint;
 export declare const MOVE_ALL = "move-all";
 export declare const MOVE_LINE = "move-line";
 interface MoveItem {
@@ -24,4 +25,23 @@ export interface MoveAll extends MoveItem {
 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;
+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;
+export declare const CHANGE_SNAP_STEP = "change-snap-step";
+export interface ChangeSnapStep {
+    type: typeof CHANGE_SNAP_STEP;
+    snapStep: MafsGraphProps["snapStep"];
+}
+export declare function changeSnapStep(snapStep: MafsGraphProps["snapStep"]): ChangeSnapStep;
+export declare const CHANGE_RANGE = "change-range";
+export interface ChangeRange {
+    type: typeof CHANGE_RANGE;
+    range: MafsGraphProps["range"];
+}
+export declare function changeRange(range: MafsGraphProps["range"]): ChangeRange;
 export {};

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

@@ -1,3 +1,3 @@
 import { type InteractiveGraphAction } from "./interactive-graph-action";
 import type { InteractiveGraphState } from "../types";
-export declare function interactiveGraphReducer<GraphState extends InteractiveGraphState>(state: Readonly<GraphState>, action: InteractiveGraphAction): GraphState;
+export declare function interactiveGraphReducer(state: InteractiveGraphState, action: InteractiveGraphAction): InteractiveGraphState;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import type { InteractiveGraphAction } from "./interactive-graph-action";
+import type { InteractiveGraphState } from "../types";
+export declare const GraphStateContext: React.Context<{
+    state: InteractiveGraphState;
+    dispatch: React.Dispatch<InteractiveGraphAction>;
+}>;
+export default function useGraphState(): {
+    state: InteractiveGraphState;
+    dispatch: React.Dispatch<InteractiveGraphAction>;
+};

package/dist/widgets/interactive-graphs/types.d.ts

@@ -1,6 +1,7 @@
 import type { InteractiveGraphAction } from "./reducer/interactive-graph-action";
-import type { CollinearTuple, PerseusGraphType, PerseusGraphTypeLinearSystem, PerseusGraphTypePolygon, PerseusGraphTypeRay, PerseusGraphTypeSegment, PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
+import type { PerseusGraphType, PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
 import type { WidgetProps } from "../../types";
+import type { Coord } from "@khanacademy/perseus";
 import type { Interval, vec } from "mafs";
 export type InteractiveGraphProps = WidgetProps<PerseusInteractiveGraphWidgetOptions, PerseusInteractiveGraphWidgetOptions>;
 export type MafsGraphProps<T extends InteractiveGraphState> = {
@@ -12,17 +13,37 @@ export interface InitializeGraphStateParams<T extends PerseusGraphType> {
     range: [Interval, Interval];
     step: vec.Vector2;
 }
-export type InteractiveGraphState = SegmentGraphState | LinearGraphState | RayGraphState | PolygonGraphState;
+export type InteractiveGraphState = SegmentGraphState | LinearGraphState | RayGraphState | PolygonGraphState | PointGraphState | CircleGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [Interval, Interval];
     snapStep: vec.Vector2;
 }
-export type SegmentGraphState = InteractiveGraphStateCommon & Omit<PerseusGraphTypeSegment, "numSegments">;
-export type LinearGraphState = InteractiveGraphStateCommon & Omit<PerseusGraphTypeLinearSystem, "type"> & {
+export interface SegmentGraphState extends InteractiveGraphStateCommon {
+    type: "segment";
+    coords: PairOfPoints[];
+}
+export interface LinearGraphState extends InteractiveGraphStateCommon {
     type: "linear" | "linear-system";
-};
-export type RayGraphState = InteractiveGraphStateCommon & Omit<PerseusGraphTypeRay, "coords"> & {
-    coords: readonly CollinearTuple[];
-};
-export type PolygonGraphState = InteractiveGraphStateCommon & PerseusGraphTypePolygon;
+    coords: PairOfPoints[];
+}
+export interface PointGraphState extends InteractiveGraphStateCommon {
+    type: "point";
+    coords: Coord[];
+}
+export interface RayGraphState extends InteractiveGraphStateCommon {
+    type: "ray";
+    coords: PairOfPoints[];
+}
+export interface PolygonGraphState extends InteractiveGraphStateCommon {
+    type: "polygon";
+    showAngles: boolean;
+    showSides: boolean;
+    coords: Coord[];
+}
+export interface CircleGraphState extends InteractiveGraphStateCommon {
+    type: "circle";
+    center: Coord;
+    radius: number;
+}
+export type PairOfPoints = [Coord, Coord];

package/dist/widgets/interactive-graphs/utils.d.ts

@@ -1,9 +1,11 @@
 import type { Coord } from "../../interactive2/types";
 import type { PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
+import type { vec } from "mafs";
 /**
  * 44 is touch best practice and AAA compliant for WCAG
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
  */
 export declare const TARGET_SIZE = 44;
-export declare const normalizePoints: <A extends readonly Coord[]>(range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"], coordsList: A, noSnap?: boolean) => A;
-export declare const normalizeCoords: <A extends readonly Coord[]>(coordsList: A, ranges: PerseusInteractiveGraphWidgetOptions["range"]) => A;
+export declare const normalizePoints: <A extends Coord[]>(range: PerseusInteractiveGraphWidgetOptions["range"], step: PerseusInteractiveGraphWidgetOptions["step"], coordsList: A, noSnap?: boolean) => A;
+export declare const normalizeCoords: <A extends Coord[]>(coordsList: A, ranges: PerseusInteractiveGraphWidgetOptions["range"]) => A;
+export declare function snap(snapStep: vec.Vector2, point: vec.Vector2): vec.Vector2;

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

@@ -123,7 +123,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("..").PerseusWidgetsMap) => import("..").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("..").PerseusWidgetsMap) => void) | undefined;
         }>;
         choices: readonly string[];
         imageAlt: string;
@@ -172,7 +172,7 @@ declare const _default: Readonly<{
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
             flags?: Record<string, boolean | Record<string, boolean>> | undefined;
-            onWidgetStartProps?: ((widgets: import("..").PerseusWidgetsMap) => import("..").PerseusWidgetsMap) | undefined;
+            onWidgetStartProps?: ((widgets: import("..").PerseusWidgetsMap) => void) | undefined;
         }>;
         choices: readonly string[];
         imageAlt: string;

package/package.json

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