@khanacademy/perseus 23.3.0 → 23.5.0

package/dist/perseus-api.d.ts

@@ -98,9 +98,9 @@ export declare const ApiOptions: {
                 linear?: boolean | undefined;
                 quadratic?: boolean | undefined;
                 sinusoid?: boolean | undefined;
-                segment?: boolean | undefined;
                 "linear-system"?: boolean | undefined;
                 ray?: boolean | undefined;
+                segment?: boolean | undefined;
             } & {
                 "interactive-graph-locked-features-m2"?: boolean | undefined;
             }) | undefined;

package/dist/perseus-types.d.ts

@@ -346,10 +346,10 @@ export type PerseusInteractiveGraphWidgetOptions = {
     correct: PerseusGraphType;
     lockedFigures?: ReadonlyArray<LockedFigure>;
 };
-declare const lockedFigureColorNames: readonly ["green", "grayH", "purple", "pink", "red"];
+declare const lockedFigureColorNames: readonly ["blue", "green", "grayH", "purple", "pink", "orange", "red"];
 export type LockedFigureColor = (typeof lockedFigureColorNames)[number];
 export declare const lockedFigureColors: Record<LockedFigureColor, string>;
-export type LockedFigure = LockedPointType | LockedLineType | LockedEllipseType | LockedVectorType;
+export type LockedFigure = LockedPointType | LockedLineType | LockedVectorType | LockedEllipseType | LockedPolygonType;
 export type LockedFigureType = LockedFigure["type"];
 export type LockedPointType = {
     type: "point";
@@ -366,21 +366,29 @@ export type LockedLineType = {
     showPoint1: boolean;
     showPoint2: boolean;
 };
-export type LockedEllipseFillType = "none" | "solid" | "translucent";
-export declare const lockedEllipseFillStyles: Record<LockedEllipseFillType, number>;
+export type LockedVectorType = {
+    type: "vector";
+    points: [tail: Coord, tip: Coord];
+    color: LockedFigureColor;
+};
+export type LockedFigureFillType = "none" | "solid" | "translucent";
+export declare const lockedFigureFillStyles: Record<LockedFigureFillType, number>;
 export type LockedEllipseType = {
     type: "ellipse";
     center: Coord;
     radius: [x: number, y: number];
     angle: number;
     color: LockedFigureColor;
-    fillStyle: LockedEllipseFillType;
+    fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
-export type LockedVectorType = {
-    type: "vector";
-    points: [tail: Coord, tip: Coord];
+export type LockedPolygonType = {
+    type: "polygon";
+    points: ReadonlyArray<Coord>;
     color: LockedFigureColor;
+    showVertices: boolean;
+    fillStyle: LockedFigureFillType;
+    strokeStyle: "solid" | "dashed";
 };
 export type PerseusGraphType = PerseusGraphTypeAngle | PerseusGraphTypeCircle | PerseusGraphTypeLinear | PerseusGraphTypeLinearSystem | PerseusGraphTypePoint | PerseusGraphTypePolygon | PerseusGraphTypeQuadratic | PerseusGraphTypeRay | PerseusGraphTypeSegment | PerseusGraphTypeSinusoid;
 export type PerseusGraphTypeCommon = {
@@ -418,7 +426,7 @@ export type PerseusGraphTypePolygon = {
     numSides?: number | "unlimited";
     showAngles?: boolean;
     showSides?: boolean;
-    snapTo?: string;
+    snapTo?: "grid" | "angles" | "sides";
     match?: "similar" | "congruent" | "approx";
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;

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

@@ -145,9 +145,9 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
                 linear?: boolean | undefined;
                 quadratic?: boolean | undefined;
                 sinusoid?: boolean | undefined;
-                segment?: boolean | undefined;
                 "linear-system"?: boolean | undefined;
                 ray?: boolean | undefined;
+                segment?: boolean | undefined;
             } & {
                 "interactive-graph-locked-features-m2"?: boolean | undefined;
             }) | undefined;

package/dist/widgets/expression.d.ts

@@ -139,9 +139,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
@@ -215,9 +215,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
@@ -291,9 +291,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
@@ -364,9 +364,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
@@ -440,9 +440,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
@@ -516,9 +516,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;

package/dist/widgets/interactive-graphs/graphs/components/angle.d.ts

@@ -9,8 +9,9 @@ interface Props {
     active: boolean;
     range: [Interval, Interval];
     showAngles: boolean;
+    snapTo: "grid" | "angles" | "sides";
 }
-export declare const Angle: ({ centerPoint, endPoints, range, polygonLines, showAngles, }: Props) => JSX.Element | null;
+export declare const Angle: ({ centerPoint, endPoints, range, polygonLines, showAngles, snapTo, }: Props) => JSX.Element | null;
 /**
  * Determines if an angle is an inside (false) or outside (true) angle.
  * They way, we know to flip the `largeArc` and `sweepArc` flags.

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

@@ -6,6 +6,7 @@ type Props = {
     onMove: (newPoint: vec.Vector2) => unknown;
     color?: string;
     cursor?: CSSCursor | undefined;
+    snapTo?: "grid" | "angles" | "sides";
 };
 export declare const StyledMovablePoint: (props: Props) => JSX.Element;
 export {};

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import type { QuadraticGraphState, MafsGraphProps } from "../types";
-import type { vec } from "mafs";
 type QuadraticGraphProps = MafsGraphProps<QuadraticGraphState>;
 type QuadraticCoefficient = [number, number, number];
+export type QuadraticCoords = QuadraticGraphState["coords"];
 export declare function QuadraticGraph(props: QuadraticGraphProps): JSX.Element;
-export declare const isValidDestination: (destination: vec.Vector2, elementId: number, coords: [import("../../..").Coord, import("../../..").Coord, import("../../..").Coord]) => boolean;
 export declare const getQuadraticCoefficients: (coords: [import("../../..").Coord, import("../../..").Coord, import("../../..").Coord]) => QuadraticCoefficient | undefined;
 export {};

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

@@ -1,4 +1,4 @@
-import type { LockedEllipseFillType, LockedFigureColor, PerseusRenderer } from "../../perseus-types";
+import type { LockedFigureFillType, LockedFigureColor, PerseusRenderer } from "../../perseus-types";
 import type { vec } from "mafs";
 export declare function interactiveGraphQuestionBuilder(): InteractiveGraphQuestionBuilder;
 declare class InteractiveGraphQuestionBuilder {
@@ -21,15 +21,22 @@ declare class InteractiveGraphQuestionBuilder {
     withTickStep(x: number, y: number): InteractiveGraphQuestionBuilder;
     withSegments(numSegments: number): InteractiveGraphQuestionBuilder;
     withCircle(): InteractiveGraphQuestionBuilder;
+    withPolygon(snapTo: "grid" | "angles" | "sides"): InteractiveGraphQuestionBuilder;
     addLockedPointAt(x: number, y: number): InteractiveGraphQuestionBuilder;
     addLockedLine(point1: vec.Vector2, point2: vec.Vector2): InteractiveGraphQuestionBuilder;
+    addLockedVector(tail: vec.Vector2, tip: vec.Vector2, color?: LockedFigureColor): InteractiveGraphQuestionBuilder;
     addLockedEllipse(center: vec.Vector2, radius: [x: number, y: number], options?: {
         angle?: number;
         color?: LockedFigureColor;
-        fillStyle?: LockedEllipseFillType;
+        fillStyle?: LockedFigureFillType;
+        strokeStyle?: "solid" | "dashed";
+    }): InteractiveGraphQuestionBuilder;
+    addLockedPolygon(points: vec.Vector2[], options?: {
+        color?: LockedFigureColor;
+        showVertices?: boolean;
+        fillStyle?: LockedFigureFillType;
         strokeStyle?: "solid" | "dashed";
     }): InteractiveGraphQuestionBuilder;
-    addLockedVector(tail: vec.Vector2, tip: vec.Vector2, color?: LockedFigureColor): InteractiveGraphQuestionBuilder;
     private createLockedPoint;
     private addLockedFigure;
 }

package/dist/widgets/interactive-graphs/locked-polygon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { LockedPolygonType } from "../../perseus-types";
+declare const LockedPolygon: (props: LockedPolygonType) => JSX.Element;
+export default LockedPolygon;

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

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { type InteractiveGraphAction } from "./reducer/interactive-graph-action";
 import type { InteractiveGraphState, InteractiveGraphProps } from "./types";
+import type { PerseusGraphType } from "../../perseus-types";
 import type { Widget } from "../../renderer";
 import "mafs/core.css";
 import "./mafs-styles.css";
 export type StatefulMafsGraphProps = {
     box: [number, number];
     backgroundImage?: InteractiveGraphProps["backgroundImage"];
-    graph: InteractiveGraphProps["graph"];
+    graph: PerseusGraphType;
     lockedFigures?: InteractiveGraphProps["lockedFigures"];
     range: InteractiveGraphProps["range"];
     snapStep: InteractiveGraphProps["snapStep"];

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

@@ -0,0 +1,10 @@
+import type { PerseusGraphType } from "../../../perseus-types";
+import type { InteractiveGraphState } from "../types";
+import type { Interval } from "mafs";
+export type InitializeGraphStateParams = {
+    range: [x: Interval, y: Interval];
+    step: [x: number, y: number];
+    snapStep: [x: number, y: number];
+    graph: PerseusGraphType;
+};
+export declare function initializeGraphState(params: InitializeGraphStateParams): InteractiveGraphState;

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

@@ -1,5 +1,12 @@
+import type { InitializeGraphStateParams } from "./initialize-graph-state";
 import type { Interval, vec } from "mafs";
-export type InteractiveGraphAction = MoveControlPoint | MoveLine | MoveAll | MovePoint | MoveCenter | MoveRadiusPoint | ChangeSnapStep | ChangeRange;
+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;

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

@@ -1,12 +1,5 @@
-import type { PerseusGraphType } from "../../../perseus-types";
-import type { CircleGraphState, InteractiveGraphProps, InteractiveGraphState } from "../types";
-export type InitializeGraphStateParam = {
-    range: InteractiveGraphProps["range"];
-    step: InteractiveGraphProps["step"];
-    snapStep: InteractiveGraphProps["snapStep"];
-    graph: PerseusGraphType;
-};
-export declare function initializeGraphState(params: InitializeGraphStateParam): InteractiveGraphState;
+import type { CircleGraphState, InteractiveGraphState } from "../types";
+import type { PerseusGraphType } from "@khanacademy/perseus";
 export declare function getGradableGraph(state: InteractiveGraphState, initialGraph: PerseusGraphType): PerseusGraphType;
 /**
  * determine radius of a circle graph

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

@@ -38,6 +38,7 @@ export interface PolygonGraphState extends InteractiveGraphStateCommon {
     type: "polygon";
     showAngles: boolean;
     showSides: boolean;
+    snapTo: "grid" | "angles" | "sides";
     coords: Coord[];
 }
 export interface CircleGraphState extends InteractiveGraphStateCommon {

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

@@ -133,9 +133,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
@@ -193,9 +193,9 @@ declare const _default: Readonly<{
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
-                    segment?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
+                    segment?: boolean | undefined;
                 } & {
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "23.3.0",
+    "version": "23.5.0",
     "publishConfig": {
         "access": "public"
     },
@@ -55,7 +55,7 @@
         "@khanacademy/wonder-blocks-core": "6.4.0",
         "@khanacademy/wonder-blocks-data": "13.0.7",
         "@khanacademy/wonder-blocks-dropdown": "5.3.0",
-        "@khanacademy/wonder-blocks-form": "4.5.1",
+        "@khanacademy/wonder-blocks-form": "^4.7.1",
         "@khanacademy/wonder-blocks-icon": "4.1.0",
         "@khanacademy/wonder-blocks-layout": "2.0.32",
         "@khanacademy/wonder-blocks-link": "6.1.1",
@@ -90,7 +90,7 @@
         "@khanacademy/wonder-blocks-core": "6.4.0",
         "@khanacademy/wonder-blocks-data": "13.0.7",
         "@khanacademy/wonder-blocks-dropdown": "5.3.0",
-        "@khanacademy/wonder-blocks-form": "4.5.1",
+        "@khanacademy/wonder-blocks-form": "^4.7.1",
         "@khanacademy/wonder-blocks-icon": "4.1.0",
         "@khanacademy/wonder-blocks-layout": "2.0.32",
         "@khanacademy/wonder-blocks-link": "6.1.1",