@khanacademy/perseus 19.1.6 → 19.1.7

package/dist/index.js

@@ -284,7 +284,11 @@ class MathInput extends React__namespace.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;
@@ -3999,10 +4003,10 @@ class FixedToResponsive extends React__namespace.Component {
 
 /* 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 = {
@@ -4083,7 +4087,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;
   },
@@ -4095,7 +4099,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
@@ -4105,7 +4109,7 @@ const MovableHelperMethods = {
       // Re-index existing events: if they occur after `index`, decrement
       const keys = ___default["default"].keys(this._listenerMap);
       ___default["default"].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.
@@ -9546,6 +9550,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],
@@ -14019,7 +14026,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;
   }
@@ -14032,7 +14039,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
@@ -14042,7 +14049,7 @@ class Movable {
       // Re-index existing events: if they occur after `index`, decrement
       const keys = ___default["default"].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]--;
         }
       });
@@ -14076,10 +14083,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];
 }
 
@@ -15032,103 +15039,53 @@ 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 (graphie, movable, options) {
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  ___default["default"].extend(this, {
-    graphie,
-    movable,
-    state: {
-      // Set here because this must be unique for each instance
-      id: ___default["default"].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(___default["default"].extend({}, DEFAULT_STATE$1, options));
-};
-___default["default"].extend(MovablePoint$5, MovablePointOptions);
-InteractiveUtil.createGettersFor(MovablePoint$5, ___default["default"].extend({}, DEFAULT_PROPS$1, DEFAULT_STATE$1));
-InteractiveUtil.addMovableHelperMethodsTo(MovablePoint$5);
-___default["default"].extend(MovablePoint$5.prototype, {
-  cloneState: function () {
-    return ___default["default"].extend(this.movable.cloneState(), this.state);
-  },
-  _createDefaultState: function () {
-    return ___default["default"].extend({
-      id: this.state.id
-    }, normalizeOptions$1(
-    // Defaults are copied from MovablePointOptions.*.standard
-    // These defaults are set here instead of DEFAULT_PROPS/STATE
-    // because they:
-    //    - are objects, not primitives (and need a deeper copy)
-    //    - they don't need getters created for them
-    // TODO(jack): Consider "default" once we es3ify perseus
-    objective_.pluck(MovablePointOptions, "standard")
+class MovablePoint$5 {
+  // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
 
-    // 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) {
+  _listenerMap = {};
+  constructor(graphie, movable, options) {
+    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: ___default["default"].uniqueId("movablePoint")
+    };
+    this.modify({
+      ...DEFAULT_STATE$1,
+      ...options
+    });
+  }
+  modify(options) {
     this.update(___default["default"].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);
+  }
+  _createDefaultState() {
+    return {
+      id: this.state.id,
+      ...normalizeOptions$1(
+      // Defaults are copied from MovablePointOptions.*.standard
+      // These defaults are set here instead of DEFAULT_PROPS/STATE
+      // because they:
+      //    - are objects, not primitives (and need a deeper copy)
+      //    - 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()
+      ),
 
-      // 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) {
+      ...DEFAULT_PROPS$1
+    };
+  }
+  cloneState() {
+    return {
+      ...this.movable.cloneState(),
+      ...this.state
+    };
+  }
+  update(options) {
     const self = this;
     const graphie = self.graphie;
     const state = ___default["default"].extend(self.state, normalizeOptions$1(options));
@@ -15278,11 +15235,15 @@ ___default["default"].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.
@@ -15304,6 +15265,7 @@ ___default["default"].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;
@@ -15315,38 +15277,191 @@ ___default["default"].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 (kmath.point.is(result)) {
       this.setCoord(result);
     }
     return result !== false;
-  },
-  setCoord: function (coord) {
+  }
+
+  /**
+   * Fire an onSomething type event to all functions in listeners
+   */
+  _fireEvent(listeners) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    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, {
+        onSkipRemaining: () => {
+          skipRemaining = true;
+        },
+        ...extraOptions
+      });
+      if (result === false) {
+        // Returning false cancels the move
+        return false;
+      }
+      if (kmath.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(kmath.point.is(coord, 2));
     this.state.coord = ___default["default"].clone(coord);
     this.draw();
-  },
-  setCoordConstrained: function (coord) {
+  }
+  setCoordConstrained(coord) {
     assert$6(kmath.point.is(coord, 2));
     const result = this._applyConstraints(coord, this.coord());
     if (result !== false) {
       this.state.coord = ___default["default"].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 = ___default["default"].keys(this._listenerMap);
+      ___default["default"].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,
@@ -15358,8 +15473,11 @@ ___default["default"].extend(MovablePoint$5.prototype, {
     const result = this._applyConstraints(coord, state.coord, state.onRemove ? {
       onOutOfBounds: () => {
         this.state.outOfBounds = true;
-      }
-    } : {});
+      },
+      onSkipRemaining: () => {}
+    } : {
+      onSkipRemaining: () => {}
+    });
     if (result === false) {
       return;
     }
@@ -15373,49 +15491,98 @@ ___default["default"].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 ___default["default"].clone(this.state.normalStyle);
-  },
-  highlightStyle: function () {
-    return ___default["default"].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);
   }
-});
+  static add = MovablePointOptions.add;
+  static modify = MovablePointOptions.modify;
+  static draw = MovablePointOptions.draw;
+  static remove = MovablePointOptions.remove;
+  static onMoveStart = MovablePointOptions.onMoveStart;
+  static constraints = MovablePointOptions.constraints;
+  static onMove = MovablePointOptions.onMove;
+  static onMoveEnd = MovablePointOptions.onMoveEnd;
+  static 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) {
@@ -16391,11 +16558,9 @@ class Graphie extends React__namespace.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
       });
@@ -26430,11 +26595,7 @@ class FunctionGrapher extends React__namespace.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 = ___default["default"].all(this._coords(), (otherCoord, j) => {
             return i === j || !otherCoord || !kmath.number.equal(coord[0], otherCoord[0]);
@@ -28122,22 +28283,20 @@ class Graph extends React__namespace.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
@@ -28500,11 +28659,7 @@ class InteractiveGraph extends React__namespace.Component {
     const points = self.points = ___default["default"].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 = ___default["default"].extend({}, self.props.graph, {
             coords: ___default["default"].invoke(points, "coord")
@@ -28575,11 +28730,7 @@ class InteractiveGraph extends React__namespace.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] &&
@@ -28595,11 +28746,7 @@ class InteractiveGraph extends React__namespace.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] &&
@@ -28615,11 +28762,7 @@ class InteractiveGraph extends React__namespace.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] &&
@@ -28690,22 +28833,14 @@ class InteractiveGraph extends React__namespace.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];
       }],
@@ -28786,11 +28921,7 @@ class InteractiveGraph extends React__namespace.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
@@ -28865,11 +28996,7 @@ class InteractiveGraph extends React__namespace.Component {
     let point = null;
     point = 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(), 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
@@ -29144,11 +29271,7 @@ class InteractiveGraph extends React__namespace.Component {
     };
     const point = 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(), 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);
@@ -29240,11 +29363,7 @@ class InteractiveGraph extends React__namespace.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
@@ -33938,7 +34057,6 @@ const Measurer = createReactClass__default["default"]({
       range: range,
       scale: scale
     });
-    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -38481,7 +38599,6 @@ class Plotter extends React__namespace.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
@@ -38894,7 +39011,6 @@ class Plotter extends React__namespace.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,
@@ -41746,7 +41862,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {