@khanacademy/perseus 24.2.0 → 24.3.0

package/dist/perseus-api.d.ts

@@ -99,6 +99,7 @@ export declare const ApiOptions: {
                 point?: boolean | undefined;
                 quadratic?: boolean | undefined;
                 sinusoid?: boolean | undefined;
+                angle?: boolean | undefined;
                 "linear-system"?: boolean | undefined;
                 ray?: boolean | undefined;
                 segment?: boolean | undefined;

package/dist/perseus-types.d.ts

@@ -1,6 +1,10 @@
 import type { Coord } from "./interactive2/types";
 import type { Interval, vec } from "mafs";
 export type Range = Interval;
+export type Domain = {
+    min?: number;
+    max?: number;
+};
 export type Size = [number, number];
 export type CollinearTuple = [vec.Vector2, vec.Vector2];
 export type ShowSolutions = "all" | "selected" | "none";
@@ -349,7 +353,7 @@ export type PerseusInteractiveGraphWidgetOptions = {
 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 | LockedVectorType | LockedEllipseType | LockedPolygonType;
+export type LockedFigure = LockedPointType | LockedLineType | LockedVectorType | LockedEllipseType | LockedPolygonType | LockedFunctionType;
 export type LockedFigureType = LockedFigure["type"];
 export type LockedPointType = {
     type: "point";
@@ -390,6 +394,17 @@ export type LockedPolygonType = {
     fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
+export type LockedFunctionType = {
+    type: "function";
+    color: LockedFigureColor;
+    strokeStyle: "solid" | "dashed";
+    equation: string;
+    equationParsed?: {
+        [k: string]: any;
+    };
+    directionalAxis: "x" | "y";
+    domain?: Domain;
+};
 export type PerseusGraphType = PerseusGraphTypeAngle | PerseusGraphTypeCircle | PerseusGraphTypeLinear | PerseusGraphTypeLinearSystem | PerseusGraphTypePoint | PerseusGraphTypePolygon | PerseusGraphTypeQuadratic | PerseusGraphTypeRay | PerseusGraphTypeSegment | PerseusGraphTypeSinusoid;
 export type PerseusGraphTypeCommon = {
     coord?: Coord;
@@ -401,7 +416,7 @@ export type PerseusGraphTypeAngle = {
     angleOffsetDeg?: number;
     snapDegrees?: number;
     match?: "congruent";
-    coords?: ReadonlyArray<Coord>;
+    coords?: [Coord, Coord, Coord];
 };
 export type PerseusGraphTypeCircle = {
     type: "circle";

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

@@ -146,6 +146,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
                 point?: boolean | undefined;
                 quadratic?: boolean | undefined;
                 sinusoid?: boolean | undefined;
+                angle?: boolean | undefined;
                 "linear-system"?: boolean | undefined;
                 ray?: boolean | undefined;
                 segment?: boolean | undefined;

package/dist/types.d.ts

@@ -77,7 +77,7 @@ type TrackInteractionArgs = {
     id: string;
     correct?: boolean;
 } & Partial<TrackingGradedGroupExtraArguments> & Partial<TrackingSequenceExtraArguments>;
-export declare const MafsGraphTypeFlags: readonly ["segment", "linear", "linear-system", "ray", "polygon", "circle", "quadratic", "sinusoid", "point"];
+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"];
 /**
  * APIOptions provides different ways to customize the behaviour of Perseus.

package/dist/widgets/expression.d.ts

@@ -140,6 +140,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;
@@ -218,6 +219,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;
@@ -296,6 +298,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;
@@ -371,6 +374,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;
@@ -449,6 +453,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;
@@ -527,6 +532,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;

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

@@ -147,7 +147,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
      * @param {object} graph Like props.graph or props.correct
      * @param {object} props of an InteractiveGraph instance
      */
-    static getAngleCoords(graph: PerseusGraphTypeAngle, props: Props): ReadonlyArray<Coord>;
+    static getAngleCoords(graph: PerseusGraphTypeAngle, props: Props): [Coord, Coord, Coord];
     static normalizeCoords(coordsList: ReadonlyArray<Coord>, ranges: [Range, Range]): ReadonlyArray<Coord>;
     static getEquationString(props: Props): string;
     static pointsFromNormalized(props: Props, coordsList: ReadonlyArray<Coord>, noSnap?: boolean): ReadonlyArray<Coord>;

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

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

package/dist/widgets/interactive-graphs/graphs/components/{angle.d.ts → angle-indicators.d.ts}

@@ -2,7 +2,7 @@
 import { vec } from "mafs";
 import type { CollinearTuple } from "../../../../perseus-types";
 import type { Interval } from "mafs";
-interface Props {
+interface PolygonAngleProps {
     centerPoint: vec.Vector2;
     endPoints: [vec.Vector2, vec.Vector2];
     polygonLines: readonly CollinearTuple[];
@@ -11,7 +11,17 @@ interface Props {
     showAngles: boolean;
     snapTo: "grid" | "angles" | "sides";
 }
-export declare const Angle: ({ centerPoint, endPoints, range, polygonLines, showAngles, snapTo, }: Props) => JSX.Element | null;
+export declare const PolygonAngle: ({ centerPoint, endPoints, range, polygonLines, showAngles, snapTo, }: PolygonAngleProps) => JSX.Element | null;
+interface AngleProps {
+    vertex: vec.Vector2;
+    coords: [vec.Vector2, vec.Vector2];
+    showAngles: boolean;
+    allowReflexAngles: boolean;
+    angleOffsetDeg: number;
+    snapDegrees: number;
+    range: [Interval, Interval];
+}
+export declare const Angle: ({ vertex, coords, showAngles, allowReflexAngles, range, }: AngleProps) => JSX.Element;
 /**
  * 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-line.d.ts

@@ -12,5 +12,16 @@ type Props = {
     };
 };
 export declare const MovableLine: (props: Props) => JSX.Element;
+type LineProps = {
+    start: vec.Vector2;
+    end: vec.Vector2;
+    onMove: (delta: vec.Vector2) => unknown;
+    stroke?: string | undefined;
+    extend?: undefined | {
+        start: boolean;
+        end: boolean;
+    };
+};
+export declare const Line: (props: LineProps) => JSX.Element;
 export declare function trimRange(range: [Interval, Interval], graphDimensionsInPixels: vec.Vector2): [Interval, Interval];
 export {};

package/dist/widgets/interactive-graphs/graphs/components/text-label.d.ts

@@ -1,6 +1,6 @@
 import type { TextProps } from "mafs";
 import type { PropsWithChildren } from "react";
-type Props = PropsWithChildren<Pick<TextProps, "x" | "y" | "attach" | "attachDistance">>;
+type Props = PropsWithChildren<Pick<TextProps, "x" | "y" | "attach" | "attachDistance" | "color">>;
 export declare const TextLabel: ({ children, ...rest }: Props) => JSX.Element;
 export declare const SvgDefs: () => JSX.Element;
 export {};

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

@@ -6,3 +6,4 @@ export { PolygonGraph } from "./polygon";
 export { CircleGraph } from "./circle";
 export { QuadraticGraph } from "./quadratic";
 export { SinusoidGraph } from "./sinusoid";
+export { AngleGraph } from "./angle";

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

@@ -1,6 +1,7 @@
-import type { LockedFigureFillType, LockedFigureColor, PerseusRenderer, CollinearTuple } from "../../perseus-types";
+import type { CollinearTuple, LockedFigureColor, LockedFigureFillType, LockedFunctionType, PerseusRenderer } from "../../perseus-types";
 import type { Coord } from "@khanacademy/perseus";
 import type { vec } from "mafs";
+export type LockedFunctionOptions = Omit<Partial<LockedFunctionType>, "type" | "equation">;
 export declare function interactiveGraphQuestionBuilder(): InteractiveGraphQuestionBuilder;
 declare class InteractiveGraphQuestionBuilder {
     private gridStep;
@@ -46,6 +47,7 @@ declare class InteractiveGraphQuestionBuilder {
         fillStyle?: LockedFigureFillType;
         strokeStyle?: "solid" | "dashed";
     }): InteractiveGraphQuestionBuilder;
+    addLockedFunction(equation: string, options?: LockedFunctionOptions): this;
     private createLockedPoint;
     private addLockedFigure;
 }

package/dist/widgets/interactive-graphs/locked-figures/locked-function.d.ts

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

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", "point", "circle", "quadratic", "sinusoid"];
+export declare const mafsSupportedGraphTypes: readonly ["angle", "segment", "linear", "linear-system", "ray", "polygon", "point", "circle", "quadratic", "sinusoid"];
 export type MafsSupportedGraphType = (typeof mafsSupportedGraphTypes)[number];
 export declare const trueForAllMafsSupportedGraphTypes: Record<MafsSupportedGraphType, true>;

package/dist/widgets/interactive-graphs/math/angles.d.ts

@@ -0,0 +1,3 @@
+import type { vec } from "mafs";
+export declare function polar(r: number | vec.Vector2, th: number): vec.Vector2;
+export declare const findAngle: (point1: vec.Vector2, point2: vec.Vector2, vertex?: vec.Vector2) => number;

package/dist/widgets/interactive-graphs/math/box.d.ts

@@ -0,0 +1,4 @@
+import type { Interval, vec } from "mafs";
+export type Box = [x: Interval, y: Interval];
+export declare function clampToBox(box: Box, point: vec.Vector2): vec.Vector2;
+export declare function inset(amount: vec.Vector2, box: Box): Box;

package/dist/widgets/interactive-graphs/math/clamp.d.ts

@@ -0,0 +1 @@
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/widgets/interactive-graphs/math/coordinates.d.ts

@@ -0,0 +1,2 @@
+export declare const X = 0;
+export declare const Y = 1;

package/dist/widgets/interactive-graphs/math/index.d.ts

@@ -0,0 +1,6 @@
+export { clamp } from "./clamp";
+export { snap } from "./snap";
+export { inset, clampToBox } from "./box";
+export { X, Y } from "./coordinates";
+export { MIN, MAX, size } from "./interval";
+export { findAngle, polar } from "./angles";

package/dist/widgets/interactive-graphs/math/interval.d.ts

@@ -0,0 +1,5 @@
+import type { Interval } from "mafs";
+export declare const MIN = 0;
+export declare const MAX = 1;
+export declare function size([min, max]: Interval): number;
+export declare function trim(amount: number, interval: Interval): Interval;

package/dist/widgets/interactive-graphs/math/snap.d.ts

@@ -0,0 +1,2 @@
+import type { vec } from "mafs";
+export declare function snap(snapStep: vec.Vector2, point: vec.Vector2): vec.Vector2;

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

@@ -8,7 +8,7 @@ export type MafsGraphProps<T extends InteractiveGraphState> = {
     graphState: T;
     dispatch: (action: InteractiveGraphAction) => unknown;
 };
-export type InteractiveGraphState = SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
+export type InteractiveGraphState = AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [xRange: Interval, yRange: Interval];
@@ -54,6 +54,14 @@ export interface SinusoidGraphState extends InteractiveGraphStateCommon {
     type: "sinusoid";
     coords: [vec.Vector2, vec.Vector2];
 }
+export interface AngleGraphState extends InteractiveGraphStateCommon {
+    type: "angle";
+    showAngles?: boolean;
+    allowReflexAngles?: boolean;
+    angleOffsetDeg?: number;
+    snapDegrees?: number;
+    coords: [Coord, Coord, Coord];
+}
 export type PairOfPoints = [Coord, Coord];
 export type GraphDimensions = {
     range: [Interval, Interval];

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

@@ -8,10 +8,8 @@ import type { Interval, vec } from "mafs";
 export declare const TARGET_SIZE = 44;
 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;
 export declare function bound({ snapStep, range, point, }: {
     snapStep: vec.Vector2;
     range: [Interval, Interval];
     point: vec.Vector2;
 }): vec.Vector2;
-export declare function clamp(value: number, min: number, max: number): number;

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

@@ -134,6 +134,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;
@@ -196,6 +197,7 @@ declare const _default: Readonly<{
                     point?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
+                    angle?: boolean | undefined;
                     "linear-system"?: boolean | undefined;
                     ray?: boolean | undefined;
                     segment?: boolean | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "24.2.0",
+    "version": "24.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -41,7 +41,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.9",
         "@khanacademy/kmath": "^0.1.12",
-        "@khanacademy/math-input": "^19.1.0",
+        "@khanacademy/math-input": "^19.2.0",
         "@khanacademy/perseus-core": "1.4.2",
         "@khanacademy/perseus-linter": "^0.4.0",
         "@khanacademy/pure-markdown": "^0.3.5",