@khanacademy/perseus 20.1.0 → 20.2.0

package/dist/components/graph.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { Coord } from "../interactive2/types";
-import type { PerseusImageBackground, LockedFigure } from "../perseus-types";
+import type { PerseusImageBackground } from "../perseus-types";
 import type { GridDimensions } from "../util";
 type Props = {
     box: [number, number];
@@ -17,7 +17,6 @@ type Props = {
     rulerTicks: number;
     instructions?: string;
     isMobile: boolean;
-    lockedFigures?: ReadonlyArray<LockedFigure>;
     onGraphieUpdated?: (graphie: any) => void;
     onClick?: (Coord: any) => void;
     onMouseDown?: (Coord: any) => void;

package/dist/es/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/es/index.js

@@ -29,7 +29,7 @@ import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
 import debounce$2 from 'lodash.debounce';
-import { vec, useMovable, useTransformContext, MovablePoint as MovablePoint$5, Coordinates, Mafs } from 'mafs';
+import { Point as Point$2, useMovable, useTransformContext, vec, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -2680,11 +2680,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
@@ -14981,7 +14984,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 {
   constructor(graphie, movable, options) {
     this.graphie = void 0;
     this.movable = void 0;
@@ -15498,15 +15501,15 @@ class MovablePoint$4 {
     this.movable.toFront();
   }
 }
-MovablePoint$4.add = MovablePointOptions.add;
-MovablePoint$4.modify = MovablePointOptions.modify;
-MovablePoint$4.draw = MovablePointOptions.draw;
-MovablePoint$4.remove = MovablePointOptions.remove;
-MovablePoint$4.onMoveStart = MovablePointOptions.onMoveStart;
-MovablePoint$4.constraints = MovablePointOptions.constraints;
-MovablePoint$4.onMove = MovablePointOptions.onMove;
-MovablePoint$4.onMoveEnd = MovablePointOptions.onMoveEnd;
-MovablePoint$4.onClick = MovablePointOptions.onClick;
+MovablePoint$5.add = MovablePointOptions.add;
+MovablePoint$5.modify = MovablePointOptions.modify;
+MovablePoint$5.draw = MovablePointOptions.draw;
+MovablePoint$5.remove = MovablePointOptions.remove;
+MovablePoint$5.onMoveStart = MovablePointOptions.onMoveStart;
+MovablePoint$5.constraints = MovablePointOptions.constraints;
+MovablePoint$5.onMove = MovablePointOptions.onMove;
+MovablePoint$5.onMoveEnd = MovablePointOptions.onMoveEnd;
+MovablePoint$5.onClick = MovablePointOptions.onClick;
 function getKey(eventName, id) {
   return eventName + ":" + id;
 }
@@ -16100,10 +16103,10 @@ _.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) {
@@ -16144,7 +16147,7 @@ const Interactive2 = {
   }
 };
 
-const MovablePoint$3 = GraphieClasses.createClass({
+const MovablePoint$4 = GraphieClasses.createClass({
   displayName: "MovablePoint",
   movableProps: ["children"],
   _getProps: function () {
@@ -16201,7 +16204,7 @@ const MovablePoint$3 = GraphieClasses.createClass({
 });
 
 // Include helper methods, such as MovablePoint.constrain.snap()
-_.extend(MovablePoint$3, Interactive2.MovablePoint);
+_.extend(MovablePoint$4, Interactive2.MovablePoint);
 const MovableLine$2 = GraphieClasses.createClass({
   displayName: "MovableLine",
   movableProps: ["children"],
@@ -16371,7 +16374,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,
@@ -26348,7 +26351,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) {
@@ -26430,7 +26433,7 @@ class FunctionGrapher extends React.Component {
         }],
         normalStyle: dashed,
         highlightStyle: dashed
-      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$2, {
+      }, _.map(asymptote, (coord, i) => /*#__PURE__*/React.createElement(MovablePoint$3, {
         key: `asymptoteCoord-${i}`,
         coord: coord,
         static: true,
@@ -26445,7 +26448,7 @@ class FunctionGrapher extends React.Component {
   }
   render() {
     const pointForCoord = (coord, i) => {
-      return /*#__PURE__*/React.createElement(MovablePoint$2, {
+      return /*#__PURE__*/React.createElement(MovablePoint$3, {
         key: i,
         coord: coord,
         static: this.props.static,
@@ -27279,7 +27282,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'.
@@ -27528,7 +27531,7 @@ class Interaction extends React.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 [
@@ -27550,7 +27553,7 @@ class Interaction extends React.Component {
         // TODO(eater): foo_[xyz] are hacky non-props to
         // get the component to update when constraints
         // change
-        return /*#__PURE__*/React.createElement(MovablePoint$1, {
+        return /*#__PURE__*/React.createElement(MovablePoint$2, {
           key: element.key,
           coord: [
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -27585,7 +27588,7 @@ class Interaction extends React.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 [
@@ -27626,14 +27629,14 @@ class Interaction extends React.Component {
           foo_x: element.options.constraint,
           foo_y: element.options.constraintFn,
           foo_z: element.options.snap
-        }, /*#__PURE__*/React.createElement(MovablePoint$1, {
+        }, /*#__PURE__*/React.createElement(MovablePoint$2, {
           coord: start,
           static: true,
           normalStyle: {
             stroke: "none",
             fill: "none"
           }
-        }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+        }), /*#__PURE__*/React.createElement(MovablePoint$2, {
           coord: end,
           static: true,
           normalStyle: {
@@ -28054,33 +28057,6 @@ class Graph extends React.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();
 
@@ -28206,6 +28182,35 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+const GraphLockedLayer = props => {
+  const {
+    lockedFigures
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, lockedFigures.map((figure, index) => {
+    switch (figure.type) {
+      case "point":
+        const [x, y] = figure.coord;
+        return /*#__PURE__*/React.createElement(Point$2, {
+          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 UnreachableCaseError(figure.type);
+  }));
+};
+
 const MOVE_CONTROL_POINT = "move-control-point";
 function moveControlPoint(objectIndex, pointIndex, destination) {
   return {
@@ -28224,6 +28229,59 @@ function moveSegment(segmentIndex, delta) {
   };
 }
 
+const MovablePoint$1 = props => {
+  const hitboxRef = useRef(null);
+  const {
+    point,
+    onMove
+  } = props;
+  const {
+    dragging
+  } = useMovable({
+    gestureTarget: hitboxRef,
+    point,
+    onMove,
+    constrain: p => p
+  });
+  const {
+    viewTransform,
+    userTransform
+  } = useTransformContext();
+  const transformToPx = vec.matrixMult(viewTransform, userTransform);
+  const [x, y] = vec.transform(point, transformToPx);
+  return /*#__PURE__*/React.createElement("g", {
+    ref: hitboxRef,
+    className: "movable-point",
+    tabIndex: 0,
+    style: {
+      cursor: dragging ? "grabbing" : "grab",
+      touchAction: "none",
+      outline: "none",
+      "--movable-point-color": Color.blue
+    }
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-hitbox",
+    r: 30,
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-halo",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-ring",
+    cx: x,
+    cy: y
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "movable-point-center",
+    cx: x,
+    cy: y,
+    style: {
+      fill: Color.blue
+    }
+  }));
+};
+
 const SegmentGraph = props => {
   const {
     dispatch
@@ -28266,9 +28324,9 @@ const SegmentView = props => {
     viewTransform,
     userTransform
   } = useTransformContext();
-  const transform = vec.matrixMult(viewTransform, userTransform);
-  const scaledPoint1 = vec.transform(pt1, transform);
-  const scaledPoint2 = vec.transform(pt2, transform);
+  const transformToPx = vec.matrixMult(viewTransform, userTransform);
+  const pt1Px = vec.transform(pt1, transformToPx);
+  const pt2Px = vec.transform(pt2, transformToPx);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: segment,
     tabIndex: 0,
@@ -28277,28 +28335,26 @@ const SegmentView = props => {
       cursor: isDraggingSegment ? "grabbing" : "grab"
     }
   }, /*#__PURE__*/React.createElement(SVGLine, {
-    start: scaledPoint1,
-    end: scaledPoint2,
+    start: pt1Px,
+    end: pt2Px,
     style: {
       stroke: "transparent",
       strokeWidth: 30
     }
   }), /*#__PURE__*/React.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.createElement(MovablePoint$5, {
+  })), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: pt1,
-    color: Color.blue,
     onMove: newPoint => {
       props.onMovePoint(0, newPoint);
     }
-  }), /*#__PURE__*/React.createElement(MovablePoint$5, {
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: pt2,
-    color: Color.blue,
     onMove: newPoint => {
       props.onMovePoint(1, newPoint);
     }
@@ -29230,7 +29286,9 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), renderGraph({
+  }, !legacyGrid && /*#__PURE__*/React.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+    lockedFigures: props.lockedFigures
+  }), renderGraph({
     state,
     dispatch
   }))));
@@ -29369,12 +29427,13 @@ class InteractiveGraph extends React.Component {
       }
     };
     this.resetGraphie = () => {
+      var _this$refs$graph;
       this.shouldResetGraphie = false;
       this.parabola = null;
       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 = this.refs.graph) == null || _this$refs$graph.reset();
     };
     this.setupGraphie = () => {
       this.setTrashCanVisibility(0);
@@ -30507,8 +30566,7 @@ class InteractiveGraph extends React.Component {
       onMouseDown: onMouseDown,
       onGraphieUpdated: this.setGraphie,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile,
-      lockedFigures: this.props.lockedFigures
+      isMobile: isMobile
     }));
   }
   static getQuadraticCoefficients(coords) {
@@ -41239,7 +41297,7 @@ const init = function init(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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {