@khanacademy/perseus 20.1.0 → 20.2.0

package/dist/index.css

@@ -4258,18 +4258,24 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --mafs-bg: transparent;
     --mafs-fg: rgb(33, 36, 44); /* WB color.offBlack */
 
-    --mafs-line-color: rgb(33, 36, 44, 0.64); /* WB color.offBlack64 */
-    --grid-line-subdivision-color: rgba(33, 36, 44, 0.16);
+    --mafs-line-color: rgba(33, 36, 44, 0.16); /* WB color.offBlack16*/
 
     --mafs-blue: #1865f2; /* WB color.blue */
     --mafs-red: #d92916; /* WB color.red */
     --mafs-green: #00a60e; /* WB color.green */
     --mafs-violet: #9059ff; /* WB color.purple */
     --mafs-yellow: #ffb100; /* WB color.gold */
+
+    /* overridden on a per-point basis */
+    --movable-point-color: var(--mafs-blue);
+    --movable-point-center-radius: 6px;
+    --movable-point-ring-radius: calc(2px + var(--movable-point-center-radius));
+    --movable-point-halo-radius: calc(3px + var(--movable-point-ring-radius));
+    --movable-point-hover-expansion: 2px;
 }
 
 .MafsView .movable-segment {
-    --mafs-segment-stroke-color: var(--mafs-line-color);
+    --mafs-segment-stroke-color: rgba(33, 36, 44, 0.64); /* offBlack64 */
     --mafs-segment-stroke-weight: 2px;
 }
 
@@ -4282,3 +4288,51 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 .MafsView .movable-segment:focus {
     outline: none;
 }
+
+.MafsView .movable-point-hitbox {
+    fill: transparent;
+}
+
+.MafsView :is(.movable-point-center, .movable-point-ring, .movable-point-halo) {
+    transition: r 0.15s ease-out;
+}
+
+.MafsView .movable-point-center {
+    r: var(--movable-point-center-radius);
+}
+
+.MafsView .movable-point-halo {
+    r: var(--movable-point-halo-radius);
+    fill: var(--movable-point-color);
+    opacity: 0.25;
+    filter: drop-shadow(0 5px 5px #0008);
+}
+
+.MafsView .movable-point-ring {
+    r: var(--movable-point-ring-radius);
+    fill: #fff;
+}
+
+.MafsView .movable-point:hover .movable-point-center {
+    r: calc(
+        var(--movable-point-hover-expansion) +
+            var(--movable-point-center-radius)
+    );
+}
+
+.MafsView .movable-point:hover .movable-point-ring {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-ring-radius)
+    );
+}
+
+.MafsView .movable-point:hover .movable-point-halo {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-halo-radius)
+    );
+}
+
+.MafsView .movable-point:focus-visible .movable-point-halo {
+    outline: 2px solid blue;
+    border-radius: 99px;
+}

package/dist/index.d.ts

@@ -83,7 +83,7 @@ export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, } from "./types";
 export type { ParsedValue } from "./util";
-export type { PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureType, LockedPoint, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
 PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusExampleGraphieWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";

package/dist/index.js

@@ -2705,11 +2705,14 @@ function combineScores(scoreA, scoreB) {
     }
   });
 }
+function isCorrect(score) {
+  return score.type === "points" && score.earned >= score.total;
+}
 function keScoreFromPerseusScore(score, guess, state) {
   if (score.type === "points") {
     return {
       empty: false,
-      correct: score.earned >= score.total,
+      correct: isCorrect(score),
       message: score.message,
       guess: guess,
       state: state
@@ -15001,7 +15004,7 @@ const DEFAULT_STATE$1 = {
 // TODO(benchristel): this is a memory leak. We add items to
 // tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
-class MovablePoint$4 {
+class MovablePoint$5 {
   // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
 
   _listenerMap = {};
@@ -16129,10 +16132,10 @@ ___default["default"].extend(MovablePolygon.prototype, {
 });
 
 const Interactive2 = {
-  MovablePoint: MovablePoint$4,
+  MovablePoint: MovablePoint$5,
   addMovablePoint: function (graphie, options) {
     const movable = new Movable(graphie, {});
-    return new MovablePoint$4(graphie, movable, options);
+    return new MovablePoint$5(graphie, movable, options);
   },
   MovableLine: MovableLine$3,
   addMovableLine: function (graphie, options) {
@@ -16174,7 +16177,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$3 = GraphieClasses.createClass({
+const MovablePoint$4 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16232,7 +16235,7 @@ const MovablePoint$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-___default["default"].extend(MovablePoint$3, Interactive2.MovablePoint);
+___default["default"].extend(MovablePoint$4, Interactive2.MovablePoint);
 const MovableLine$2 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
@@ -16402,7 +16405,7 @@ var Movables = {
   Label: Label$1,
   Line: Line$2,
   MovableLine: MovableLine$2,
-  MovablePoint: MovablePoint$3,
+  MovablePoint: MovablePoint$4,
   Parabola: Parabola,
   Path: Path,
   Plot: Plot$2,
@@ -26482,7 +26485,7 @@ var util = /*#__PURE__*/Object.freeze({
 });
 
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$2 = Graphie.MovablePoint;
+const MovablePoint$3 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const MovableLine$1 = Graphie.MovableLine;
 function isFlipped(newCoord, oldCoord, line) {
@@ -26528,7 +26531,7 @@ class FunctionGrapher extends React__namespace.Component {
   })();
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+      return /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -26665,7 +26668,7 @@ class FunctionGrapher extends React__namespace.Component {
       }],
       normalStyle: dashed,
       highlightStyle: dashed
-    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
+    }, ___default["default"].map(asymptote, (coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$3, {
       key: `asymptoteCoord-${i}`,
       coord: coord,
       static: true,
@@ -27428,7 +27431,7 @@ const Label = Graphie.Label;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
 const Line$1 = Graphie.Line;
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint$1 = Graphie.MovablePoint;
+const MovablePoint$2 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const MovableLine = Graphie.MovableLine;
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
@@ -27682,7 +27685,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27704,7 +27707,7 @@ class Interaction extends React__namespace.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        return /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27739,7 +27742,7 @@ class Interaction extends React__namespace.Component {
           return [coordX, coordY];
         }];
         if (element.options.constraint === "snap") {
-          constraints.push(MovablePoint$1.constraints.snap(element.options.snap));
+          constraints.push(MovablePoint$2.constraints.snap(element.options.snap));
         } else if (element.options.constraint === "x") {
           constraints.push(coord => {
             return [
@@ -27780,14 +27783,14 @@ class Interaction extends React__namespace.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }, /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+        }), /*#__PURE__*/React__namespace.createElement(MovablePoint$2, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28238,33 +28241,6 @@ class Graph extends React__namespace.Component {
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
     });
-
-    // Maybe move this out later
-    if (this.props.lockedFigures) {
-      for (const lockedFigure of this.props.lockedFigures) {
-        switch (lockedFigure.type) {
-          case "point":
-            graphie.circle(
-            // center
-            lockedFigure.coord,
-            // radius
-            0.2,
-            // style
-            lockedFigure.style);
-            break;
-          default:
-            /**
-             * Devlopment-time future-proofing: This `never` should
-             * fail during type-checking if we add a new locked
-             * shape type and forget to handle it in any other
-             * switch case here.
-             */
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            lockedFigure.type;
-            throw new Error(`Unknown locked shape type: ${lockedFigure.type}`);
-        }
-      }
-    }
     this._updateProtractor();
     this._updateRuler();
 
@@ -28357,6 +28333,35 @@ class Graph extends React__namespace.Component {
   }
 }
 
+const GraphLockedLayer = props => {
+  const {
+    lockedFigures
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lockedFigures.map((figure, index) => {
+    switch (figure.type) {
+      case "point":
+        const [x, y] = figure.coord;
+        return /*#__PURE__*/React__namespace.createElement(mafs.Point, {
+          key: `${figure.type}-${index}`,
+          x: x,
+          y: y,
+          svgCircleProps: {
+            style: figure.style
+          }
+        });
+    }
+
+    /**
+     * Devlopment-time future-proofing: This `never` should
+     * fail during type-checking if we add a new locked
+     * shape type and forget to handle it in any other
+     * switch case here.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    throw new wonderStuffCore.UnreachableCaseError(figure.type);
+  }));
+};
+
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(objectIndex, pointIndex, destination) {
   return {
@@ -28375,6 +28380,59 @@ function moveSegment(segmentIndex, delta) {
   };
 }
 
+const MovablePoint$1 = props => {
+  const hitboxRef = React.useRef(null);
+  const {
+    point,
+    onMove
+  } = props;
+  const {
+    dragging
+  } = mafs.useMovable({
+    gestureTarget: hitboxRef,
+    point,
+    onMove,
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  const [x, y] = mafs.vec.transform(point, transformToPx);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    ref: hitboxRef,
+    className: "movable-point",
+    tabIndex: 0,
+    style: {
+      cursor: dragging ? "grabbing" : "grab",
+      touchAction: "none",
+      outline: "none",
+      "--movable-point-color": Color__default["default"].blue
+    }
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: 30,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-ring",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    className: "movable-point-center",
+    cx: x,
+    cy: y,
+    style: {
+      fill: Color__default["default"].blue
+    }
+  }));
+};
+
 const SegmentGraph = props => {
   const {
     dispatch
@@ -28417,9 +28475,9 @@ const SegmentView = props => {
     viewTransform,
     userTransform
   } = mafs.useTransformContext();
-  const transform = mafs.vec.matrixMult(viewTransform, userTransform);
-  const scaledPoint1 = mafs.vec.transform(pt1, transform);
-  const scaledPoint2 = mafs.vec.transform(pt2, transform);
+  const transformToPx = mafs.vec.matrixMult(viewTransform, userTransform);
+  const pt1Px = mafs.vec.transform(pt1, transformToPx);
+  const pt2Px = mafs.vec.transform(pt2, transformToPx);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("g", {
     ref: segment,
     tabIndex: 0,
@@ -28428,28 +28486,26 @@ const SegmentView = props => {
       cursor: isDraggingSegment ? "grabbing" : "grab"
     }
   }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: scaledPoint1,
-    end: scaledPoint2,
+    start: pt1Px,
+    end: pt2Px,
     style: {
       stroke: "transparent",
       strokeWidth: 30
     }
   }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
-    start: scaledPoint1,
-    end: scaledPoint2,
+    start: pt1Px,
+    end: pt2Px,
     style: {
       stroke: "var(--mafs-segment-stroke-color)",
       strokeWidth: "var(--mafs-segment-stroke-weight)"
     }
-  })), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  })), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: pt1,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React__namespace.createElement(mafs.MovablePoint, {
+  }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: pt2,
-    color: Color__default["default"].blue,
     onMove: newPoint => {
       props.onMovePoint(1, newPoint);
     }
@@ -29389,7 +29445,9 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), renderGraph({
+  }, !legacyGrid && /*#__PURE__*/React__namespace.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+    lockedFigures: props.lockedFigures
+  }), renderGraph({
     state,
     dispatch
   }))));
@@ -29568,7 +29626,7 @@ class InteractiveGraph extends React__namespace.Component {
     this.sinusoid = null;
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'reset' does not exist on type 'ReactInstance'.
-    this.refs.graph.reset();
+    this.refs.graph?.reset();
   };
   setupGraphie = () => {
     this.setTrashCanVisibility(0);
@@ -30644,8 +30702,7 @@ class InteractiveGraph extends React__namespace.Component {
       onMouseDown: onMouseDown,
       onGraphieUpdated: this.setGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile,
-      lockedFigures: this.props.lockedFigures
+      isMobile: isMobile
     }));
   }
   static getQuadraticCoefficients(coords) {
@@ -41367,7 +41424,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.1.0";
+const libVersion = "20.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {