@khanacademy/perseus 19.1.6 → 19.1.7

package/dist/es/index.js

@@ -250,7 +250,11 @@ class MathInput extends React.Component {
         display: "flex",
         padding: 1
       },
-      onClick: () => {
+      onClick: e => {
+        // Prevent the click into the input from registering
+        // so that the keypad popover doesn't close when
+        // switching focus to the input.
+        e.stopPropagation();
         const mathField = this.mathField();
         if (!mathField) {
           return;
@@ -3975,10 +3979,10 @@ FixedToResponsive.defaultProps = {
 
 /* Local helper methods. */
 
-function getKey$1(eventName, id) {
+function getKey$2(eventName, id) {
   return eventName + ":" + id;
 }
-function getEventName$1(key) {
+function getEventName$2(key) {
   return key.split(":")[0];
 }
 const MovableHelperMethods = {
@@ -4055,7 +4059,7 @@ const MovableHelperMethods = {
 
     // If there's an existing handler, replace it by using its index in
     // `this.state[eventName]`; otherwise, add this handler to the end
-    const key = getKey$1(eventName, id);
+    const key = getKey$2(eventName, id);
     const index = this._listenerMap[key] = this._listenerMap[key] || this.state[eventName].length;
     this.state[eventName][index] = func;
   },
@@ -4067,7 +4071,7 @@ const MovableHelperMethods = {
    */
   unlisten: function (eventName, id) {
     this._listenerMap = this._listenerMap || {};
-    const key = getKey$1(eventName, id);
+    const key = getKey$2(eventName, id);
     const index = this._listenerMap[key];
     if (index !== undefined) {
       // Remove handler from list of event handlers and listenerMap
@@ -4077,7 +4081,7 @@ const MovableHelperMethods = {
       // Re-index existing events: if they occur after `index`, decrement
       const keys = _.keys(this._listenerMap);
       _.each(keys, function (key) {
-        if (getEventName$1(key) === eventName &&
+        if (getEventName$2(key) === eventName &&
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this._listenerMap[key] > index) {
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -9535,6 +9539,9 @@ class Graphie$1 {
   getMouseCoord(event) {
     throw new Error("getMouseCoord is a stub, and is not implemented");
   }
+
+  // This is a stub that's overridden in interactive.ts
+  addMouseLayer(options) {}
 }
 const labelDirections = {
   center: [-0.5, -0.5],
@@ -13985,7 +13992,7 @@ class Movable {
 
     // If there's an existing handler, replace it by using its index in
     // `this.state[eventName]`; otherwise, add this handler to the end
-    const key = getKey(eventName, id);
+    const key = getKey$1(eventName, id);
     const index = this._listenerMap[key] = this._listenerMap[key] || this.state[eventName].length;
     this.state[eventName][index] = func;
   }
@@ -13998,7 +14005,7 @@ class Movable {
    */
   unlisten(eventName, id) {
     this._listenerMap = this._listenerMap || {};
-    const key = getKey(eventName, id);
+    const key = getKey$1(eventName, id);
     const index = this._listenerMap[key];
     if (index !== undefined) {
       // Remove handler from list of event handlers and listenerMap
@@ -14008,7 +14015,7 @@ class Movable {
       // Re-index existing events: if they occur after `index`, decrement
       const keys = _.keys(this._listenerMap);
       keys.forEach(key => {
-        if (getEventName(key) === eventName && this._listenerMap[key] > index) {
+        if (getEventName$1(key) === eventName && this._listenerMap[key] > index) {
           this._listenerMap[key]--;
         }
       });
@@ -14042,10 +14049,10 @@ class Movable {
     return this.state.mouseTarget;
   }
 }
-function getKey(eventName, id) {
+function getKey$1(eventName, id) {
   return eventName + ":" + id;
 }
-function getEventName(key) {
+function getEventName$1(key) {
   return key.split(":")[0];
 }
 
@@ -14994,31 +15001,31 @@ const DEFAULT_STATE$1 = {
   mouseTarget: null,
   touchOffset: null
 };
+// TODO(benchristel): this is a memory leak. We add items to
+// tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
-const MovablePoint$5 = function MovablePoint(graphie, movable, options) {
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  _.extend(this, {
-    graphie,
-    movable,
-    state: {
-      // Set here because this must be unique for each instance
+class MovablePoint$5 {
+  constructor(graphie, movable, options) {
+    this.graphie = void 0;
+    this.movable = void 0;
+    this.state = void 0;
+    // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
+    this.prevState = void 0;
+    this._tooltip = void 0;
+    this._listenerMap = {};
+    this.graphie = graphie;
+    this.movable = movable;
+    // @ts-expect-error - TS2740: Type '{ id: string; }' is missing the following properties from type 'State': add, added, constraints, coord, and 19 more.
+    this.state = {
       id: _.uniqueId("movablePoint")
-    }
-  });
-
-  // We only set DEFAULT_STATE once, here
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  this.modify(_.extend({}, DEFAULT_STATE$1, options));
-};
-_.extend(MovablePoint$5, MovablePointOptions);
-InteractiveUtil.createGettersFor(MovablePoint$5, _.extend({}, DEFAULT_PROPS$1, DEFAULT_STATE$1));
-InteractiveUtil.addMovableHelperMethodsTo(MovablePoint$5);
-_.extend(MovablePoint$5.prototype, {
-  cloneState: function () {
-    return _.extend(this.movable.cloneState(), this.state);
-  },
-  _createDefaultState: function () {
-    return _.extend({
+    };
+    this.modify(_extends({}, DEFAULT_STATE$1, options));
+  }
+  modify(options) {
+    this.update(_.extend(this._createDefaultState(), options));
+  }
+  _createDefaultState() {
+    return _extends({
       id: this.state.id
     }, normalizeOptions$1(
     // Defaults are copied from MovablePointOptions.*.standard
@@ -15028,69 +15035,14 @@ _.extend(MovablePoint$5.prototype, {
     //    - they don't need getters created for them
     // TODO(jack): Consider "default" once we es3ify perseus
     objective_.pluck(MovablePointOptions, "standard")
-
     // We only update props here, because we want things on state to
     // be persistent, and updated appropriately in modify()
     ), DEFAULT_PROPS$1);
-  },
-  /**
-   * Resets the object to its state as if it were constructed with
-   * `options` originally. state not on DEFAULT_PROPS is maintained.
-   *
-   * Analogous to React.js's replaceProps
-   */
-  modify: function (options) {
-    this.update(_.extend(this._createDefaultState(), options));
-  },
-  /**
-   * Displays a tooltip above the point, replacing any previous contents. If
-   * there is no tooltip initialized, adds the tooltip.
-   *
-   * If the type of contents is string, the contents will be rendered with
-   * KaTeX. Otherwise, the content will be assumed to be a DOM node and will
-   * be appended inside the tooltip.
-   */
-  _showTooltip: function (contents) {
-    if (!this._tooltip) {
-      this._tooltip = document.createElement("div");
-      this._tooltip.className = "tooltip-content";
-      this.state.visibleShape.wrapper.className = "tooltip";
-      this.state.visibleShape.wrapper.appendChild(this._tooltip);
-
-      // Only one tooltip should be displayed at a time, so store a list
-      // of all the tooltips initialized.
-      tooltipResetFunctions.push(() => {
-        if (this.state.added) {
-          this._hideTooltip();
-        }
-      });
-    }
-    if (this._tooltip.firstChild) {
-      this._tooltip.removeChild(this._tooltip.firstChild);
-    }
-    this.state.visibleShape.wrapper.className = "tooltip visible";
-    this._tooltip.appendChild(document.createElement("span"));
-    if (typeof contents === "string") {
-      processMath(this._tooltip.firstChild, contents, false);
-    } else if (typeof contents === "function") {
-      contents(this._tooltip.firstChild);
-    } else {
-      this._tooltip.firstChild.appendChild(contents);
-    }
-  },
-  _hideTooltip: function () {
-    if (this._tooltip) {
-      // Without the visible class, tooltips have display: none set
-      this.state.visibleShape.wrapper.className = "tooltip";
-    }
-  },
-  /**
-   * Adjusts constructor parameters without changing previous settings
-   * for any option not specified
-   *
-   * Analogous to React.js's setProps
-   */
-  update: function (options) {
+  }
+  cloneState() {
+    return _extends({}, this.movable.cloneState(), this.state);
+  }
+  update(options) {
     const self = this;
     const graphie = self.graphie;
     const state = _.extend(self.state, normalizeOptions$1(options));
@@ -15240,11 +15192,15 @@ _.extend(MovablePoint$5.prototype, {
           showTrashTooltip();
           const content = svgElem.getElementsByClassName("tooltip-content")[0];
           content.style.filter = "none";
+
+          // @ts-expect-error - this._tooltip.firstChild is possibly null
           this._tooltip.firstChild.addEventListener("touchstart", e => {
             // Prevent creation of a new point when the event is
             // propagated up the DOM.
             e.stopPropagation();
           }, true);
+
+          // @ts-expect-error - this._tooltip.firstChild is possibly null
           this._tooltip.firstChild.addEventListener("touchend", e => {
             // Remove the point and prevent creation of a
             // new point.
@@ -15266,6 +15222,7 @@ _.extend(MovablePoint$5.prototype, {
 
     // Trigger an add event if this hasn't been added before
     if (!state.added) {
+      // @ts-expect-error - type {} is missing properties from State
       self.prevState = {};
       self._fireEvent(state.add, self.cloneState(), self.prevState);
       state.added = true;
@@ -15277,38 +15234,187 @@ _.extend(MovablePoint$5.prototype, {
 
     // Trigger a modify event
     self._fireEvent(state.modify, self.cloneState(), self.prevState);
-  },
-  remove: function () {
-    this.state.added = false;
-    this._fireEvent(this.state.remove);
-    if (this.movable) {
-      this.movable.remove();
-    }
-    // TODO(jack): This should really be moved off of
-    // movablePoint.state and only kept on movable.state
-    this.state.mouseTarget = null;
-  },
-  constrain: function () {
+  }
+  draw() {
+    const currState = this.cloneState();
+    this._fireEvent(this.state.draw, currState, this.prevState);
+    this.prevState = currState;
+  }
+  constrain() {
     const result = this._applyConstraints(this.coord(), this.coord());
     if (point.is(result)) {
       this.setCoord(result);
     }
     return result !== false;
-  },
-  setCoord: function (coord) {
+  }
+
+  /**
+   * Fire an onSomething type event to all functions in listeners
+   */
+  _fireEvent(listeners, ...args) {
+    for (const listener of listeners) {
+      listener.call(this, ...args);
+    }
+  }
+
+  /**
+   * Combine the array of constraints functions
+   * Returns either an [x, y] coordinate or false
+   */
+  _applyConstraints(current, previous, extraOptions) {
+    let skipRemaining = false;
+    return this.state.constraints.reduce((memo, constraint) => {
+      // A move that has been cancelled won't be propagated to later
+      // constraints calls
+      if (memo === false) {
+        return false;
+      }
+      if (skipRemaining) {
+        return memo;
+      }
+      const result = constraint.call(this, memo, previous, _extends({
+        onSkipRemaining: () => {
+          skipRemaining = true;
+        }
+      }, extraOptions));
+      if (result === false) {
+        // Returning false cancels the move
+        return false;
+      }
+      if (point.is(result, 2)) {
+        // Returning a coord from constraints overrides the move
+        return result;
+      }
+      if (result === true || result == null) {
+        // Returning true or undefined allow the move to occur
+        return memo;
+      }
+      // Anything else is an error
+      throw new PerseusError("Constraint returned invalid result: " + result, Errors.Internal);
+    }, current);
+  }
+
+  /**
+   * Displays a tooltip above the point, replacing any previous contents. If
+   * there is no tooltip initialized, adds the tooltip.
+   *
+   * If the type of contents is string, the contents will be rendered with
+   * KaTeX. Otherwise, the content will be assumed to be a DOM node and will
+   * be appended inside the tooltip.
+   */
+  _showTooltip(contents) {
+    if (!this._tooltip) {
+      this._tooltip = document.createElement("div");
+      this._tooltip.className = "tooltip-content";
+      this.state.visibleShape.wrapper.className = "tooltip";
+      this.state.visibleShape.wrapper.appendChild(this._tooltip);
+
+      // Only one tooltip should be displayed at a time, so store a list
+      // of all the tooltips initialized.
+      tooltipResetFunctions.push(() => {
+        if (this.state.added) {
+          this._hideTooltip();
+        }
+      });
+    }
+    if (this._tooltip.firstChild) {
+      this._tooltip.removeChild(this._tooltip.firstChild);
+    }
+    this.state.visibleShape.wrapper.className = "tooltip visible";
+    this._tooltip.appendChild(document.createElement("span"));
+    if (typeof contents === "string") {
+      // @ts-expect-error - this._tooltip.firstChild is possibly 'null'.
+      processMath(this._tooltip.firstChild, contents, false);
+    } else if (typeof contents === "function") {
+      contents(this._tooltip.firstChild);
+    } else {
+      // @ts-expect-error - this._tooltip.firstChild is possibly 'null'.
+      this._tooltip.firstChild.appendChild(contents);
+    }
+  }
+  _hideTooltip() {
+    if (this._tooltip) {
+      // Without the visible class, tooltips have display: none set
+      this.state.visibleShape.wrapper.className = "tooltip";
+    }
+  }
+  coord() {
+    return this.state.coord;
+  }
+  setCoord(coord) {
     assert$6(point.is(coord, 2));
     this.state.coord = _.clone(coord);
     this.draw();
-  },
-  setCoordConstrained: function (coord) {
+  }
+  setCoordConstrained(coord) {
     assert$6(point.is(coord, 2));
     const result = this._applyConstraints(coord, this.coord());
     if (result !== false) {
       this.state.coord = _.clone(result);
       this.draw();
     }
-  },
-  moveTo: function (coord) {
+  }
+
+  /**
+   * Add a listener to any event: startMove, constraints, onMove, onMoveEnd,
+   * etc. If a listener is already bound to the given eventName and id, then
+   * it is overwritten by func.
+   *
+   * eventName: the string name of the event to listen to. one of:
+   *   "onMoveStart", "onMove", "onMoveEnd", "draw", "remove"
+   *
+   * id: a string id that can be used to remove this event at a later time
+   *   note: adding multiple listeners with the same id is undefined behavior
+   *
+   * func: the function to call when the event happens, which is called
+   *   with the event's standard parameters [usually (coord, prevCoord) or
+   *   (state, prevState)]
+   */
+  // TODO(benchristel): listen() is duplicated in movable.ts
+  listen(eventName, id, func) {
+    this._listenerMap = this._listenerMap || {};
+
+    // If there's an existing handler, replace it by using its index in
+    // `this.state[eventName]`; otherwise, add this handler to the end
+    const key = getKey(eventName, id);
+    const index = this._listenerMap[key] = this._listenerMap[key] || this.state[eventName].length;
+    this.state[eventName][index] = func;
+  }
+
+  /**
+   * Remove a previously added listener, by the id specified in the
+   * corresponding listen() call
+   *
+   * If the given id has not been registered already, this is a no-op
+   */
+  // TODO(benchristel): I don't think unlisten is used. Delete it?
+  // TODO(benchristel): unlisten is duplicated in movable.ts
+  unlisten(eventName, id) {
+    this._listenerMap = this._listenerMap || {};
+    const key = getKey(eventName, id);
+    const index = this._listenerMap[key];
+    if (index !== undefined) {
+      // Remove handler from list of event handlers and listenerMap
+      this.state[eventName].splice(index, 1);
+      delete this._listenerMap[key];
+
+      // Re-index existing events: if they occur after `index`, decrement
+      const keys = _.keys(this._listenerMap);
+      _.each(keys, key => {
+        if (getEventName(key) === eventName && this._listenerMap[key] > index) {
+          this._listenerMap[key]--;
+        }
+      }, this);
+    }
+  }
+  grab(coord) {
+    // Provide an explicit touchOffset override, so that we track the user's
+    // finger when a point has been grabbed.
+    this.state.touchOffset = [0, 0];
+    this.movable.grab(coord);
+    this.moveTo(coord);
+  }
+  moveTo(coord) {
     // The caller has the option of adding an onMove() method to the
     // movablePoint object we return as a sort of event handler
     // By returning false from onMove(), the move can be vetoed,
@@ -15320,8 +15426,11 @@ _.extend(MovablePoint$5.prototype, {
     const result = this._applyConstraints(coord, state.coord, state.onRemove ? {
       onOutOfBounds: () => {
         this.state.outOfBounds = true;
-      }
-    } : {});
+      },
+      onSkipRemaining: () => {}
+    } : {
+      onSkipRemaining: () => {}
+    });
     if (result === false) {
       return;
     }
@@ -15335,49 +15444,98 @@ _.extend(MovablePoint$5.prototype, {
       this._fireEvent(state.onMove, state.coord, prevCoord);
       this.draw();
     }
-  },
-  // Clone these for use with raphael, which modifies the input
-  // style parameters
-  normalStyle: function () {
-    return _.clone(this.state.normalStyle);
-  },
-  highlightStyle: function () {
-    return _.clone(this.state.highlightStyle);
-  },
+  }
+  remove() {
+    this.state.added = false;
+    this._fireEvent(this.state.remove);
+    if (this.movable) {
+      this.movable.remove();
+    }
+    // TODO(jack): This should really be moved off of
+    // movablePoint.state and only kept on movable.state
+    this.state.mouseTarget = null;
+  }
+  pointSize() {
+    return this.state.pointSize;
+  }
+  static() {
+    return this.state.static;
+  }
+  cursor() {
+    return this.state.cursor;
+  }
+  normalStyle() {
+    return this.state.normalStyle;
+  }
+  highlightStyle() {
+    return this.state.highlightStyle;
+  }
+  shadow() {
+    return this.state.shadow;
+  }
+  tooltip() {
+    return this.state.tooltip;
+  }
+  added() {
+    return this.state.added;
+  }
+  hasMoved() {
+    return this.state.hasMoved;
+  }
+  visibleShape() {
+    return this.state.visibleShape;
+  }
+  outOfBounds() {
+    return this.state.outOfBounds;
+  }
+  mouseTarget() {
+    return this.state.mouseTarget;
+  }
+  touchOffset() {
+    return this.state.touchOffset;
+  }
+
+  /**
+   * Forwarding methods to this.movable:
+   */
+  isHovering() {
+    return this.movable.isHovering();
+  }
+  isDragging() {
+    return this.movable.isDragging();
+  }
+
   // Change z-order to back
-  toBack: function () {
+  toBack() {
     this.movable.toBack();
     if (this.state.visibleShape) {
       this.state.visibleShape.toBack();
     }
-  },
+  }
+
   // Change z-order to front
-  toFront: function () {
+  toFront() {
     if (this.state.visibleShape) {
       this.state.visibleShape.toFront();
     }
     this.movable.toFront();
-  },
-  /**
-   * Forwarding methods to this.movable:
-   */
-  isHovering: function () {
-    return this.movable.isHovering();
-  },
-  isDragging: function () {
-    return this.movable.isDragging();
-  },
-  mouseTarget: function () {
-    return this.movable.mouseTarget();
-  },
-  grab: function (coord) {
-    // Provide an explicit touchOffset override, so that we track the user's
-    // finger when a point has been grabbed.
-    this.state.touchOffset = [0, 0];
-    this.movable.grab(coord);
-    this.moveTo(coord);
   }
-});
+}
+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;
+}
+function getEventName(key) {
+  return key.split(":")[0];
+}
 
 /* eslint-disable @babel/no-invalid-this */
 function sum(array) {
@@ -16318,11 +16476,9 @@ class Graphie extends React.Component {
       });
       // Only add the mouselayer if we actually want one.
       if (this.props.addMouseLayer) {
-        // @ts-expect-error - TS2339: Property 'addMouseLayer' does not exist on type 'Graphie'.
         graphie.addMouseLayer({
           onClick: this.props.onClick,
           onMouseDown: this.props.onMouseDown,
-          onMouseUp: this.props.onMouseUp,
           onMouseMove: this.props.onMouseMove,
           setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
         });
@@ -26338,11 +26494,7 @@ class FunctionGrapher extends React.Component {
         key: i,
         coord: coord,
         static: this.props.static,
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), coord => {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           // Always enforce that this is a function
           const isFunction = _.all(this._coords(), (otherCoord, j) => {
             return i === j || !otherCoord || !number.equal(coord[0], otherCoord[0]);
@@ -27929,22 +28081,20 @@ class Graph extends React.Component {
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         // eslint-disable-next-line @babel/no-invalid-this
         this.props.onMouseDown(coord);
-      }, this) : null;
+      }, this) : undefined;
       const onMouseOver = $instructionsWrapper ? function () {
         $instructionsWrapper && $instructionsWrapper.css("opacity", invisible);
-      } : null;
+      } : undefined;
       const onMouseOut = $instructionsWrapper ? function () {
         $instructionsWrapper && $instructionsWrapper.css("opacity", visible);
-      } : null;
+      } : undefined;
       /* eslint-enable indent */
 
-      // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
       graphie.addMouseLayer({
         onClick: this.props.onClick,
         onMouseDown: onMouseDown,
         onMouseOver: onMouseOver,
         onMouseOut: onMouseOut,
-        onMouseUp: this.props.onMouseUp,
         onMouseMove: this.props.onMouseMove,
         allowScratchpad: true,
         setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
@@ -28299,11 +28449,7 @@ class InteractiveGraph extends React.Component {
       const points = self.points = _.map(coords, coord => {
         return Interactive2.addMaybeMobileMovablePoint(this, {
           coord: coord,
-          constraints: [
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovablePoint.constraints.bound(),
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovablePoint.constraints.snap()],
+          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap()],
           onMove: () => {
             const graph = _.extend({}, self.props.graph, {
               coords: _.invoke(points, "coord")
@@ -28374,11 +28520,7 @@ class InteractiveGraph extends React.Component {
       let pointA = null;
       pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
         coord: coords[0],
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), coord => {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           return !pointA ||
           // @ts-expect-error - TS2531 - Object is possibly 'null'.
           coord[0] !== pointB.coord()[0] &&
@@ -28394,11 +28536,7 @@ class InteractiveGraph extends React.Component {
       let pointB = null;
       pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
         coord: coords[1],
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), coord => {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           return !pointB ||
           // @ts-expect-error - TS2531 - Object is possibly 'null'.
           coord[0] !== pointA.coord()[0] &&
@@ -28414,11 +28552,7 @@ class InteractiveGraph extends React.Component {
       let pointC = null;
       pointC = this.pointC = Interactive2.addMaybeMobileMovablePoint(this, {
         coord: coords[2],
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), coord => {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           return !pointC ||
           // @ts-expect-error - TS2531 - Object is possibly 'null'.
           coord[0] !== pointA.coord()[0] &&
@@ -28491,22 +28625,14 @@ class InteractiveGraph extends React.Component {
       let pointA = null;
       pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
         coord: coords[0],
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), coord => {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           return !pointA || coord[0] !== pointB.coord()[0];
         }],
         onMove: onMoveHandler
       });
       const pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
         coord: coords[1],
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), coord => {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           // @ts-expect-error - TS2339 - Property 'coord' does not exist on type 'never'.
           return !pointA || coord[0] !== pointA.coord()[0];
         }],
@@ -28590,11 +28716,7 @@ class InteractiveGraph extends React.Component {
           const coord = segmentCoords[i];
           segmentPoints.push(Interactive2.addMaybeMobileMovablePoint(this, {
             coord: coord,
-            constraints: [
-            // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-            Interactive2.MovablePoint.constraints.bound(),
-            // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-            Interactive2.MovablePoint.constraints.snap(), coord => {
+            constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
               const otherSegment = segmentPoints[1 - i];
               if (!otherSegment) {
                 // segment hasn't been defined yet
@@ -28669,11 +28791,7 @@ class InteractiveGraph extends React.Component {
       let point$1 = null;
       point$1 = Interactive2.addMaybeMobileMovablePoint(this, _extends({
         coord: coord,
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), function (coord) {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), function (coord) {
           // TODO(jack): There ought to be a
           // MovablePoint.constraints.avoid
           // default that lets you do things like this
@@ -28957,11 +29075,7 @@ class InteractiveGraph extends React.Component {
       };
       const point$1 = Interactive2.addMaybeMobileMovablePoint(this, _extends({
         coord: coord,
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(), snapToGrid ?
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap() : null, graphConstraint],
+        constraints: [Interactive2.MovablePoint.constraints.bound(), snapToGrid ? Interactive2.MovablePoint.constraints.snap() : null, graphConstraint],
         onMoveStart: () => {
           if (this.isClickToAddPoints()) {
             this.setTrashCanVisibility(1);
@@ -29053,11 +29167,7 @@ class InteractiveGraph extends React.Component {
           const coord = segment[_i];
           points.push(createPoint({
             coord: coord,
-            constraints: [
-            // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-            Interactive2.MovablePoint.constraints.bound(),
-            // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-            Interactive2.MovablePoint.constraints.snap(), coord => {
+            constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
               const otherPoint = points[1 - _i];
               if (!otherPoint) {
                 // point hasn't been defined yet
@@ -33792,7 +33902,6 @@ const Measurer = createReactClass({
       range: range,
       scale: scale
     });
-    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -38301,7 +38410,6 @@ class Plotter extends React.Component {
         scale: c.scale,
         isMobile: this.props.apiOptions.isMobile
       });
-      // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
       graphie.addMouseLayer({
         allowScratchpad: true,
         setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -38710,7 +38818,6 @@ class Plotter extends React.Component {
         if (i > 0) {
           c.graph.lines[i] = Interactive2.addMovableLine(graphie, {
             points: [c.graph.points[i - 1], c.graph.points[i]],
-            // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
             constraints: Interactive2.MovablePoint.constraints.fixed(),
             normalStyle: {
               stroke: KhanColors.BLUE_C,
@@ -41600,7 +41707,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 = "19.1.6";
+const libVersion = "19.1.7";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {