@khanacademy/perseus 23.1.0 → 23.4.0

package/dist/perseus-api.d.ts

@@ -102,7 +102,6 @@ export declare const ApiOptions: {
                 "linear-system"?: boolean | undefined;
                 ray?: boolean | undefined;
             } & {
-                "interactive-graph-locked-features-m1"?: boolean | undefined;
                 "interactive-graph-locked-features-m2"?: boolean | undefined;
             }) | undefined;
         } | undefined;

package/dist/perseus-types.d.ts

@@ -2,7 +2,7 @@ import type { Coord } from "./interactive2/types";
 import type { Interval, vec } from "mafs";
 export type Range = Interval;
 export type Size = [number, number];
-export type CollinearTuple = readonly [vec.Vector2, vec.Vector2];
+export type CollinearTuple = [vec.Vector2, vec.Vector2];
 export type ShowSolutions = "all" | "selected" | "none";
 export type PerseusWidgetsMap = {
     [key in `categorizer ${number}`]: CategorizerWidget;
@@ -349,7 +349,7 @@ export type PerseusInteractiveGraphWidgetOptions = {
 declare const lockedFigureColorNames: readonly ["green", "grayH", "purple", "pink", "red"];
 export type LockedFigureColor = (typeof lockedFigureColorNames)[number];
 export declare const lockedFigureColors: Record<LockedFigureColor, string>;
-export type LockedFigure = LockedPointType | LockedLineType | LockedCircleType;
+export type LockedFigure = LockedPointType | LockedLineType | LockedEllipseType | LockedVectorType;
 export type LockedFigureType = LockedFigure["type"];
 export type LockedPointType = {
     type: "point";
@@ -366,14 +366,22 @@ export type LockedLineType = {
     showPoint1: boolean;
     showPoint2: boolean;
 };
-export type LockedCircleType = {
-    type: "circle";
+export type LockedEllipseFillType = "none" | "solid" | "translucent";
+export declare const lockedEllipseFillStyles: Record<LockedEllipseFillType, number>;
+export type LockedEllipseType = {
+    type: "ellipse";
     center: Coord;
-    radius: number;
+    radius: [x: number, y: number];
+    angle: number;
     color: LockedFigureColor;
-    fillStyle: "none" | "solid" | "translucent";
+    fillStyle: LockedEllipseFillType;
     strokeStyle: "solid" | "dashed";
 };
+export type LockedVectorType = {
+    type: "vector";
+    points: [tail: Coord, tip: Coord];
+    color: LockedFigureColor;
+};
 export type PerseusGraphType = PerseusGraphTypeAngle | PerseusGraphTypeCircle | PerseusGraphTypeLinear | PerseusGraphTypeLinearSystem | PerseusGraphTypePoint | PerseusGraphTypePolygon | PerseusGraphTypeQuadratic | PerseusGraphTypeRay | PerseusGraphTypeSegment | PerseusGraphTypeSinusoid;
 export type PerseusGraphTypeCommon = {
     coord?: Coord;
@@ -398,7 +406,7 @@ export type PerseusGraphTypeLinear = {
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeLinearSystem = {
     type: "linear-system";
-    coords?: ReadonlyArray<CollinearTuple>;
+    coords?: CollinearTuple[];
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypePoint = {
     type: "point";
@@ -410,7 +418,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;
@@ -421,7 +429,7 @@ export type PerseusGraphTypeQuadratic = {
 export type PerseusGraphTypeSegment = {
     type: "segment";
     numSegments?: number;
-    coords?: ReadonlyArray<CollinearTuple>;
+    coords?: CollinearTuple[];
 } & PerseusGraphTypeCommon;
 export type PerseusGraphTypeSinusoid = {
     type: "sinusoid";

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

@@ -149,7 +149,6 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
                 "linear-system"?: boolean | undefined;
                 ray?: boolean | undefined;
             } & {
-                "interactive-graph-locked-features-m1"?: boolean | undefined;
                 "interactive-graph-locked-features-m2"?: boolean | undefined;
             }) | undefined;
         } | undefined;

package/dist/types.d.ts

@@ -78,7 +78,7 @@ type TrackInteractionArgs = {
     correct?: boolean;
 } & Partial<TrackingGradedGroupExtraArguments> & Partial<TrackingSequenceExtraArguments>;
 export declare const MafsGraphTypeFlags: readonly ["segment", "linear", "linear-system", "ray", "polygon", "circle", "quadratic", "sinusoid"];
-export declare const InteractiveGraphLockedFeaturesFlags: readonly ["interactive-graph-locked-features-m1", "interactive-graph-locked-features-m2"];
+export declare const InteractiveGraphLockedFeaturesFlags: readonly ["interactive-graph-locked-features-m2"];
 /**
  * APIOptions provides different ways to customize the behaviour of Perseus.
  *

package/dist/util/geometry.d.ts

@@ -14,6 +14,7 @@ export declare function sign(val: number): 0 | 1 | -1;
 export declare function ccw(a: Coord, b: Coord, c: Coord): number;
 export declare function collinear(a: Coord, b: Coord, c: Coord): boolean;
 export declare function intersects(ab: Line, cd: Line): boolean;
+export declare function polygonSidesIntersect(vertices: Coord[]): boolean;
 export declare function vector(a: any, b: any): number[];
 export declare function reverseVector(vector: Coord): Coord;
 export declare function clockwise(points: Coord[]): boolean;

package/dist/widgets/expression.d.ts

@@ -143,7 +143,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
@@ -220,7 +219,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
@@ -297,7 +295,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
@@ -371,7 +368,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
@@ -448,7 +444,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
@@ -525,7 +520,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | 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/css-cursor.d.ts

@@ -0,0 +1 @@
+export type CSSCursor = "move" | "ew-resize";

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

@@ -1,10 +1,12 @@
 import * as React from "react";
+import type { CSSCursor } from "./css-cursor";
 import type { vec } from "mafs";
 type Props = {
     point: vec.Vector2;
     color?: string | undefined;
     dragging: boolean;
     focusBehavior: FocusBehaviorConfig;
+    cursor?: CSSCursor | undefined;
 };
 type FocusBehaviorConfig = {
     type: "uncontrolled";

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import type { CSSCursor } from "./css-cursor";
 import type { vec } from "mafs";
 type Props = {
     point: vec.Vector2;
     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/index.d.ts

@@ -1,5 +1,6 @@
 export { SegmentGraph } from "./segment";
 export { LinearGraph } from "./linear";
+export { LinearSystemGraph } from "./linear-system";
 export { RayGraph } from "./ray";
 export { PolygonGraph } from "./polygon";
 export { CircleGraph } from "./circle";

package/dist/widgets/interactive-graphs/graphs/linear-system.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { MafsGraphProps, LinearSystemGraphState } from "../types";
+type LinearSystemGraphProps = MafsGraphProps<LinearSystemGraphState>;
+export declare const LinearSystemGraph: (props: LinearSystemGraphProps) => JSX.Element;
+export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { MafsGraphProps, LinearGraphState } from "../types";
 type LinearGraphProps = MafsGraphProps<LinearGraphState>;
-export declare const LinearGraph: (props: LinearGraphProps) => JSX.Element;
+export declare const LinearGraph: (props: LinearGraphProps, key: number) => 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 { LockedFigureColor, PerseusRenderer } from "../../perseus-types";
+import type { LockedEllipseFillType, LockedFigureColor, PerseusRenderer } from "../../perseus-types";
 import type { vec } from "mafs";
 export declare function interactiveGraphQuestionBuilder(): InteractiveGraphQuestionBuilder;
 declare class InteractiveGraphQuestionBuilder {
@@ -21,13 +21,16 @@ 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;
-    addLockedCircle(center: vec.Vector2, radius: number, options?: {
+    addLockedEllipse(center: vec.Vector2, radius: [x: number, y: number], options?: {
+        angle?: number;
         color?: LockedFigureColor;
-        fillStyle?: "none" | "solid" | "translucent";
+        fillStyle?: LockedEllipseFillType;
         strokeStyle?: "solid" | "dashed";
     }): InteractiveGraphQuestionBuilder;
+    addLockedVector(tail: vec.Vector2, tip: vec.Vector2, color?: LockedFigureColor): InteractiveGraphQuestionBuilder;
     private createLockedPoint;
     private addLockedFigure;
 }

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

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

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

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

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

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

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: InteractiveGraphProps["graph"];
-};
-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

@@ -1,5 +1,5 @@
 import type { InteractiveGraphAction } from "./reducer/interactive-graph-action";
-import type { PerseusGraphType, PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
+import type { PerseusInteractiveGraphWidgetOptions } from "../../perseus-types";
 import type { WidgetProps } from "../../types";
 import type { Coord } from "@khanacademy/perseus";
 import type { Interval, vec } from "mafs";
@@ -8,12 +8,7 @@ export type MafsGraphProps<T extends InteractiveGraphState> = {
     graphState: T;
     dispatch: (action: InteractiveGraphAction) => unknown;
 };
-export interface InitializeGraphStateParams<T extends PerseusGraphType> {
-    graph: T;
-    range: [Interval, Interval];
-    step: vec.Vector2;
-}
-export type InteractiveGraphState = SegmentGraphState | LinearGraphState | RayGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
+export type InteractiveGraphState = SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [xRange: Interval, yRange: Interval];
@@ -24,7 +19,11 @@ export interface SegmentGraphState extends InteractiveGraphStateCommon {
     coords: PairOfPoints[];
 }
 export interface LinearGraphState extends InteractiveGraphStateCommon {
-    type: "linear" | "linear-system";
+    type: "linear";
+    coords: PairOfPoints;
+}
+export interface LinearSystemGraphState extends InteractiveGraphStateCommon {
+    type: "linear-system";
     coords: PairOfPoints[];
 }
 export interface PointGraphState extends InteractiveGraphStateCommon {
@@ -33,12 +32,13 @@ export interface PointGraphState extends InteractiveGraphStateCommon {
 }
 export interface RayGraphState extends InteractiveGraphStateCommon {
     type: "ray";
-    coords: PairOfPoints[];
+    coords: PairOfPoints;
 }
 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

@@ -137,7 +137,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
             } | undefined;
@@ -198,7 +197,6 @@ declare const _default: Readonly<{
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                 } & {
-                    "interactive-graph-locked-features-m1"?: boolean | undefined;
                     "interactive-graph-locked-features-m2"?: boolean | undefined;
                 }) | undefined;
             } | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "23.1.0",
+    "version": "23.4.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",

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

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