@khanacademy/perseus 19.1.4 → 19.1.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @khanacademy/perseus
 
+## 19.1.5
+
+### Patch Changes
+
+-   [#964](https://github.com/Khan/perseus/pull/964) [`d8fbc251`](https://github.com/Khan/perseus/commit/d8fbc25170bd671ad984893553f79f44e3a0d048) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Refactor Movable to be an ES6 class
+
+-   Updated dependencies [[`d8fbc251`](https://github.com/Khan/perseus/commit/d8fbc25170bd671ad984893553f79f44e3a0d048), [`ba44dd40`](https://github.com/Khan/perseus/commit/ba44dd405272b066615099c8bd30033715305939)]:
+    -   @khanacademy/kmath@0.1.11
+    -   @khanacademy/math-input@17.0.4
+
 ## 19.1.4
 
 ### Patch Changes

package/dist/components/graphie.d.ts

@@ -32,6 +32,9 @@ type DefaultProps = {
 };
 interface Movable {
     remove(): void;
+    props: unknown;
+    modify(graphie: GraphieDrawingContext): "reordered" | undefined;
+    toFront(): void;
 }
 declare class Graphie extends React.Component<Props> {
     graphieDivRef: React.RefObject<HTMLDivElement>;
@@ -56,7 +59,12 @@ declare class Graphie extends React.Component<Props> {
     _scale: () => Coord;
     _setupGraphie: () => void;
     _removeMovables: () => void;
-    _renderMovables: (children: ReadonlyArray<any>, arg2: any) => React.ReactElement;
+    _renderMovables: (children: ReadonlyArray<any>, arg2: {
+        nextKey: number;
+        graphie: GraphieDrawingContext;
+        oldMovables: Record<string, Movable>;
+        newMovables: Record<string, Movable>;
+    }) => React.ReactElement;
     _updateMovables: () => void;
     render(): React.ReactNode;
 }

package/dist/es/index.js

@@ -3975,10 +3975,10 @@ FixedToResponsive.defaultProps = {
 
 /* Local helper methods. */
 
-function getKey(eventName, id) {
+function getKey$1(eventName, id) {
   return eventName + ":" + id;
 }
-function getEventName(key) {
+function getEventName$1(key) {
   return key.split(":")[0];
 }
 const MovableHelperMethods = {
@@ -4055,7 +4055,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(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;
   },
@@ -4067,7 +4067,7 @@ const MovableHelperMethods = {
    */
   unlisten: function (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
@@ -4077,7 +4077,7 @@ const MovableHelperMethods = {
       // Re-index existing events: if they occur after `index`, decrement
       const keys = _.keys(this._listenerMap);
       _.each(keys, function (key) {
-        if (getEventName(key) === eventName &&
+        if (getEventName$1(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.
@@ -8705,6 +8705,10 @@ class Graphie$1 {
     // Refactor to accessor methods that look at this.dimensions.
     this.xpixels = void 0;
     this.ypixels = void 0;
+    // set by Movables
+    // TODO(benchristel): consider putting this state on the Movable instead of
+    // on the Graphie
+    this.isDragging = void 0;
     this.label = (point, text, direction, arg4, arg5) => {
       const style = typeof arg4 === "object" ? arg4 : arg5;
       const latex = typeof arg4 === "boolean" ? arg4 : true;
@@ -9526,6 +9530,11 @@ class Graphie$1 {
     });
     return processed;
   }
+
+  // This is a stub that's overridden in interactive.ts
+  getMouseCoord(event) {
+    throw new Error("getMouseCoord is a stub, and is not implemented");
+  }
 }
 const labelDirections = {
   center: [-0.5, -0.5],
@@ -13722,8 +13731,7 @@ var GraphieClasses = {
 const normalizeOptions$3 = InteractiveUtil.normalizeOptions;
 const assert$8 = InteractiveUtil.assert;
 
-// Default "props" and "state". Both are added to this.state and
-// receive magic getter methods (this.isHovering() etc).
+// Default "props" and "state". Both are added to this.state.
 // However, properties in DEFAULT_PROPS are updated on `modify()`,
 // while those in DEFAULT_STATE persist and are not updated.
 // Things that the user might want to change should be on "props",
@@ -13738,27 +13746,23 @@ const DEFAULT_STATE$3 = {
   isDragging: false,
   mouseTarget: null
 };
-const Movable = function Movable(graphie, options) {
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  _.extend(this, {
-    graphie,
-    state: {
-      // Set here because this must be unique for each instance
+class Movable {
+  constructor(graphie, options) {
+    this.graphie = void 0;
+    this.state = void 0;
+    this.prevState = void 0;
+    // TODO(benchristel): delete _listenerMap; it's unused
+    this._listenerMap = {};
+    this.graphie = graphie;
+    this.state = {
       id: _.uniqueId("movable")
-    }
-  });
-
-  // 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$3, options));
-};
-InteractiveUtil.createGettersFor(Movable, _.extend({}, DEFAULT_PROPS$3, DEFAULT_STATE$3));
-InteractiveUtil.addMovableHelperMethodsTo(Movable);
-_.extend(Movable.prototype, {
-  cloneState: function () {
-    return _extends({}, this.state);
-  },
-  _createDefaultState: function () {
+    };
+    this.modify(_extends({}, DEFAULT_STATE$3, options));
+  }
+  modify(options) {
+    this.update(_extends({}, this._createDefaultState(), options));
+  }
+  _createDefaultState() {
     return _extends({
       id: this.state.id,
       add: [],
@@ -13770,63 +13774,11 @@ _.extend(Movable.prototype, {
       onMoveEnd: [],
       onClick: []
     }, DEFAULT_PROPS$3);
-  },
-  /**
-   * Resets the object to its state as if it were constructed with
-   * `options` originally. The only state maintained is `state.id`
-   *
-   * Analogous to React.js's replaceProps
-   */
-  modify: function (options) {
-    this.update(_extends({}, this._createDefaultState(), options));
-  },
-  /**
-   * Simulates a mouse grab event on the movable object.
-   */
-  grab: function (coord) {
-    assert$8(point.is(coord));
-    const self = this;
-    const graphie = self.graphie;
-    const state = self.state;
-    state.isHovering = true;
-    state.isDragging = true;
-    graphie.isDragging = true;
-    const startMouseCoord = coord;
-    let prevMouseCoord = startMouseCoord;
-    self._fireEvent(state.onMoveStart, startMouseCoord, startMouseCoord);
-    const moveHandler = function moveHandler(e) {
-      e.preventDefault();
-      const mouseCoord = graphie.getMouseCoord(e);
-      self._fireEvent(state.onMove, mouseCoord, prevMouseCoord);
-      self.draw();
-      prevMouseCoord = mouseCoord;
-    };
-    const upHandler = function upHandler(e) {
-      $(document).unbind("vmousemove", moveHandler);
-      $(document).unbind("vmouseup", upHandler);
-      if (state.isHovering) {
-        self._fireEvent(state.onClick, prevMouseCoord, startMouseCoord);
-      }
-      state.isHovering = self.state.isMouseOver;
-      state.isDragging = false;
-      graphie.isDragging = false;
-      self._fireEvent(state.onMoveEnd, prevMouseCoord, startMouseCoord);
-      self.draw();
-    };
-    $(document).bind("vmousemove", moveHandler);
-    $(document).bind("vmouseup", upHandler);
-  },
-  /**
-   * Adjusts constructor parameters without changing previous settings
-   * for any option not specified
-   *
-   * Analogous to React.js's setProps
-   */
-  update: function (options) {
-    const self = this;
-    const graphie = self.graphie;
-    const prevState = self.cloneState();
-    const state = _.extend(self.state, normalizeOptions$3(options));
+  }
+  update(options) {
+    const graphie = this.graphie;
+    const prevState = this.cloneState();
+    const state = Object.assign(this.state, normalizeOptions$3(options));
 
     // the invisible shape in front of the point that gets mouse events
     if (state.mouseTarget && !prevState.mouseTarget) {
@@ -13838,24 +13790,24 @@ _.extend(Movable.prototype, {
       }
       const isMouse = !("ontouchstart" in window);
       if (isMouse) {
-        $mouseTarget.on("vmouseover", function () {
+        $mouseTarget.on("vmouseover", () => {
           state.isMouseOver = true;
           if (!graphie.isDragging) {
             state.isHovering = true;
           }
-          if (self.state.added) {
+          if (this.state.added) {
             // Avoid drawing if the point has been removed
-            self.draw();
+            this.draw();
           }
         });
-        $mouseTarget.on("vmouseout", function () {
+        $mouseTarget.on("vmouseout", () => {
           state.isMouseOver = false;
           if (!state.isDragging) {
             state.isHovering = false;
           }
-          if (self.state.added) {
+          if (this.state.added) {
             // Avoid drawing if the point has been removed
-            self.draw();
+            this.draw();
           }
         });
       }
@@ -13867,13 +13819,13 @@ _.extend(Movable.prototype, {
       }, {
         passive: false
       });
-      $mouseTarget.on("vmousedown", function (e) {
+      $mouseTarget.on("vmousedown", e => {
         if (e.which !== 0 && e.which !== 1) {
           return;
         }
         e.preventDefault();
         const mouseCoord = graphie.getMouseCoord(e);
-        self.grab(mouseCoord);
+        this.grab(mouseCoord);
       });
     }
     if (state.mouseTarget && state.cursor !== undefined) {
@@ -13890,39 +13842,212 @@ _.extend(Movable.prototype, {
 
     // Trigger an add event if this hasn't been added before
     if (!state.added) {
-      self._fireEvent(state.modify, self.cloneState(), {});
+      // TODO(benchristel): No one seems to handle the modify event. Can
+      // we delete this?
+      // @ts-expect-error - TS2345: Argument of type '{}' is not assignable to parameter of type 'State'.
+      this._fireEvent(state.modify, this.cloneState(), {});
       state.added = true;
 
       // Update the state for `added` and in case the add event
       // changed it
-      self.prevState = self.cloneState();
+      this.prevState = this.cloneState();
     }
 
     // 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.state.mouseTarget) {
-      $(this.state.mouseTarget).off();
-      this.state.mouseTarget.remove();
-      this.state.mouseTarget = null;
+    this._fireEvent(state.modify, this.cloneState(), this.prevState);
+  }
+  cloneState() {
+    return _extends({}, this.state);
+  }
+
+  /**
+   * Fire an onSomething type event to all functions in listeners
+   */
+  _fireEvent(listeners, ...args) {
+    if (listeners == null) {
+      return;
     }
-  },
+    for (const listener of listeners) {
+      listener.call(this, ...args);
+    }
+  }
+
+  /**
+   * Call all draw functions, and update our prevState for the next
+   * draw function
+   */
+  draw() {
+    const currState = this.cloneState();
+    this._fireEvent(this.state.draw, currState, this.prevState);
+    this.prevState = currState;
+  }
+
+  /**
+   * Simulates a mouse grab event on the movable object.
+   */
+  grab(coord) {
+    assert$8(point.is(coord));
+    const graphie = this.graphie;
+    const state = this.state;
+    state.isHovering = true;
+    state.isDragging = true;
+    graphie.isDragging = true;
+    const startMouseCoord = coord;
+    let prevMouseCoord = startMouseCoord;
+    this._fireEvent(state.onMoveStart, startMouseCoord, startMouseCoord);
+    const moveHandler = e => {
+      e.preventDefault();
+      const mouseCoord = graphie.getMouseCoord(e);
+      this._fireEvent(state.onMove, mouseCoord, prevMouseCoord);
+      this.draw();
+      prevMouseCoord = mouseCoord;
+    };
+    const upHandler = () => {
+      $(document).unbind("vmousemove", moveHandler);
+      $(document).unbind("vmouseup", upHandler);
+      if (state.isHovering) {
+        this._fireEvent(state.onClick, prevMouseCoord, startMouseCoord);
+      }
+      state.isHovering = this.state.isMouseOver;
+      state.isDragging = false;
+      graphie.isDragging = false;
+      this._fireEvent(state.onMoveEnd, prevMouseCoord, startMouseCoord);
+      this.draw();
+    };
+    $(document).bind("vmousemove", moveHandler);
+    $(document).bind("vmouseup", upHandler);
+  }
+  _applyConstraints(current, previous, extraOptions) {
+    var _this$state$constrain;
+    let skipRemaining = false;
+    return ((_this$state$constrain = this.state.constraints) != null ? _this$state$constrain : []).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);
+  }
+
   // Change z-order to back
-  toBack: function () {
+  toBack() {
     if (this.state.mouseTarget) {
       this.state.mouseTarget.toBack();
     }
-  },
+  }
+
   // Change z-order to front
-  toFront: function () {
+  toFront() {
     if (this.state.mouseTarget) {
       this.state.mouseTarget.toFront();
     }
   }
-});
+
+  /**
+   * 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)]
+   */
+  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
+   */
+  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);
+      keys.forEach(key => {
+        if (getEventName(key) === eventName && this._listenerMap[key] > index) {
+          this._listenerMap[key]--;
+        }
+      });
+    }
+  }
+  remove() {
+    this.state.added = false;
+    this._fireEvent(this.state.remove);
+    if (this.state.mouseTarget) {
+      $(this.state.mouseTarget).off();
+      this.state.mouseTarget.remove();
+      this.state.mouseTarget = null;
+    }
+  }
+  cursor() {
+    return this.state.cursor;
+  }
+  added() {
+    return this.state.added;
+  }
+  isHovering() {
+    return this.state.isHovering;
+  }
+  isMouseOver() {
+    return this.state.isMouseOver;
+  }
+  isDragging() {
+    return this.state.isDragging;
+  }
+  mouseTarget() {
+    return this.state.mouseTarget;
+  }
+}
+function getKey(eventName, id) {
+  return eventName + ":" + id;
+}
+function getEventName(key) {
+  return key.split(":")[0];
+}
 
 /* eslint-disable @babel/no-invalid-this */
 /**
@@ -14764,31 +14889,39 @@ const constraints$1 = {
   snap: function (snap) {
     return function (coord) {
       if (snap === null) {
-        // NOTE(kevinb): this should probably return the original point
+        // TODO(benchristel), NOTE(kevinb): this should probably return
+        // the original point
         return true;
       }
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      snap = snap || this.graphie.snap;
-      return point.roundTo(coord, snap);
+      // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
+      return point.roundTo(coord, snap || this.graphie.snap);
     };
   },
-  bound: function (range, snap, paddingPx) {
-    if (paddingPx === undefined) {
-      if (range === undefined) {
-        paddingPx = 10;
+  bound: function (range, snap, optionalPaddingPx) {
+    const paddingPx = (() => {
+      if (optionalPaddingPx === undefined) {
+        if (range === undefined) {
+          return 10;
+        } else {
+          return 0;
+        }
       } else {
-        paddingPx = 0;
+        return optionalPaddingPx;
       }
-    }
+    })();
     return function (coord, prev, options) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
       const graphie = this.graphie;
       range = range || graphie.range;
       if (snap === undefined) {
+        // @ts-expect-error - Property 'snap' does not exist on type 'Graphie'.
         snap = graphie.snap;
       }
-      let lower = graphie.unscalePoint([paddingPx, graphie.ypixels - paddingPx]);
-      let upper = graphie.unscalePoint([graphie.xpixels - paddingPx, paddingPx]);
+      let lower = graphie.unscalePoint([paddingPx,
+      // @ts-expect-error - 'graphie.ypixels' is possibly 'undefined'.
+      graphie.ypixels - paddingPx]);
+      let upper = graphie.unscalePoint([
+      // @ts-expect-error - 'graphie.ypixels' is possibly 'undefined'.
+      graphie.xpixels - paddingPx, paddingPx]);
       if (snap) {
         lower = point.ceilTo(lower, snap);
         upper = point.floorTo(upper, snap);
@@ -41467,7 +41600,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.4";
+const libVersion = "19.1.5";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {