@khanacademy/perseus 19.0.0 → 19.1.1

package/src/util/interactive.ts

@@ -31,6 +31,7 @@ import {Errors} from "../logging/log";
 import {PerseusError} from "../perseus-error";
 
 import KhanColors from "./colors";
+import {clockwise, reverseVector} from "./geometry";
 import GraphUtils, {polar} from "./graphie";
 import KhanMath from "./math";
 
@@ -40,38 +41,6 @@ export type MouseHandler = (position: Coord) => void;
 
 const {getCanUse3dTransform} = InteractiveUtil;
 
-function sum(array: any) {
-    return _.reduce(
-        array,
-        function (memo, arg) {
-            return memo + arg;
-        },
-        0,
-    );
-}
-
-function clockwise(points: any) {
-    const segments = _.zip(points, points.slice(1).concat(points.slice(0, 1)));
-    const areas = _.map(segments, function (segment) {
-        const p1 = segment[0];
-        const p2 = segment[1];
-        return (p2[0] - p1[0]) * (p2[1] + p1[1]);
-    });
-    return sum(areas) > 0;
-}
-
-/* vector-add multiple [x, y] coords/vectors */
-function addPoints(...points) {
-    const zipped = _.zip(...points);
-    return _.map(zipped, sum);
-}
-
-function reverseVector(vector: Array<number>) {
-    return _.map(vector, function (coord) {
-        return coord * -1;
-    });
-}
-
 function scaledDistanceFromAngle(angle: number) {
     const a = 3.51470560176242 * 20;
     const b = 0.5687298702748785 * 20;
@@ -79,14 +48,14 @@ function scaledDistanceFromAngle(angle: number) {
     return (a - b) * Math.exp(c * angle) + b;
 }
 
-function scaledPolarRad(radius: number, radians: number) {
+function scaledPolarRad(radius: number, radians: number): Coord {
     return [
         radius * Math.cos(radians),
         radius * Math.sin(radians) * -1, // SVG flips y axis
     ];
 }
 
-function scaledPolarDeg(radius: number, degrees) {
+function scaledPolarDeg(radius: number, degrees): Coord {
     const radians = (degrees * Math.PI) / 180;
     return scaledPolarRad(radius, radians);
 }
@@ -245,7 +214,7 @@ _.extend(GraphUtils.Graphie.prototype, {
     /**
      * Get mouse coordinates in graph coordinates
      */
-    getMouseCoord: function (event) {
+    getMouseCoord: function (event): Coord {
         return this.unscalePoint(this.getMousePx(event));
     },
 
@@ -291,11 +260,14 @@ _.extend(GraphUtils.Graphie.prototype, {
         const temp: Array<never> = [];
 
         if (Math.abs(angle - 90) < 1e-9 && options.showRightAngleMarker) {
-            const v1 = addPoints(sVertex, scaledPolarDeg(sRadius, startAngle));
-            const v2 = addPoints(sVertex, scaledPolarDeg(sRadius, endAngle));
+            const v1 = kvector.add(
+                sVertex,
+                scaledPolarDeg(sRadius, startAngle),
+            );
+            const v2 = kvector.add(sVertex, scaledPolarDeg(sRadius, endAngle));
 
             sRadius *= Math.SQRT2;
-            const v3 = addPoints(sVertex, scaledPolarDeg(sRadius, halfAngle));
+            const v3 = kvector.add(sVertex, scaledPolarDeg(sRadius, halfAngle));
 
             _.each([v1, v2], function (v) {
                 // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
@@ -329,7 +301,7 @@ _.extend(GraphUtils.Graphie.prototype, {
             }
 
             const sOffset = scaledPolarDeg(sRadius + 15, halfAngle);
-            const sPosition = addPoints(sVertex, sOffset);
+            const sPosition = kvector.add(sVertex, sOffset);
             const position = graphie.unscalePoint(sPosition);
 
             // Reuse label if possible
@@ -395,8 +367,8 @@ _.extend(GraphUtils.Graphie.prototype, {
                 );
 
                 const sPath = [
-                    addPoints(sMidpoint, sOffsetVector, sHeightVector),
-                    addPoints(
+                    kvector.add(sMidpoint, sOffsetVector, sHeightVector),
+                    kvector.add(
                         sMidpoint,
                         sOffsetVector,
                         reverseVector(sHeightVector),
@@ -436,7 +408,7 @@ _.extend(GraphUtils.Graphie.prototype, {
                     sOffsetVector = reverseVector(sOffsetVector);
                 }
 
-                const sEnd = addPoints(sMidpoint, sOffsetVector);
+                const sEnd = kvector.add(sMidpoint, sOffsetVector);
 
                 // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
                 temp.push(graphie.scaledPath([sStart, sEnd], style));
@@ -457,7 +429,7 @@ _.extend(GraphUtils.Graphie.prototype, {
 
             const sOffset = 20;
             const sOffsetVector = scaledPolarRad(sOffset, perpendicularAngle);
-            const sPosition = addPoints(sMidpoint, sOffsetVector);
+            const sPosition = kvector.add(sMidpoint, sOffsetVector);
             const position = graphie.unscalePoint(sPosition);
 
             // Reuse label if possible
@@ -522,7 +494,7 @@ _.extend(GraphUtils.Graphie.prototype, {
 
         const sRadius = 10 + scaledDistanceFromAngle(360 - angle);
         const sOffsetVector = scaledPolarDeg(sRadius, halfAngle);
-        const sPosition = addPoints(sVertex, sOffsetVector);
+        const sPosition = kvector.add(sVertex, sOffsetVector);
         const position = graphie.unscalePoint(sPosition);
 
         // Reuse label if possible
@@ -3225,7 +3197,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         return new Ruler(this, options || {});
     },
 
-    addPoints: addPoints,
+    addPoints: kvector.add,
 });
 
 function Protractor(graph: any, center: any) {
@@ -3679,7 +3651,7 @@ function Ruler(graphie: any, options: any) {
     });
 
     const mouseTarget = graphie.mouselayer.path(
-        GraphUtils.svgPath([
+        graphie.svgPath([
             leftBottom,
             [left, top],
             rightTop,
@@ -3970,16 +3942,16 @@ _.extend(MovableAngle.prototype, {
         const points = this.points;
 
         // Drag the vertex to move the entire angle
-        points[1].onMove = function (x, y: any) {
+        points[1].onMove = function (x: number, y: number) {
             const oldVertex = points[1].coord;
-            const newVertex = [x, y];
-            const delta = addPoints(newVertex, reverseVector(oldVertex));
+            const newVertex: Coord = [x, y];
+            const delta = kvector.add(newVertex, reverseVector(oldVertex));
 
             let valid = true;
             const newPoints: Record<string, any> = {};
             _.each([0, 2], function (i) {
                 const oldPoint = points[i].coord;
-                let newPoint = addPoints(oldPoint, delta);
+                let newPoint = kvector.add(oldPoint, delta);
 
                 let angle = GraphUtils.findAngle(newVertex, newPoint);
                 angle *= Math.PI / 180;
@@ -4024,7 +3996,7 @@ _.extend(MovableAngle.prototype, {
                         Math.round((angle - snapOffset) / snap) * snap +
                         snapOffset;
                     const distance = GraphUtils.getDistance(newPoint, vertex);
-                    return addPoints(vertex, polar(distance, angle));
+                    return kvector.add(vertex, polar(distance, angle));
                 }
                 return true;
             };

package/src/util/math.test.ts

@@ -0,0 +1,11 @@
+import {sum} from "./math";
+
+describe("sum", () => {
+    it("returns 0 given an empty array", () => {
+        expect(sum([])).toBe(0);
+    });
+
+    it("adds the numbers in the array", () => {
+        expect(sum([1, 2, 5])).toBe(8);
+    });
+});

package/src/util/math.ts

@@ -283,4 +283,12 @@ const KhanMath = {
     },
 } as const;
 
+export function sum(array: number[]): number {
+    return array.reduce(add, 0);
+}
+
+export function add(a: number, b: number): number {
+    return a + b;
+}
+
 export default KhanMath;

package/src/util/parse-perseus-json.test.ts

@@ -1,8 +1,8 @@
-import parsePerseusJSON from "./parse-perseus-json";
+import {parsePerseusItem} from "./parse-perseus-json";
 
-describe("parsePerseusJSON", () => {
+describe("parsePerseusItem", () => {
     it("should parse JSON", () => {
-        const result = parsePerseusJSON(
+        const result = parsePerseusItem(
             `{ "question": { "content": "idk why I'm testing this" }}`,
         );
         expect(result.question.content).toBe("idk why I'm testing this");

package/src/util/parse-perseus-json.ts

@@ -1,13 +1,13 @@
 import type {PerseusItem} from "../perseus-types";
 
 /**
- * Helper to parse Perseus JSON
+ * Helper to parse PerseusItem JSON
  * Why not just use JSON.parse? We want:
  * - To make sure types are correct
  * - To give us a central place to validate/transform output if needed
- * @param {string} input - the stringified Perseus JSON
+ * @param {string} json - the stringified PerseusItem JSON
  * @returns {PerseusItem} the parsed PerseusItem object
  */
-export default function parsePerseusJSON(input: string): PerseusItem {
-    return JSON.parse(input);
+export function parsePerseusItem(json: string): PerseusItem {
+    return JSON.parse(json);
 }

package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap

@@ -181,11 +181,13 @@ exports[`rendering supports mobile rendering: mobile render 1`] = `
                 <span
                   class="mq-textarea"
                 >
-                  <span />
+                  <span
+                    aria-label="Math Input:"
+                  />
                 </span>
                 <span
+                  aria-hidden="true"
                   class="mq-root-block mq-empty"
-                  mathquill-block-id="1"
                   style="padding: 10px 11px 8px 11px; font-size: 18pt;"
                 />
               </div>

package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap

@@ -43,11 +43,13 @@ exports[`Numeric input widget styles differently on mobile: mobile render 1`] =
                 <span
                   class="mq-textarea"
                 >
-                  <span />
+                  <span
+                    aria-label="Math Input:"
+                  />
                 </span>
                 <span
+                  aria-hidden="true"
                   class="mq-root-block mq-empty"
-                  mathquill-block-id="1"
                   style="padding: 10px 11px 8px 11px; font-size: 18pt;"
                 />
               </div>

package/src/widgets/__tests__/expression-mobile.test.tsx

@@ -3,6 +3,7 @@ import {
     KeypadContext,
     StatefulKeypadContextProvider,
     MobileKeypad,
+    mathQuillInstance,
 } from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {
@@ -13,7 +14,6 @@ import {
     within,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import MathQuill from "mathquill";
 import * as React from "react";
 
 import {
@@ -26,7 +26,7 @@ import {registerWidget} from "../../widgets";
 import {expressionItem2} from "../__testdata__/expression.testdata";
 import ExpressionExport from "../expression";
 
-const MQ = MathQuill.getInterface(2);
+const MQ = mathQuillInstance;
 
 function RendererWithContext({item}) {
     return (
@@ -351,10 +351,13 @@ describe("expression mobile", () => {
 
         // MathQuill is problematic,
         // this is how to get the value of the input directly from MQ
-        const mathquillInstance =
+        const mathquillInstance = MQ(
             // eslint-disable-next-line testing-library/no-node-access
-            MQ(document.getElementsByClassName("mq-editable-field")[0]);
+            document.getElementsByClassName(
+                "mq-editable-field",
+            )[0] as HTMLElement,
+        );
 
-        expect(mathquillInstance.latex()).toBe("x=\\sin\\left(9\\right)");
+        expect(mathquillInstance?.latex()).toBe("x=\\sin\\left(9\\right)");
     });
 });

package/src/widgets/expression.tsx

@@ -35,28 +35,6 @@ type InputPath = ReadonlyArray<string>;
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 
-const insertBraces = (value) => {
-    // HACK(alex): Make sure that all LaTeX super/subscripts are wrapped
-    // in curly braces to avoid the mismatch between KAS and LaTeX sup/sub
-    // parsing.
-    //
-    // What exactly is this mismatch? Due to its heritage of parsing plain
-    // text math from <OldExpression />, KAS parses "x^12" as x^(12).
-    // This is both generally what the user expects to happen, and is
-    // consistent with other computer algebra systems. It is NOT
-    // consistent with LaTeX however, where x^12 is equivalent to x^{1}2.
-    //
-    // Since the only LaTeX we parse comes from MathQuill, this wouldn't
-    // be a problem if MathQuill just always gave us the latter version
-    // (with explicit braces). However, instead it always gives the former.
-    // This behavior is baked in pretty deep; my naive attempts at changing
-    // it triggered all sorts of confusing errors. So instead we just make
-    // sure to add in any missing braces before grading MathQuill input.
-    //
-    // TODO(alex): Properly hack MathQuill to always use explicit braces.
-    return value.replace(/([_^])([^{])/g, "$1{$2}");
-};
-
 const anglicizeOperators = (tex: string): string => {
     // sen is used instead of sin in some languages, e.g. Portuguese.
     // To ensure that answers in various languages are graded correctly, we
@@ -65,7 +43,7 @@ const anglicizeOperators = (tex: string): string => {
 };
 
 const normalizeTex = (tex: string): string => {
-    return anglicizeOperators(insertBraces(tex));
+    return anglicizeOperators(tex);
 };
 
 const deriveKeypadVersion = (apiOptions: APIOptions) => {

package/src/widgets/label-image.tsx

@@ -401,7 +401,6 @@ export class LabelImage extends React.Component<
 
         // Update Perseus widget state with user selected answers without
         // triggering interaction events for listeners.
-        // @ts-expect-error - TS2345 - Argument of type 'null' is not assignable to parameter of type '(() => unknown) | undefined'.
         onChange({markers: updatedMarkers}, null, true);
     }