@khanacademy/perseus 33.2.1 → 33.3.0

package/dist/perseus-api.d.ts

@@ -95,6 +95,7 @@ export declare const ApiOptions: {
             mafs?: false | ({
                 circle?: boolean | undefined;
                 polygon?: boolean | undefined;
+                none?: boolean | undefined;
                 linear?: boolean | undefined;
                 quadratic?: boolean | undefined;
                 sinusoid?: boolean | undefined;

package/dist/perseus-types.d.ts

@@ -387,6 +387,7 @@ export type LockedFigureColor = (typeof lockedFigureColorNames)[number];
 export declare const lockedFigureColors: Record<LockedFigureColor, string>;
 export type LockedFigure = LockedPointType | LockedLineType | LockedVectorType | LockedEllipseType | LockedPolygonType | LockedFunctionType | LockedLabelType;
 export type LockedFigureType = LockedFigure["type"];
+export type LockedLineStyle = "solid" | "dashed";
 export type LockedPointType = {
     type: "point";
     coord: Coord;
@@ -398,7 +399,7 @@ export type LockedLineType = {
     kind: "line" | "ray" | "segment";
     points: [point1: LockedPointType, point2: LockedPointType];
     color: LockedFigureColor;
-    lineStyle: "solid" | "dashed";
+    lineStyle: LockedLineStyle;
     showPoint1: boolean;
     showPoint2: boolean;
 };
@@ -416,7 +417,7 @@ export type LockedEllipseType = {
     angle: number;
     color: LockedFigureColor;
     fillStyle: LockedFigureFillType;
-    strokeStyle: "solid" | "dashed";
+    strokeStyle: LockedLineStyle;
 };
 export type LockedPolygonType = {
     type: "polygon";
@@ -424,12 +425,12 @@ export type LockedPolygonType = {
     color: LockedFigureColor;
     showVertices: boolean;
     fillStyle: LockedFigureFillType;
-    strokeStyle: "solid" | "dashed";
+    strokeStyle: LockedLineStyle;
 };
 export type LockedFunctionType = {
     type: "function";
     color: LockedFigureColor;
-    strokeStyle: "solid" | "dashed";
+    strokeStyle: LockedLineStyle;
     equation: string;
     directionalAxis: "x" | "y";
     domain?: Interval;
@@ -441,7 +442,7 @@ export type LockedLabelType = {
     color: LockedFigureColor;
     size: "small" | "medium" | "large";
 };
-export type PerseusGraphType = PerseusGraphTypeAngle | PerseusGraphTypeCircle | PerseusGraphTypeLinear | PerseusGraphTypeLinearSystem | PerseusGraphTypePoint | PerseusGraphTypePolygon | PerseusGraphTypeQuadratic | PerseusGraphTypeRay | PerseusGraphTypeSegment | PerseusGraphTypeSinusoid;
+export type PerseusGraphType = PerseusGraphTypeAngle | PerseusGraphTypeCircle | PerseusGraphTypeLinear | PerseusGraphTypeLinearSystem | PerseusGraphTypeNone | PerseusGraphTypePoint | PerseusGraphTypePolygon | PerseusGraphTypeQuadratic | PerseusGraphTypeRay | PerseusGraphTypeSegment | PerseusGraphTypeSinusoid;
 export type PerseusGraphTypeCommon = {
     coord?: Coord;
 };
@@ -474,6 +475,9 @@ export type PerseusGraphTypeLinearSystem = {
     coords?: CollinearTuple[] | null;
     startCoords?: CollinearTuple[];
 } & PerseusGraphTypeCommon;
+export type PerseusGraphTypeNone = {
+    type: "none";
+};
 export type PerseusGraphTypePoint = {
     type: "point";
     numPoints?: number | "unlimited";

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

@@ -140,6 +140,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<SharedRendererProps
             mafs?: false | ({
                 circle?: boolean | undefined;
                 polygon?: boolean | undefined;
+                none?: boolean | undefined;
                 linear?: boolean | undefined;
                 quadratic?: boolean | undefined;
                 sinusoid?: boolean | undefined;

package/dist/types.d.ts

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

package/dist/util.d.ts

@@ -3,6 +3,7 @@ import type { Range } from "./perseus-types";
 import type { PerseusStrings } from "./strings";
 import type { Widget, PerseusScore } from "./types";
 import type { KEScore } from "@khanacademy/perseus-core";
+import type * as React from "react";
 type WordPosition = {
     start: number;
     end: number;
@@ -173,7 +174,7 @@ declare function extractPointerLocation(event: any): Position | null | undefined
  * Pass this function as the touchstart for an element to
  * avoid sending the touch to the mobile scratchpad
  */
-declare function captureScratchpadTouchStart(e: TouchEvent): void;
+declare function captureScratchpadTouchStart(e: React.TouchEvent): void;
 declare function getImageSize(url: string, callback: (width: number, height: number) => void): void;
 /**
  * Gets the word right before where the textarea cursor is

package/dist/widgets/expression/expression.d.ts

@@ -141,6 +141,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
@@ -220,6 +221,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
@@ -299,6 +301,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
@@ -377,6 +380,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
@@ -456,6 +460,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
@@ -535,6 +540,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;

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

@@ -68,6 +68,8 @@ declare class LegacyInteractiveGraph extends React.Component<Props, State> {
     };
     addLine: (arg1: string) => void;
     removeLine: () => void;
+    addNoneControls: () => void;
+    removeNoneControls: () => void;
     addLinearControls: () => void;
     removeLinearControls: () => void;
     addQuadraticControls: () => void;
@@ -146,6 +148,7 @@ declare class InteractiveGraph extends React.Component<Props, State> {
     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>;
+    static getNoneEquationString(): string;
     static getLinearEquationString(props: Props): string;
     static getCurrentQuadraticCoefficients(props: Props): QuadraticCoefficient;
     static defaultQuadraticCoords(props: Props): QuadraticGraphState["coords"];

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

@@ -17,7 +17,7 @@ type ControlledFocusBehavior = {
 type UncontrolledFocusBehavior = {
     type: "uncontrolled";
     tabIndex: number;
-    onFocusChange: (isFocused: boolean) => unknown;
+    onFocusChange?: (event: React.FocusEvent, isFocused: boolean) => unknown;
 };
 export declare const MovablePointView: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGGElement>>;
 export {};

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

@@ -5,10 +5,11 @@ import type { vec } from "mafs";
 type Props = {
     point: vec.Vector2;
     onMove?: (newPoint: vec.Vector2) => unknown;
+    onClick?: () => unknown;
     color?: string;
     cursor?: CSSCursor | undefined;
     constrain?: KeyboardMovementConstraint;
-    onFocusChange?: (isFocused: boolean) => unknown;
+    onFocusChange?: (event: React.FocusEvent, isFocused: boolean) => unknown;
 };
 export declare const MovablePoint: (props: Props) => React.JSX.Element;
 export {};

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

@@ -1,7 +1,12 @@
 import type { Coord } from "../../interactive2/types";
-import type { CollinearTuple, LockedFigureColor, LockedFigureFillType, LockedFunctionType, PerseusRenderer } from "../../perseus-types";
-import type { vec } from "mafs";
-export type LockedFunctionOptions = Omit<Partial<LockedFunctionType>, "type" | "equation">;
+import type { CollinearTuple, LockedFigureColor, LockedFigureFillType, LockedLineStyle, PerseusRenderer } from "../../perseus-types";
+import type { Interval, vec } from "mafs";
+export type LockedFunctionOptions = {
+    color?: LockedFigureColor;
+    strokeStyle?: LockedLineStyle;
+    directionalAxis?: "x" | "y";
+    domain?: Interval;
+};
 export declare function interactiveGraphQuestionBuilder(): InteractiveGraphQuestionBuilder;
 declare class InteractiveGraphQuestionBuilder {
     private content;
@@ -45,6 +50,7 @@ declare class InteractiveGraphQuestionBuilder {
         startCoords?: CollinearTuple[];
         coords?: CollinearTuple[];
     }): InteractiveGraphQuestionBuilder;
+    withNoInteractiveFigure(): this;
     withLinear(options?: {
         coords?: CollinearTuple;
         startCoords?: CollinearTuple;
@@ -100,7 +106,7 @@ declare class InteractiveGraphQuestionBuilder {
     }): InteractiveGraphQuestionBuilder;
     addLockedLine(point1: vec.Vector2, point2: vec.Vector2, options?: {
         kind?: "line" | "ray" | "segment";
-        lineStyle?: "solid" | "dashed";
+        lineStyle?: LockedLineStyle;
         color?: LockedFigureColor;
         filled?: [boolean, boolean];
         showPoint1?: boolean;

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

@@ -23,6 +23,7 @@ export type MafsGraphProps = {
     readOnly: boolean;
     static: boolean | null | undefined;
 };
+export declare const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
 export declare const MafsGraph: (props: MafsGraphProps) => React.JSX.Element;
 export declare const calculateNestedSVGCoords: (range: vec.Vector2[], width: number, height: number) => {
     viewboxX: number;

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

@@ -1,6 +1,6 @@
 import type { InitializeGraphStateParams } from "./initialize-graph-state";
 import type { Interval, vec } from "mafs";
-export type InteractiveGraphAction = Reinitialize | MovePointInFigure | MoveLine | MoveAll | MovePoint | MoveCenter | MoveRadiusPoint | ChangeSnapStep | ChangeRange | AddPoint | RemovePoint | FocusPoint | BlurPoint | DeleteIntent;
+export type InteractiveGraphAction = Reinitialize | MovePointInFigure | MoveLine | MoveAll | MovePoint | MoveCenter | MoveRadiusPoint | ChangeSnapStep | ChangeRange | AddPoint | RemovePoint | FocusPoint | BlurPoint | DeleteIntent | ClickPoint;
 export declare const actions: {
     global: {
         deleteIntent: typeof deleteIntent;
@@ -26,6 +26,7 @@ export declare const actions: {
         removePoint: typeof removePoint;
         focusPoint: typeof focusPoint;
         blurPoint: typeof blurPoint;
+        clickPoint: typeof clickPoint;
     };
     polygon: {
         movePoint: typeof movePoint;
@@ -81,6 +82,12 @@ export interface BlurPoint {
     type: typeof BLUR_POINT;
 }
 declare function blurPoint(): BlurPoint;
+export declare const CLICK_POINT = "click-point";
+export interface ClickPoint {
+    type: typeof CLICK_POINT;
+    index: number;
+}
+declare function clickPoint(index: number): ClickPoint;
 export declare const MOVE_ALL = "move-all";
 export interface MoveAll {
     type: typeof MOVE_ALL;

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 = AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
+export type InteractiveGraphState = AngleGraphState | SegmentGraphState | LinearSystemGraphState | LinearGraphState | RayGraphState | NoneGraphState | PolygonGraphState | PointGraphState | CircleGraphState | QuadraticGraphState | SinusoidGraphState;
 export interface InteractiveGraphStateCommon {
     hasBeenInteractedWith: boolean;
     range: [xRange: Interval, yRange: Interval];
@@ -26,12 +26,15 @@ export interface LinearSystemGraphState extends InteractiveGraphStateCommon {
     type: "linear-system";
     coords: PairOfPoints[];
 }
+export interface NoneGraphState extends InteractiveGraphStateCommon {
+    type: "none";
+}
 export interface PointGraphState extends InteractiveGraphStateCommon {
     type: "point";
     coords: Coord[];
     numPoints?: number | "unlimited";
     focusedPointIndex: number | null;
-    previouslyFocusedPointIndex: number | null;
+    showRemovePointButton: boolean;
 }
 export interface RayGraphState extends InteractiveGraphStateCommon {
     type: "ray";

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

@@ -133,6 +133,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;
@@ -196,6 +197,7 @@ declare const _default: Readonly<{
                 mafs?: false | ({
                     circle?: boolean | undefined;
                     polygon?: boolean | undefined;
+                    none?: boolean | undefined;
                     linear?: boolean | undefined;
                     quadratic?: boolean | undefined;
                     sinusoid?: boolean | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "33.2.1",
+    "version": "33.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -48,6 +48,7 @@
         "@khanacademy/perseus-linter": "^1.2.0",
         "@khanacademy/pure-markdown": "^0.3.8",
         "@khanacademy/simple-markdown": "^0.13.1",
+        "@types/classnames": "2.2.0",
         "@use-gesture/react": "^10.2.27",
         "mafs": "0.19.0",
         "uuid": "^10.0.0"