@khanacademy/perseus 21.0.0 → 21.1.0

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";

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/widgets/interactive-graph.d.ts

@@ -2,7 +2,7 @@ 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;
@@ -81,7 +81,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/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/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 MafsWrapperProps = {
     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<MafsWrapperProps & {
+    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,13 @@
 import type { vec } from "mafs";
-export type InteractiveGraphAction = MoveControlPoint | MoveLine | MoveAll;
+export type InteractiveGraphAction = MoveControlPoint | MoveLine | MoveAll | MovePoint;
 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 +24,11 @@ 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 {};

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

@@ -5,5 +5,5 @@ import type { PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
  * 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;

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.1.0",
     "publishConfig": {
         "access": "public"
     },